/* ==========================================================================
   博客 · 列表页与正文排版
   只定义 base.css 没有的东西；配色、字体、圆角、动效全部复用 base.css 的 token。
   ========================================================================== */

/* 正文宽度：中文正文一行 36~40 字最好读，再宽眼睛要来回扫 */
.wrap-narrow{max-width:760px}
@media (min-width:1600px){.wrap-narrow{max-width:820px}}

/* 列表页的 hero 比首页矮一截：这里的主角是文章列表，不是特效 */
.hero-short{min-height:clamp(380px,46vh,520px)}

/* ---------------- 列表页 ---------------- */
.blist{display:grid;gap:22px;grid-template-columns:repeat(3,minmax(0,1fr))}
.bcard{
  display:flex;flex-direction:column;
  border-radius:var(--r-card);overflow:hidden;
  border:1px solid var(--line);background:var(--surface-solid);
  transition:transform var(--t-panel) var(--e-out),
             border-color var(--t-panel) var(--e-out),
             box-shadow var(--t-panel) var(--e-out);
}
.bcard:hover{transform:translateY(-6px);border-color:rgba(56,189,248,.45);
  box-shadow:0 26px 60px rgba(0,0,0,.5);text-decoration:none}
.bc-cover{position:relative;aspect-ratio:16/9;overflow:hidden;background:#070B15;flex:none}
.bc-cover img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 620ms var(--e-out)}
.bcard:hover .bc-cover img{transform:scale(1.04)}
/* 封面下缘压暗，和下面的文字区接上，不出现硬边 */
.bc-cover::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 62%,rgba(5,8,19,.55) 100%)}
.bc-cover-none{background:linear-gradient(140deg,rgba(10,132,255,.14),rgba(13,22,38,.9))}
.bc-body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:9px;flex:1}
.bc-meta{font-size:11.5px;letter-spacing:.06em;color:var(--muted)}
.bc-title{font-size:19px;line-height:1.45;font-weight:800;color:#fff;margin:0}
.bcard:hover .bc-title{color:var(--cyan)}
.bc-sum{font-size:13.5px;line-height:1.8;color:var(--body);margin:0;flex:1}
.bcard .tags{margin-top:4px}
@media (max-width:1100px){.blist{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.blist{grid-template-columns:1fr}}

/* ---------------- 正文页 ---------------- */
.bp{padding-top:calc(var(--nav-h) + clamp(40px,6vw,76px))}
.bp-head{padding-bottom:clamp(26px,4vw,40px)}
.bp-head .h1{margin-top:16px;line-height:1.3}
.bp-head .lead{margin-top:18px}
.bp-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px;
  margin-top:22px;padding-top:18px;border-top:1px solid var(--line);
}
.bp-meta .mono{font-size:12.5px;color:var(--muted);letter-spacing:.04em}

.bp-cover{margin:0 0 clamp(26px,4vw,40px);border-radius:var(--r-card);
  overflow:hidden;border:1px solid var(--line);background:#070B15}
.bp-cover img{width:100%;height:auto;display:block}

/* ---------------- 正文排版 ----------------
   行高 1.95 比站内其它地方松：这是长文，不是卡片文案。 */
.bp-body{font-size:16.5px;line-height:1.95;color:var(--body)}
.bp-body > *:first-child{margin-top:0}

.bp-body h2{
  font-size:clamp(23px,2.4vw,29px);line-height:1.4;font-weight:800;color:#fff;
  margin:clamp(48px,5vw,64px) 0 18px;padding-top:clamp(20px,2.4vw,28px);
  border-top:1px solid var(--line);
}
/* 章节号前的短横，和站内 .eyebrow 的装饰线同一语言 */
.bp-body h2::before{
  content:"";display:block;width:34px;height:2px;border-radius:2px;margin-bottom:14px;
  background:linear-gradient(90deg,var(--signal),var(--cyan));
}
.bp-body h3{font-size:clamp(18px,1.7vw,21px);line-height:1.5;font-weight:700;
  color:var(--text);margin:36px 0 12px}
.bp-body h4{font-size:16.5px;font-weight:700;color:var(--text);margin:28px 0 10px}

.bp-body p{margin:0 0 20px}
.bp-body strong{color:#fff;font-weight:700}
.bp-body em{color:var(--cyan);font-style:normal}
.bp-body a{color:var(--signal);text-decoration:none;
  border-bottom:1px solid rgba(10,132,255,.4)}
.bp-body a:hover{color:var(--cyan);border-bottom-color:var(--cyan);text-decoration:none}

.bp-body ul,.bp-body ol{margin:0 0 20px;padding-left:1.4em}
.bp-body li{margin:0 0 10px}
.bp-body li::marker{color:var(--signal)}

.bp-body blockquote{
  margin:28px 0;padding:18px 22px;
  border-left:3px solid var(--signal);border-radius:0 var(--r-md) var(--r-md) 0;
  background:var(--signal-tint);color:var(--text);font-size:16px;
}
.bp-body blockquote p:last-child{margin-bottom:0}

.bp-body hr{border:0;border-top:1px solid var(--line);margin:40px 0}

.bp-body code{
  font-family:var(--f-mono);font-size:.88em;
  padding:2px 6px;border-radius:var(--r-xs);
  background:rgba(255,255,255,.06);color:var(--cyan);
}
.bp-body pre{
  margin:26px 0;padding:20px 22px;overflow-x:auto;
  border-radius:var(--r-md);border:1px solid var(--line);
  background:rgba(5,8,19,.72);
}
.bp-body pre code{background:none;padding:0;color:var(--body);font-size:13px;line-height:1.75}

/* 表格宽了要能自己横向滚，不能把整页撑出横向滚动条 */
.bp-body table{width:100%;border-collapse:collapse;margin:26px 0;font-size:14.5px}
.bp-body thead th{
  text-align:left;font-weight:700;color:#fff;padding:12px 14px;
  background:rgba(20,32,51,.9);border-bottom:1px solid var(--line-strong);
}
.bp-body td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.bp-body tbody tr:nth-child(even){background:rgba(255,255,255,.025)}

/* ---------------- 正文插图 ---------------- */
.bp-fig{margin:clamp(30px,4vw,42px) 0}
.bp-fig img{
  width:100%;height:auto;display:block;
  border-radius:var(--r-card);border:1px solid var(--line);background:#070B15;
}
.bp-fig figcaption{
  margin-top:12px;padding-left:14px;
  border-left:2px solid var(--line-strong);
  font-size:12.5px;line-height:1.75;color:var(--muted);
}

/* ---------------- 文末 ---------------- */
.bp-foot{
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;
  margin-top:clamp(50px,6vw,72px);padding-top:30px;border-top:1px solid var(--line);
  padding-bottom:clamp(60px,7vw,90px);
}