/* ================================================================
   MOBILE-ADAPT v1 · 2026-10-20 · 落地版
   适用：v19正式版.1 全站 13 个页面（3 个跳转存根与 geo-test 除外）
   定位：**最后加载**的适配层。所有页面把它放在最后一条 <link>，
        因此同等特异度下「后写者胜」，无需 !important。

   ★ 与方案文档 §12 的差异（已核实后修正，理由见 §15 核验记录）：
     文档让把补丁逐文件追加到 base.css 末尾。实测各页 CSS 载入顺序为
     base → home/used/ai/… → refine，**base.css 里的 body 级规则会被
     home.css 的同名规则反压**（body{padding-bottom} 实测无效）。
     故改为新建本文件并在各页最后引入：一处维护、层叠必胜、回滚只删一个文件。

   铁律：
     1. ≥1024px 的规则只在「缺陷修复」小节出现（分数字号/极小字号），
        版式类规则全部关在 max-width:1023 内，桌面零影响。
     2. 不删除任何既有声明，只做覆盖。
     3. 回滚：删掉本文件 + 各页 <link> 即可，其余文件零改动。
   ================================================================ */

/* ================================================================
   0 · 横向溢出（全站，含桌面修复：1440 实测溢出 3px）
   用 clip 而非 hidden：hidden 会建立滚动容器使 position:sticky 失效，
   clip 不会（iOS 已知行为差异）。
   ================================================================ */
html { overflow-x: clip; }
@supports not (overflow: clip) { html { overflow-x: hidden; } }
body { overflow-x: clip; }

img, svg, video, canvas { max-width: 100%; }

/* ================================================================
   1 · 8pt 间距阶梯（新名字，绝不覆盖既有 --sp-*）
   实测现有 --sp-4:16 / --sp-6:24 / --sp-8:40，缺 32/48/64 三档，
   导致只能四舍五入。新阶梯独立命名，旧 --sp-* 一处不动。
   ================================================================ */
:root {
  --gap-1: 4px;  --gap-2: 8px;  --gap-3: 12px; --gap-4: 16px;
  --gap-5: 24px; --gap-6: 32px; --gap-7: 48px; --gap-8: 64px; --gap-9: 88px;
}

/* ================================================================
   2 · 缺陷修复（全站生效，与视口无关）
   2.1 按钮/表单继承 UA 默认 13.3333px —— 375 实测有 7 个元素命中，
       全是图标按钮，视觉无差但污染字号统计、且 em 派生尺寸会带小数。
   2.2 .price-fn 是 0.62em 的价签脚注「*」，实测小到 8.06px（几乎不可读），
       大的又到 17.36px。用 max() 设 12px 地板，两端一起修。
   ================================================================ */
button, input, select, textarea { font-size: inherit; }
.price-fn { font-size: max(0.62em, 12px); }

/* 2.3 锚点跳转不被吸顶导航盖住（品牌页目录跳转尤其明显） */
[id] { scroll-margin-top: calc(var(--nav-h, 66px) + 12px); }

/* ================================================================
   3 · ≤1023px（手机 + 平板）
   ================================================================ */
@media (max-width: 1023px) {

  /* 3.1 区块节奏：全站单一节拍 48px
     改前实测 6 种组合 / 10 种取值：
       hero 4|48、service-cards 0|40、flow 0|24、trust 0|24、
       band 40|20、bench 8|28、section 64|64
     改后：每个区块上边距归零（由前一块 48 的下边距提供净间隔），
          两块之间恒为 48，不出现 48+48=96 的双倍缝。 */
  :root { --space-section: 48px; }

  .hero, .service-cards, .flow, .trust, .section, .bench, .cta-final {
    padding-bottom: var(--space-section);
  }

  /* 后者取消上内距（选择器已按实测 DOM 兄弟关系写：
     body: hero → service-cards → brand-links → devsel__hint → flow → trust → main） */
  .hero + .service-cards,
  .flow + .trust,
  .section + .section,
  .section + .bench,
  .bench + .section,
  .section + .cta-final { padding-top: 0; }

  /* main 内的区块：一律 0 上内距；首屏 hero 与有底色的区块除外 */
  main > .section,
  main > .bench,
  main > .cta-final { padding-top: 0; }

  /* 有底色的区块保留双边呼吸（深色价格 band / 纸质问答区）。
     必须用 id 选择器：`.section{padding:64px}` 特异度 0,1,0，
     `main > .section` 是 0,1,1，普通 class 打不过。 */
  #price-cards,
  #faq { padding-top: var(--space-section); padding-bottom: var(--space-section); }

  /* 文档 ▸ MOB-03 的 band 底距补丁：源文件有
     `#price-cards{padding-bottom:clamp(20px,3.2vw,32px)}`，手机上只有 20px，
     比其它区块窄一半。上面 #price-cards 已覆盖，此条保留为语义说明。 */

  /* 唯一例外：首屏 hero 顶部 24px（不叠加导航高度，也不跟 48 双倍） */
  .hero { padding-top: var(--gap-5); }

  /* 3.2 首屏三段栏：voiceBar 45 / nav 67 / devSel 53 = 165px（占首屏 20%）
     nav 67 是 padding 撑出来的，压到 56；devSel 压到 44。合计省 20px。 */
  .nav { min-height: 56px; padding-block: 6px; }
  .devsel { min-height: 44px; padding-block: 0; }
  /* 53px 的构成实测为：inner padding-top 8 + 标签 44 + 边框 1。
     去掉那 8px 才真正落到 44，标签自身的 44px 触点不打折。 */
  .devsel__inner { padding-top: 0; }
  .devsel__tab { min-height: 44px; padding-inline: 14px; }

  /* 3.3 触控目标 ≥44×44（Apple HIG 通行值；WCAG 2.2 SC 2.5.8 硬底线 24）
     375 真机（pointer:coarse）实测 18 个 <44，其中电话链接仅 105×16。 */
  .nav-title, .nav-pill, .nav-search, .nav-theme-btn,
  .nav-back, .nav-phone, .privacy-back, .wx-nav__back,
  .devsel__close, .back-to-top {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* 仅宽度不足的补 min-width（34→44），其余只补高度，避免撑破导航一行 */
  .nav-theme-btn, .devsel__close, .back-to-top, .devsel__tab { min-width: 44px; }

  /* 页脚导航项实测 335×37，高度差 7px；display:flex 后默认左对齐，补 center 让四项居中 */
  .nv-footer-link { min-height: 44px; display: flex; align-items: center; justify-content: center; }
  /* 「扫码微信 ›」实测 70×19 */
  a[href="#footer-qr"] { display: inline-flex; align-items: center; min-height: 44px; }

  /* .sr-only 是 1×1 裁剪层（视觉不可见），但它的 1.5em 在 17px 父级下会算出
     25.5px，污染字号档位统计。定死 13px，对无障碍与视觉均无影响。 */
  .sr-only { font-size: 13px; }

  .filter-chip, .wx-pricestrip__item,
  .evt-card__btn, .pickup-parse__btn, .fb-type, .ctrl { min-height: 44px; }
  /* 480–900 档实测：价格卡「预约换电池 ›」86×25、促销「领取」122×34 */
  .learn-more, .promo-claim { min-height: 44px; display: inline-flex; align-items: center; }

  /* 纯文字内联链接不改行高，用伪元素扩命中区（不动排版） */
  a[href^="tel"] { position: relative; }
  a[href^="tel"]::after {
    content: ''; position: absolute;
    inset: -14px -8px;   /* 16 + 14×2 = 44，实测命中区刚好达标 */
  }

  /* 复选框本体保持 20×20（视觉合理），由外层 label 撑到 44 */
  label:has(> input[type="checkbox"]) {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* 3.4 输入框 ≥16px，防 iOS Safari 聚焦自动放大 */
  input, select, textarea { font-size: 16px; }

  /* 3.5 首屏字号：去掉 vw 分数值（375 实测 33.75px，@2x/@3x 中文发虚） */
  .hero h1 {
    font-size: 34px;
    line-height: 1.18;
    letter-spacing: -0.01em;
  }
  .hero p { font-size: 17px; line-height: 1.7; }

  /* 3.6 段转型正文提到 17px（Apple HIG：iOS 默认正文 17pt）
     卡片内标签保持 13–15px，页面长度影响控制在 5% 内。 */
  .section > p, .flow p, .faq p, .trust p, .bench li { font-size: 17px; line-height: 1.7; }

  /* 3.7 字号档位收口：14 → 15、18 → 20（与 h3 对齐），
     375 实测同页 11 档 → 8 档，且全为整数。 */
  .bench li { font-size: 15px; }
  .bench__title { font-size: 20px; }
  .nv-wordmark { font-size: 40px; }

  /* 3.8 横滑轨道：吸附 + 隐藏滚动条 + 两侧留白
     实测 brand-links scrollWidth 605 / clientWidth 375、scroll-snap none，
     用户不知道可以横滑。用 proximity 而非 mandatory，只吸近的。 */
  .brand-links, .devsel__tabs, .filter-row, .wx-case, .wx-pricestrip {
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--gutter);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .brand-links::-webkit-scrollbar,
  .devsel__tabs::-webkit-scrollbar,
  .filter-row::-webkit-scrollbar,
  .wx-case::-webkit-scrollbar,
  .wx-pricestrip::-webkit-scrollbar { display: none; }
  .brand-links > *, .devsel__tabs > *, .filter-row > *,
  .wx-case > *, .wx-pricestrip > * { scroll-snap-align: start; }

  /* 3.9 横向安全区：原来只有 nav 用了，横屏刘海机型主内容左右会被切 */
  .section, .hero, .flow, .trust, .bench, .cta-final, .footer {
    padding-left: calc(var(--gutter) + env(safe-area-inset-left, 0px));
    padding-right: calc(var(--gutter) + env(safe-area-inset-right, 0px));
  }

  /* 3.10 内联链接命中区（ai 页实测 12 个 15–16px 高的裸 a） */
  .msg a, .ask-link { display: inline-block; padding-block: 6px; }
}

/* ================================================================
   4 · 分档字号阶梯（≤479 / 480–767 / 768–1023 三段，桌面不参与）
   ★ 只写 max-width 组合，绝不用裸 min-width —— 否则 ≥1024 也会命中，
     把桌面 h1 从 56px 压到 40px（方案文档 §12.2 原补丁有此缺陷，已修）。
   ================================================================ */
@media (min-width: 480px) and (max-width: 767px) {
  .hero h1 { font-size: 36px; }
  .nv-wordmark { font-size: 48px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .hero h1 { font-size: 40px; }
  .nv-wordmark { font-size: 56px; }
}

/* ================================================================
   5 · 横屏（高度 ≤500px）
   横屏时首屏可用高度仅 ~390px，竖排 hero 会被完全挤爆。
   ================================================================ */
@media (max-height: 500px) and (orientation: landscape) {
  .hero { padding-top: var(--gap-4); padding-bottom: var(--gap-4); }
  .hero h1 { font-size: 30px; }
  .hero-visual { display: none; }
}

/* ================================================================
   6 · 平板档（768–1023）既有缺陷修正
   实测 768：维修项目卡按 min-width:768 切成 3 列（每列 232px），
   而卡内是「图标 | 标题 | 价格」横排，232px 装不下 → 标题逐字断行
   （「换屏 幕」「修主 板」）。这是改前既有问题，非本轮引入。
   处置：该档收成 2 列，每列约 340px，标题回到一行。
   ================================================================ */
@media (min-width: 768px) and (max-width: 1023px) {
  .service-cards { grid-template-columns: repeat(2, 1fr); }
}