/* ============================================================
   资讯中心详情页 · 页面专属样式
   ------------------------------------------------------------
   大纲：《资讯中心详情页 · 页面大纲 **V1.5**》（2026-09-22）
         + 《视觉与组件分册》§1.5 详情页版式规范
   适用：资讯中心详情页（行业资讯 / 服务指南 / 客户案例）三分类共用一套模板。
   结构 = 5 屏：① 面包屑导航 → ② 文章标题与元信息 → ③ 文章摘要
                → ④ 文章正文与相关推荐（左右结构）→ ⑤ 上一篇 / 下一篇。

   ── V1.5 相对 V1.4 的变化（本文件的改动依据） ──────────────────
   ① 正文栏 762 → **800px**，相关推荐栏 326 → **288px**（内容区 1136 = 800 + 48 + 288）
   ② 元信息顺序改为「作者 · 发布日期 · 标签」**同一行**（移动端标签换行到下方）
   ③ 右栏加**描述文字**「根据分类为你推荐相关文章。」；标题按分类切换
      （客户案例 = 「类似案例」，其他 = 「相关文章」）；推荐篇数 3-5（原 2-3）
   ④ 正文配图口径反转：**原图自适应、宽度占满内容栏、不裁剪**
      —— 去掉 V1.4 的 `aspect-ratio:16/7` + `object-fit:cover`
   ⑤ 正文从「class 驱动」改为**元素驱动**（见下方 §② 的说明）
   ⑥ 「案例信息汇总」行头表格取消（后台无对应控件，字段模型里也没有这一项）
   ⑦ 数据表改为「按一般控件正常支持」，不限列数/行数/合并单元格 ⇒ 必须兜住窄屏宽表

   只承载「全局四层（tokens/base/components/utilities）覆盖不到」的独特布局：
     1. 文章信息头（标题 / 元信息 / 分割线 / 摘要方框）
     2. 富文本正文排版（article__body：小标题 / 段落 / 列表 / 图 / 表 / 引用 / 提示框）
     3. 正文 + 相关推荐 左右结构（casedetail）
     4. 相关推荐右栏（relcase）
     5. 上一篇 / 下一篇（postnav）
   配色一律引用 tokens，不写裸色值。

   背景节奏（01-design-spec.md §6.1）：main 内 2 个内容屏 —— `#body`（白）与
   `.postnav`（浅灰）相邻不同色。`.postnav` 是收尾导航带，与列表页的 `#pager` 同口径
   用浅灰：既与正文分隔，又衔接下方深色页脚；白底卡片也才立得住。
   ============================================================ */

/* ---------- ① 文章信息头（左栏顶部） ---------- */
.article__t{
  font-size:var(--fs-h1); line-height:var(--lh-tight); font-weight:var(--fw-black);
  color:var(--c-navy); letter-spacing:-.01em; margin:0 0 var(--sp-5);
}
/* 元信息（大纲 V1.5 第二屏）：
   桌面端 = 单行 —— 作者 · 发布日期靠左、标签靠右（justify-content:space-between 推开）；
   移动端 = 两行 —— 作者与日期一行、标签换行到下方（见文件末尾 ≤860px 断点）。
   允许 flex-wrap 是为了 861-1080px 这段窄桌面：标签放不下时自然折行，不会挤出栏外。 */
.article__meta{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:var(--sp-2) var(--sp-5);
  font-size:var(--fs-xs); color:var(--ink-3); letter-spacing:.02em;
  margin:0 0 var(--sp-5);
}
.article__byline{display:flex; align-items:baseline; gap:var(--sp-2);}
.article__sep{opacity:.6;}
.article__date{font-variant-numeric:tabular-nums;}
.article__tags{display:flex; flex-wrap:wrap; gap:var(--sp-2);}
.article__tags .tag{font-size:var(--fs-xs);}
/* 实线分割线：分隔「信息头」与「摘要」 */
.article__hr{border:0; border-top:1px solid var(--line); height:0; background:none; margin:var(--sp-5) 0 var(--sp-6);}
/* 文章摘要方框：浅蓝底（大纲 V1.5 指定 #F0F7FF = 令牌 --c-navy-tint-2）
   内边距 24/28 / 圆角 14px / 下外边距 48px —— 三条都与大纲 §4.5.3 逐字对应。 */
.article__abs{
  background:var(--c-navy-tint-2); border:1px solid var(--line-3);
  border-radius:var(--r-md); padding:var(--sp-6) var(--sp-7); margin-bottom:var(--sp-10);
}
.article__abs p{margin:0; font-size:var(--fs-sm); line-height:var(--lh-lead); color:var(--ink-2);}
/* 摘要已自带下边距（48px），紧跟其后的正文首块不再叠加自己的上边距，
   否则相邻外边距折叠会让间距变成 64 —— 大纲写的是 48。 */
.article__abs + .article__body > :first-child{margin-top:0;}

/* ---------- ② 富文本正文排版（左栏） ----------
   ⚠️ 这一节的**全部选择器都是元素驱动**（.article__body 的后代元素），
      不依赖任何 class。理由：正文由后台富文本编辑器生成，运营点按钮出来的是裸标签，
      他们既不会也不需要填 class。V1.4 的 `.article__list` / `.article__table` /
      `.article__figure` / `.article__quote` 那套写在 HTML 里的类名已全部取消 ——
      只要 CMS 输出的元素名对，样式就到位。
   ⚠️ 一律用**后代选择器**（`.article__body p`）而不是直系子选择器（`> p`）：
      富文本输出常把内容再包一层 <div>，直系子选择器会让所有间距当场失效。 */
.article__body{font-size:17px; line-height:1.85; color:var(--ink);}

/* 段落：段间距 24px（大纲 §4.5.3） */
.article__body p{margin:0 0 var(--sp-6);}

/* 小标题：只支持 H2 / H3 两级（大纲 §4.5.5「正文从 H2 起，禁跳级」）
   H2 = 20px / 800 / 金色 4px 左边框 + 14px 内缩；上 64 / 下 16
   H3 = 17px / 700；上 32 / 下 12
   ⚠️ H4 及更深**刻意不给样式**：运营若误用会直接掉到浏览器默认字号，
      视觉上明显「掉档」—— 这正是要的信号，也给白名单过滤留出对照。 */
.article__body h2{
  font-size:var(--fs-h3); font-weight:var(--fw-black); color:var(--c-navy);
  line-height:var(--lh-snug); margin:var(--sp-12) 0 var(--sp-4);
  padding-left:14px; border-left:4px solid var(--c-gold);
}
.article__body h3{font-size:var(--fs-h4); font-weight:var(--fw-bold); color:var(--ink); margin:var(--sp-8) 0 var(--sp-3);}
/* H2 紧跟 H3（或连续小标题）时收紧上间距，避免正文被撑开 */
.article__body h2 + h3{margin-top:var(--sp-4);}
.article__body h3 + h3{margin-top:var(--sp-4);}
/* base.css 已把全局 ul/ol 的 list-style 与 padding 清零 ⇒ 标记必须自己画 */
.article__body ul, .article__body ol{margin:0 0 var(--sp-6); padding-left:var(--sp-7);; list-style:none;}
.article__body li{position:relative; margin-bottom:var(--sp-3);}
.article__body li p {margin: 0;}
/* 无序列表：金色圆点 */
/*.article__body ul > li::before{*/
/*  content:""; position:absolute; left:4px; top:11px; width:7px; height:7px;*/
/*  border-radius:50%; background:var(--c-gold);*/
/*}*/
.article__body ul > li::marker {
  font-weight: var(--fw-bold);
  color: var(--c-gold);
}
/* 有序列表：金色序号（只用于有先后顺序的步骤） */
.article__body ol{counter-reset:ol;}
.article__body ol > li{counter-increment:ol;}
/*.article__body ol > li::before{*/
/*  content:counter(ol) "."; position:absolute; left:0; top:4px;*/
/*  font-size:13px; line-height:1.85; font-weight:var(--fw-bold);*/
/*  color:var(--c-gold-ink); font-variant-numeric:tabular-nums;*/
/*}*/
.article__body ol > li::marker {
  font-weight: var(--fw-bold);
  color: var(--c-gold);
}
/* 加粗：只用于关键词（整句加粗由编辑规范约束，CSS 层不区分） */
.article__body b,
.article__body strong{color:var(--c-navy); font-weight:var(--fw-bold);}
/* 行内链接：品牌蓝 + 金色下划线（不靠"变蓝"单独区分，兼顾色觉障碍） */
.article__body a{
  color:var(--c-navy); text-decoration:underline;
  text-decoration-color:var(--c-gold); text-underline-offset:3px;
}
.article__body a:hover{color:var(--c-navy-soft);}

/* 配图（大纲 V1.5 §4.5.3：宽 = 栏宽 · **原图自适应** · 圆角 14px —— 不锁比例、不裁剪）
   · 只写 width:100% + height:auto ⇒ 图按自己的原始比例自然展开，4:3 / 16:9 / 竖图都不会被切；
   · ⚠️ `height:auto` 这一条**不能省**：<img> 上的 width/height 属性是「呈现性提示」，
     作者样式不声明 height 时它就会生效（2026-09-22 实测漏写时，桌面图被撑成 762x700 而不是 762x333）；
   · 跳版由 **HTML 的 width/height 属性**兜住（浏览器据此提前算出占位高度），
     所以 CMS 输出的 <img> 必须带这两个属性。 */
.article__body figure{margin:0 0 var(--sp-6);}
.article__body img{display:block; width:100%; height:auto; border-radius:var(--r-md);}
.article__body figcaption{margin-top:var(--sp-3); font-size:14px; color:var(--ink-3); text-align:center;}

/* 数据表（大纲 V1.5 §4.5.5：按一般控件正常支持，不限列数 / 行数 / 合并单元格）
   表头色与 .compare 统一用 --bg-soft-2（方案 A）：表格自带白底，表头色只由表格内部色阶决定，
   不随所在区块变 —— 同族规范见 01-design-spec.md §6.1 规则 3 */
.article__body table{
  width:100%; border-collapse:collapse; margin:0 0 var(--sp-6); font-size:15px;
  background:var(--bg); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden;
}
.article__body th,
.article__body td{padding:12px 14px; text-align:left; border-bottom:1px solid var(--line);}
.article__body thead th{background:var(--bg-soft-2); color:var(--c-navy); font-weight:var(--fw-bold); font-size:14px;}
.article__body tbody tr:last-child td{border-bottom:none;}
.article__body tbody tr:hover{background:var(--bg-soft);}
/* 首列作行标题的表（<th scope="row">）：收窄并做行标题样式 —— 与上面的 thead 数据表两种形态并存，
   由 CMS 输出哪种标记决定，前端不做判断。 */
.article__body th[scope="row"]{width:120px; color:var(--ink-2); font-weight:var(--fw-medium); background:var(--bg-soft-2);}

/* 引用：只用于引用原话 / 法规原文（不要当强调用） */
.article__body blockquote{
  margin:0 0 var(--sp-6); padding:var(--sp-5) var(--sp-6);
  background:var(--bg-soft); border-left:4px solid var(--c-navy);
  border-radius:0 var(--r-md) var(--r-md) 0;
  font-size:var(--fs-lead); line-height:1.7; color:var(--ink-2);
}
.article__body blockquote p:last-child{margin-bottom:0;}
.article__body blockquote cite{display:block; margin-top:var(--sp-3); font-size:var(--fs-xs); font-style:normal; color:var(--ink-3);}

/* 提示框（大纲 V1.5 §4.5.5：固定 4 种语义色，不允许自由选色）
   不带变体 = 提示（品牌蓝）；另有 --key 要点（金）/ --warn 注意（橙）/ --stop 警示（红）。
   四种底色全部取自既有令牌 ⇒ 无需新增令牌、不引入裸色值；
   后台控件里只给这 4 个选项，不给取色器。 */
.article__note{
  margin:0 0 var(--sp-6); padding:var(--sp-5) var(--sp-6);
  border-left:4px solid var(--c-navy); background:var(--c-navy-tint-2);
  border-radius:var(--r-md); font-size:var(--fs-sm); line-height:1.7; color:var(--ink-2);
}
.article__note--key{border-left-color:var(--c-gold); background:var(--c-gold-tint);}
.article__note--warn{border-left-color:var(--c-orange); background:var(--c-orange-tint);}
.article__note--stop{border-left-color:var(--c-red); background:var(--c-red-tint);}
.article__note p{margin:0;}
.article__note p + p{margin-top:var(--sp-3);}

/* 折叠问答（大纲「建议加」控件；本页不配 FAQ 模块，此处只提供样式能力）
   注：若日后用折叠问答承载 FAQ，需与可见问答**逐字一致**才可加 FAQPage 标记。 */
.article__body details{
  margin:0 0 var(--sp-6); padding:var(--sp-4) var(--sp-5);
  background:var(--bg); border:1px solid var(--line); border-radius:var(--r-md);
}
.article__body summary{cursor:pointer; font-weight:var(--fw-bold); color:var(--c-navy);}
.article__body details[open] summary{margin-bottom:var(--sp-3);}

/* 视频嵌入（大纲「谨慎」控件：仅白名单域名，禁任意 iframe） */
.article__body video{display:block; width:100%; height:auto; margin:0 0 var(--sp-6); border-radius:var(--r-md);}

/* ---------- ③ 正文 + 相关推荐（左右结构） ----------
   大纲 §4.5.1 与 §4.5.2：内容区总宽 1136 = 左栏 800 + 间距 48 + 右栏 288。
   右栏写**固定 288px**、左栏吃剩余 ⇒ 视口 ≥1215px 时两栏精确等于 800 / 288；
   1081-1215px 之间左栏按可用宽度收窄（右栏保持 288 不被挤），比反过来更合理。
   （若写成 `1fr 1fr` 之类，两栏宽度会随视口漂移，大纲的 800/288 就守不住了。） */
.casedetail{display:grid; grid-template-columns:minmax(0,1fr) 288px; gap:var(--sp-10); align-items:start;}

/* ---------- ④ 相关推荐（右栏，跟随滚动 · 吸顶偏移 = 页头 72 + 20 = 92px） ---------- */
.relcase{position:sticky; top:calc(var(--header-h) + var(--sp-5));}
/* 一个框：框内是标题 + 描述 + 竖排的纯标题链接 */
.relcase__box{
  background:var(--bg); border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow:var(--sh-1); padding:var(--sp-6);
}
.relcase__h{font-size:var(--fs-h4); font-weight:var(--fw-black); color:var(--c-navy); margin:0 0 var(--sp-2);}
/* 描述文字（大纲 V1.5 第四屏右栏），常规字重、比标题小一档 */
.relcase__desc{margin:0 0 var(--sp-4); font-size:var(--fs-xs); line-height:var(--lh-sm); color:var(--ink-3);}
.relcase__list{list-style:none; margin:0; padding:0;}
.relcase__list li + li{border-top:1px solid var(--line-2);}
/* 链接只显示标题、文字不加粗（大纲 V1.5 明确要求） */
.relcase__i{
  display:block; padding:var(--sp-4) 0; text-decoration:none;
  color:var(--ink); font-size:var(--fs-sm); font-weight:var(--fw-normal);
  line-height:var(--lh-snug); transition:color var(--dur) var(--ease);
}
.relcase__i:hover{color:var(--c-navy);}

/* ---------- ⑤ 上一篇 / 下一篇（收尾导航带） ---------- */
.postnav{background:var(--bg-soft); padding:var(--sp-10) 0;}
.postnav__in{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4); max-width:860px; margin:0 auto;}
.postnav__i{
  display:flex; flex-direction:column; gap:6px; text-decoration:none;
  padding:var(--sp-5) var(--sp-6); background:var(--bg); border:1px solid var(--line);
  border-radius:var(--r-md); transition:border-color var(--dur) var(--ease), background var(--dur);
}
.postnav__i:hover{border-color:var(--c-navy); background:var(--bg);}
.postnav__k{font-size:var(--fs-xs); color:var(--ink-3); letter-spacing:.08em;}
/* 标题不加粗（大纲 V1.5 第五屏） */
.postnav__t{font-size:var(--fs-h4); font-weight:var(--fw-normal); line-height:var(--lh-snug); color:var(--ink);white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 340px;}
.postnav__i--next{text-align:right; align-items:flex-end;}

/* ---------- ⑥ 响应式 ---------- */
/* 861-1080px：右栏收窄为 268px、间距 32px，保持左右结构（大纲 §4.5.2 第二档） */
@media (max-width:1080px){
  .casedetail{grid-template-columns:minmax(0,1fr) 268px; gap:var(--sp-8);}
}
/* ≤860px：上下堆叠，正文在上、相关推荐在下方（大纲 §4.5.2 第三档，行距 64） */
@media (max-width:860px){
  /* ⚠️ 这里必须写 `minmax(0,1fr)` 而不是裸 `1fr`：
     裸 `1fr` 的轨道有 `min-width:auto`（= 该列内容的 min-content），
     正文里任何「撑得住」的东西（最典型的是列数不受限的数据表、超长不换行串）
     都会把整列顶宽 ⇒ 整页冒出横向滚动条。实测：6 列宽表让页面宽出 578 > 499。
     `minmax(0,1fr)` 把自动最小尺寸压成 0，宽度交给容器，溢出交给表格自己滚动。 */
  .casedetail{grid-template-columns:minmax(0,1fr); gap:var(--sp-12);}
  .relcase{position:static;}
  .postnav__in{grid-template-columns:1fr;}
  .postnav__i--next{text-align:left; align-items:flex-start;}
  /* 正文降为 16px（标题的 26px 由 tokens.css 的 --fs-h1 断点覆写自动生效） */
  .article__body{font-size:16px;}
  /* 元信息换行：作者与日期保持同一行，标签整体落到下一行（大纲 V1.5「移动端调整」） */
  .article__meta{justify-content:flex-start;}
  .article__byline,
  .article__tags{width:100%;}
  /* 数据表不限列数 ⇒ 窄屏宽表必须能横向滚动，否则整页被撑破或被压成竖排单字。
     `display:block` 把表格自己变成滚动容器（实测行组会生成匿名表格，列对齐不受影响）；
     ⚠️ 只写 overflow-x:auto 是**不够的** —— 单元格没有最小宽度时，浏览器会一路把列压窄
        硬塞进栏宽（实测 6 列表：clientWidth 457 / scrollWidth 457，滚动根本不触发）。
        给单元格一个最小宽度，表格才「撑不住就滚」，而不是把内容挤坏。 */
  .article__body table{display:block; overflow-x:auto; -webkit-overflow-scrolling:touch;}
  .article__body th,
  .article__body td{min-width:96px;}
}