/* =====================================================
   Moban 8-10-5 — responsive.css
   ===================================================== */

/* ============ ≤1024px ============ */
@media (max-width: 1024px) {
    .games-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .stream-item {
        grid-template-columns: 56px 1fr 240px;
        gap: 22px;
    }

    .spread {
        gap: 32px;
        padding: 64px 24px;
    }
}

/* ============ ≤768px ============ */
@media (max-width: 768px) {
    :root {
        --header-h: 58px;
    }

    .spread {
        grid-template-columns: 1fr;
        padding: 56px 20px;
    }

    .spread > .spread-media,
    .spread > .spread-text,
    .spread-reverse > .spread-media,
    .spread-reverse > .spread-text {
        grid-area: auto;
    }

    .spread-text {
        margin-top: 8px;
    }

    .games-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }

    .stream-item {
        grid-template-columns: 48px 1fr;
    }

    .stream-thumb {
        grid-column: 2;
    }

    .stream-num {
        font-size: 30px;
    }

    .cover-caption {
        padding-bottom: 36px;
    }

    .strip-inner {
        justify-content: flex-start;
    }

    .fact {
        flex: 1 1 40%;
    }

    .inline-cta {
        flex-direction: column;
        align-items: flex-start;
    }

    .post-download-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .post-nav {
        grid-template-columns: 1fr;
    }

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

    .footer-widgets {
        grid-template-columns: 1fr 1fr;
    }

    .drawer-auth {
        flex-direction: column;
    }
}

/* ============ ≤480px ============ */
@media (max-width: 480px) {
    .editorial-col {
        padding: 0 16px;
    }

    .cover-img {
        height: 68vh;
    }

    .cover-title {
        font-size: clamp(32px, 10vw, 44px);
    }

    .games-grid {
        grid-template-columns: 1fr;
    }

    .stream-item {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 26px 0;
    }

    .stream-thumb {
        grid-column: 1;
    }

    .fact {
        flex: 1 1 100%;
    }

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

    .footer-widgets {
        grid-template-columns: 1fr;
    }

    .footer-nav {
        flex-direction: column;
        gap: 14px;
    }

    .btn-big {
        width: 100%;
        text-align: center;
    }
}