/* ============================================================
   国模约拍网 - 响应式样式
   断点：768px (tablet), 480px (phone)
   ============================================================ */

@media (max-width: 1024px) {
    .grid-4 { grid-template-columns: repeat(3, 1fr); }
    .footer-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    :root {
        --nav-height: 56px;
    }

    .container { padding: 0 16px; }

    /* Nav mobile */
    .nav-links {
        display: none;
        position: fixed;
        top: var(--nav-height);
        left: 0;
        right: 0;
        background: var(--color-bg);
        flex-direction: column;
        padding: 16px;
        border-bottom: 1px solid var(--color-border);
        box-shadow: var(--shadow-lg);
    }
    .nav-links.show { display: flex; }
    .nav-link { padding: 12px 16px; font-size: 16px; }
    .nav-toggle { display: flex; }

    /* Grid */
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .grid { gap: 16px; }

    /* Hero */
    .hero { padding: 48px 0 40px; }
    .hero-title { font-size: 28px; }
    .hero-subtitle { font-size: 15px; }
    .hero-actions { flex-direction: column; align-items: center; }

    /* Stats */
    .stats-row { gap: 24px; flex-wrap: wrap; }
    .stat-value { font-size: 22px; }

    /* Section */
    .section { padding: 32px 0; }
    .section-title { font-size: 18px; }

    /* Footer */
    .footer-grid { grid-template-columns: 1fr; gap: 24px; }

    /* Filters */
    .filters-bar { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 8px; }
    .filter-chip { flex-shrink: 0; }

    /* Toast */
    .toast-container { right: 16px; left: 16px; }
    .toast { min-width: auto; }
}

@media (max-width: 480px) {
    .grid-2 { grid-template-columns: 1fr; }
    .grid-3 { grid-template-columns: 1fr; }

    .btn { width: 100%; }
    .btn-sm { width: auto; }

    .hero-title { font-size: 24px; }

    .pagination { gap: 2px; }
    .page-btn, .page-num { min-width: 32px; height: 32px; font-size: 13px; }
}
