/* ==========================================================================
   Moban 8-10-4 — Responsive
   ========================================================================== */

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
    .two-col-layout { display: block; }
    .main-col { min-width: 0; }

    .sidebar-col {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
        align-items: start;
    }
    .sidebar-widget { margin-bottom: 0; }
}

/* ---------- Mobile ---------- */
@media (max-width: 768px) {
    body { font-size: 15px; }

    .masthead-slogan {
        flex-direction: column;
        gap: 4px;
        padding: 10px 0;
        text-align: center;
    }
    .slogan-main { font-size: 13px; letter-spacing: 0.06em; }

    .header-inner {
        flex-wrap: wrap;
        gap: 12px;
        padding: 12px 0;
    }

    .nav-toggle { display: block; }

    .main-nav {
        flex-basis: 100%;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s var(--ease);
    }
    .main-nav.is-open { max-height: 460px; }

    .nav-menu {
        flex-direction: column;
        gap: 2px;
        padding-bottom: 8px;
    }
    .nav-menu li a { padding: 12px 14px; border-radius: 12px; }

    .header-actions { margin-left: 0; }

    .poster-img { height: 380px; }
    .poster-overlay { padding: 26px; gap: 10px; }

    .pull-quote {
        padding: 28px 24px 28px 66px;
    }
    .quote-mark { left: 16px; font-size: 70px; }

    .picks-grid { grid-template-columns: minmax(0, 1fr); }

    .article-list-link { display: block; }
    .article-list-thumb img { height: 200px; min-height: 0; }

    .poster-strip { grid-template-columns: minmax(0, 1fr); }
    .poster-strip-item img { height: 220px; }

    .sidebar-col { grid-template-columns: minmax(0, 1fr); }

    .archive-header { padding: 24px; }

    .single-content { padding: 26px 22px; font-size: 16px; }

    .single-cta {
        flex-direction: column;
        text-align: center;
        padding: 26px 22px;
    }

    .post-nav { grid-template-columns: minmax(0, 1fr); }
    .post-nav-next { text-align: left; }

    .footer-widgets {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
        padding: 40px 0 20px;
    }
    .footer-nav { gap: 8px 18px; }
}

/* ---------- Small Mobile ---------- */
@media (max-width: 480px) {
    .container { padding: 0 14px; }

    .slogan-line { display: none; }

    .header-actions {
        width: 100%;
        justify-content: stretch;
    }
    .btn-login, .btn-register {
        flex: 1;
        text-align: center;
        padding: 10px 12px;
    }

    .poster-img { height: 300px; }
    .poster-headline { max-width: none; }
    .poster-sub { font-size: 14px; }

    .section-title { font-size: 22px; }
    .section-title.page-title { font-size: 26px; }

    .article-list-content { padding: 16px; }
    .article-list-title { font-size: 18px; }

    .pick-img, .pick-veil { height: 190px; }

    .rank-thumb { width: 40px; height: 40px; }
}