/*
 * Public mobile layout stability.
 *
 * Prevents any wide transformed or max-content child from expanding the
 * document canvas on iOS Safari. The rules are intentionally limited to
 * public screens up to 720px.
 */
@media (max-width: 720px) {
    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden !important;
        overscroll-behavior-x: none;
    }

    @supports (overflow: clip) {
        html,
        body {
            overflow-x: clip !important;
        }
    }

    body {
        position: relative;
    }

    .site-header,
    main,
    .site-footer,
    .top-social-strip,
    .hero-slider,
    .home-status-section,
    .content-section,
    .works-home-section,
    .accounts-section,
    .newsletter-section,
    .registration-preview,
    .about-section,
    .mobile-status-ticker {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .container,
    .header-inner,
    .top-social-track,
    .hero-slides,
    .hero-slide,
    .hero-slide-inner,
    .home-status-grid,
    .content-grid,
    .dynamic-content-grid,
    .public-card-grid,
    .accounts-panel {
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    /*
     * A horizontal gesture on the banner should switch slides, not pan the
     * entire document canvas. Vertical page scrolling and pinch zoom remain
     * available.
     */
    .hero-slider,
    .hero-slides,
    .hero-slide {
        overflow: hidden;
        touch-action: pan-y pinch-zoom;
        overscroll-behavior-x: contain;
    }

    .hero-slide-media,
    .hero-slide-media img {
        max-width: 100%;
    }

    /*
     * Strictly isolate the ticker's wide inner row. clip-path is included for
     * an iOS Safari edge case where a transformed/max-content descendant can
     * otherwise contribute to the root scrollable overflow.
     */
    .mobile-status-ticker {
        overflow: hidden !important;
        contain: layout paint style;
        clip-path: inset(0);
        isolation: isolate;
    }

    .mobile-status-ticker-link {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow: hidden;
        box-sizing: border-box;
    }

    .mobile-status-ticker-viewport {
        display: block;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow: hidden !important;
        overscroll-behavior-x: none;
        touch-action: pan-y;
        contain: layout paint style;
        clip-path: inset(0);
        scrollbar-width: none;
    }

    .mobile-status-ticker-viewport::-webkit-scrollbar {
        display: none;
    }

    .mobile-status-ticker-track {
        max-width: none !important;
        transform: none !important;
    }

    img,
    video,
    iframe,
    svg,
    canvas {
        max-width: 100%;
    }
}