/* ===========================================================
   grapheneinfrared.com /technology/ — Mobile layout fix (candidate)
   加载条件: 仅 /technology/ 通过 gr-design-fix.php 条件入队加载
   版本: 20260908c (CSS) / 20260908b (JS) — 第七轮: 表可读性小修
   候选日期: 2026-09-08
   ===========================================================
   2026-09-08 第四轮修复说明(基于第三轮 Codex 复审发现的 A4 回归):

   第三轮实测发现候选旧版 `#grNav{display:none!important}` 会连 #grBurger 汉堡
   一起隐藏 —— 因为汉堡是 #grNav 的子元素(DIV.gr-ni > NAV#grNav), 隐藏整个 nav
   等于隐藏汉堡, 移动菜单(#grMob)因此无法打开。这是发布前必须修的回归。

   本轮修复(本地候选文件, 未上传/未发布):
     1) 移除 `#grNav{display:none!important}`。桌面链接行 .gr-links(含 Home /
        About / Products / Technology / OEM·ODM / Blog / Get Quote)已随主题
        `@media (max-width:1000px){.gr-links,.gr-ncta{display:none!important}}`
        被隐藏; 候选仅在 ≤768px 再显式隐藏一次以防万一, 但绝不碰 #grNav,
        故 .gr-ni 内的 #grBurger 汉堡保留、移动菜单可正常开合。
     2) 表/ICB 源级约束（第七轮 Codex 最终复审修订）: 第四轮曾用
        table-layout:fixed + word-break:break-word 在约 349px 把表压入视口,
        虽 clippedCells=0, 但 THERMAL RESPONSE / CONVERSION / CONSTRUCTION /
        INSTALLATION 等普通英文单词从中间断裂, 不符合技术页可读性。
        本轮恢复:
          · table-layout:auto (列宽由内容决定, 不再等分压扁)
          · min-width:720px (680–760px 区间取中点, 满足 4 列最小可读宽)
          · 移除 word-break:break-word (禁止强拆普通英文单词)
          · 保留 overflow-wrap:break-word 作不可断词的兜底(不影响普通英文)
          · 首列 white-space:normal 允许长标签正常换行
          · .gr-tbl-wrap{max-width:100%;overflow-x:auto} —— 360/390/412 视口
            下表超出手机宽度, 只在包裹层内横向滚动; 页面本身不滚。
        禁止缩小为卡片、不删节缩写、不改 HTML 骨架。
     3) "Further Reading" 网格改 1 列由 gr-tech-mobile.js 负责(沿用, 有效)。

预期效果(真机 / headful):
    ICB = 视口宽(360/390/412), #grNav = 视口不溢出, #grBurger 可见可点,
    移动菜单 开→关→再开 正常, 固定 WA(.gr-wa) 四边落屏内。
    表按列内容自然分宽, wrap 内可独立横向滚动, 普通英文单词不再被强拆。
   =========================================================== */

@media (max-width: 768px) {
  /* ── ICB/布局视口钳制（Codex 第五轮复审明确授权的对照方案）──────────────
     背景：Chrome 移动仿真下，页面 min-content 最宽元素会把初始包含块(ICB)
     撑到 596px 且不回收，导致固定定位元素（WA 按钮 .gr-wa、菜单 ✕）按 596px
     布局坐标落在 390px 可见区之外 —— 买家实际点不到。
     本规则把根元素横向裁切，使 ICB 收敛回视口宽，固定元素回到可见屏内。
     作用范围：本文件仅在 /technology/ 由 is_page('technology') 条件入队加载，
     因此是「单页、单资源」钳制，不是全站 overflow-x:hidden 遮盖。
     使用 clip 而非 hidden：clip 不创建滚动容器，不影响 position:sticky，
     也不会把纵向滚动行为改为 scroll。 */
  html { overflow-x: clip; }

  /* 仅隐藏桌面链接行; #grBurger 与 .gr-links 同为 .gr-ni 的子节点(兄弟关系),
     隐藏链接行不影响汉堡 —— 修复上轮连汉堡一起隐藏、破坏移动菜单的回归 */
  .gr-links { display: none !important; }

  /* 移动菜单遮罩须高于固定导航: 主题 #grNav z-index:3000 > #grMob z-index:2999,
     导致导航条压在菜单之上、遮住右上角 ✕(#grMobClose 位于 top:22/right:24, 恰在
     导航 90px 带内), 用户无法指针点击 ✕ 关闭菜单(汉堡 onclick 仅 add('open')、无
     背景点击关闭) —— 这是线上既有缺陷。候选将遮罩抬到 3001, 使整屏遮罩盖住导航、
     ✕ 可点, 菜单开→关→再开成立。仅 /technology/ 加载, 不影响其他页。 */
  .gr-mob { z-index: 3001 !important; }

  /* 表：保留 .gr-tbl-wrap 内部横向滚动，恢复列宽由内容决定。
     第七轮 Codex 最终复审阻断: 第四轮 table-layout:fixed + word-break:break-word
     把四列表压到约 349px, 程序 clippedCells=0 不能替代人眼可读性, 普通英文单词
     (THERMAL RESPONSE / CONVERSION / CONSTRUCTION / INSTALLATION) 从中间断裂。
     本轮恢复 auto 布局 + min-width:720px(680–760px 区间中点) + 移除 word-break。
     .gr-tbl-wrap 内部横向滚动不外溢页面; 整个页面横向不滚。
     overflow-wrap:break-word 仅对真正不可断词起兜底(URL/连字符超长字符串),
     不会强拆普通英文单词。 */
  .gr-tbl-wrap { max-width: 100%; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table.gr-tbl { table-layout: auto; min-width: 720px; }
  table.gr-tbl th, table.gr-tbl td { padding: 12px 14px; overflow-wrap: break-word; }
  table.gr-tbl td:first-child { white-space: normal; }
}