/* ==========================================================================
   MEDIA SPLIT — content one side, full-bleed image the other  (visual only)
   ==========================================================================
   Generalises home.css's `.testimonial-band`: a viewport-wide split where the
   copy aligns to the page column on one side and a photo bleeds to the edge on
   the other. Works light or, with `bg-ink`, as a dark band (Cornerstone For
   Advisors → "Yes. We do the complex work.").

   Build: an ARTICLE carrying framework `.bleed-full`; inside, an element_group
   `media-split` (add `bg-ink` for the dark treatment) with exactly TWO children
   in visual order:
       text   — eyebrow + h2 + body + chips + a.btn        (the content half)
       image  — the photo                                   (bleeds to the edge)
   ========================================================================== */
.media-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    align-items: center;
    padding-inline: 0;   /* it sits in a .bleed-full article; drop the element_group gutter so both halves reach the viewport edge */
    /* Content half: padded out to the page column on the left, gap on the right. */
    > *:first-child {
        padding-block: clamp(48px, 6vw, 96px);
        padding-left: max(var(--page-gutter), calc(50vw - var(--container-max) / 2 + var(--page-gutter)));
        padding-right: clamp(24px, 4vw, 64px);
        box-sizing: border-box;
    }
    /* Image half: fills its cell edge-to-edge. */
    > *:last-child { align-self: stretch; }
    figure { margin: 0; height: 100%; }
    img {
        display: block;
        width: 100%; height: 100%;
        min-height: 460px;
        object-fit: cover;
    }

    /* ---- Dark treatment ----------------------------------------------------- */
    /* Drop the bg-* vertical padding so the photo fills the band top-to-bottom;
       the content half supplies its own padding-block. */
    &.bg-ink { padding-block: 0; }
    /* The content half deliberately has NO background of its own. `.bg-ink` on the
       group already paints the whole band, so an opaque `background: var(--ink)`
       here was redundant — and because `.decor > *` lifts both halves above the
       band's decorative pseudo-elements, that opaque panel sat on top of the
       swirls and hid them completely. Our Story's "Why Cornerstone exists." band
       asked for `decor decor-swirls` and appeared to ignore it for exactly this
       reason. Anything that needs a different colour behind the copy half should
       set it on the GROUP, not on this child. */
    &.bg-ink a.btn { margin-top: 0.5rem; margin-bottom: 0; }
}

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