/**
 * KZEN ENTERPRISE THEME - GLOBAL RESPONSIVE SYSTEM
 * Centralized Media Queries · Touch Target Standards · Fluid Layout
 *
 * @package Kzen_Enterprise_Theme
 */

/* ========================================================
 * 1. MOBILE BREAKPOINT (< 768px)
 * ======================================================== */
@media (max-width: 767.98px) {
    :root {
        --gutter: 16px;
        --section-spacing-sm: 36px;
        --section-spacing-md: 52px;
        --section-spacing-lg: 64px;
    }

    /* Header & Navigation */
    .site-nav {
        display: none !important;
    }

    .nav-toggle {
        display: inline-flex !important;
    }

    .site-brand__logo {
        height: 32px;
    }

    /* Hero */
    .section--hero {
        padding-top: calc(var(--section-spacing-md) + 20px);
        padding-bottom: var(--section-spacing-md);
    }

    .hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

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

    /* Grids & Columns */
    .grid--2,
    .grid--3,
    .grid--4 {
        grid-template-columns: 1fr !important;
    }

    .form-grid {
        grid-template-columns: 1fr !important;
    }

    .site-footer__grid {
        grid-template-columns: 1fr !important;
        gap: var(--space-8);
    }

    .site-footer__bottom {
        flex-direction: column;
        gap: var(--space-3);
        text-align: center;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--space-3) !important;
    }

    .card--stat .stat-number {
        font-size: 28px;
    }

    .cookie-banner {
        left: 12px;
        right: 12px;
        bottom: 12px;
        flex-direction: column;
        align-items: stretch;
    }

    .cookie-banner__actions {
        width: 100%;
    }

    .cookie-banner__actions .btn {
        flex: 1;
    }
}

/* ========================================================
 * 2. TABLET BREAKPOINT (768px - 1023px)
 * ======================================================== */
@media (min-width: 768px) and (max-width: 1023.98px) {
    .site-nav {
        display: none !important;
    }

    .nav-toggle {
        display: inline-flex !important;
    }

    .grid--3,
    .grid--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .site-footer__grid {
        grid-template-columns: 1fr 1fr;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ========================================================
 * 3. DESKTOP BREAKPOINT (>= 1024px)
 * ======================================================== */
@media (min-width: 1024px) {
    .site-nav {
        display: flex !important;
    }

    .nav-toggle {
        display: none !important;
    }

    .mobile-drawer,
    .drawer-backdrop {
        display: none !important;
    }

    .stats-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ========================================================
 * 4. TOUCH DEVICE ADJUSTMENTS
 * ======================================================== */
@media (hover: none) and (pointer: coarse) {
    .site-nav__sub {
        display: none;
    }

    .btn,
    .form-control,
    .form-select,
    .tabs__btn,
    .accordion__trigger {
        min-height: var(--touch-min);
    }
}