/* thermo page specific */
.hero-title-ch { white-space:normal; text-align:center; }
.hero-chips { display:flex; gap:var(--space-3); flex-wrap:wrap; justify-content:center; margin:var(--space-5-5) 0 var(--space-7); }
/* 胶囊底色（2026-10-24·UI 评审 §五.7）：**深色**，不是白色磨砂。
   原来 `rgba(255,255,255,.18)` 是「白底 + 白字」—— 叠在照片上等于把底色**提亮**，
   13px 白字反而更难读。实测 9 页 × 2 视口共 72 个胶囊（截图里把字设为 transparent，
   只量胶囊自身底色，取区域 p95 当最坏）：
     白 18%   → 最差 **2.69:1**（中古风页 390），72 个里 **40 个**不到 4.5
     深 40%   → 最差 **7.02:1**，0 个不到 4.5  ← 采用
     深 52%   → 最差 8.85:1（更稳，但胶囊开始发死，弃）
   ⚠️ 这是 `verify_card_contrast` 的**盲区**：那道门禁只覆盖 `.sb-hero-hint` /
      `.case-label-*` / `.featured-no`，不含 `.hero-chip`。
   ⚠️ 底色一深，`backdrop-filter` 的模糊就看不出来了，但它仍要留 —— 照片细节还在后面，
      去掉会在密集纹理（窗格、书架）上出现「字直接叠在格子上」的观感。 */
.hero-chip { display:inline-flex; align-items:center; background:rgba(7,18,35,.40); color:#fff; border:1px solid rgba(255,255,255,.30); padding:var(--space-1-5) var(--space-3-5); border-radius:var(--radius-full); font-size:var(--fs-caption); backdrop-filter:blur(4px); }
.hero--light .hero-actions { display:flex; gap:var(--space-4); flex-wrap:wrap; justify-content:center; }
.thermo-pain-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-6); margin-top:var(--space-12); }
.thermo-pain-card { background:#fff; border-radius:var(--radius-lg); padding:var(--space-7); box-shadow:var(--shadow-md); }
/* 2026-10-08：此前写的是 `h4`，而 cases.py 生成的是 `<h3>`
   ⇒ 这条 17px/深蓝/间距的规则**从来没生效过**（产物实测 <h3>=72 / <h4>=0，9 页）。
   改为与标记同源；同级参照 `.thermo-step h3` 也是 17px，两处一致。 */
.thermo-pain-card h3 { color:var(--navy-900); font-size:var(--fs-body-lg); margin-bottom:var(--space-3); }
.thermo-pain-card p { color:var(--gray-500); font-size:var(--fs-caption); line-height:1.7; }
.section--warm { background:var(--cream-100); }
.thermo-cases-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-6); margin-top:var(--space-12); }
/* 2026-10-09：卡数 ≤4 时 2 列满宽 —— 3 列下 2 卡只填 67%、4 卡末行仅 1 卡（33%），
   右侧长期留空像「没加载完」。间距与上边距仍由基规则给。≤1023 档本就是 2 列。 */
.thermo-cases-grid--pair { grid-template-columns:repeat(2,1fr); }
/* 2026-10-16：本页案例卡的卡面样式**整块删除**（原 `.thermo-case-card` + 三个
   `.thermo-case-*` 内层类）—— 那是 case-card 的第三份实现，已并入 shared.css 的
   `.case-card` 组件（照片零遮挡 + 两行题注 + 规线色标）。本文件只留**栅格**。 */
.section-footer { text-align:center; margin-top:var(--space-10); }
.thermo-process { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-5); margin-top:var(--space-12); counter-reset:step; }
.thermo-step { background:#fff; border-radius:var(--radius-lg); padding:var(--space-7); position:relative; box-shadow:var(--shadow-md); }
.thermo-step::before { counter-increment:step; content:counter(step); position:absolute; top:14px; right:18px; font-size:48px; font-weight:700; color:var(--blue-300); font-family:var(--font-en); line-height:1; }
.thermo-step h3 { font-size:var(--fs-body-lg); color:var(--navy-900); margin-bottom:var(--space-2); padding-right:var(--space-10); }
.thermo-step p { font-size:var(--fs-small); color:var(--gray-500); line-height:1.7; }
.thermo-faq { display:grid; gap:var(--space-4); max-width:640px; margin:var(--space-12) auto 0; }
.thermo-faq-item { background:#fff; border-radius:var(--radius-lg); padding:var(--space-6); box-shadow:var(--shadow-md); }
.thermo-faq-q { font-size:var(--fs-body); font-weight:600; color:var(--navy-900); margin-bottom:var(--space-2-5); }
.thermo-faq-a { font-size:var(--fs-caption); color:var(--gray-500); line-height:1.8; }
.thermo-cta { background:linear-gradient(135deg,var(--navy-900) 0%,var(--navy-800) 100%); border-radius:var(--radius-2xl); padding:var(--space-16) var(--space-8); text-align:center; color:#fff; }
.thermo-cta h3 { font-size:32px; margin-bottom:var(--space-3-5); }
.thermo-cta p { font-size:var(--fs-body); opacity:.85; margin-bottom:var(--space-7); }
@media (max-width:1023px) { .thermo-pain-grid { grid-template-columns:repeat(2,1fr); } .thermo-cases-grid { grid-template-columns:repeat(2,1fr); } .thermo-process { grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px) { .hero.hero--compact { min-height:90svh; } .hero-title-ch { white-space:normal; } /* 触摸端胶囊：**两列网格**，不是竖排一列。
   2026-10-24（UI 评审 §五.7）：原来 `flex-direction:column` ⇒ 4 个胶囊排成 168px 高的
   一竖条（390×844 实测），把标题和 CTA 之间撑出一道空白，读起来像列表而不是「标签组」。
   改 `repeat(2,auto)`：4 个正好 2×2（3 个时 2+1，5 个时 2+2+1，都不留奇数空行），
   行高由内容定、不写死；`justify-content:center` 保证整体居中。 */
.hero-chips { display:grid; grid-template-columns:repeat(2, auto); justify-content:center;
              align-items:center; gap:var(--space-2) var(--space-3); } .hero-chip { width:fit-content; max-width:100%; font-size:var(--fs-small); } .hero--light .hero-actions { flex-direction:column; align-items:center; width:100%; } .hero--light .hero-actions .btn { width:min(100%, 280px); } .thermo-pain-grid, .thermo-cases-grid, .thermo-process { grid-template-columns:1fr; } .thermo-cta { padding:44px var(--space-5); } .thermo-cta h3 { font-size:var(--fs-xl); } }

/* 触摸端 hover 残留复位 —— 必须写在页面级 CSS 内：shared.css 先加载，同优先级下复位会被本文件覆盖。
   ⚠️ 2026-10-16：**本页已无需复位** —— 页面级 :hover 只剩 `.thermo-case-card:hover` 一条，
   它随案例卡改用 `.case-card`（复位在 shared.css 的全局块里）一并删除，本页计数归 0。
   刻意**不留空块**：为过判据而存在的空媒体查询块是假东西。冒烟那两条「页面级 CSS 自带复位 /
   复位块在文件末尾」的页名清单同步去掉了 page-thermo（见 smoke_test.py 该处注释）；
   本文件将来若新增页面级 :hover，必须把复位块补回来。 */

/* ══════════════════════════════════════════════════════════════════
   2026-10-23 · 专题页首屏（视觉统一：与 estimate / contact / case-detail 同构）
   演进史（三步，别只看现状就以为是随手改的）：
     ① 最初压一层 radial（中部 .62 → 边缘 0）—— 观感像一块灰云盖在照片上，客户要求去掉；
     ② 随后改成「图片在上（44svh）+ 文字落在深色实底带上」—— 灰云没了，但首屏变成
        「图 + 文字条」两截，和全站其它内页的沉浸式首屏不是一套语言；
     ③ 现在：图**铺满**首屏 + **上下渐变**遮罩 + 居中文字。线性渐变只压两端、不压中部主体，
        所以不会重现 ① 的灰云观感。
   🔴 遮罩走 ::before 伪元素，**不新增 `class="hero-overlay"`**：
      smoke 有一条判据要求「9 个地域页首屏没有 hero-overlay」，它防的是 ① 那层灰云，
      不是禁止一切压暗。用伪元素既保住那条判据，也不必多一层 DOM。
   ══════════════════════════════════════════════════════════════════ */
.geo-hero {
  display: flex; align-items: center;
  min-height: 72svh; padding-top: var(--header-height);
  background: var(--navy-900);
  position: relative; isolation: isolate; overflow: hidden;
}
.geo-hero::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg,
    rgba(7, 18, 35, .58) 0%, rgba(7, 18, 35, .46) 50%, rgba(7, 18, 35, .68) 100%);
}
/* ⚠️ .hero-bg 带负 z-index —— 给 .geo-hero 铺深色底会把图**盖掉**（首版实测：整屏纯 navy）。
   故图 z-index:0、遮罩 1、内容 2，三层显式钉死。 */
.geo-hero .hero-bg { position: absolute; inset: 0; height: auto; z-index: 0; }
.geo-hero .hero-bg img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  transform: none; animation: none;
}
.geo-hero-band { background: transparent; position: relative; z-index: 2; width: 100%; }
.geo-hero .hero-content {
  padding-block: 0; text-align: center;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .35);
}
.geo-hero .hero-chips, .geo-hero .hero-actions { justify-content: center; }
/* 首屏 CTA 宽度（2026-10-24·UI 评审 §五.7）：高度走 `.btn-lg`（56），**宽度只在这里补**。
   原来默认档 138×48，压在这页 89.6px 的主标题下像一枚标签 —— 而这一屏只有这一个转化口。
   ⚠️ 用 `min-width` 而不是加 padding：`.btn` 是 `inline-flex + justify-content:center`，
      min-width 让文字继续居中；改 padding 会让 6 个字的按钮宽度跟着文案长度浮动
      （9 页里有 4 字的「免费上门量房」也有别的，宽度会不齐）。
   ⚠️ 不新建尺寸档：站内大号修饰符只有 `.btn-lg` 这一档（`--btn-h-lg:56px`），
      评审 §五.11「CTA 收成 2 种」的方向是**收**不是**增**。 */
.geo-hero .hero-actions .btn { min-width: 200px; }
.geo-hero .hero-title { color: var(--white); }