/* ============================================================
   VIGOR GROUP — Leadership & Team page styles  (v2 · Aeline × Squeeze)
   Page-specific grids, team cards & the section CTA band only.
   Shared tokens/components (.card, .tag, .eyebrow, .section*,
   .glow, .page-hero …) are reused from the global system.
   No hardcoded colours — var(--…) tokens only.
   ============================================================ */

/* ---------- A. Philosophy — navy impact moment ---------- */
.philosophy { overflow: hidden; isolation: isolate; }
.philosophy__glow {
  top: -160px;
  left: 50%;
  width: 620px;
  height: 620px;
  transform: translateX(-50%);
  opacity: .4;
}
.philosophy .section-head { margin-bottom: clamp(28px, 3vw, 44px); }
.philosophy-text {
  text-align: center;
  max-width: 60ch;
  margin-inline: auto;
  color: #c3c8ee;
}

/* big editorial index number, sits above the eyebrow, centred in heads */
.section-index { display: inline-block; margin-bottom: var(--s-3); }
.section-head.is-center .section-index { display: block; }

/* ============================================================
   Team grids
   ============================================================ */
.team-grid {
  display: grid;
  gap: clamp(20px, 2.4vw, 32px);
}

/* Three executives sit in a balanced 3-up row beneath the founder feature. */
.team-grid--leaders {
  grid-template-columns: repeat(3, 1fr);
  margin-top: clamp(20px, 2.4vw, 32px);
}

/* Department heads: 3-up → 2-up → 1-up */
.team-grid--heads {
  grid-template-columns: repeat(3, 1fr);
}

/* ============================================================
   Team card (shared base)
   ============================================================ */
.team-card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  position: relative;
  isolation: isolate;
  box-shadow: var(--sh-sm);
  transition: transform var(--dur-3) var(--ease),
              box-shadow var(--dur-3) var(--ease),
              border-color var(--dur-3) var(--ease);
}

/* brand accent bar that grows in on hover */
.team-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--grad-brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-3) var(--ease);
  z-index: 3;
}
.team-card.card--lift:hover {
  transform: translateY(-8px);
  box-shadow: var(--sh-lg);
  border-color: transparent;
}
.team-card.card--lift:hover::before { transform: scaleX(1); }

/* ---------- Portrait media (uniform premium crop for varied sources) ---------- */
.team-card__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  /* indigo-tinted backdrop so headshots + event photos sit uniformly */
  background:
    radial-gradient(120% 90% at 50% 0%, var(--gold-200), transparent 70%),
    linear-gradient(160deg, var(--paper-2), var(--bg-alt));
}
.team-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform var(--dur-4) var(--ease);
}
.team-card.card--lift:hover .team-card__media img { transform: scale(1.04); }
/* gentle gradient veil at the base of the portrait for premium depth */
.team-card__media::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 42%;
  background: linear-gradient(180deg, transparent, rgba(8, 8, 31, .16));
  z-index: 1;
}

/* ---------- Card body ---------- */
.team-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: clamp(20px, 2vw, 28px);
}
.team-card__name {
  font-size: var(--fs-h5);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
}
.team-card__body .tag { order: -1; }
.team-card__role {
  font-weight: 600;
  color: var(--muted);
  font-size: .95rem;
}
.team-card__bio {
  color: var(--slate);
  font-size: .98rem;
  line-height: 1.6;
  margin-top: 2px;
}

/* ============================================================
   Featured founder card — hero of the section (portrait beside text)
   ============================================================ */
.team-card--feature {
  flex-direction: row;
  align-items: stretch;
}
.team-card--feature .team-card__media {
  flex: 0 0 42%;
  max-width: 400px;
  aspect-ratio: auto;
  min-height: 380px;
}
.team-card--feature .team-card__media img { object-position: center top; }
.team-card--feature .team-card__media::after { height: 34%; }
.team-card--feature .team-card__body {
  justify-content: center;
  gap: var(--s-3);
  padding: clamp(28px, 3.6vw, 56px);
}
.team-card--feature .team-card__name {
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
}
.team-card--feature .team-card__bio {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--slate);
  max-width: 52ch;
}

/* ============================================================
   Compact card (department heads — name + role only)
   ============================================================ */
.team-card--compact .team-card__body {
  text-align: center;
  align-items: center;
  gap: var(--s-1);
}

/* ============================================================
   D. CTA band  (page-local; mirrors the house pattern)
   ============================================================ */
.cta-band {
  position: relative;
  border-radius: var(--r-2xl);
  overflow: hidden;
  isolation: isolate;
  background: var(--grad-brand);
  color: #fff;
  padding: clamp(48px, 6vw, 88px) clamp(28px, 5vw, 80px);
  text-align: center;
}
.cta-band::before {
  content: "";
  position: absolute; inset: 0; z-index: -1; opacity: .16;
  background: url("../../img/waves-top.svg") top center/cover no-repeat;
}
.cta-band h2 { font-size: var(--fs-h2); max-width: 18ch; margin-inline: auto; }
.cta-band .lead { color: rgba(255, 255, 255, .85); max-width: 56ch; margin: var(--s-4) auto 0; }
.cta-band .btn-row { margin-top: var(--s-6); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 960px) {
  .team-card--feature .team-card__media { flex-basis: 40%; min-height: 340px; }
}

@media (max-width: 860px) {
  /* founder card stacks: portrait on top */
  .team-card--feature { flex-direction: column; }
  .team-card--feature .team-card__media {
    flex: none;
    max-width: none;
    width: 100%;
    aspect-ratio: 4 / 5;
    min-height: 0;
  }
  .team-card--feature .team-card__name { font-size: var(--fs-h4); }
}

@media (max-width: 760px) {
  .team-grid--heads { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
  .team-grid--leaders { grid-template-columns: 1fr; }
}

@media (max-width: 460px) {
  .team-grid--heads { grid-template-columns: 1fr; }
  /* on narrow phones, give department-head portraits a friendlier ratio */
  .team-card--compact .team-card__media { aspect-ratio: 1 / 1; }
}