/* ============================================================
   Product-Detail Section 2「产品系列推荐 / Featured Products」富文本块
   页面：app/web/{cn,en}/product-detail.shtml（<section class="pd2-params" id="featured">）
   视觉源：设计基准 html/well-t-demo-cn/css/markets-detail-table.css（Figma Frame 476:19537，
          markets-detail 页 Section 3 的同一张表）；en 版与该文件仅差标题字号，见 .pd2-params__title
   Figma：476:19537

   关键事实（决定本文件全部选择器写法）：
   本区块自 2026-09 起改由 CMS 富文本（wt_cms_article.content）驱动，表格由运营粘贴生成。
   粘贴内容 **不带任何 class、没有 <thead>、没有 <colgroup>**，也没有
   .mkd-table__group / .mkd-table__star / .mkd-table__unit / .mkd-table__count 这些 span
   （编辑器粘贴时丢弃），原本的内联样式只剩 text-align / line-height / width 三类。
   故设计规则里的类选择器一律改写为「结构 / 元素选择器」，统一收在 .pd2-params__content 下。
   三类行按结构判别（依据线上 /cn/product-detail/249 实测 DOM：16 行 = 1 表头 + 2 分组 + 13 数据）：
     · 表头行：<th> × 9 —— 位于 tbody 内第一行（没有 thead）
     · 分组行：整行只有 1 个 <td>（跨全列的宽条）
     · 数据行：9 个 <td>，第一列内含 18px 星标图
   判别依据是 :only-child，**不能用 [colspan]**：wangEditor 给每个普通单元格都写了
   colspan="1"（实测 117 个数据单元格全部带该属性），只有跨列单元格才写 colspan="9"，
   故 td:not([colspan]) 会命中 0 个元素。:only-child 只看元素结构、不依赖属性值，
   也不依赖表格列数。同理不需要 :has()，更不需要给富文本加 class。

   动效：只有 hover 状态切换（行底色/文字色 + 星标淡入）走 transition；
   滚动入场由模板的 data-m-anim 走 motion.css 的 [data-m-anim] 通用规则，本文件不声明。
   ============================================================ */

.pd2-params {
  position: relative;
  width: 100%;
  /* 设计色为 --color-soft-gray(#F8F8F8)；设计基准文件自身取 --color-surface(#F7F8FA) 近似，
     与 markets-detail 页保持同底色 */
  background: var(--color-surface);
  padding: 128px 0 152px; /* 设计 PC 档三段 padding，无对应 --space-* 令牌 */
}

.pd2-params__inner {
  /* 设计：表宽 1600（Figma x=160）+ 左右 24 padding；--container-content(1200) 会把表压窄，
     --container-max(1920) 会放得更宽，均非设计值，故写设计数值 */
  max-width: 1648px;
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.pd2-params__title {
  margin: 0 0 88px; /* 设计 88px，落在 --space-3xl(64) 与 --space-4xl(80) 之间，无令牌 */
  font-family: var(--font-primary);
  font-size: 56px; /* 设计 cn 定值（en 版为 clamp(1.75rem, 3.9583vw, 4.75rem)） */
  font-weight: 600;
  line-height: 1.18; /* 设计值，无对应令牌（--line-height-heading 1.25 / --line-height-display 1.15） */
  letter-spacing: -0.02em;
  color: var(--color-primary);
  text-align: left; /* 设计 PC 左对齐，≤1200 转居中，见响应式段 */
}

/* 富文本容器：横向溢出由本容器承担（旧「左右滑动查看完整表格」提示不再保留 ——
   富文本里可能完全没有表格，固定提示会误导） */
.pd2-params__content {
  overflow-x: auto;
  font-size: var(--font-size-base);
  line-height: var(--line-height-body);
  color: var(--color-text);
}

/* --- 富文本裸元素兜底（运营粘贴内容不带 class，只能按标签选） --- */
.pd2-params__content p {
  margin: 0 0 var(--space-md);
}

/* 富文本独立图片（正文插图）：块级居中 */
.pd2-params__content img {
  height: auto;
  margin: 0 auto var(--space-md);
}

/* 表格单元格内的图片一律按行内元素处理，覆盖上一条块级居中规则 ——
   否则单元格里的星标会 display:block 独占一行，还多出一条 16px 下边距 */
.pd2-params__content table img {
  display: inline-block;
  margin: 0;
  vertical-align: -3px; /* 设计 .mkd-table__star 的 vertical-align */
}

/* --- 表格本体 --- */
.pd2-params__content table {
  /* 粘贴内容自带内联 width:auto；auto 实际按 shrink-to-fit 收缩，内容窄于容器时
     表格靠左、右侧留空（2026-09-29 实测 /cn/product-detail/249），与设计基准的
     width:100% 不符，须 !important 覆盖内联值 */
  width: 100% !important;
  min-width: 1080px; /* 设计：窄屏不塌陷，由 .pd2-params__content 的 overflow-x 横向滚动承托 */
  margin: 0;
  border-collapse: collapse;
  /* 粘贴内容没有 <colgroup>，列宽改由表头行（tbody 第一行的 th）承载 ——
     fixed 布局下列宽只取第一行，与 colgroup 语义一致 */
  table-layout: fixed;
  font-size: var(--font-size-base);
}

/* 列宽：设计 colgroup 的 9 列比例，改挂到表头行单元格上 */
.pd2-params__content table tbody th:nth-child(1) { width: 8.5%; }
.pd2-params__content table tbody th:nth-child(2) { width: 18.5%; }
.pd2-params__content table tbody th:nth-child(3) { width: 7.5%; }
.pd2-params__content table tbody th:nth-child(4) { width: 13%; }
.pd2-params__content table tbody th:nth-child(5) { width: 11.5%; }
.pd2-params__content table tbody th:nth-child(6) { width: 9%; }
.pd2-params__content table tbody th:nth-child(7) { width: 9%; }
.pd2-params__content table tbody th:nth-child(8) { width: 9%; }
.pd2-params__content table tbody th:nth-child(9) { width: 13%; }

/* 第一列（产品型号）不换行：fixed 布局下 8.5% 窄列会把型号折成两行（2026-10-04 需求 5），
   表头行与数据行一并生效；型号均短（S-830 量级），8.5% 容得下 */
.pd2-params__content table tbody th:nth-child(1),
.pd2-params__content table tbody td:nth-child(1) {
  white-space: nowrap;
}

/* --- 表头行（9 个 <th> 在 tbody 里，没有 thead） --- */
.pd2-params__content table tbody th {
  background: var(--color-primary);
  color: var(--color-white);
  font-family: var(--font-primary);
  font-size: clamp(1rem, 0.16vw + 0.96rem, 1.25rem);
  font-weight: 600;
  line-height: var(--line-height-small);
  letter-spacing: -0.4px;
  padding: 12px var(--space-sm); /* 设计 12px 8px；8px 即 --space-sm */
  text-align: left;
}

/* 设计表内 <sub> 的兜底（现役内容用 ₂ 字符，此规则供其它型号数据使用） */
.pd2-params__content table sub {
  font-size: clamp(0.75rem, 0.04vw + 0.74rem, 0.80625rem);
  vertical-align: baseline;
}

/* --- 分组行：整行只有 1 个 <td>（跨全列的宽条） --- */
.pd2-params__content table tbody td:only-child {
  background: var(--color-soft-blue);
  border-bottom: 1px solid var(--color-placeholder);
  font-family: var(--font-primary);
  font-size: clamp(1rem, 0.16vw + 0.96rem, 1.25rem);
  font-weight: 600;
  line-height: var(--line-height-small);
  letter-spacing: -0.4px;
  color: var(--color-text);
  padding: 12px var(--space-xl); /* 设计 12px 32px；32px 即 --space-xl */
  text-align: left;
}

/* --- 数据行：所在行有多个 <td> 的普通单元格 --- */
.pd2-params__content table tbody td:not(:only-child) {
  background: var(--color-white);
  font-family: var(--font-primary);
  font-size: clamp(1rem, 0.08vw + 0.98rem, 1.125rem);
  font-weight: 300;
  line-height: var(--line-height-small);
  letter-spacing: -0.36px;
  color: var(--color-text);
  padding: 12px var(--space-sm); /* 设计 12px 8px；8px 即 --space-sm */
  text-align: left;
  transition: background-color var(--duration-base) var(--ease-standard),
              color var(--duration-base) var(--ease-standard);
}

/* --- 数值列居中（设计 n+3）：必须排在上面两条单元格规则之后
       （与数据行规则同为 (0,2,3) 特异性，靠源码顺序取胜）
       注意：粘贴内容给每个单元格都带了内联 text-align（数值列恰好也是 center），
       内联优先级高于样式表，故本规则只对「没有内联 text-align 的单元格」生效 --- */
.pd2-params__content table tbody th:nth-child(n + 3),
.pd2-params__content table tbody td:nth-child(n + 3) {
  text-align: center;
}

/* --- 行 hover：数据行变 --color-secondary 绿底白字
       分组行整行只有 1 个单元格，被 :not(:only-child) 排除；表头是 th 也不匹配，
       故两者都不会被 hover 染绿，无需 :has() --- */
.pd2-params__content table tbody tr:hover td:not(:only-child) {
  background: var(--color-secondary);
  color: var(--color-white);
}

/* --- 箭头（数据行第一列）：设计基准 mkd-table-star.svg（白色右箭头），行 hover 淡入 ---
   图标由前台 ::before 自动渲染，运营在 CMS 里只填型号文本，无需粘贴或输入任何图标。
   分组行的单元格也是 :first-child，用 :not(:only-child) 排除，
   避免分组行里插了图片时被误渲染 */
.pd2-params__content table tbody td:first-child:not(:only-child)::before {
  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M12.735 9.171C12.7026 9.3078 12.6342 9.432 12.5352 9.531L6.525 15.543C6.2316 15.8364 5.7564 15.8364 5.4648 15.543C5.1732 15.2496 5.1714 14.7744 5.4648 14.4828L10.9458 9L5.4648 3.5172C5.1714 3.2238 5.1714 2.7486 5.4648 2.457C5.7582 2.1636 6.2334 2.1636 6.525 2.457L12.5352 8.4672C12.726 8.658 12.7926 8.9262 12.735 9.171Z" fill="white"/></svg>');
  margin-right: 14px;
  vertical-align: -3px; /* 设计 .mkd-table__star 的 vertical-align */
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-standard);
}

.pd2-params__content table tbody tr:hover td:first-child:not(:only-child)::before {
  opacity: 1;
}

/* 内容里粘贴残留的箭头 <img>（从设计基准页复制来的）一律隐藏——
   图标已由 ::before 自动渲染，不隐藏会叠成双箭头
   （2026-09-30 实测 250 残留 4 个、265 残留 13 个） */
.pd2-params__content table tbody td:first-child:not(:only-child) img {
  display: none;
}

/* ==================== 响应式：断点与设计基准一致（1200 / 768） ==================== */
@media (max-width: 1200px) {
  .pd2-params {
    padding: 88px 0 110px; /* 设计中档，无对应令牌 */
  }

  .pd2-params__title {
    font-size: clamp(1.5rem, 0.65vw + 1.35rem, 2.5rem);
    line-height: 1.18;
    letter-spacing: -0.02em;
    margin-bottom: var(--space-3xl); /* 设计 64px = --space-3xl */
    text-align: center; /* 设计：≤1200 标题转居中（PC 为左对齐） */
  }
}

@media (max-width: 768px) {
  .pd2-params {
    padding: 72px 0 var(--space-4xl); /* 设计 72/80；80px = --space-4xl */
  }

  /* 设计在 ≤768 写了两条 .mkd-table__title 字号，后者覆盖前者，此处只保留生效值 */
  .pd2-params__title {
    font-size: clamp(1.625rem, 8vw, 2.25rem);
    line-height: 1.18;
    letter-spacing: -0.02em;
    margin-bottom: var(--space-2xl); /* 设计 48px = --space-2xl */
  }

  .pd2-params__content table {
    min-width: 960px;   /* 设计：移动端表格最小宽 */
    /* 设计注释：fixed 布局下列宽被锁死，第一列 nowrap 内容会溢出重叠，
       改 auto 让列宽按内容自适应（数值列本身不换行，分布不变） */
    table-layout: auto;
  }

  /* 分组行移动端缩排（设计写了这条但特异性低于基础规则、实际从未生效，
     本文件把它落在同特异性的选择器上使其真正生效；若要与 markets-detail
     现状逐像素一致，删掉本块即可） */
  .pd2-params__content table tbody td:only-child {
    padding: var(--space-sm) 20px; /* 设计 8px 20px；20px 无令牌 */
    font-size: clamp(0.8125rem, 0.04vw + 0.8rem, 0.875rem);
  }

  /* 第一列型号（星标 + 编号）严格不折行 */
  .pd2-params__content table tbody td:first-child {
    white-space: nowrap;
  }

  /* 第二列（产品说明）与单元格左缘留 5px 间距 */
  .pd2-params__content table tbody td:nth-child(2) {
    padding-left: 5px;
  }

  /* product-detail 页（id=featured）移动端：隐藏 hover 箭头、第一列数据左对齐
     （设计里按 #featured 作页面级覆盖，markets-detail 页 id=products 不受影响） */
  #featured .pd2-params__content table tbody td:first-child:not(:only-child)::before {
    content: none;
  }

  #featured .pd2-params__content table tbody td:first-child {
    text-align: left;
  }
}

/* ==================== 无障碍降级（本文件唯一的动效是 hover 过渡） ====================
   设计基准文件末尾带的是一个 * 通用块，本仓库已由 tokens.css 提供同等全局兜底，
   此处只降级本文件自己声明的过渡 */
@media (prefers-reduced-motion: reduce) {
  .pd2-params__content table tbody td:not(:only-child),
  .pd2-params__content table tbody td:first-child:not(:only-child)::before {
    transition: none;
  }
}