/* ============================================================
   文章目录 + 文章正文排版  —— marketing/articles/ 专用
   ============================================================
   为什么单独一个文件，而不是并进 style.css：
     style.css 是"营销页"的样式（Hero、套餐表、卡片网格……），
     而这里是"长文阅读"的排版（正文行宽、标题层级、代码块、表格、引用）。
     两者的关切完全不同，混在一起会让 style.css 越来越难读，
     而文章会一篇篇加，它只会更长。分开后：改文章排版不会碰到首页样式。

   页面引用顺序固定为：先 style.css（变量与基础），再 article.css（覆盖/补充）。
   ============================================================ */

/* ---------- 文章列表（articles/index.html） ---------- */
.article-list { display: grid; gap: 18px; }

.article-card {
  display: block;
  padding: 26px 28px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.article-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: #cfe0f5;
}
.article-card h3 { font-size: 21px; font-weight: 700; line-height: 1.45; margin-bottom: 10px; }
.article-card:hover h3 { color: var(--primary); }
.article-card .meta {
  display: flex; flex-wrap: wrap; gap: 14px;
  font-size: 13px; color: var(--muted); margin-bottom: 12px;
}
.article-card .summary { font-size: 15px; line-height: 1.8; color: var(--ink-2); }
.article-card .more { display: inline-block; margin-top: 14px; font-size: 14px; font-weight: 600; color: var(--primary); }

.article-tag {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600;
  background: var(--primary-light); color: var(--primary);
}

/* 一篇都没有时的占位（宁可显示这句话，也不要显示一个空白列表） */
.article-empty {
  text-align: center; padding: 56px 20px;
  border: 1px dashed var(--line); border-radius: var(--radius);
  color: var(--muted); font-size: 15px;
}

/* ---------- 文章正文（单篇） ---------- */
/* 正文宽度刻意收窄到 780px：中文长文超过这个宽度，眼睛回行会明显吃力。 */
.article-body {
  max-width: 780px; margin: 0 auto;
  font-size: 16.5px; line-height: 1.95; color: var(--ink-2);
}
.article-body > p:first-child { font-size: 17.5px; color: var(--ink); }

.article-body h2 {
  font-size: 24px; line-height: 1.5; color: var(--ink);
  margin: 42px 0 14px; padding-left: 13px;
  border-left: 4px solid var(--primary);
}
.article-body h3 { font-size: 19px; color: var(--ink); margin: 30px 0 10px; }
.article-body p { margin: 15px 0; }

/* 章节副标题：正文里紧跟 h2 的一句小字（如「受托材料 ≠ 自有材料」）。
   负上边距是为了把它"贴"到 h2 下面，读起来像标题的一部分，而不是另起一段。 */
.article-body .sub { margin: -6px 0 16px; font-size: 15px; color: var(--muted); }

/* ⚠️ style.css 里有一条全局 `ul { list-style: none; }`（导航/页脚要用它去掉圆点）。
   正文里的列表必须显式把项目符号加回来，否则文章会变成"一堆没有标记的缩进文字"。 */
.article-body ul, .article-body ol { margin: 15px 0 15px 24px; }
.article-body ul li { list-style: disc; margin: 9px 0; }
.article-body ol li { list-style: decimal; margin: 9px 0; }

.article-body strong { color: var(--ink); font-weight: 700; }
.article-body a { color: var(--primary); border-bottom: 1px solid rgba(10, 102, 194, .35); }
.article-body a:hover { border-bottom-color: var(--primary); }

.article-body blockquote {
  margin: 24px 0; padding: 14px 20px;
  background: var(--bg-soft);
  border-left: 4px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--ink-2);
}
.article-body blockquote p:first-child { margin-top: 0; }
.article-body blockquote p:last-child { margin-bottom: 0; }

.article-body code {
  padding: 1px 6px; font-size: .92em; border-radius: 6px;
  background: var(--bg-soft); border: 1px solid var(--line);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--ink);
  word-break: break-all;
}
.article-body pre {
  margin: 20px 0; padding: 16px 18px; overflow-x: auto;
  background: var(--bg-dark); color: #d7e2f0;
  border-radius: var(--radius-sm);
  font-size: 13.5px; line-height: 1.75;
}
.article-body pre code { background: none; border: none; padding: 0; color: inherit; word-break: normal; }

.article-body table { width: 100%; border-collapse: collapse; margin: 22px 0; font-size: 15px; }
.article-body th, .article-body td { border: 1px solid var(--line); padding: 10px 14px; text-align: left; }
.article-body th { background: var(--bg-soft); color: var(--ink); font-weight: 700; }
.article-body tr:hover td { background: #fbfdff; }

.article-body img { margin: 24px auto; border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.article-body hr { border: none; border-top: 1px solid var(--line); margin: 36px 0; }

/* 文章页头（比营销页 Hero 轻，重心让给正文） */
.article-header { max-width: 780px; margin: 0 auto; }
.article-header h1 { font-size: 32px; line-height: 1.4; font-weight: 800; color: var(--ink); margin-bottom: 14px; }
.article-header .meta {
  display: flex; flex-wrap: wrap; gap: 14px;
  font-size: 14px; color: var(--muted); padding-bottom: 20px; border-bottom: 1px solid var(--line);
}
.article-header .lede { margin-top: 20px; font-size: 17px; line-height: 1.9; color: var(--ink-2); }

/* 正文底部：返回与下一步 */
.article-foot {
  max-width: 780px; margin: 46px auto 0; padding-top: 22px;
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; align-items: center;
  font-size: 14px; color: var(--muted);
}

@media (max-width: 720px) {
  .article-body { font-size: 16px; }
  .article-body h2 { font-size: 21px; }
  .article-header h1 { font-size: 25px; }
  .article-card { padding: 20px; }
  .article-card h3 { font-size: 18px; }
}