/* ==========================================================================
   Mobile / responsive safety layer  (loaded last, so it wins)
   The homepage template keys its mobile layout to (orientation: portrait) and
   sizes everything in vw-scaled rem. That works on a phone held upright, but
   leaves two gaps this file closes:
     1. background <video> elements had no size -> they render at their
        intrinsic resolution and get clipped (look like they aren't playing).
     2. a phone held sideways (landscape) falls through to the desktop grid
        with near-unreadable text, and stray absolutely-positioned decorations
        can push the page wider than the screen (horizontal scroll).
   ========================================================================== */

/* No sideways scrolling, ever. */
html,
body {
    overflow-x: hidden;
    max-width: 100%;
}

/* Media should never blow out the viewport width. */
img {
    max-width: 100%;
}

/* Background videos fill their section on any aspect ratio. */
.hero .hero-video__bg video,
.hero video,
.delivered video,
.delivered-video__single {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* --------------------------------------------------------------------------
   Landscape phones / very short screens: the portrait breakpoints don't fire
   here, so bump the root font up (the template's own landscape rule shrinks it
   to ~3-5px) and let sections size to content instead of a rigid 100vh.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 932px) and (orientation: landscape) {
    html {
        font-size: calc(10 * (100vw / 820));
    }
    .hero,
    .delivered {
        min-height: 100vh;
        height: auto;
    }
    .hero .hero-container {
        padding-inline: 3rem;
    }
}

/* --------------------------------------------------------------------------
   Small portrait phones: tighten the hero so nothing overflows the 100vw the
   template calibrates to (some devices report a slightly narrower usable width
   than the 430/550 reference the root font uses).
   -------------------------------------------------------------------------- */
@media screen and (max-width: 481px) and (orientation: portrait) {
    .hero .hero-container {
        padding-inline: 1.5rem;
    }
    .hero .hero-container .hero-video {
        width: min(40rem, 90vw);
        height: auto;
        aspect-ratio: 8 / 5;
    }
    .hero .hero-container .hero-h1 {
        max-width: 100%;
    }
    .hero .hero-container .hero-p.is--portrait {
        width: min(33.4rem, 88vw);
    }
}