/* ================================================================================
 * 言店长官网「资讯」栏目样式(news.html 列表页 + news/*.html 文章页)
 * 仅资讯栏目使用,独立成文件避免改动 style.css(主页面零回归风险);
 * 设计 token(颜色变量/按钮/导航/页脚)全部复用 style.css,本文件只加栏目自身组件
 * 设计语言对齐 style.css 头部说明:白与 #f5f5f7 分区交替、22px 圆角灰底卡、无胶囊滥用
 * ================================================================================ */

/* ============ 资讯列表页头部(对齐 .hero 的浅色渐变起手) ============ */
.news-hero {
  padding: 120px 0 48px;
  background: linear-gradient(180deg, #fbfbfd 0%, #ffffff 100%);
  text-align: center;
}
.news-hero h1 { font-size: 44px; font-weight: 600; line-height: 1.18; }
.news-hero p { margin-top: 12px; font-size: 18px; color: var(--文字次); }

/* ============ 文章卡片网格(灰底分区 + 白卡,同 .feature-card 族) ============ */
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.news-card {
  display: flex; flex-direction: column;
  background: #FFFFFF; border-radius: 22px; padding: 26px 24px;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.news-card:hover {
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}
.news-card-日期 { font-size: 13px; color: var(--文字淡); margin-bottom: 10px; }
.news-card h2 { font-size: 17px; font-weight: 600; line-height: 1.5; color: var(--文字主); margin-bottom: 10px; }
.news-card p { font-size: 14px; color: var(--文字次); line-height: 1.6; flex: 1; }
.news-card-更多 { margin-top: 14px; font-size: 14px; font-weight: 600; color: var(--蓝); }

/* ============ 文章页正文(720px 单栏阅读宽度) ============ */
.article-wrap { max-width: 760px; margin: 0 auto; padding: 110px 22px 40px; }
.article-meta { font-size: 13px; color: var(--文字淡); margin-bottom: 18px; }
.article-wrap h1 { font-size: 32px; font-weight: 600; line-height: 1.35; margin-bottom: 26px; }
.article-body h2 { font-size: 24px; font-weight: 600; margin: 38px 0 14px; }
.article-body h3 { font-size: 18px; font-weight: 600; margin: 28px 0 10px; }
.article-body p { font-size: 16px; line-height: 1.8; color: var(--文字主); margin-bottom: 14px; }
.article-body ul { list-style: disc; padding-left: 24px; margin: 0 0 14px; }
.article-body li { font-size: 16px; line-height: 1.8; color: var(--文字主); margin-bottom: 6px; }
.article-body a { color: var(--蓝); }
.article-body a:hover { text-decoration: underline; }
.article-body strong { font-weight: 600; }
.article-注 { font-size: 13px; color: var(--文字淡); line-height: 1.7; }

/* 文内对照表(发丝线边框,灰表头,不做斑马纹) */
.article-body table {
  width: 100%; border-collapse: collapse; margin: 18px 0 22px;
  font-size: 14px;
}
.article-body th, .article-body td {
  border: 1px solid var(--发丝线); padding: 10px 12px; text-align: left; line-height: 1.6;
}
.article-body th { background: var(--页面底); font-weight: 600; white-space: nowrap; }
.article-body td { color: var(--文字次); }
.article-body td:first-child { color: var(--文字主); white-space: nowrap; }

/* 文末 CTA 卡(灰底圆角卡,同 .收尾cta 族) */
.article-cta {
  margin-top: 44px; background: var(--页面底); border-radius: 22px;
  padding: 34px 28px; text-align: center;
}
.article-cta h2 { font-size: 22px; font-weight: 600; margin-bottom: 8px; }
.article-cta p { font-size: 15px; color: var(--文字次); margin-bottom: 18px; }
.article-返回 { display: inline-block; margin-top: 28px; font-size: 14px; font-weight: 600; color: var(--蓝); }

/* ============ 响应式(对齐主页面移动端断点习惯) ============ */
@media (max-width: 900px) {
  .news-hero h1 { font-size: 32px; }
  .news-grid { grid-template-columns: 1fr; }
  .article-wrap { padding-top: 96px; }
  .article-wrap h1 { font-size: 26px; }
  .article-body h2 { font-size: 20px; }
}