/* ==========================================================================
   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. Cornerstone home: dark navy left
   (icon + heading + body + accent 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(--ink);
        color: rgba(255, 255, 255, 0.85);
        padding-left: max(var(--page-gutter), calc(50vw - var(--container-max) / 2 + var(--page-gutter)));
        padding-right: clamp(24px, 4vw, 60px);
    }
    > *:last-child {
        background: #FBFAF9;
        padding-right: max(var(--page-gutter), calc(50vw - var(--container-max) / 2 + var(--page-gutter)));
        padding-left: clamp(24px, 4vw, 60px);
        /* The board hangs a soft red wash off this half's right edge (see
           `.decor-red` in decor.css for the measurement). Clipped and isolated
           here rather than by adding `.decor` in the spec, 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-pink) 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: var(--fs-h2);                     /* the boards: the 45px section heading */
        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 red 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);   /* Penpot 60px */
        line-height: 0.85;
        color: #93191D;                              /* Penpot red-700 */
    }
    > *:last-child .eyebrow { margin: 0 0 0.4em; }
    > *:last-child .eyebrow::before { content: ""; }
    > *:last-child h3 {
        color: var(--heading);
        font-weight: 700;                 /* the board's "small-plan market" heading */
        font-size: var(--fs-h2);          /* 45, set as an h3 */
        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;
    border-bottom: 0;          /* the site's link border drew a second underline (Bob, 10 Oct 2026) */
    margin-right: 1.25rem;
}

/* Home: the board's padding (Bob, 10 Oct 2026), in proportion below 2400 —
   ~110px above and below each half's copy, 95px between the light half's edge
   and its numeral. */
body.page-index .split-band > * { padding-block: clamp(48px, 4.583vw, 110px); }
@media only screen and (min-width: 761px) {
    body.page-index .split-band > *:last-child { padding-left: clamp(24px, 3.958vw, 95px); }
}

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