/**
 * retech/sys-list —— Systems 总页「编号宽卡」列表
 * (原型 ret-ch/systems/index.html:242–321,`sec sec--light sol-list` #system-list)
 *
 * CSS 1:1 移植自 ret-ch/assets/css/solutions.css:
 *   §「Systems 总页 —— 编号宽卡」(banner 605,规则 610–667)
 *   §「响应式补充」(banner 777;本块用到的两条:783 ≤1080 / 787–788 ≤700)
 * 该段曾在原型第 13 轮被误删、第 14 轮回退恢复,原注释提醒「删组件样式前先确认没有
 * 页面在用」—— 本块是它唯一的消费者(systems/index.html 是全站唯一用
 * .sys-list-grid 的页面)。
 *
 * 原型 → 本块类名对照:
 *   .sys-list-grid             → .retech-x-syslist-grid
 *   li.sys-list-item           → .retech-x-syslist-item   (原型无样式,仅结构钩子)
 *   a.sys-list-card            → .retech-x-syslist-card
 *   .sys-list-media / img      → .retech-x-syslist-media / img
 *   .sol-card-no(图上角编号)   → .retech-x-syslist-no
 *   .sys-list-body             → .retech-x-syslist-body
 *   .sys-list-title            → .retech-x-syslist-title
 *   .sys-list-desc             → .retech-x-syslist-desc
 *   .sys-list-output / em      → .retech-x-syslist-output / em
 *   .sys-list-card .link-arrow → .retech-x-syslist-card .retech-x-link-arrow
 *                                (箭头 / 间距 / 上推由共享基座负责,本块只覆盖配色)
 *
 * ★ 为什么编号类要重写一遍:原型的编号样式只有一条 .sol-card-no
 *   (solutions.css:510),被 Solutions 列表页的 .sol-card 与本块 .sys-list-card
 *   共用。本站块 CSS 不允许跨块复用类名(check-css E5:同一前缀 class 只能有一个
 *   锚定属主),所以把同一套声明挂到本块自己的 .retech-x-syslist-no 上。
 *
 * token 对照:--line→--retech-x-line,--r-lg→--retech-x-r-lg,--r-md→--retech-x-r-md,
 *   --r-xs→--retech-x-r-xs,--white→--retech-x-white,--gray-light→--retech-x-gray-light,
 *   --ink→--retech-x-ink,--ink-2→--retech-x-ink-2,--ink-3→--retech-x-ink-3,
 *   --green-dark→--retech-x-flow-dark,--sh-md→--retech-x-sh-md,--steel→--retech-x-steel,
 *   --steel-2→--retech-x-steel-2,--w60/--w72/--w90→--retech-x-w60/--w72/--w90,
 *   --b08→--retech-x-b08,--w12→--retech-x-w12,--line-dark→--retech-x-line-dark,
 *   --dur→--retech-x-dur,--ease-ui→--retech-x-ease-ui,--ease-entry→--retech-x-ease-entry。
 *   --fs-sm(14px)/--fs-xs(13px)在本站没有对应 token,按字面量落地(同 systems-list
 *   的 --fs-h3/--fs-sm 处理);--font-mono 用 proof/factors 同款
 *   var(--wp--preset--font-family--mono, …) 兜底写法。
 *   原型 hover 描边 rgba(118,192,67,0.5) 用语义 token --retech-x-flow-a45(.45) 承接
 *   (同 systems-list 对 .42 的处理);编号胶囊底色 rgba(17,23,28,.62) 与图上模糊半径
 *   是本块独有的叠图视觉,原样保留。
 *
 * 三处刻意的偏离:
 *   1) 原型 .sys-list-card .link-arrow 只写基色 --green-dark,悬停不变色(全局
 *      .link-arrow:hover 也是 --green-dark)。本站共享基座 .retech-x-link-arrow
 *      基色是墨色、悬停转 flow-dark,故本块显式覆盖基色为 flow-dark —— 覆盖后
 *      悬停保持 flow-dark,与原型一致,不需要再加悬停规则。
 *   2) tone=dark:原型这一段固定浅色(sec sec--light)。块属性允许 dark,故基座按
 *      原型浅色写,再用 [data-header="dark"] 整套换档(卡底 / 描边 / 媒体底 /
 *      标题 / 正文 / 编号胶囊 / 文字链),避免深底上出现「白卡白描边」的错配。
 *      作用域用块自身的 data-header 属性而不是新增修饰类:section 上本来就有该属性,
 *      卡片是它的后代(同 systems-list 的做法)。
 *   3) --no-media:原型每张卡恒有配图,而插件 assets/ 目前没有图片(render.php 会
 *      退成两栏之一)。图上角的编号胶囊在无图时没有可叠的图,故新增
 *      .retech-x-syslist-no--inline,把它放回正文流里(静态胶囊,浅灰底)。
 *      卡片同时收成单列(去掉空的配图轨道)。
 *
 * ★ 原型的四行段头/卡片内容行**已全部移植**(2026-09-21 补):
 *   段头 `<ul class="chip-row">`(Engineered around / Material condition /
 *   Required capacity / Target output)→ `.retech-x-syslist-chips/-chip`;
 *   卡片 `.sys-list-eyebrow`(分类微标,如 "Material Cleaning")→ 同名映射;
 *   卡片 `.sys-list-flow`(等宽工艺链 chip)→ 同名映射。
 *   三者的文案由 `tools/gen_systems.py` 从原型逐字抽进块属性(`chips` /
 *   `cards[].eyebrow` / `cards[].flow` / `cards[].outputLabel`),见块 render.php。
 *
 * 层纪律:块文件只允许 retech-block / retech-responsive 两层;所有 @media 都包在
 * retech-responsive 里;断点只用 1240 / 1080 / 700(本块只用到后两个 —— 原型这一
 * 段也没有 1240 档);全文无强制覆盖关键字。本文件只定义 .retech-x-syslist-* 属主类;
 * .retech-x-section / --light / --dark / .retech-x-wrap / .retech-x-section-head /
 * .retech-x-eyebrow / .retech-x-h2 / .retech-x-section-lead / .retech-x-link-arrow
 * 的唯一属主是 blocks/style-index.css,此处只消费、不重复定义(否则 E5)。
 */
@layer retech-block {
  /* ── 段头下方「工程依据」胶囊行 ───────────────────────────────────────────
     原型 systems/index.html 的 `<ul class="chip-row" aria-label="Systems are
     engineered around">`(4 枚,.material-chip);样式取自 solutions.css:126-134:
       .chip-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
       .material-chip{padding:6px 12px;border:1px solid var(--line);
                      border-radius:var(--r-pill);background:var(--gray-light);
                      color:var(--ink-2);font-size:var(--fs-xs)}
     首枚「Engineered around」在原型的 markup 里是 `<strong>`(行首强调)。
     --fs-xs(13px)本站无 token → 字面量(同 desc/output 的处理)。 */
  .retech-x-syslist-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
  }
  .retech-x-syslist-chip {
    padding: 6px 12px;
    border: 1px solid var(--retech-x-line);
    border-radius: var(--retech-x-r-pill);
    background: var(--retech-x-gray-light);
    color: var(--retech-x-ink-2);
    font-size: 13px;
  }
  .retech-x-syslist-chip strong { font-weight: 700; }

  /* ── 卡片栈:单列宽卡(原型 .sys-list-grid)──────────────────────────── */
  .retech-x-syslist-grid {
    display: grid;
    gap: 20px;
  }

  /* ── 宽卡:配图 minmax(280px,.8fr) / 正文 minmax(0,1.2fr) ───────────
     注意这与首页 systems-list 的三轨窄卡(编号 88px + 正文 + 配图)完全不同:
     这里配图在**左**,正文在**右**,且卡片纵向居中。 */
  .retech-x-syslist-card {
    display: grid;
    grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr);
    gap: 36px;
    align-items: center;
    padding: 28px;
    border: 1px solid var(--retech-x-line);
    border-radius: var(--retech-x-r-lg);
    background: var(--retech-x-white);
    transition: border-color var(--retech-x-dur) var(--retech-x-ease-ui),
                box-shadow var(--retech-x-dur) var(--retech-x-ease-ui),
                transform var(--retech-x-dur) var(--retech-x-ease-ui);
  }
  .retech-x-syslist-card:hover {
    border-color: var(--retech-x-flow-a45);
    box-shadow: var(--retech-x-sh-md);
    transform: translateY(-2px);
  }
  /* 无配图收口:去掉空的配图轨道(新增,原型恒有图) */
  .retech-x-syslist-card--no-media {
    grid-template-columns: minmax(0, 1fr);
  }

  /* ── 配图列:固定 3:2,圆角裁切 ───────────────────────────────────── */
  .retech-x-syslist-media {
    position: relative;
    display: block;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: var(--retech-x-r-md);
    background: var(--retech-x-gray-light);
  }
  .retech-x-syslist-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 600ms var(--retech-x-ease-entry);
  }
  .retech-x-syslist-card:hover .retech-x-syslist-media img {
    transform: scale(1.04);
  }

  /* ── 编号:叠在配图左上角的半透明胶囊(原型 .sol-card-no)──────────── */
  .retech-x-syslist-no {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 4px 9px;
    border-radius: var(--retech-x-r-xs);
    background: rgba(17, 23, 28, .62);
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
    color: #fff;
    font-family: var(--wp--preset--font-family--mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
  }
  /* 无配图时没有可叠的图:编号回到正文流里当静态胶囊(新增,原型无此态) */
  .retech-x-syslist-no--inline {
    position: static;
    align-self: flex-start;
    margin-bottom: 12px;
    background: var(--retech-x-b08);
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    color: var(--retech-x-ink-2);
  }

  /* ── 正文列 ──────────────────────────────────────────────────────────── */
  .retech-x-syslist-body {
    display: flex;
    flex-direction: column;
  }
  /* 卡片微标(原型 .sys-list-eyebrow,solutions.css:627):
     color:var(--cyan-dark) / 11px / 700 / .1em / uppercase。 */
  .retech-x-syslist-eyebrow {
    margin-bottom: 10px;
    color: var(--retech-x-tech-dark);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
  }
  .retech-x-syslist-title {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.28;
    color: var(--retech-x-ink);
    letter-spacing: -.015em;
  }
  .retech-x-syslist-desc {
    margin-top: 12px;
    color: var(--retech-x-ink-2);
    font-size: 14px;      /* 原型 --fs-sm */
    line-height: 1.66;
    max-width: 68ch;
  }

  /* 工艺链(原型 .sys-list-flow,solutions.css:637):左侧青色竖线的等宽小条。
     --font-mono 用 proof / factors 同款 var(--wp--preset--font-family--mono, …) 兜底。 */
  .retech-x-syslist-flow {
    display: block;
    margin-top: 16px;
    padding: 11px 14px;
    border-left: 2px solid var(--retech-x-tech);
    background: var(--retech-x-gray-light);
    border-radius: 0 var(--retech-x-r-sm) var(--retech-x-r-sm) 0;
    color: var(--retech-x-ink-3);
    font-family: var(--wp--preset--font-family--mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 11px;
    line-height: 1.6;
    word-break: break-word;
  }

  /* Output / Scope 行:本块是「行内 em 标签 + 值」,与首页 systems-list 的
     「块级 span 标签 + 青色左边线」不是同一套版式。 */
  .retech-x-syslist-output {
    display: block;
    margin-top: 12px;
    color: var(--retech-x-ink-3);
    font-size: 13px;      /* 原型 --fs-xs */
    line-height: 1.6;
  }
  .retech-x-syslist-output em {
    margin-right: 8px;
    color: var(--retech-x-ink-2);
    font-style: normal;
    font-weight: 700;
  }

  /* 卡片底部文字链:箭头 / 间距 / 上推由共享 .retech-x-link-arrow 负责,
     这里只复刻原型的配色(.sys-list-card .link-arrow{green-dark})。
     覆盖后悬停同为 flow-dark —— 与原型一致(原型悬停不变色),故不另写悬停规则。 */
  .retech-x-syslist-card .retech-x-link-arrow {
    color: var(--retech-x-flow-dark);
  }

  /* ── 深色基调(tone="dark")────────────────────────────────────────────
     原型没有这一档;浅色卡底(白)与墨色文字在 graphite 上不可读,故整套换档。 */
  [data-header="dark"] .retech-x-syslist-card {
    border-color: var(--retech-x-line-dark);
    background: var(--retech-x-steel);
  }
  [data-header="dark"] .retech-x-syslist-card:hover {
    border-color: var(--retech-x-flow-a45);
  }
  [data-header="dark"] .retech-x-syslist-media {
    background: var(--retech-x-steel-2);
  }
  [data-header="dark"] .retech-x-syslist-no--inline {
    background: var(--retech-x-w12);
    color: var(--retech-x-w90);
  }
  [data-header="dark"] .retech-x-syslist-title {
    color: var(--retech-x-white);
  }
  [data-header="dark"] .retech-x-syslist-desc {
    color: var(--retech-x-w72);
  }
  [data-header="dark"] .retech-x-syslist-output {
    color: var(--retech-x-w60);
  }
  [data-header="dark"] .retech-x-syslist-output em {
    color: var(--retech-x-w90);
  }
  [data-header="dark"] .retech-x-syslist-flow {
    background: var(--retech-x-w08);
    color: var(--retech-x-w72);
  }
  [data-header="dark"] .retech-x-syslist-chip {
    border-color: var(--retech-x-line-dark);
    background: var(--retech-x-w08);
    color: var(--retech-x-w72);
  }
  [data-header="dark"] .retech-x-syslist-card .retech-x-link-arrow {
    color: var(--retech-x-flow);
  }
}

@layer retech-responsive {
  /* --- 平板 / 窄屏:配图与正文改为上下堆叠(原型 响应式补充 783)--- */
  @media (max-width: 1080px) {
    .retech-x-syslist-card {
      grid-template-columns: minmax(0, 1fr);
      gap: 22px;
    }
  }

  /* --- 手机:收内边距与标题字号(原型 响应式补充 787–788)--- */
  @media (max-width: 700px) {
    .retech-x-syslist-card {
      padding: 20px;
    }
    .retech-x-syslist-title {
      font-size: 19px;
    }
  }
}