/* ══════════════════════════════════════════════════════════
   UNIVERSAL MOBILE RESPONSIVE RESET (v1.0)
   Designed for: Institutional Portfolio Detailed Project Pages
   Target: < 991px (Tablets & Mobile)
   Purpose: Eliminate horizontal overflow and force layout collapse
   ═══════════════════════════════════════════════════════════ */

/* 1. NUCLEAR OVERFLOW PREVENTION */
@media (max-width: 991px) {
    html, body.project-detail-page {
        overflow-x: hidden !important;
        position: relative !important;
        width: 100% !important;
        max-width: 100vw !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.project-detail-page *, 
    body.project-detail-page *:before, 
    body.project-detail-page *:after {
        box-sizing: border-box !important;
        max-width: 100% !important; /* Force all elements to stay within viewport */
        word-wrap: break-word !important;
        overflow-wrap: anywhere !important;
    }

    /* 2. CONTAINER STANDARDIZATION */
    body.project-detail-page .container, 
    body.project-detail-page .container-fluid, 
    body.project-detail-page .container-standard, 
    body.project-detail-page .container-narrow,
    body.project-detail-page .header-container, 
    body.project-detail-page .project-detail-header, 
    body.project-detail-page .project-detail-content {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        width: 100% !important;
        max-width: 100vw !important;
        min-width: 0 !important; 
        margin-left: auto !important;
        margin-right: auto !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    /* 3. RELENTLESS GRID COLLAPSER */
    body.project-detail-page div[style*="display: grid"],
    body.project-detail-page section[style*="display: grid"],
    body.project-detail-page article[style*="display: grid"],
    body.project-detail-page [style*="grid-template-columns"],
    body.project-detail-page .project-detail-grid,
    body.project-detail-page .perspective-grid,
    body.project-detail-page .gallery-grid,
    body.project-detail-page .grid-2col,
    body.project-detail-page .grid-3col,
    body.project-detail-page .ab-test-container,
    body.project-detail-page .responsive-comparison-grid,
    body.project-detail-page .state-panel,
    body.project-detail-page .clean-dashboard {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* 4. TYPOGRAPHY & BUTTON WRAPPING */
    body.project-detail-page .project-detail-title {
        font-size: clamp(2rem, 8vw, 2.5rem) !important;
        line-height: 1.1 !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: anywhere !important;
        hyphens: auto !important;
    }
    
    body.project-detail-page .btn, 
    body.project-detail-page .btn-small, 
    body.project-detail-page .project-detail-links a {
        white-space: normal !important;
        text-align: center !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* 5. HEADER FIX */
    body.project-detail-page header,
    body.project-detail-page .header {
        width: 100% !important;
        max-width: 100vw !important;
        left: 0 !important;
        right: 0 !important;
    }

    body.project-detail-page .header-container {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
    }

    body.project-detail-page .header-container .logo-link {
        white-space: nowrap !important;
        width: auto !important;
        max-width: none !important;
        flex-shrink: 1 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    body.project-detail-page .header-container .main-nav {
        width: auto !important;
        max-width: none !important;
        flex-shrink: 0 !important;
    }

    /* 7. LEGACY TABLE RESET (FALLBACK) */
    table:not(.card-table) {
        display: block !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
    }
}