/* =============================================================
   10. RESPONSIVE - 1024px (Tablet)
   ============================================================= */

@media (max-width: 1024px) {
    .pg-wiki-cat-sidebar {
        width: 220px;
    }

    .pg-wiki-hero-inner {
        padding: 32px;
    }

    .pg-wiki-hero-decoration {
        display: none;
    }
}

/* =============================================================
   11. RESPONSIVE - 768px (Mobile)
   ============================================================= */

@media (max-width: 768px) {
    .pg-wiki-cat-sidebar {
        display: none;
    }

    .pg-wiki-cat-layout {
        padding: 0 16px 60px;
    }

    .pg-wiki-hero {
        padding: 0 16px 16px;
    }

    .pg-wiki-hero-inner {
        padding: 24px 20px;
        border-radius: 2px;
    }

    .pg-wiki-hero h1 {
        font-size: 24px;
    }

    .pg-wiki-hero-desc {
        font-size: 14px;
    }

    .pg-wiki-hero-stats {
        flex-wrap: wrap;
        gap: 8px;
    }

    .pg-wiki-hero-decoration {
        display: none;
    }

    .pg-wiki-category .pg-wiki-breadcrumb {
        padding: 12px 16px;
    }

    .pg-wiki-articles-grid {
        grid-template-columns: 1fr;
    }

    .pg-wiki-articles-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .pg-wiki-articles-search {
        width: 100%;
    }

    .pg-wiki-articles-search-input {
        width: 100%;
    }

    .pg-wiki-article-card {
        min-height: auto;
    }
}

/* =============================================================
   12. RESPONSIVE - 480px (Small mobile)
   ============================================================= */

@media (max-width: 480px) {
    .pg-wiki-hero-inner {
        padding: 20px 16px;
    }

    .pg-wiki-hero h1 {
        font-size: 22px;
    }

    .pg-wiki-subcat-card {
        padding: 16px;
    }

    .pg-wiki-article-card {
        padding: 16px;
    }
}