/* =============================================================
   适用：eyys.hl.cn 的 news/*.html
   风格：工业硬朗方格风 Industrial Brutalist（文章版式）
   说明：本文件只负责文章页专属组件，基础框架见 assets/style.css
   ============================================================= */

.article-card{
  background:var(--white);
  border:var(--bw) solid var(--ink);
  box-shadow:var(--hard);
  padding:30px 34px 34px;
  min-width:0;
}

/* 导语：黑底黄字硬块 */
.article-lead{
  background:var(--ink);
  color:var(--paper);
  border:var(--bw) solid var(--ink);
  box-shadow:var(--hard-sm);
  padding:18px 20px;
  margin:0 0 26px;
  font-size:17px;
  font-weight:700;
  line-height:1.8;
}
.article-lead strong{background:var(--brand);color:var(--ink);padding:0 5px}

/* 正文容器 */
.article-card .prose{max-width:none}
.article-card .prose h2{
  font-size:21px;
  margin:36px 0 16px;
  padding:9px 14px;
  background:var(--brand);
  color:var(--ink);
  border:var(--bw) solid var(--ink);
  box-shadow:var(--hard-xs);
  letter-spacing:.03em;
}
.article-card .prose h2:first-child{margin-top:0}
.article-card .prose h3{
  font-size:17px;margin:24px 0 10px;
  border-left:9px solid var(--ink);padding-left:11px;
}
.article-card .prose p{font-size:16px;line-height:1.9}
.article-card .prose ul li,
.article-card .prose ol li{margin-bottom:.5em;line-height:1.85}
.article-card .prose ul{padding-left:1.15em}
.article-card .prose ul > li::marker{content:"■ "}
.article-card .prose ol{padding-left:1.4em}
.article-card .prose strong{background:var(--brand);padding:0 4px}
.article-card .prose a{border-bottom:var(--bw2) solid var(--ink);text-decoration:none;font-weight:800}
.article-card .prose a:hover{background:var(--brand)}

/* 数据方格条 */
.article-card .stat-row{
  display:grid;grid-template-columns:repeat(3,1fr);
  border:var(--bw) solid var(--ink);margin:20px 0;background:var(--white);
}
.article-card .stat-row div{padding:14px 12px;border-right:var(--bw) solid var(--ink);text-align:center}
.article-card .stat-row div:last-child{border-right:0}
.article-card .stat-row b{display:block;font-size:24px;font-weight:900;line-height:1.3}
.article-card .stat-row span{font-size:12px;font-weight:800;letter-spacing:.08em;color:var(--grey)}

/* 提示框 */
.callout{
  background:var(--paper);
  border:var(--bw) solid var(--ink);
  border-left:14px solid var(--accent);
  box-shadow:var(--hard-sm);
  padding:16px 18px;margin:20px 0;
}
.callout p{margin:0;font-size:15px;font-weight:700}
.callout p + p{margin-top:8px}
.callout.note{border-left-color:var(--brand)}
.callout.warn{border-left-color:var(--accent);background:#FFF4EF}

/* 检查清单 */
.checklist{list-style:none;margin:16px 0;padding:0}
.checklist li{
  border:var(--bw2) solid var(--ink);
  background:var(--white);
  padding:11px 14px;margin-bottom:10px;
  font-size:15px;font-weight:700;
  box-shadow:var(--hard-xs);
}
.checklist li::before{content:"□ ";font-weight:900}

/* FAQ（文章内） */
.article-card .faq{margin:16px 0 0}

/* 标签区 */
.article-tags{display:flex;flex-wrap:wrap;gap:9px;margin:28px 0 0;padding-top:20px;border-top:var(--bw) solid var(--ink)}
.article-tags a{
  border:var(--bw2) solid var(--ink);
  background:var(--paper);
  padding:6px 12px;font-size:13px;font-weight:900;letter-spacing:.06em;
  text-decoration:none;box-shadow:var(--hard-xs);
}
.article-tags a:hover{background:var(--brand)}

/* 相关文章 */
.related{margin-top:28px;border-top:var(--bw) solid var(--ink);padding-top:22px}
.related h2{
  font-size:15px;letter-spacing:.18em;text-transform:uppercase;
  background:var(--ink);color:var(--brand);display:inline-block;padding:6px 12px;margin-bottom:14px;
}
.related-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.related-list li{margin:0}
.related-list a{
  display:block;border:var(--bw) solid var(--ink);background:var(--white);
  padding:13px 15px;font-size:15px;font-weight:800;text-decoration:none;
  box-shadow:var(--hard-xs);
}
.related-list a:hover{background:var(--brand)}
.related-list span{display:block;font-size:12px;font-weight:800;color:var(--grey);margin-top:4px}

/* 侧栏目录 */
.toc-list{list-style:none;margin:0;padding:8px 0;counter-reset:toc}
.toc-list li{margin:0;counter-increment:toc}
.toc-list a{
  display:block;padding:8px 16px;font-size:14px;font-weight:700;text-decoration:none;
  border-bottom:var(--bw2) dashed rgba(10,10,10,.2);
}
.toc-list li:last-child a{border-bottom:0}
.toc-list a::before{
  content:counter(toc,decimal-leading-zero);
  display:inline-block;min-width:30px;font-weight:900;color:var(--accent);
}
.toc-list a:hover{background:var(--brand)}

@media (max-width:760px){
  .article-card{padding:20px 16px 24px;box-shadow:var(--hard-sm)}
  .article-lead{font-size:16px;padding:15px 16px}
  .article-card .stat-row{grid-template-columns:1fr}
  .article-card .stat-row div{border-right:0;border-bottom:var(--bw) solid var(--ink)}
  .article-card .stat-row div:last-child{border-bottom:0}
  .related-list{grid-template-columns:1fr}
}