/* ============================================================
   Mobile header media — phone-only alternative image / video
   ------------------------------------------------------------
   A single overlay layer (bte_mobile_header_media_layer() in
   inc/helpers.php) dropped inside a header's media container. It
   is display:none above the phone breakpoint, so desktop is never
   affected and (because display:none elements don't fetch their
   background) the mobile image is never downloaded on desktop. The
   optional mobile VIDEO is injected by JS only on phones, so it is
   likewise never fetched on desktop. Purely additive + opt-in: a
   header with no mobile image/video set renders no layer at all.
   ============================================================ */
.bte-mhm { display: none; }

@media (max-width: 767px) {
    .bte-mhm {
        display: block;
        position: absolute;
        inset: 0;
        /* No explicit z-index: sits immediately after the base image in
           the DOM so it paints over it, while any overlay/content that
           follows (darkening gradient, headings, CTAs) stays on top. */
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        pointer-events: none;
        overflow: hidden;
    }
    .bte-mhm__video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
}