/* Mainstage S1 — Split with Coupon */

.mstg.v1 {
    --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 — via mainstage tools ------- */

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

    /* -- Video background — dual tint overlays -------- */

    &.vid-bg-tls .bg {
        /* Contain overlay stacking so it can't paint over the
           foreground content, which is a sibling of `.bg`. */
        isolation: isolate;

        &::before,
        &::after {
            content: '';
            position: absolute;
            inset: 0;
            z-index: 1;
            pointer-events: none;
        }

        /* #000000 @ 20% (bottom layer) */
        &::before {
            background-color: rgba(0, 0, 0, 0.2);
        }

        /* #337ED1 @ 60% (top layer) */
        &::after {
            background-color: rgba(51, 126, 209, 0.25);
        }

        /* Keep the play/pause control above the tint */
        .ctrls {
            z-index: 2;
        }
    }

    .inf {
        @media screen and (min-width: 1280px) {
            .two-thirds p {
                width: 70%;
            }
        }
    }

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

    .third {
        min-width: 0;
    }

    /* -- Coupon card — 24px radius + 10px gradient border -- */

    .cpn-cnt {

        /* Drive the existing `bdr-rds` class to 24px (multipliers are 1) */
        --bdr-rds: 24px;

        /* Drive the inner `.crd` card to 24px (1.5rem) */
        --bdr-rds-crd: 1.5rem;

        position: relative;

        /* 10px linear-gradient border ring — respects the border radius
           without disturbing layout or the coupon's inner dashed border */
        &::before {
            content: '';
            position: absolute;
            inset: 0;
            z-index: 2;
            padding: 10px;
            border-radius: inherit;
            background: linear-gradient(180deg, #e64c28, #f2e664);
            -webkit-mask:
                linear-gradient(#fff 0 0) content-box,
                linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
                    mask-composite: exclude;
            pointer-events: none;
        }

        /* Logo not needed on this coupon */
        .cpn-itm .lgo {
            display: none;
        }
    }

}