/* ============================================================
   article.css — 文章内页专属样式（article.html 引用）
   依赖 all.css（公共基础），此处只保留文章页独有内容。
   ─────────────────────────────────────────────────────────
   ① 正文排版覆盖
   ② 文章 Hero（面包屑 / 标题 / 元信息）
   ③ 正文区（h2/h3/引用/列表/FAQ）
   ④ 相关文章
   ⑤ 文章页响应式
   ============================================================ */

/* ---------- ① 正文排版覆盖 ---------- */
body{line-height:1.8}

/* ---------- ② 文章 Hero ---------- */
.article-hero{background:var(--bg-dark);color:var(--text-light);padding:72px 0 56px;text-align:center;position:relative;overflow:hidden}
.article-hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(ellipse at 20% 0%,rgba(0,149,239,.15),transparent 50%)}
.article-hero.bg-article{background:var(--bg-dark) url('../images/hero-article.webp') center/cover no-repeat}
.article-hero.bg-article::before{background:linear-gradient(180deg,rgba(10,13,18,.45) 0%,rgba(10,13,18,.15) 55%,rgba(10,13,18,.08) 100%),radial-gradient(ellipse at 20% 0%,rgba(0,149,239,.12),transparent 50%)}
.article-hero .container{position:relative;z-index:2;max-width:1150px}
.article-hero .breadcrumb{font-size:13px;color:var(--text-muted);margin-bottom:20px}
.article-hero .breadcrumb a{color:var(--text-muted)}
.article-hero .breadcrumb a:hover{color:var(--accent)}
.article-hero h1{font-size:34px;font-weight:800;line-height:1.35;letter-spacing:-.5px;margin-bottom:16px}
.article-meta{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;font-size:13px;color:var(--text-muted)}
.article-meta span{display:inline-flex;align-items:center;gap:6px}

/* ---------- ③ 正文区 ---------- */
.article-body{background:var(--bg-white);max-width:1150px;margin:-24px auto 0;padding:48px 56px;border-radius:var(--radius-lg) var(--radius-lg) 0 0;position:relative;box-shadow:var(--shadow-sm)}
.article-body h2{font-size:24px;font-weight:700;margin:40px 0 16px;line-height:1.4}
.article-body h2:first-child{margin-top:0}
.article-body h3{font-size:18px;font-weight:700;margin:28px 0 12px}
.article-body p{margin-bottom:16px;color:var(--text-mid)}
.article-body strong{color:var(--text-dark)}
.article-body blockquote{border-left:4px solid var(--accent);background:var(--bg-light);padding:16px 20px;border-radius:0 var(--radius-md) var(--radius-md) 0;margin:20px 0;color:var(--text-mid)}
.article-body ul,.article-body ol{margin:0 0 16px 22px;color:var(--text-mid)}
.article-body li{margin-bottom:8px}
.article-body .faq-item{background:var(--bg-light);border-radius:var(--radius-md);padding:20px 24px;margin-bottom:14px}
.article-body .faq-item h3{margin-top:0}
.article-callout{background:linear-gradient(135deg,rgba(0,149,239,.08),rgba(0,114,206,.05));border:1px solid rgba(0,149,239,.2);border-radius:var(--radius-lg);padding:24px 28px;margin:28px 0}
.article-callout p{color:var(--text-mid);margin-bottom:8px}

/* ---------- ④ 相关文章 ---------- */
.related{padding:56px 0 72px}
.related h2{font-size:22px;text-align:center;margin-bottom:32px}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.related-card{background:var(--bg-white);border:1px solid var(--border-light);border-radius:var(--radius-lg);padding:24px;transition:all .3s var(--ease)}
.related-card:hover{box-shadow:var(--shadow-md);transform:translateY(-4px);border-color:var(--accent)}
.related-card .rc-cat{font-size:12px;font-weight:700;color:var(--accent);margin-bottom:8px}
.related-card h3{font-size:16px;line-height:1.5;margin-bottom:8px}
.related-card h3 a{color:var(--text-dark)}
.related-card h3 a:hover{color:var(--accent)}
.related-card p{font-size:13px;color:var(--text-mid)}

/* ---------- ⑤ 文章页响应式 ---------- */
@media(max-width:991px){
  .related-grid{grid-template-columns:1fr}
}
@media(max-width:575px){
  .article-hero{padding:52px 0 40px}
  .article-hero h1{font-size:24px}
  .article-body{padding:28px 22px;margin-top:-16px}
}