/* ============================================================
   Speaker single page — hero, stats & statement wall
   ------------------------------------------------------------
   Built on the statements-archive design system (--bw-s-* tokens)
   and enqueued after statements-archive.css so the card + modal
   styles carry over. Scoped to .speaker-page so nothing leaks
   into the rest of the theme.

   The prototype referenced the "official page" concept:
   avatar + name/role/last-updated, then a stat row (count,
   first/last date, topic breakdown) above the full statement wall.
   ============================================================ */

/* ---------- container ---------- */

.speaker-page {
  box-sizing: border-box;
  font-family: var(--bw-s-sans);
  color: var(--bw-s-ink);
  max-inline-size: calc(1250px + var(--bw-s-s4) * 2);
  margin-inline: auto;
  padding-block-start: var(--bw-s-s6);
  padding-inline: var(--bw-s-s4);
}

.speaker-page *,
.speaker-page *::before,
.speaker-page *::after {
  box-sizing: border-box;
}

.speaker-page :focus-visible {
  outline: var(--bw-s-ring);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---------- hero panel ---------- */

.speaker-page__hero .bw-breadcrumbs {
  margin-block-end: var(--bw-s-s4);
}

/* ---------- speaker row — photo + info ---------- */

.hero__speaker {
  display: flex;
  align-items: flex-start;
  gap: var(--bw-s-s6);
  flex-wrap: wrap;
}

.hero__speaker-img {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  inline-size: 114px;
  block-size: 114px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--bw-s-fill);
  color: var(--bw-s-ink-3);
}

.hero__speaker-img img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center 25%; /* portraits: faces sit high */
  filter: grayscale(1); /* house style — remove to restore color */
}

.hero__speaker-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 100%;
  block-size: 100%;
  background: var(--bw-s-accent);
  color: #fff;
  font-weight: 700;
  font-size: 36px;
  letter-spacing: 0.02em;
  user-select: none;
}

.hero__speaker-info {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  flex: 1 1 0;
}

.hero__speaker-name {
  margin: 0;
  font-size: clamp(30px, 5vw, 42px); /* 42px = 7u, mobile 30px */
  line-height: 1.15;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--bw-s-ink);
}

.hero__speaker-role {
  margin-block-start: var(--bw-s-s1);
  font-size: 16px;
  line-height: 24px;
  color: var(--bw-s-ink-3);
}

.hero__speaker-bio {
  margin-block-start: var(--bw-s-s3);
  max-inline-size: 744px; /* 8 columns — reading measure */
  font-size: 16px;
  line-height: 28px;
  color: var(--bw-s-ink-2);
}

.hero__speaker-bio p {
  margin-block: 0;
}

.hero__speaker-bio p + p {
  margin-block-start: var(--bw-s-s2);
}

.hero__last-updated {
  margin-block-start: var(--bw-s-s2);
  font-size: 14px;
  line-height: 18px;
  color: var(--bw-s-ink-3);
  font-variant-numeric: tabular-nums;
}

/* ---------- role history ---------- */

.hero__roles {
  margin-block-start: var(--bw-s-s3);
  max-inline-size: 744px;
}

.hero__roles-title {
  margin-block-end: var(--bw-s-s2);
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--bw-s-ink-3);
}

/* "Past roles" gets a clear gap above the top group and sits flush against its
   first row below. */
.hero__roles-title--past {
  margin-block-start: var(--bw-s-s3);
  margin-block-end: 0;
}

.hero__role-entry {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--bw-s-s1) var(--bw-s-s2);
  font-size: 14px;
  line-height: 20px;
}

/* Past-roles block keeps a clear gap between the separate role rows. */
.hero__role-entry + .hero__role-entry {
  margin-block-start: var(--bw-s-s1);
}

.hero__role-dates {
  color: var(--bw-s-ink-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.hero__role-title {
  font-weight: 600;
  color: var(--bw-s-ink);
}

.hero__role-party {
  color: var(--bw-s-ink-2);
}

/* Pipe separators between role | party | dates — muted, pulled tighter to the
   text on either side so the flex gap doesn't double the surrounding space. */
.hero__role-sep {
  color: var(--bw-s-ink-3);
  margin-inline: calc(var(--bw-s-s2) * -0.5);
}

/* ---------- stats row ---------- */

.hero__stats {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--bw-s-s6) var(--bw-s-s8);
  margin-block-start: var(--bw-s-s6);
  padding-block: var(--bw-s-s4);
  border-block: 1px solid var(--bw-s-line-2);
}

.hero__statements,
.hero__date-earliest,
.hero__date-latest,
.hero__themes {
  display: flex;
  flex-direction: column;
  min-inline-size: 96px;
}

.hero__stat-value {
  font-size: 24px;
  line-height: 30px;
  font-weight: 600;
  color: var(--bw-s-accent);
  font-variant-numeric: tabular-nums;
}

.hero__stat-label {
  margin-block-start: var(--bw-s-s1);
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bw-s-ink-3);
}

.speaker-page .statements-page__stats {
  margin: 0;
  padding: 0;
}
/* ---------- theme pills ---------- */

.hero__theme-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bw-s-s1);
  margin-block-start: var(--bw-s-s2);
}

.hero__theme-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--bw-s-s1);
  padding: var(--bw-s-s1) var(--bw-s-s2);
  background: var(--bw-s-card);
  border: 1px solid var(--bw-s-line-2);
  border-radius: var(--bw-s-radius-pill);
  font-size: 12px;
  line-height: 18px;
  color: var(--bw-s-ink-2);
}

.hero__theme-total {
  color: var(--bw-s-ink-3);
  font-variant-numeric: tabular-nums;
}

/* ---------- statement wall ----------
   Container-query name matches statements-archive.css's grid rules
   (@container bw-results …), so the wall reuses the archive's 2-up
   layout that reacts to its own width. */

.speaker-page__statements {
  container-type: inline-size;
  container-name: bw-results;
  margin-block-start: var(--bw-s-s10);
}

/* three-up cards when the speaker-page wall is wide enough; the archive's
   shared @container bw-results rule (2-up ≥660px, else 1-up) still applies
   under it via the higher-specificity descendant selector here */
@container bw-results (min-width: 1024px) {
  .speaker-page .statements-page__statements {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.statements__wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--bw-s-s4);
}

.statements__title {
  margin: 0;
  font-size: 24px;
  line-height: 36px;
  font-weight: 600;
  color: var(--bw-s-ink);
}

/* ---------- cards on the speaker page ----------
   Every card belongs to the person in the hero — hide the photo/name
   header (stays in the DOM so the modal can still read name + image). */

.statements__card--no-speaker .statements__speaker {
  display: none;
}

.statements__card--no-speaker .statements__date {
  margin-block-start: 0;
}

/* ---------- mobile ---------- */

@media (max-width: 767px) {
  .speaker-page {
    padding-inline: var(--bw-s-s3);
  }

  .speaker-page__hero {
    border-radius: var(--bw-s-radius-lg);
  }

  .hero__speaker {
    flex-direction: column;
    gap: var(--bw-s-s4);
  }

  .hero__speaker-img {
    inline-size: 88px;
    block-size: 88px;
  }

  .hero__speaker-initials {
    font-size: 28px;
  }

  .hero__stats {
    gap: var(--bw-s-s4) var(--bw-s-s6);
  }

  .hero__themes {
    flex-basis: 100%;
  }
}