/* H33 mobile containment — STRICT layer, 2026-09-25
 *
 * Linked ONLY from pages measured to still exceed the device width after
 * assets/mobile-containment.css. Kept separate because these rules are
 * deliberately blunt and must not reach the ~356 pages the base layer serves.
 *
 * Why the base layer was not enough: on every one of these pages the culprit
 * element's own box already FITS (measured by hiding siblings until the
 * document stopped overflowing). What overflows is its CONTENT, which cannot
 * shrink. `overflow-wrap: break-word` does not help there — it permits a break
 * only once a line is already too long and does NOT reduce the element's
 * min-content width, so a flex or grid item still demands its full intrinsic
 * size. `overflow-wrap: anywhere` does reduce min-content width, which is the
 * property that actually lets the container shrink.
 */

@media (max-width: 768px) {

    /* Every box may shrink below its content's intrinsic width. Without this a
       single flex or grid item anywhere in the chain pins the whole ancestor
       line to its own min-content size. */
    * {
        min-width: 0;
    }

    /* Reduce min-content width of text so the boxes above can actually use it. */
    h1, h2, h3, h4, h5, h6, p, li, dt, dd, dl, blockquote,
    span, a, strong, em, b, i, small, label, div, td, th, figcaption, summary {
        overflow-wrap: anywhere;
    }

    /* An explicit nowrap keeps content from wrapping no matter what the wrap
       rules say. Relaxed here, except where preformatting is the point.
       A class selector such as .impact{white-space:nowrap} outranks a :not()
       chain on specificity, so this needs !important to actually win. Anything
       whose formatting is the content - pre, code, kbd, samp, textarea - is
       excluded. */
    :not(pre):not(code):not(kbd):not(samp):not(textarea) {
        white-space: normal !important;
    }

    /* Flex rows wrap. grid-template-columns and flex-wrap are inert on elements
       that are not flex/grid containers, so naming elements broadly is safe:
       nothing changes unless the element really is one. */
    body, header, footer, nav, section, main, aside, ul, ol, li,
    div[class], div[style], form {
        flex-wrap: wrap;
    }

    /* Class-based multi-column grids collapse to one column. */
    body, div[class], div[style], ul, ol, section, main, aside, header, footer {
        grid-template-columns: 1fr !important;
    }

/* Decorative absolutely-positioned pseudo-elements must not extend the
       page. Measured on /h33-256/, where section.h256-cta::before is a 600px
       content:"" glow at left:195px with translateX(-300px), reaching x=495 on
       a 390px device. A pseudo-element is invisible to any child-element scan,
       so this class of overflow cannot be found by walking the DOM - only by
       querying getComputedStyle(el,'::before'). */
    *::before, *::after {
        max-width: 100vw;
    }

    /* Media and tabular content stay inside the column. */
    img:not([class*="logo"]), svg:not([class*="logo"]), video, canvas, iframe {
        max-width: 100%;
        height: auto;
    }
}