/* Mainstage V2 — Split with Rating Single Review Scroller */

.mstg.v2 {
    --flx-gap: 3.8rem;

    /* ── Spacing overrides ──────────────────────────── */

    --mstg-tls-pd-v-tp:      150;
    --mstg-tls-pd-v-tp-mbl:  60;
    --mstg-tls-pd-v-bt:      173;
    --mstg-tls-pd-v-bt-mbl:  60;

    /* ── Background image opacity ───────────────────── */

    --mstg-img-bg-o: 0.45;

    /* ── Prevent right column from overflowing flex ── */

    .third {
        min-width: 0;
    }

    /* ── Bottom wave transition (in flow, sits above the bg) ── */

    .mstg-btm-deco {
        position: relative;
        z-index: 1;
        display: block;
        width: 100%;
        height: auto;
    }

    /* Lift the video play/pause control clear of the wave transition.
       3.75vw ≈ the wave's rendered height (72 / 1920), preserving the
       original 2em gap above it. */
    .bg .ctrls {
        bottom: calc(2em + 3.75vw);
    }

    /* ── Decorative brand mark, bottom-right of the form card ── */

    .ctc-frm {
        overflow: hidden;

        &::after {
            content: "";
            position: absolute;
            right: 0;
            bottom: 0;
            z-index: -1;
            width: 85%;
            height: 90%;
            background: url("/media/foreground/mainstage-mark.png") right bottom / contain no-repeat;
            pointer-events: none;
        }
    }

    @media screen and (min-width: 1280px) {
        /* Drop the image dimming and use the gradient overlay instead */
        --mstg-img-bg-o: 1;

        .two-thirds p {
            width: 70%;
        }

        /* ── Gradient overlay (left-weighted brand-dark wash) ── */
        .bg::after {
            content: "";
            position: absolute;
            inset: 0;
            pointer-events: none;
            background: linear-gradient(113deg, rgba(30, 40, 79, 0.15) -13.1%, rgba(30, 40, 79, 0.00) 66.69%), linear-gradient(90deg, rgba(30, 40, 79, 0.15) 11.54%, rgba(30, 40, 79, 0.00) 100%), linear-gradient(90deg, rgba(0, 0, 0, 0.075) 11.54%, rgba(0, 0, 0, 0.00) 100%);
        }
    }
}