/* ============================================================
   MOBAN 8-10-18 — RESPONSIVE
   ============================================================ */

@media (max-width: 1024px) {
    .two-col-layout {
        grid-template-columns: minmax(0, 1fr);
    }

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

    .game-cell-a { min-height: 240px; }

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

@media (max-width: 768px) {
    .nav-toggle { display: block; margin-left: auto; }

    .header-inner { flex-wrap: wrap; }

    .main-nav {
        flex-basis: 100%;
        display: none;
        border-top: 1px solid var(--line-dark);
        padding-top: 12px;
    }

    .nav-open .main-nav { display: block; }

    .nav-menu { flex-direction: column; gap: 2px; }

    .nav-menu a { border: 1px solid var(--line-dark); }

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

    .tl-hero { padding-top: 44px; }

    .tl-node { flex: 0 0 168px; width: 168px; }

    .stream-link { flex-direction: column; gap: 12px; }

    .stream-thumb { flex: 0 0 auto; }

    .stream-thumb img { height: 180px; }

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

    .footer-widgets { grid-template-columns: minmax(0, 1fr); gap: 26px; }

    .post-detail, .page-body { padding: 22px; }

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

@media (max-width: 480px) {
    .header-actions { width: 100%; margin-left: 0; }

    .btn-login, .btn-register { flex: 1 1 auto; text-align: center; }

    .tl-hero-actions .btn { width: 100%; text-align: center; }

    .tl-node { flex: 0 0 148px; width: 148px; }

    .game-cell { min-height: 170px; }
    .game-cell-a { min-height: 220px; }

    .dl-strip { padding: 20px; }
    .dl-strip .btn { width: 100%; text-align: center; }

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

    .block-head { flex-direction: column; gap: 8px; align-items: flex-start; }

    .breadcrumb-list { font-size: 10px; }
}