/* ============================================
   SELF ROOTED WORLD — Responsive Styles
   ============================================ */

/* ============================================
   TABLET — max-width: 1024px
   ============================================ */
@media (max-width: 1024px) {
    .categories-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

    .article-sidebar {
        position: static;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .article-sidebar .sidebar-widget:last-child {
        grid-column: 1 / -1;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }

    .footer-about {
        grid-column: 1 / -1;
    }

    .about-teaser {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .about-teaser-image {
        margin: 0 auto;
    }

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

/* ============================================
   MOBILE — max-width: 768px
   ============================================ */
@media (max-width: 768px) {
    /* Typography */
    h1 { font-size: 1.9rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.25rem; }

    .container { padding: 0 16px; }

    /* Header */
    .main-nav { display: none; }

    .hamburger { display: flex; }

    .main-nav.open {
        display: block;
        position: fixed;
        top: 70px;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--color-white);
        z-index: 999;
        padding: 24px;
        overflow-y: auto;
    }

    .main-nav.open .nav-menu {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .main-nav.open .nav-menu li a {
        font-size: var(--fs-lg);
        padding: 14px 16px;
        border-radius: var(--radius-md);
        border-bottom: 1px solid var(--color-border);
        text-align: left;
    }

    /* Hero */
    .hero { padding: 56px 0; }
    .hero h1 { font-size: 1.9rem; }
    .hero-subtitle { font-size: var(--fs-base); }
    .hero-actions { flex-direction: column; align-items: center; }
    .hero-stats { gap: 24px; }

    /* Categories */
    .categories-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .category-card { padding: 20px 14px; }

    /* Posts grid */
    .posts-grid { grid-template-columns: 1fr; gap: 20px; }

    /* Article */
    .article-layout { padding: 24px 0 48px; gap: 32px; }
    .article-sidebar { grid-template-columns: 1fr; }
    .article-title { font-size: 1.7rem; }

    /* Author box */
    .author-box { flex-direction: column; align-items: flex-start; gap: 16px; }
    .author-box-avatar { width: 64px; height: 64px; font-size: 1.5rem; }

    /* About teaser */
    .about-teaser { padding: 32px 20px; }
    .about-teaser-image { width: 120px; height: 120px; font-size: 2.5rem; }

    /* Related posts */
    .related-posts-grid { grid-template-columns: 1fr; }

    /* Footer */
    .footer-grid { grid-template-columns: 1fr; gap: 32px; }
    .footer-top { padding: 40px 0 24px; }
    .footer-bottom-inner { flex-direction: column; gap: 12px; }
    .footer-disclosure { text-align: left; max-width: 100%; }

    /* Breadcrumb */
    .breadcrumb ol { gap: 2px; }

    /* Tables */
    .post-content table { display: block; overflow-x: auto; }

    /* Page content */
    .page-content { padding: 40px 16px 56px; }
    .page-hero { padding: 48px 0; }

    /* Category page header */
    .category-page-header { padding: 28px 0 24px; }

    /* Sections */
    .section { padding: 48px 0; }
    .section-lg { padding: 56px 0; }
    .section-header { margin-bottom: 32px; }
}

/* ============================================
   SMALL MOBILE — max-width: 480px
   ============================================ */
@media (max-width: 480px) {
    .categories-grid { grid-template-columns: 1fr; }

    .hero-stats { flex-direction: column; gap: 16px; border-top: none; }

    .cta-button, .btn { padding: 12px 20px; font-size: var(--fs-sm); }
    .btn-lg { padding: 14px 24px; font-size: var(--fs-base); }

    .pagination { gap: 6px; }
    .pagination a, .pagination span { min-width: 36px; height: 36px; }

    .faq-question { font-size: var(--fs-sm); padding: 14px 16px; }
    .faq-answer.open { padding: 0 16px 16px; }

    .about-teaser { gap: 24px; }
    .about-teaser-image { display: none; }
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
    .site-header, .article-sidebar, .site-footer,
    .related-posts, .faq-accordion, .cta-button,
    .affiliate-disclaimer, .hamburger { display: none !important; }

    body { padding-top: 0; background: white; color: black; }
    .article-layout { grid-template-columns: 1fr; }
    a { color: black; text-decoration: underline; }
    .post-content h2, .post-content h3 { page-break-after: avoid; }
}

/* ============================================
   REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    html { scroll-behavior: auto; }
}