/* ==========================================================================
   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 (per the Cornerstone "record behind the promise" design). The
   metric is a Literata navy heading; the caption is small grey 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. Every board draws this rule at exactly the container width
       (Our Story's values rule: x302, w1800 of the 2400 board), flush with the
       copy above it. 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);
    }
}

.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(--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: rgba(255, 255, 255, 0.8); }

/* --------------------------------------------------------------------------
   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 (the
   Cornerstone milestone + values rows), 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 / ~100 clients / Merger / 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>Cornerstone founded from scratch…</p>
   ========================================================================== */
.stats--milestones {
    --stats-rule: var(--heading);
    --gap-x: clamp(2.5rem, 5.75vw, 138px);   /* the board's 138 of 2400, divider centred */
    padding-top: clamp(1.75rem, 2.6vw, 2.5rem);
    &::before { content: none; }
    /* hangs under the hero's own rule */
    h3 { color: var(--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 Literata 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;
    --gap-x: clamp(2.5rem, 7.5vw, 181px);    /* the board's 181 of 2400 */
    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; }
}

/* While side by side, the first cell sits in from the rule (the boards' 28-32
   of 2400). Stacked (2-up and below), a split row's dividers run the cell's
   full height with the row gap between them, and a fully stacked cell gets a
   rule above it instead, with the same space either side (Bob, 13 Oct). */
@media only screen and (min-width: 993px) {
    .stats--split > :first-child { padding-left: clamp(0px, 1.3vw, 32px); }
}
@media only screen and (max-width: 992px) {
    .stats.stats--split > :nth-child(n) { padding-top: 0; }
    .stats--split > * + *::before { height: 100%; }
}
@media only screen and (max-width: 600px) {
    .stats--split { --stack-gap: 1.5rem; row-gap: var(--stack-gap); }
    /* the base row's 2-up border would double the split row's own divider */
    .stats.stats--split > .col-20:nth-child(even) { border-left: 0; padding-left: 0; }
    .stats.stats--split > :not(.col-20):nth-child(n + 2) {
        border-top: 1px solid var(--stats-rule);
        padding-top: var(--stack-gap);
    }
}
@media only screen and (max-width: 480px) {
    .stats.stats--split > .col-20:nth-child(n + 2) {
        border-top: 1px solid var(--stats-rule);
        padding-top: var(--stack-gap);
    }
}