/* ============================================================
   Advisory board — /advisory-board/
   Portrait-left cards in a two-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.
   ============================================================ */

/* ---- Hero ---- */
.adv-hero { position:relative; background:var(--grad-hero); color:#fff; padding:172px 0 var(--space-3xl); overflow:hidden; }
.adv-hero .wrap { position:relative; z-index:2; }
.adv-hero-copy { max-width:44rem; }
.adv-hero h1 { color:#fff; margin:0 0 var(--space-s); }
.adv-hero .lede { color:rgba(255,255,255,.86); margin:0; }

/* ---- Grid ---- */
.adv-board { background:linear-gradient(180deg, var(--color-surface), var(--brand-25)); }
.adv-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-l); }

.adv-card {
  display:grid; grid-template-columns:auto 1fr; gap:var(--space-m); align-items: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); }

.adv-card-body h2 { font-size:var(--text-lg); color:var(--color-secondary); margin:0 0 var(--space-3xs); letter-spacing:-.01em; }
.adv-role { font-size:var(--text-sm); font-weight:var(--weight-semibold); color:var(--color-primary); margin:0 0 var(--space-xs); }
.adv-bio { font-size:var(--text-md); color:var(--color-ink-soft); line-height:var(--line-relaxed); margin:0; }
.adv-bio em { font-style:italic; color:var(--color-secondary); }

/* Below 900px the portrait and copy stop fitting side by side in a half-width column;
   one column of the same card is better than two cramped ones. */
@media (max-width:900px){
  .adv-grid { grid-template-columns:1fr; }
}
@media (max-width:520px){
  .adv-card { grid-template-columns:1fr; gap:var(--space-s); }
  .adv-portrait { width:88px; height:88px; }
}