/* ===== 51吃瓜网 响应式样式 ===== */

/* ===== 1440px 及以上 ===== */
@media (min-width: 1440px) {
  .container { max-width: 1280px; }
  .card-grid { grid-template-columns: repeat(5, 1fr); }
}

/* ===== 1024px - 1199px ===== */
@media (max-width: 1199px) {
  .card-grid { grid-template-columns: repeat(3, 1fr); }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .text-list { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1.5fr 1fr 1fr; }
  .footer-top .footer-col:nth-child(4) { display: none; }
}

/* ===== 768px - 1023px ===== */
@media (max-width: 1023px) {
  :root { --container-width: 100%; }
  .container { padding: 0 16px; }

  /* 顶部栏 */
  .top-bar-left .top-bar-date { display: none; }

  /* 头部 */
  .header-main { flex-wrap: wrap; gap: 14px; }
  .search-box { order: 3; max-width: 100%; flex-basis: 100%; }
  .quick-links { display: none; }

  /* 导航 */
  .menu-toggle { display: block; }
  .main-nav { display: none; position: fixed; top: 0; right: -100%; width: 280px; height: 100vh; background: #fff; box-shadow: -4px 0 20px rgba(0,0,0,0.15); z-index: 999; transition: right 0.3s ease; overflow-y: auto; }
  .main-nav.open { display: block; right: 0; }
  .main-nav ul { flex-direction: column; }
  .main-nav li { border-bottom: 1px solid var(--border-color); }
  .main-nav a { color: var(--heading-color); padding: 16px 20px; }
  .main-nav a:hover, .main-nav a.active { background: var(--section-background); color: var(--primary-color); }
  .main-nav a::after { display: none; }

  /* 遮罩 */
  .nav-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); z-index: 998; }
  .nav-overlay.show { display: block; }

  /* 热点头条 */
  .hero-area { grid-template-columns: 1fr; }
  .hero-main { aspect-ratio: 16/9; }
  .hero-side { flex-direction: row; flex-wrap: wrap; }
  .hero-side-item { flex: 1 1 calc(50% - 5px); }

  /* 焦点区 */
  .focus-area { grid-template-columns: 1fr; }

  /* 卡片网格 */
  .card-grid { grid-template-columns: repeat(2, 1fr); }

  /* 大图文卡片 */
  .feature-grid { grid-template-columns: repeat(2, 1fr); }

  /* 网络热点 */
  .topic-area { grid-template-columns: 1fr; }
  .tag-cloud { margin-bottom: 16px; }

  /* 排行榜 */
  .rank-box { padding: 14px; }

  /* 列表页 */
  .list-layout { grid-template-columns: 1fr; }
  .sidebar { display: none; }

  /* 详情页 */
  .detail-layout { grid-template-columns: 1fr; }
  .related-grid { grid-template-columns: repeat(2, 1fr); }

  /* 页脚 */
  .footer-top { grid-template-columns: 1fr 1fr; gap: 24px; }
  .footer-top .footer-col:nth-child(4) { display: block; }
}

/* ===== 430px 及以下 ===== */
@media (max-width: 430px) {
  body { font-size: 14px; }
  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.2rem; }
  .container { padding: 0 12px; }

  /* 顶部栏 */
  .top-bar .container { height: 32px; font-size: 0.75rem; }
  .top-bar-left { gap: 10px; }
  .top-bar-right { gap: 8px; }

  /* Logo */
  .logo-mark { width: 36px; height: 36px; font-size: 0.95rem; }
  .logo-text { font-size: 1.25rem; }

  /* 搜索框 */
  .search-box input { height: 38px; font-size: 0.85rem; }
  .search-box button { height: 38px; padding: 0 16px; font-size: 0.85rem; }

  /* 热点头条 */
  .hero-main h2 { font-size: 1.15rem; }
  .hero-main p { display: none; }
  .hero-side { flex-direction: column; flex-wrap: nowrap; width: 100%; }
  .hero-side-item { flex: 0 0 auto; width: 100%; min-width: 0; }
  .hero-side-item .rank { font-size: 0.95rem; }
  .hero-side-item h3 { font-size: 0.88rem; }

  /* 焦点区 */
  .focus-main { aspect-ratio: 16/10; }
  .focus-main h3 { font-size: 1rem; }
  .focus-list-item .num { width: 20px; height: 20px; font-size: 0.72rem; }
  .focus-list-item h3 { font-size: 0.88rem; }

  /* 卡片网格 */
  .card-grid { grid-template-columns: 1fr; }
  .card-body { padding: 12px; }
  .card-body h3 { font-size: 0.95rem; }
  .card-body p { font-size: 0.82rem; }

  /* 大图文卡片 */
  .feature-grid { grid-template-columns: 1fr; }
  .feature-card { aspect-ratio: 16/10; }
  .feature-card h3 { font-size: 0.95rem; }

  /* 文字列表 */
  .text-list li a { font-size: 0.88rem; }
  .text-list li .date { display: none; }

  /* 网络热点 */
  .topic-item { flex-direction: column; }
  .topic-item img { width: 100%; height: auto; aspect-ratio: 16/9; }
  .topic-item .info h3 { font-size: 0.95rem; }

  /* 排行榜 */
  .rank-box { padding: 14px; }
  .rank-box .rank-list li a { font-size: 0.88rem; }

  /* 列表页 */
  .article-item { flex-direction: column; padding: 14px; }
  .article-item .thumb { width: 100%; }
  .article-item h3 { font-size: 1rem; }

  /* 详情页 */
  .article-detail h1 { font-size: 1.35rem; }
  .article-content { font-size: 0.95rem; }
  .article-content h2 { font-size: 1.1rem; }
  .prev-next { grid-template-columns: 1fr; }
  .related-grid { grid-template-columns: 1fr; }

  /* 单页 */
  .single-page h1 { font-size: 1.35rem; }

  /* 搜索 */
  .search-header .search-box-large input { height: 42px; font-size: 0.9rem; }
  .search-header .search-box-large button { height: 42px; padding: 0 18px; }

  /* 404 */
  .error-page h1 { font-size: 2.2rem; }
  .error-page .btn { padding: 10px 22px; font-size: 0.88rem; }

  /* 分页 */
  .pagination a, .pagination span { min-width: 34px; height: 34px; font-size: 0.82rem; padding: 0 8px; }

  /* 页脚 */
  .footer-top { grid-template-columns: 1fr; gap: 20px; text-align: center; }
  .footer-brand .logo { justify-content: center; }
  .footer-bottom { font-size: 0.78rem; }
}

/* ===== 375px 及以下 ===== */
@media (max-width: 375px) {
  .container { padding: 0 10px; }
  .logo-mark { width: 32px; height: 32px; font-size: 0.85rem; }
  .logo-text { font-size: 1.1rem; }
  .hero-main h2 { font-size: 1rem; }
  .section-title h2 { font-size: 1.1rem; }
  .card-body h3 { font-size: 0.9rem; }
}

/* ===== 320px 及以下 ===== */
@media (max-width: 320px) {
  body { font-size: 13px; }
  .container { padding: 0 8px; }
  .logo-mark { width: 30px; height: 30px; font-size: 0.8rem; }
  .logo-text { font-size: 1rem; }
  .top-bar { font-size: 0.7rem; }
  .top-bar-left { gap: 6px; }
  .top-bar-right { gap: 6px; }
  .hero-main h2 { font-size: 0.95rem; }
  .section-title h2 { font-size: 1rem; }
  h1 { font-size: 1.3rem; }
  h2 { font-size: 1.05rem; }
  .error-page h1 { font-size: 1.8rem; }
}