/* ═══════════════════════════════════════════════════════════════
   Mobile Full-Width Override (640px and below)
   Ensures all content extends edge-to-edge on mobile
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
    /* Root & Body resets */
    html {
        margin: 0 !important;
        padding: 0 !important;
        width: 100%;
        overflow-x: hidden;
    }

    body {
        margin: 0 !important;
        padding: 0 !important;
        width: 100%;
        overflow-x: hidden;
    }

    /* Global element resets */
    * {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* All major container shells to 100% width */
    .container-shell,
    .page-shell,
    .page-shell--with-sidebar,
    .content-grid,
    .content-grid--archive,
    .article-page,
    .article-layout-grid,
    .article-layout,
    .article-content,
    .article-main,
    .front-grid,
    .front-grid--premium,
    .lead-story,
    .section-news-grid,
    .section-block,
    .archive-grid,
    .footer-grid,
    .ad-wrap,
    .ad-wrap--top,
    .breaking-ticker,
    .site-header,
    .top-strip,
    .nav-bar {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        margin-left: 2px !important;
        margin-right: 2px !important;
        margin-inline: 0 !important;
        padding: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        border-radius: 0 !important;
        left: 0 !important;
        right: 0 !important;
    }

    /* Header wrapper overrides */
    .top-strip__inner,
    .nav-bar__inner {
        width: 100% !important;
        margin: 0 !important;
        margin-left: 2px !important;
        margin-right: 2px !important;
        margin-inline: 0 !important;
        padding: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .masthead {
        width: 100% !important;
        margin: 0 !important;
        margin-left: 2px !important;
        margin-right: 2px !important;
        margin-inline: 0 !important;
        padding: 14px 0 12px !important;
        border-radius: 0 !important;
    }

    /* Hero and story cards */
    .hero-digest,
    .story-card,
    .story-list {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Latest list container */
    .latest-list {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Section blocks */
    .section-heading {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Sidebar on mobile */
    .premium-sidebar {
        width: 100% !important;
        margin: 0 !important;
        margin-left: 2px !important;
        margin-right: 2px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Footer */
    .footer-brand-row,
    .footer-col,
    .footer-bottom {
        width: 100% !important;
        margin: 0 !important;
        margin-left: 2px !important;
        margin-right: 2px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Breaking ticker width */
    .breaking-ticker {
        width: 100vw !important;
        margin-left: calc(-50vw + 50%) !important;
    }

    /* Ensure no horizontal scroll */
    body,
    html {
        overflow-x: hidden !important;
    }

    /* Sidebar drawer menu - 50% screen width */
    .nav-drawer {
        width: 50vw !important;
        max-width: 50vw !important;
    }

    /* Content grid spacing */
    .content-grid {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
        padding: 0 !important;
    }

    /* Front grid mobile layout */
    .front-grid,
    .front-grid--premium {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
        padding: 0 !important;
    }

    /* Lead story mobile */
    .lead-story {
        border-radius: 0 !important;
        border: none !important;
        box-shadow: none !important;
    }
}