/* ============================================================================
   RESPONSIVE FIXES  —  loaded LAST so it overrides.
   Goal: kill sideways-scroll and non-scaling media on phones/tablets WITHOUT
   changing the approved desktop design. Structural rules here are safe at all
   widths; anything opinionated is scoped to mobile/tablet media queries only.
   ============================================================================ */

/* ---- 1. Stop horizontal overflow site-wide -------------------------------- */
/* AOS "fade-left/right" elements start off-screen and are the #1 cause of the
   sideways scroll on mobile; clipping at the root removes it cleanly.          */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

/* Let flex/grid children actually shrink instead of forcing overflow */
*,
*::before,
*::after {
    min-width: 0;
}

/* ---- 2. Responsive media -------------------------------------------------- */
/* Images/embeds never exceed their container. NOTE: the full-screen background
   videos (.bg-video / .core-bg-video / loader) are deliberately excluded so
   their object-fit:cover full-bleed behaviour is preserved.                    */
img,
picture,
svg {
    max-width: 100%;
    height: auto;
}

iframe,
embed,
object {
    max-width: 100%;
}

video:not(.bg-video):not(.core-bg-video):not(.lns-globe__vid):not(.lns-inline-video) {
    max-width: 100%;
}

/* Long unbroken strings (URLs, emails) shouldn't push the layout wide */
p,
li,
a,
span,
h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Wide code/pre blocks scroll inside themselves instead of the page */
pre,
table {
    max-width: 100%;
    overflow-x: auto;
}

/* ---- 3. Tablet & below (<= 1024px) ---------------------------------------- */
@media (max-width: 1024px) {
    /* Bootstrap containers already go fluid here; make sure nothing forces a
       fixed width that spills past the viewport.                              */
    .container,
    .container-lg,
    .container-xl,
    .container-xxl {
        max-width: 100%;
    }

    /* Common offenders: elements with inline/fixed pixel widths wider than the
       screen. Cap generic full-bleed sections. (100% not 100vw — 100vw includes
       the scrollbar width and can itself cause a sliver of sideways scroll.)   */
    section,
    header,
    footer {
        max-width: 100%;
    }
}

/* ---- 4. Phones (<= 767px) ------------------------------------------------- */
@media (max-width: 767px) {
    /* Absolutely nothing should introduce a horizontal scrollbar */
    body {
        position: relative;
    }

    /* Fixed background video layer stays locked to the viewport */
    .bg-stage {
        width: 100%;
        max-width: 100%;
    }
}