/* Mainstage V3 — Centered with Open-Now Badge & Red CTA */

.mstg.v3 {

    /* ── Custom red palette (outside the theme color system) ──────────── */

    --mstg-v3-red:     #d72d1f;
    --mstg-v3-red-hov: #b8231a;
    --mstg-v3-red-txt: #ffffff;

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

    --mstg-tls-pd-v-tp:      175;
    --mstg-tls-pd-v-tp-mbl:  75;
    --mstg-tls-pd-v-bt:      600;
    --mstg-tls-pd-v-bt-mbl:  200;

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

    --mstg-img-bg-o: 1;

    /* ── Body text ──────────────────────────────────── */

    --fnt-pl-s: 1.6875rem; /* 27px from Figma */

    p {
        font-weight: 600;
        margin-inline: auto;
    }

    .bg::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient( to bottom, hsl(from black h s l / 0.75), hsl(from black h s l / 0));
        z-index: 1;
    }

    .inf {
        z-index: 1;
    }

    /* ── "Open Now" kicker badge ─────────────────────── */

    .mstg-v3-badge {
        display: inline-block;
        background-color: var(--mstg-v3-red);
        color: var(--mstg-v3-red-txt);
        font-style: normal;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        padding: 0.32em 0.7em;
        border-radius: 0.3rem;
        margin-right: 0.6em;
        vertical-align: middle;
        line-height: 1.2;
    }

    /* ── Red CTA button (overrides theme button colors) ────────────── */

    .btn.v1.mstg-v3-cta {
        --btn-bg: var(--mstg-v3-red);
        --btn-clr: var(--mstg-v3-red-txt);
        background-color: var(--btn-bg);
        color: var(--btn-clr);
    }

    @media (hover: hover) and (pointer: fine) {
        .btn.v1.mstg-v3-cta:is(:hover, :focus-visible),
        a:is(:hover, :focus-visible) .btn.v1.mstg-v3-cta {
            --btn-bg: var(--mstg-v3-red-hov);
            --btn-clr: var(--mstg-v3-red-txt);
            background-color: var(--btn-bg);
            color: var(--btn-clr);
        }
    }

    /* ── Entrance animations ────────────────────────── */

    &.mstg-anm {
        @media (prefers-reduced-motion: no-preference) {
            .fnt_t-k                      { animation: mstg-v3-fade-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0s    both; }
            .fnt_t-big                    { animation: mstg-v3-fade-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.1s  both; }
            p                             { animation: mstg-v3-fade-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.25s both; }
            .mrg_tp-40                    { animation: mstg-v3-fade-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.4s  both; }
        }
    }

}

@media (prefers-reduced-motion: no-preference) {
    @keyframes mstg-v3-fade-up {
        from { opacity: 0; transform: translateY(20px); }
        to   { opacity: 1; transform: translateY(0); }
    }
}

header:has(.overlap .hdr.v1) .mstg.v3 {
    --mstg-tls-pd-v-tp:      49;
    --mstg-tls-pd-v-tp-mbl:  30;
}