/* ==========================================================================
   STATS ROW — a strip of headline metrics   (visual only)
   ==========================================================================
   A short row of "big number + caption" stats under a heading. A single
   hairline rule runs across the TOP of the row and vertical hairlines divide
   the cells. The metric is a display-face heading; the caption is small body.

   Build: element_group `row stats` with N children `col-1-3` (or `col-1-4`),
   each a `text` element holding:
       <h3>No audit failures.</h3>
       <p>Across every plan we administer.</p>

   Styled BY TAG inside `.stats` (Contao's rich-text editor strips inner
   classes): the first heading is the metric, the paragraph is the caption.
   ========================================================================== */
.stats {
    --stats-rule: var(--hairline);       /* a modifier may go solid; see below */
    position: relative;
    padding-top: clamp(1.25rem, 2.4vw, 2rem);
    align-items: start;
    /* THE TOP RULE IS AN INSET PSEUDO-ELEMENT, NOT A BORDER. A stats row is an
       element_group, which is a `.block` and so carries `padding-inline:
       var(--page-gutter)`; a border-top therefore ran a full gutter past the text
       at each end. Same treatment as the hero's framing rules. */
    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: var(--page-gutter);
        right: var(--page-gutter);
        height: 0;
        border-top: 1px solid var(--stats-rule);
        pointer-events: none;
    }
    > * { position: relative; }
    /* cells above the rule */
    > * + * {
        border-left: 1px solid var(--stats-rule);
        padding-left: clamp(1.5rem, 3vw, 3rem);
    }
}
/* A hero is a legitimate home for a metric/milestone row, but `.hero .row`
   (hero.css) centres its columns for the rail layout and out-specifies the
   single class above.
   Cells in a stats row are top-aligned by definition, so restate it high enough
   to hold in a hero, whatever order the layout loads the two files in. */
.hero .row.stats { align-items: start; }

.stats {
    h3 {
        font-family: var(--type-display);
        font-weight: 700;
        font-size: clamp(1.35rem, 1.9vw, 1.6875rem);   /* ~27px */
        line-height: 1.15;
        color: var(--prime);
        margin: 0 0 0.5em;
    }
    p {
        margin: 0;
        color: var(--text-body);
        font-size: clamp(0.9rem, 1vw, 0.9375rem);       /* ~15px */
        line-height: 1.45;
    }
}

/* On a dark band: light rule/divider, white metric, muted caption. */
.bg-ink .stats,
.bg-dark .stats,
.bg-prime .stats { --stats-rule: var(--hairline-on-dark); }
.bg-ink .stats h3,
.bg-dark .stats h3,
.bg-prime .stats h3 { color: var(--white); }
.bg-ink .stats p,
.bg-dark .stats p,
.bg-prime .stats p { color: var(--text-on-dark-dim); }

/* --------------------------------------------------------------------------
   DIVIDERS MUST VANISH EXACTLY WHEN THE COLUMNS STOP SITTING SIDE BY SIDE
   --------------------------------------------------------------------------
   A divider is drawn on "every cell but the first", which is only right while
   the cells share ONE LINE. So every breakpoint in framework_v3's step-down
   ramp needs a matching rule here, and "off" is not the only answer — at a
   2-up or 3-up the cell that STARTS each line loses its divider and the rest
   keep theirs.

   Tracking framework_v3's ramp (see "COLUMNS THAT STEP DOWN BEFORE STACKING"):
     .col-1-3 / .col-30   3-up → 2-up (992) → 1-up (600)
     .col-1-4 / .col-1-2  4-up → 2-up (992) → 1-up (600)
     .col-20              5-up → 3-up (992) → 2-up (600) → 1-up (480)
     major halves alone   → 1-up (992)

   `.stats--split` inherits all of this through the same selectors.
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 992px) {
    /* The major half of an unequal pair, on its own, goes straight to 1-up. */
    .stats > .col-2-3 + .col-2-3,
    .stats > .col-3-4 + .col-3-4,
    .stats > .col-3-5 + .col-3-5,
    .stats > .col-2-5 + .col-2-5 {
        border-left: 0;
        padding-left: 0;
        padding-top: 1.25rem;
    }
    /* 2-up: only the cell that starts a line loses its divider. */
    .stats > .col-1-3:nth-child(odd),
    .stats > .col-30:nth-child(odd),
    .stats > .col-1-4:nth-child(odd),
    .stats > .col-1-2:nth-child(odd) {
        border-left: 0;
        padding-left: 0;
    }
    .stats > .col-1-3:nth-child(n + 3),
    .stats > .col-30:nth-child(n + 3),
    .stats > .col-1-4:nth-child(n + 3),
    .stats > .col-1-2:nth-child(n + 3) { padding-top: 1.25rem; }

    /* 3-up: every third cell starts a line. */
    .stats > .col-20:nth-child(3n + 1) {
        border-left: 0;
        padding-left: 0;
    }
    .stats > .col-20:nth-child(n + 4) { padding-top: 1.25rem; }
}
@media only screen and (max-width: 600px) {
    /* Everything but a fifth is now fully stacked. */
    .stats > * + * { border-left: 0; padding-left: 0; padding-top: 1.25rem; }

    /* A fifth is 2-up here, so the second of each pair keeps its divider. */
    .stats > .col-20:nth-child(even) {
        border-left: 1px solid var(--stats-rule);
        padding-left: clamp(1.5rem, 3vw, 3rem);
        padding-top: 0;
    }
    .stats > .col-20:nth-child(-n + 2) { padding-top: 0; }
}
@media only screen and (max-width: 480px) {
    .stats > .col-20 + .col-20 {
        border-left: 0;
        padding-left: 0;
        padding-top: 1.25rem;
    }
}

/* ==========================================================================
   FIXED-HEIGHT DIVIDERS  `stats--split`
   ==========================================================================
   The base component divides cells with a border, so the divider is as tall as
   its own cell — ragged when the cells hold different amounts of copy. Where
   the design draws a divider of ONE fixed height, centred in the gutter, use this instead: the border comes off
   and each cell after the first draws its own short rule, pulled half a gutter
   left so it sits in the middle of the gap. `--gap-x` comes from `.row`.
   ========================================================================== */
.stats--split {
    > * + * {
        border-left: 0;
        padding-left: 0;
        position: relative;
    }
    > * + *::before {
        content: "";
        position: absolute;
        top: 0;
        left: calc(-1 * var(--gap-x, 0px) / 2);
        width: 1px;
        height: var(--stats-divider, 140px);
        background: var(--stats-rule);
    }
}

/* ==========================================================================
   MILESTONE ROW  `stats stats--split stats--milestones`
   ==========================================================================
   A dated history strip: "2014 / 2016 / … / Today". Same
   bones as a metric row, but the label is grey body colour rather than the
   navy metric, the caption is a touch larger, and the LAST cell is the present
   day so its label goes brand-navy. No top rule of its own — it's designed to
   hang under the hero's bottom framing rule.

   Build: element_group `row stats stats--split stats--milestones` with N
   children `col-20` (= a fifth; or col-1-4 for four), each a `text`:
       <h3>2016</h3>
       <p>What happened that year…</p>
   ========================================================================== */
.stats--milestones {
    --stats-rule: var(--heading);
    padding-top: clamp(1.75rem, 2.6vw, 2.5rem);
    &::before { content: none; }
    /* hangs under the hero's own rule */
    h3 { color: var(--text-body); }
    > *:last-child h3 { color: var(--prime); }
    p { font-size: clamp(0.9rem, 1.05vw, 1rem); }
}   /* ~16px */

/* ==========================================================================
   VALUES ROW  `stats stats--split stats--values`
   ==========================================================================
   Short "how we work" statements under a solid hairline: a display-face title at
   medium weight (a statement, not a metric, so it isn't bolded to 700) over a
   line of body copy.

   Build: element_group `row stats stats--split stats--values` with N children
   `col-1-4`, each a `text`:  <h3>Tell the truth.</h3><p>…</p>
   ========================================================================== */
.stats--values {
    --stats-rule: var(--heading);
    --stats-divider: 134px;
    padding-top: clamp(1.75rem, 2.6vw, 2.25rem);
    h3 {
        font-weight: 500;
        color: var(--heading);
    }
    p { font-size: clamp(1rem, 1.25vw, 1.1875rem); }
}    /* ~19px */

/* The fixed-height divider follows the same ramp — see the block above. The
   `.stats--split` divider is a pseudo-element, so it is switched off with
   `content: none` rather than a zeroed border. */
@media only screen and (max-width: 992px) {
    .stats--split > .col-2-3 + .col-2-3::before,
    .stats--split > .col-3-4 + .col-3-4::before,
    .stats--split > .col-2-5 + .col-2-5::before,
    .stats--split > .col-3-5 + .col-3-5::before,
    .stats--split > .col-1-3:nth-child(odd)::before,
    .stats--split > .col-30:nth-child(odd)::before,
    .stats--split > .col-1-4:nth-child(odd)::before,
    .stats--split > .col-1-2:nth-child(odd)::before,
    .stats--split > .col-20:nth-child(3n + 1)::before { content: none; }
}
@media only screen and (max-width: 600px) {
    .stats--split > * + *::before { content: none; }
    .stats--split > .col-20:nth-child(even)::before { content: ""; }
}
@media only screen and (max-width: 480px) {
    .stats--split > .col-20 + .col-20::before { content: none; }
}