/* ═══════════════════════════════════════════
   TEAM & ADVISORY BOARD
   Layered on styles.css + landing.css. Uses the same
   rust/gold/dark tokens — no new colors introduced.
═══════════════════════════════════════════ */

/* ── Grid ──
   auto-FILL, not auto-fit: the roster grows and shrinks, and auto-fit
   collapses empty tracks, stretching a lone card across the whole row.
   auto-fill keeps a card the same width whether the page lists two people
   or eight. 330px min gives a photo large enough to recognise a face. */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.35rem;
  margin-top: 2.25rem;
}

/* ── Member card ──
   Stacked: photo, then name + role, then bio, then LinkedIn. A column flex
   so .team-foot can take margin-top:auto and sit on the card floor, which
   keeps the LinkedIn pills on one line across a row of uneven bios. */
.team-card {
  display: flex;
  flex-direction: column;
  background: rgba(22, 8, 4, 0.62);
  border: 1px solid rgba(184,134,11,0.15);
  border-radius: 16px;
  padding: 1.2rem 1.2rem 1.35rem;
  backdrop-filter: blur(10px);
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}
.team-card:hover {
  border-color: rgba(192,57,43,0.35);
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(192,57,43,0.12);
}
/* The card is not a link — the LinkedIn anchor inside carries focus. */
@media (prefers-reduced-motion: reduce) {
  .team-card { transition: border-color 0.3s; }
  .team-card:hover { transform: none; }
}

/* ── Portrait ──
   Square, not a circle: a bigger crop of the face reads at a glance, and the
   rounded square echoes the card. Photo and monogram share one box, so a
   roster part-way through getting real photos still lines up. */
.team-pic,
.team-photo,
.team-avatar {
  width: 100%;
  /* Capped: a full-width square ties card height to card width, which pushed
     the card past a laptop viewport. Fixed at a size that still reads a face
     clearly. */
  max-width: 13.2rem;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  margin-bottom: 0.95rem;
  overflow: hidden;
}
.team-pic { display: block; line-height: 0; margin-bottom: 0.95rem; }
.team-pic .team-photo { margin-bottom: 0; max-width: none; height: 100%; }
.team-photo {
  height: 100%;
  object-fit: cover;
  object-position: center 32%;
  display: block;
  background: rgba(32,16,8,0.6);
  border: 1px solid rgba(184,134,11,0.22);
}

/* Initials placeholder, at portrait size. */
.team-avatar {
  display: grid;
  place-items: center;
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(2rem, 5.5vw, 2.9rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  user-select: none;
  background: linear-gradient(140deg, rgba(184,134,11,0.20), rgba(192,57,43,0.14));
  border: 1px solid rgba(184,134,11,0.30);
  color: var(--gold-light);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
/* Rotate the accent so a row of monograms does not read as one flat block. */
.team-grid > .team-card:nth-child(3n+2) .team-avatar {
  background: linear-gradient(140deg, rgba(192,57,43,0.22), rgba(184,134,11,0.12));
  border-color: rgba(192,57,43,0.34);
  color: var(--rust-light);
}
.team-grid > .team-card:nth-child(3n+3) .team-avatar {
  background: linear-gradient(140deg, rgba(38,85,197,0.20), rgba(184,134,11,0.12));
  border-color: rgba(91,139,240,0.30);
  color: var(--blue-light);
}

/* ── Identity ── */
.team-ident { margin-bottom: 0.85rem; }
.team-name {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--text-light);
  line-height: 1.3;
  margin: 0 0 0.3rem;
}
.team-role {
  font-size: 0.79rem;
  font-weight: 600;
  color: var(--gold);
  line-height: 1.45;
  margin: 0;
}
/* Advisory board: the advisor's outside affiliation, under the role. */
.team-affil {
  display: block;
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--text-muted);
  margin-top: 0.24rem;
  line-height: 1.5;
}

/* ── Bio ── */
.team-bio {
  font-size: 0.83rem;
  line-height: 1.68;
  color: var(--text-muted);
  margin: 0;
}
.team-bio p { margin: 0 0 0.8rem; }
.team-bio p:last-child { margin-bottom: 0; }
.team-bio strong { color: var(--text-light); font-weight: 600; }
/* A card with no bio yet must not reserve space for one. */
.team-bio:empty { display: none; }

/* ── Expertise tags ── */
.team-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 1.05rem 0 0;
  padding: 0;
  list-style: none;
}
.team-tags li {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  background: rgba(184,134,11,0.09);
  border: 1px solid rgba(184,134,11,0.18);
  border-radius: 999px;
  padding: 0.24rem 0.62rem;
  line-height: 1.5;
}

/* ── LinkedIn, on the card floor ── */
.team-foot { margin-top: auto; padding-top: 1.05rem; }
.team-li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  border: 1px solid rgba(184,134,11,0.2);
  border-radius: 999px;
  padding: 0.4rem 0.9rem 0.4rem 0.72rem;
  transition: color 0.25s, border-color 0.25s, background 0.25s;
}
.team-li svg { width: 0.95rem; height: 0.95rem; flex-shrink: 0; }
.team-li:hover,
.team-li:focus-visible {
  color: var(--gold-light);
  border-color: rgba(184,134,11,0.5);
  background: rgba(184,134,11,0.08);
}
.team-li:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ── Photo-left card ──
   Shared by the founder card (.is-featured) and the advisory board rows
   (.is-row): full width, portrait in its own column. Reading order is
   unchanged — portrait, name, role, bio, LinkedIn — just read
   left-to-right rather than top-to-bottom. */
.team-card.is-featured,
.team-card.is-row {
  display: grid;
  grid-template-columns: 17rem 1fr;
  grid-template-rows: auto auto 1fr auto;
  grid-template-areas:
    "pic ident"
    "pic bio"
    "pic tags"
    "pic foot";
  column-gap: 2.1rem;
  padding: 1.7rem;
}
/* Founder card only: brighter border, warmer ground, larger name. Advisory
   rows stay neutral — no one on that board outranks the others. */
.team-card.is-featured {
  margin-bottom: 1.35rem;
  border-color: rgba(184,134,11,0.42);
  background:
    linear-gradient(135deg, rgba(44,21,10,0.82) 0%, rgba(22,8,4,0.62) 58%);
  box-shadow: 0 10px 38px rgba(0,0,0,0.28);
}
/* The portrait fills its column and stretches to the card's full height —
   otherwise a 207px square left ~113px of dead space under it, because the
   card is as tall as the bio column beside it. Cover scales to the taller
   edge, so this trims a little from the sides and never crops the face. */
.team-card.is-featured .team-pic,
.team-card.is-featured .team-avatar,
.team-card.is-featured .team-photo,
.team-card.is-row .team-pic,
.team-card.is-row .team-avatar,
.team-card.is-row .team-photo {
  grid-area: pic;
  align-self: stretch;
  margin-bottom: 0;
  max-width: none;
  aspect-ratio: auto;
  width: 100%;
  height: 100%;
  min-height: 0;
}
.team-card.is-featured .team-photo,
.team-card.is-row .team-photo { object-fit: cover; object-position: center 35%; }
.team-card.is-featured .team-ident,
.team-card.is-row .team-ident { grid-area: ident; margin-bottom: 0.9rem; }
.team-card.is-featured .team-bio,
.team-card.is-row .team-bio { grid-area: bio; max-width: 74ch; }
.team-card.is-featured .team-tags,
.team-card.is-row .team-tags { grid-area: tags; align-self: start; }
.team-card.is-featured .team-foot,
.team-card.is-row .team-foot { grid-area: foot; align-self: end; }
.team-card.is-featured .team-name  { font-size: 1.42rem; }
.team-card.is-featured .team-role  { font-size: 0.9rem; }
.team-card.is-featured .team-bio,
.team-card.is-row .team-bio { font-size: 0.89rem; line-height: 1.75; }

/* Small caps eyebrow marking the founder card. */
.team-eyebrow {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rust-light);
  margin-bottom: 0.4rem;
}

/* Below the two-column threshold the featured card returns to the same
   stacked card as everyone else. */
@media (max-width: 760px) {
  .team-card.is-featured,
  .team-card.is-row {
    display: flex;
    flex-direction: column;
    padding: 1.2rem 1.2rem 1.35rem;
  }
  .team-card.is-featured .team-pic,
  .team-card.is-featured .team-avatar,
  .team-card.is-featured .team-photo,
  .team-card.is-row .team-pic,
  .team-card.is-row .team-avatar,
  .team-card.is-row .team-photo {
    margin-bottom: 0.95rem;
    /* back to the shared capped square once the card is a flex column */
    align-self: start;
    max-width: 13.2rem;
    aspect-ratio: 1 / 1;
    height: auto;
  }
  /* align-self drives the cross axis once this is a flex column, which would
     push the tags and LinkedIn pill to the right edge. */
  .team-card.is-featured .team-tags,
  .team-card.is-featured .team-foot,
  .team-card.is-row .team-tags,
  .team-card.is-row .team-foot { align-self: stretch; }
  .team-card.is-featured .team-name { font-size: 1.15rem; }
}

/* A bio-less card sizes to its content rather than stretching to the row,
   so it reads as brief rather than half-loaded. */
.team-card.is-brief { align-self: start; }

/* ── Advisory rows stack ──
   A plain vertical stack, not a grid: with two advisors a 3-up grid left an
   empty track, and any odd count leaves a hole. Rows never do. */
.team-rows { display: grid; gap: 1.35rem; margin-top: 2.25rem; }

/* ── Section intro ── */
.team-intro {
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--text-muted);
  max-width: 66ch;
  margin: 0.9rem 0 0;
}

/* Single column on phones: the photo gets the full card width, which is the
   whole point of the larger portrait. */
@media (max-width: 560px) {
  .team-grid { grid-template-columns: 1fr; gap: 1.25rem; }
  .team-card { padding: 1.25rem 1.25rem 1.4rem; }
}

/* ── Empty state ──
   Shown when a roster is not yet populated. The page is linked site-wide and
   sitemapped, so it has to say something honest rather than render a bare
   grid — or, worse, a placeholder person. */
.team-empty {
  margin-top: 2rem;
  padding: 1.6rem 1.75rem;
  background: rgba(32, 16, 8, 0.45);
  border: 1px dashed rgba(184,134,11,0.28);
  border-radius: 14px;
  font-size: 0.92rem;
  line-height: 1.75;
  color: var(--text-muted);
  max-width: 62ch;
}
.team-empty a { color: var(--gold); }
.team-empty a:hover { color: var(--gold-light); }