/* ============================================================
   KidZaps - Responsive Breakpoints
   Mobile-first: 320px → 768px → 1024px → 1280px+
   ============================================================ */

/* ---------- Tablet and below (max-width: 1024px) ---------- */
@media (max-width: 1024px) {
    .category-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-4);
    }

    .worksheet-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-4);
    }

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-8);
    }

    .worksheet-detail {
        grid-template-columns: 1fr;
    }

    .sidebar {
        position: static;
    }

    .hero h1 {
        font-size: var(--text-4xl);
    }
}

/* ---------- Tablet portrait (max-width: 768px) ---------- */
@media (max-width: 768px) {
    :root {
        --header-height: 60px;
    }

    .container {
        padding: 0 var(--space-4);
    }

    /* Header */
    .main-nav {
        display: none;
        position: fixed;
        top: var(--header-height);
        left: 0;
        right: 0;
        bottom: 0;
        background: white;
        flex-direction: column;
        padding: var(--space-6);
        gap: var(--space-2);
        z-index: 999;
        overflow-y: auto;
        box-shadow: var(--shadow-xl);
    }

    .main-nav.open {
        display: flex;
    }

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

    .mobile-menu-btn {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .header-search {
        display: none;
    }

    .locale-switcher {
        font-size: var(--text-xs);
    }

    /* Hero */
    .hero {
        padding: var(--space-10) 0 var(--space-12);
    }

    .hero h1 {
        font-size: var(--text-3xl);
    }

    .hero p {
        font-size: var(--text-base);
    }

    .hero-search input {
        padding: var(--space-3) var(--space-4);
        padding-right: 100px;
        font-size: var(--text-base);
    }

    .hero-search button {
        padding: var(--space-2) var(--space-4);
        font-size: var(--text-xs);
    }

    /* Grade Bar */
    .grade-bar {
        top: var(--header-height);
    }

    /* Grids */
    .category-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-4);
    }

    .worksheet-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-4);
    }

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

    .section-header {
        margin-bottom: var(--space-6);
    }

    .section-title {
        font-size: var(--text-xl);
    }

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

    .footer-bottom {
        flex-direction: column;
        gap: var(--space-4);
        text-align: center;
    }

    /* Worksheet Detail */
    .worksheet-actions {
        flex-direction: column;
    }

    .worksheet-actions .btn {
        width: 100%;
        justify-content: center;
    }

    /* Ads - tablet visibility */
    .ad-tablet-only { display: block; }
    .ad-desktop-only { display: none; }
}

/* ---------- Mobile (max-width: 480px) ---------- */
@media (max-width: 480px) {
    html {
        font-size: 14px;
    }

    .category-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-3);
    }

    .category-card {
        padding: var(--space-4);
    }

    .category-icon {
        width: 48px;
        height: 48px;
        font-size: 22px;
    }

    .category-card h3 {
        font-size: var(--text-sm);
    }

    .category-card p {
        display: none;
    }

    .worksheet-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .worksheet-card {
        flex-direction: row;
    }

    .worksheet-thumb-wrapper {
        width: 120px;
        flex-shrink: 0;
    }

    .worksheet-thumb {
        aspect-ratio: 1;
        height: 100%;
    }

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

    .hero::before,
    .hero::after {
        display: none;
    }

    .grade-pill {
        padding: var(--space-1) var(--space-3);
        font-size: var(--text-xs);
    }

    /* Reward popup */
    .reward-popup {
        padding: var(--space-6);
    }

    .reward-emoji {
        font-size: 3rem;
    }

    .reward-message {
        font-size: var(--text-xl);
    }

    /* Ads - mobile visibility */
    .ad-mobile-only { display: block; }
    .ad-tablet-only { display: none; }
    .ad-desktop-only { display: none; }

    /* Pagination */
    .pagination {
        gap: var(--space-1);
    }

    .pagination a,
    .pagination span {
        width: 34px;
        height: 34px;
        font-size: var(--text-xs);
    }
}

/* ---------- Large screens (min-width: 1440px) ---------- */
@media (min-width: 1440px) {
    :root {
        --container-max: 1400px;
    }

    .category-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

/* ---------- Print styles (handled in print.css) ---------- */
@media print {
    .site-header,
    .site-footer,
    .grade-bar,
    .ad-slot,
    .breadcrumb-nav,
    .worksheet-actions,
    .sidebar,
    .reward-overlay,
    .mobile-menu-btn,
    .locale-switcher {
        display: none !important;
    }

    body {
        background: white;
        color: black;
        font-size: 12pt;
    }

    .worksheet-detail {
        grid-template-columns: 1fr;
    }
}