/* ---------- 触摸目标（平板也要，768px 仍是手指操作） ---------- */
@media (max-width:820px){
  .crumb a,.crumb span{display:inline-flex;align-items:center;min-height:32px;padding:0 2px}
  .crumb{margin-top:-6px;font-size:12px}

  footer.ft ul a{min-height:34px;display:flex;align-items:center;padding:2px 0}
  footer.ft ul{gap:2px}

  .qnote a,.note a,.crosslink a{display:inline-flex;align-items:center;min-height:34px;padding:2px 0}
  .sidebox ul li a,.qnote ul li a,.note ul li a{
    min-height:38px;display:flex;align-items:center;
    border-bottom:1px solid rgba(9,48,73,.05)}
  .sidebox ul li:last-child a,.qnote ul li:last-child a{border-bottom:none}

  .more,.bizcard .go{min-height:34px;display:inline-flex;align-items:center}

}

/* ============================================================
   移动端修正层
   ------------------------------------------------------------
   ★ 这个文件必须最后加载（在 site.css 和 pages.css 之后）。

   原因：第一版我把这些规则写在 site.css 末尾，结果**一条都没生效** ——
   因为 pages.css 在 site.css 之后引入，它的 `.t1{font-size:10px}`
   优先级相同但加载更晚，把我的 `.t1{font-size:11.5px}` 覆盖了。
   排查了两轮才想明白不是选择器写错，是加载顺序。

   现在的结构：
     site.css     设计令牌、通用组件
     pages.css    各页专属样式
     mobile.css   移动端覆盖（最后，胜出）

   规则取舍：不是所有小字都放大。品牌英文副标题（ShenTie / MANAGER）、
   设备编号这类装饰性小字保持原样；要阅读的标签、提示、字段说明才提升。
   ============================================================ */

/* ---------- 依据：375 / 414 / 768 三档实测 ---------- */

@media (max-width:640px){

  /* ---- 筛选条：手机上改成横向滚动，不做换行 ----
     ★ 用户反馈："业绩筛选，分了三个类别筛选，手机浏览时，占用页面空间太大。"

     实测（375px）：业绩页筛选条高 **361px**，占首屏 **45%**——
     进去先看到半屏筛选按钮，项目列表被推到很下面。
     原因是 `.frow / .fgroup` 都是 `flex-wrap:wrap`，
     17 个 chip 在 375px 宽度下每组换 2–3 行（组高 112/77/119px）。

     改成每组一行、横向滚动：
       每组约 38px（单行），三组合计约 130px，占首屏 16%，减 64%。
       组与组之间的虚线分隔保留，仍能看出是三组。

     为什么用横向滚动而不是折叠面板：
       折叠要多一次点击才能看到选项，而筛选项本身是"扫一眼挑一个"的操作，
       藏起来反而增加成本。横向滚动的代价是右侧选项需要滑动才可见，
       所以：① 保留"全部"在最左（默认可见）；② 加渐隐提示还有更多。
       滚动条隐藏但滚动本身保留（手机上滚动条本来就看不见）。 */
  .frow,.fgroup{
    flex-wrap:nowrap;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;          /* Firefox */
    -ms-overflow-style:none;       /* 旧 Edge */
    padding-bottom:2px;
  }
  .frow::-webkit-scrollbar,
  .fgroup::-webkit-scrollbar{display:none}   /* Chrome / Safari */

  /* 组名（专业/城市/类型）固定不参与滚动：滑到右端时还能知道在看哪一组 */
  .frow .fl,.fgroup .fl{
    flex:0 0 auto;width:auto;position:sticky;left:0;
    background:var(--glass-badge);padding-right:6px;z-index:1;
  }

  /* chip 不许被压缩成窄条。
     ★ 必须写 `.frow .chip`（0,2,0）而不是 `.chip`（0,1,0）：
       pages.css 里另有一条 `.fl{width:100%}` 让组名占满整行，
       chip 作为 flex 项默认 flex-shrink:1 就会被压到 40px 宽、
       文字竖向折成 4 行（实测 40×98px），整条反而更高。
       用高优先级把 chip 固定成内容宽度，溢出交给横向滚动。 */
  .frow .chip,.fgroup .chip{flex:0 0 auto;white-space:nowrap}

  /* 三组之间用更紧的间距，进一步省高度 */
  .frow + .frow{margin-top:4px;padding-top:8px}

  /* 筛选条整体内边距收一档 */
  .filterbar{padding:8px 0}

  /* ---- 首屏：上移一点 + 副标题不再折三行 ----
     ★ 用户反馈："神州高铁旗下那段描述，需要上移一点。"

     实测（375px）：.hero .inner 上内距 44px，eyebrow 高 **52px**
     —— 11.5px 的字撑到 52px 说明折了三行。
     原因不是字多，是 `letter-spacing:.13em`：这段约 39 个字，
     每个字多 1.5px，整行白多出 58px 宽度，硬生生挤出一行。

     处理：
       1. 上内距 44 → 30px（整体上移 14px）
       2. 字间距 .13em → .02em（中文不需要那么宽的字距，
          英文大写才需要）。39 字省约 50px，收回两行。
       3. 行高收到 1.5，两行约 35px，比原来矮 17px。

     为什么不缩短文案：这段是工商信息（母公司 + 股票代码 + 子公司定位），
     对外有识别价值，不该为了排版砍内容。 */
  .hero .inner{padding-top:30px}
  .hero .eyebrow{
    letter-spacing:.02em;
    line-height:1.5;
    margin-bottom:16px;
    padding:6px 13px;
    border-radius:14px;
  }

  /* ---- 首屏两个按钮：改成等宽两列铺满 ----
     ★ 用户反馈："了解业务体系，查看项目业绩，这俩按钮的位置排布，及大小，
       都比较突兀。"

     实测（375px）：两个按钮各 130×51，并排靠左，容器宽 328 ——
     右边空着 58px。两个一样大的块缩在左边、右边缺一块，
     看起来像没排完。

     改成两列等分（各占一半、共占满宽）：
       容器 328 - 间距 10 = 318，每列 159px，比原来各宽 29px。
       文字"了解业务体系"6 字 × 14px ≈ 84px，加内距 24px = 108px，
       159px 绰绰有余，不会换行。

     高度 51 → 46：51px 在手机上偏高，两个并排时像两块砖。
     46px 仍高于 44px 的触摸目标下限。 */
  .hero .acts{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
  }
  .hero .acts .btn{
    width:100%;
    min-height:46px;
    padding:12px 8px;
    font-size:13.5px;
  }

  /* ---- 区块间距：手机上整体收紧 ----
     ★ 用户反馈："有些模块间的间距比较大，整体比较松散。"

     实测（375px）：.sec 的 padding 是 clamp(46px,3.5vw,70px)，
     手机上一律取下限 46px。相邻两个 section 各 46px 上下 = **92px 纯空白**。
     手机上滚动距离本来就被放大，92px 的空档加上标题区，
     要滑过约 1/6 屏才看到下一个标题，观感就是"散"。

     46 → 32：两节之间从 92px 降到 64px，减 30%。
     为什么不压到 24：区块之间需要留出"换章"的呼吸感，
     压太狠会变成一整片连续内容，反而分不清层次。

     .sec-head 的 24px 一起收到 18px —— 标题要更贴近自己的内容，
     否则"标题离自己的内容远、离上一节的内容近"，违反接近性原则。 */
  .sec{padding:32px 0}
  .sec-head{margin-bottom:18px}

  /* .sec-head.row 是「标题 + 右侧链接」的横排（如"业务体系全览"）。
     手机上 flex-wrap 换行后，gap:32px 会变成纵向 32px 的空档，
     把链接推得离标题很远。改成小间距，换行后紧挨标题。 */
  .sec-head.row{gap:8px 16px;align-items:flex-start}

  /* ---- 三大业务主线卡片：图标与标题并排 ----
     ★ 用户报的问题：手机上图标独占一行，标题掉到第二行。
     实测（375px）：图标 top=25、标题 top=88，相差 63px，卡片高 313px。
     三张卡片就白吃掉约 190px 纵向空间，而且图标下方那块留白
     看起来像"少了点什么"。

     改成两列网格：图标占第 1 列、标题占第 2 列并垂直居中，
     正文/标签/底部链接跨满两列。

     为什么用 grid 而不是给模板套一层 flex：
       模板里 svg、h3、p 是平级兄弟节点，没有包裹层。
       为了排版去改模板结构，会把"样式问题"变成"结构问题"，
       以后别人改模板还得记住这个包裹层是为什么加的。
       grid 在不动 DOM 的前提下就能做到，代价是实现者要理解
       "跨列元素必须显式 grid-column"这一点。

     为什么卡片顶部的色条 .bar 不用管：
       它是 position:absolute，绝对定位子元素不参与 grid 布局，
       不会占掉一个格子。

     为什么只改 ≤640 而不动平板（641–980）：
       那一段卡片宽 582–824px，图标单独一行时留白充足、更像
       "大图标卡片"；手机上卡片才 328px 宽，同样布局就只剩浪费。 */
  .bizcard{
    display:grid;
    grid-template-columns:auto 1fr;
    column-gap:13px;
    align-items:center;
  }
  /* 并排后必须去掉图标和标题各自的 margin-bottom ——
     它们在 grid 里会撑高所在行，并排就白做了 */
  .bizcard .ico{
    width:38px;height:38px;
    margin-bottom:0;
  }
  .bizcard h3{
    margin-bottom:0;
    /* 标题最多两行（如"系统集成改造"在极窄屏可能折行），
       行高收紧一点，与 38px 的图标对齐更稳 */
    line-height:1.32;
  }
  /* 跨列元素：不写就会被塞进下面某一列的格子里，正文变成半宽 */
  .bizcard p,
  .bizcard .tags,
  .bizcard .go{grid-column:1 / -1}
  .bizcard p{margin-top:13px}
  /* .go 是 inline-flex，成为 grid item 后会被拉伸到整列宽，
     点整行都能触发跳转，反而不像"链接"。让它只占内容宽度 */
  .bizcard .go{justify-self:start}

  /* ---- 页脚：手机上的链接排布 ----
     必须在 mobile.css 里写，不能写在 site.css：
     mobile.css 后加载，上面 820px 段的 `footer.ft ul a{min-height:34px}`
     会覆盖 site.css 里的同名规则，放在 site.css 是不生效的（踩过）。

     ★ 2026-11-04 用户第二次反馈"业务、关于、合作又是每个一行"。
       实测（375px）当时已经是 3 列并排（三组 x=16/129/242、y 相同），
       没有回归；真正偏高的是**组内 4 条链接纵向堆到 151px**。

       这一轮换布局思路，不是继续压缩行高：
       3 列并排时每列只有 102px，一个"供应商登记"（62px）勉强放下，
       所以链接只能纵向排 —— 12 条链接必然占 4 行 × 3 列。
       改成"标题 + 链接横排"，每组压成 1 行：
         业务  维保服务  集成改造  自研产品  项目业绩
         关于  公司简介  资质能力  发展历程  招聘岗位
         合作  产品资料  供应商登记  采购公告  联系我们
       375px 下实测每行约 260px < 328px 可用宽，不会折行。
       三组从 136px 高降到约 90px，页脚整体少约 45px。

       ★ 标题定宽 2.6em 而不是让它自然宽度：三组标题都是 2 个字，
         自然宽度会有 ±1px 抖动，三个标题的左边缘就对不齐了。 */
  footer.ft .cols{display:block}
  footer.ft .cols .about{margin-bottom:14px}
  footer.ft .cols > div:not(.about){
    display:flex;align-items:flex-start;flex-wrap:wrap;
    gap:2px 9px;margin-bottom:5px;
  }
  footer.ft h5{
    flex:0 0 2.9em;width:2.9em;margin:0;
    line-height:26px;font-size:12.5px;
  }
  /* ★ flex-direction:row 必须显式写。
     site.css 里 `footer.ft ul{display:flex;flex-direction:column}` 是给
     桌面用的纵向列表；只写 gap 不写方向，链接会继续纵向排 ——
     实测就是这样：每组仍然是 4 行、104px，比改之前还高。

     gap 9px 而不是 11px：320px 屏上"合作"组
     （产品资料 / 供应商登记 / 采购公告 / 联系我们）总宽刚好比可用宽
     多 2px，会折成两行；间距收到 9px 即可一行放下。 */
  footer.ft ul{display:flex;flex-direction:row;flex-wrap:wrap;gap:0 9px;flex:1 1 auto}
  footer.ft ul a{
    min-height:26px;padding:0;line-height:26px;font-size:12.5px;
    white-space:nowrap;
  }
  /* 简介：**不要**加 max-width 收窄。
     第一版写了 max-width:22em（264px），结果 328px 宽的容器里
     每行少放 4 个字，简介从 113px 涨到 135px，页脚反而更高。
     收窄文字宽度 = 增加折行数，方向是反的。
     这里改成 clamp 到 3 行：公司介绍是"扫一眼"的内容，
     没人会在手机页脚逐字读完 5 行。 */
  footer.ft .about p{
    font-size:12px;line-height:1.7;max-width:none;margin-bottom:10px;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
    overflow:hidden;
  }
  /* 页脚里的地址/电话/邮箱是三行 inline 文字，行高 2 太松（inline
     style 写在模板里，这里用 !important 才能压住 —— 只针对这一处） */
  footer.ft .about div[style]{line-height:1.75 !important}

  /* 底部版权栏竖排，避免版权与备案号挤在一行反复折行 */
  footer.ft .bottom{
    flex-direction:column;gap:6px;align-items:flex-start;
    padding:14px 0 22px;line-height:1.7;
  }
  footer.ft .bottom .lks{gap:4px 14px}

  /* 主题切换按钮在窄屏收窄，给"商务合作"留出空间。
     375px 下导航区总宽：logo 约 120 + 按钮 86 + 切换 36 + 汉堡 44 + 间隙 ≈ 300，
     仍在可视宽度内；320px 级极窄屏由下方 380px 断点再收。 */
  .theme-toggle{width:36px;padding:0}
  .theme-toggle svg{width:17px;height:17px}

  /* 顶部条的城市/电话在手机上信息量低，但字号不能小到看不清 */
  .topbar .tl,.topbar .tr{font-size:12.5px}

  /* ---- 2. 字号下限 ---- */
  /* 需要阅读的正文提到 13px */
  .prose p,.prose li,.entry p,.sol p,.case p{font-size:13px;line-height:1.75}
  /* 表格内容 */
  td,th{font-size:12.5px}
  /* 表单标签与提示 */
  .field label,.fld label,.hint,span.hint{font-size:12px}

  /* 眉标（"神州高铁技术股份有限公司"这类小标题）11px → 12px */
  .eyebrow{font-size:12px}
  /* 项目类型/专业标签 10px → 11.5px。这是要读的分类信息，不是编号 */
  .t1,.tag,.fl,.cnt,.fcount{font-size:11.5px}

  /* 刻意不动的：设备编号、单位、状态标签、免责说明 —— 这些是辅助信息，
     放大会挤占主体内容的横向空间。 */

  /* ---- 3. 表单控件 ---- */
  .field input,.field select,.field textarea,
  .fld input,.fld select,.fld textarea{
    min-height:44px;font-size:16px;   /* 16px 是 iOS 的硬性要求：小于它聚焦时会自动放大页面 */
  }
  .field textarea,.fld textarea{min-height:88px}

  /* ---- 4. 横向溢出兜底 ---- */
  /* 任何长 URL、长英文单词都不该把页面撑出横向滚动条 */
  .prose,.entry,.sol,.case{overflow-wrap:anywhere;word-break:break-word}
  pre,code{overflow-x:auto;max-width:100%}
}

/* 极窄屏（iPhone SE 等 320px 级） */
@media (max-width:380px){
  .wrap{padding:0 16px}
  h1{font-size:clamp(22px,7vw,28px)}

  /* 极窄屏：整条导航要挤进 305px（320 屏减两侧 16px 内边距）。
     实测 320px 下原本溢出 13px，原因是 logo + 商务合作 + 主题切换 + 汉堡
     四者宽度之和超出。这里逐项收一档，合计省约 20px：
       标记 34→30 · 按钮内边距 12→9 · 切换 34→30 · 汉堡 44→40 · 间距 10→6 */
  .logo{gap:8px}
  .logo .mark{width:30px;height:30px}
  .logo .txt strong{font-size:14px}
  .nav-act{gap:6px}
  .nav-act .btn-p{padding-left:9px;padding-right:9px;font-size:13px}
  .theme-toggle{width:30px}
  .burger{width:40px;padding:11px 9px}
}
/* 变异测试标记 */
/* 变异测试标记 */