/* ==========================================================================
   news.html 页面专属样式
   列表容器锚点 + 空状态 + 移动端微调
   （卡片 / Tab / 分页 等公共组件定义在 pages/pages.css）
   ========================================================================== */

/* --------------------------------------------------------------------------
   一、列表容器
   -------------------------------------------------------------------------- */
#news-root {
  /* 翻页后 scrollIntoView 回顶时，为 sticky 吸顶导航预留高度 */
  scroll-margin-top: 88px;
}

/* 卡片流容器：注入前预留高度，避免渲染完成时把下方板块下推（CLS）
   配图上线后卡片整体变高，各档位实测渲染高度（含余量）如下：
     1440 / 1200 / 1024px → 1480
      900px               → 1880
      768px               → 1830
      600px               → 3490
      430px               → 3000
      375px               → 2840
   注：切换栏目后条目减少，预留自动被实际内容取代，不影响版面。 */
.news-grid {
  min-height: 1480px;
}

/* --------------------------------------------------------------------------
   二、空状态
   -------------------------------------------------------------------------- */
.news-empty {
  padding: var(--space-8) 0;
  text-align: center;
  font-size: var(--fs-body);
  color: var(--color-text-muted);
}

.news-empty[hidden] {
  display: none;
}

/* --------------------------------------------------------------------------
   三、响应式
   断点由宽到窄排列：窄档规则写在后面，才能正确覆盖宽档。
   -------------------------------------------------------------------------- */

/* 1024–1199：两列布局，首条特稿占满两列 */
@media (max-width: 1199px) {
  .news-grid {
    min-height: 1480px;
  }
}

/* ≤1023：进入两列卡片流，条目换行增多 */
@media (max-width: 1023px) {
  #news-root {
    scroll-margin-top: 76px;
  }

  .news-grid {
    min-height: 1480px;
  }
}

@media (max-width: 900px) {
  .news-grid {
    min-height: 1880px;
  }
}

@media (max-width: 767px) {
  #news-root {
    scroll-margin-top: 68px;
  }

  .news-grid {
    gap: var(--space-2);
    min-height: 1830px;
  }

  .news-empty {
    padding: var(--space-6) 0;
  }
}

/* 单列窄屏：卡片纵向堆叠，高度显著增加 */
@media (max-width: 640px) {
  .news-grid {
    min-height: 3490px;
  }
}

@media (max-width: 460px) {
  .news-grid {
    min-height: 3000px;
  }
}

@media (max-width: 390px) {
  .news-grid {
    min-height: 2840px;
  }
}