/* ATF S3 — AnnBannerS5 + HeaderS4 + MainstageS2 */

/* ── Announcement Banner S5 ─────────────────────────────────── */

  .skp-btn {
    position: fixed !important;
    top: 0;
    left: 0;
    z-index: 5;
    transition: transform var(--g-trn-sp) var(--g-trn-tf) 0s;
    padding: 1rem;
  }
  .skp-btn:not(:focus) {
    transform: translateY(-103%);
  }

.ann-bnr.s5 {

    /* ── Arrow sizing ───────────────────────────────── */

    --sl-sa-s: 0.875rem;
    --sl-sa-pd-mtp: 1.5;

    /* ── Side arrows — override 1280px gate, always on ─ */

    .sl_sa-edg {
        position: relative;
        padding-left: calc(var(--sl-sa-s) * var(--sl-sa-pd-mtp));
        padding-right: calc(var(--sl-sa-s) * var(--sl-sa-pd-mtp));

        [data-role="container"] { z-index: 2; }

        [data-role="arrows"] {
            position: absolute;
            width: 100%;
            top: 50%;
            left: 0;
            z-index: 1;
            justify-content: space-between;
            transform: translateY(-50%);
        }
    }

    /* ── Scroller margin reset on mobile ────────────── */

    @media screen and (max-width: 699px) {
        .ann-scrlr {
            margin-top: 0;
        }
    }

}


/* ── Header S4 ──────────────────────────────────────────────── */

.hdr.s4 {
    --hdr-lg-sp: 80;
    --hdr-lg-sp-lpt: 30;
    --hdr-nv-sp: 40;
	--hdr-nv-sp-lpt: 10;
    
    /* Allow logo to overflow below the header bottom edge */
    overflow: visible;

    .lg-bx {
        overflow: visible;
        /* Remove bottom padding so logo controls its own bottom spacing */
        padding-bottom: 0;
    }

    .tp-lg {
        padding-bottom: 0;
        position: relative;
        z-index: 2;
    }

    @media screen and (width >= 1280px) {
        .tp-lg {
            /* Pull the logo down past the header's bottom edge */
            margin-block: -2.5rem;
        }

        /* Align last flyout to the right to prevent overflow */
        .nv > ul > li:last-child .fly-nv {
            left: auto;
            right: 0;
        }
    }
}


/* ── Mainstage S2 ───────────────────────────────────────────── */

.mstg.s2 {
    --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;

    /* ── Scroll Arrows ─────── */
    --sl-sa-s: 1.22rem;
    --sl-sa-pd-mtp: 2;

    /* ── Content column min-height ──────────────────── */

    .inf {
        min-height: 70svh;
        @media screen and (min-width: 1280px) {

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

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

    .third {
        min-width: 0;
    }

    /* ── Review card ──────────────────────────────────────── */

    --rvw-str-clr: #FFC107;

    .rvw-card {
        border-radius: 1.5rem;
        padding: 2rem 1.75rem;
    }

    .rvw-src-icn {
        font-size: 2rem;
        flex-shrink: 0;
        color: var(--text-color);
    }

    .rtng-str {
        font-size: 1.4rem;
        flex-shrink: 0;
        color: var(--rvw-str-clr, #FFD80A);
    }

    .rvw-card-rtng {
        font-size: 2.2rem;
        font-weight: 700;
        line-height: 1;
        font-family: var(--fnt-t);
        color: var(--text-color);
    }

    .rvw-card-hdr {
        align-items: flex-start;
    }

    .rvw-crd-src {
        width: 1.375rem;
        height: 1.375rem;
        flex-shrink: 0;
    }

    .rvw-card-qt {
        p {
            line-height: 1.65;
            opacity: 0.85;
        }
    }

    .rvw-card-more {
        opacity: 0.6;
        text-decoration: underline;
        text-underline-offset: 2px;

        @media (hover: hover) and (pointer: fine) {
            &:hover { opacity: 1; }
        }
    }

    .rvw-card-avy {
        width: 2.75rem;
        height: 2.75rem;
        flex-shrink: 0;
        border-radius: 50%;
        background-color: var(--buttons);
        color: var(--text-alt);
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 1.1rem;
        font-family: var(--fnt-t);
        text-transform: uppercase;
        line-height: 1;
        overflow: hidden;
    }


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

    &.mstg-anm {
        @media (prefers-reduced-motion: no-preference) {
            .two-thirds > div > strong  { animation: mstg-s2-fade-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.1s  both; }
            .two-thirds > div > p       { animation: mstg-s2-fade-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.25s both; }
            .two-thirds > div > .mrg_tp { animation: mstg-s2-fade-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.4s  both; }
        }
    }

}

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