/**
 * Design B — Immersive Bands.
 * Each speaker is a full-bleed band with their portrait behind the copy,
 * dimmed and scrimmed from the side the text sits on. More cinematic than A.
 */

.kcs--immersive .kcs-speaker {
    position: relative;
    overflow: hidden;
    padding-block: var(--kcs-section-gap);
    border-top: 1px solid var(--kcs-border);
}

/*
 * No rule under the intro. The border above still separates one portrait band
 * from the next, but the first one drew a line straight across the bottom of
 * the title/narrative block, which the client didn't want — so it's dropped
 * only where a speaker follows the intro.
 */
.kcs--immersive .kcs-intro + .kcs-speaker {
    border-top: 0;
}

.kcs--immersive .kcs-speaker__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: center 22%;
    opacity: 0.4;
    /* Push the subject away from the copy. See the --flip note below for why
       this is a transform rather than background-position. */
    transform: translateX(15%);
    transition: transform 1s ease;
}

.kcs--immersive .kcs-speaker:hover .kcs-speaker__bg {
    transform: scale(1.05) translateX(15%);
}

/* Flipped bands put the copy on the right, so mirror the portrait and push it
   further left, clear of the text. The shift has to be a transform: at
   background-size:cover a square portrait scaled to the band's width overflows
   vertically only, so there is no horizontal slack for background-position to
   use. scaleX(-1) is applied after the translate, so a positive translateX
   moves the subject visually left. */
.kcs--immersive .kcs-speaker--flip .kcs-speaker__bg {
    transform: scaleX(-1) translateX(15%);
}

.kcs--immersive .kcs-speaker--flip:hover .kcs-speaker__bg {
    transform: scale(-1.05, 1.05) translateX(15%);
}

/* No portrait yet — keep the band alive with a tonal wash instead of a photo. */
.kcs--immersive .kcs-speaker__bg--empty {
    opacity: 1;
    background:
        radial-gradient(60% 100% at 78% 40%, rgba(232, 115, 90, 0.18), transparent 66%),
        var(--kcs-panel-alt);
}

.kcs--immersive .kcs-speaker--flip .kcs-speaker__bg--empty {
    background:
        radial-gradient(60% 100% at 22% 40%, rgba(232, 115, 90, 0.18), transparent 66%),
        var(--kcs-panel-alt);
}

/* Scrim pulls the black across whichever side the copy occupies. */
.kcs--immersive .kcs-speaker__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(to right, var(--kcs-bg) 20%, rgba(0, 0, 0, 0.65) 52%, rgba(0, 0, 0, 0.15) 100%),
        linear-gradient(to top, var(--kcs-bg), transparent 45%);
    pointer-events: none;
}

.kcs--immersive .kcs-speaker--flip .kcs-speaker__scrim {
    background:
        linear-gradient(to left, var(--kcs-bg) 20%, rgba(0, 0, 0, 0.65) 52%, rgba(0, 0, 0, 0.15) 100%),
        linear-gradient(to top, var(--kcs-bg), transparent 45%);
}

.kcs--immersive .kcs-speaker__inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--kcs-gutter);
}

.kcs--immersive .kcs-speaker__body {
    grid-column: 1 / span 6;
    display: grid;
    gap: 20px;
    align-content: center;
}

.kcs--immersive .kcs-speaker--flip .kcs-speaker__body {
    grid-column: 7 / span 6;
}

.kcs--immersive .kcs-speaker__heading {
    display: grid;
    gap: 10px;
}

/* Names carry the band, so they run larger than in A. */
.kcs--immersive .kcs-speaker__name {
    font-size: 42px;
    font-weight: 400;
}

.kcs--immersive .kcs-speaker .kcs-body {
    max-width: 34em;
}

.kcs--immersive .kcs-outro {
    background: var(--kcs-panel-alt);
    border-top: 1px solid var(--kcs-border);
    padding-block: var(--kcs-section-gap);
}

.kcs--immersive .kcs-outro__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: calc(var(--kcs-gutter) * 2);
    align-items: center;
}

.kcs--immersive .kcs-outro__copy {
    display: grid;
    gap: 24px;
}

.kcs--immersive .kcs-outro__action {
    justify-self: end;
}

.kcs--immersive .kcs-enquire {
    padding-block: var(--kcs-section-gap);
    border-top: 1px solid var(--kcs-border);
}

.kcs--immersive .kcs-enquire__inner {
    display: grid;
    gap: 40px;
    justify-items: center;
    text-align: center;
}

.kcs--immersive .kcs-enquire .kcs-form {
    text-align: left;
    width: 100%;
}

@media (max-width: 900px) {
    /*
     * Stacked, not overlaid — see the matching note in kc-perspectives.
     * Once the copy spans the full width the portrait is directly behind it,
     * and a bottom-up scrim only protects the lower part of the band: the top
     * was 0.45 black over the photo, so the image read through the copy. The
     * portrait becomes its own block above the text instead.
     */
    .kcs--immersive .kcs-speaker {
        display: block;
        padding-block: 0 56px;
    }

    .kcs--immersive .kcs-speaker__bg,
    .kcs--immersive .kcs-speaker--flip .kcs-speaker__bg {
        position: relative;
        inset: auto;
        width: 100%;
        aspect-ratio: 4 / 5;
        margin-bottom: 28px;
        opacity: 1;
        transform: none;
    }

    .kcs--immersive .kcs-speaker:hover .kcs-speaker__bg,
    .kcs--immersive .kcs-speaker--flip:hover .kcs-speaker__bg {
        transform: none;
    }

    .kcs--immersive .kcs-speaker__scrim {
        display: none;
    }

    .kcs--immersive .kcs-speaker__body,
    .kcs--immersive .kcs-speaker--flip .kcs-speaker__body {
        grid-column: 1 / -1;
    }

    .kcs--immersive .kcs-speaker__name {
        font-size: 32px;
    }

    .kcs--immersive .kcs-outro__inner {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .kcs--immersive .kcs-outro__action {
        justify-self: start;
    }
}