/* Sales Team — Slide gallery viewer (frontend).
   Mounts above the regular proposal body. The shell is self-contained so
   any slide CSS scoped to .stp-slide-{id} can't leak; outer chrome is
   black-on-black with a 3D-card transition. */

.quantum-gallery-frame {
    position: relative;
    width: 100%;
    height: 650px;
    margin: 40px auto;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    overflow: hidden;
    border-radius: 40px;
    background: #000;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 50px 100px rgba(0, 0, 0, 0.8);
}

.gallery-hud {
    position: absolute;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
}

.nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    pointer-events: auto;
    transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    font-size: 32px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    appearance: none;
    font-family: inherit;
    line-height: 1;
}
.nav-arrow:hover { background: #fff; color: #000; transform: translateY(-50%) scale(1.1); }
.nav-arrow:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.arrow-l { left: 30px; }
.arrow-r { right: 30px; }

.gallery-menu-tabs {
    position: absolute;
    bottom: 30px;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 8px;
    pointer-events: auto;
    padding: 0 80px;
    flex-wrap: wrap;
    box-sizing: border-box;
}

.tab-link {
    font-size: 0.65rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    padding: 8px 14px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: 0.3s;
    appearance: none;
    font-family: inherit;
}
.tab-link.active { color: #fff; border-color: #fff; background: rgba(255, 255, 255, 0.1); }

.gallery-viewport {
    position: relative;
    width: 100%;
    height: 100%;
    perspective: 2000px;
}

.proposal-card {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: none;
    opacity: 0;
    transform-style: preserve-3d;
    z-index: 1;
    overflow: hidden;
}
.proposal-card.active {
    display: block !important;
    opacity: 1;
    z-index: 10;
}

@keyframes stpKIn {
    0% { transform: scale(0.9) translateZ(-500px); opacity: 0; }
    100% { transform: scale(1) translateZ(0); opacity: 1; }
}
@keyframes stpKOut {
    0% { transform: scale(1) translateZ(0); opacity: 1; }
    100% { transform: scale(1.1) translateZ(500px); opacity: 0; }
}
.anim-in  { animation: stpKIn  0.8s cubic-bezier(0.2, 1, 0.3, 1) forwards; }
.anim-out { animation: stpKOut 0.8s cubic-bezier(0.2, 1, 0.3, 1) forwards; }

/* Per-slide scope wrapper. Forces each slide body to occupy the card
   regardless of its own positioning. Absorbs desktop-only padding that
   would otherwise push content off-screen on mobile. */
.stp-slide-scope {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    color: #fff;
}

/* Make sure embedded videos/iframes don't blow out the slide. */
.stp-slide-scope iframe,
.stp-slide-scope video,
.stp-slide-scope img { max-width: 100%; height: auto; }

/* ============================================================
   Mobile pass — every slide author writes desktop-first markup,
   so the viewer aggressively overrides their CSS to ensure the
   gallery actually works at 375px.
   ============================================================ */

/* Tablet + phone */
@media (max-width: 900px) {
    .quantum-gallery-frame {
        /* Dynamic viewport units avoid the iOS Safari URL-bar cropping
           that makes 100vh under-report. 100dvh = current visible height. */
        height: clamp(480px, 85dvh, 760px);
        border-radius: 24px;
        margin: 16px auto;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
    }
    .nav-arrow {
        width: 44px; height: 44px; font-size: 22px;
        background: rgba(0, 0, 0, 0.55);
    }
    .arrow-l { left: 10px; }
    .arrow-r { right: 10px; }

    /* Tab strip: horizontal-scroll instead of wrap so 6+ slides don't
       stack into a tower at the bottom. */
    .gallery-menu-tabs {
        bottom: max(12px, env(safe-area-inset-bottom));
        padding: 0 56px;
        gap: 6px;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        justify-content: flex-start;
    }
    .gallery-menu-tabs::-webkit-scrollbar { display: none; }
    .tab-link {
        padding: 7px 11px;
        font-size: 0.6rem;
        flex-shrink: 0;
        scroll-snap-align: center;
        min-height: 32px; /* touch target floor */
    }

    /* Constrain per-slide content: collapse multi-column grids,
       cap absolute monsters, fluid typography, safe-area padding. */
    .stp-slide-scope {
        padding: max(16px, env(safe-area-inset-left))
                 max(16px, env(safe-area-inset-right))
                 0
                 max(16px, env(safe-area-inset-left));
        box-sizing: border-box;
    }
    .stp-slide-scope > * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    /* Most slide CSS uses padding:60-140px — clamp it. Apply to every
       descendant so deeply-nested wrappers don't punch through. */
    .stp-slide-scope * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    /* Force grids and 3-column layouts to single column. Setting these on
       non-grid/non-flex elements is harmless (declarations don't apply). */
    .stp-slide-scope * {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto !important;
    }
    /* Tame absolute-positioned things that assume a desktop viewport.
       Anything explicitly absolute keeps absolute — these rules only kick
       in for the slide-scope direct content. */
    .stp-slide-scope > div,
    .stp-slide-scope > section,
    .stp-slide-scope > article {
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        height: auto !important;
        padding: 24px 16px !important;
        min-height: 100% !important;
    }
    /* Typography: clamp big hero text so it doesn't break the layout. */
    .stp-slide-scope h1 { font-size: clamp(1.8rem, 7vw, 3rem) !important; line-height: 1.15 !important; }
    .stp-slide-scope h2 { font-size: clamp(1.5rem, 6vw, 2.4rem) !important; line-height: 1.2 !important; }
    .stp-slide-scope h3 { font-size: clamp(1.2rem, 5vw, 1.8rem) !important; line-height: 1.25 !important; }
    .stp-slide-scope p,
    .stp-slide-scope li,
    .stp-slide-scope span:not(.tab-link) {
        font-size: clamp(0.9rem, 3.4vw, 1.05rem) !important;
        line-height: 1.55 !important;
    }
    /* Touch targets: links/buttons in slides should be at least 44px tall. */
    .stp-slide-scope a,
    .stp-slide-scope button {
        min-height: 44px;
        padding-top: 10px;
        padding-bottom: 10px;
        display: inline-block;
    }
}

/* Phone */
@media (max-width: 480px) {
    .quantum-gallery-frame {
        height: clamp(440px, 88dvh, 720px);
        border-radius: 18px;
        margin: 10px auto;
    }
    .nav-arrow {
        width: 40px; height: 40px; font-size: 20px;
        top: auto;
        bottom: max(56px, calc(env(safe-area-inset-bottom) + 56px));
        transform: none;
    }
    .nav-arrow:hover { transform: scale(1.05); }
    .arrow-l { left: 12px; }
    .arrow-r { right: 12px; }
    /* On phone the nav arrows live BELOW the slide near the tab strip so
       they don't obstruct content. */
    .gallery-menu-tabs {
        padding: 0 64px;
        bottom: max(14px, env(safe-area-inset-bottom));
    }
    .stp-slide-scope > div,
    .stp-slide-scope > section,
    .stp-slide-scope > article {
        padding: 18px 12px !important;
    }
}

/* Reduced motion: replace the 3D card cycle with a plain cross-fade so
   the viewer doesn't trigger vestibular distress. */
@media (prefers-reduced-motion: reduce) {
    .gallery-viewport { perspective: none; }
    .proposal-card { transform: none !important; }
    @keyframes stpKIn  { 0% { opacity: 0; } 100% { opacity: 1; } }
    @keyframes stpKOut { 0% { opacity: 1; } 100% { opacity: 0; } }
    .anim-in, .anim-out { animation-duration: 0.25s !important; }
}

/* Touch (coarse pointer): no hover-scale on nav buttons, dampened
   3D since translateZ animations stutter on low-end phones. */
@media (hover: none) and (pointer: coarse) {
    .gallery-viewport { perspective: 1000px; }
    @keyframes stpKIn  { 0% { transform: translateZ(-120px) scale(0.97); opacity: 0; }
                         100% { transform: translateZ(0) scale(1); opacity: 1; } }
    @keyframes stpKOut { 0% { transform: translateZ(0) scale(1); opacity: 1; }
                         100% { transform: translateZ(120px) scale(1.03); opacity: 0; } }
    .anim-in, .anim-out { animation-duration: 0.45s !important; }
    .nav-arrow:hover { transform: translateY(-50%); background: rgba(0, 0, 0, 0.55); color: #fff; }
}