/* ==========================================================================
   Responsive — Mobile First Breakpoints
   ========================================================================== */

/* --- Max 1024px (Tablet landscape) --- */
@media (max-width: 1024px) {
    .primary-nav {
        display: none;
    }

    .menu-toggle {
        display: flex;
    }

    .mobile-nav-overlay,
    .mobile-nav {
        display: block;
    }

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

    .layout-sidebar {
        grid-template-columns: 1fr;
    }

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

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

/* --- Max 768px (Tablet portrait) --- */
@media (max-width: 768px) {
    :root {
        --text-5xl: 2.25rem;
        --text-4xl: 1.875rem;
        --text-3xl: 1.5rem;
        --text-2xl: 1.25rem;
    }

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

    .section {
        padding-top: var(--space-10);
        padding-bottom: var(--space-10);
    }

    /* Hero */
    .hero {
        aspect-ratio: 4 / 3;
    }

    .hero__overlay {
        padding: var(--space-6);
    }

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

    /* Article Banner */
    .article-banner {
        aspect-ratio: 16 / 10;
    }

    .article-banner__title {
        font-size: var(--text-3xl);
    }

    .article-banner__overlay {
        padding-bottom: var(--space-6);
    }

    .article-banner__meta {
        flex-wrap: wrap;
        gap: var(--space-2);
    }

    /* TOC: show toggle on mobile */
    .toc__toggle {
        display: block;
    }

    /* Tables: horizontal scroll */
    .article-content__body table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Author Box */
    .author-box {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }

    /* Share Buttons */
    .share-buttons {
        flex-wrap: wrap;
    }

    /* Category Showcase */
    .category-showcase__header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
    }
}

/* --- Max 480px (Mobile) --- */
@media (max-width: 480px) {
    :root {
        --text-5xl: 1.875rem;
        --text-4xl: 1.5rem;
        --text-3xl: 1.25rem;
    }

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

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

    .hero {
        aspect-ratio: 3 / 4;
        max-height: 70vh;
    }

    .article-banner {
        aspect-ratio: 4 / 3;
    }

    .tldr-box {
        padding: var(--space-4);
    }

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

    .search-form {
        flex-direction: column;
    }

    .search-form__input {
        border-right: 1.5px solid var(--color-border);
        border-radius: var(--radius-sm);
    }

    .search-form__submit {
        border-radius: var(--radius-sm);
        margin-top: var(--space-2);
    }

    .pagination {
        flex-wrap: wrap;
    }

    .related-posts .article-grid {
        grid-template-columns: 1fr;
    }
}