/* ============================================================
   文章页独立样式 article.css
   ============================================================ */

.article-wrap{max-width:940px;margin-inline:auto}
.article-head{text-align:center;max-width:760px;margin:0 auto 44px}
.article-head .tag{background:var(--gold-100);color:var(--gold-600)}
.article-title{font-size:clamp(24px,3vw,34px);font-weight:900;color:var(--navy-900);line-height:1.45;margin-top:18px}
.article-meta{display:flex;justify-content:center;align-items:center;gap:22px;margin-top:20px;font-size:13px;color:var(--ink-400);flex-wrap:wrap}
.article-meta span{display:inline-flex;align-items:center;gap:7px}
.article-meta .fa-solid,.article-meta .fa-regular{color:var(--gold-400);font-size:12px}

.article-body{font-size:15.5px;color:var(--ink-700);line-height:2.05}
.article-body h2{font-size:22px;font-weight:900;color:var(--navy-900);margin:40px 0 16px;padding-left:16px;border-left:4px solid var(--gold-500)}
.article-body h3{font-size:18px;font-weight:800;color:var(--navy-900);margin:30px 0 12px}
.article-body p{margin-bottom:18px}
.article-body ul,.article-body ol{margin:0 0 20px;padding-left:0}
.article-body ul li{position:relative;padding-left:26px;margin-bottom:10px}
.article-body ul li::before{content:"\f0da";font-family:"Font Awesome 6 Free";font-weight:900;position:absolute;left:4px;top:2px;color:var(--gold-500);font-size:12px}
.article-body ol{counter-reset:art}
.article-body ol li{position:relative;padding-left:34px;margin-bottom:10px;counter-increment:art}
.article-body ol li::before{content:counter(art,decimal-leading-zero);position:absolute;left:0;top:2px;font-size:12px;font-weight:900;color:var(--gold-500);font-variant-numeric:tabular-nums}
.article-body blockquote{background:var(--bg-soft);border-left:4px solid var(--gold-400);border-radius:0 var(--radius-sm) var(--radius-sm) 0;padding:18px 24px;margin:24px 0;color:var(--ink-600);font-size:14.5px}
.article-body strong{color:var(--navy-900)}
.article-body a{color:var(--gold-600);font-weight:600;border-bottom:1px dashed var(--gold-300)}

/* 表格（tr/td 配色） */
.article-body .table-scroll{width:100%;overflow-x:auto;margin:26px 0}
.article-body table{width:100%;border-collapse:collapse;font-size:14px;line-height:1.8;color:var(--ink-700);min-width:520px}
.article-body thead th{background:linear-gradient(135deg,#0A2244,#12345F);color:#F2E5C4;font-weight:800;text-align:left;padding:12px 16px;border:1px solid #173C6E;white-space:nowrap}
.article-body tbody td{padding:11px 16px;border:1px solid #E4E8EE;vertical-align:top}
.article-body tbody tr:nth-child(odd){background:#F5F7FA}
.article-body tbody tr:nth-child(even){background:#FFFFFF}
.article-body tbody tr:hover{background:#FBF3E2}
.article-body table strong{color:var(--gold-600)}

.article-tags{display:flex;gap:10px;margin:40px 0 0;flex-wrap:wrap}
.article-tags .tag{background:var(--bg-soft);color:var(--ink-600)}

/* 上一篇 / 下一篇 */
.article-pager{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:46px}
.article-pager a{background:var(--bg-soft);border:1px solid var(--line-soft);border-radius:var(--radius-md);padding:18px 22px;transition:border-color .3s,background .3s,transform .3s}
.article-pager a:hover{border-color:var(--gold-300);background:#fff;transform:translateY(-3px)}
.article-pager small{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-400);margin-bottom:8px}
.article-pager small .fa-solid{color:var(--gold-500);font-size:11px}
.article-pager b{font-size:14.5px;font-weight:800;color:var(--navy-900);line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.article-pager a.next{text-align:right}
.article-pager a.next small{justify-content:flex-end}

/* 相关文章 */
.related-title{display:flex;align-items:center;gap:14px;font-size:20px;font-weight:900;color:var(--navy-900);margin-bottom:28px}
.related-title::after{content:"";flex:1;height:1px;background:var(--line)}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.related-card{background:#fff;border:1px solid var(--line-soft);border-radius:var(--radius-md);overflow:hidden;transition:transform .3s,box-shadow .3s}
.related-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.related-card .thumb{aspect-ratio:16/9;overflow:hidden}
.related-card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.related-card:hover .thumb img{transform:scale(1.05)}
.related-card .bd{padding:16px 18px 20px}
.related-card .bd b{font-size:14px;font-weight:800;color:var(--navy-900);line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:3.1em}
.related-card .bd small{display:block;margin-top:8px;font-size:12px;color:var(--ink-400)}

@media(max-width:640px){
  .article-pager{grid-template-columns:1fr}
  .related-grid{grid-template-columns:1fr}
  .article-meta{gap:12px}
}