@layer retech-block {
  /* ══════════════════════════════════════════════════════════════════════════
     retech/grid —— 自由正文里的栅格组
     规则**逐条移植自原型** `assets/css/solutions.css`(§about / §pillar /
     §contact / §flow / 响应式 §19.10)。数值不重算、不改写。
     类名把原型的无前缀(about-*)换成 retech-x- 前缀(共享类属主规则)。
     ══════════════════════════════════════════════════════════════════════════ */

  /* ── §about:公司简介两栏 + 数字条 + 团队卡 + 图片墙 ─────────────────── */
  .retech-x-about-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 52px;
    align-items: start;
  }
  .retech-x-about-copy p { color: var(--retech-x-ink-2); line-height: 1.68; }
  .retech-x-about-copy p + p { margin-top: 16px; }
  .retech-x-about-media { margin: 0; }
  .retech-x-about-media img { width: 100%; height: auto; border-radius: var(--retech-x-r-lg); }

  .retech-x-about-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    margin: 30px 0 20px;
    background: var(--retech-x-line);
    border: 1px solid var(--retech-x-line);
    border-radius: var(--retech-x-r-lg);
    overflow: hidden;
  }
  /* 格子底色必须**不透明** —— 细线靠「容器铺 1px 间隔 + 格子实底」,改半透明会透出线 */
  .retech-x-about-stat { padding: 20px; background: var(--retech-x-white); }
  .retech-x-about-stat-num {
    display: block;
    color: var(--retech-x-flow-dark);
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.02em;
  }
  .retech-x-about-stat-label {
    display: block;
    margin-top: 8px;
    color: var(--retech-x-ink-3);
    font-size: 13px;
    line-height: 1.5;
  }

  .retech-x-about-team-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    margin-top: 26px;
  }
  .retech-x-about-team {
    padding: 26px 24px;
    border: 1px solid var(--retech-x-line);
    border-radius: var(--retech-x-r-lg);
    background: var(--retech-x-gray-light);
  }
  .retech-x-about-team h3 { color: var(--retech-x-ink); font-size: 20px; margin-bottom: 10px; }
  .retech-x-about-team p { color: var(--retech-x-ink-2); font-size: 14px; line-height: 1.68; }
  .retech-x-about-team .retech-x-sol-note { margin-top: 10px; color: var(--retech-x-ink-3); }

  /* ── §about-gallery:3 列图墙 —— 逐条移植原型 `solutions.css:1326-1334` ──────
     ⚠️ 第一版是近似值:gap 16px(原型 18)、图片 `height:auto`(原型
       `aspect-ratio:4/3; object-fit:cover` 才保证三张图等高)、少了边框与底色、
       figcaption 字号/颜色也不对。 */
  .retech-x-about-gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 26px;
  }
  .retech-x-about-shot { margin: 0; }
  .retech-x-about-shot img {
    width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
    border-radius: var(--retech-x-r-md);
    border: 1px solid var(--retech-x-line-dark);
    background: var(--retech-x-steel-2);
  }
  .retech-x-about-shot figcaption { margin-top: 10px; color: var(--retech-x-w60); font-size: 13px; }

  /* ── §pillar:带角标的支柱卡 + 4 格数据 ─────────────────────────────── */
  .retech-x-pillar-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    margin-top: 28px;
  }
  .retech-x-pillar-card {
    display: flex;
    flex-direction: column;
    padding: 26px 24px;
    border: 1px solid var(--retech-x-line);
    border-radius: var(--retech-x-r-lg);
    background: var(--retech-x-gray-light);
  }
  .retech-x-pillar-card h3 { color: var(--retech-x-ink); font-size: 14px; font-weight: 700; line-height: 1.45; }
  .retech-x-pillar-card p { margin-top: 10px; color: var(--retech-x-ink-2); font-size: 13px; line-height: 1.68; }
  .retech-x-pillar-tag {
    display: inline-block;
    align-self: flex-start;
    margin-bottom: 12px;
    padding: 3px 10px;
    border: 1px solid var(--retech-x-line-dark);
    border-radius: var(--retech-x-r-pill);
    color: var(--retech-x-tech);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
  }
  .retech-x-pillar-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
    margin-top: 28px;
  }
  .retech-x-pillar-stat {
    display: block;
    padding: 22px 20px;
    border: 1px solid var(--retech-x-line-dark);
    border-radius: var(--retech-x-r-lg);
    background: rgba(255, 255, 255, .04);
  }
  .retech-x-pillar-stat .retech-x-about-stat-num { color: #fff; font-size: 26px; }
  .retech-x-pillar-stat .retech-x-about-stat-label { color: var(--retech-x-w72); }

  /* ── §contact:联系卡 3 列 ──────────────────────────────────────────── */
  .retech-x-contact-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 28px;
  }
  .retech-x-contact-card {
    padding: 24px 22px;
    border: 1px solid var(--retech-x-line);
    border-radius: var(--retech-x-r-lg);
    background: var(--retech-x-white);
  }
  .retech-x-contact-card h3 {
    color: var(--retech-x-ink-3);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
  }
  .retech-x-contact-card p { margin-top: 10px; color: var(--retech-x-ink); font-size: 15px; line-height: 1.5; }
  .retech-x-contact-card .retech-x-sol-note { margin-top: 8px; color: var(--retech-x-ink-3); font-size: 13px; }

  /* ── §flow:流程步骤网格(About 组 12/7/8 步)─────────────────────────
     ⚠️ 三种流程在原型里是**三套不同的设计**,不是"同一张卡换列数":
       · `.wf-flow`  `/  .wf-step`  12 步横向条带:外层 1px 缝 + 描边 + r-lg,
                                    每格 `display:flex; align-items:baseline; gap:10px`
       · `.mfg-flow` `/.mfg-step`   7 步表格:同样是 1px 缝 + 描边,但每格是
                                    `grid-template-columns: 60px 1fr`,编号跨两行
       · `.dlv-flow` `/.dlv-step`   8 步竖排卡:gap 16px、每卡 `52px 1fr` +
                                    左侧 3px 绿色边
     第一版把三者合并成「统一的灰底小卡 + 4/6/4 列」—— 三页的版式全错。
     实测尺寸一律取自原型 `solutions.css:1331-1348 / 1458-1468`。 */
  .retech-x-wf-flow,
  .retech-x-mfg-flow {
    display: grid;
    gap: 1px;
    list-style: none;
    padding: 0;
    margin: 30px 0 0;
    background: var(--retech-x-line);
    border: 1px solid var(--retech-x-line);
    border-radius: var(--retech-x-r-lg);
    overflow: hidden;
  }
  .retech-x-wf-flow { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* ⚠️ `.mfg-flow` **不设列数** —— 原型 `solutions.css:1331` 只写了
     `display:grid; gap:1px`,没有 `grid-template-columns`,所以是**单列 7 行**
     (每行自己再用 `.mfg-step { grid-template-columns: 60px 1fr }` 分两栏)。
     第一版照 `wf-flow` 给了 4 列 → 7 步被挤成 4+3 两行,
     实测该段高度 1005px → 760px。`.dlv-flow` 同理(原型也是单列)。 */

  .retech-x-dlv-flow {
    display: grid;
    gap: 16px;
    list-style: none;
    padding: 0;
    margin: 30px 0 0;
  }

  .retech-x-wf-step { display: flex; align-items: baseline; gap: 10px; padding: 18px 20px; background: var(--retech-x-white); }
  .retech-x-mfg-step {
    display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 0 8px;
    padding: 20px 24px; background: var(--retech-x-white);
  }
  .retech-x-dlv-step {
    display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 18px;
    padding: 22px 24px; border: 1px solid var(--retech-x-line);
    border-left: 3px solid var(--retech-x-flow); border-radius: var(--retech-x-r-md);
    background: var(--retech-x-white);
  }

  /* 编号:三种流程的配色/字号都不同(原型 `.wf-num` / `.mfg-num` / `.dlv-num`) */
  .retech-x-wf-step .retech-x-step-no {
    margin: 0; color: var(--retech-x-tech);
    font-family: var(--wp--preset--font-family--mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 12px; font-weight: 700;
  }
  .retech-x-mfg-step .retech-x-step-no {
    grid-row: 1 / span 2; align-self: start; margin: 0; color: var(--retech-x-tech);
    font-family: var(--wp--preset--font-family--mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 13px; font-weight: 700;
  }
  .retech-x-dlv-step .retech-x-step-no {
    margin: 0; color: var(--retech-x-flow-dark);
    font-family: var(--wp--preset--font-family--mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 15px; font-weight: 700;
  }

  /* 标题:`.wf-label` 是 13px/600 —— 不是粗体大标题。
     `.wf-step` 的标题在原型里是 `span.wf-label`(块渲染器现在也出 span);
     同时保留 h3 选择器,兼容旧的已落库内容(编辑器里打开旧页面仍能正常显示)。 */
  .retech-x-wf-label,
  .retech-x-wf-step h3 { flex: 1 1 auto; color: var(--retech-x-ink); font-size: 13px; font-weight: 600; line-height: 1.45; }
  .retech-x-mfg-step h3 { grid-column: 2; color: var(--retech-x-ink); font-size: 14px; font-weight: 700; }
  .retech-x-dlv-step h3 { color: var(--retech-x-ink); font-size: 14px; font-weight: 700; }
  .retech-x-wf-step p { display: none; }   /* 原型 `.wf-step` 里没有 p */
  .retech-x-mfg-step p { grid-column: 2; margin-top: 6px; color: var(--retech-x-ink-2); font-size: 13px; line-height: 1.65; }
  .retech-x-dlv-step p { margin-top: 6px; color: var(--retech-x-ink-2); font-size: 13px; line-height: 1.68; }

  /* ── §proof-grid:两列证明卡(带要点列表)───────────────────────────── */
  .retech-x-grid-sec .retech-x-proof-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin-top: 28px;
  }
  .retech-x-grid-sec .retech-x-route-points { margin: 10px 0 0; padding: 0 0 0 18px; list-style: disc; }
  .retech-x-grid-sec .retech-x-route-points li { margin: 6px 0; color: var(--retech-x-ink-2); font-size: 13px; line-height: 1.6; }
  .retech-x-grid-sec .retech-x-route-points li::marker { color: var(--retech-x-tech); }
}

@layer retech-responsive {
  /* 断点逐条照搬原型 §19.10(1240 / 1080 / 767 / 480) */
  @media (max-width: 1240px) {
    .retech-x-pillar-grid,
    .retech-x-pillar-stats,
    .retech-x-contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  /* ⚠️ 流程网格的断点与其它栅格**不同**,原型分开写:
       · `.wf-flow`:1080 → 2 列;560 → 1 列(solutions.css:1467-1468)
       · `.mfg-flow` / `.dlv-flow`:不换列,到 767 时把**每格**改成单列
         (`.mfg-step, .dlv-step { grid-template-columns: minmax(0,1fr) }`)
     第一版把三者一起在 1240 换 2 列、767 换 1 列 —— 与原型不符。 */
  @media (max-width: 1080px) {
    .retech-x-about-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .retech-x-about-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .retech-x-wf-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 767px) {
    .retech-x-pillar-grid,
    .retech-x-pillar-stats,
    .retech-x-contact-grid,
    .retech-x-team-grid,
    .retech-x-about-team-grid,
    .retech-x-about-gallery,
    .retech-x-mfg-flow,
    .retech-x-dlv-flow,
    .retech-x-grid-sec .retech-x-proof-grid { grid-template-columns: minmax(0, 1fr); }
    .retech-x-mfg-step,
    .retech-x-dlv-step { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 18px 18px; }
    .retech-x-mfg-step .retech-x-step-no,
    .retech-x-dlv-step .retech-x-step-no { grid-row: auto; }
    .retech-x-mfg-step h3,
    .retech-x-mfg-step p { grid-column: 1; }
    /* 数字条 `.about-stats` 在 ≤767 **仍是两列**(原型 solutions.css:1429
       `repeat(2, minmax(0,1fr))`)—— 它不在上面那组单列选择器里;旧版误把它一起
       收成单列,481–767px 区间本站 1 列而原型 2 列。 */
  }
  /* ── 原型 solutions.css:1438(≤480):
       .about-stats { grid-template-columns: minmax(0, 1fr); }
     数字条真正的单列档是 ≤480,不是 767。 */
  @media (max-width: 480px) {
    .retech-x-about-stats { grid-template-columns: minmax(0, 1fr); }
  }
  @media (max-width: 560px) {
    .retech-x-wf-flow { grid-template-columns: minmax(0, 1fr); }
  }
}

@layer retech-block {
  /* 栅格自己当版心容器时(retech/grid 的 about-grid / about-stats 用法):
     原型写法是 `div.container.about-grid` —— `.container` 的 `padding:0 40px`
     让**内容宽 1280**(不是 1360)。`.retech-x-wrap` 已带同样内边距,
     这里只把「内容宽」显式化,免得两列各多 40px。 */
  .retech-x-wrap--container { align-items: start; }
}

@layer retech-block {
  /* ⚠️ `about-sec` 的纵距**比普通 section 小一半**。
     原型 `solutions.css:1282`:
       `.about-sec { padding-top: var(--sec-y-sm); padding-bottom: var(--sec-y-sm); }`
     `--sec-y-sm` = **56px**,而普通 `.sec` 是 `--sec-y` = 110px。

     为什么现在写在本块自己身上:原实现是用 `:has()` 去选「包含本栅格的外层
     `retech/section`」,因为那时生成器把栅格**又包了一层 section**(段头在外层)。
     那层已经去掉(见 `tools/gen_pages.py` 的 `build_section()`):原型里段头与栅格
     本就在同一个 `section > .container` 里,`retech/grid` 自己就会渲染
     `<section class="retech-x-section … retech-x-grid-sec"><div class="retech-x-wrap">`
     + `.sec-head`。所以纵距直接加在 grid 段自己身上,不再需要 `:has()`。

     实测依据:About 组 5 页、Contact 页的**每一个** `retech/grid` 用法,
     都对应原型里的 `sec … about-sec`(6 个页面逐段核对过)。

     ⚠️ 2026-09-21 二次修正:这里**不再写死 56px** —— 纵距已统一由 `pad` 属性
     驱动(`.retech-x-section--pad-sm`,见 `blocks/style-index.css` 与
     `retech_site_section_pad_class()`),生成器给每个栅格段传 `pad: 'sm'`。
     写死在这里会让「同一个块在别的族里需要 110px」时无法覆盖。 */
}