/* process_steps block (Phase 3 Stage 4).
   CSS ported from design-export/base.css; no literal colour, every value a token.
   numbered process steps with connectors */

/* Breathing room so the steps aren't smashed against the intro above or the
   CTA / next block below. */
.process-steps__grid { display: grid; gap: 0; margin-block: 3rem; }
.process-steps--count-3 .process-steps__grid { grid-template-columns: repeat(3, 1fr); }
.process-steps--count-4 .process-steps__grid { grid-template-columns: repeat(4, 1fr); }
.process-steps--count-5 .process-steps__grid { grid-template-columns: repeat(5, 1fr); }
.process-steps__step { position: relative; padding-right: 1.4rem; }
.process-steps__indicator { display: flex; align-items: center; margin-bottom: 1rem; }
.process-steps__number { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%; background: var(--aud-students); color: var(--white); font-family: var(--font-display); font-weight: 800; font-size: 1.4375rem; display: flex; align-items: center; justify-content: center; }
.process-steps--has-connector .process-steps__connector { background: var(--line); }
/* The `dark` background option now resolves to a real .bg-dark-blue ground, so
   the connector's light hairline has to invert or it disappears. */
:is(.bg-dark-blue, .bg-navy, .bg-black, .bg-dark, .bg-dc-dark-blue, .bg-dark-grey) .process-steps--has-connector .process-steps__connector,
:is(.bg-dark-blue, .bg-navy, .bg-black, .bg-dark, .bg-dc-dark-blue, .bg-dark-grey).process-steps--has-connector .process-steps__connector { background: rgba(var(--on-dark-rgb), .28); }
.process-steps__step:last-child .process-steps__connector { display: none; }

/* Horizontal (default): number + a connector line reaching toward the next
   step across the top, with the copy beneath. */
/* Top-align the step cells so every badge sits on the same line. Without this
   the grid stretches all cells to the tallest step, then each step's auto rows
   grow to fill, and align-items:center drops the shorter steps' badges toward
   centre — so a longer step nudges its neighbours' numbers out of line. */
.process-steps--horizontal .process-steps__grid { align-items: start; }
.process-steps--horizontal .process-steps__step { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .7rem 1rem; }
.process-steps--horizontal .process-steps__indicator { grid-column: 1; grid-row: 1; margin-bottom: 0; }
.process-steps--horizontal .process-steps__connector { grid-column: 2; grid-row: 1; width: 100%; height: 3px; }
.process-steps--horizontal .process-steps__content { grid-column: 1 / -1; grid-row: 2; }

/* Vertical: a left rail — number on top, connector running down it — with the
   copy to the right. */
.process-steps--vertical .process-steps__grid { grid-template-columns: 1fr; gap: 0; }
.process-steps--vertical .process-steps__step { display: grid; grid-template-columns: auto 1fr; column-gap: 1.3rem; padding: 0 0 1.8rem; }
.process-steps--vertical .process-steps__step:last-child { padding-bottom: 0; }
.process-steps--vertical .process-steps__indicator { grid-column: 1; grid-row: 1; margin-bottom: 0; }
.process-steps--vertical .process-steps__connector { grid-column: 1; grid-row: 2; width: 3px; height: 100%; min-height: 1.6rem; justify-self: center; margin: .4rem 0; }
.process-steps--vertical .process-steps__content { grid-column: 2; grid-row: 1 / span 2; }
.process-steps__step-title { font-size: 1.4375rem; margin-bottom: .45rem; }
/* Renamed from .process-steps__step-text, which nothing emitted. The template
   has always printed .process-steps__description, so the step body copy was
   unstyled. Selector follows the markup, not the other way round. */
.process-steps__description { font-size: var(--fs-min); color: var(--muted); }
@media (max-width: 64em) { .process-steps__grid { grid-template-columns: 1fr !important; gap: 1.2rem; } .process-steps__connector { display: none; } }