/* ============================================================
   WDELE — Blog 前台样式(/blog 列表 / 分类 / 详情 + 文章正文排版)
   皮肤全走 tokens.css 变量(:root 一族),定稿只改 tokens 即全局生效;
   与本页复用的全局组件(.eyebrow/.sect/.sect-sub/.btn/.sec/.wrap)在 base.css。
   ============================================================ */

/* ---------- 列表/分类页头 ---------- */
.blog-head{padding:48px 0 6px}
.blog-head h1{max-width:840px}
.blog-head .sect-sub{max-width:780px;margin-top:18px}

/* ---------- 工具条:搜索 + 分类 chip ---------- */
.blog-listing{padding-top:36px}
.blog-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:40px}
.blog-search{display:flex;align-items:center;flex:1;min-width:260px;max-width:430px;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff;transition:border-color .18s,box-shadow .18s}
.blog-search:focus-within{border-color:var(--red);box-shadow:0 0 0 3px rgba(216,44,5,.12)}
.blog-search input{flex:1;min-width:0;padding:11px 14px;border:none;outline:none;background:transparent;font-size:14px}
.blog-search-btn{flex:none;align-self:stretch;display:grid;place-items:center;padding:0 15px;color:#fff;background:var(--red)}
.blog-search-btn:hover{background:var(--red-dark)}
.blog-search-btn svg{display:block}

.blog-chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:7px 15px;font-size:13.5px;font-weight:600;color:#475467;background:#fff;border:1px solid var(--line);border-radius:999px;transition:border-color .15s,color .15s,background .15s}
.chip:hover{border-color:var(--red);color:var(--red)}
.chip.is-cur{background:var(--red);border-color:var(--red);color:#fff}
.chip-n{font-size:11px;font-weight:700;line-height:1;padding:3px 7px;border-radius:999px;background:rgba(16,24,40,.07);color:var(--mut)}
.chip.is-cur .chip-n{background:rgba(255,255,255,.24);color:#fff}

/* ---------- 文章网格 & 卡 ---------- */
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:32px}
.blog-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s}
.blog-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-card-hover)}
.bc-media{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--bg-2)}
.bc-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.blog-card:hover .bc-media img{transform:scale(1.045)}
.bc-body{flex:1;display:flex;flex-direction:column;padding:22px 24px 24px}
.bc-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font-size:12.5px;color:var(--mut)}
.bc-meta time{white-space:nowrap}
.bc-cat{font-weight:700;color:var(--red)}
.bc-cat:hover{text-decoration:underline;text-underline-offset:2px}
.bc-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:12px 0 10px;font-size:21px;font-weight:800;line-height:1.32;color:var(--ink)}
.bc-title a{color:inherit}
.bc-title a:hover{color:var(--red)}
.bc-excerpt{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;color:#475467;font-size:15px;line-height:1.7}
.bc-more{margin-top:auto;padding-top:18px;display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:700;color:var(--red)}
.bc-more:hover{color:var(--red-dark)}
.bc-more span{transition:transform .18s}
.bc-more:hover span{transform:translateX(3px)}

/* ---------- 空态 / 分页 ---------- */
.blog-empty{padding:64px 0 72px;text-align:center;color:var(--mut);font-size:16px}
.blog-pager{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin-top:56px}
.pg{min-width:40px;height:40px;padding:0 11px;display:grid;place-items:center;font-size:14px;font-weight:600;color:#475467;background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);transition:border-color .15s,color .15s,background .15s}
a.pg:hover{border-color:var(--red);color:var(--red)}
.pg.cur{background:var(--red);border-color:var(--red);color:#fff;cursor:default}
.pg.is-off{color:#c3c9d3;cursor:default}
.pg.dots{border-color:transparent;min-width:auto;padding:0 4px}

/* ---------- 详情页头 ---------- */
.bdetail{padding-bottom:40px}
.bpost-head{padding-top:36px}
.bpost-head h1{max-width:900px}
.bmeta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:20px;font-size:13px;color:var(--mut)}
.bm-cat{font-weight:700;color:var(--red)}
.bm-cat:hover{text-decoration:underline;text-underline-offset:2px}
.bcover{margin-top:30px}
.bcover img{width:100%;max-height:520px;object-fit:cover;border-radius:var(--radius-lg)}

/* ---------- 正文双栏:目录(粘性) + 文章 ---------- */
.bpost{display:grid;grid-template-columns:238px minmax(0,1fr);gap:52px;align-items:start;margin-top:34px}
.btoc{position:sticky;top:calc(var(--header-height) + 22px);max-height:calc(100vh - var(--header-height) - 44px);overflow:auto;border-left:1px solid var(--line);padding:2px 0 8px 18px}
.btoc-h{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);margin-bottom:12px}
.btoc ol{list-style:none}
.btoc li{margin:0}
.btoc a{display:block;padding:5px 10px;border-left:2px solid transparent;margin-left:-2px;font-size:13.5px;line-height:1.45;color:#475467;transition:color .15s,border-color .15s}
.btoc a:hover{color:var(--ink)}
.btoc a.is-cur{color:var(--red);border-left-color:var(--red);font-weight:600}
.btoc ol ol{padding-left:14px}
.btoc li li a{font-size:13px}
.bmain{min-width:0}

/* ---------- Markdown 正文排版(全量定义,reset 已清空 UA 样式) ---------- */
.markdown-body{font-size:16.5px;line-height:1.85;color:#2c3240}
.markdown-body>*+*{margin-top:1.15em}
.markdown-body p{color:#2c3240}
.markdown-body h2,.markdown-body h3,.markdown-body h4{color:var(--ink);font-weight:800;letter-spacing:-.01em;line-height:1.25;margin:1.9em 0 .5em;scroll-margin-top:calc(var(--header-height) + 20px)}
.markdown-body h2:first-child,.markdown-body h3:first-child{margin-top:0}
.markdown-body h2{font-size:clamp(24px,2.4vw,30px);padding-bottom:.35em;border-bottom:1px solid var(--line)}
.markdown-body h3{font-size:21px}
.markdown-body h4{font-size:18px}
.markdown-body a{color:var(--red);text-decoration:underline;text-underline-offset:2px}
.markdown-body a:hover{color:var(--red-dark)}
.markdown-body ul,.markdown-body ol{padding-left:1.45em}
.markdown-body ul{list-style:disc}
.markdown-body ol{list-style:decimal}
.markdown-body li{margin:.4em 0}
.markdown-body li::marker{color:var(--red)}
.markdown-body strong{font-weight:700;color:var(--ink)}
.markdown-body em{font-style:italic}
.markdown-body code{font-family:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,monospace;font-size:.9em;background:#eef1f5;padding:.16em .42em;border-radius:4px;color:#d82c05}
.markdown-body pre{background:#0b1320;color:#e7eaf0;padding:18px 20px;border-radius:var(--radius-lg);overflow-x:auto;line-height:1.7;font-size:14px}
.markdown-body pre code{background:transparent;color:inherit;padding:0;font-size:inherit}
.markdown-body blockquote{margin:1.4em 0;padding:4px 0 4px 20px;border-left:3px solid var(--red);color:#475467;background:linear-gradient(90deg,rgba(216,44,5,.05),transparent)}
.markdown-body img{border-radius:var(--radius-md)}
.markdown-body hr{border:none;border-top:1px solid var(--line);margin:2.4em 0}
.markdown-body table{width:100%;font-size:.96em;border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden}
.markdown-body th,.markdown-body td{padding:10px 14px;border:1px solid var(--line);vertical-align:top}
.markdown-body th{background:var(--bg-2);font-weight:700;color:var(--ink);text-align:left}
.markdown-body caption{caption-side:bottom;font-size:12.5px;color:var(--mut);padding-top:8px}
.markdown-body iframe{max-width:100%}

/* ---------- 标签 ---------- */
.btags{display:flex;flex-wrap:wrap;gap:8px;margin-top:36px;padding-top:24px;border-top:1px solid var(--line)}
.btag{font-size:12.5px;font-weight:600;color:var(--mut);background:var(--bg-2);padding:5px 12px;border-radius:999px}

/* ---------- 相关文章 ---------- */
.blog-related{padding-bottom:110px}
.blog-related .blog-grid{margin-top:12px}

/* ---------- 底部询盘 CTA(深色收尾) ---------- */
.blog-cta{background:radial-gradient(1100px 500px at 50% -10%,rgba(216,44,5,.28),transparent 60%),linear-gradient(180deg,#101828,#0b1320);color:#fff;padding:104px 0;text-align:center}
.blog-cta h2{font-size:clamp(28px,3.2vw,42px);color:#fff;margin-top:14px}
.blog-cta .eyebrow{color:#ff8a66}
.blog-cta .eyebrow::before,.blog-cta .sec-head.center .eyebrow::after{background:#ff8a66}
.blog-cta-sub{max-width:620px;margin:18px auto 0;color:rgba(255,255,255,.78);font-size:17px;line-height:1.7}
.blog-cta-row{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin-top:34px}

/* ---------- 响应式 ---------- */
@media (max-width: 900px){
  .bpost{grid-template-columns:1fr;gap:0}
  .btoc{position:static;max-height:none;border-left:none;border-bottom:1px solid var(--line);margin-bottom:34px;padding:0 0 18px}
  .blog-toolbar{flex-direction:column;align-items:stretch}
  .blog-search{max-width:none}
}
@media (max-width: 640px){
  .blog-grid{gap:22px}
  .bc-body{padding:18px 18px 20px}
  .blog-cta{padding:76px 0}
}