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

/* ---------- 子页面导航（设计稿「导航-白」：白底黑字、下滑吸附置顶、分隔线淡出） ---------- */
.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); /* 白底下 hover 主红（覆盖浅灰） */
}

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

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

.plist-crumbs ol {
  display: flex;
  align-items: center;
  gap: .625rem;
}

.plist-crumbs svg {
  flex: none;
}

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

/* ---------- 页头（4:1026：块 x=50 内边距 32，标题 y=78，分隔线 y=198，导语 y=278） ---------- */
.plist-hero {
  position: relative;
  margin: 1.375rem var(--space-6) 0;
}

.plist-hero__icon {
  position: absolute;
  top: 0;
  right: 0;
  width: 6rem;
  height: 6rem;
  color: var(--color-text-3); /* 设计稿描边灰 #999 */
}

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

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

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

/* ---------- 产品网格（4:964：4×960 + 全宽 1920，行高 960，间距 0） ---------- */
.plist-grid {
  margin-top: var(--space-12);
}

.plist-grid__list {
  display: grid;
  grid-template-columns: 1fr;
}

.plist-card {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--color-text-1);
}

.plist-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 遮罩：默认无遮罩（亮图 + 图标 + 名称）；hover 均匀 40% 黑淡入（设计稿卡 1 即 hover 态展示）。
   z-index 必须高于 <img>（absolute 同级按树序 img 在伪元素后绘制，会被盖住导致 hover 无效） */
.plist-card::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: rgba(0, 0, 0, .4);
  opacity: 0;
  transition: opacity .2s ease-out;
}

.plist-card:hover::before,
.plist-card:focus-within::before {
  opacity: 1;
}

.plist-card__icon {
  position: absolute;
  z-index: 1;
  top: 14.375%;   /* y=138/960 */
  left: 8.646%;   /* x=83/960 */
  width: 13.542%; /* 130/960 */
  aspect-ratio: 1;
}

.plist-card__icon > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: #fff; /* 白色描边底板 */
}

.plist-card__icon img {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 58.462%; /* 76/130 */
  height: auto;
}

.plist-card__title {
  position: absolute;
  z-index: 1;
  top: 31.042%; /* y=298/960 */
  left: 8.646%;
  max-width: 80%;
  font-size: clamp(1.5rem, 1rem + 1.7vw, var(--font-size-h2));
  line-height: 1.39; /* 50/36 */
  color: #fff;
}

.plist-card .btn-more {
  position: absolute;
  z-index: 1;
  top: 41.458%; /* y=398/960 */
  left: 8.646%;
  color: #fff;
}

/* 卡片 Learn More 的滑动下划线（设计稿 Line 333 白色）——
   2026-09-18 已上移到 components.css 成为全站「文字+箭头」按钮的通用规则
   （.btn-more:not(.btn-more--glass) > span:not(.btn-more__icon)::after）。
   此处 .btn-more 的 color:#fff 让 currentColor 解析为白色，与原来逐像素一致，故删掉本页重复规则。 */

/* 全宽卡（1920×960）：内容 x=83/1920，图标同为 130px 设计值 → 130/1920 */
.plist-card--wide .plist-card__icon,
.plist-card--wide .plist-card__title,
.plist-card--wide .btn-more {
  left: 4.323%;
}

.plist-card--wide .plist-card__icon {
  width: 6.771%; /* 130/1920（窄卡为 130/960=13.542%，全宽卡按页宽折算） */
}

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

.plist-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 */
}

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

.plist-service__col {
  position: relative;
}

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

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

.plist-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:936：590 居中，Contact Us y=94） ---------- */
.plist-slogan {
  margin: var(--space-20) auto;
  padding: 0 var(--space-6);
  text-align: center;
}

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

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

/* 标语区 Contact Us：设计稿 Line 332 原为**常驻**下划线，
   2026-09-18 用户决定改为与全站一致的 hover 滑出（由 components.css 通用规则处理），
   故删掉此处的 text-decoration（否则 hover 时会出现两条线）。 */

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

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

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

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

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

  /* Learn More：桌面默认隐藏，hover/focus 卡时淡入（移动端常显，触屏无 hover） */
  .plist-card .btn-more {
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease-out, visibility .2s ease-out;
  }

  .plist-card:hover .btn-more,
  .plist-card:focus-within .btn-more {
    opacity: 1;
    visibility: visible;
  }

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

  .plist-hero__icon {
    right: 2.0625rem;  /* 图标 x=1612，右缘距块 33 */
    width: 10.9375rem; /* 175 */
    height: 10.9375rem;
  }

  .plist-hero__title {
    padding-top: 4.875rem; /* y=78 */
    font-size: var(--font-size-h1);
  }

  .plist-hero__rule {
    margin-top: 3.75rem; /* 线 y=198（标题底 138 + 60） */
  }

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

  .plist-grid {
    margin-top: 5rem; /* 网格 y=641 */
  }

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

  .plist-card--wide {
    grid-column: 1 / -1;
    aspect-ratio: 2; /* 1920×960 */
  }

  .plist-card__title {
    font-size: var(--font-size-h2);
  }

  .plist-service {
    margin-top: 6.25rem; /* 售后区 y=3621（网格底 3521 + 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 生效，移动/平板档不变。 */
  .plist-service__inner {
    border-bottom: 1px solid var(--color-text-1); /* Line 7：50→1870 */
  }

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

  .plist-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=110（线 50 + 60） */
    padding-bottom: 3.75rem;
  }

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

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

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

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

  .plist-slogan {
    margin: 5rem auto; /* 标语 y=4121（4041+80），底部距页脚 80 */
  }

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

/* ---------- 移动端专属（<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），移动端导航更矮、视觉密度更小 → 偏大。 */
  .plist-crumbs {
    margin-top: 1.125rem; /* 18 */
    font-size: .75rem; /* 12px（2026-09-20 移动端面包屑字号；base 为 --font-size-body-sm 14px） */
  }

  /* 面包屑 → 头部标题的间距 = 60（2026-09-20 用户要求，仅 <768）。
     base 的 .plist-hero margin-top 1.375rem(22) 是 1920 设计值 → 移动端按 60 收窄。
     （标题自身的 padding-top 64 在盒内，不计入本间距。） */
  .plist-hero {
    margin-top: 3.75rem; /* 60 */
  }
  /* 页头右上角装饰图标：**仅移动端隐藏**（2026-09-20 用户要求）。
     图标沿用 base 的 absolute top:0 right:0（96×96），
     该图标在 <768 不参与布局流，隐藏它不会改变任何元素的几何。 */
  .plist-hero__icon {
    display: none;
  }

  /* ① 产品卡：标题折行叠字修复 + 默认呈现 hover 态遮罩
     问题：标题与 Learn More 原为卡高百分比绝对定位（31.042% / 41.458%，间距仅卡高 10.4%≈39px），
     而标题字号不随卡片缩小（24px，行高 33.4）→ 折成两行时按钮压到文字上。
     修法：两者回归文档流，由内容撑开、间距固定。 */
  .plist-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* 防止按钮被拉伸成整行红盒 */
    padding: 31.042% 8.646% 6%; /* 顶部沿用原标题 y=298/960，左右沿用内容 x=83/960 */
  }

  .plist-card__title {
    position: static;
    max-width: 100%;
  }

  .plist-card .btn-more {
    position: static;
    margin-top: 1.25rem; /* 20：标题底到按钮的固定间距（替代原卡高百分比） */
  }

  /* 全宽卡在移动端与普通卡同构：base 层的 .plist-card--wide 比例（4.323% / 6.771% = x/1920）
     只对 ≥1280 的 1920 宽全宽卡有意义，泄漏到 <768 会让图标缩成 25px 并左移 16px。 */
  .plist-card--wide .plist-card__icon,
  .plist-card--wide .plist-card__title,
  .plist-card--wide .btn-more {
    left: 8.646%; /* 与普通卡一致 */
  }

  .plist-card--wide .plist-card__icon {
    width: 13.542%; /* 与普通卡一致（51/375） */
  }

  /* 移动端无 hover，默认呈现 PC hover 态遮罩（40% 黑），标题/图标在亮图上始终可读 */
  .plist-card::before {
    opacity: 1;
  }

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

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

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

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