/* ============================================================
   Moban 8-10-35 - responsive.css
   ============================================================ */

/* ---------- Tablet / narrow desktop ---------- */
@media (max-width: 768px) {
    .hero-card {
        grid-template-columns: 1fr;
        padding: 26px 22px;
    }

    .hero-content,
    .hero-visual {
        grid-area: auto;
    }

    .hero-img {
        transform: rotate(0);
        max-width: 420px;
    }

    .download-card {
        grid-template-columns: 1fr;
        padding: 26px 22px;
    }

    .download-body,
    .download-visual {
        grid-area: auto;
    }

    .download-img {
        transform: rotate(0);
        max-width: 380px;
    }

    .card-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 12px;
    }

    .app-tab {
        font-size: 13px;
        padding: 10px 14px;
    }

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

    .float-dock {
        width: 100%;
    }

    .dock-label {
        max-width: 62px;
    }
}

/* ---------- Small phones ---------- */
@media (max-width: 480px) {
    body {
        padding-bottom: 96px;
    }

    .container {
        padding: 0 12px;
    }

    .hero-card {
        padding: 22px 18px;
    }

    .hero-stats {
        gap: 16px;
    }

    .hero-stat strong {
        font-size: 17px;
    }

    .btn-lg {
        padding: 12px 20px;
        font-size: 14px;
    }

    .btn-xl {
        padding: 14px 26px;
        font-size: 15px;
    }

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

    .rail-card {
        flex-basis: 116px;
    }

    .article-list-thumb {
        flex-basis: 92px;
        height: 76px;
    }

    .article-list-title {
        font-size: 14px;
    }

    .article-list-excerpt {
        display: none;
    }

    .post-card {
        padding: 20px 16px;
    }

    .post-nav {
        flex-direction: column;
    }

    .topbar-actions {
        gap: 6px;
    }

    .chip-btn {
        padding: 7px 12px;
        font-size: 12px;
    }

    .dock-icon {
        font-size: 18px;
    }

    .dock-label {
        font-size: 9px;
        max-width: 54px;
    }
}