/* ============================================================
   技术文章详情页样式（/tech/<slug>.html）
   2026-10-05 新增。配合模板 article.html；配色复用 style.css 变量。
   ============================================================ */

/* ---- 文章页头（深色，比栏目页横幅矮一档，突出标题与元信息） ---- */
.art-banner{position:relative;background:linear-gradient(135deg,#0c2146,#123463 60%,#1a4480);color:#fff;padding:60px 0 52px;overflow:hidden}
.art-banner::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(122,162,230,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(122,162,230,.09) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(ellipse,#000 20%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse,#000 20%,transparent 75%)}
.art-banner .container{position:relative;z-index:2;max-width:1180px}
.art-banner .crumb{font-size:13.5px;color:#b9cbe9}
.art-banner .crumb a{color:#b9cbe9;text-decoration:none}
.art-banner .crumb a:hover{color:#fff}
.art-banner h1{margin-top:18px;font-size:clamp(26px,3.4vw,38px);line-height:1.3;font-weight:800;max-width:880px}
.art-lead{margin-top:14px;color:#b9cbe9;font-size:15.5px;max-width:760px}
.art-meta{margin-top:22px;display:flex;gap:14px;align-items:center;flex-wrap:wrap;font-size:13px;color:#8ea8d4}
.art-meta .doc-tag{background:rgba(255,138,30,.16);color:#ffb066;border:1px solid rgba(255,138,30,.4);padding:3px 12px;border-radius:999px;font-size:12.5px}

/* ---- 正文 + 目录双栏 ---- */
.art-layout{display:grid;grid-template-columns:236px minmax(0,1fr);gap:56px;padding:56px 0 24px;max-width:1180px;margin:0 auto}
.art-toc{position:sticky;top:96px;align-self:start;font-size:13.5px}
.art-toc h4{font-size:12px;letter-spacing:.14em;color:#7c8aa5;margin-bottom:14px;font-weight:600}
.art-toc a{display:block;padding:6px 0 6px 12px;color:#43526e;text-decoration:none;border-left:2px solid #dde6f2;line-height:1.45}
.art-toc a:hover{color:#ff8a1e;border-left-color:#ff8a1e}

/* ---- 正文排版 ---- */
.art-body{font-size:16px;line-height:1.85;color:#1c2a44;min-width:0}
.art-body h2{font-size:24px;line-height:1.35;color:#0c2146;margin:52px 0 18px;padding-top:18px;border-top:1px solid #dde6f2;scroll-margin-top:96px}
.art-body h2:first-child,.art-body .art-key + h2{border-top:none;margin-top:0;padding-top:0}
.art-body h3{font-size:18.5px;color:#123463;margin:32px 0 12px}
.art-body p{margin:0 0 16px;color:#2b3a58}
.art-body ul,.art-body ol{margin:0 0 16px;padding-left:22px;color:#2b3a58}
.art-body li{margin-bottom:8px}
.art-body strong{color:#0c2146}
.art-body img{max-width:100%;border-radius:10px}

/* 结论卡片（橙色重点框） */
.art-key{background:linear-gradient(180deg,#fff7ee,#fffdf9);border:1px solid #ffd9ae;border-left:4px solid #ff8a1e;border-radius:10px;padding:22px 26px;margin:0 0 36px}
.art-key h3{margin:0 0 12px;font-size:16px;color:#b25f00;letter-spacing:.06em}
.art-key ol{margin:0;padding-left:22px}
.art-key li{margin-bottom:10px;line-height:1.75}
.art-key li:last-child{margin-bottom:0}

/* 金句引用块 */
.art-quote{font-size:17px;color:#0c2146;font-weight:600;border-left:4px solid #ff8a1e;background:#f3f7fc;border-radius:0 10px 10px 0;padding:16px 22px;margin:24px 0}

/* ---- 表格 ---- */
.tbl-wrap{overflow-x:auto;margin:20px 0 26px;border:1px solid #dde6f2;border-radius:12px;box-shadow:0 2px 10px rgba(12,33,70,.04)}
.art-body table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:560px;background:#fff}
.art-body th{background:#0c2146;color:#fff;font-weight:600;padding:12px 16px;text-align:left;white-space:nowrap}
.art-body td{padding:11px 16px;border-top:1px solid #eef3fa;color:#2b3a58;vertical-align:top}
.art-body tr:nth-child(even) td{background:#f8fbff}
.td-yes{color:#0e9f6e;font-weight:600}
.td-no{color:#d64545;font-weight:600}
.td-mid{color:#c07a00;font-weight:600}

/* ---- FAQ 折叠 ---- */
.faq-item{border:1px solid #dde6f2;border-radius:12px;margin-bottom:14px;background:#fff;overflow:hidden}
.faq-item summary{cursor:pointer;list-style:none;padding:16px 22px;font-weight:600;color:#0c2146;font-size:15.5px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";color:#ff8a1e;font-size:22px;font-weight:400;line-height:1;flex:none}
.faq-item[open] summary::after{content:"–"}
.faq-item .faq-a{padding:0 22px 18px;color:#43526e;font-size:15px;line-height:1.8}

/* ---- 文末导航 ---- */
.art-foot{margin-top:52px;padding-top:24px;border-top:1px solid #dde6f2;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:14px}
.art-foot a{color:#22569c;text-decoration:none;font-weight:600}
.art-foot a:hover{color:#ff8a1e}

/* ---- 相关阅读 ---- */
.related{background:#f3f7fc;padding:56px 0}
.related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px}
.rel-card{background:#fff;border:1px solid #dde6f2;border-radius:12px;padding:22px 24px;text-decoration:none;color:inherit;transition:.2s}
.rel-card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(12,33,70,.1)}
.rel-card h4{font-size:15.5px;color:#0c2146;line-height:1.5}
.rel-card span{display:block;margin-top:10px;font-size:12.5px;color:#7c8aa5}

/* ---- 移动端 ---- */
@media (max-width:960px){
  .art-layout{grid-template-columns:1fr;gap:8px;padding-top:40px}
  .art-toc{position:static;display:none}
  .art-banner{padding:44px 0 40px}
}