/* =====================================================================
   案例模块样式（v1.1.0 · 适配重做后的案例列表/详情 UI）
   作用域：.flt-archive-case / .flt-single-case / .flt-cases（区块）
   行业颜色不在此写死：由 flt_case_industries() 配置经模板输出为
   内联 --ind / --ind-deep / --ind-soft 变量，这里只消费结构变量。
   结构变量统一在 main.css :root 定义（案例专用变量以 --primary-tint /
   --text-sub / --r-md 等命名，避免与各页共用变量冲突）。
   ===================================================================== */

/* v1.0.63：案例页 .wrap 完全回归 main.css 全局体系（桌面 padding:0 32px / ≤767px padding:0 20px），
   与产品/文章详情一致。原 .flt-single-case .wrap{padding:0} 特异性 (0,2,0) 永久压过全局移动端
   .wrap{padding:0 20px} (0,1,0)，导致案例详情整页（hero/正文/侧栏/相关案例/CTA）内容贴边紧凑；
   archive 那条与全局完全重复，属冗余，一并删除。 */

/* v1.0.64：【恢复贴边设计 · 仅桌面 ≥768px】案例页（归档 + 详情）与 footer 对齐采用贴边设计
   （footer .wrap{padding:0}，main.css）。v1.0.63 删除案例页 wrap 规则后，桌面端内容吃到全局
   .wrap{padding:0 32px} → 相关案例 / 底部 CTA 等 section 整体内缩 32px，与 footer 左右不对齐。
   修复：≥768px 时案例页全部 wrap 左右 padding 归 0（特异性 (0,2,0) 压过全局 (0,1,0)）；
   ≤767px 不匹配本规则 → 保留全局移动端 padding:0 20px（v1.0.63 移动端修复不回退）。
   覆盖 8 处 wrap：归档（flt-hero hero / #cases pills+卡片网格 / flt-cta）+
   详情（detail-hero / main layout / case-article-foot / related-cases / bottom-cta）。
   首页 .flt-cases 区块不在两个容器内，不受影响。 */
@media (min-width: 768px) {
  .flt-archive-case .wrap,
  .flt-single-case .wrap { padding-left: 0; padding-right: 0; }
}

/* ============ 归档页 HERO ============ */
.flt-archive-case .case-hero {
  position: relative;
  overflow: hidden;
  padding: 88px 0 80px;
  border-bottom: 1px solid var(--divider);
  background: linear-gradient(180deg, rgba(1,77,255,.08) 0%, rgba(1,77,255,.035) 50%, rgba(1,77,255,.01) 100%);
}
.flt-archive-case .case-hero .wrap {
  display: grid;
  grid-template-columns: 1fr 460px;
  gap: 48px;
  align-items: center;
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 11.5px;
  color: var(--primary);
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  margin-bottom: 24px;
}
.hero-eyebrow::before { content: ""; width: 28px; height: 1.5px; background: var(--primary); border-radius: 1px; }
.flt-archive-case .case-hero h1 {
  font-size: 48px; line-height: 1.2; font-weight: 700; letter-spacing: -.5px;
  margin-bottom: 18px; color: var(--ink-1);
}
.flt-archive-case .case-hero h1 em { font-style: normal; color: var(--primary); }
.flt-archive-case .case-hero .lede {
  font-size: 17px; line-height: 1.65; color: var(--text-sub); max-width: 540px; margin-bottom: 32px;
}
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* HERO 抽象视觉（装饰，纯 SVG） */
.hero-visual { position: relative; width: 100%; max-width: 460px; margin-left: auto; aspect-ratio: 5/4; }
.hero-visual svg { width: 100%; height: 100%; display: block; }
.hero-visual .fn {
  position: absolute; background: #fff; border: 1px solid var(--border); border-radius: 8px;
  padding: 6px 12px; font-size: 11.5px; font-weight: 600; color: var(--ink-1);
  box-shadow: 0 6px 16px rgba(15,23,42,.1); display: flex; align-items: center; gap: 7px; letter-spacing: .3px; white-space: nowrap;
}
.hero-visual .fn::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); flex-shrink: 0; }
.hero-visual .fn.ok::before { background: var(--success); }
.hero-visual .fn.warm::before { background: var(--accent); }
.hero-visual .fn-1 { top: 8%; left: -4%; }
.hero-visual .fn-2 { top: 42%; right: -8%; }
.hero-visual .fn-3 { bottom: 10%; left: 18%; }

/* ============ 筛选 pills ============ */
/* v1.0.82：案例筛选 pills 改「单行水平滑动」（参照产品列表 .flt-product-list .filters 的已验证实现）。
   原 flex-wrap:wrap 在移动端 7 个分类会折成两行（Boss 截图复现）。
   关键三点（缺一滚不动）：① 子项 flex:0 0 auto 不收缩 ② 容器 min-width:0 + max-width:100%
   （flex 子项默认 min-width:auto 会被内容撑开，容器自身超宽 → overflow-x:auto 没有滚动空间）
   ③ overflow-y:hidden 防纵向抖动。桌面端 7 项不溢出，nowrap 无副作用。 */
.case-pills {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: nowrap;
  overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  min-width: 0; max-width: 100%;
  padding: 28px 0 8px;
}
.case-pills::-webkit-scrollbar { display: none; }
.case-pills .filter-label,
.case-pills .pill { flex: 0 0 auto; white-space: nowrap; }

/* v1.0.90：归档页 tools 行 —— pills 与搜索框同行（对称产品列表页 .pl-tools）
   搜索框样式来自 main.css 的通用 .flt-searchbox（此处只管布局与宽度）。 */
.flt-archive-case .case-tools { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 28px 0 8px; }
.flt-archive-case .case-tools .case-pills { padding: 0; flex: 1 1 auto; min-width: 0; }
.flt-archive-case .case-tools .case-search { flex: 0 0 auto; width: 240px; }
@media (max-width: 900px) {
  /* 窄屏：搜索框换行到下一行并撑满（pills 仍单行横滑） */
  .flt-archive-case .case-tools { flex-wrap: wrap; }
  .flt-archive-case .case-tools .case-search { width: 100%; }
}
.filter-label { font-size: 11px; color: var(--text-weak); margin-right: 8px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; }
.pill {
  height: 36px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--border);
  background: #fff; color: var(--text-sub); font-size: 13px; cursor: pointer;
  /* v1.0.133：恢复原始过渡（Boss 指定）—— 详见 pills.css 同名注释：
     v1.0.132 已定位真因（JS 点击瞬间加类触发重绘 + 紧接导航），过渡本身无问题 ✓ */
  transition: all .2s ease; display: inline-flex; align-items: center; gap: 6px; font-weight: 500;
}
.pill:hover { border-color: var(--primary); color: var(--primary); }
.pill.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.pill .cnt { font-size: 11px; opacity: .6; font-weight: 400; }

/* ============ 案例网格 + 卡片 ============ */
.case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 28px 0 8px; }

/* ============ 分页（v1.0.104）============
   案例归档页 / 行业分类页此前没有分页（原因见 archive-flt_case.php 的注释）。
   观感与产品列表分页（product-list.css 的 .flt-product-list .pagination）保持一致，
   颜色 / 圆角 / 字体全部复用 main.css 的全局设计令牌，不写死具体值。 */
.flt-archive-case .pagination { margin: 46px 0 0; display: flex; justify-content: center; }
.flt-archive-case .pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; }
.flt-archive-case .page-numbers {
  display: inline-grid; place-items: center; min-width: 38px; height: 38px; padding: 0 10px;
  border: 1px solid var(--border); border-radius: 8px;
  font-family: var(--mono); font-size: 13px; color: var(--text-2);
  background: var(--bg); text-decoration: none; transition: all .15s;
}
.flt-archive-case .page-numbers:hover { border-color: var(--primary); color: var(--primary); }
.flt-archive-case .page-numbers.current,
.flt-archive-case .page-numbers.current:hover {
  background: var(--primary); color: #fff; border-color: var(--primary);
}
.flt-archive-case .pagination .dots { border: 0; background: transparent; }

@media (max-width: 560px) {
  .flt-archive-case .pagination { margin-top: 34px; }
  .flt-archive-case .page-numbers { min-width: 34px; height: 34px; font-size: 12.5px; }
}
.case-card {
  background: #fff; border: 1px solid var(--divider); border-radius: var(--r-md);
  overflow: hidden; transition: all .2s ease; display: flex; flex-direction: column; position: relative;
}
/* v1.0.78：hover 不再把 border-color 设为 transparent（透明边 + 位移会在封面/胶囊交界处露色），
   改为保持原边框色 + 阴影浮起，视觉几乎一致 */
.case-card:hover { transform: translateY(-4px); box-shadow: 0 16px 32px -10px rgba(15,23,42,.16); border-color: var(--divider); }
/* v1.0.81：显式 align-items: stretch —— 防御 main.css 触控目标规则可能带来的 align-items:center
   （会让 .thumb/.body 水平居中收缩，导致封面塌陷、正文错位）*/
.case-card .card-link { display: flex; flex-direction: column; align-items: stretch; height: 100%; color: inherit; text-decoration: none; }

/* v1.0.73：卡片布局重做（严格按设计稿复刻）
   ① 封面：显式高度（原 aspect-ratio 在 flex 子项上不产生高度 → thumb 塌陷成细缝，Boss 截图复现）
   ② 封面左上角：客户 Logo（反白 + 白描边框；无 Logo 图 → 客户码文字）—— 调用后台 logo 字段
   ③ 封面右下角：行业分类胶囊（调用 flt_case_cat 分类名；白底 + 蓝点，左上大圆角贴合设计稿）
   ④ 正文：标题 → 客户行 → 摘要 → 底部 1 行 N 列指标（数字上 / 灰标签下，垂直居中；列数随指标数自适应） */
.case-card .thumb {
  position: relative; overflow: hidden;
  /* v1.0.83：封面高度改由「全局统一封面规则」提供（main.css：--cover-ratio: 16/9 + aspect-ratio + overflow:hidden），
     与产品卡 / 博客卡保持一致 —— 任何尺寸的图都渲染成同一高度。
     本处**不再声明 min-height**：v1.0.81 的 140px 是无比例时代的兜底，有 aspect-ratio 后由比例容器接管
     （且遗留会掩盖"比例是否生效"，增加排查难度）。 */
  background: var(--bg-2);
  /* v1.0.76：清除 main.css .case-card .thumb 残留的 1px 分隔线 */
  border-bottom: none;
  /* v1.0.79：显式 block，排除 main.css 遗留 display:grid 干扰 */
  display: block;
}
/* v1.0.83：封面图规则已并入 main.css 统一规则（.case-card .thumb > img → absolute + w/h 100% + cover）。
   原 v1.0.81 的「position:static + height:auto」是"按图自适应"旧方案（正是卡片高矮不一的原因），已删除；
   若保留，会因同特异性 + case.css 后加载而覆盖统一规则，导致本次修复失效。 */
.case-card .thumb .cover-logo {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 5px 10px; border: 1px solid rgba(255,255,255,.5); border-radius: 6px;
  /* v1.0.74：衬底加深（.16 → .42）——原值在浅色封面图上导致反白 logo 隐形（Boss 反馈"无法正常显示"） */
  background: rgba(15,23,42,.42); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
/* v1.0.78：图片模式 —— 完全去除外框、内边距与衬底（Boss 指定：border:none; padding:0，并要求去背景）
   注意：仅作用于图片，不污染「客户码文字」徽标（.is-text 保留原徽标观感） */
.case-card .thumb .cover-logo.is-img {
  border: none;
  padding: 0;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.case-card .thumb .cover-logo.is-text { padding: 5px 10px; }
.case-card .thumb .cover-logo img {
  /* v1.0.76：logo 图片单独定义宽高（不再与「客户码文字」兜底共用同一尺寸约束） */
  display: block; height: 22px; width: auto; min-width: 36px; max-width: 130px; object-fit: contain;
  filter: brightness(0) invert(1); /* 反白（要求透明底 PNG，与设计稿一致） */
}
.case-card .thumb .cover-logo em {
  font-style: normal; font-size: 12px; font-weight: 700; letter-spacing: .08em; color: #fff;
}
.case-card .thumb .cover-cat {
  /* v1.0.74：bottom: -1px 压过与下方 body 白区之间的亚像素缝隙（Boss 反馈细缝问题） */
  position: absolute; right: 0; bottom: -1px; z-index: 2;
  display: inline-flex; align-items: center; gap: 7px;
  background: #fff; color: var(--ink-1);
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  padding: 10px 40px; border-radius: 14px 0 0 0;
  /* v1.0.76：水平 padding 10px 16px → 10px 40px（Boss 要求，胶囊更舒展） */
}
/* v1.0.74：左下内凹圆弧（inverted corner）—— 伪元素在胶囊左侧补一个白色凹角，
   让白色从胶囊向左下弯出弧线，与下方 body 白区自然衔接（Boss 设计稿示意） */
/* v1.0.78：右下角白色垫层（Boss 建议）—— 比胶囊本体向四周外扩 2px，
   hover 时卡片 translateY/边框透明导致的亚像素露色被它盖住 */
.case-card .thumb .cover-cat::after {
  content: ""; position: absolute; top: -2px; right: -2px; bottom: -2px; left: 0;
  background: #fff; border-radius: 16px 0 0 0; z-index: -1; pointer-events: none;
}
.case-card .thumb .cover-cat::before {
  /* v1.0.79：bottom 归 0 —— 与胶囊底边**严格对齐**（v1.0.78 的 -2px 让凹陷块比胶囊低 2px，
     出现"凹陷处没对齐"的台阶）。圆弧半径 15px，块高 17px 足够覆盖。
     抗锯齿：渐变边界 15px → 15.8px（边界外移，避免半透明过渡带露底） */
  /* v1.0.80：按 Boss 实测值微调（left -17→-16px、bottom 0→-3px、height 17→19px）—— 视觉对齐 */
  content: ""; position: absolute; left: -16px; bottom: -3px;
  width: 18px; height: 19px;
  background: radial-gradient(circle at 0 0, rgba(255,255,255,0) 15px, #fff 15.8px);
  pointer-events: none;
  z-index: -1;
}
.case-card .thumb .cover-cat i { width: 6px; height: 6px; border-radius: 50%; background: var(--primary); flex: 0 0 auto; }

.case-card .body { padding: 20px 22px; display: flex; flex-direction: column; flex: 1; }
.case-card .body h3 { font-size: 19px; font-weight: 700; line-height: 1.45; color: var(--ink-1); letter-spacing: -.2px; margin-bottom: 8px; }
.case-card .body .client { font-size: 12.5px; color: var(--text-weak); font-weight: 500; margin-bottom: 12px; }
.case-card .body .hook { font-size: 13.5px; color: var(--text-sub); line-height: 1.7; margin-bottom: 16px; flex: 1; }
/* 底部指标：1 行 N 列（数字上 / 标签下，垂直居中） */
.case-card .body .card-metrics { display: grid; gap: 12px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--divider); }
.case-card .body .card-metrics.cols-1 { grid-template-columns: 1fr; }
.case-card .body .card-metrics.cols-2 { grid-template-columns: repeat(2, 1fr); }
.case-card .body .card-metrics.cols-3 { grid-template-columns: repeat(3, 1fr); }
.case-card .body .card-metrics .cell { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-width: 0; }
.case-card .body .card-metrics .cell b { font-size: 22px; font-weight: 700; color: var(--primary); line-height: 1.1; letter-spacing: -.4px; }
.case-card .body .card-metrics .cell span { font-size: 11.5px; color: var(--text-weak); font-weight: 500; margin-top: 5px; line-height: 1.4; }

/* ============ 归档页 CTA ============ */
.flt-archive-case .cta { padding: 64px 0; margin-top: 40px; }
.cta-box {
  background: var(--primary); border-radius: var(--r-lg); padding: 36px 44px; color: #fff;
  display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 24px; text-align: left;
}
.cta-box > div { flex: 1; min-width: 0; }
.cta-box h2 { font-size: 22px; font-weight: 700; margin-bottom: 6px; letter-spacing: -.3px; }
.cta-box p { color: rgba(255,255,255,.85); max-width: 560px; font-size: 14.5px; line-height: 1.6; }
.cta-box .btn-on-primary { background: #fff; color: var(--primary); font-weight: 600; }
.cta-box .btn-on-primary:hover { background: var(--bg-sub); }

/* ============ 详情页 HERO ============ */
.flt-single-case .detail-hero {
  position: relative; overflow: hidden; padding: 88px 0 64px; border-bottom: 1px solid var(--divider);
  background: linear-gradient(180deg, var(--ind-soft, #FAECE7) 0%, transparent 72%);
}
body.admin-bar .flt-single-case .detail-hero { padding-top: 120px; }
.flt-single-case .detail-hero-grid { display: grid; grid-template-columns: 1fr 500px; gap: 48px; align-items: center; }
.detail-hero .breadcrumb { font-size: 13px; color: var(--text-weak); padding: 8px 0 18px; display: flex; align-items: center; gap: 6px; font-weight: 500; }
.detail-hero .breadcrumb a { color: var(--text-sub); transition: color .2s; }
.detail-hero .breadcrumb a:hover { color: var(--primary); }
.detail-hero .breadcrumb span.sep { margin: 0 4px; color: var(--border); font-size: 13px; }
.detail-hero .breadcrumb em { font-style: normal; color: var(--text-2); font-weight: 500; }/* v1.0.66：当前项颜色 ink-1 → text-2（与全局文本色一致） */

.detail-hero .hero-eyebrow { margin-bottom: 18px; }
.detail-hero h1 { font-size: 42px; line-height: 1.25; font-weight: 700; letter-spacing: -.5px; margin-bottom: 18px; color: var(--ink-1); }
.detail-hero h1 em { font-style: normal; color: var(--primary); }
.client-row { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; font-size: 14px; color: var(--text-sub); font-weight: 500; }
.client-chip { width: 30px; height: 30px; border-radius: 8px; background: var(--ind-soft, #FAECE7); color: var(--ind, #D85A30); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; letter-spacing: .5px; }
.detail-hero .lede { font-size: 16px; line-height: 1.65; color: var(--text-sub); max-width: 520px; margin-bottom: 22px; }

/* HERO MEDIA：图片 / 视频 / 无媒体时的中性占位图 */
.hero-media { position: relative; aspect-ratio: 5/4; border-radius: var(--r-md); overflow: hidden; box-shadow: 0 12px 30px -10px rgba(15,23,42,.08); border: 1px solid var(--divider); background: #0d1426; }
.hero-media img, .hero-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* v1.0.105：`.hero-media-frame` / `.hero-media-tag`（含 ::before）/ `.hero-media-time` /
   `.hero-media-cap` 四条规则**已删除** —— 它们只服务于「无媒体时的暗色 demo mock」，
   而该 mock 已替换为中性占位图（见 single-flt_case.php）。
   `.hero-media-play` **保留**：仍被「配了视频」的分支使用（见文件末的绝对居中覆盖规则）。 */
.hero-media-play { position: relative; width: 72px; height: 72px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 28px rgba(0,0,0,.45), 0 0 0 8px rgba(255,255,255,.1); cursor: pointer; border: none; transition: transform .2s; z-index: 2; flex-shrink: 0; }
.hero-media-play:hover { transform: scale(1.06); }
.hero-media-play::after { content: ""; width: 0; height: 0; border-left: 22px solid var(--primary); border-top: 13px solid transparent; border-bottom: 13px solid transparent; margin-left: 5px; }

/* ============ 详情正文 ============ */
.flt-single-case .main { padding: 64px 0 0; }
.flt-single-case .layout { display: grid; grid-template-columns: 1fr 320px; gap: 64px; align-items: start; }
.block { margin-bottom: 48px; }
/* v1.0.58：去掉 border-bottom + padding-bottom，与 .flt-section .sec-title / .section-head h2 完全统一
   （3 个 H2 视觉一致：font-size/weight/color/line-height/letter-spacing/margin-bottom 都 28px/700/ink-1/1.35/-.4px/14-24px，变体/区块/相关案例靠左边框 + 颜色区分，不再用下划线） */
.block h2 { font-size: 28px; font-weight: 700; color: var(--ink-1); letter-spacing: -.4px; line-height: 1.35; margin-bottom: 14px; }
.block p { color: var(--text-sub); margin-bottom: 14px; font-size: 16px; line-height: 1.8; }

/* 指标卡：v1.0.51 已迁移到 assets/css/blocks.css（通用区块样式）。
   flt/metrics 是通用区块，任何 post type 都可能使用，样式不能只挂在
   case.css（仅案例页加载），故统一由 blocks.css 提供、按区块条件加载。
   响应式规则（下方 media query 里的 .metrics 列数）保留在此，继续生效。 */

/* v1.0.65：【修编辑器原生段落间距失效】main.css 全局 reset `*{margin:0;padding:0}` 把 p/h2 外边距归零；
   v1.0.51 内容区改「编辑器优先」后 the_content() 输出裸 p/h2/ul（无 .block 包裹，.block p 不再命中），
   案例正文用原生段落/标题时全部挤成一坨（auto-parts-bin-tracking 反馈）。
   边界纪律（方案 B）：用「> 直接子选择器」严格划分「正文规则」与「区块规则」的边界——
   区块内容（flt/hero|cta|section|metrics）都包在区块容器内，非 .content 的直接子元素 → 永不命中，
   互不污染（此前后代写法会因特异性高于 .flt-cta p (0,1,1) 而给区块内 p 补位 margin）。
   同时兼容 WP 原生 Group / Column 包裹（原生段落常被包一层 div，否则会漏掉）。
   h2 规格与 .block h2 一致（28px/700/ink-1）。 */
.flt-single-case .content > p,
.flt-single-case .content .wp-block-group > p,
.flt-single-case .content .wp-block-column > p { margin: 0 0 18px; color: var(--text-sub); font-size: 16px; line-height: 1.8; }
.flt-single-case .content > p:last-child,
.flt-single-case .content .wp-block-group > p:last-child { margin-bottom: 0; }
.flt-single-case .content > h2,
.flt-single-case .content .wp-block-group > h2 { font-size: 28px; font-weight: 700; color: var(--ink-1); letter-spacing: -.4px; line-height: 1.35; margin: 40px 0 14px; }
.flt-single-case .content > h2:first-child { margin-top: 0; }
.flt-single-case .content > h3,
.flt-single-case .content .wp-block-group > h3 { font-size: 20px; font-weight: 700; color: var(--ink-1); line-height: 1.4; margin: 28px 0 12px; }
.flt-single-case .content > ul, .flt-single-case .content > ol,
.flt-single-case .content .wp-block-group > ul, .flt-single-case .content .wp-block-group > ol { margin: 0 0 18px; padding-left: 22px; color: var(--text-sub); }
.flt-single-case .content > ul > li, .flt-single-case .content > ol > li { margin-bottom: 8px; line-height: 1.8; }
.flt-single-case .content > img { max-width: 100%; height: auto; border-radius: var(--r-md); margin: 8px 0; }
.flt-single-case .content > p a { text-decoration: underline; text-underline-offset: 3px; }

/* ============ 侧栏 ============ */
.aside { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 18px; }
body.admin-bar .aside { top: 128px; }
.card { border: 1px solid var(--divider); border-radius: var(--r-md); padding: 24px; background: #fff; }
.card.lead-card { border: none; background: var(--primary-tint); position: relative; }
.card.lead-card h3 { font-size: 18px; font-weight: 700; margin-bottom: 8px; color: var(--ink-1); letter-spacing: -.2px; }
.card.lead-card p { font-size: 13.5px; color: var(--text-sub); margin-bottom: 18px; line-height: 1.6; }
.card.lead-card .btn { width: 100%; justify-content: center; }
.card.lead-card .lead-foot { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(1,77,255,.18); display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lead-stat { font-size: 11.5px; color: var(--text-sub); font-weight: 500; letter-spacing: .3px; }
.lead-stat b { display: block; font-size: 15px; color: var(--ink-1); font-weight: 700; margin-bottom: 2px; letter-spacing: -.2px; }

.card.rel h3 { font-size: 16px; font-weight: 700; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; letter-spacing: -.2px; }
.card.rel h3 .auto { font-size: 10.5px; color: var(--primary); background: var(--primary-tint); padding: 2px 8px; border-radius: 999px; font-weight: 600; } /* 已下线（去掉「自动匹配」标签），保留以兼容旧文章 */
.rel-item { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--divider); transition: .2s; }
/* v1.0.86：.rel-item 由 <div> 改为 <a>（点击直达产品详情页）—— 继承文字色、去下划线；
   hover 反馈沿用原规则（padding-left:3px），视觉与改造前完全一致。 */
a.rel-item { color: inherit; text-decoration: none; }
.rel-item:first-of-type { border-top: none; padding-top: 0; }
.rel-item:hover { padding-left: 3px; }
.rel-item .thumb { width: 44px; height: 44px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; letter-spacing: .5px; background: var(--bg-sub); color: var(--primary); }
.rel-item .t { font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--ink-1); }
.rel-item .m { font-size: 12px; color: var(--text-weak); margin-top: 3px; }

/* ============ 相关案例 ============ */
.related-cases { padding: 64px 0; background: var(--bg-sub); border-top: 1px solid var(--divider); margin-top: 64px; }
.section-head { margin-bottom: 32px; display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.section-head .left .kicker { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; color: var(--primary); font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 8px; }
.section-head .left .kicker::before { content: ""; width: 24px; height: 1.5px; background: var(--primary); border-radius: 1px; }
.section-head .left h2 { font-size: 28px; font-weight: 700; color: var(--ink-1); letter-spacing: -.4px; line-height: 1.2; }
.section-head .right { font-size: 12px; color: var(--text-weak); font-weight: 500; letter-spacing: .3px; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.rc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

/* ============ 底部 CTA（透明背景） ============ */
.bottom-cta { padding: 48px 0 56px; }
.bottom-cta-inner { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; padding: 0 8px; }
.bottom-cta h2 { font-size: 22px; font-weight: 700; color: var(--ink-1); margin-bottom: 6px; letter-spacing: -.3px; }
.bottom-cta p { color: var(--text-sub); max-width: 560px; font-size: 14.5px; line-height: 1.6; }
.bottom-cta .btn { align-self: center; }

/* ============ 文章底部：浅灰分割线 + 分享 + 上下篇 ============ */
.case-article-foot { padding: 8px 0 0; }
.case-article-foot .foot-divider { border: none; border-top: 1px solid var(--divider); margin: 0; }
.case-article-foot .foot-share { margin: 28px 0; }
.case-article-foot .bsv-prev-next { border-top: none; padding-top: 0; margin: 28px 0 0; }

/* ============ 响应式 ============ */
@media (max-width: 900px) {
  .flt-archive-case .case-hero .wrap { grid-template-columns: 1fr; }
  .flt-archive-case .case-hero h1 { font-size: 36px; }
  .hero-visual { margin: 24px 0 0; max-width: 380px; }
  .case-grid { grid-template-columns: 1fr 1fr; }
  /* v1.0.61：【P0 修复 · 选择器特异性】
     根因：line 134 桌面端 .flt-single-case .detail-hero-grid (0,2,0) 写的是 1fr 500px；
           line 224 移动端 .detail-hero-grid (0,1,0) 特异性更弱 → 永远输 → 移动端仍是 1fr 500px。
     后果：360px 屏下 1fr 列被压成 30-40px → h1 42px 在 30-40px 列宽 = 1 字 1 行竖排；
           breadcrumb flex 不换行也竖排；hero-media 黑卡被挤进右半屏 50% 宽。
     修复：加 .flt-single-case 前缀，特异性提到 (0,2,0) 且写在后面 → 移动端真正单列堆叠。
     顺带：h1 字号 36 → 26px、breadcrumb 允许换行、hero padding 紧凑化。 */
  /* v1.0.73：单列时消除 48px 行间距（原 gap 与 .hero-media margin-top 叠加成 80px 空白，Boss 反馈"太宽"） */
  .flt-single-case .detail-hero-grid { grid-template-columns: 1fr; gap: 0; }
  /* v1.0.73：原 56px < nav 高度 64px → 顶部与主导航贴边/被遮；提到 84px（64 + 20 呼吸） */
  .detail-hero { padding: 84px 0 40px; }
  /* v1.0.81：卡片封面高度已改由图片自然比例决定（Boss 要求移除固定高度），此处不再声明 */
  /* v1.0.79：移动端卡片正文间距放宽（Boss：列表下方正文太紧凑） */
  .case-card .body { padding: 22px 20px 24px; }
  .case-card .body h3 { font-size: 20px; margin-bottom: 10px; }
  .case-card .body .client { margin-bottom: 14px; }
  .case-card .body .hook { margin-bottom: 18px; line-height: 1.75; }
  .case-card .body .card-metrics { gap: 14px; padding-top: 18px; }
  /* v1.0.66：登录态下原 body.admin-bar padding-top:120px（无断点、桌面值）在移动端命中 →
     与 nav 底部之间留白 ~70px；收窄为 46(admin bar) + 64(nav) = 110px 正好贴合 */
  body.admin-bar .flt-single-case .detail-hero { padding-top: 110px; }
  .detail-hero h1 { font-size: 26px; line-height: 1.3; }
  /* v1.0.66：面包屑禁止跨行——单行溢出省略（撤销 v1.0.61 的 flex-wrap:wrap） */
  .detail-hero .breadcrumb { flex-wrap: nowrap; overflow: hidden; }
  /* v1.0.67：链接项禁止跨行且不收缩（省略只留给当前项 em）；分隔符同步不换行 */
  .detail-hero .breadcrumb a { white-space: nowrap; flex-shrink: 0; }
  .detail-hero .breadcrumb .sep { white-space: nowrap; flex-shrink: 0; }
  .detail-hero .breadcrumb em { min-width: 0; flex-shrink: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* v1.0.71：封面已全端统一 16/9（基础规则），此处无需再覆盖 height */
  /* v1.0.63：删除 v1.0.60/61 加的 .flt-archive-case .wrap 移动端重置（max-width:none;margin:0;padding:0）——
     当时把「删除 wrap」理解为 padding 归 0，实际会让归档页移动端内容贴边。
     现在 wrap 完全回归全局体系：≤767px 自动获得 padding:0 20px。 */
  .hero-media { margin-top: 28px; }
  .flt-single-case .layout { grid-template-columns: 1fr; }
  .aside { position: static; }
  .metrics { grid-template-columns: 1fr 1fr; }
  .rc-grid { grid-template-columns: repeat(1, 1fr); }
  .bottom-cta-inner { grid-template-columns: 1fr; }
  .cta-box { flex-direction: column; align-items: flex-start; padding: 28px; }
}
@media (max-width: 560px) {
  .case-grid { grid-template-columns: 1fr; }
  .flt-archive-case .case-hero { padding: 48px 0 40px; }
  .flt-archive-case .case-hero h1 { font-size: 30px; }
  .detail-hero h1 { font-size: 28px; }
  .metrics { grid-template-columns: 1fr; }
  .bottom-cta-inner { padding: 0; }
  .section-head { flex-direction: column; align-items: flex-start; }
}

/* ============ v1.0.71 新增 ============ */

/* 详情 Hero 视频：自绘播放按钮绝对居中覆盖在视频上
   （.hero-media-play 的白色圆形 + 三角样式复用自原 SVG mock 时代，视觉语言一致） */
.hero-media > .hero-media-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; }
.hero-media > .hero-media-play:hover { transform: translate(-50%, -50%) scale(1.06); }

/* 归档页客户 Logo 墙（v1.0.53 重构时丢失的模块，本版恢复；标题由 Customizer flt_case_logo_title 提供）
   样式：网格卡片 + 灰度显示、hover 恢复彩色（B2B 惯例） */
.case-logo-wall { padding: 56px 0 8px; }
.case-logo-wall .logo-wall-title {
  font-size: 28px; font-weight: 700; color: var(--ink-1);
  letter-spacing: -.4px; line-height: 1.35; margin-bottom: 28px; text-align: center;
}
.case-logo-wall .logo-wall-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; align-items: stretch; }
.case-logo-wall .logo-wall-item {
  display: flex; align-items: center; justify-content: center; height: 76px;
  background: #fff; border: 1px solid var(--divider); border-radius: var(--r-md); padding: 14px 18px;
  transition: border-color .2s, box-shadow .2s;
}
.case-logo-wall .logo-wall-item:hover { border-color: transparent; box-shadow: 0 8px 20px -10px rgba(15,23,42,.14); }
.case-logo-wall .logo-wall-item img {
  max-width: 100%; max-height: 44px; width: auto; height: auto; object-fit: contain;
  filter: grayscale(1); opacity: .72; transition: filter .2s, opacity .2s;
}
.case-logo-wall .logo-wall-item:hover img { filter: none; opacity: 1; }
@media (max-width: 1023px) { .case-logo-wall .logo-wall-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .case-logo-wall .logo-wall-grid { grid-template-columns: repeat(2, 1fr); } .case-logo-wall { padding: 40px 0 0; } }