/* Generic two-column content shell. Inner content supplies its own atoms and surfaces. */

/* Optional palette-slot colour roles supplied by Fragment::colourStyle(). */
.pp-content-split {
    background: var(--pp-content-split-background, var(--pp-colour-page));
    color: var(--pp-content-split-text, var(--pp-colour-text));
}

.pp-content-split h2,
.pp-content-split h3 {
    color: var(--pp-content-split-title, var(--pp-colour-primary));
}

.pp-content-split {
    padding: clamp(4rem, 7vw, 6rem) 0;
    box-shadow: inset 0 0 0 var(--pp-inner-border-width) var(--pp-inner-border-color);
}

.pp-content-split__inner {
    max-width: 72rem;
    margin-inline: auto;
}

.pp-content-split--wide .pp-content-split__inner {
    max-width: 84rem;
}

.pp-content-split--narrow .pp-content-split__inner {
    max-width: 56rem;
}

.pp-content-split--full-bleed .pp-content-split__inner {
    max-width: none;
}

.pp-content-split__column > :first-child {
    margin-top: 0;
}

.pp-content-split__column > :last-child {
    margin-bottom: 0;
}

.pp-content-split--flush {
    padding-top: 0;
    padding-bottom: 0;
}

.pp-content-split--flush .pp-content-split__inner {
    padding-block: clamp(2.5rem, 4vw, 4rem);
}

.pp-content-split--flush.pp-content-split--full-bleed .pp-content-split__inner {
    padding-block: 0;
}

.pp-content-split--flush .row {
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
}

@media (min-width: 992px) {
    .pp-content-split--text-driven .pp-content-split__column--left {
        position: relative;
        min-height: 0;
    }

    .pp-content-split--text-driven .pp-content-split__column--left > figure {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        min-height: 0;
        margin: 0;
    }

    .pp-content-split--text-driven .pp-content-split__column--left > figure > img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .pp-content-split--reverse .pp-content-split__column--left {
        order: 2;
    }

    .pp-content-split--reverse .pp-content-split__column--right {
        order: 1;
    }
}

@media (max-width: 991.98px) {
    .pp-content-split--mobile-overlay .pp-content-split__inner > .row {
        display: grid;
    }

    .pp-content-split--mobile-overlay .pp-content-split__inner > .row > .pp-content-split__column {
        grid-area: 1 / 1;
        width: 100%;
    }

    .pp-content-split--mobile-overlay .pp-content-split__column--left {
        position: relative;
        z-index: 0;
        min-height: clamp(18rem, 70vw, 28rem);
    }

    .pp-content-split--mobile-overlay .pp-content-split__column--left::after {
        position: absolute;
        inset: 0;
        background: color-mix(in srgb, var(--pp-colour-page) 28%, transparent);
        content: '';
        pointer-events: none;
    }

    .pp-content-split--mobile-overlay .pp-content-split__column--right {
        z-index: 1;
        display: flex;
        align-items: stretch;
    }

    .pp-content-split--mobile-overlay .pp-content-split__column--right > :first-child {
        width: 100%;
    }
}
