/* ==========================================================================
   Elementa 2.2.2 — services-stages.css
   The Services page's journey (client note N6: the four stages clear at a
   glance). A rail lists the stages — 01–04, the title, one live sentence —
   and the four stage modules follow: label, numeral, title, paragraph,
   button, one picture, the link to the next stage. From 62rem the rail
   sits beside the modules, sticky, and marks the stage in view with a CSS
   scroll-driven animation (each module publishes a view timeline, the rail
   listens); browsers without it keep the four in ink and mark a clicked
   stage (:target) instead. Tokens come from main.css; section, wrap, grid,
   label, headings, prose, button, link, media and underline are the theme's.
   ========================================================================== */

/* the section owns the four timelines the rail listens to */
.e-stages { timeline-scope: --e-stage-1, --e-stage-2, --e-stage-3, --e-stage-4; }

/* rail: head on a hairline, then one row per stage ----------------------- */
.e-rail__head {
  display: grid;
  gap: .75rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--line);
}
.e-rail__item { border-bottom: 1px solid var(--line); }
.e-rail__link {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  column-gap: .5rem;
  row-gap: .3rem;
  padding: 1rem 0;
  color: var(--fg);
  transition: color var(--dur-fast);
}
.e-rail__num {
  grid-row: 1 / span 2;
  padding-top: .2em;
  font-size: var(--t-small);
  line-height: 1.4;
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
}
.e-rail__title {
  font-size: var(--t-h4);
  font-weight: 400;
  line-height: 1.3;
}
.e-rail__line {
  grid-column: 2;
  font-size: .8125rem;
  line-height: 1.55;
  color: var(--fg-muted);
  max-width: 32ch;
}

/* stages: one module each, top hairline, the numeral beside the text ---- */
.e-stage {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 1.25rem;
  row-gap: 1.75rem;
  padding-block: var(--space-block);
  border-top: 1px solid var(--line);
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
}
.e-stage:first-child { padding-top: 0; border-top: 0; }
.e-stage:last-child { padding-bottom: 0; }
.e-stage__label { grid-column: 1 / -1; }
.e-stage__num {
  font-size: var(--t-display);
  font-weight: 300;
  line-height: 1;
  color: var(--e-muted);
  font-variant-numeric: tabular-nums;
  padding-top: .08em; /* cap height level with the title's */
}
.e-stage__body { display: grid; gap: 1.5rem; justify-items: start; }
.e-stage__title { max-width: 14em; }

/* the stage's one picture: whole, at its own shape (about 2:1), across the
   module but never wider than the 1056px files */
.e-stage__pic { grid-column: 1 / -1; width: 100%; max-width: 66rem; }
.e-stage .e-stage__pic > img { height: auto; }

.e-stage__next { grid-column: 1 / -1; justify-self: start; gap: .75em; }
.e-stage__next .e-label { color: inherit; }

@media (min-width: 62rem) {
  .e-rail {
    position: sticky;
    top: calc(var(--header-h) + 2.5rem);
    align-self: start;
  }
  .e-stages__list { align-self: start; }
  /* a stage jumped to lands level with the sticky rail's head */
  .e-stage { scroll-margin-top: calc(var(--header-h) + 2.5rem); }
  .e-stage {
    grid-template-columns: 3fr 5fr;
    column-gap: var(--split-gap);
    row-gap: 2.5rem;
  }
  .e-stage__next { grid-column: 2; }
}

/* the rail marks the stage in view: each module publishes a view timeline
   that is active while the module spans a line 40% down the viewport, and
   the matching rail row's colour follows it */
@supports (animation-timeline: view()) {
  @media (min-width: 62rem) {
    .e-stage { view-timeline-axis: block; view-timeline-inset: 40% 59%; }
    .e-stage:nth-child(1) { view-timeline-name: --e-stage-1; }
    .e-stage:nth-child(2) { view-timeline-name: --e-stage-2; }
    .e-stage:nth-child(3) { view-timeline-name: --e-stage-3; }
    .e-stage:nth-child(4) { view-timeline-name: --e-stage-4; }

    .e-rail__link {
      color: var(--fg-muted);
      animation-name: e-rail-on;
      animation-duration: auto;
      animation-timing-function: linear;
      animation-fill-mode: none;
      animation-range: cover 0% cover 100%;
    }
    .e-rail__num { color: inherit; }
    .e-rail__item:nth-child(1) .e-rail__link { animation-timeline: --e-stage-1; }
    .e-rail__item:nth-child(2) .e-rail__link { animation-timeline: --e-stage-2; }
    .e-rail__item:nth-child(3) .e-rail__link { animation-timeline: --e-stage-3; }
    .e-rail__item:nth-child(4) .e-rail__link { animation-timeline: --e-stage-4; }
    .e-rail__link:hover { color: var(--fg); }
  }
}
@keyframes e-rail-on {
  from, to { color: var(--fg); }
}

/* without scroll-driven animations a clicked stage is the marked one */
@supports not (animation-timeline: view()) {
  @media (min-width: 62rem) {
    .e-stages:has(.e-stage:target) .e-rail__link { color: var(--fg-muted); }
    .e-stages:has(.e-stage:nth-child(1):target) .e-rail__item:nth-child(1) .e-rail__link,
    .e-stages:has(.e-stage:nth-child(2):target) .e-rail__item:nth-child(2) .e-rail__link,
    .e-stages:has(.e-stage:nth-child(3):target) .e-rail__item:nth-child(3) .e-rail__link,
    .e-stages:has(.e-stage:nth-child(4):target) .e-rail__item:nth-child(4) .e-rail__link,
    .e-stages:has(.e-stage:target) .e-rail__link:hover { color: var(--fg); }
  }
}