/* ============================================================
   详情页样式（案例详情 / 新闻详情 / 文章详情 共用）
   配合 home-v2.css + inner-v2.css 使用
   ============================================================ */

/* ---------- 详情页 Banner：背景直接用内容封面图 ---------- */
.detail-hero{
  position:relative;height:clamp(420px,62vh,680px);
  overflow:hidden;background:#0A0A0A;
}
.detail-hero-bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:brightness(.42) contrast(1.08);
}
.detail-hero-veil{
  position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(to top,rgba(10,10,10,.96) 0%,rgba(10,10,10,.66) 40%,rgba(10,10,10,.45) 100%);
}
.detail-hero-copy{
  position:absolute;left:var(--gut);right:var(--gut);
  bottom:clamp(32px,6vh,64px);z-index:3;
  max-width:min(1000px,82vw);
}
.detail-hero h1{
  margin:14px 0 0;font-size:clamp(26px,3.4vw,54px);line-height:1.2;
  letter-spacing:-.025em;font-weight:500;color:#fff;
  text-shadow:0 4px 40px rgba(0,0,0,.6);text-wrap:pretty;
}

/* ---------- 面包屑 ---------- */
.crumb{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  font-size:12px;letter-spacing:.06em;color:rgba(255,255,255,.5);
}
.crumb a{color:rgba(255,255,255,.62);transition:color .3s var(--ease)}
.crumb a:hover{color:var(--brand)}
.crumb i{font-style:normal;color:rgba(255,255,255,.28)}
.crumb em{
  font-style:normal;color:rgba(255,255,255,.5);
  max-width:32em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ---------- 元信息 ---------- */
.detail-meta{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  margin:16px 0 0;font-size:13px;letter-spacing:.02em;color:rgba(255,255,255,.62);
  font-variant-numeric:tabular-nums;
}
.detail-meta span{display:inline-flex;align-items:center;gap:7px}
.detail-meta span::before{content:"";width:5px;height:1px;background:var(--brand)}

/* ============================================================
   正文排版：后台输出的是富文本 HTML，样式必须在这里兜住
   ============================================================ */
.detail-body{
  max-width:52em;margin:0 auto;
  font-size:clamp(15px,1.05vw,17px);
  line-height:2;color:var(--fg2);
  letter-spacing:.01em;text-wrap:pretty;
}
.detail-body > *:first-child{margin-top:0}
.detail-body p{margin:0 0 1.35em}
.detail-body h2{
  margin:2.4em 0 .9em;font-size:clamp(19px,1.6vw,25px);font-weight:500;
  line-height:1.45;color:#fff;letter-spacing:-.01em;
  padding-left:16px;border-left:2px solid var(--brand);
}
.detail-body h3{
  margin:2em 0 .75em;font-size:clamp(17px,1.35vw,21px);font-weight:500;
  line-height:1.5;color:#fff;
}
.detail-body h4{
  margin:1.7em 0 .6em;font-size:clamp(15px,1.15vw,18px);font-weight:500;color:#fff;
}
.detail-body strong,.detail-body b{color:#fff;font-weight:500}
.detail-body a{color:#fff;border-bottom:1px solid rgba(255,0,0,.5);transition:border-color .3s var(--ease)}
.detail-body a:hover{border-bottom-color:var(--brand)}
.detail-body ul,.detail-body ol{margin:0 0 1.35em;padding-left:1.5em}
.detail-body li{margin-bottom:.6em}
.detail-body ul li::marker{color:var(--brand)}
.detail-body ol li::marker{color:var(--brand);font-variant-numeric:tabular-nums}
.detail-body img{
  max-width:100%;height:auto;display:block;
  margin:1.8em auto;border-radius:2px;background:#141414;
}
.detail-body figure{margin:1.8em 0}
.detail-body figcaption{
  margin-top:10px;text-align:center;font-size:13px;color:var(--fg3);
}
.detail-body blockquote{
  margin:1.8em 0;padding:4px 0 4px 22px;
  border-left:2px solid var(--brand);
  color:rgba(255,255,255,.82);font-style:italic;
}
.detail-body blockquote p:last-child{margin-bottom:0}
.detail-body table{
  width:100%;margin:1.8em 0;border-collapse:collapse;
  font-size:14px;line-height:1.7;
}
.detail-body th,.detail-body td{
  padding:10px 14px;border:1px solid rgba(255,255,255,.12);text-align:left;
}
.detail-body th{background:rgba(255,255,255,.05);color:#fff;font-weight:500}
.detail-body tr:hover td{background:rgba(255,255,255,.02)}
.detail-body hr{margin:2.4em 0;border:0;border-top:1px solid var(--line)}
.detail-body code{
  font-family:var(--mono);font-size:.92em;
  background:rgba(255,255,255,.08);padding:2px 6px;border-radius:3px;color:#fff;
}
.detail-body pre{
  margin:1.6em 0;padding:16px 18px;overflow-x:auto;
  background:#131313;border:1px solid rgba(255,255,255,.09);
  font-family:var(--mono);font-size:13px;line-height:1.7;color:var(--fg2);
}
.detail-body pre code{background:none;padding:0}
/* 后台正文里常见的居中/右对齐内联样式，跟随容器 */
.detail-body [style*="text-align: center"]{text-align:center}

/* ---------- 上下篇 ---------- */
.detail-nav{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(14px,1.6vw,24px);
  max-width:52em;margin:clamp(44px,7vh,76px) auto 0;
  padding-top:clamp(28px,4vh,44px);border-top:1px solid var(--line);
}
.detail-nav a{
  display:block;padding:18px 20px;
  background:#131313;border:1px solid rgba(255,255,255,.08);
  transition:border-color .35s var(--ease),transform .35s var(--ease);
}
.detail-nav a:hover{border-color:rgba(255,255,255,.24);transform:translateY(-3px)}
.detail-nav .dir{font-size:12px;letter-spacing:.14em;color:var(--fg3);display:block;margin-bottom:9px}
.detail-nav .tt{
  font-size:clamp(14px,1.05vw,16px);line-height:1.6;color:#fff;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.detail-nav .next{text-align:right}

/* ---------- 相关推荐 ---------- */
.related-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,1.5vw,22px);
}
.related-grid a{
  display:block;background:#131313;border:1px solid rgba(255,255,255,.07);
  transition:border-color .4s var(--ease),transform .4s var(--ease);
}
.related-grid a:hover{border-color:rgba(255,255,255,.24);transform:translateY(-3px)}
.related-grid .pic{aspect-ratio:16/9;overflow:hidden;background:#1a1a1a}
.related-grid img{
  width:100%;height:100%;object-fit:cover;filter:brightness(.9);
  transition:transform 1s var(--ease),filter .5s var(--ease);
}
.related-grid a:hover img{transform:scale(1.05);filter:brightness(1)}
.related-grid h3{
  margin:0;padding:clamp(14px,1.5vw,19px);
  font-size:clamp(14px,1.02vw,16px);font-weight:500;line-height:1.6;color:#fff;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* ---------- 响应式 ---------- */
@media (max-width:900px){
  .detail-hero h1{font-size:clamp(22px,5.4vw,32px)}
  .detail-body{font-size:16px;line-height:1.95}
  .related-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .detail-nav{grid-template-columns:1fr}
  .detail-nav .next{text-align:left}
  .related-grid{grid-template-columns:1fr}
  .detail-body table{font-size:13px}
  .detail-body th,.detail-body td{padding:8px 10px}
}


/* ============================================================
   后台正文兼容层
   ------------------------------------------------------------
   正文是旧版「浅色主题」时期录入的，里面残留大量内联样式：
     color:#333 / #4a5568 / #1a202c  —— 深色字，放在深色底上等于隐形
     background:#fff8e6 / #f7f8fa   —— 浅色块，会把上面的浅字衬得看不见
   这里统一重映射到深色主题，同时保留品牌红 / 暖红的强调语义。
   必须带 !important，否则压不过内联样式。
   ============================================================ */
.detail-body p,.detail-body span,.detail-body div,.detail-body section,
.detail-body li,.detail-body td,.detail-body th,.detail-body font,
.detail-body h2,.detail-body h3,.detail-body h4,.detail-body h5,.detail-body h6{
  color:inherit !important;
}
.detail-body h2,.detail-body h3,.detail-body h4,.detail-body h5,.detail-body h6{
  color:#fff !important;
}
.detail-body strong,.detail-body b{color:#fff !important}

/* 链接：不管正文里写什么颜色，一律白字 + 品牌红下划线 */
.detail-body a,.detail-body a *{
  color:#fff !important;
  border-bottom:1px solid rgba(255,0,0,.5);
}
.detail-body a:hover,.detail-body a:hover *{border-bottom-color:var(--brand)}

/* 暖红 / 品牌红强调保留下来 */
.detail-body [style*="color:#e74c3c"],.detail-body [style*="color: #e74c3c"],
.detail-body [style*="color:#dd2020"],.detail-body [style*="color: #dd2020"],
.detail-body [style*="color:#c30d23"],.detail-body [style*="color: #c30d23"],
.detail-body [style*="color:red"],.detail-body [style*="color: red"],
.detail-body [style*="color:#ff0000"],.detail-body [style*="color: #ff0000"],
.detail-body font[color="red"]{
  color:var(--brand) !important;
}

/* 内联浅色背景压成低对比深色，避免和新文字色互撞 */
.detail-body [style*="background"]{background:rgba(255,255,255,.045) !important}
.detail-body [style*="background:#e74c3c"],
.detail-body [style*="background:#2c7be5"]{background:rgba(255,0,0,.14) !important}

/* 内联浅色边框压暗，左侧竖线统一成品牌红 */
.detail-body [style*="border-bottom"]{border-bottom-color:rgba(255,255,255,.14) !important}
.detail-body [style*="border-top"]{border-top-color:rgba(255,255,255,.14) !important}
.detail-body [style*="border-left"]{border-left-color:var(--brand) !important}
.detail-body [style*="border:1px solid #e"],.detail-body [style*="border: 1px solid #e"]{
  border-color:rgba(255,255,255,.14) !important;
}


/* ---------- 移动端：详情页 ---------- */
@media (max-width:768px){
  .detail-hero{height:clamp(296px,46vh,400px)}
  .detail-hero-bg{filter:brightness(.72) contrast(1.02)}
  .detail-hero-veil{
    background:linear-gradient(to top,rgba(10,10,10,.95) 0%,rgba(10,10,10,.66) 44%,rgba(10,10,10,.38) 100%);
  }
  .detail-hero-copy{bottom:clamp(20px,4.2vh,36px);max-width:100%}
  /* 面包屑末尾是完整标题，窄屏会和大标题整段重复 —— 隐藏掉 */
  .crumb em{display:none}
  /* 正文字号不能缩，手机上太小读不动 */
  .detail-body{font-size:16px;line-height:1.92}
  .detail-body h2{font-size:19px;padding-left:13px}
  .detail-body h3{font-size:17px}
  .detail-body img{margin:1.4em auto}
  /* 表格横向滚动，别撑破布局 */
  .detail-body table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .detail-body th,.detail-body td{white-space:nowrap;padding:9px 12px}
  /* 上下篇窄屏单列，都不右对齐 */
  .detail-nav{grid-template-columns:1fr;gap:10px}
  .detail-nav .next{text-align:left}
  /* 相关推荐单列 */
  .related-grid{grid-template-columns:1fr;gap:14px}
}