/* =========================================================
   RESPONSIVE — GEOMETRY LOCKED
   --------------------------------====================== */

/* =========================================================
   BASE HERO — ALL DEVICES
========================================================= */

.video-section {
    position: relative;
    overflow: hidden;
}

.video-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

    /* GLOBAL VIDEO GEOMETRY (DO NOT OVERRIDE) */
    .video-wrapper iframe,
    .video-wrapper img.video-poster {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        height: 100%;
        transform: translate(-50%, -50%);
        object-fit: cover;
        transition: opacity 0.4s ease;
    }

        .video-wrapper iframe.is-ready {
            opacity: 1;
        }

/* Overlay container position stays identical everywhere */
.video-section > .container {
    position: absolute;
    inset: auto 0 0 0;
    padding: 2rem;
    text-align: center;
    z-index: 2;
}

/* =========================================================
   PHONE — PORTRAIT (≤ 325px)
   ---------------------------------------------------------
========================================================= */
@media (max-width: 325px) and (orientation: portrait) {

    .btn {
        font-size: 0.85rem;
        line-height: 1.25;
        padding-block: 0.6rem; /* equal top/bottom */
        padding-inline: 1rem;
        min-height: 44px; /* WCAG touch target */
        display: inline-flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
    }
   
}
/* =========================================================
   PHONE — PORTRAIT (≤ 450px)
   ---------------------------------------------------------
========================================================= */
@media (max-width: 450px) and (orientation: portrait) {

    .video-section {
        min-height: 90svh;
    }

    .video-wrapper {
        height: 100%;
    }

        /* Scale video — NOT position */
        .video-wrapper iframe {
            width: max(1570px, 340vw);
        }

    .video-section h1 {
        font-size: 2rem;
        line-height: 1.15;
    }

    nav.navbar.bootsnav .attr-nav {
        right: 0 !important;
        margin-right: 0.25rem!important;
    }

    .navbar-toggler {
        margin-right:1.5rem!important;
    }

}

@supports (-webkit-touch-callout: none) {
    /* iPhone widths only (excludes iPad) */
    /* Force GPU repaint */
    .toggler-icon {
        transform: translate3d(0,0,0);
        -webkit-transform: translate3d(0,0,0);
    }

        .toggler-icon span {
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            will-change: transform, opacity;
        }
    /* ---------- OPEN STATE (X) — iPHONE ---------- */
    .navbar-toggler[aria-expanded="true"] .toggler-icon span:nth-child(1) {
        transform: translate3d(0,9px,0) rotate(45deg) !important;
        -webkit-transform: translate3d(0,9px,0) rotate(45deg) !important;
    }

    .navbar-toggler[aria-expanded="true"] .toggler-icon span:nth-child(2) {
        opacity: 0 !important;
    }

    .navbar-toggler[aria-expanded="true"] .toggler-icon span:nth-child(3) {
        transform: translate3d(0,-9px,0) rotate(-45deg) !important;
        -webkit-transform: translate3d(0,-9px,0) rotate(-45deg) !important;
    }
    /* ---------- CLOSED STATE RESET ---------- */
    .navbar-toggler[aria-expanded="false"] .toggler-icon span:nth-child(1),
    .navbar-toggler[aria-expanded="false"] .toggler-icon span:nth-child(3) {
        transform: translate3d(0,0,0) rotate(0deg) !important;
        -webkit-transform: translate3d(0,0,0) rotate(0deg) !important;
    }

    .navbar-toggler[aria-expanded="false"] .toggler-icon span:nth-child(2) {
        opacity: 1 !important;
    }
}


/* =========================================================
   PHONE — PORTRAIT (451–767px)
========================================================= */
@media (min-width: 451px) and (max-width: 767.98px) and (orientation: portrait) {

    .video-section {
        min-height: min(75svh, 520px);
    }

        .video-section h1 {
            font-size: 2.2rem;
        }
}




/* =========================================================
   OLDER iPads — PORTRAIT (pre-10.9", Safari framing fix)
========================================================= */
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {

    .video-wrapper {
        position: relative;
        overflow: hidden;
        background: #000;
    }

        .video-wrapper iframe {
            position: absolute;
            top: 100%; /* 🔑 push framing DOWN */
            left: 50%;
            width: 100%;
            height: 200%;
            border: 0;
            /* center horizontally, offset vertically */
            transform: translate(-50%, -50%);
        }
}


/* =========================================================
   OLDER iPads — LANDSCAPE (Safari framing fix)
========================================================= */
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {

    .video-wrapper {
        position: relative;
        overflow: hidden;
        background: #000;
    }

        .video-wrapper iframe {
            position: absolute;
            top: 55%;
            left: 50%;
            width: 100%;
            height: 100%;
            border: 0;
            /* Less aggressive scale */
            transform: translate(-50%, -50%) scale(1.15);
            transform-origin: center center;
        }
}






/* =========================================================
   iPAD — ALL MODELS (PORTRAIT & LANDSCAPE)
========================================================= */
    @media (min-width: 768px) and (max-width: 1366px) {

        /* Scale video — NOT position */
        .video-wrapper iframe {
            width: max(4450px, 340vw);
        }

        .video-section h1 {
            font-size: clamp(2.8rem, 4vw, 3.4rem);
            line-height: 1.1;
            max-width: 820px;
            margin-inline: auto;
        }

        nav.navbar.bootsnav .attr-nav {
            right: 0 !important;
            margin-right: 0.5rem !important;
        }

        nav.navbar.bootsnav .navbar-toggler {
            margin-right: .5rem !important;
            --bs-border-width: 0;
            background: transparent;
            outline: none !important;
            box-shadow: none !important;
            -webkit-tap-highlight-color: transparent;
            touch-action: manipulation;
        }

        .btn-default.btn-highlighted {
            font-size: .70rem;
        }
        /* Force GPU context */
        .toggler-icon {
            transform: translate3d(0,0,0);
            -webkit-transform: translate3d(0,0,0);
        }

            .toggler-icon span {
                -webkit-backface-visibility: hidden;
                backface-visibility: hidden;
                will-change: transform;
            }

        /* ---------- OPEN STATE (X) — iPAD ---------- */
        .navbar-toggler[aria-expanded="true"] .toggler-icon span:nth-child(1) {
            transform: translate3d(0,9px,0) rotate(45deg) !important;
            -webkit-transform: translate3d(0,9px,0) rotate(45deg) !important;
        }

        .navbar-toggler[aria-expanded="true"] .toggler-icon span:nth-child(2) {
            opacity: 0 !important;
        }

        .navbar-toggler[aria-expanded="true"] .toggler-icon span:nth-child(3) {
            transform: translate3d(0,-9px,0) rotate(-45deg) !important;
            -webkit-transform: translate3d(0,-9px,0) rotate(-45deg) !important;
        }

        /* ---------- CLOSED STATE RESET ---------- */
        .navbar-toggler[aria-expanded="false"] .toggler-icon span:nth-child(1),
        .navbar-toggler[aria-expanded="false"] .toggler-icon span:nth-child(3) {
            transform: translate3d(0,0,0) rotate(0deg) !important;
            -webkit-transform: translate3d(0,0,0) rotate(0deg) !important;
        }

        .navbar-toggler[aria-expanded="false"] .toggler-icon span:nth-child(2) {
            opacity: 1 !important;
        }
    }


/* =========================================================
   iPAD — PORTRAIT REFINEMENT (HEIGHT ONLY)
========================================================= */
    @supports (-webkit-touch-callout: none) {

        @media (hover: none) and (pointer: coarse) and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {

            .video-section {
                min-height: min(70svh, 600px);
            }

                .video-section h1 {
                    font-size: clamp(2.4rem, 3.8vw, 2.9rem);
                    max-width: 90%;
                }
        }
    }