/* pages/products-sub.css — 产品型号列表页（bundle 4:841「PRODUCTS-list2」，1920×3302）
   断点：base 移动流式；≥768 两列；≥1280 按 1920 设计稿精确几何；1280–1920 流式收缩（frontend-execute.md §2.1/§2.3） */

/* ---------- 子页面导航（同 products.css：白底黑字、下滑吸附置顶、分隔线淡出） ---------- */
.page-sub .site-nav {
  position: sticky; /* 子页导航在文档流内，sticky 吸附不产生内容位移（fixed 会掉 96px） */
  top: 0;
  background: var(--color-bg-page);
  color: var(--color-text-1);
}

.page-sub .site-nav.is-scrolled {
  position: sticky; /* 必须 sticky：本选择器 (0,3,0) 压过 components.css 的 .site-nav.is-scrolled (0,2,0) */
  top: 0;
  height: 6rem; /* 保持 96px：子页导航在流内，缩到 88 会把下方内容顶上 8px */
}

.page-sub .site-nav__inner {
  border-color: transparent; /* 白底不显示分隔线（同首页下滑态） */
}

.page-sub .site-nav__menu a:hover {
  color: var(--color-primary);
}

.page-sub .site-nav__toggle span {
  background: var(--color-text-1); /* 移动端白底下汉堡线条转黑 */
}

/* ---------- 面包屑（4:925：x=82，y=146，行高 19，间距 10） ---------- */
.pmod-crumbs {
  margin: var(--space-12) var(--space-6) 0;
  font-size: var(--font-size-body-sm);
  letter-spacing: -.02em;
}

.pmod-crumbs ol {
  display: flex;
  flex-wrap: wrap; /* 三级路径窄屏换行 */
  align-items: center;
  gap: .375rem .625rem;
}

.pmod-crumbs svg {
  flex: none;
}

.pmod-crumbs [aria-current] {
  letter-spacing: 0;
}

/* ---------- 页头（4:918：块 x=50 内边距 32，标题 y=265，黑线 y=405，导语 y=485） ---------- */
.pmod-hero {
  position: relative;
  margin: 1.375rem var(--space-6) 0;
}

/* 图标 = i-badge 灰框（#999 填充）+ 居中 Construction 位图（设计稿 exposure -0.42 / contrast -0.3） */
.pmod-hero__icon {
  position: absolute;
  top: 0;
  right: 0;
  width: 6rem;
  height: 6rem;
}

.pmod-hero__icon > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--color-text-3);
}

.pmod-hero__icon img {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 58.286%; /* 102/175 */
  height: auto;
  filter: brightness(.75) contrast(.7);
}

.pmod-hero__title {
  padding-top: 2.5rem;
  font-size: clamp(1.75rem, 1rem + 2.6vw, var(--font-size-h1));
}

.pmod-hero__rule {
  margin-top: var(--space-8);
  border: 0;
  border-top: 1px solid var(--color-text-1); /* Line 4 黑色 1px */
}

.pmod-hero__desc {
  margin-top: var(--space-8);
  font-size: var(--font-size-body-md);
  line-height: 1.5rem; /* 24 */
}

/* ---------- ALL MODELS（4:870：标题 y=671，顶线 y=721，网格 y=761，卡 640×660 无间距） ---------- */
.pmod-grid {
  margin-top: var(--space-12);
  padding: 0 var(--space-6);
}

.pmod-grid__title {
  font-size: clamp(1.75rem, 1.1rem + 2.6vw, var(--font-size-h1));
  line-height: 1.39; /* 50/36 */
  border-bottom: 1px solid currentColor; /* Line 5 */
}

.pmod-grid__list {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: 2.5rem; /* 网格 y=761（线 721 + 40） */
}

.pmod-card {
  position: relative;
  padding: 0 1rem 2.5rem;
  background: var(--color-bg-card);
  transition: background-color .2s ease-out;
}

/* ⚠ 坑 29 同型（2026-09-20 审计发现并修）：motion.js 会给 `[data-m-stagger]` 的**直接子元素**
   打上 `data-m-anim`，而 motion.css 的 `.m-ready [data-m-anim]`（特异性 0,2,0）声明了
   `transition: opacity / translate / scale` —— 上面那条 `.pmod-card { transition: background-color .2s }`
   （0,1,0）会被**整条静默覆盖**：hover 变背景变成瞬跳，且控制台零报错。
   解法同首页 `.product-card`：选择器抬到 (0,3,0)，并把 motion 的三条过渡**原样抄回**再追加自己的属性
   （transition 简写会重置所有子属性，不抄回会连入场动效一起干掉）。
   ❗ 不要改回单类名（掉回 0,1,0 立刻又被覆盖）；❗ 不要加 contain / will-change（会出 1px 白缝）。 */
.pmod-grid .pmod-grid__list .pmod-card {
  transition:
    opacity var(--m-dur) ease var(--m-delay, 0ms),
    translate var(--m-dur) var(--m-ease) var(--m-delay, 0ms),
    scale var(--m-dur) var(--m-ease) var(--m-delay, 0ms),
    background-color .2s ease-out;
}


/* 整卡可点（2026-09-18 用户要求）：stretched link。
   关键在 .pmod-card__link **自身是 static** —— 所以它 ::after 的包含块是上面那个
   position:relative 的 .pmod-card，inset:0 才能铺满整张卡（含卡片内边距）。
   ⚠ 若日后给 .pmod-card__link 或它祖先加 position，覆盖层会塌回那个祖先的盒子。
   ⚠ 不能把这段挪到 .pmod-card__divider 里：divider 是 position:relative，
     会把包含块截在 1px 高的分隔线上。
   与 .news-card 的整卡可点是同一套做法（见 components.css / MEMORY.md）。 */
.pmod-card__link {
  color: inherit;
  text-decoration: none;
}

.pmod-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1; /* 低于红色钮的 z-index:2，高于卡片其余内容 */
}

.pmod-card__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 540 / 424;
  object-fit: cover;
}

/* 分隔线：黑线 1px，红色段线与其同位重合（默认居中 270/540，hover 两端延长盖满黑线）；箭头钮悬停于线上方 2px */
.pmod-card__divider {
  position: relative;
  height: 1px;
  margin-top: 2.5rem;
  background: var(--color-text-1); /* Line 8 */
}

.pmod-card__divider::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 25%;
  right: 25%; /* Line 9：红段 270 居中 */
  height: 3px; /* 上下居中覆于黑线，上下各探 1px */
  transform: translateY(-50%);
  background: var(--color-primary);
  transition: left .35s ease-out, right .35s ease-out;
}

.pmod-card__go {
  position: absolute;
  right: 0;
  /* ⚠ 从 calc(100% + 1px) 改为 100%：钮整体下移 1px，与红段**重叠** 1px。
     原值是「钮底与红段上缘刚好相切」（盒模型上确实 0 缝），但钮与红段各自成层、
     各自光栅化取整，共享边界又落在 .3125 这类分数上 → 被撕开一条缝：
     实测 1x 屏缝 1px（缝里是红与底色的混色 (221,131,141)）、2x/4x 屏缝 0.5px
     （缝里是卡片底色 (248,248,248)）。重叠 1px 后取整误差吃不掉它。
     ⚠ 这个 1px 不是「视觉微调」，是**消除接缝的必要量**，别再改回相切。 */
  bottom: 100%;
  z-index: 2; /* 高于整卡覆盖层（.pmod-card__link::after 的 z-index:1）—— 指针落在钮上时命中的是钮自己，保住它的 :hover 变深红 */
  display: grid;
  place-items: center;
  width: 2.8125rem; /* 45 */
  height: 2.8125rem;
  border-radius: .3125rem 0 0 0; /* 左上 5px 圆角（2026-09-18 用户要求；其余三角仍为设计稿的直角） */
  background: var(--color-primary);
  color: #fff;
  transition: opacity .2s ease-out, background-color .2s ease-out;
}

.pmod-card__go:hover {
  background: var(--color-primary-dark);
}

.pmod-card__go svg {
  width: .625rem;  /* 10 */
  height: .875rem; /* 14 */
}

.pmod-card__model {
  margin-top: 1.875rem; /* 型号 y=1289（线 1259 + 30） */
  font-size: var(--font-size-h3);
  line-height: 2rem; /* 32 */
  font-weight: var(--font-weight-medium);
  text-align: center;
}

/* 型号名后缀右上角标（pro / max）—— 与 products-detail.css 同一套规格，
   ⚠ 2026-09-23 新加：本页卡片型号（QY-60Lpro / QY-100Lpro / QF-150Xmax）也改成上角标了。
      font-size:.6em + line-height:0 + vertical-align:baseline + top:-.5em
      —— 抬到上标位置但**不参与行盒计算**，不会把卡片标题行距撑开。 */
.pmod-card__model sup {
  font-size: .6em;
  line-height: 0;
  vertical-align: baseline;
  position: relative;
  top: -.5em;
}

.pmod-card__cat {
  font-size: var(--font-size-h3);
  line-height: 2rem;
  font-weight: var(--font-weight-medium);
  text-align: center;
}

/* ---------- 售后服务（4:851：块 x=50 内边距 32，高 420，上下黑线 + 居中竖线；与 products.html 同构） ---------- */
.pmod-service {
  margin-top: var(--space-20);
  padding: 0 var(--space-6);
  border-bottom: 1px solid var(--color-text-1); /* Line 7 */
}

.pmod-service__title {
  font-size: clamp(1.75rem, 1.1rem + 2.6vw, var(--font-size-h1));
  line-height: 1.39; /* 50/36 */
  border-bottom: 1px solid currentColor; /* Line 5 */
}

.pmod-service__cols {
  position: relative;
  display: grid;
  gap: var(--space-12);
  margin-top: var(--space-8);
  padding-bottom: var(--space-12);
}

.pmod-service__col {
  position: relative;
}

.pmod-service__icon {
  position: absolute;
  top: 0;
  right: 0;
  width: 4rem;
  height: 4rem;
}

.pmod-service__col h3 {
  margin-top: var(--space-10);
  padding-right: 5rem; /* 移动端避让右上角图标 */
  font-size: var(--font-size-h3);
  line-height: 2rem; /* 32 */
}

.pmod-service__col p {
  margin-top: var(--space-8);
  font-size: var(--font-size-body-md);
  line-height: 1.5rem; /* 24 */
  color: var(--color-text-2);
}

/* ---------- 页尾标语（4:843：590 居中，Contact Us y=94） ---------- */
.pmod-slogan {
  margin: var(--space-20) auto;
  padding: 0 var(--space-6);
  text-align: center;
}

.pmod-slogan__text {
  max-width: 36.875rem; /* 590 */
  margin: 0 auto;
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: var(--font-weight-medium);
}

.pmod-slogan .btn-more {
  margin-top: var(--space-6);
}

/* ---------- 平板档（768–1279：两列网格 + 加大留白） ---------- */
@media (min-width: 768px) {
  .pmod-crumbs {
    margin-inline: var(--space-10);
  }

  .pmod-hero {
    margin-inline: var(--space-10);
  }

  .pmod-grid {
    padding-inline: var(--space-10);
  }

  .pmod-grid__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pmod-service {
    padding-inline: var(--space-10);
  }

  .pmod-slogan {
    padding: 0 var(--space-10);
  }
}

/* ---------- 桌面档（≥1280：1920 设计值精确命中） ---------- */
@media (min-width: 1280px) {
  .pmod-crumbs {
    margin: 3.125rem 0 0 5.125rem; /* (82,146)，导航 96 + 50 */
  }

  .pmod-hero {
    margin: 2.625rem 3.125rem 0; /* 块 (50,207)，与面包屑间距 42 */
    padding: 0 2rem;             /* 内容 x=82 */
  }

  .pmod-hero__icon {
    right: 1.75rem;    /* 图标 x=1667，右缘距块 28 */
    width: 10.9375rem; /* 175 */
    height: 10.9375rem;
  }

  .pmod-hero__title {
    padding-top: 3.625rem; /* y=265 */
    font-size: var(--font-size-h1);
    line-height: var(--line-height-title); /* 60/48 */
  }

  .pmod-hero__rule {
    margin-top: 5rem; /* 线 y=405（标题底 325 + 80） */
  }

  .pmod-hero__desc {
    margin-top: 4.9375rem; /* 导语 y=485 */
    max-width: 110rem;     /* 1760，1280–1920 随容器流式 */
    font-size: var(--font-size-h3);
    line-height: 2rem; /* 32 */
  }

  .pmod-grid {
    margin-top: 7.625rem; /* ALL MODELS y=671（导语底 549 + 122） */
    padding: 0 3.125rem;
  }

  .pmod-grid__title {
    padding: 0 2rem; /* 标题 x=82 */
    font-size: var(--font-size-h1);
    line-height: 3.125rem; /* 行高 50，线落在 y=50 */
  }

  .pmod-grid__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .pmod-card {
    padding: 0 7.8125% 4.25rem; /* 内框 50/640，底部留白 68 */
  }

  .pmod-card__divider {
    margin-top: 4.5625rem; /* 线 y=1258（图底 1185 + 73） */
  }

  /* 卡 2 在设计稿中即 hover 态（灰底 + 全宽红线 + 红色箭头钮），实现为 hover/focus-within 交互 */
  .pmod-card__go {
    opacity: 0;
  }

  .pmod-card:hover,
  .pmod-card:focus-within {
    background: var(--color-gray-100);
  }

  .pmod-card:hover .pmod-card__go,
  .pmod-card:focus-within .pmod-card__go {
    opacity: 1;
    /* 等红线铺完（.35s = 上面 ::after 的 left/right 过渡时长）再出现。
       只给 hover-in 加延迟：基态的 transition 无延迟，所以移出鼠标时钮先消失、
       线再收回 —— 反向顺序正好是自然的，不用另写一条规则。
       ⚠ 必须写成**两个值**：.pmod-card__go 基态的 transition 列了两条
       （opacity .2s, background-color .2s），单值的 transition-delay 会同时命中两者 ——
       那样指针移到钮上时「变深红」也会被拖 350ms（实测 532ms 才变色，2026-09-18 修）。
       第一个值对应 opacity（要延迟），第二个对应 background-color（不延迟）。 */
    transition-delay: .35s, 0s;
  }

  .pmod-card:hover .pmod-card__divider::after,
  .pmod-card:focus-within .pmod-card__divider::after {
    left: 0;
    right: 0;
  }

  .pmod-service {
    margin-top: 6.25rem; /* 售后区 y=2181（网格底 2081 + 100） */
    padding: 0 3.125rem;
    border-bottom: 0; /* Line 7 移到 __inner（见下） */
  }

  /* 售后区两条分隔线（设计 Line 5 / Line 7）都横跨区块盒 50→1870（1820），文字才内缩到 x=82：
     原先 Line 7 挂在区块 border 上 → 跨满视口 0→1920；Line 5 挂在标题上、被 __inner 的
     2rem 内缩带成 82→1838 —— 两条都偏。改法：__inner 不再承担内缩，两条线自然跨满区块盒，
     内缩交给文字元素自己（标题与两栏各 2rem）。仅 ≥1280 生效，移动/平板档不变。 */
  .pmod-service__inner {
    border-bottom: 1px solid var(--color-text-1); /* Line 7：50→1870 */
  }

  .pmod-service__title {
    padding-inline: 2rem; /* 文字 x=82；Line 5 随盒跨 50→1870 */
    font-size: var(--font-size-h1);
    line-height: 3.125rem; /* 行高 50，线落在 y=50 */
  }

  .pmod-service__cols {
    padding-inline: 2rem; /* 两栏内容仍在 x=82 / x=1010 */
    grid-template-columns: 47.1526% 47.1526%; /* 828/1756：百分比按**内容盒**解析（1820 − 2rem×2），
     不是按画板宽 1820 —— 旧值 45.4945% 算出来只有 798.88（实测），两列间 100 由 space-between 消化 */
    justify-content: space-between;
    gap: 0;
    margin-top: 3.75rem; /* 栏目 y=2291（线 2231 + 60） */
    padding-bottom: 3.75rem;
  }

  .pmod-service__cols::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: 1px;
    height: 19.375rem; /* Line 6 竖线 310（2291–2601） */
    background: var(--color-text-1);
  }

  .pmod-service__icon {
    width: 5rem; /* 80 */
    height: 5rem;
  }

  .pmod-service__col h3 {
    margin-top: 3rem; /* 标题 y=2339 */
    padding-right: 0;
  }

  .pmod-service__col p {
    margin-top: 3.125rem; /* 正文 y=2421（标题底 2371 + 50） */
  }

  .pmod-slogan {
    margin: 5rem auto; /* 标语 y=2681（售后底 2601 + 80），底部距页脚 80 */
  }

  .pmod-slogan__text {
    font-size: var(--font-size-h3);
    line-height: 2rem; /* 32 */
  }

  .pmod-slogan .btn-more {
    margin-top: 1.875rem; /* Contact Us y=2775（标语底 2745 + 30） */
  }
}

/* ---------- 移动端专属（<768，2026-09-17）——PC/平板档完全不受影响 ---------- */
@media (max-width: 767px) {
  /* 面包屑：与顶部导航的间距 48 → 18（用户规格「均上移 30px」，2026-09-17 全站 7 个有面包屑的页面统一）。
     base 的 --space-12(48) 是 1920 设计值（y=146 = 导航 96 + 50），移动端导航更矮、视觉密度更小 → 偏大。 */
  .pmod-crumbs {
    margin-top: 1.125rem; /* 18 */
    font-size: .75rem; /* 12px（2026-09-20 移动端面包屑字号；base 为 --font-size-body-sm 14px） */
  }

  /* 售后区：与 products.html 同构——图标从右上角绝对定位移到标题前（同行、上下居中），缩小 64 → 40。
     两列内容改用两行网格：第 1 行 = 图标 + 标题，第 2 行 = 正文（跨列，与标题左缘对齐）。 */
  .pmod-service__col {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: var(--space-3); /* 12：图标与标题间距 */
  }

  .pmod-service__icon {
    position: static;
    grid-column: 1;
    grid-row: 1;
    width: 2.5rem;  /* 40（原移动端 4rem） */
    height: 2.5rem;
  }

  .pmod-service__col h3 {
    grid-column: 2;
    grid-row: 1;
    margin-top: 0;    /* 图标已占首行，标题不再下移 */
    padding-right: 0; /* 无需再避让右上角图标 */
  }

  .pmod-service__col p {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  /* 页头图标（i-badge 灰框）与标题垂直居中对齐。
     原状：图标 absolute top:0 right:0 → 图标中心固定落在「块顶 + 48」；而标题有 padding-top:40、
     两行文字中心在「块顶 + 75」→ 375 实测图标比文字高 **27px**。且标题行数随视口变
     （375 两行、600 一行），把 top 写死必然对不齐，所以改结构：
     图标与标题放进**同一个网格单元**（两者重叠，与原来的绝对定位叠放等价），各自 align-self:center
     → 图标中心恒等于标题盒中心，无论标题一行还是两行。
     标题 padding-top 归零后，把原 40 的上留白拆 24 到块上，使**标题文字仍留在原位**（只让图标下移）。 */
  .pmod-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    padding-top: 1.5rem; /* 24：见上，配合标题 padding-top:0 保持文字原位 */
    /* 面包屑 → 标题的间距 = 60（2026-09-20 用户要求，仅 <768）。
       60 = 24（本 padding-top）+ 36（本 margin-top）—— 是**常量**，
       因为行高已改为只由标题决定（见下面 .pmod-hero__icon 的 margin-block）。 */
    margin-top: 2.25rem; /* 36 = 60 − 24 */
  }

  .pmod-hero__icon {
    position: relative; /* ⚠ 不能写 static：内部 svg/img 是 absolute inset:0，
                           一旦图标不再定位，它们的包含块会跳到 .pmod-hero（relative），
                           被撑成整个页头那么大。relative 既脱离 absolute 叠放、又保住包含块。 */
    grid-area: 1 / 1;
    justify-self: end;
    align-self: center;
    /* ⚠⚠ 这两行是「面包屑 → 标题 = 60」在**所有**移动视口成立的关键，别删。
       图标 96 高、与标题同格。若它照常参与行高，行高恒为 96，标题再在行内居中
       → 标题盒顶 = 行顶 + (96 − 标题盒高)/2，**随标题行数浮动**（实测）：
         320/375/414 两行(盒高 70) → 间距 60；430 起折成一行(35) → 77.5；
         600(39.48) → 75.25；767(44.92) → 72.53。
       给 margin-block 各 −3rem(48) 后，图标的**外边距盒高度 = 96 − 96 = 0**
       → 行高只由标题决定、标题盒顶恒等于行顶 → 间距成为常量 24 + 36 = 60。
       图标仍 align-self:center，其外边距盒（0 高）居中于行 = 标题中心
       → 边框盒（96 高）也以该点为中心 → **「图标中心 = 标题中心」的既有对齐不受影响**
       （实测 320→767 全档偏差 0.00，768 档不适用本规则、仍是 align-self:auto）。
       图标上下各溢出 48 − 标题盒高/2（375 下 13、767 下 25.5）——溢出到块的 padding 与
       margin 区（均为空白），且 .pmod-hero 是 <section> 内的 <header>，不触发 .section 的裁剪。 */
    margin-block: -3rem;
  }

  /* 页头右上角装饰图标：**仅移动端隐藏**（2026-09-20 用户要求）。
     上面那条 .pmod-hero__icon 规则（grid-area + margin-block:-3rem）**保持原样**：
     它的作用是让图标的外边距盒高度为 0，使「面包屑 → 标题 = 60」成为常量；
     图标隐藏后它自然失效（图标不再参与网格），但保留它 → 日后恢复图标即自动生效。
     ⚠ 网格第 1 行的高度原本就只由标题决定，故标题/规则线/导语几何全部不变。 */
  .pmod-hero__icon {
    display: none;
  }
  .pmod-hero__title {
    grid-area: 1 / 1;
    align-self: center;
    padding-top: 0;
  }

  .pmod-hero__rule {
    grid-area: 2 / 1;
  }

  .pmod-hero__desc {
    grid-area: 3 / 1;
  }
}