/*
 * sd-stages — process / stages (Session 2.3; approved pattern D-026 item 5: Observe, Understand, Analyze, Reveal)
 * Ordered list; numbered nodes joined by the Blue Line; the last node has a copper ring (end of a process).
 * Vertical on phones and tablets, horizontal from 1024px.
 * Motion (optional, data-sd-component="stages"): the line travels from stage to stage once when the section
 * comes into view (about 4 s, under the 5 s limit); before that the list carries data-state="waiting".
 * Reduced motion and no JS: final state, no motion. Content is complete without motion.
 */

.sd-stages {
  display: grid;
  gap: var(--sd-space-5);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: sd-stage;
}

.sd-stages__item {
  position: relative;
  display: grid;
  gap: var(--sd-space-2);
  padding-left: var(--sd-space-7);
  counter-increment: sd-stage;
}

/* Node */
.sd-stages__item::before {
  content: "0" counter(sd-stage);
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 2px solid var(--sd-color-brand-blue);
  border-radius: 50%;
  background: var(--sd-color-brand-blue);
  color: var(--sd-color-white);
  font-size: var(--sd-font-size-small);
  font-weight: var(--sd-font-weight-semibold);
  font-variant-numeric: tabular-nums;
  transition:
    background-color var(--sd-duration-base) var(--sd-ease-out),
    border-color var(--sd-duration-base) var(--sd-ease-out),
    color var(--sd-duration-base) var(--sd-ease-out);
}

/* Connecting line (Blue Line segment) */
.sd-stages__item::after {
  content: "";
  position: absolute;
  left: calc(1.375rem - 1px);
  top: 2.75rem;
  bottom: calc(-1 * var(--sd-space-5));
  width: var(--sd-line-width);
  background: var(--sd-color-line-primary);
  transform-origin: top;
  transition: transform calc(var(--sd-stages-step) - var(--sd-stages-lead)) linear;
}

.sd-stages__item:last-child::after { display: none; }

.sd-stages__item:last-child::before {
  border-color: var(--sd-color-accent-copper);
  background: var(--sd-color-white);
  color: var(--sd-color-brand-blue);
}

.sd-stages__title {
  padding-top: 0.4rem;
  font-size: var(--sd-font-size-h4);
  line-height: var(--sd-line-height-h4);
  transition: opacity var(--sd-duration-calm) var(--sd-ease-out);
}

.sd-stages__text {
  color: var(--sd-color-text-muted);
  font-size: var(--sd-font-size-small);
  transition: opacity var(--sd-duration-calm) var(--sd-ease-out);
}

/* Waiting state (before the section is in view) */
.sd-stages[data-state="waiting"] .sd-stages__item::before {
  border-color: var(--sd-color-gray-300);
  background: var(--sd-color-white);
  color: var(--sd-color-gray-600);
}

.sd-stages[data-state="waiting"] .sd-stages__item::after { transform: scaleY(0); }

.sd-stages[data-state="waiting"] .sd-stages__title,
.sd-stages[data-state="waiting"] .sd-stages__text { opacity: 0.35; }

/* The waiting state is applied at once (no reverse animation while the page loads — Session 5.2 fix);
   the transitions run only from waiting to done */
.sd-stages[data-state="waiting"] .sd-stages__item::before,
.sd-stages[data-state="waiting"] .sd-stages__item::after,
.sd-stages[data-state="waiting"] .sd-stages__title,
.sd-stages[data-state="waiting"] .sd-stages__text { transition: none; }

/* Sequence: node, then the line to the next node — one rhythm for any number of stages (Session 5.2, F-04).
   Each segment starts when its node lights and ends exactly when the next node lights, so the line travels
   1 → 2 → 3 … in order and never runs on two segments at once.
   --sd-stages-step: time per stage; --sd-stages-lead: pause at a node before the line leaves it.
   Default (four stages, approved D-026): 1.1 s per stage, 0.3 s pause → 3.3 s. Longer lists set a shorter
   step and no pause, so the line runs continuously and stays under the 5 s limit (Blueprint 8.21). */
.sd-stages { --sd-stages-step: 1.1s; --sd-stages-lead: 0.3s; }
.sd-stages--continuous { --sd-stages-step: 0.7s; --sd-stages-lead: 0s; }

.sd-stages__item:nth-child(2) { --sd-stage-i: 1; }
.sd-stages__item:nth-child(3) { --sd-stage-i: 2; }
.sd-stages__item:nth-child(4) { --sd-stage-i: 3; }
.sd-stages__item:nth-child(5) { --sd-stage-i: 4; }
.sd-stages__item:nth-child(6) { --sd-stage-i: 5; }
.sd-stages__item:nth-child(7) { --sd-stage-i: 6; }

.sd-stages__item::before,
.sd-stages__title,
.sd-stages__text { transition-delay: calc(var(--sd-stage-i, 0) * var(--sd-stages-step)); }
.sd-stages__item::after { transition-delay: calc(var(--sd-stage-i, 0) * var(--sd-stages-step) + var(--sd-stages-lead)); }

@media (min-width: 1024px) {
  .sd-stages {
    grid-template-columns: repeat(var(--sd-stages-count, 4), minmax(0, 1fr));
    gap: var(--sd-grid-gutter);
  }

  .sd-stages__item {
    padding-left: 0;
    padding-top: var(--sd-space-8);
  }

  .sd-stages__item::after {
    left: 2.75rem;
    right: calc(-1 * var(--sd-grid-gutter));
    top: calc(1.375rem - 1px);
    bottom: auto;
    width: auto;
    height: var(--sd-line-width);
    transform-origin: left;
  }

  .sd-stages[data-state="waiting"] .sd-stages__item::after { transform: scaleX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .sd-stages__item::before,
  .sd-stages__item::after,
  .sd-stages__title,
  .sd-stages__text { transition-delay: 0s !important; }
}

/* ---------- Variant roadmap: long processes (Session 4.2; Clinic Development, Blueprint 5.25, 6.8, 7.8) ----------
 * Vertical at every width (eight stages do not fit one row). Title and explanation side by side from 1024px.
 * Static: no timed reveal (eight steps would exceed the 5 s limit, Blueprint 8.21); motion for the Clinic
 * Development page lives in the animation area (sd-scene, Session 4.6). Last node copper = where value is received.
 */

.sd-stages--roadmap { gap: 0; }

.sd-stages--roadmap .sd-stages__item {
  padding-left: var(--sd-space-7);
  padding-bottom: var(--sd-space-6);
}

.sd-stages--roadmap .sd-stages__item:last-child { padding-bottom: 0; }

.sd-stages--roadmap .sd-stages__item::after { bottom: 0; }

.sd-stages--roadmap .sd-stages__text {
  color: var(--sd-color-text-default);
  font-size: var(--sd-font-size-body);
}

.sd-stages__detail {
  color: var(--sd-color-text-muted);
  font-size: var(--sd-font-size-small);
  line-height: var(--sd-line-height-small);
}

@media (min-width: 1024px) {
  .sd-stages--roadmap { grid-template-columns: 1fr; gap: 0; }

  .sd-stages--roadmap .sd-stages__item {
    grid-template-columns: 5fr 7fr;
    column-gap: var(--sd-space-7);
    align-items: start;
    padding-top: 0;
    padding-left: var(--sd-space-9);
    padding-bottom: var(--sd-space-7);
  }

  .sd-stages--roadmap .sd-stages__title { grid-row: span 2; }

  .sd-stages--roadmap .sd-stages__item::after {
    left: calc(1.375rem - 1px);
    right: auto;
    top: 2.75rem;
    bottom: 0;
    width: var(--sd-line-width);
    height: auto;
    transform-origin: top;
  }
}