/* ============================================
   餐饮界 - 响应式样式
   ============================================ */

@media (max-width: 1024px) {
    .hero-grid { grid-template-columns: 1fr; }
    .hero-sidebar { display: none; }
    .article-grid { grid-template-columns: repeat(2, 1fr); }
    .brands-grid .brand-item { width: calc(25% - 12px); }
    .books-grid { grid-template-columns: repeat(2, 1fr); }
    .page-layout { grid-template-columns: 1fr; }
    .page-sidebar { position: static; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .book-detail-grid { grid-template-columns: 1fr; }
    .book-detail-cover { max-width: 300px; }
}

@media (max-width: 768px) {
    .header-top { display: none; }
    .main-nav { display: none; }
    .mobile-menu-btn { display: flex; }
    .mobile-nav-overlay.active { display: block; }
    .mobile-nav.active { display: flex; right: 0; }

    .hero-carousel { height: 280px; }
    .carousel-title { font-size: 16px; }
    .carousel-image { min-height: 180px; }
    .carousel-btn { width: 36px; height: 36px; font-size: 22px; }

    .article-grid { grid-template-columns: 1fr; }
    .ali-link { flex-direction: column; }
    .ali-image { width: 100%; min-height: 160px; }
    .ali-body { padding: 16px; }

    .article-header h1 { font-size: 22px; }

    .brands-grid .brand-item { width: calc(33.33% - 12px); }
    .brands-page-grid { grid-template-columns: repeat(2, 1fr); }
    .brand-header { flex-direction: column; text-align: center; }

    .books-grid { grid-template-columns: 1fr 1fr; }
    .book-detail-grid { grid-template-columns: 1fr; }

    .footer-grid { grid-template-columns: 1fr; gap: 20px; }
    .footer-col { text-align: center; }
    .footer-logo, .footer-social { justify-content: center; }

    .tags-cloud { gap: 8px; }
    .tag-item { font-size: 12px; padding: 4px 12px; }

    .quick-news-item { flex-direction: column; gap: 8px; }
    .qn-time-badge { min-width: auto; }

    .article-detail { padding: 0; }

    .section-title-bar h3, .section-title-bar h2 { font-size: 18px; }
}

@media (max-width: 480px) {
    .container { padding: 0 12px; }
    .books-grid { grid-template-columns: 1fr; }
    .brands-page-grid { grid-template-columns: 1fr 1fr; }
    .brands-grid .brand-item { width: calc(50% - 8px); }
    .pagination a, .pagination span { padding: 6px 10px; font-size: 13px; }
    .article-meta-bar, .ali-meta { gap: 8px; }
}