/*
 * Split: text and media side by side; stacked (max 600px wide) under 1024px.
 */

.blk--split {
    --subheading: var(--tertiary-600);
    --split-radius: 0px;
}

.blk--split.is-dark,
.is-dark .blk--split:not(.is-light) {
    --subheading: var(--tertiary-200);
}

.split__grid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
}

.split__text,
.split__media {
    width: 50%;
    max-width: 600px;
}

.split__text {
    max-width: 550px;
}

.split--media-left .split__media { order: 0; }
.split--media-left .split__text { order: 1; }

.split__text .text-group__subheading {
    margin-bottom: var(--subheading-gap);
}

.split__text .text-group__body {
    margin-top: var(--step-7);
}

.split__text .text-group__body ul {
    padding-inline-start: var(--step-6);
    font-size: 17px;
    letter-spacing: -.51px;
}

.split__text .text-group__body li + li {
    margin-top: 0;
}

.split__text .text-group__buttons {
    margin-top: var(--step-7);
}

.split__media :is(img, video) {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.split__empty {
    aspect-ratio: 4 / 3;
}

.split--rounded {
    --split-radius: var(--radius);
}

.split--rounded .split__media :is(img, video) {
    border-radius: var(--radius);
}

@media (max-width: 1024px) {
    /* Stacked: one centred column */
    .split__grid {
        flex-direction: column;
        max-width: 520px;
        margin-inline: auto;
        gap: var(--step-8);
    }

    .split__text,
    .split__media {
        width: 100%;
        max-width: none;
    }

    .split__text .text-group__body {
        margin-top: var(--step-6);
    }

    .split__text { order: 2; }
    .split__media { order: 1; }
    .split--media-below .split__text { order: 0; }
    .split--media-below .split__media { order: 1; }
}

@media (max-width: 860px) {
    .split__grid {
        gap: var(--step-7);
    }
}

@media (max-width: 600px) {
    .split__text .text-group__buttons {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .split__text .text-group__buttons .btn {
        width: 100%;
    }
}

/* ---------- Accent: a colour panel offset behind the media ----------
   The media shrinks by the offset, so the panel stays inside the column. */

.split__accent {
    --accent-offset: 44px;
    --split-radius: 8px;
    position: relative;
    isolation: isolate;
}

.split--rounded .split__accent {
    --split-radius: var(--radius);
}

.split__accent::before {
    content: '';
    position: absolute;
    z-index: -1;
    border-radius: var(--split-radius);
    background: var(--accent-colour, var(--tertiary-100));
}

.split__accent :is(img, video) {
    border-radius: var(--split-radius);
}

.split__accent--bottom-right { --accent-x: 1; --accent-y: 1; padding: 0 var(--accent-offset) var(--accent-offset) 0; }
.split__accent--bottom-right::before { inset: var(--accent-offset) 0 0 var(--accent-offset); }
.split__accent--bottom-left { --accent-x: -1; --accent-y: 1; padding: 0 0 var(--accent-offset) var(--accent-offset); }
.split__accent--bottom-left::before { inset: var(--accent-offset) var(--accent-offset) 0 0; }
.split__accent--top-right { --accent-x: 1; --accent-y: -1; padding: var(--accent-offset) var(--accent-offset) 0 0; }
.split__accent--top-right::before { inset: 0 0 var(--accent-offset) var(--accent-offset); }
.split__accent--top-left { --accent-x: -1; --accent-y: -1; padding: var(--accent-offset) 0 0 var(--accent-offset); }
.split__accent--top-left::before { inset: 0 var(--accent-offset) var(--accent-offset) 0; }

@media (max-width: 860px) {
    .split__accent {
        --accent-offset: 22px;
    }
}

/* Hover (script.js): the image drifts toward the pointer and the panel the other way.
   (The translate property, separate from the entrance's transform and zoom.) */
.split__accent > :is(img, video) {
    translate: calc(var(--accent-px, 0) * 10px) calc(var(--accent-py, 0) * 10px);
}

.split__accent::before {
    translate: calc(var(--accent-px, 0) * -8px) calc(var(--accent-py, 0) * -8px);
}

/* ---------- Full bleed: the media fills its half of the (inset) card ---------- */

.split--bleed {
    --bleed-text-padding: var(--step-10) var(--step-9);
}

.split--bleed .split__grid {
    gap: 0;
    align-items: stretch;
}

.split--bleed .split__text {
    width: 50%;
    max-width: none;
    padding: var(--bleed-text-padding);
    align-self: center;
}

.split--bleed .split__media {
    position: relative;
    width: 50%;
    max-width: none;
    min-height: 100%;
}

.split--bleed .split__media :is(img, video) {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

@media (max-width: 1024px) {
    .split--bleed {
        --bleed-text-padding: var(--step-7) var(--step-6);
    }

    .split--bleed .split__grid {
        max-width: none;
    }

    .split--bleed :is(.split__text, .split__media) {
        width: 100%;
    }

    .split--bleed .split__text {
        align-self: stretch;
    }

    .split--bleed .split__media :is(img, video) {
        position: static;
        aspect-ratio: 4 / 3;
        height: auto;
    }
}

@media (max-width: 600px) {
    .split--bleed {
        --bleed-text-padding: var(--step-6) var(--step-5);
    }
}

/* ---------- Entrance (script.js) ----------
   The text comes in from its own side (up when stacked); the media fades in a beat
   later while the picture settles in its frame (masked zoom). An accented image and its
   panel start overlapped in the middle, then slide apart into place. */

.blk--split {
    --split-accent-delay: 1.1s;
}

.blk--split.rv :is(.split__text, .split__media) {
    opacity: 0;
}

.blk--split.rv-armed .split__text {
    transition: opacity var(--reveal-text) ease, transform var(--reveal-text) var(--reveal-ease);
}

.blk--split.rv-armed .split__media {
    transition: opacity calc(var(--reveal-media) * .75) ease .15s;
}

.blk--split.rv.split--text-left .split__text { transform: translateX(calc(var(--reveal-shift) * -1)); }
.blk--split.rv.split--text-right .split__text { transform: translateX(var(--reveal-shift)); }
.blk--split.rv.split--text-stacked .split__text { transform: translateY(var(--reveal-rise)); }

.blk--split.rv :is(.split__media > :is(img, video), .split__accent > :is(img, video)) {
    --mz: var(--reveal-zoom);
    scale: var(--mz);
    clip-path: inset(calc((1 - 1 / var(--mz)) * 50%) round calc(var(--split-radius) / var(--mz)));
}

.blk--split.rv-armed :is(.split__media > :is(img, video)) {
    transition: --mz var(--reveal-media) var(--reveal-ease) .15s;
}

.blk--split.rv .split__accent :is(img, video) {
    transform: translate(calc(var(--accent-x) * var(--accent-offset) / 2), calc(var(--accent-y) * var(--accent-offset) / 2));
}

.blk--split.rv .split__accent::before {
    transform: translate(calc(var(--accent-x) * var(--accent-offset) / -2), calc(var(--accent-y) * var(--accent-offset) / -2));
}

.blk--split.rv-armed .split__accent::before {
    transition: transform calc(var(--reveal-text) + .2s) var(--reveal-ease) var(--split-accent-delay);
}

.blk--split.rv-armed .split__accent > :is(img, video) {
    transition:
        transform calc(var(--reveal-text) + .2s) var(--reveal-ease) var(--split-accent-delay),
        --mz var(--reveal-media) var(--reveal-ease) .15s;
}

.blk--split.rv.rv-in :is(.split__text, .split__media) {
    opacity: 1;
    transform: none;
}

.blk--split.rv.rv-in :is(.split__media > :is(img, video), .split__accent > :is(img, video)) {
    --mz: 1;
}

/* (pseudo-elements can't go inside :is(), so the panel has its own rule) */
.blk--split.rv.rv-in .split__accent :is(img, video),
.blk--split.rv.rv-in .split__accent::before {
    transform: none;
}

/* An inset card (script.js: .split--whole) comes in as one piece: the card, its image and
   its text fade up together, with no separate image zoom, text slide or accent move. */
.blk--split.split--whole.rv {
    opacity: 0;
    transform: translateY(var(--reveal-rise));
}

.blk--split.split--whole.rv-armed {
    transition: opacity var(--reveal-text) ease, transform var(--reveal-text) var(--reveal-ease);
}

.blk--split.split--whole.rv.rv-in {
    opacity: 1;
    transform: none;
}

.blk--split.blk--inset.split--whole.rv :is(.split__text, .split__media) {
    opacity: 1;
    transform: none;
    transition: none;
}

.blk--split.blk--inset.split--whole.rv :is(.split__media > :is(img, video), .split__accent > :is(img, video)) {
    --mz: 1;
    transform: none;
    transition: none;
}

.blk--split.blk--inset.split--whole.rv .split__accent::before {
    transform: none;
    transition: none;
}