/* ==========================================================================
   MEDIA SPLIT — content one side, full-bleed image the other  (visual only)
   ==========================================================================
   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.

   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 has NO background of its own: `.bg-ink` on the group
       paints the band, and `.decor > *` lifts both halves above the decor
       pseudo-elements, so an opaque panel here would hide the swirls. A
       different colour behind the copy goes on the GROUP. */
    &.bg-ink p { color: var(--text-on-dark-dim); }
    &.bg-ink .eyebrow { color: var(--text-on-dark-dim); }
    &.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; }
}