/* =============================================================================
   Module: stages  (modules/stages.php)
   -----------------------------------------------------------------------------
   A chain of steps, numbered, all of them open. It sits in the same column an
   accordion would - the right half of a .section-head--split - and is built to
   read as its sibling: the same hairlines, the same type sizes, the same
   colours. The difference is that there is nothing to press, and that is the
   point (see the note at the top of the module).

   The number is the only new thing on the page. It is set in the accent blue
   and larger than the text beside it, so the eye reads 01, 02, 03 down the
   column before it reads a single word - which is what tells you these three
   are a sequence and not a list.
   ============================================================================= */

.stages {
    --stages-rule: var(--color-line);
    --stages-title: var(--color-primary);
}

/* On an inverted band, the same re-pointing .accordion does. */
.section--invert .stages,
.section--gradient .stages {
    --stages-rule: rgba(var(--rgb-white), 0.35);
    --stages-title: var(--color-text-inverse);
}

/* base/reset.css already strips the padding and the marker off every ol[class],
   which is right here: the numbers are in the markup, not generated. */

.stages__item {
    display: grid;

    /* A fixed first column, not auto: the numbers all have two digits, and a
       track sized by content would still shift if a fourth stage ever pushed
       the count past nine. */
    grid-template-columns: 3.5rem minmax(0, 1fr);
    gap: var(--space-sm);

    padding-block: var(--space-md);
    border-block-start: var(--border-width) solid var(--stages-rule);
}

.stages__item:last-child {
    border-block-end: var(--border-width) solid var(--stages-rule);
}

.stages__number {
    margin: 0;
    color: var(--color-accent);
    font-size: var(--font-size-lead);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-heading);

    /* The digits line up down the column even in a proportional face. */
    font-variant-numeric: tabular-nums;
}

.stages__title {
    margin: 0;
    color: var(--stages-title);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-heading);
}

.stages__text {
    margin-block: var(--space-2xs) 0;
    max-width: var(--measure);
    color: var(--stages-title);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-base);
}