/* ============================================================
   Hero "drawer" effect for content pages (about, how-it-works,
   solutions, security, media). Mirrors the homepage hero drawer:
   the hero video is pinned full-viewport behind a purple backdrop,
   and the page content rises over it like a closing drawer.
   The JS in js/hero-drawer.js wraps the post-hero content in
   .ucr-papa and drives the darkening + magnetic snap + lock.
   ============================================================ */

/* Purple backdrop + gradual dark shade behind the pinned video */
.hero-purple-bg{
    position:fixed; inset:0; z-index:-3; pointer-events:none;
    background:linear-gradient(160deg,#5B0ECC 0%,#3f1d9e 100%);
}
.hero-video-shade{
    position:fixed; top:0; left:0; width:100%; height:100vh; z-index:-1;
    background:#000; opacity:0; pointer-events:none; will-change:opacity;
}

/* Hero keeps its ORIGINAL banner height (from responsive-full.css) and acts as a
   spacer; the video is pinned behind everything at that same height. The JS keeps
   the pinned video's height exactly equal to the spacer on load and resize. */
#main.hero.hero--image-only{
    margin:0 !important; padding:0 !important; background:transparent !important;
    overflow:visible !important; pointer-events:none;
}
#main.hero.hero--image-only video.hero-bg,
#main.hero.hero--image-only .hero-bg{
    position:fixed !important; top:0 !important; left:0 !important;
    width:100vw !important; height:58vh !important; object-fit:cover !important;
    z-index:-2 !important; pointer-events:none; background:transparent !important;
    opacity:1 !important; visibility:visible !important; transform:none !important;
}

/* The wrapped post-hero content is the opaque page that rises over the video,
   with square top edges and a drawer shadow — identical to the homepage. */
.ucr-papa{
    position:relative; z-index:1; border-radius:0 !important;
    box-shadow:0 -16px 40px rgba(0,0,0,.22);
    background:var(--ucr-surface, #ffffff);
}
html[data-theme="dark"] .ucr-papa{ background:var(--ucr-surface, #0b1220); }

/* Let the pinned hero ignore clicks while its content takes over */
#main.hero.hero--image-only + .ucr-papa{ pointer-events:auto; }

/* Phone & tablet (portrait): the default banner takes up about half the screen,
   matching the reference. svh = the at-rest (address-bar-shown) viewport, so this
   is exactly the height seen on load. The JS keeps the pinned video in sync. */
@media (max-width:900px){
    #main.hero.hero--image-only{ height:50svh !important; min-height:0 !important; max-height:none !important; }
    #main.hero.hero--image-only video.hero-bg,
    #main.hero.hero--image-only .hero-bg{ height:50svh !important; }
}