/* three-movements block deltas (plan §5.2, reworked cwt.25) — web-only layout.
 * Centred eyebrow + title, then either the full geometric DVI mark (no steps)
 * or the three step columns, each titled by its single DVI mark. The process
 * chain lives in its own block (d2v-process). SDS tokens, so it flips with the
 * dark trigger. */
@layer web {
  .block-three-movements { text-align: center; }

  .tm__eyebrow { justify-content: center; color: var(--sph-text-muted); }
  /* Trailing dash to match the leading .sph-eyebrow::before — a centred — label —. */
  .tm__eyebrow::after {
    content: "";
    width: 28px;
    height: 1px;
    background: currentColor;
    display: inline-block;
  }

  .tm__title {
    font-family: var(--sph-font-display);
    font-weight: var(--sph-weight-extrabold);
    text-transform: uppercase;
    font-size: clamp(1.6rem, 4vw, 2.75rem);
    line-height: 1.05;
    letter-spacing: var(--sph-tracking-tight);
    color: var(--sph-text);
    margin: clamp(0.5rem, 1.5vw, 1rem) auto 0;
    max-width: 20ch;
  }
  .tm__title .sph-accent { color: var(--sph-primary); }

  /* No steps: the full geometric mark, big, under the title. */
  .tm__mark {
    font-size: clamp(2rem, 6vw, 4.25rem);
    margin: clamp(1rem, 3vw, 2rem) 0;
    color: var(--sph-text);
  }

  .tm__steps {
    list-style: none;
    margin: clamp(2rem, 5vw, 3.5rem) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.5rem, 4vw, 2.5rem);
    text-align: left;
  }
  @media (max-width: 48rem) {
    .tm__steps { grid-template-columns: 1fr; }
  }

  .tm__step { padding-top: 1rem; border-top: 2px solid var(--sph-border); }
  .tm__step-label {
    font-family: var(--sph-font-display);
    font-weight: var(--sph-weight-bold);
    font-size: var(--sph-fs-xs);
    letter-spacing: var(--sph-tracking-wider);
    text-transform: uppercase;
    color: var(--sph-primary);
    margin: 0;
  }
  /* The step's title IS its single DVI mark (shape + fixed word). */
  .tm__step-mark {
    font-size: var(--sph-fs-xl);
    color: var(--sph-text);
    margin: 0.35rem 0 0.5rem;
  }
  .tm__step-text {
    margin: 0;
    color: var(--sph-text-soft);
    font-size: var(--sph-fs-sm);
    line-height: var(--sph-lh-normal);
  }
}