/* =========================================================================
   EP3 People directory (/people.html) — page composition.
   Per-page CSS analog to webshield-home.css pattern.
   All tokens from webshield-navy.css. Card styles in ep3-mem-card.css.
   Search in ep3-search.css. Chip group in ep3-filter-chip.css.
   ========================================================================= */

html { scroll-behavior: smooth; }

/* Reuse the directory-hero family. Same vocabulary used on
   /initiatives.html and /affiliates.html — kept local for self-contained
   per-page CSS. */
.ep3-dir-hero {
  background: var(--ws-page);
  border-bottom: 1px solid var(--ws-rule);
}
.ep3-dir-hero__wrap {
  max-width: 1200px; margin: 0 auto;
  padding: 64px 48px 40px;
  text-align: center;
}
.ep3-dir-hero__eyebrow {
  font-family: var(--ws-font-mono);
  /* A·01 — coral-on-bone fails WCAG body-text contrast at 11px/400; bump
     to 12px/500 (large-text 3:1 threshold) without changing the token.
     Same mechanical fix that landed on /initiatives. */
  font-size: 12px; font-weight: 500;
  letter-spacing: var(--ws-tracking-mono);
  text-transform: uppercase;
  color: var(--ws-accent);
  margin: 0 0 22px;
}
.ep3-dir-hero__title {
  font-family: var(--ws-font-display);
  font-size: clamp(36px, 4.6vw, 48px); font-weight: 500;
  line-height: 1.15; letter-spacing: -0.02em;
  color: var(--ws-ink);
  margin: 0 0 18px;
}
.ep3-dir-hero__lede {
  font-family: var(--ws-font-display);
  font-size: 18px; font-weight: 400;
  line-height: var(--ws-lh-lede);
  color: var(--ws-ink-muted);
  max-width: 720px;
  margin: 0 auto 32px;
  text-wrap: pretty;
}
.ep3-dir-hero__search {
  margin: 0 0 8px;
}

/* F·06 — Combined chip+search results line moved to ep3-search.css as
   .ep3-dir-results so /affiliates can share the same affordance (F·05
   shared component, Claude Design review). HTML and JS use the new
   class names; behavior is unchanged. */

/* ── Sticky chip bar (S·01 + F·07) ──────────────────────────
   The chip row used to live inside the hero. After F·07 it sits in its
   own band below the hero and pins beneath the main nav once it would
   scroll out — keeping section navigation always reachable on a 12-
   viewport page.

   --ws-nav-h is the estimated height of the .ws-nav above; we
   hard-code it here because the chipbar is the only consumer. If the
   nav padding changes, bump this. Mobile nav wraps to 2 rows so the
   offset roughly doubles at <720px. */
.ep3-people-chipbar {
  position: sticky;
  top: 57px;
  z-index: 30;
  background: var(--ws-page);
  border-bottom: 1px solid var(--ws-rule);
}
.ep3-people-chipbar__wrap {
  max-width: 1200px; margin: 0 auto;
  padding: 12px 48px;
}
/* Override chip-group alignment — center looks nice in the hero but
   the sticky bar reads better left-aligned, so the All chip anchors
   to the left edge under the brand. */
.ep3-people-chipbar .ep3-chip-group {
  justify-content: flex-start;
  max-width: none;
  gap: 8px 10px;
}

/* ── Act super-headers (S·02) ───────────────────────────────
   Quiet structural labels marking the Governance / Fellowships divide
   without competing with the page H1. Per-section counts and the
   chip-bar `All · 111` already anchor the numbers; the act header is
   pure structure. Coral kicker + serif title + thin coral rule. */
.ep3-people-act {
  margin: 0 0 28px;
  padding: 24px 0 14px;
  border-bottom: 1px solid var(--ws-accent);
}
.ep3-people-act:first-child { padding-top: 0; }
.ep3-people-act__kicker {
  font-family: var(--ws-font-mono);
  font-size: 11.5px; font-weight: 500;
  letter-spacing: var(--ws-tracking-mono);
  text-transform: uppercase;
  color: var(--ws-accent);
  margin: 0 0 6px;
}
.ep3-people-act__title {
  font-family: var(--ws-font-display);
  font-size: 26px; font-weight: 500;
  line-height: 1.1; letter-spacing: -0.01em;
  color: var(--ws-ink);
  margin: 0;
}

/* The quiet caption below the Fellowships act header (S·03 framing). */
.ep3-people-act__caption {
  font-family: var(--ws-font-mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: var(--ws-tracking-mono);
  text-transform: uppercase;
  color: var(--ws-ink-faint);
  margin: -16px 0 28px;
}

/* ── Sections + grid ────────────────────────────────────────── */
.ep3-people-sections {
  background: var(--ws-surface);
  border-top: 1px solid var(--ws-rule);
}
.ep3-people-sections__inner {
  max-width: 1200px; margin: 0 auto;
  padding: 56px 48px 96px;
}
.ep3-people-section {
  padding: 36px 0 56px;
  border-top: 1px solid var(--ws-rule-faint);
}
.ep3-people-section:first-child {
  border-top: none;
  padding-top: 8px;
}
.ep3-people-section[hidden] { display: none; }

.ep3-people-section__head {
  margin: 0 0 28px;
}
.ep3-people-section__eyebrow {
  font-family: var(--ws-font-mono);
  /* A·01 — same fix as the hero eyebrow but repeated 10x on this page
     (once per section), so the accessibility cost compounds. */
  font-size: 12px; font-weight: 500;
  letter-spacing: var(--ws-tracking-mono);
  text-transform: uppercase;
  color: var(--ws-accent);
  margin: 0 0 8px;
}
.ep3-people-section__title {
  font-family: var(--ws-font-display);
  font-size: 24px; font-weight: 500;
  line-height: 1.2; letter-spacing: -0.01em;
  color: var(--ws-ink);
  margin: 0 0 6px;
}
.ep3-people-section__sub {
  font-family: var(--ws-font-body);
  font-size: 12.5px; line-height: 1.5;
  color: var(--ws-ink-faint);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: 0;
}
.ep3-people-section__count {
  font-family: var(--ws-font-mono);
  font-size: 12px; font-weight: 500;
  color: var(--ws-ink-faint);
  margin-left: 8px;
}

.ep3-people-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

/* F·04 — Dense variant for >20-card sections. Trades photo prominence
   for directory legibility: 5-up on desktop, smaller circles, tighter
   gaps. Title / role typography stays the same so cards still read at
   a glance. */
.ep3-people-section--dense .ep3-people-grid {
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}
.ep3-people-section--dense .ep3-mem-card {
  padding: 22px 16px 18px;
}
.ep3-people-section--dense .ep3-mem-card__photo {
  width: 84px; height: 84px;
  margin-bottom: 14px;
}

.ep3-people-noresults {
  padding: 64px 0;
  text-align: center;
  font-family: var(--ws-font-display);
  font-size: 18px; font-style: italic;
  color: var(--ws-ink-muted);
}
.ep3-people-noresults[hidden] { display: none; }

/* ── Mobile Jump pill (M·02) ────────────────────────────────
   Floating secondary nav for visitors deep in the 36-viewport mobile
   scroll. Pill at bottom-right; tap opens a half-sheet with the 10
   section anchors grouped by act. JS controls visibility (shown after
   scroll past first section; hidden near footer) and toggle state.
   Hidden by default at all viewport widths; the @media (max-width:760)
   block flips display on so the JS-driven visibility logic can take
   over. */
.ep3-people-jump {
  position: fixed;
  right: 16px; bottom: 16px;
  z-index: 35;
  display: none;
}
.ep3-people-jump__btn {
  appearance: none;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--ws-ink);
  color: var(--ws-page);
  border: 1px solid var(--ws-ink);
  padding: 10px 16px;
  font-family: var(--ws-font-mono);
  font-size: 11.5px; font-weight: 500;
  letter-spacing: var(--ws-tracking-mono);
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(11, 31, 58, 0.22);
  transition: background-color 0.15s ease;
}
.ep3-people-jump__btn:hover { background: var(--ws-ink-deep); }
.ep3-people-jump__btn-arrow {
  color: var(--ws-accent);
  font-size: 13px;
  line-height: 1;
  transition: transform 0.15s ease;
}
.ep3-people-jump[data-state="open"] .ep3-people-jump__btn-arrow {
  transform: rotate(135deg);
}

.ep3-people-jump__sheet {
  position: absolute;
  right: 0; bottom: calc(100% + 8px);
  width: min(78vw, 320px);
  max-height: 60vh;
  background: var(--ws-page);
  border: 1px solid var(--ws-rule);
  box-shadow: 0 14px 32px rgba(11, 31, 58, 0.18);
  display: flex; flex-direction: column;
}
/* display: flex above overrides [hidden]'s default display:none, so
   explicitly hide the sheet when the attribute is set. */
.ep3-people-jump__sheet[hidden] { display: none; }
.ep3-people-jump__sheet-head {
  padding: 12px 16px;
  border-bottom: 1px solid var(--ws-rule-faint);
  font-family: var(--ws-font-mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: var(--ws-tracking-mono);
  text-transform: uppercase;
  color: var(--ws-ink-faint);
}
.ep3-people-jump__sheet-list {
  overflow-y: auto;
  padding: 6px 0 10px;
}
.ep3-people-jump__group {
  padding: 14px 16px 6px;
  font-family: var(--ws-font-mono);
  font-size: 10.5px; font-weight: 500;
  letter-spacing: var(--ws-tracking-mono);
  text-transform: uppercase;
  color: var(--ws-accent);
}
.ep3-people-jump__row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px;
  padding: 10px 16px;
  text-decoration: none;
  font-family: var(--ws-font-body);
  font-size: 14px; font-weight: 500;
  color: var(--ws-ink);
  border-top: 1px solid var(--ws-rule-faint);
}
.ep3-people-jump__group + .ep3-people-jump__row { border-top: none; }
.ep3-people-jump__row:hover,
.ep3-people-jump__row:focus { background: var(--ws-surface); outline: none; }
.ep3-people-jump__row-count {
  font-family: var(--ws-font-mono);
  font-size: 11px;
  color: var(--ws-ink-faint);
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .ep3-people-grid { grid-template-columns: repeat(3, 1fr); }
  .ep3-people-section--dense .ep3-people-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 820px) {
  .ep3-people-grid { grid-template-columns: repeat(2, 1fr); }
  .ep3-people-section--dense .ep3-people-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
  /* Nav wraps to 2 rows below 720px (per webshield-shared.css), so bump
     the chipbar's sticky offset to clear the taller mobile nav. */
  .ep3-people-chipbar { top: 113px; overflow: hidden; }
  .ep3-people-chipbar__wrap { padding: 10px 0; }

  /* M·01 — Horizontal-scroll pill bar. Eleven chips at 390px wrap to
     4–5 noisy rows; switching to a single scrolling row recovers ~200
     vertical pixels in the always-visible chipbar. */
  .ep3-people-chipbar .ep3-chip-group {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 0 24px;
    gap: 8px;
  }
  .ep3-people-chipbar .ep3-chip-group::-webkit-scrollbar { display: none; }
  .ep3-people-chipbar .ep3-chip { flex-shrink: 0; scroll-snap-align: start; }
  /* "All" pins to the left edge so the global escape stays reachable
     regardless of scroll position. Sticky left:0 means it sits flush
     against the scroll-port edge; the chip-group's padding-left puts
     the resting position 24px in from the viewport edge. As chips
     scroll behind All, the chip's solid bg + a left-extending
     box-shadow form a "curtain" that obscures whatever sneaks past
     into the 24px gutter between viewport edge and chip. */
  .ep3-people-chipbar .ep3-chip[data-filter="all"] {
    position: sticky;
    left: 0;
    z-index: 1;
    box-shadow: -24px 0 0 0 var(--ws-page);
  }
  .ep3-people-chipbar .ep3-chip[data-filter="all"][aria-pressed="true"] {
    box-shadow: -24px 0 0 0 var(--ws-ink);
  }
  /* Right-edge fade telegraphs more chips offscreen. */
  .ep3-people-chipbar::after {
    content: '';
    position: absolute;
    right: 0; top: 0; bottom: 0;
    width: 24px;
    background: linear-gradient(to right, transparent, var(--ws-page));
    pointer-events: none;
  }

  /* M·02 — Enable the Jump pill on mobile. Component is display:none at
     larger viewports; here the JS-toggled [hidden] attribute controls
     visibility instead. */
  .ep3-people-jump:not([hidden]) { display: block; }
}
@media (max-width: 720px) {
  .ep3-dir-hero__wrap { padding: 48px 24px 32px; }
  .ep3-people-sections__inner { padding: 40px 24px 72px; }
  .ep3-people-grid { gap: 12px; }
  .ep3-people-act__title { font-size: 22px; }
}