/**
 * Mobile Layout Fixes
 * Cases Critiques — casescritiques-child theme
 * Rewritten: 2026-04-02 — clean cascade, no unnecessary !important
 *
 * Loaded AFTER style.css — same selectors override naturally.
 * !important only where strictly needed (inline styles from plugins).
 */

/* ===================== Global overflow guard ===================== */
html {
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
}
body {
    overflow-x: hidden !important;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
}

/* ===================== Mobile < 768px ===================== */
@media (max-width: 768px) {

    /* -- Containment -- */
    #page,
    .site,
    .site-content {
        width: 100%;
        margin: 0;
        padding: 0;
        overflow-x: hidden;
    }

    .container {
        max-width: 100%;
        width: 100%;
        padding-left: 16px;
        padding-right: 16px;
        box-sizing: border-box;
        overflow-x: hidden;
        margin-left: 0;
        margin-right: 0;
    }

    /* -- Header -- */
    .site-header {
        overflow: hidden;
    }

    .site-header .container {
        padding-left: 12px;
        padding-right: 12px;
    }

    .site-title {
        font-size: 1rem;
    }

    /* -- Hero critique -- */
    .cc-hero {
        padding: 2rem 0;
        overflow: hidden;
    }

    .cc-hero-split {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        text-align: center;
    }

    .cc-hero-cover {
        width: 100%;
        max-width: 240px;
        margin: 0 auto;
        flex-shrink: 1;
    }

    .cc-hero-cover a {
        display: block;
        width: 100%;
    }

    /* Cover image — !important needed: plugin sets inline min-width */
    .cc-hero-cover img,
    .cc-hero-cover img.lazyloaded,
    .cc-hero-cover img.lazyautosizes {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100%;
        max-height: 320px;
        height: auto;
        object-fit: contain;
        margin: 0 auto;
    }

    .cc-hero-title {
        font-size: 1.35rem;
        line-height: 1.25;
        word-break: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
        margin: 0;
    }

    .cc-hero-content {
        width: 100%;
        max-width: 100%;
        align-items: center;
    }

    /* -- Badges -- */
    .cc-hero-badges {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem;
        max-width: 100%;
    }

    .cc-badge {
        font-size: 0.65rem;
        padding: 0.3rem 0.65rem;
        white-space: nowrap;
    }

    .cc-hero-author {
        font-size: 0.95rem;
    }

    .cc-hero-excerpt {
        max-width: 100%;
        font-size: 0.95rem;
        word-break: break-word;
        overflow-wrap: break-word;
        text-align: center;
    }

    .cc-hero .btn {
        width: 100%;
        justify-content: center;
    }

    /* -- Sections -- */
    .cc-section {
        padding: 2.5rem 0;
        overflow: hidden;
    }

    .cc-section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
        margin-bottom: 1.5rem;
    }

    .cc-section-header h2 {
        font-size: 1.35rem;
        word-break: break-word;
    }

    /* -- Grid -- */
    .cc-grid-3 {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    /* -- Cards -- */
    .cc-card,
    .cc-tool-card {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .cc-card-body {
        padding: 1rem;
    }

    .cc-card-title {
        font-size: 1rem;
        word-break: break-word;
    }

    .cc-card-excerpt {
        font-size: 0.875rem;
        word-break: break-word;
        overflow-wrap: break-word;
    }

    .cc-card-badge {
        font-size: 0.65rem;
        padding: 0.25rem 0.6rem;
    }

    /* -- Footer -- */
    .cc-footer-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    /* -- Archive -- */
    .cc-archive-header {
        text-align: center;
    }

    .cc-archive-header h1 {
        font-size: 1.5rem;
        word-break: break-word;
    }

    .cc-hero-critique {
        min-height: auto;
    }

    .cc-hero-critique-title {
        font-size: 1.35rem;
        word-break: break-word;
    }

    .cc-archive-layout {
        grid-template-columns: 1fr;
    }

    .cc-card-sidebar {
        width: 100%;
    }

    /* -- Content containment -- */
    .entry-content,
    .post-content,
    .cc-single-content,
    .cc-article-content {
        max-width: 100%;
        padding-left: 16px;
        padding-right: 16px;
        box-sizing: border-box;
        overflow-x: hidden;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .entry-content img,
    .entry-content table,
    .entry-content iframe,
    .entry-content pre,
    .entry-content video,
    .cc-single-content img,
    .cc-single-content table,
    .cc-single-content iframe {
        max-width: 100%;
        width: 100%;
        height: auto;
    }

    table {
        display: block;
        overflow-x: auto;
    }

    pre, code {
        white-space: pre-wrap;
        word-break: break-word;
        max-width: 100%;
    }

    .stat-highlight {
        flex-direction: column;
    }

    .stat-box {
        min-width: unset;
        width: 100%;
    }

    /* -- Media -- */
    img, video, iframe, embed, object, svg {
        max-width: 100%;
        height: auto;
    }
}

/* ===================== Small screens < 400px ===================== */
@media (max-width: 400px) {

    .container {
        padding-left: 10px;
        padding-right: 10px;
    }

    .cc-hero-title {
        font-size: 1.2rem;
    }

    .cc-hero-cover {
        max-width: 200px;
    }

    .cc-badge {
        font-size: 0.6rem;
        padding: 0.25rem 0.5rem;
    }

    .cc-section-header h2 {
        font-size: 1.2rem;
    }

    .cc-card-title {
        font-size: 0.9rem;
    }
}

/* ===================== Navigation 769-900px ===================== */
@media (max-width: 900px) and (min-width: 769px) {
    .main-navigation ul {
        gap: 0.75rem;
        flex-wrap: wrap;
    }

    .main-navigation a {
        font-size: 0.8125rem;
    }
}

/* ===================== Safety net (all viewports) ===================== */
.site-header .container,
.site-header,
header {
    max-width: 100vw;
    overflow-x: hidden;
}