/* ==========================================================
   面包屑 · 全站通用（2026-10-01 合并）
   本文件同时是全站「导航类小件」的落点：面包屑 .case-crumb + 频道子导航 .channel-nav
   （2026-10-02 加入，见文件末尾）。两者都是「换页导航」：面包屑只落在 77 个详情页，频道子导航落在 11 个频道页。
   来源：原先有 3 份完全重复的拷贝 —— gdbkhal.css(.case-crumb)、
   lxgdb-contact.css(.case-crumb)、mfsy.css(.mfsy-crumb)。本次合并为一份，
   并把 mfsy 页的 class 统一成 .case-crumb（不再有 .mfsy-crumb）。
   视觉规格（2026-10-03 第 1 轮改）：**深棕字系压橙底**；链接 --on-brand-strong →
   悬停 --on-brand → 当前页 --on-brand-muted。分隔符用 --on-brand-line。
   原白字系（rgba 半透明白）实测仅 2.0~2.4:1，远低于正文 4.5 线，故整体改深棕；
   橙带底色 var(--brand-500, #FF7C1C) 不动。变量定义见 assets/css/tokens.css。
   用法：
     <nav aria-label="面包屑"><ol class="case-crumb">
       <li><a href="index.html">首页</a></li>
       <li aria-current="page">当前页名称</li>
     </ol></nav>
   首项「首页」（2026-10-02 用户拍板改为图标）：不再写可见文字，改为
     <li><a href="../index.html" aria-label="首页" title="首页"><svg class="crumb-home-icon" …>…</svg></a></li>
   成因：顶部导航是 fixed、始终可见，面包屑里的「首页」两个字是纯重复项，白占宽度。
   注意两点：① 读屏靠 aria-label 读「首页」，svg 必须 aria-hidden；
            ② JSON-LD 首项 name 仍写「首页」不变，校验脚本改为「可见文本为空时取 aria-label」。
   约定：字面必须与页内 JSON-LD BreadcrumbList 的 name **逐字一致**（含首项「首页」）。
   层级约定（2026-10-02 第四次调整 —— **面包屑只留给详情页**）：
     详情页        首页 › 活动案例 › {行业}   /   首页 › 资讯 › 运营干货
                   ← 末级是**能跳走的上级栏目**（可点），这才是面包屑唯一的价值
     频道页/一级页  **不写面包屑**
                   ← 频道页末级只能是「活动案例」「资讯」= H1 的复读；
                     一级页末级是「常见问题」「联系我们」= 页面名的复读。
                     两种情况都零信息，还占一行、并与居中的 H1 造成对齐冲突
                     （用户 2026-10-02：「当前视觉面包屑没有意义，还影响视觉」）。
   **判据（可机械校验）：末级 <li> 能否点去别处？**
     · 无 <a> / aria-current / href 指向本页  → 只在复述身份 → **整条删掉**（可见 + JSON-LD 同删）
     · href 指向别页                        → 有上级可回退 → 保留
   全站落点：77 个详情页（71 案例 + 6 干货）；其余 15 个频道页/一级页 2026-10-02 已全部摘除。
   ⚠️ 两侧必须同删：只删可见面包屑会触发体检「面包屑只存在一侧」告警。
   ⚠️ 批量删 JSON-LD 节点时**只删目标节点本身，禁止重新序列化整块 JSON**——
     `json.loads` → `dumps` 会把 1 空格缩进 + CRLF 的原文洗成 LF，diff 从 24 行膨胀到 1200 行
     （2026-10-02 实际踩到，已改用「括号配对 + 行范围删除」）。
   详情页末级为什么是分类而不是标题（用户 2026-10-02 明确要求「所有详情页面包屑不要显示名称」）：
   标题在下方 H1 已完整出现一次，重复无信息量；长标题还会把面包屑挤成两行。
   因此详情页面包屑末级是一个**链接**（分类页），不带 aria-current。
   修饰类 `.case-crumb--on-light`（白底刊头专用，深灰字）与 `.case-crumb--on-photo`（大图底专用，
   带文字阴影）目前**无页面使用**——保留以备后用，但新增用例请先确认真的需要。
   引入位置：各页自有 CSS 之后、footer.css 之前（放最后可稳压同等特异性规则）。
   ⚠️ 新增/补写可见面包屑时，**必须同步给该页加这条 crumb.css link**——
   样式已从各页自有 CSS 抽走，只写 HTML 不引样式会渲染成带 1. 2. 3. 序号的裸列表
   （case/gdbkhal.html 2026-10-02 踩过）。
   ⚠️ 链接色必须带 !important：基础样式里存在
   `.o_cc5 a:not(.btn){color:#FFFFFF}` 一类更高权重规则，会把链接盖成纯白，
   与当前页（rgba .66）分不出层级。联系页/免费试用页历史上已踩过这个坑。
   ========================================================== */
.case-crumb {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 8px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
  font-size: .875rem;
  color: var(--on-brand-muted, #4A2A12);
}
.case-crumb li { display: flex; align-items: center; gap: 8px; }
/* 首项小房子图标（2026-10-02）：fill 走 currentColor，自动继承链接色
   —— 默认压橙底是 --on-brand-strong、悬停 --on-brand、--on-light 页是 #8a7a6a，
   三套配色都不用为图标另写规则。（!important 只作用在 a 的 color 上，currentColor 会照抄。） */
.case-crumb .crumb-home-icon { display: block; width: 13px; height: 13px; fill: currentColor; }
/* 2026-10-05：小房子图标本体 13×13，远低于 44px 触控目标。
   用 ::after 伪元素向外扩出 44×44 命中盒（绝对定位，脱离文档流 → 零布局影响）。
   图标视觉尺寸、面包屑行高与各级间距全部不变。 */
.case-crumb a:has(.crumb-home-icon) { position: relative; }
.case-crumb a:has(.crumb-home-icon)::after {
  content: ""; position: absolute;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 44px; height: 44px;
}
.case-crumb li + li::before { content: "›"; font-size: 1.2em; line-height: 1; color: var(--on-brand-line, rgba(46,31,20,.45)); }
.case-crumb a { color: var(--on-brand-strong, #38220F) !important; text-decoration: none; transition: color .15s; }
.case-crumb a:hover { color: var(--on-brand, #2E1F14) !important; }
.case-crumb li[aria-current] { color: var(--on-brand-muted, #4A2A12); }
/* 键盘焦点环（2026-10-03 第 6 轮）：全站唯一「按底选色」的轮廓 ——
   面包屑压橙带，深橙轮廓只有 2.13:1，故用深棕 --on-brand（6.22:1）。
   ⚠️ 别照抄 .channel-nav 的 --brand-800，那支是给浅底用的。 */
.case-crumb a:focus-visible { outline: 2px solid var(--on-brand, #2E1F14); outline-offset: 2px; border-radius: 4px; }

/* 压图片底（微商城头图是大图背景）：与页内白字标题同一套文字阴影，保证可读性。
   由页面加 .case-crumb--on-photo 修饰类启用。
   ⚠️ 2026-10-03：本文件面包屑已整体改为**深棕字系**（配品牌橙底）。
   下面这组是给「深色大图底 + 白字」设计的白色阴影，与新配色逻辑相反，
   且当前**无页面使用**（全站 0 处）—— 将来真要在大图底上面包屑，请先重新定色，别直接套。 */
.case-crumb--on-photo a,
.case-crumb--on-photo li,
.case-crumb--on-photo li[aria-current] {
  text-shadow: 0 2px 12px rgba(96, 38, 0, .72), 0 1px 3px rgba(70, 25, 0, .55);
}

/* 压浅底（资讯分类页的刊头是白底，见 gdbkhal.css 的 .zx-masthead.o_cc5）：
   2026-10-03 起默认色已是深棕，本修饰类是浅底上**更淡一档**的补充
   （取色沿用原 .zx-crumb 的 #8a7a6a / #c9bdb2，视觉与该页历史表现一致）。
   当前无页面使用（全站 0 处）。 */
.case-crumb.case-crumb--on-light { color: #8a7a6a; }
.case-crumb.case-crumb--on-light a { color: #8a7a6a !important; }
.case-crumb.case-crumb--on-light a:hover { color: var(--brand-800, #B34700) !important; }
.case-crumb.case-crumb--on-light li[aria-current] { color: #8a7a6a; }
/* 分隔符比正文再淡一档，沿用原 .zx-crumb span[aria-hidden] 的 #c9bdb2 */
.case-crumb.case-crumb--on-light li + li::before { color: #c9bdb2; }

/* ==========================================================
   频道子导航 .channel-nav（2026-10-02 第二次改造：降为「子 tab」）
   背景：这排分类本质是「换页导航」（纯 <a>、无 JS、无 role=tab），早期却套用了与页内筛选器
   同款的胶囊样式（原 .case-tabs）。用户 2026-10-02 拍板，把它降级为**频道页内的子 tab**：
     · 一级 tab = 顶部导航的「活动案例」/「资讯」；
     · 页头（面包屑 + H1）属于频道、**恒定**，子 tab 不碰它 —— 点子 tab 只换下面的列表；
     · 子 tab 条落在列表区顶部（列表与筛选器之上），左对齐。
   落地：案例频道 8 页 + 资讯频道 3 页，共 11 页；面包屑随之降为 2 级（首页 › 频道名）。
   ⚠️ 类名不能叫 .case-nav —— 详情页侧栏「相关案例」组件已占用该名（.case-nav-item 等），
      通用规则会串过去（2026-10-02 实际踩到，改名 channel-nav）。
   ⚠️ 同日先做过「导航进页头」的 A 方案，配过 --center（橙带内白字）与 --on-light（白底刊头）
      两个修饰类；搬回列表区后一并下线——11 页同处浅底列表区，只剩一种配色。
   ========================================================== */
.channel-nav { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center;
  gap: 6px 20px; margin: 0 0 16px; padding: 0; font-size: .9375rem; line-height: 1.4;
  scroll-margin-top: 120px; }/* 移动端翻页后滚回列表顶部时，别被 fixed 页头压住 */
.channel-nav a { display: inline-block; padding-bottom: 6px; text-decoration: none;
  color: #6b5b4d !important; border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease; }
.channel-nav a:hover { color: var(--brand-800, #B34700) !important; }
.channel-nav a[aria-current="page"] { color: var(--brand-800, #B34700) !important; font-weight: 600; border-bottom-color: var(--brand-800, #B34700); }
/* 键盘焦点环（2026-10-03 第 6 轮）：频道子 tab 落在浅底列表区 → 深橙轮廓 5.50:1 */
.channel-nav a:focus-visible { outline: 2px solid var(--brand-800, #B34700); outline-offset: 2px; border-radius: 4px; }
/* 紧随其后的两种块各有自己的上边距，统一压到 16px（避免与 margin-bottom 叠加成 28-46px） */
.channel-nav + .case-filter-row { margin-top: 0; }
.channel-nav + .post-grid { margin-top: 16px; }