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

/* ---------- Tablet & below ---------- */
@media (max-width: 992px) {
    .content-layout {
        grid-template-columns: 1fr;
    }
    .content-main { grid-area: auto; grid-column: 1; grid-row: 1; }
    .content-sidebar { grid-area: auto; grid-column: 1; grid-row: 2; }
    .footer-widgets { grid-template-columns: 1fr; }
    .poster-grid { grid-template-columns: repeat(2, 1fr); }
    .news-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    /* Z-timeline becomes single-sided */
    .timeline-spine { left: 26px; margin-left: 0; }
    .tl-node,
    .tl-node.tl-right {
        grid-template-columns: 52px minmax(0, 1fr);
        margin-bottom: 40px;
    }
    .tl-dot { grid-area: auto; grid-column: 1; grid-row: 1; width: 44px; height: 44px; font-size: 14px; justify-self: start; margin-left: 4px; }
    .tl-card { grid-area: auto; grid-column: 2; grid-row: 1; }
    .tl-node.tl-left::before,
    .tl-node.tl-right::before { display: none; }
    .tl-card { grid-template-columns: 1fr; }
    .tl-media { aspect-ratio: 16 / 9; }
    .tl-img { min-height: 0; }
    .tl-body { padding: 20px; }

    .header-actions .btn-login { display: none; }
    .hero-inner { padding: 120px 20px 70px; }
    .poster-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
    .news-grid { grid-template-columns: 1fr; }
    .post-grid { grid-template-columns: 1fr; }
    .cta-panel { padding: 38px 30px; }
    .single-article { padding: 24px; }
    .page-hero { padding: 120px 0 48px; }
}

/* ---------- Mobile ---------- */
@media (max-width: 480px) {
    body { font-size: 15px; }
    .header-inner { min-height: 62px; }
    .logo-img { max-height: 38px; }
    .header-actions .btn { padding: 8px 14px; font-size: 12px; }
    .hero-title { font-size: 28px; }
    .hero-actions .btn { width: 100%; }
    .btn-xl { padding: 15px 28px; font-size: 16px; }
    .section-head { margin-bottom: 38px; }
    .tl-node,
    .tl-node.tl-right { grid-template-columns: 44px minmax(0, 1fr); }
    .tl-dot { width: 38px; height: 38px; font-size: 12px; }
    .timeline-spine { left: 22px; }
    .cta-panel { padding: 30px 22px; }
    .single-dl-box { flex-direction: column; align-items: flex-start; }
    .overlay-item a { font-size: 24px; }
}