/* JOURNEY-INFOGRAPHIC1 (Director 2026-07-21: "anytime you have something like this on the website
   it needs like an infographic within it or next to it / ideally a dynamic infographic").

   This is a PROGRESSIVE ENHANCEMENT of the `.steps` / `.step` block that already exists on 10
   pages (how-it-works, weight-loss-clinic-leeds, ed-clinic-leeds, travel-clinic-leeds, pgds,
   pgds/vaccinations, compliance-packs, nhs/pharmacy-first/what-happens-next and two Mounjaro
   advice pages). It adds NO markup of its own to those pages and duplicates NO copy: the steps
   stay authored in the HTML, and journey-infographic.js draws the connecting rail on top.
   Turn it on anywhere by loading the css+js — every `.steps` block upgrades automatically.

   Without JS (or on an unsupported browser) the block renders exactly as it always did: three
   plain cards. Nothing here is load-bearing for comprehension. */

.steps.journey {
  position: relative;
  /* room for the rail that runs behind the number circles */
  padding-top: 4px;
}

/* the rail sits BEHIND the cards; cards are opaque so it reads as "threading through" */
.journey-rail {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}
.steps.journey > .step { position: relative; z-index: 1; }

.journey-rail .jr-track {
  stroke: #e5e7eb;
  stroke-width: 3;
  fill: none;
  stroke-linecap: round;
}
.journey-rail .jr-fill {
  stroke: var(--teal, #0f5257);
  stroke-width: 3;
  fill: none;
  stroke-linecap: round;
  /* drawn via stroke-dashoffset in JS — transform/opacity-class animation only, no layout */
  transition: stroke-dashoffset 900ms cubic-bezier(.22,.61,.36,1);
}
.journey-rail .jr-pulse {
  fill: var(--terracotta, #c47556);
  opacity: 0;
}

/* number badge gains a state ring. The badge itself is the page's existing .step .n —
   we only add a ring + a check, never restyle the brand colour. */
.steps.journey .step .n {
  position: relative;
  transition: transform 220ms cubic-bezier(.22,.61,.36,1), box-shadow 220ms ease;
}
.steps.journey .step[data-jstate="active"] .n {
  transform: scale(1.12);
  box-shadow: 0 0 0 6px rgba(15, 82, 87, .14), 0 4px 10px rgba(15, 82, 87, .3);
}
.steps.journey .step[data-jstate="done"] .n {
  background: var(--dark-teal, #0A2E36);
}

/* the card lifts as the journey reaches it */
.steps.journey .step {
  transition: transform 320ms cubic-bezier(.22,.61,.36,1), box-shadow 320ms ease,
              border-color 320ms ease;
}
.steps.journey .step[data-jstate="active"] {
  border-color: var(--teal, #0f5257);
  box-shadow: 0 10px 30px rgba(10, 46, 54, .11);
}

/* optional timing chip — rendered ONLY when the page author sets data-when on the step.
   The component never invents a time: a delivery/turnaround claim on a pharmacy site is a
   promise to a patient, so it has to be authored deliberately, not generated. */
.steps.journey .step .jr-when {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(15, 82, 87, .07);
  color: var(--teal, #0f5257);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .01em;
}
.steps.journey .step .jr-when::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--terracotta, #c47556);
}

/* keyboard/pointer affordance — the whole card becomes a scrub target.
   44px minimum is satisfied by the card itself, which is far larger. */
.steps.journey .step { cursor: default; }
.steps.journey.is-interactive .step { cursor: pointer; }
.steps.journey .step:focus-visible {
  outline: 3px solid var(--terracotta, #c47556);
  outline-offset: 3px;
}

/* Entrance: only the transform/opacity pair, so there is no reflow and no CLS. */
.steps.journey.is-armed .step {
  opacity: 0;
  transform: translateY(10px);
}
.steps.journey.is-running .step {
  opacity: 1;
  transform: none;
  transition: opacity 420ms ease, transform 420ms cubic-bezier(.22,.61,.36,1),
              box-shadow 320ms ease, border-color 320ms ease;
}

/* ── Reduced motion: show the finished state immediately. Everything below removes motion
   rather than hiding information — the rail still renders, fully drawn. ─────────────────── */
@media (prefers-reduced-motion: reduce) {
  .steps.journey.is-armed .step,
  .steps.journey.is-running .step { opacity: 1; transform: none; transition: none; }
  .journey-rail .jr-fill { transition: none; }
  .journey-rail .jr-pulse { display: none; }
  .steps.journey .step .n,
  .steps.journey .step { transition: none; }
  .steps.journey .step[data-jstate="active"] .n { transform: none; }
}

/* ── Small screens: the grid stacks, so the rail runs vertically. JS re-measures and redraws;
   these rules only keep the chip and ring comfortable at 375px. ─────────────────────────── */
@media (max-width: 640px) {
  .steps.journey .step[data-jstate="active"] .n { transform: scale(1.08); }
  .steps.journey .step .jr-when { margin-top: 10px; }
}

/* Print: no rail, no states — plain cards. */
@media print {
  .journey-rail { display: none; }
  .steps.journey .step { opacity: 1 !important; transform: none !important; }
}