/* ==========================================================================
   STEPS — numbered steps: the "01/" number, a title, a line
   ==========================================================================
   Rich text <p class="step__num">01</p><h3>Title</h3><p>copy</p> in a text
   element `step`. The accent slash after the number is drawn here.

     tile  `card card--sm step notch-tr sm` + a toolbox column  (a 3–5-up grid)
     row   `step step--row`  big number left, copy from ~180px, a rule between
           rows that starts at the copy (a process page)
   ========================================================================== */
.step {
  .step__num {
    margin: 0 0 0.5em;
    color: var(--prime);
    font-size: clamp(1.625rem, 2.2vw, 2rem);
    font-weight: 700;
    line-height: 1;

    &::after { content: "/"; margin-left: 0.12em; color: var(--accent); }
  }
  h3 { margin-bottom: 0.3em; font-size: 1.125rem; }
  p:not(.step__num) { margin: 0; font-size: 1rem; }
}

/* ---- Row ------------------------------------------------------------------ */
.step--row > .rte {
  display: grid;
  grid-template-columns: clamp(96px, 12.5vw, 180px) minmax(0, 1fr);
  padding-top: clamp(22px, 2.4vw, 30px);

  > :not(.step__num) { grid-column: 2; max-width: 940px; }
  .step__num {
    grid-row: span 2;
    margin: 0;
    font-size: clamp(2.5rem, 4.4vw, 4rem);
    font-weight: 800;
  }
  h3 { margin-bottom: 0.45em; font-size: clamp(1.125rem, 1.5vw, 1.375rem); }
  p:not(.step__num) { font-size: 1.0625rem; }
}
/* The rule closes a step's copy, so it runs from the copy column to the
   column's end; the last step has none. */
.step--row:not(:last-child) > .rte::after {
  content: "";
  grid-column: 2;
  margin-top: clamp(26px, 2.6vw, 36px);
  border-top: 1px solid var(--prime);
}

@media (max-width: 560px) {
  .step--row > .rte {
    grid-template-columns: 1fr;
    > :not(.step__num) { grid-column: 1; }
    .step__num { grid-row: auto; margin-bottom: 0.3em; }
  }
  .step--row:not(:last-child) > .rte::after { grid-column: 1; }
}