/* =====================================================================
   麻豆日本社区官网 - 响应式样式
   域名：mlnhh.cn
   ===================================================================== */

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

@media (max-width: 768px) {
    :root { --header-h: 58px; }

    .search-box { display: none; }

    .main-nav {
        display: none; position: fixed; top: var(--header-h); left: 0; right: 0;
        background: var(--bg-white); border-top: 1px solid var(--border);
        box-shadow: 0 8px 24px rgba(0,0,0,0.1); z-index: 999;
        max-height: calc(100vh - var(--header-h)); overflow-y: auto;
    }
    .main-nav.active { display: block; }
    .main-nav ul { flex-direction: column; padding: 12px 0; gap: 0; }
    .main-nav a { padding: 12px 24px; border-bottom: 1px solid var(--border); border-radius: 0; }

    .mobile-toggle { display: flex; }
    .mobile-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
    .mobile-toggle.active span:nth-child(2) { opacity: 0; }
    .mobile-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

    .hero-banner { padding: 40px 0; }
    .hero-banner h2 { font-size: 1.6rem; }
    .hero-banner p { font-size: 0.95rem; }

    .page-hero { padding: 36px 0; }
    .page-hero h2 { font-size: 1.5rem; }

    .section { padding: 36px 0; }
    .section-title { font-size: 1.4rem; }

    .video-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
    .category-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
    .ai-grid { grid-template-columns: 1fr; }
    .review-grid { grid-template-columns: 1fr; }
    .expert-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

    .footer-grid { grid-template-columns: 1fr; gap: 24px; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
    .container { padding: 0 14px; }
    .hero-banner h2 { font-size: 1.3rem; }
    .video-grid { grid-template-columns: 1fr; }
    .category-grid { grid-template-columns: repeat(2, 1fr); }
    .btn { padding: 10px 20px; font-size: 14px; }
    .stat-number { font-size: 1.5rem; }
    .stats-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
}