/* ==========================================================================
   Responsive - Media Queries
   ========================================================================== */

/* Tablet (768px - 1023px) */
@media (max-width: 1023px) {
    :root {
        --fs-4xl: 1.875rem;
        --fs-3xl: 1.5rem;
    }

    .site-header .container {
        padding: 0 var(--sp-4);
    }

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

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

    .toc-sidebar {
        display: none;
    }

    .toc-mobile {
        display: block;
    }

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

/* Mobile (< 768px) */
@media (max-width: 767px) {
    :root {
        --fs-4xl: 1.5rem;
        --fs-3xl: 1.25rem;
        --fs-2xl: 1.125rem;
        --header-height: 56px;
    }

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

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

    .article-card {
        padding: var(--sp-4);
    }

    .card-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--sp-2);
    }

    .card-meta .meta-views {
        margin-left: 0;
    }

    /* Header mobile */
    .nav-menu {
        display: none;
        position: fixed;
        top: var(--header-height);
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--bg-primary);
        padding: var(--sp-6);
        z-index: var(--z-overlay);
        flex-direction: column;
        overflow-y: auto;
    }

    .nav-menu.active {
        display: flex;
    }

    .nav-menu li {
        margin: 0;
        border-bottom: 1px solid var(--border-muted);
    }

    .nav-menu a {
        display: block;
        padding: var(--sp-4) 0;
        font-size: var(--fs-md);
    }

    .menu-toggle {
        display: flex;
    }

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

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

    .hero-section .search-submit {
        width: 100%;
    }

    /* Single article */
    .article-header .article-meta {
        flex-direction: column;
        gap: var(--sp-2);
    }

    .article-content h2 {
        font-size: var(--fs-xl);
    }

    /* Code blocks */
    .code-block-wrapper {
        margin-left: calc(-1 * var(--sp-4));
        margin-right: calc(-1 * var(--sp-4));
        border-radius: 0;
        border-left: none;
        border-right: none;
    }

    pre[class*="language-"],
    .code-block-wrapper pre {
        padding: var(--sp-4);
        font-size: var(--fs-xs);
    }

    /* Source info */
    .source-info {
        flex-wrap: wrap;
    }

    /* Tool tags */
    .tool-tags__list {
        gap: var(--sp-2);
    }

    .tool-tags__list .tag-badge {
        padding: var(--sp-1) var(--sp-3);
        font-size: var(--fs-xs);
    }

    /* Header search hidden on mobile */
    .header-search {
        display: none;
    }

    /* Article info wrap */
    .article-header .article-info {
        flex-wrap: wrap;
        gap: var(--sp-2);
    }

    /* Helpful widget */
    .helpful-widget {
        flex-direction: column;
        text-align: center;
    }

    /* Pagination */
    .pagination .nav-links {
        flex-wrap: wrap;
        justify-content: center;
    }

    /* Search form */
    .search-form {
        max-width: 100%;
    }

    /* Sidebar */
    .sidebar {
        margin-top: var(--sp-8);
    }

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

/* Small mobile (< 480px) */
@media (max-width: 479px) {
    .card-category {
        flex-direction: column;
        align-items: flex-start;
    }

    .article-tags {
        gap: var(--sp-1);
    }

    .tag-badge {
        font-size: 0.65rem;
    }
}

/* Large screens (> 1200px) */
@media (min-width: 1200px) {
    .container {
        max-width: var(--page-max);
    }

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

    .single-layout {
        grid-template-columns: 220px var(--content-max) 1fr;
        gap: var(--sp-8);
    }
}

/* Print styles */
@media print {
    .site-header,
    .site-footer,
    .toc-sidebar,
    .helpful-widget,
    .pagination,
    .copy-btn,
    .menu-toggle,
    .search-form {
        display: none !important;
    }

    body {
        background: #fff;
        color: #000;
    }

    .article-content {
        max-width: 100%;
    }

    a {
        color: #000;
        text-decoration: underline;
    }

    pre, code {
        border: 1px solid #ccc;
        background: #f4f4f4;
    }
}