/* ============================================================
   Advisory board — the Advisory board group inside the #team section of /about/ (#advisory-board anchor; its own page until 2026-09-10)
   Portrait-over-copy cards in a three-column grid. Deliberately quieter than the
   audience pages: this one is read, not scanned, so the type is set for
   continuous reading and there is no decoration inside the cards.
   ============================================================ */

/* ---- Grid ---- */
/* Four across, one row (owner, 2026-09-16) — the board is four people now that two are parked. */
/* ⚠️ minmax(0,1fr), not 1fr: a bare 1fr track is minmax(auto,1fr), so a card whose content refuses
   to wrap (long post-nominals, a nowrap name) widens its own column and the four come out uneven. */
.adv-grid { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:var(--space-m); }

.adv-card {
  display:flex; flex-direction:column; gap:var(--space-s); align-items:flex-start;
  background:var(--color-surface); border-radius:var(--radius-xl); padding:var(--space-l);
  box-shadow:var(--shadow-xs); border:1px solid var(--color-border-soft);
  transition:transform .18s var(--ease), box-shadow .18s var(--ease);
}
.adv-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); }

/* Fixed square so a member whose bio is still being confirmed lines up with the rest. */
.adv-portrait { width:104px; height:104px; border-radius:var(--radius-full); object-fit:cover; display:block; background:var(--brand-50); }

/* One line per name (owner's rule): the two professors are styled "Prof" for the same reason. */
.adv-card-body h3 { font-size:var(--text-lg); color:var(--color-secondary); margin:0 0 var(--space-3xs); letter-spacing:-.01em; white-space:normal; }
/* The name wraps now (2026-09-16): with even minmax(0,1fr) columns a nowrap name would clip rather
   than widen its column, and "Prof Danielle Ní Chróinín" plus post-nominals needs two lines at four across. */
/* Post-nominals sit inside the h2 but must read as subordinate to the person: smaller, lighter,
   muted, and slightly letter-spaced so a run of capitals doesn't shout. Data comes from
   board.json's `postNominals` — never bake them into `name`. */
.adv-card-body h3 .adv-post { display:block; margin-top:var(--space-3xs); font-size:var(--text-sm); font-weight:var(--weight-regular);
  color:var(--color-ink-soft); letter-spacing:.02em; }
/* Optional LinkedIn link, rendered only when board.json carries a `linkedin` URL. Plain text
   rather than a brand icon: the sprite is stroke-based and LinkedIn's mark is a filled glyph, so
   adding it would mean a one-off asset that matches nothing else on the site. The aria-label
   carries the person's name, since seven links all reading "LinkedIn" are useless out of context. */
.adv-links { margin:var(--space-xs) 0 0; font-size:var(--text-sm); }
.adv-links a { display:inline-flex; align-items:center; gap:var(--space-3xs);
  color:var(--color-ink-soft); text-decoration:none; }
/* Underline the word only — on an inline-flex anchor a border would run under the icon too. */
.adv-links a span { border-bottom:1px solid var(--color-border); }
.adv-links svg { width:16px; height:16px; flex:none; fill:currentColor; stroke:none; }
.adv-links a:hover, .adv-links a:focus-visible { color:var(--color-primary); }
.adv-links a:hover span, .adv-links a:focus-visible span { border-bottom-color:currentColor; }
.adv-bio { font-size:var(--text-md); color:var(--color-ink-soft); line-height:var(--line-relaxed); margin:var(--space-xs) 0 0; }
.adv-bio em { font-style:italic; color:var(--color-secondary); }

/* Three across on desktop (owner's call 2026-09-10), two on tablet, one on phones. */
@media (max-width:960px){
  .adv-grid { grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:600px){
  .adv-grid { grid-template-columns:1fr; }
}