@layer retech-block {
  /* ══════════════════════════════════════════════════════════════════════════
     retech/article-body —— 详情页正文区
     原型来源:solutions.css §「.doc-layout / .doc-side / .doc-toc / .art-body」
     (1553–1663 与 985–1052 行)。数值逐条对照原型,不重算。
     ⚠️ 类名从原型的 `.art-body` / `.doc-*` 改成 `retech-x-` 前缀 —— 共享类
        属主必须在全局文件里(E5 规则),这里是本块独占的版式。
     ══════════════════════════════════════════════════════════════════════════ */

  /* 两栏:正文 minmax(0,1fr) 防长表格把栅格撑破(原型同款) */
  .retech-x-doc-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 268px;
    gap: 56px;
    align-items: start;
  }

  /* 无小标题的文章收成单栏 980px(原型 `.art-container`) */
  .retech-x-art-container { max-width: 980px; }

  .retech-x-doc-side {
    position: sticky;
    top: calc(var(--retech-x-header-h) + 28px);
    /* 标题多的文章目录会很长:限高 + 内部滚动,否则下半截看不到也滚不到 */
    max-height: calc(100vh - var(--retech-x-header-h) - 56px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--retech-x-line) transparent;
  }
  .retech-x-doc-side::-webkit-scrollbar { width: 6px; }
  .retech-x-doc-side::-webkit-scrollbar-thumb { background: var(--retech-x-line); border-radius: 3px; }
  .retech-x-doc-side::-webkit-scrollbar-track { background: transparent; }

  .retech-x-doc-toc {
    padding: 22px 22px 20px;
    border: 1px solid var(--retech-x-line);
    border-radius: var(--retech-x-r-lg);
    background: var(--retech-x-white);
  }
  .retech-x-doc-toc-title {
    margin: 0 0 10px;
    font-family: var(--wp--preset--font-family--mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--retech-x-ink-3);
  }
  .retech-x-doc-toc ol { margin: 0; padding: 0; list-style: none; }
  .retech-x-doc-toc a {
    display: block;
    padding: 6px 0 6px 14px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--retech-x-ink-2);
    border-left: 2px solid var(--retech-x-line);
  }
  .retech-x-doc-toc a:hover { color: var(--retech-x-flow-dark); border-left-color: var(--retech-x-flow); }
  .retech-x-doc-toc .toc-lv3 a { padding-left: 24px; color: var(--retech-x-ink-3); }
  .retech-x-doc-toc .toc-lv4 a { padding-left: 36px; color: var(--retech-x-ink-3); font-size: 12px; }

  /* 特色图 —— 原件 16:10 不裁切 */
  .retech-x-art-featured { margin: 0 0 26px; }
  .retech-x-art-featured img { display: block; width: 100%; height: auto; border-radius: var(--retech-x-r-md); }

  /* 出处行 */
  .retech-x-byline {
    margin: 0 0 22px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--retech-x-line);
    font-size: 13px;
    color: var(--retech-x-ink-3);
  }
  .retech-x-byline a { color: var(--retech-x-flow-dark); }
  .retech-x-byline time { color: var(--retech-x-ink-2); }
  /* 新闻出处行的分类(原型 `.byline-cat`,solutions.css:2160:
     `color: var(--cyan-dark); font-weight: 600`)。本站 `--cyan-dark` 的对应 token
     是 `--retech-x-tech-dark`(见 blocks/style-index.css:85)。只有新闻身份会输出,
     见 render.php 的出处行注释。 */
  .retech-x-byline-cat { color: var(--retech-x-tech-dark); font-weight: 600; }

  /* ── 正文排版 ────────────────────────────────────────────────────────────
     原型 `.art-body` 限宽 88ch 并靠左;`> * + *` 统一纵向间距,
     所以正文里不需要给每个块单独配 margin。 */
  .retech-x-art-body { max-width: 88ch; }
  .retech-x-art-body > * + * { margin-top: 18px; }
  /*
   * `overflow-wrap: anywhere` —— 原型 `solutions.css:1994–2015` 那一条。
   *
   * ⚠️ 原型里那条规则**格式很像笔误**(选择器列表末尾一个孤立逗号 + 空行 + 注释,
   *    下一行才是 `.art-body a { overflow-wrap: anywhere }`),但它其实是**一条**
   *    规则:CSS 里换行与注释都只是空白,悬空逗号会把后面的选择器并进同一列表。
   *    所以原型对 `.art-body` 及其 p / li / td / th / h2–h4 / blockquote **都**施加了
   *    `anywhere`。第一版移植时把这条整个漏掉了。
   *
   * 为什么它不只是「长词换行」:`anywhere`(区别于 `break-word`)会参与
   * **min-content 计算**,而表格是 `table-layout: auto` —— 每个单元格的
   * min-content 直接决定列宽分配。少了它,文本列 min-content 偏大、把图片列挤窄:
   * 实测产品页「Cleaning Process」段图片列 606px → 497px(图 574 → 465px),
   * 每行矮 82px,8 行合计 **-653px**;51 个产品页里有 10 个因此差 150px 以上。
   */
  .retech-x-art-body,
  .retech-x-art-body p,
  .retech-x-art-body li,
  .retech-x-art-body td,
  .retech-x-art-body th,
  .retech-x-art-body h2,
  .retech-x-art-body h3,
  .retech-x-art-body h4,
  .retech-x-art-body blockquote,
  .retech-x-art-body a {
    overflow-wrap: anywhere;
  }
  .retech-x-art-body h2 { font-size: 28px; line-height: 1.25; color: var(--retech-x-ink); }
  .retech-x-art-body h3 { font-size: 20px; color: var(--retech-x-ink); margin-top: 34px; }
  .retech-x-art-body h4 { font-size: 17px; font-weight: 700; color: var(--retech-x-ink); margin-top: 26px; }
  .retech-x-art-body p { color: var(--retech-x-ink-2); font-size: 16px; line-height: 1.7; }
  .retech-x-art-body a { color: var(--retech-x-flow-dark); border-bottom: 1px solid var(--retech-x-flow-a45); }
  .retech-x-art-body a:hover { border-bottom-color: var(--retech-x-flow-dark); }
  .retech-x-art-body strong { color: var(--retech-x-ink); font-weight: 700; }
  .retech-x-art-body ul, .retech-x-art-body ol { padding-left: 22px; color: var(--retech-x-ink-2); }
  .retech-x-art-body ul { list-style: disc; }
  .retech-x-art-body ol { list-style: decimal; }
  .retech-x-art-body li { margin: 7px 0; line-height: 1.7; }
  .retech-x-art-body li::marker { color: var(--retech-x-flow); }
  .retech-x-art-body blockquote {
    margin: 26px 0;
    padding: 18px 22px;
    border-left: 3px solid var(--retech-x-flow);
    background: var(--retech-x-gray-light);
    border-radius: 0 var(--retech-x-r-md) var(--retech-x-r-md) 0;
  }
  .retech-x-art-body blockquote p { color: var(--retech-x-ink-2); font-size: 17px; }
  /* ── 图片与图集:逐条移植原型 `solutions.css:1013-1024` ──────────────────
     ⚠️ 第一版写的是 `:where(img) { max-width:100% }` —— 它比原型**更宽**
       (连表格单元格里的裸 `<img>` 也管),而且少了原型的
       `border: 1px solid line` / `background: gray-light` / `width: 100%`,
       圆角也从 `--r-md` 降成了 `--r-sm`。
       原型的规则**只**作用于 `.wp-block-image` 与 `.wp-block-gallery` 内的图;
       表格里的设备图不受任何宽度约束(按自然尺寸渲染,由表格自身横向滚动),
       所以下面**不能**再补一条 `td img { max-width: … }` ——
       那会把产品详情「Cleaning Process」段从 3080px 压成 892px(实测)。 */
  .retech-x-art-body .wp-block-image img,
  .retech-x-art-body .wp-block-gallery img {
    width: 100%; height: auto; border-radius: var(--retech-x-r-md);
    border: 1px solid var(--retech-x-line); background: var(--retech-x-gray-light);
  }
  /* ⚠️ `.wp-block-image` / `.wp-block-table` / `.wp-block-gallery` 三个顶层 figure 的
     `margin: 26px 0`(原型 solutions.css:1018 / 1030 / 1767)**不在这里声明** ——
     它们写在 blocks/style-index.css 的 `@layer retech-reset` 里。原因:
     `!important` 声明在层叠里**层序反转**,只有 reset 层压得住全局的
     `figure { margin: 0 !important }`;写在本层(或未分层)一律输,实测恒为 0。
     详见那边的注释。 */
  .retech-x-art-body .wp-block-gallery {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px; margin: 26px 0; max-width: none;
  }
  .retech-x-art-body .wp-block-gallery figure { margin: 0; }
  /* ── 表格:逐条移植原型 `solutions.css:1026-1043` ──────────────────────
     ⚠️ 第一版只写了「边框 + 斑马纹」的近似值,少了**外框圆角 + 表头灰底 +
     `white-space: nowrap` + 单元格 `vertical-align: top`** ——
     参数表看起来「不像」就是差这四样。 */
  .retech-x-art-body .wp-block-table {
    overflow-x: auto;
    border: 1px solid var(--retech-x-line);
    border-radius: var(--retech-x-r-md);
    background: var(--retech-x-white);
  }
  .retech-x-art-body table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    min-width: 520px;
  }
  .retech-x-art-body thead th {
    padding: 12px 16px;
    text-align: left;
    background: var(--retech-x-gray-light);
    color: var(--retech-x-ink);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .04em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--retech-x-line);
    white-space: nowrap;
  }
  .retech-x-art-body tbody td {
    padding: 12px 16px;
    color: var(--retech-x-ink-2);
    border-bottom: 1px solid var(--retech-x-line);
    vertical-align: top;
    line-height: 1.6;
  }
  .retech-x-art-body tbody tr:last-child td { border-bottom: 0; }
  .retech-x-art-body tbody tr:nth-child(even) { background: rgba(243, 245, 246, .55); }
  /* ⚠️ 此处曾有一条原型**没有**的规则:
       `.retech-x-art-body td img { max-width: 220px; width: 100%; … }`
     它把「Specifications & Parameters / Cleaning Process」表里 `Details` 列的
     设备图从自然尺寸压到 220px,整段高度 3080px → 892px(实测截图对照)。
     原型对表格内的 `<img>` 不做任何宽度约束,故删除,不再补回。 */

  /* 尾部小字 */
  .retech-x-art-note {
    max-width: 88ch;
    margin: 26px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--retech-x-ink-3);
  }

  /* ══════════════════════════════════════════════════════════════════════════
     产品图集 —— `.retech-x-media-grid` / `-tile` / `-tile-btn` / `-cap`

     原型来源:`solutions.css:1763–1820`(§21.1「产品/新闻正文图集」)。
     逐条翻译,数值不重算:

       .art-body .media-grid      → 3 列默认 / gap 16 / margin 26 0 / max-width none
       .art-body .media-grid.columns-1 { grid-template-columns: minmax(0,1fr); max-width: 560px; }
       .art-body .media-grid.columns-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
       .media-tile-btn            → 带边框的整块按钮(cursor: zoom-in),hover 换绿边 + 阴影
       .media-tile-btn img        → aspect-ratio 4/3 + object-fit contain(图未加载时也占位)
       .media-cap                 → 图注:9px 上距 / 13px / ink-3

     ⚠️ 上面已有的 `.retech-x-art-body .wp-block-gallery`(3 列 / ≤767 两列 /
     ≤480 单列)是**新闻与知识库**正文用的默认图集,保持不动;产品图集额外
     挂 `.retech-x-media-grid` 并额外带 `columns-N`,由下面这组规则接管列数。
     `columns-4` 的移动端例外见文件末尾的 `@layer retech-responsive`:
     原型明说「客户要求移动端也保持 4 列」,所以窄屏不是压成 1 列而是
     **固定列宽 + 横向滑动**(上下对应关系才保得住)。
     ══════════════════════════════════════════════════════════════════════════ */
  .retech-x-art-body .retech-x-media-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    max-width: none;
  }
  .retech-x-art-body .retech-x-media-grid--cols-1 {
    grid-template-columns: minmax(0, 1fr);
    max-width: 560px;
  }
  .retech-x-art-body .retech-x-media-grid--cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .retech-x-art-body .retech-x-media-grid--cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  /* 图块的外边距同样由 style-index.css 的 reset 层压回 0(见那里的放行规则)。 */
  .retech-x-art-body .retech-x-media-tile-btn {
    display: block;
    width: 100%;
    padding: 0;
    border: 1px solid var(--retech-x-line);
    border-radius: var(--retech-x-r-md);
    background: var(--retech-x-gray-light);
    cursor: zoom-in;
    overflow: hidden;
    transition: border-color var(--retech-x-dur-fast) var(--retech-x-ease-ui),
                box-shadow var(--retech-x-dur-fast) var(--retech-x-ease-ui);
  }
  .retech-x-art-body .retech-x-media-tile-btn:hover {
    border-color: var(--retech-x-flow);
    box-shadow: var(--retech-x-sh-md);
  }
  /* `aspect-ratio` 不是装饰:图是 `loading="lazy"`,未进视口前没有内在尺寸,
     少了它整段会在图片加载时从 2px 跳到 ~900px(CLS),也让首屏高度测不准。 */
  .retech-x-art-body .retech-x-media-tile-btn img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: var(--retech-x-white);
    border: 0;
    border-radius: 0;
    cursor: pointer;
  }
  .retech-x-art-body .retech-x-media-cap {
    margin-top: 9px;
    color: var(--retech-x-ink-3);
    font-size: var(--retech-x-fs-xs);
    line-height: 1.5;
  }
}

@layer retech-responsive {
  /* ══════════════════════════════════════════════════════════════════════════
     ⚠️ 旧版本文件**一条 @media 都没有** —— 两栏正文在平板/手机上从不折叠,
     侧栏一直 268px + 限高内部滚动,目录也永远单列。以下逐条补上原型声明。
     ══════════════════════════════════════════════════════════════════════════ */

  /* ── ≤1240:侧栏收窄 230px(原型 solutions.css:1658)──────────────────── */
  @media (max-width: 1240px) {
    .retech-x-doc-layout {
      grid-template-columns: minmax(0, 1fr) 230px;
      gap: 40px;
    }
  }

  /* ── ≤1080:正文单栏 + 侧栏不再吸顶/限高 + 目录分两栏 ─────────────────
     原型 `solutions.css:1662–1664`(§20.7):
       .doc-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; }
       .doc-side   { position: static; max-height: none; overflow-y: visible; }
       .doc-toc ol { columns: 2; column-gap: 24px; }
     `.doc-toc ol` 在 `solutions.css:1977`(§21.6「新闻详情复用正文+目录布局」)
     又写了一遍,声明与 :1664 **完全相同**,故合并为一条。
     ⚠️ `position: static` 必须在本文件声明:本块 render.php:236 输出的
     `<aside class="retech-x-doc-side">` **不带** toc 块的 `.retech-x-toc`,
     `blocks/toc/style.css` 的 `.retech-x-toc { position: static }` 盖不到它 ——
     只补 max-height / overflow 的话侧栏在平板仍会吸顶。 */
  @media (max-width: 1080px) {
    .retech-x-doc-layout {
      grid-template-columns: minmax(0, 1fr);
      gap: 32px;
    }
    .retech-x-doc-side {
      position: static;
      max-height: none;
      overflow-y: visible;
    }
    .retech-x-doc-toc ol {
      columns: 2;
      column-gap: 24px;
    }
  }

  /* ── ≤767:目录回单列(原型 solutions.css:1670,同款 :1980)─────────── */
  @media (max-width: 767px) {
    .retech-x-doc-toc ol {
      columns: 1;
    }
  }

  /* ── 图集:≤767 两列、≤480 单列 ─────────────────────────────────────────
     原型 `solutions.css:1428`(≤767)`.art-body .wp-block-gallery` →
     `repeat(2, minmax(0,1fr))`;`:1437`(≤480)→ `minmax(0,1fr)`。
     审计清单只列了 doc-* 三条,漏了图集这两条;旧版基础规则是 3 列且无断点,
     手机上会挤成三列小图。 */
  @media (max-width: 767px) {
    .retech-x-art-body .wp-block-gallery {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (max-width: 480px) {
    .retech-x-art-body .wp-block-gallery {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  /* ── 产品图集 4 列:窄屏**不折列**,改成固定列宽 + 横向滑动 ────────────────
     原型 `solutions.css:1811–1820`。原型自己的注释写明了理由,原样保留:
       > 这一组图的顺序是「4 张原料 + 4 张成品」,必须 4 列才能让每列上下对应。
       > 客户要求移动端也保持 4 列;390px 下若强行压成 4 等分会只剩 ~85px/张,
       > 所以窄屏改成**固定列宽 + 横向滑动**。
     ⚠️ 必须排在上面那条 `.wp-block-gallery → 2 列/1 列` **之后**:两者
     特异性相同(0,2,0),靠**源序**取胜;写在前面就会被折成 2 列、
     「上下对应」的语义直接丢掉。 */
  @media (max-width: 767px) {
    .retech-x-art-body .retech-x-media-grid--cols-4 {
      grid-template-columns: repeat(4, minmax(140px, 1fr));
      overflow-x: auto;
      overscroll-behavior-x: contain;
      scroll-snap-type: x proximity;
      -webkit-overflow-scrolling: touch;
      padding-bottom: 8px;
    }
    .retech-x-art-body .retech-x-media-grid--cols-4 .retech-x-media-tile {
      scroll-snap-align: start;
    }
  }
}
/* ⚠️ 正文顶层三种 figure 的 `margin: 26px 0`(原型 solutions.css:1018 / 1030 / 1767)
   声明在 blocks/style-index.css 的 `@layer retech-reset` 里,不在这里 ——
   原因:`!important` 声明在层叠里**层序反转**,只有最先声明的 reset 层压得住全局的
   `figure { margin: 0 !important }`;写在块层(retech-block)或未分层一律输,
   实测 computed 恒为 `margin: 0px`。详见 style-index.css 里的说明。
   ⚠️ 同时:块文件不允许用 reset 层(scripts/check-css.mjs E3),所以也不能在这里写。 */