/* ============================================================
   list-hero.css — 列表页顶部版式（产品展厅 / 工艺图鉴 / 品牌资讯）
   2026-09-12 用户：「根据这个样式排版去优化产品列表页 工艺列表页 新闻列表页，
   英文换成对应的翻译，白色背景换成分类」
   → 1:1 复刻 brand.html 的 banner：
     ① 星空黑带 + 巨型双行大字
        第一行 = 本页英文词（PRODUCTS / CRAFT / NEWS），第二行 = NTKRIB
        第一行下 2/5 由黑渐隐到透明，第二行上移压住这段渐隐（数值与 brand-page.css 同规格）
     ② 白板压星空：白板里装的不是数据，是本页「分类」（分类 chips + 计数 + 一句说明）
   几何口径全部沿用品牌页：
     · 黑带高 = 巨字底部 + 3.5vw（由 js/list-hero.js 写 --lh-band）
     · 白板宽 = 视口 − 两侧各 200px 星条（≤1200px 收成 12vw）
   ⚠️ 三个类名是**故意复用**的，不要改成自定义类名：
     .ip-en / .ip-zh（资讯页 .nl-en / .nl-zh）、.ip-toolbar —— 它们是
     js/site-motion.js 第一幕（INTRO）的挂钩：复用后巨字与白板自动进入站内统一入场序列，
     且页面「第一幕」存在 → 开闸时刻走 0.9s 档；换成自定义类名后 INTRO 抓不到元素，
     只能等 1.5s 兜底开闸，列表卡片会明显晚出（用户曾明确说「卡片动画出现得太慢了」）。
   ============================================================ */

/* ---------- ① 黑带：压掉列表页原本的 136px 上内边距（导航 76 + 60 留白）----------
   黑带要紧贴导航下沿 —— 全站导航本来就是深色条（rgba(0,0,0,.86) + blur），两段连成一片。
   ⚠️ 用 body.lh-page（各列表页 body 上加了 lh-page）限作用域，不动 site-page.css /
      site-nav.css 里共享的 .ip-main / .nl-main —— 详情页（product.html / craft-detail.html /
      news-detail.html）也吃这两个类，改了会把它们一起带走。 */
body.lh-page .ip-main,
body.lh-page .nl-main { padding-top: var(--site-nav-h, 76px); }

.lh-sec { position: relative; overflow: clip; }
/* overflow: clip 加在 .lh-sec 上：黑带/白板的 100vw 层是以 .lh-sec 为包含块的绝对定位元素，
   而 100vw 包含滚动条宽（1440 视口下 clientWidth 只有 1425）→ 层会从 -7 伸到 1433，
   把文档撑出 8px 横向滚动。夹在 .lh-sec 上就正好裁到视口宽（实测 1433/1425 → 1425/1425）。
   ⚠️ 只写 body 的 overflow-x: clip 不管用：abs 层的包含块是 .lh-sec，body 的裁剪切不到它。 */
/* 与 JS「巨字底部 + 3.5vw」一致：留出这 3.5vw，黑带才不会溢出到白板段上 */
.lh-sec--title { padding: 0 0 3.5vw; }

.lh-banner-bg {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;                  /* 全出血：黑带要横贯整个视口宽 */
  height: var(--lh-band, 32vw);  /* JS 未跑时的兜底 */
  transform: translateX(-50%);
  background: #000;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.lh-banner-bg spline-viewer { position: absolute; inset: 0; width: 100%; height: 100%; }

.lh-title-wrap { position: relative; z-index: 1; padding: 7.18vw 4vw 0; }
/* 7.18vw = 品牌页「分区间距 6.33vw + 块内留白 0.85vw」的同款上留白 */

/* 黑带里的其它内容块（联系我们页的卡片轮播用它包住、坐在星空上）——同样要压在星空层之上 */
.lh-strip-wrap { position: relative; z-index: 1; }

.lh-giant {
  margin: 0;
  font-size: 6vw;   /* 与两行 span 同值（2026-09-12 用户：两行一起缩 40%） */
  line-height: 1;
  letter-spacing: -0.04em;
  font-weight: 700;
  color: #fff;
  text-align: center;
}
.lh-giant span { display: block; }

/* 复位 .ip-en/.ip-zh（.nl-en/.nl-zh）自带的 60px/48px 标题规格 —— 这里要用品牌页的巨字规格。
   特异性 0,2,0 > 0,1,0，能压住 site-page.css / news-list.css 里的原规则。
   2026-09-12 用户「banner的英文缩小40%」→「NTKRIB没有缩小，是一起缩小」：
   两行一起由 10vw 缩到 60% = 6vw（第一行 = 本页英文词，第二行 = NTKRIB，同字号）。 */
.lh-giant .ip-en, .lh-giant .nl-en,
.lh-giant .ip-zh, .lh-giant .nl-zh {
  margin: 0;
  font-size: 6vw;
  line-height: 1;
  letter-spacing: -0.04em;
  font-weight: 700;
  color: #fff;
}

/* 叠压（巨字整体缩小后必须重算）：目标是第二行墨迹顶仍落在第一行墨迹的 80%。
   字形实测：墨迹占行盒 13.9%~90.3%（上内边距 13.9%、墨迹高 76.4%），与字号成正比，通用解
     m = (0.139 + 0.8×0.764)·F1 − F1 − 0.139·F2 = −0.250·F1 − 0.139·F2
   桌面两行同为 6vw → m = −2.33vw（10vw 时代是 −3.9vw）。
   ⚠️ 特异性必须 ≥ 上面那条 margin:0（0,2,0）且写在其后，否则被自己抹掉（踩过）。 */
.lh-giant .ip-zh, .lh-giant .nl-zh { margin-top: -2.33vw; }

/* 蒙版：第一行「下 2/5」由黑渐隐到透明（用户原话「黑色到透明黑色」）
   实测口径（brand.html 上量的，字号/行高一致所以可直接沿用）：行盒 144px、
   墨迹落在行盒 12.5%~90.3% → 墨迹 60% = 行盒 59.2%、墨迹底 = 行盒 90.3%。
   用 mask 而不是覆盖层：覆盖层会把那一条的星空也涂黑，mask 只吃字形。 */
.lh-giant span:first-child {
  -webkit-mask-image: linear-gradient(to bottom, #000 0 59%, rgba(0, 0, 0, 0) 90%);
  mask-image: linear-gradient(to bottom, #000 0 59%, rgba(0, 0, 0, 0) 90%);
}
/* 第二行上移，压住第一行被蒙掉的最后 1/5（品牌页 2026-09-12 第二轮定的位置：
   第二行墨迹顶落在第一行墨迹的 80%）。DOM 顺序在后 → 绘制在上。 */
.lh-giant span + span { margin-top: -3.9vw; }
/* 上面这条是对「第二行不是 .ip-zh/.nl-zh」的兜底；实际生效的是前面那条 .lh-giant .ip-zh/.nl-zh */

/* ---------- ② 白板：装「分类」，两侧露星空 ---------- */
/* 2026-09-12 用户（圈了白板正下方那条黑带）「这里两个白色背景是连接的」：
   黑带必须刚好在白板下沿收住 —— 白板的白色与下方内容区的白色直接相接，中间不留黑。
   原来这段 padding-bottom 是 4.75vw（照搬品牌页），会在白板下方留一条带星空的黑色横条，
   把上下两块白底切开。改成 0 后：黑带下沿 = 白板下沿，星空只在白板左右两侧露出（仍是 200px 星条）。
   下方白底与内容区之间的呼吸靠 .ip-grid / .nl-wrap 自身的 margin-top（46px 等），是白接白。 */
.lh-sec--panel { padding: 0; }
.lh-panel-bg {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  height: 100%;
  transform: translateX(-50%);
  background: #000;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.lh-panel-bg spline-viewer { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ============================================================
   2026-09-12 单列定义：修复「四个内页文字列与卡片列对不齐」
   ------------------------------------------------------------
   原来这里是两条互不相干的宽度公式：
     · 白板 .lh-panel.ip-toolbar = calc(100% - 2*200px)（≤1200 改 100%-12vw，≤750 改 100%-40px）
     · 内容列 .ip-wrap / .nl-wrap = min(1860px, 100%-96px)（≥841 改 100%-200px，≤640 改 100%-40px）
   两者在任何宽度下都不相等，且在 1200 / 841 / 750 处各有跳变。实测偏移：
     1900 +176px ｜ 1440 +158px ｜ 1200 +20px ｜ iPad横 1024 +2px ｜ iPad Air 834 +35px ｜ iPad竖 768 +29px ｜ 手机 430 +16px
   （正数 = 白板内容框比卡片列窄，文字缩在里侧；负数方向则卡片顶出白板）
   用户 2026-09-12 看过四个候选（A 卡片缩进 / B 白板加宽 / C 内边距归零 / D 折中）后拍板 **D**：
     · 白板宽度 = 版心宽度（两侧黑带 200→100px，仍明显露出星空）
     · 板内左右留白 --col-pad 保留（标题不贴边）
     · 卡片 / 列表 / 翻页器统一收到「白板内容框」（卡片宽度 −10%）
   现在只留一套变量，白板与列内所有元素都从它派生 —— 以后改一处不会再漂开。
   ⚠️ 同一组变量在 site-page.css 里也定义了一份一样的（资讯页不引 site-page.css、
      详情页不引 list-hero.css，两边都要能自洽）；改数值时两处一起改。
   ============================================================ */
body.ip, body.lh-page {
  --col-w: min(1860px, calc(100% - 96px));   /* 版心宽度（与原 .ip-wrap 完全一致） */
  --col-pad: clamp(24px, 4vw, 88px);         /* 白板内左右留白（与原 --lh-pad 完全一致） */
}
@media (min-width: 841px) { body.ip, body.lh-page { --col-w: min(1860px, calc(100% - 200px)); } }
@media (max-width: 1200px) { body.ip, body.lh-page { --col-pad: clamp(20px, 4vw, 64px); } }
@media (max-width: 750px) { body.ip, body.lh-page { --col-pad: 16px; } }
@media (max-width: 640px) { body.ip, body.lh-page { --col-w: calc(100% - 40px); } }

/* .lh-panel.ip-toolbar：把 .ip-toolbar 自带的工具条样式（flex / 上下边框 / 24px 内边距）全部复位，
   只借它的类名进 site-motion 第一幕的入场序列。 */
.lh-panel.ip-toolbar {
  position: relative;
  z-index: 1;
  display: block;
  gap: 0;
  flex-wrap: nowrap;
  border: 0;
  box-sizing: border-box;      /* 显式声明：白板宽 + 内边距必须是 border-box，否则两侧星条被挤没 */
  margin: 0 auto;
  background: #fff;
  width: var(--col-w);         /* ← 与版心同宽（原 calc(100% - 2 * var(--lh-strip))） */
  padding: 2.6vw var(--col-pad) 3vw;
}
@media (max-width: 750px) {
  .lh-panel.ip-toolbar { padding: 7vw var(--col-pad) 8vw; }
}

/* 白板之外、同属这条版心的元素：统一收到「白板内容框」（左右各缩 --col-pad）。
   漏掉它们的话，卡片/列表/翻页器会落在版心边缘（比上面的文字宽 2×pad），就是用户圈出来的那处不齐。 */
.lh-page .ip-wrap > .ip-grid,
.lh-page .ip-wrap > .ct-grid,
.lh-page .ip-wrap > .ip-pager,
.lh-page .nl-wrap > * {
  margin-left: var(--col-pad);
  margin-right: var(--col-pad);
}

.lh-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.lh-panel-zh { margin: 0; font-size: 22px; line-height: 1.4; font-weight: 700; color: #14151a; letter-spacing: .01em; }

/* 分类 chips —— 三个列表页统一在这里定义（资讯页不引 site-page.css，本页要给全量样式）。
   .lh-panel 作用域特异性 0,2,0 > site-page.css 的 .ip-chip 0,1,0，所以产品/工艺页同样吃这份，
   三页外观一致。 */
.lh-panel .ip-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.lh-panel .ip-chip {
  padding: 10px 20px;
  border: 1px solid rgba(20, 21, 26, .18);
  background: #fff;
  color: #14151a;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  transition: border-color .25s, background .25s, color .25s;
}
.lh-panel .ip-chip:hover { border-color: #14151a; }
.lh-panel .ip-chip.is-active { background: #14151a; border-color: #14151a; color: #fff; }
/* 两级领型筛选：一级 = 领型大类（白底描边药丸，选中反黑）；二级 = 细分领型（纯文字链 + 「细分领型」前缀标签，选中只在下沿出线）。
   2026-09-15 用户「一级导航栏和二级导航栏没有区分」——原来两级只隔一条虚线、样式一模一样。
   ⚠️ 这里带 .lh-panel 前缀，权重 (0,2,0) 高于 products.html 内联块里的同名规则；改这一处即可。 */
.lh-panel .ip-chips--sub { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(20, 21, 26, .12); align-items: baseline; }
.lh-panel .ip-chips--sub::before {
  content: "细分领型";
  margin-right: 6px; align-self: center;
  font-size: 11px; font-weight: 700; letter-spacing: .1em; color: rgba(20, 21, 26, .38);
}
.lh-panel .ip-chip--sub {
  padding: 4px 2px; border: 0; border-bottom: 1px solid transparent; border-radius: 0; background: transparent;
  color: rgba(20, 21, 26, .62); font-size: 12px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 6px;
}
.lh-panel .ip-chip--sub:hover { border-color: transparent; border-bottom-color: rgba(20, 21, 26, .35); color: #14151a; }
.lh-panel .ip-chip--sub.is-active { background: transparent; border-color: transparent; border-bottom: 2px solid #14151a; color: #14151a; font-weight: 700; }
.lh-panel .ip-chip--sub i { font-style: normal; font-size: 11px; opacity: .55; }

.lh-panel .ip-count { color: rgba(20, 21, 26, .55); font-size: 13px; }
/* 白板右上角常驻信息（联系我们页放电话/邮箱；列表页放计数）
   ⚠️ 链接选择器必须带上 .lh-panel 前缀（= 0,2,1）：site-page.css 里
   `body.ip a { color: inherit }` 是 0,1,2，光写 `.lh-panel-note a`（0,1,1）压不住它，
   电话/邮箱会被按成跟旁边说明一样的灰（实测 computed = rgba(20,21,26,.55)）。 */
.lh-panel-note { color: rgba(20, 21, 26, .55); font-size: 13px; }
.lh-panel .lh-panel-note a { color: #14151a; font-weight: 700; text-decoration: none; border-bottom: 1px solid rgba(20, 21, 26, .25); }
.lh-panel .lh-panel-note a:hover { border-bottom-color: #14151a; }
.lh-panel-lead { margin: 26px 0 0; color: rgba(20, 21, 26, .55); font-size: 13px; line-height: 1.9; text-wrap: pretty; }

/* ---------- 手机档 ---------- */
@media (max-width: 750px) {
  .lh-title-wrap { padding: 16vw 5vw 0; }
  /* 两行一起：15vw 的 60% = 9vw */
  .lh-giant, .lh-giant .ip-en, .lh-giant .nl-en,
  .lh-giant .ip-zh, .lh-giant .nl-zh { font-size: 9vw; }
  /* 叠压按 m = −0.250·F1 − 0.139·F2（F1=F2=9vw）→ −3.50vw */
  .lh-giant span + span,
  .lh-giant .ip-zh, .lh-giant .nl-zh { margin-top: -3.50vw; }
  .lh-panel-zh { font-size: 18px; }
  .lh-panel-lead { margin-top: 20px; }
}

/* 尊重系统「减少动态效果」：不动画（入场交给 site-motion.js 的静态分支） */
@media (prefers-reduced-motion: reduce) {
  .lh-panel .ip-chip { transition: none; }
}

/* ============================================================
   banner 巨字入场：改成与品牌介绍页「逐字一致」的 CSS 动画（2026-09-12 用户：
   「还是卡顿，以品牌介绍内页为标准」）

   为什么必须搬出 GSAP：品牌页 .bp-giant span 走的是 CSS transition（合成器动画），
   而本站四个内页的这两行字原本由 site-motion.js 的 GSAP 逐帧写 transform（主线程动画）。
   星空场景（2.2MB spline-viewer + 2 个 WebGL 场景）启动时会占住主线程约 1 秒
   —— 实测 longtask 1006ms@540ms；同一秒里逐张截图比对，画面差异 0.43% → 0.16% → 0.00%
   完全静止。主线程动画在这种冻结里必然「卡死」，合成器动画则照跑不误。

   数值与 brand-page.css 的 .bp-giant span / nth-child(2) 完全一致：
   48px 上浮、.95s、cubic-bezier(.2,.65,.25,1)、第二行 .14s 延迟。
   动画值在层叠顺序里高于行内样式（site-motion.js 写的 inline transform 会被它盖住），
   所以不需要改动那个文件；fill:both 保证终态保持，不会回弹。
   ⚠️ 别改成 transition 写法：元素初始态靠 :not(.is-in) 时需要 JS 加类，动画写法免 JS。
   ============================================================ */
.ip-en, .ip-zh, .nl-en, .nl-zh {
  animation: lh-giant-rise .95s cubic-bezier(.2, .65, .25, 1) both;
}
.ip-zh, .nl-zh { animation-delay: .14s; }
@keyframes lh-giant-rise {
  from { opacity: 0; transform: translateY(48px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .ip-en, .ip-zh, .nl-en, .nl-zh { animation: none; }
}

/* ============================================================
   白板（.lh-panel，白底分类/说明板）不做入场动效（2026-09-12 用户：
   「红色框的白色背景是个背景，不要有效果，所有内页都一样」）

   它身上挂着 .ip-toolbar —— 正是 site-motion.js 第一幕的动画目标
   （INTRO: { sel: '.ip-toolbar', y: 18, d: .4 }），site-motion.css 的 .mjs 预隐
   也把它一起藏起来，所以每次进内页都看到这块白板「上浮 + 淡入」。
   用户要的是：白板就是页面的背景板，静态在那儿、不参与任何演出。
   用 !important 压掉 GSAP 写的行内起始态/补间（author important > 行内），
   内容（分类 chips、计数、说明）随板一起常显，不需要改 site-motion.js。 */
.lh-sec--panel,
.lh-sec--panel .lh-panel,
.lh-sec--panel .lh-panel *,
.lh-white-pad { opacity: 1 !important; transform: none !important; }
.lh-sec--panel .mo-on, .lh-sec--panel .mo-on * { transition: none !important; }
/* ⚠️ .lh-white-pad 只冻结自己（联系我们页的白板）—— 不能写 .lh-white-pad *，
   否则会把里面跑马灯的 transform 动画（.ct-track/.ct-set 的 CSS 动画）一起压死。 */

/* ============================================================
   列表卡片也做成「直接就在那儿」（2026-09-12 用户看产品网格「图一出来的太慢」→ 采纳
   「和白板一样零动效直接显示」）：

   这些卡片被 site-motion.js 预隐（html.mjs）并用 gsap.set 写成 opacity:0 + 上浮 18px，
   要等第二幕开闸（~1.1s，且它认领这批动态插入的节点更晚）才淡入 —— 用户要的是它们别等。
   用 !important 一次压掉起始态与补间（author important > 行内），三个列表页同口径。

   ⚠️ 特异性要让给 hover 缩放：#productGrid .ip-tile:hover .ph img（1,3,1）> 这里的
   #productGrid .ip-tile .ph img（1,2,1），所以鼠标悬停的图片微放大照常生效。 */
#productGrid .ip-tile,
.ip-grid > *,
.nl-row,
#productGrid .ip-tile .ph img,
.ip-grid > * .ph img,
.nl-row .nl-img img { opacity: 1 !important; transform: none !important; }