/* ================================================================
   The first in a series of animations that take real world incidents and show what would have happened (or not happened) were NOMENON's Enforcement Architecture deployed.
   ================================================================ */

/* ── default/desktop ── */

.hf-breach {
    flex: 1;
    justify-content: space-between;
    align-items: flex-start;
    background-color: var(--shadow);
    padding-top: var(--page-top);
    padding-bottom: 1.5rem;
}

/* Vertical padding is 0.4rem, not 1rem. Three rows at 1rem top-and-bottom was
   96px of the 562px budget — 17% of the page spent on gutters. Horizontal is
   untouched. */

/* Every row on this page runs on ONE four-column rhythm: number, text, number,
   text. The title row carries two empty .step-n spacers so its boxes land in
   the same two text columns the steps below use — .right-box aligns with the
   Enforcement column and .left-box with the Chain column, at any viewport,
   because both are the same `flex: 1 1 0` share of the same remainder rather
   than a matched pair of guessed offsets.

   It used to be space-between with max-width:45vw boxes, which pushed the right
   box to the right EDGE — close to the enforcement column at some widths and
   visibly off at others. */
.hf-breach .row {
    display: flex;
    width: 100%;
    padding: 0.5rem 2rem 0;
    gap: var(--step-gap);
    align-items: center;
}

.hf-breach .left-box {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    text-align: left;
    gap: 0.4rem;
}

.hf-breach .right-box {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    text-align: left;
    gap: 0.4rem;
}

.hf-breach .eyebrow {
    text-align: left;
    font-size: clamp(0.7rem, calc(0.200vw + 0.660rem), 0.9rem);
}

.hf-breach .product {
    font-size: clamp(1.25rem, 0.500vw + 1.150rem, 1.75rem);
    letter-spacing: normal;
    text-align: left;
}

.hf-breach .teaser {
    text-align: left;
    font-size: clamp(0.9rem,calc(0.200vw + 0.860rem), 1.1rem);
}

.hf-breach .center {
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: center;
    align-items: center;
}

.hf-breach .card-slate {
    width: 100%;
    padding: 0.5rem 1rem;
    gap: 0.5rem;
}

.hf-breach .card-title {
    width: 100%;
    text-align: center;
    font-family: "IBM Plex Sans", sans-serif;
    font-size: clamp(1rem, 0.500vw + 0.900rem, 1.5rem);
    font-weight: 400;
    color: var(--ice);
}

/* ── the case file ──
   Both .card-info rows run on ONE four-column rhythm — label, value, label,
   value — for the same reason the steps do: two sibling rows cannot register
   with each other by measuring their own content. Each cell was content-width,
   so "Case date:" pushed its value right while "Case #:" did not, and the card
   read as two unrelated sentences rather than a spec sheet.

   Same two widths as the steps, same reasoning: the labels are the fixed
   column so every one of them starts at the same x, and the values take equal
   shares of what is left. Position decides the column — odd children are
   labels, even are values — so a row is a row without carrying extra classes.

   The group is CENTRED in the card and every cell inside it is left-aligned.
   That combination is only stable because all four columns are a fixed width:
   both rows then measure the same, so they centre to the same x and the
   columns stay in register. Give any column its content width instead and the
   two rows become different lengths — centring would slide them off each
   other, which is the exact failure the declared rhythm exists to prevent.

   Widths are in em, not rem, so they track the clamp on this element's own
   font-size instead of drifting away from it as the viewport moves. Both are
   the widest string that column has to hold plus a little air: "Case date:"
   measures 4.73em, "Containment" 5.91em. */
.hf-breach {
    --card-lbl-w: 5.25em;
    --card-val-w: 6.5em;
}

.hf-breach .card-info {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 0.5rem;
    font-family: "Oxanium", sans-serif;
    font-size: clamp(0.6rem, 0.200vw + 0.560rem, 0.8rem);
    font-weight: 100;
    text-align: left;
}

.hf-breach .card-part {
    min-width: 0;
}

.hf-breach .card-part:nth-child(odd) {
    flex: 0 0 var(--card-lbl-w);
}

.hf-breach .card-part:nth-child(even) {
    flex: 0 0 var(--card-val-w);
}

.hf-breach .lumen {
    color: var(--soft);
}

.hf-breach .fore {
    color: var(--ice);
}

.hf-breach .heading {
    width: 100%;
    text-align: center;
    font-family: "Oxanium", sans-serif;
    font-size: clamp(0.9rem, 0.333vw + 0.833rem, 1.1rem);
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1.2;
    color: var(--soft);
}

/* ── the paired steps ──
   Chain step N and Enforcement step N share a row, so they read across as a
   pair rather than as two independent columns the eye has to count down in
   parallel.

   Still ONE <ol>: the row is the <li>, so a single counter drives both numerals
   in it. Chain 1 is therefore always opposite Enforcement 1 — they cannot drift
   out of register with each other, and both stay keyed to the numerals
   breach.js draws on the animation.

   Four flex items per row, two widths: the numbers are a fixed --step-n-w so
   every digit column lines up, and the two text cells each take an equal share
   of what is left. */
.hf-breach {
    --step-n-w: 1.6rem;
    --step-gap: 0.6rem;
}

.hf-breach .steps {
    list-style: none;
    counter-reset: step;
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0;
    padding: 0 1.5rem;
    gap: 0.5rem;
}

.hf-breach .step {
    counter-increment: step;
    display: flex;
    align-items: baseline;
    gap: var(--step-gap);
}

/* .heads is a .row, so it already has the row padding; the empty .step-n
   spacers in it keep the two headings above their own text columns. */
.hf-breach .heads {
    gap: var(--step-gap);
    align-items: baseline;
}

.hf-breach .step-n {
    flex: 0 0 var(--step-n-w);
    width: var(--step-n-w);
    font-family: "Oxanium", sans-serif;
    font-size: clamp(0.75rem, 0.417vw + 0.667rem, 1rem);
    font-weight: 500;
    line-height: 1.15;
    text-align: right;
}

.hf-breach .c-n::before,
.hf-breach .e-n::before {
    content: counter(step) ".";
}

.hf-breach .c-n {
    color: var(--soft);
}

.hf-breach .e-n {
    color: var(--accent);
}

/* equal share of the remainder — min-width:0 so a long line wraps inside its
   cell instead of forcing the row wider than the section */
.hf-breach .step-t,
.hf-breach .heads .heading {
    flex: 1 1 0;
    min-width: 0;
    font-family: "IBM Plex Sans", sans-serif;
    font-size: clamp(0.9rem, calc(0.200vw + 0.860rem), 1.1rem);
    font-weight: 200;
    line-height: 1.15;
    text-align: left;
    color: var(--ice);
}

.hf-breach .heads .heading {
    font-family: "Oxanium", sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--soft);
}

.hf-breach .breach,
.hf-breach .scale-wrap {
    width: 65%;
}

.hf-breach .row-last {
    display: flex;
    width: 100%;
    padding: 0 2rem;
    justify-content: center;
    align-items: center;
    gap: 3rem;
}

.hf-breach .breach {
    max-width: 65vw;
    align-self: stretch;
}

.hf-breach .enforce {
    max-width: 20vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.hf-breach .enforce p {
    padding-top: 0.25rem;
    text-align: center;
    font-family: "IBM Plex Sans", sans-serif;
    font-style: italic;
    font-weight: 100;
    font-size: clamp(0.75rem, 0.417vw + 0.667rem, 1rem);
    color: var(--soft);
}

/* ── mobile ───────────────────────────────────────────────────────────────
   Below 769px the four-column rhythm stops being a layout. Two text columns
   out of 390px, minus the page's 1.25rem sides and the 2rem each row adds on
   top of that, left ~140px per column — a stack of two-word lines.

   The pairing survives the reflow, because the pairing is the argument: chain
   step N answered by enforcement step N. The pair stops sitting ACROSS and
   starts sitting DOWN, each half at full measure, and colour does the job the
   columns used to — lumen numerals for the chain, an accent numeral and an
   accent rule for the enforcement. The two headings above the list stop being
   column captions and become the key to that colour.

   Same <ol>, same single counter, same source order. Nothing here reorders
   content; it only changes which axis the pair runs on.
   ──────────────────────────────────────────────────────────────────────── */
@media screen and (max-width: 769px) {
    .hf-breach {
        /* the mobile bar is shorter than the desktop nav — --page-top is
           sized for the latter. Clear the bar, then a line's worth of air, so
           the h1 is not flush against the bar's hairline. */
        padding-top: calc(var(--nav-bar-mob) + 0.9rem);
        padding-bottom: 2.5rem;
        gap: 1.5rem;
    }

    /* The page already carries 1.25rem of side padding from sitewide's mobile
       .page rule. The desktop 2rem on every row stacked on top of it and cost
       104px of a 390px screen — over a quarter of the viewport, spent twice. */
    .hf-breach .row,
    .hf-breach .steps,
    .hf-breach .row-last {
        padding-left: 0;
        padding-right: 0;
    }

    /* ── title ── lockup, then the case card beneath it, both full measure.
       The empty .step-n spacers exist only to park the title boxes over the
       desktop text columns; there are no columns here to park over. */
    /* .heads is also a .row, and it is the one row that must STAY across —
       the two headings are the key, so they have to be readable side by side */
    .hf-breach .row:not(.heads) {
        flex-direction: column;
        padding-top: 0;
        gap: 1.1rem;
    }

    .hf-breach .row > .step-n,
    .hf-breach .heads > .step-n {
        display: none;
    }

    .hf-breach .left-box,
    .hf-breach .right-box {
        width: 100%;
    }

    .hf-breach .product {
        font-size: 1.75rem;
        line-height: 1.1;
    }

    .hf-breach .eyebrow {
        /* the desktop clamp bottoms out at 0.6rem — 9.6px of letter-spaced
           caps, which is a texture, not a line of text */
        font-size: 0.75rem;
        line-height: 1.6;
    }

    .hf-breach .teaser {
        font-size: 0.875rem;
        line-height: 1.5;
    }

    /* ── the case file, stacked ──
       Four columns of 9.6px Oxanium across 318px is a spec sheet rendered as
       texture. The row turns down instead of across: two columns, so each
       .card-info lays its four children out as two label/value lines. Same
       --card-lbl-w drives it, so all four labels across BOTH rows still start
       at one x — the registration is the point of the layout and it survives
       the reflow, exactly as the steps' pairing does. */
    .hf-breach .card-slate {
        padding: 0.75rem 1rem 0.9rem;
    }

    .hf-breach .card-title {
        font-size: 1.15rem;
        line-height: 1.25;
        padding-bottom: 0.6rem;
    }

    .hf-breach .card-info {
        display: grid;
        /* both tracks fixed, for the same reason the flex row's are: identical
           track widths in both grids means both centre to the same x, so all
           four labels still start on one line */
        grid-template-columns: var(--card-lbl-w) var(--card-val-w);
        justify-content: center;
        column-gap: 0.75rem;
        row-gap: 0.3rem;
        font-size: 0.8125rem;
    }

    /* row-gap only reaches inside a grid, and the four lines come from two
       sibling grids — without this the spacing runs 0.3, 0, 0.3 and the card
       reads as two pairs instead of four entries */
    .hf-breach .card-info + .card-info {
        margin-top: 0.3rem;
    }

    /* ── the colour key ── */
    .hf-breach .heads {
        gap: 1.1rem;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid var(--hairline);
    }

    .hf-breach .heads .heading {
        flex: 0 0 auto;
        width: auto;
        font-size: 0.75rem;
        letter-spacing: 0.06em;
        text-align: left;
    }

    .hf-breach .heads .e-h {
        color: var(--accent);
        padding-left: 1.1rem;
        border-left: 1px solid var(--hairline);
    }

    /* ── the paired steps, stacked ──
       Two columns, two rows: the numeral column stays so the pair reads as
       "1." answered by "1.", and the four children land in DOM order —
       [c-n | chain] over [e-n | enforcement] — with no markup change. */
    .hf-breach .steps {
        gap: 0;
    }

    .hf-breach .step {
        display: grid;
        grid-template-columns: var(--step-n-w) minmax(0, 1fr);
        column-gap: var(--step-gap);
        row-gap: 0.5rem;
        align-items: baseline;
        padding: 0.85rem 0;
        border-bottom: 1px solid var(--hairline);
    }

    .hf-breach .step:last-child {
        border-bottom: 0;
        padding-bottom: 0;
    }

    .hf-breach .step-t {
        /* 0.75rem is a caption size, not a reading size, and these are
           paragraphs. 1.15 leading is a label's leading for the same reason. */
        font-size: 0.875rem;
        line-height: 1.5;
    }

    /* the answer, marked as the answer — an accent rule down its measure so it
       cannot be misread as a second, unrelated list */
    .hf-breach .step .step-t:last-child {
        padding-left: 0.7rem;
        border-left: 1px solid rgba(var(--rgb-accent), 0.4);
    }

    /* ── the animation and its button ── stacked, both full measure */
    .hf-breach .row-last {
        flex-direction: column;
        gap: 1.25rem;
    }

    .hf-breach .breach,
    .hf-breach .scale-wrap {
        width: 100%;
        max-width: none;
    }

    .hf-breach .enforce {
        width: 100%;
        max-width: none;
    }

    .hf-breach .enforce .btn1 {
        /* 20vw of a phone is 78px — below the 44px target rule in one axis and
           a two-line label in the other */
        width: 100%;
        max-width: 18rem;
        min-height: 2.75rem;
    }

    .hf-breach .enforce p {
        max-width: 22rem;
        font-size: 0.8125rem;
        line-height: 1.5;
    }
}