/* ============================================================
 * common.css — 全站统一布局与排版（在 site.css 之后引入）
 * 目标：消除各页容器宽度(820/860/1100px)、footer 样式、主题脚本的差异
 * ============================================================ */

:root {
  /* 统一内容最大宽度（覆盖 news-detail.css 的 820px / about 的 860px 等） */
  --page-width: 1000px;
  --section-gap: 2.5rem;
}

/* ---------- 统一内容容器宽度 ---------- */
/* 仅约束 max-width 与水平居中，不触碰 padding（细节由各页 CSS 保留） */
.wrap,
.about-wrap,
.page-wrap {
  max-width: var(--page-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ---------- 统一区块间距 / 页面标题 ----------
   注意：仅覆盖上下间距，左右必须保留 auto，否则会覆盖 site.css 中
   .section 的 `margin:0 auto`，导致 1400px 内容块被钉在左侧（左对齐没居中）。 */
.section {
  margin: var(--section-gap) auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.page-title {
  font-size: 1.8rem;
  line-height: 1.3;
  margin: 0 0 0.5rem;
}
.page-sub {
  color: var(--text-secondary);
  margin-bottom: 2rem;
}

/* ---------- footer 样式统一交由 site.css 的 .footer / .footer-content / .footer-section
   负责（即优化前的原始四列富样式），此处不再兜底，避免覆盖原始设计。 ---------- */

/* ---------- 首页内容对齐 ----------
   首页的 .hero 为通栏、两个 .section 默认 1400px，而页面自身的页脚(.foot-inner)、
   SEO 区均为 1100px 居中。大屏下正文比页脚更宽、与周边 chrome 不对齐，显得“未居中”。
   这里把首页正文统一收束到 1100px 居中列，与页脚/SEO 区对齐。 */
#page-home .section {
  max-width: 1100px;
}
/* 10 个分类卡在 1100px 下列为 5 列，正好两行铺满，避免最后一行出现孤卡 */
#page-home .categories-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}