/* ==========================================================================
   SPLIT BAND — full-width two-colour split   (visual only)
   ==========================================================================
   A viewport-wide band divided into two halves, each a solid colour, with the
   inner content aligned to the page column. Dark left
   (icon + heading + body + CTA), light right (big numeral + eyebrow + heading +
   body + CTA + links).

   Build: element_group `split-band` with exactly TWO `text` children
   (left, then right). No col-* — the grid handles the halves.
     left  : <i class="fa-light fa-user-plus"></i><h2>…</h2><p>…</p><p><a class="btn">…</a></p>
     right : <h2 class="numeral">2.0</h2><p class="eyebrow">SECURE 2.0</p><h3>…</h3><p>…</p>…
   ========================================================================== */
/* The article carries framework `.bleed-full`; this grid splits it edge-to-edge
   and aligns each half's content to the page column. */
.split-band {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    /* Outer padding aligns inner content to the page container; inner padding is
       the gap between the two halves. */
    > * {
        padding-block: clamp(40px, 5vw, 72px);
        box-sizing: border-box;
    }
    > *:first-child {
        background: var(--prime-deep);
        color: var(--text-on-dark-dim);
        padding-left: max(var(--page-gutter), calc(50vw - var(--container-max) / 2 + var(--page-gutter)));
        padding-right: clamp(24px, 4vw, 60px);
    }
    > *:last-child {
        background: var(--surface-soft);
        padding-right: max(var(--page-gutter), calc(50vw - var(--container-max) / 2 + var(--page-gutter)));
        padding-left: clamp(24px, 4vw, 60px);
        /* A soft --blob-b wash hangs off this half.s right edge (as .decor-wash).
           Clipped and isolated here rather than with `.decor`, because this half
           is a grid item whose background is part of the component. */
        position: relative;
        overflow: clip;
        isolation: isolate;
    }
    > *:last-child > * { position: relative; z-index: 1; }
    > *:last-child::before {
        content: "";
        position: absolute;
        z-index: 0;
        pointer-events: none;
        right: -52%;
        top: 50%;
        translate: 0 -50%;
        width: 110%;
        aspect-ratio: 1326 / 768;
        border-radius: 50%;
        background: radial-gradient(closest-side, var(--blob-b) 7%, transparent 100%);
    }

    /* Icon / numeral sit inline to the LEFT of the copy (like the feature columns). */
    > * .rte { display: flex; gap: clamp(16px, 1.8vw, 28px); align-items: flex-start; }
    > * .ft { flex: 1 1 auto; min-width: 0; }

    /* ---- Left (dark) -------------------------------------------------------- */
    > *:first-child i, > *:first-child .svg-inline--fa {
        flex: 0 0 auto;
        font-size: 2.3rem; line-height: 1;
        color: var(--white); opacity: 0.92;
        margin-top: 0.15rem;
    }
    > *:first-child h2 {
        color: var(--white);
        font-size: clamp(1.4rem, 2.4vw, 1.9rem);
        line-height: 1.2; margin: 0 0 0.7em;
    }
    > *:first-child p { color: var(--text-on-dark-dim); }
    > *:first-child a.btn { margin-bottom: 0; }

    /* ---- Right (light) ------------------------------------------------------ */
    /* Big accent numeral sits inline to the left of the copy. */
    > *:last-child .numeral {
        flex: 0 0 auto;
        font-family: var(--type-display);
        font-weight: 700;
        font-size: clamp(2.75rem, 5.5vw, 3.75rem);
        line-height: 0.85;
        color: var(--accent-deep);
    }
    > *:last-child .eyebrow {
        margin: 0 0 0.4em;
        color: var(--grey-dark);
    }
    > *:last-child .eyebrow::before { content: ""; }
    > *:last-child h3 {
        color: var(--prime);
        font-size: clamp(1.3rem, 2.4vw, 1.85rem);
        line-height: 1.2; margin: 0 0 0.6em;
    }
    > *:last-child a.btn { margin-bottom: 0.5rem; }
}
.split-band__links a,
.split-band > *:last-child p:last-child a {
    color: var(--prime);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    margin-right: 1.25rem;
}

@media only screen and (max-width: 760px) {
    .split-band { grid-template-columns: 1fr; }
    .split-band > * { padding-inline: var(--page-gutter); }
}