/* ===== Mobile First - Responsive Breakpoints ===== */

/* <= 640px: Small mobile */
@media (max-width: 640px) {
    :root {
        --container-padding: var(--space-3);
    }

    h1 { font-size: var(--text-2xl); }
    h2 { font-size: var(--text-xl); }

    .grid-cols-2,
    .grid-cols-3,
    .grid-cols-4 {
        grid-template-columns: 1fr;
    }

    .filter-bar {
        flex-direction: column;
    }

    .filter-bar .select {
        width: 100%;
    }

    .tabs {
        gap: 0;
    }

    .tab-btn {
        padding: var(--space-2) var(--space-3);
        font-size: var(--text-xs);
    }

    .section {
        padding: var(--space-8) 0;
    }

    .page-header {
        padding: var(--space-6) 0;
    }

    .modal {
        padding: var(--space-5);
        width: 95%;
    }
}

/* <= 768px: Tablet */
@media (max-width: 768px) {
    /* Header mobile */
    .main-nav {
        position: fixed;
        top: var(--header-height);
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--bg-primary);
        flex-direction: column;
        align-items: stretch;
        padding: var(--space-4);
        gap: var(--space-2);
        transform: translateX(-100%);
        transition: transform var(--transition-base);
        z-index: var(--z-fixed);
        overflow-y: auto;
    }
    .main-nav.open {
        transform: translateX(0);
    }

    .nav-link {
        padding: var(--space-3) var(--space-4);
        font-size: var(--text-base);
        border-radius: var(--radius-lg);
    }

    .mobile-menu-toggle {
        display: flex;
    }

    .header-actions .btn-outline,
    .header-actions .btn-primary {
        display: none;
    }

    .user-name {
        display: none;
    }

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

/* >= 768px: Tablet landscape */
@media (min-width: 768px) {
    .grid-cols-2 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* >= 1024px: Desktop */
@media (min-width: 1024px) {
    .grid-cols-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .footer-grid {
        grid-template-columns: 2fr 1fr 1fr 1fr;
    }
}

/* >= 1280px: Large desktop */
@media (min-width: 1280px) {
    .grid-cols-4 {
        grid-template-columns: repeat(4, 1fr);
    }

    :root {
        --container-padding: var(--space-6);
    }
}