/* ============================================================
   70 — Customer stories. Pull-quote, asymmetric, zero card chrome.
   ============================================================ */

.stories {
  --stories-tint: color-mix(in srgb, var(--c-brand) 5%, transparent);
  background:
    radial-gradient(72% 58% at 8% -6%, var(--stories-tint), transparent 68%),
    var(--surface);
  border-top: 1px solid var(--c-hairline-soft);
  overflow: hidden;
}

/* ---------------- Header ---------------- */

.stories__head { max-width: 34ch; }
.stories__title { margin-top: var(--s-4); }

/* ---------------- Wordmark sprite ----------------
   Symbols defined once at the top of the section, referenced by
   the rail marks and the pill marks with <use>. */

.stories__defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ---------------- Panel stack (cross-fade, no height jump) ----------------
   All panels sit at 1/1, so the stack always reserves the tallest panel's
   height. Both directions animate: the outgoing panel keeps its opacity/
   transform transition and only snaps visibility:hidden after --t-fast
   (delayed visibility transition), while the incoming panel fades up over
   the same window — a true cross-fade with zero blank frames.

   DOM order is tablist -> panels (APG: Tab from an active pill lands on its
   panel); the visual order — stack above, switcher below — comes from the
   flex `order` swap here. */

.stories__tabs {
  display: flex;
  flex-direction: column;
}

.stories__stack {
  display: grid;
  margin-top: var(--s-11);
}

.stories__panel {
  grid-area: 1 / 1;
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 38fr) minmax(0, 62fr);
  column-gap: var(--s-12);
  opacity: 1;
  transform: none;
  transition:
    opacity var(--t-fast) var(--ease-out),
    transform var(--t-base) var(--ease-out);
}

.stories__panel[hidden] {
  display: grid;               /* beats the UA [hidden] rule so the stack keeps its height */
  visibility: hidden;
  opacity: 0;
  transform: translateY(var(--s-2));
  transition:
    opacity var(--t-fast) var(--ease-out),
    transform var(--t-base) var(--ease-out),
    visibility 0s linear var(--t-fast);
}

/* base.css clamps durations but not delays — kill the delayed
   visibility swap explicitly under reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .stories__panel[hidden] { transition: none; }
}

.stories__panel:focus-visible { outline-offset: var(--s-3); }

/* ---------------- Left rail: wordmark, company + metrics ---------------- */

.stories__mark {
  height: var(--s-7);
  width: auto;
  color: var(--c-navy);
}

.stories__co-meta {
  margin-top: var(--s-4);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--text-body);
}

.stories__co-name {
  font-weight: var(--fw-semi);
  color: var(--c-navy);
}

.stories__metrics { margin-top: var(--s-8); }

.stories__metric { padding-block: var(--s-5); }
.stories__metric + .stories__metric { border-top: 1px solid var(--c-hairline); }
.stories__metric:first-child { padding-top: 0; }
.stories__metric:last-child { padding-bottom: 0; }

.stories__metric-v {
  display: block;
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--c-navy);
  font-variant-numeric: tabular-nums;
}

/* Unit words step back so the digits stay the loudest thing in the rail. */
.stories__metric-u {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tracking-snug);
}

.stories__metric-l {
  display: block;
  margin-top: var(--s-2);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--text-body);
  max-width: 34ch;
}

/* ---------------- Right: the quote ----------------
   Column stretches to the stack height and the attribution bottoms out, so
   the two columns terminate together in every one of the three states. */

.stories__quote {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.stories__rule {
  display: block;
  flex: none;
  width: var(--s-8);
  height: var(--s-1);
  border-radius: var(--r-pill);
  background: var(--c-brand);
}

.stories__q {
  margin: var(--s-6) 0 0;
  max-width: 52ch;
}
.stories__q p {
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--c-navy);
  text-wrap: pretty;
}

.stories__by {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin-top: auto;
  padding-top: var(--s-9);
}

.stories__mono {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--s-9);
  height: var(--s-9);
  border-radius: var(--r-pill);
  background: var(--c-brand-tint);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-brand) 32%, transparent);
  color: var(--c-brand-press);   /* 5.4:1 on --c-brand-tint; plain --c-brand is 4.1 */
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  line-height: 1;
  text-indent: 0.06em;          /* optical centring against the tracking */
}

.stories__by-txt { display: flex; flex-direction: column; }

.stories__by-name {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tracking-snug);
  line-height: var(--lh-snug);
  color: var(--c-navy);
}
.stories__by-role {
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--text-body);
}

/* ---------------- Switcher (first in DOM, below the stack on screen) ---------------- */

.stories__switch {
  order: 1;                     /* stack renders first; focus order stays DOM order */
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-10);
  padding-top: var(--s-7);
  border-top: 1px solid var(--c-hairline);
}

.stories__tab {
  display: inline-flex;
  align-items: center;
  min-height: var(--s-9);       /* 48px — clears the 44px touch target */
  padding-inline: var(--s-5);
  border-radius: var(--r-pill);
  background: transparent;
  /* 3.4:1 on white — reads as a control boundary, not a hairline. */
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-slate-light) 88%, var(--c-white));
  color: var(--text-body);
  white-space: nowrap;
  transition:
    background var(--t-fast) var(--ease-out),
    color var(--t-fast) var(--ease-out),
    box-shadow var(--t-fast) var(--ease-out),
    transform var(--t-fast) var(--ease-out);
}

/* Wordmark inside the pill inherits the pill's colour states. */
.stories__tab-mark {
  height: var(--s-5);
  width: auto;
}

.stories__tab:hover {
  background: var(--c-offwhite);
  color: var(--c-navy);
  box-shadow: inset 0 0 0 1px var(--c-slate-light), var(--sh-xs);
  transform: translateY(-1px);
}
.stories__tab:active { transform: translateY(0); }

/* No JS: only the first panel is visible and the pills do nothing — hide them.
   main.js stamps .js-ready on <html> at boot. */
html:not(.js-ready) .stories__switch { display: none; }

/* Selected state is a fill swap, not a hue swap — survives greyscale. */
.stories__tab.is-active,
.stories__tab.is-active:hover {
  background: var(--c-navy);
  color: var(--text-invert);
  box-shadow: inset 0 0 0 1px var(--c-navy);
  transform: none;
}

/* ---------------- Footer link ---------------- */

.stories__foot { margin-top: var(--s-9); }

/* ---------------- Responsive ---------------- */

@media (max-width: 1024px) {
  .stories__panel { column-gap: var(--s-10); }
  .stories__q { max-width: 44ch; }
}

@media (max-width: 768px) {
  .stories__panel {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--s-9);
  }
  .stories__stack { margin-top: var(--s-9); }
  .stories__q, .stories__metric-l { max-width: 46ch; }
  /* Quote drops to ~22px here — snug tracking is too tight to read stacked. */
  .stories__q p { line-height: var(--lh-normal); }
  .stories__metrics { margin-top: var(--s-7); }
  /* Single column: nothing to bottom-align against. */
  .stories__by { margin-top: 0; padding-top: var(--s-8); }
}