/* ==========================================================================
   D07 Customer Story — page styles
   Long-form case study: hero facts, before/after metrics, story chapters
   with a sticky timeline, closing CTA band.
   Behaviour (reading progress, timeline state): assets/js/pages/d07-customer-story.js
   ========================================================================== */

/* ── Reading progress bar (fixed, top of the viewport) ──────────────────── */

.read-progress {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 50;
  width: var(--read, 0%);
  height: 3px;
  background: var(--graphite-900);
}

/* ── Hero ───────────────────────────────────────────────────────────────── */

.story-hero {
  position: relative;
  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 88px) clamp(20px, 4.2vw, 60px) clamp(32px, 4vw, 56px);
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.story-hero__title {
  margin: 0;
  max-width: 1100px;
  font: 500 clamp(44px, 1.4rem + 5vw, 108px)/.96 'Geist', sans-serif;
  letter-spacing: -.045em;
  text-wrap: balance;
}
.story-hero__title em {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.1em;
}

/* Hospital facts row */
.story-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
  max-width: 960px;
  border-top: 1px solid var(--color-hairline);
}

.story-facts__item {
  padding: 14px 16px 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.story-facts__label {
  font: 500 11px/1 'Geist Mono', monospace;
  letter-spacing: .08em;
  color: var(--graphite-500);
}

.story-facts__value { font: 500 16px/1.3 'Geist', sans-serif; }

/* Wide photo placeholder */
.story-photo {
  margin: 0 clamp(8px, 1.2vw, 16px);
  aspect-ratio: 21 / 9;
  min-height: 260px;
  border-radius: 24px;
  background: repeating-linear-gradient(135deg, var(--sage-200) 0 14px, var(--sage-250) 14px 28px);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* On narrow screens min-height + 21/9 would force a ~607px wide box and a
   horizontal page scroll; keep the 260px height and fill the width instead. */
@media (max-width: 959.98px) {
  .story-photo { aspect-ratio: auto; }
}

.story-photo__label {
  font: 500 12px/1.5 'Geist Mono', monospace;
  letter-spacing: .06em;
  color: var(--sage-800);
  text-align: center;
}

/* ── Before / after metrics ─────────────────────────────────────────────── */

.story-metrics {
  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(48px, 6vw, 88px) clamp(20px, 4.2vw, 60px) 0;
}

.story-metrics__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  border-top: 2px solid var(--graphite-900);
}

.metric {
  padding: 24px 20px 0 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.metric__label {
  font: 500 11px/1 'Geist Mono', monospace;
  letter-spacing: .08em;
  color: var(--graphite-500);
}

.metric__values {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.metric__before {
  font: 400 20px/1 'Geist', sans-serif;
  color: var(--graphite-500);
  text-decoration: line-through;
  text-decoration-color: rgba(10, 18, 22, .35);
  font-variant-numeric: tabular-nums;
}

.metric__after {
  font: 500 44px/1 'Geist', sans-serif;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}

.metric__unit {
  font: 500 13px/1 'Geist Mono', monospace;
  color: var(--graphite-500);
}

.metric__bars {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.metric__bar {
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: var(--graphite-200);
}
.metric__bar--after {
  width: var(--value);
  background: var(--scrub-600);
}

.metric__note {
  font: 400 13px/1.35 'Geist', sans-serif;
  color: var(--graphite-600);
}

.story-metrics__source {
  display: block;
  margin-top: 16px;
  font: 400 12px/1.5 'Geist Mono', monospace;
  color: var(--graphite-500);
}

/* ── Story: timeline + chapters ─────────────────────────────────────────── */

.story {
  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(56px, 7vw, 112px) clamp(20px, 4.2vw, 60px);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(32px, 5vw, 80px);
}

.timeline {
  flex: 0 0 220px;
  min-width: 0;
}

.timeline__sticky {
  position: sticky;
  top: 120px;
  display: flex;
  flex-direction: column;
}

.timeline__label {
  padding-bottom: 16px;
  font: 500 11px/1 'Geist Mono', monospace;
  letter-spacing: .08em;
  color: var(--graphite-500);
}

.timeline__track {
  position: relative;
  padding-left: 24px;
}

.timeline__rail,
.timeline__progress {
  position: absolute;
  left: 5px;
  top: 6px;
  width: 1px;
}

.timeline__rail {
  bottom: 6px;
  background: var(--ink-a16);
}

/* --progress: 0…1, share of the story section scrolled past */
.timeline__progress {
  height: calc((100% - 12px) * var(--progress, 0));
  background: var(--graphite-900);
  transition: height var(--dur-2) linear;
}

.timeline__item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 0 18px;
  color: var(--graphite-900);
  text-decoration: none;
}
.timeline__item:hover { color: var(--graphite-900); }

.timeline__dot {
  position: absolute;
  left: -24px;
  top: 10px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1px solid var(--graphite-900);
  background: var(--graphite-50);
  transition: background var(--dur-3);
}
.timeline__item.is-done .timeline__dot { background: var(--graphite-900); }

.timeline__when {
  font: 500 11px/1 'Geist Mono', monospace;
  color: var(--graphite-500);
}

.timeline__title { font: 400 14px/1.3 'Geist', sans-serif; }
.timeline__item.is-active .timeline__title { font-weight: 500; }

.story__article {
  flex: 1 1 560px;
  min-width: 0;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  font: 400 19px/1.7 'Geist', sans-serif;
  color: var(--graphite-750);
}

.chapter {
  display: flex;
  flex-direction: column;
  gap: 20px;
  scroll-margin-top: 120px;
}

.chapter__index {
  font: 500 12px/1 'Geist Mono', monospace;
  letter-spacing: .08em;
  color: var(--graphite-600);
}

.chapter__title {
  margin: 0;
  font: 500 clamp(28px, 1.3rem + 1.6vw, 44px)/1.1 'Geist', sans-serif;
  letter-spacing: -.025em;
  color: var(--graphite-900);
}

.chapter__text {
  margin: 0;
  text-wrap: pretty;
}

.chapter__quote {
  margin: 12px 0;
  padding: 0;
  font: 400 clamp(28px, 1.1rem + 1.8vw, 42px)/1.15 'Instrument Serif', serif;
  letter-spacing: -.01em;
  color: var(--graphite-900);
}

.chapter__quote-author {
  display: block;
  margin-top: 14px;
  font: 400 14px/1.4 'Geist', sans-serif;
  letter-spacing: 0;
  color: var(--graphite-600);
}

.chapter__figure {
  margin: 8px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.chapter__image {
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-l);
  background: repeating-linear-gradient(135deg, var(--sage-100) 0 12px, var(--sage-150) 12px 24px);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 500 11px/1.5 'Geist Mono', monospace;
  color: var(--graphite-600);
}

.chapter__caption {
  font: 400 13px/1.4 'Geist Mono', monospace;
  color: var(--graphite-500);
}

/* Mid-article micro-conversion */
.chapter__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding: 22px 24px;
  border-radius: var(--radius-l);
  background: var(--graphite-0);
  border: 1px solid var(--color-hairline);
}

.chapter__cta-text {
  font: 500 17px/1.35 'Geist', sans-serif;
  color: var(--graphite-900);
}

/* Outlined like .btn--ink-outline, but without a hover fill (as in the original) */
.chapter__cta-btn {
  height: 44px;
  padding: 0 18px;
  border-color: var(--graphite-900);
  color: var(--graphite-900);
  font-size: 15px;
  white-space: normal;
}
.chapter__cta-btn:hover { color: var(--graphite-900); }

/* ── Closing CTA band ───────────────────────────────────────────────────── */

.story-band {
  background: var(--graphite-0);
  border-top: 1px solid var(--color-hairline);
}

.story-band__inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(72px, 9vw, 128px) clamp(20px, 4.2vw, 60px);
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.story-band__title {
  margin: 0;
  font: 500 clamp(44px, 1.4rem + 5vw, 100px)/.96 'Geist', sans-serif;
  letter-spacing: -.045em;
}
.story-band__title em {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.08em;
}

.story-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.story-band__actions .btn { white-space: normal; }

/* Hairline outline without a hover change (as in the original) */
.story-band__secondary { border-color: var(--color-hairline-strong); }
.story-band__secondary:hover { color: var(--color-text); }

.story-band__note {
  font: 400 15px/1.4 'Geist', sans-serif;
  color: var(--graphite-600);
}