/**
 * SAI PR - Clean Responsive Exceptions & Zero-Overflow Engine
 * Brand: SAI Communications & PR
 */

/* =========================================================================
   01. LAPTOP & LARGE TABLET BREAKPOINTS (max-width: 64rem / 1024px)
   ========================================================================= */
@media (max-width: 64rem) {
    /* Header & Nav */
    .nav-menu {
        display: none;
    }
    
    .mobile-toggle {
        display: flex;
    }

    /* Hero */
    .hero-grid {
        grid-template-columns: 1fr;
        gap: var(--space-6);
        text-align: left;
    }

    .hero-sculpture-wrapper {
        min-height: 18rem;
        height: 18rem;
    }

    /* Logo Wall */
    .logo-wall-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Expertise Index */
    .expertise-index-grid {
        grid-template-columns: 1fr;
    }

    .expertise-preview-panel {
        display: none;
    }

    /* Selected Work */
    .selected-work-grid {
        grid-template-columns: 1fr;
    }

    /* Article Detail */
    .article-detail-layout {
        grid-template-columns: 1fr;
    }

    .article-sidebar {
        position: static;
        order: 2;
    }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-6);
    }
}

/* =========================================================================
   02. TABLET & MOBILE BREAKPOINTS (max-width: 48rem / 768px)
   ========================================================================= */
@media (max-width: 48rem) {
    /* Containers */
    .container,
    .container-wide,
    .container-narrow,
    .container-prose {
        width: min(100% - 2rem, 100%);
    }

    /* Logo Wall */
    .logo-wall-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-2);
    }

    /* About Preview */
    .about-preview-grid {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }

    /* Leadership Profile */
    .leadership-grid {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }

    .leadership-portrait {
        max-width: 20rem;
    }

    /* Principles List */
    .principle-row {
        grid-template-columns: 1fr;
        gap: var(--space-2);
    }

    /* Approach Steps */
    .approach-steps-grid {
        grid-template-columns: 1fr;
    }

    /* Grid utilities */
    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
    }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* =========================================================================
   03. SMALL MOBILE BREAKPOINTS (max-width: 25rem / 400px)
   ========================================================================= */
@media (max-width: 25rem) {
    .hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-actions .btn {
        width: 100%;
    }

    .btn {
        padding-inline: var(--space-4);
    }
}

/* =========================================================================
   04. STRICT OVERFLOW PREVENTION
   ========================================================================= */
html,
body {
    overflow-x: hidden !important;
    max-width: 100vw;
}

*,
*::before,
*::after {
    max-width: 100%;
}