/* ============================================================
   Speaker Archive — Bearing Witness child theme
   ------------------------------------------------------------
   Self-contained stylesheet for archive-speaker.php, built on the
   same --bw-s-* design tokens as statements-archive.css (which this
   file extends for the shared applied-filters bar + sort dropdown).
   Logical properties throughout (mirror for HE/AR).
   ============================================================ */

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

.speaker-archive {
  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);
}

/* [hidden] must always win — the .flex utility would otherwise override it */
.speaker-archive [hidden] {
  display: none !important;
}

/* ============================================================
   Hero
   ============================================================ */

.speaker-archive__hero {
  padding-block-start: var(--bw-s-s6);
}

.speaker-archive__title {
  font-size: clamp(30px, 5vw, 42px);
  line-height: 1.15;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--bw-s-ink);
  margin: 0 0 var(--bw-s-s2);
}

.speaker-archive__intro {
  max-inline-size: 744px;
  font-size: 18px;
  line-height: 1.667;
  color: var(--bw-s-ink-2);
}

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

.speaker-archive__stats span:not(:last-of-type)::after {
  content: "·";
  display: inline-block;
  margin-inline-start: var(--bw-s-s2);
  margin-inline-end: var(--bw-s-s2);
  color: var(--bw-s-ink-3);
}

/* ---------- hero search bar ── pill with icon + visible search button ---------- */

.speaker-archive__search-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bw-s-s2);
  max-inline-size: 900px;
  margin-block-start: var(--bw-s-s4);
  padding: var(--bw-s-s1);
  background: var(--bw-s-card);
  border: 1px solid var(--bw-s-line);
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  transition: border-color 0.12s ease;
}

.speaker-archive__search-bar:focus-within {
  border-color: var(--bw-s-accent);
}

.speaker-archive__search-wrap {
  flex: 1;
  min-inline-size: 0;
  gap: var(--bw-s-s2);
  padding-inline: var(--bw-s-s3);
  display: flex;
}

.speaker-archive__search-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 20px;
  block-size: 20px;
  flex-shrink: 0;
  color: var(--bw-s-ink-3);
}
.speaker-archive__search-icon svg {
  inline-size: 18px;
  block-size: 18px;
  fill: none;
  stroke: currentColor;
}

.speaker-archive__search-input {
  flex: 1;
  min-inline-size: 0;
  font: inherit;
  text-align: start;
  direction: inherit;
  background: none !important;
  font: inherit;
  font-size: 16px !important;
  line-height: 24px !important;
  color: var(--bw-s-ink) !important;
  border: none !important;
  padding: unset !important;
}

.speaker-archive__search-input::-webkit-search-cancel-button,
.speaker-archive__search-input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

.speaker-archive__search-input:focus,
.speaker-archive__search-input:focus-visible {
  outline: none; /* ring lives on the wrapper */
  box-shadow: none !important;
}

.speaker-archive__search-input::placeholder {
  color: var(--bw-s-ink-3);
}

/* Visible pill search button, pushed to the inline-end of the bar. */
.speaker-archive__search-submit {
  flex-shrink: 0;
  border: 0;
  border-radius: 999px;
  background: #6e1f1f !important;
  color: #ffffff;
  padding: var(--bw-s-s2) var(--bw-s-s5);
  font: inherit;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.12s ease;
}

.speaker-archive__search-submit:hover {
  background: #5a1919;
}

/* ============================================================
   Results — count + sort
   ============================================================ */

.speaker-archive__results {
  margin-block-start: var(--bw-s-s4);
}

.speaker-archive__results-control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bw-s-s3);
  flex-wrap: wrap;
  margin-block-end: var(--bw-s-s3);
}

.speaker-archive__results-total {
  font-size: 14px;
  line-height: 18px;
  color: var(--bw-s-ink-2);
  font-variant-numeric: tabular-nums;
}

.speaker-archive__results-sort {
  display: inline-flex;
  align-items: center;
  gap: var(--bw-s-s2);
}

.speaker-archive__sort-label {
  font-size: 14px;
  line-height: 18px;
  color: var(--bw-s-ink-2);
}

/* ============================================================
   Speaker cards (grid)
   ============================================================ */

.speaker-archive__cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--bw-s-s4);
  margin-block-end: var(--bw-s-s6);
}

/* Each card is wrapped so the credit badge can live OUTSIDE the whole-card
   <a> link (nesting a clickable <a> inside another <a> is invalid HTML). */
.speaker-archive__card {
  position: relative;
  block-size: 100%;
}

.speaker-archive__card > .scard.pcard {
  block-size: 100%;
}

/* Badge sits on the avatar's bottom-corner, like on statement-card images.
   Card padding (--bw-s-s4=24) + 56px avatar, minus badge size, with the same
   -3px overhang the statement card uses (inset-block-end / inset-inline-start). */
.speaker-archive__card > .bw-photo-credit {
  inset-block-end: auto;
  inset-inline-end: auto;
  inset-block-start: calc(var(--bw-s-s4) + 56px - 17px);
  inset-inline-start: calc(var(--bw-s-s4) - 3px);
}

.speaker-archive__cards .scard.pcard {
  display: flex;
  flex-direction: column;
  gap: var(--bw-s-s2);
  padding: var(--bw-s-s4);
  inline-size: 100%;
  block-size: 100%;
  background: var(--bw-s-card);
  border: 1px solid var(--bw-s-line);
  border-radius: var(--bw-s-radius-sm);
  box-shadow: var(--bw-s-shadow-1);
  color: var(--bw-s-ink);
  text-decoration: none;
  transition:
    border-color 0.12s ease,
    box-shadow 0.12s ease,
    transform 0.12s ease;
}

.speaker-archive__cards .scard.pcard:hover {
  border-color: var(--bw-s-accent);
  box-shadow: var(--bw-s-shadow-2);
  transform: translateY(-2px);
}

.speaker-archive__cards .scard.pcard:focus-visible {
  outline: var(--bw-s-ring);
  outline-offset: 2px;
}

.speaker-archive__cards .scard .head {
  display: flex;
  gap: var(--bw-s-s3);
  min-inline-size: 0;
}

.speaker-archive__cards .avatar {
  position: relative;
  flex: 0 0 auto;
  inline-size: 56px;
  block-size: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--bw-s-paper-2);
  color: var(--bw-s-ink-3);
  font-size: 15px;
  font-weight: 600;
}

.speaker-archive__cards .avatar.has-photo {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  filter: grayscale(100%);
  transition: filter 0.2s ease;
}

.speaker-archive__cards .scard:hover .avatar.has-photo,
.speaker-archive__cards .scard:focus-within .avatar.has-photo {
  filter: grayscale(0%);
}

.speaker-archive__cards .who {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-inline-size: 0;
}

.speaker-archive__cards .who .nm {
  font-size: 21px;
  line-height: 30px;
  font-weight: 700;
  color: var(--bw-s-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.speaker-archive__cards .who .rl {
  font-size: 14px;
  line-height: 18px;
  color: var(--bw-s-ink-3);
}

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

.speaker-archive__cards .pcount b {
  display: block;
  font-size: 36px;
  line-height: 42px;
  font-weight: 700;
  color: var(--bw-s-accent);
}

.speaker-archive__cards .prange {
  font-size: 14px;
  line-height: 18px;
  color: var(--bw-s-ink-3);
  font-variant-numeric: tabular-nums;
}

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

.speaker-archive__cards .tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  background: var(--bw-s-paper-2);
  border: 1px solid var(--bw-s-line);
  border-radius: var(--bw-s-radius-pill);
  font-size: 12px;
  line-height: 18px;
  color: var(--bw-s-ink-2);
  font-variant-numeric: tabular-nums;
}

/* colored dot stays hidden in production (concept system behaviour);
   the t2..t5 classes are kept for future per-topic tinting */
.speaker-archive__cards .tag .dot {
  display: none;
}

.speaker-archive__cards .foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--bw-s-s2);
  margin-block-start: auto;
  padding-block-start: var(--bw-s-s2);
  border-block-start: 1px solid var(--bw-s-line-2);
}

.speaker-archive__cards .acts {
  display: flex;
  align-items: center;
}

.speaker-archive__cards .readmore {
  font-size: 14px;
  line-height: 18px;
  color: var(--bw-s-accent);
  white-space: nowrap;
}

.speaker-archive__cards .scard:hover .readmore {
  text-decoration: underline;
}

.speaker-archive__empty {
  grid-column: 1 / -1;
  padding: var(--bw-s-s6);
  text-align: center;
  font-size: 16px;
  line-height: 24px;
  color: var(--bw-s-ink-3);
}