/* ============================================================
   Moban 8-10-14 — responsive.css
   Breakpoints: 768px & 480px
   ============================================================ */

/* ---------- Tablet & below ---------- */
@media (max-width: 768px) {
    .container { padding: 0 16px; }

    .header-topbar-inner { justify-content: center; }
    .topbar-tag { display: none; }

    .pin-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 76px;
        gap: 14px;
    }
    .pin-tall { grid-row: span 5; }
    .pin-mid  { grid-row: span 4; }
    .pin-short{ grid-row: span 3; }

    .news-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .related-grid { grid-template-columns: repeat(2, 1fr); }

    .section-head { margin: 40px auto 26px; }
    .article-card { padding: 28px 24px; }
    .inline-dl-banner { flex-direction: column; text-align: center; }
    .faq-q { padding: 16px 18px; font-size: 15px; }
}

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

    .logo-img { max-height: 48px; }

    .pin-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: 80px;
    }
    .pin-tall { grid-row: span 4; }
    .pin-mid  { grid-row: span 4; }
    .pin-short{ grid-row: span 3; }
    .pin-title { font-size: 16px; }

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

    .cat-chip { padding: 7px 13px; font-size: 13px; }
    .btn { padding: 12px 22px; font-size: 14px; }

    .article-card { padding: 22px 18px; }
    .faq-a p { padding: 0 18px 16px; }
    .footer-widgets { gap: 20px; }
}