/* =========================================================
   VIDEO HERO BACKGROUNDS
   Include this file once, after your main stylesheet, on
   every front-facing page (or paste into your main CSS bundle).
   Works with the markup produced by partials/hero_video.php
   ========================================================= */

/* Any section that hosts a video background needs to be a
   positioning context and clip the video to its own bounds. */
.has-video-bg {
    position: relative;
    overflow: hidden;
    isolation: isolate; /* keeps the video's stacking context out of children's way */
}

/* =========================================================
   UNIFORM HERO SIZE
   One shared height for every video hero, regardless of which
   page-specific class (hero-section, page-header,
   flight-search-hero, hu-hero, cargo-hero) the section also
   carries — so the site reads consistently as you move between
   pages. Change the two variables below to resize everywhere
   at once.
   ========================================================= */
:root {
    --hero-video-min-height: 52vh;         /* was 62vh — 10vh shorter */
    --hero-video-min-height-mobile: 420px;

    /* ─────────────────────────────────────────────────────
       HERO OVERLAY — transparent by default.
       The overlay element still exists in the DOM for pages
       that want a darker wash. Set --hero-overlay on any
       specific hero to opt back in:

         .hero-section { --hero-overlay: linear-gradient(...); }

       Left transparent here so every existing page reads
       bright out of the box.
       ───────────────────────────────────────────────────── */
    --hero-overlay: transparent;
}

.has-video-bg,
.hero-section.has-video-bg,
.page-header.has-video-bg,
.flight-search-hero.has-video-bg,
.hu-hero.has-video-bg,
.cargo-hero.has-video-bg {
    display: flex;
    align-items: center;
    min-height: var(--hero-video-min-height);
    height: auto;
    padding-top: 0;
    padding-bottom: 0;
}

.has-video-bg > .container,
.has-video-bg > .container-fluid {
    width: 100%;
    padding-top: 3rem;
    padding-bottom: 3rem;
}

@media (max-width: 767.98px) {
    .has-video-bg,
    .hero-section.has-video-bg,
    .page-header.has-video-bg,
    .flight-search-hero.has-video-bg,
    .hu-hero.has-video-bg,
    .cargo-hero.has-video-bg {
        min-height: var(--hero-video-min-height-mobile);
    }
}

.hero-video-wrap {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: #10131a; /* shows briefly before the poster/video paints */
    background-size: cover;
    background-position: center;
}

.hero-video-wrap .hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    /* Video starts invisible and fades in once it actually has
       frames to show, so we never flash an unstyled black box. */
    opacity: 0;
    transition: opacity 700ms ease;
}

.hero-video-wrap .hero-video.is-ready {
    opacity: 1;
}

/* ─────────────────────────────────────────────────────────
   Overlay layer.
   Kept as its own element so pages can opt back in via
   --hero-overlay. Default is transparent (see :root above),
   so nothing is darkened unless a page asks for it.
   ───────────────────────────────────────────────────────── */
.hero-video-overlay {
    position: absolute;
    inset: 0;
    background: var(--hero-overlay, transparent);
    pointer-events: none; /* never block clicks on the video wrapper */
}

/* Every direct content wrapper inside a video hero (usually the
   Bootstrap .container) must sit above the video layer. */
.has-video-bg > .container,
.has-video-bg > .container-fluid {
    position: relative;
    z-index: 2;
}

/* ─────────────────────────────────────────────────────────
   Readability fallback.
   With the dark overlay gone, white text over a bright video
   can wash out. A soft text-shadow restores contrast without
   dimming the footage. Applies to direct text inside a video
   hero, not to buttons or cards (those keep their own styling).
   ───────────────────────────────────────────────────────── */
.has-video-bg h1,
.has-video-bg h2,
.has-video-bg h3,
.has-video-bg h4,
.has-video-bg h5,
.has-video-bg h6,
.has-video-bg p,
.has-video-bg .lead,
.has-video-bg .hero-subtitle,
.has-video-bg .hero-title {
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55),
                 0 1px 3px  rgba(0, 0, 0, 0.35);
}

/* Buttons inside video heroes: give them a subtle drop shadow
   so a white outline button on a white sky is still visible. */
.has-video-bg .btn:not(.btn-link) {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

/* Respect reduced-motion and the "data saver" JS fallback:
   video-hero.js adds .no-video to the wrapper instead of
   playing anything, and the poster (set as a background-image
   inline style) carries the visual on its own. */
.hero-video-wrap.no-video .hero-video {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .hero-video-wrap .hero-video {
        display: none;
    }
}

/* Small screens: swap in a lighter still frame instead of
   streaming video at all — saves mobile data and battery,
   and avoids the common iOS/Android autoplay stutter on a
   hero that's competing with page-load. Toggle this behaviour
   off by removing the block if you want video on mobile too. */
@media (max-width: 767.98px) {
    .hero-video-wrap .hero-video {
        display: none;
    }
}