/*
 * Cross-variant responsive guardrails for the /1, /2, /3 landings.
 *
 * Each variant ships its own styles.css palette + typography. This
 * file only adds layout-safety rules that prevent horizontal scroll
 * on narrow viewports — never colours or fonts.
 *
 * Inject AFTER each variant's styles.css so the box-sizing reset
 * and the overflow clip override anything more permissive.
 */

/* Belt-and-braces: prevent horizontal scroll. overflow-x: clip is
   preferred (no scroll container, no programmatic scroll) and falls
   back to hidden in older Safari. */
html, body {
    max-width: 100%;
    overflow-x: clip;
    -webkit-text-size-adjust: 100%;
}

/* Don't let images or media exceed their column on small screens.
   The hero before/after slider was the original culprit on /2. */
img, svg, picture, video, iframe {
    max-width: 100%;
    height: auto;
}
svg, picture, video, iframe { display: block; }

/* The hero before/after slider explicitly clears its desktop
   max-width via inline style="max-width:none" on /2 + /3. Re-cap it
   to the viewport on small screens so the polaroid frame and the
   wrap inside never overflow. */
@media (max-width: 720px) {
    .ba-wrap,
    .ba-img,
    .hero-visual,
    .polaroid {
        max-width: 100% !important;
    }
}

/* Universal box-sizing keeps inline `width:100%` + padding from
   pushing children past the viewport. */
*,
*::before,
*::after {
    box-sizing: border-box;
}