/* ============================================================
   FOUNDERS STRIP — assets/css/founders-strip.css
   Shared include: includes/sections/founders-strip.php
   Reuses the homepage founders arch-card language (fd-* in
   assets/css/hero.css): gradient arch frame, mint stage,
   top accent-bar sweep on hover, translateY lift + deep teal
   shadow. All strip styles live here — nothing inline in the PHP.
   Self-contained: CSS variables fall back to the site palette
   in case base.css variables are unavailable.
   ============================================================ */

.fs-strip {
  position: relative;
  padding: 70px 0 80px 0;
  background: #FFFFFF;
  border-top: 1px solid var(--border-light, #E5E7EB);
  overflow: hidden;
}

.fs-row { position: relative; }

/* --- Card: top accent-bar sweep + lift + deep teal shadow --- */
.fs-card {
  position: relative;
  height: 100%;
  background: #FFFFFF;
  border: 1px solid var(--border-mint, #CCFBF1);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: var(--shadow-soft, 0 4px 18px rgba(0, 122, 120, 0.06));
  transition: transform 0.5s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.fs-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--mint-400, #5EEAD4), var(--teal-main, #00A896) 55%, var(--teal-deep, #007A78));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 5;
}

.fs-card:hover {
  border-color: var(--teal-main, #00A896);
  box-shadow: 0 26px 50px -18px rgba(0, 122, 120, 0.30);
  transform: translateY(-6px);
}

.fs-card:hover::after { transform: scaleX(1); }

/* --- Photo stage (compact arch, homepage language) --- */
.fs-stage {
  position: relative;
  height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 50% 100%, rgba(94, 234, 212, 0.35), transparent 60%),
    linear-gradient(180deg, var(--mint-50, #E6F9F6) 0%, #F2FCFA 100%);
  border-bottom: 1px solid var(--mint-100, #CCFBF1);
}

.fs-ring {
  position: absolute;
  width: 212px;
  height: 212px;
  border-radius: 50%;
  border: 2px dashed var(--mint-200, #A7F3D0);
  animation: fsSpin 26s linear infinite;
}

@keyframes fsSpin { to { transform: rotate(360deg); } }

.fs-arch {
  position: relative;
  width: 156px;
  height: 204px;
  padding: 4px;
  border-radius: 999px 999px 26px 26px;
  background: linear-gradient(160deg, var(--mint-400, #5EEAD4), var(--teal-main, #00A896) 55%, var(--teal-deep, #007A78));
  box-shadow: 0 18px 34px -12px rgba(0, 90, 88, 0.45);
  z-index: 2;
}

.fs-arch-in {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 995px 995px 22px 22px;
  overflow: hidden;
  background: linear-gradient(160deg, #FFFFFF, var(--mint-50, #E6F9F6));
}

.fs-mono {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.8rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--teal-deep, #007A78);
}

.fs-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.8s ease;
}

.fs-card:hover .fs-photo { transform: scale(1.08); }

.fs-dot {
  position: absolute;
  right: 18px;
  bottom: 26px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #10B981;
  border: 3px solid #FFFFFF;
  animation: fsPulse 2s ease-out infinite;
}

@keyframes fsPulse {
  0%   { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.55); }
  100% { box-shadow: 0 0 0 11px rgba(16, 185, 129, 0); }
}

/* --- Details --- */
.fs-body {
  padding: 26px 28px 28px 28px;
  text-align: center;
}

.fs-name {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--text-dark, #111827);
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}

.fs-role {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--teal-deep, #007A78);
  line-height: 1.4;
  margin-bottom: 12px;
}

.fs-bio {
  font-size: 0.85rem;
  color: var(--text-body, #4B5563);
  line-height: 1.68;
  margin-bottom: 20px;
}

.fs-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-top: 1px solid var(--mint-50, #E6F9F6);
  padding-top: 18px;
}

.fs-social-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  overflow: hidden;
  isolation: isolate;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--text-body, #4B5563);
  background: var(--bg-subtle, #F4FBFA);
  border: 1px solid var(--border-mint, #CCFBF1);
  padding: 8px 16px;
  border-radius: 50px;
  text-decoration: none;
  transition: color 0.3s ease, border-color 0.3s ease, transform 0.25s ease;
}

.fs-social-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--teal-main, #00A896), var(--teal-deep, #007A78));
  transform: translateY(101%);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: -1;
}

.fs-social-btn:hover { color: #FFFFFF; border-color: var(--teal-deep, #007A78); transform: translateY(-2px); }
.fs-social-btn:hover::before { transform: translateY(0); }

/* --- Responsive: cards stack vertically, full width, nothing clipped --- */
@media (max-width: 991px) {
  .fs-strip { padding: 60px 0 70px 0; }
}

@media (max-width: 767px) {
  .fs-strip { padding: 50px 0 60px 0; }
  .fs-row .col-md-6 { width: 100%; max-width: 100%; flex: 0 0 100%; }
  .fs-card { width: 100%; }
  .fs-stage { height: 240px; }
  .fs-arch { width: 148px; height: 196px; }
  .fs-ring { width: 198px; height: 198px; }
  .fs-body { padding: 24px 20px 26px 20px; }
}

@media (max-width: 575px) {
  .fs-strip { padding: 45px 0 55px 0; }
  .fs-stage { height: 230px; }
}

@media (prefers-reduced-motion: reduce) {
  .fs-ring, .fs-dot { animation: none !important; }
}

/* Scoped fallback: the strip heading link uses .svc-more-note, which
   no site stylesheet defines — without this it would render as a
   plain browser link. Scoped to .fs-strip so nothing else changes. */
.fs-strip .svc-more-note { color: #00A896; text-decoration: none; }
.fs-strip .svc-more-note:hover { color: #007A78; text-decoration: underline; }