/**
 * retech/material-scope —— Solution 详情页「Material Scope 原料范围」。
 *
 * 原型:ret-ch/assets/css/solutions.css §「Material Scope」(banner :94,规则 96–137)
 *   96  .scope-grid          两列 minmax(0,1.05fr) / minmax(0,1fr),gap 48,align-items:start
 *   102 .scope-media         r-lg 圆角 + 裁切 + gray-light 底
 *   108 .scope-media img     width:100% + aspect-ratio 3/2 + object-fit:cover
 *   109 .scope-media figcaption(原型有图注;本块无 caption 字段,见 render.php 说明,不移植)
 *   115 .scope-h3            cyan-dark / 11px / 700 / .1em / uppercase
 *   123 .scope-body p        ink-2 / 14px / 1.66
 *   124 .scope-h3:not(:first-child)  28px 上间距
 *   126 .chip-row            flex wrap,gap 8,margin-top 18
 *   127 .material-chip       line 描边 + gray-light 底 + ink-2 字 + pill 圆角 + 13px
 * 响应式:同一文件 :573(≤1080)→ `.scope-grid { grid-template-columns: minmax(0,1fr); gap:32px; }`
 *   即**平板折叠单列**;1240 档与 700 档该文件都没有 scope 规则,故本文件也不加。
 *
 * 分工(blocks/style-index.css 的层序 retech-reset < retech-base < retech-block < retech-responsive):
 *   · @layer retech-block       本块静态样式
 *   · @layer retech-responsive  本块断点(仅 1080 一档)
 *   · 不使用 retech-reset / retech-base —— 块文件只允许 block / responsive(E3)。
 *     共享类(.retech-x-section* / .retech-x-wrap / .retech-x-section-head /
 *     .retech-x-eyebrow / .retech-x-h2 / .retech-x-section-lead)的唯一属主是全局
 *     文件,本文件只消费、绝不重定义。
 *   · 本文件出现的类**全部**以 `retech-x-scope-` 开头(沿用原型的 `scope-` 词干)。
 *   · 零 important 覆盖、无游离规则、@media 只在 responsive 层(E2/E4/W1)。
 *
 * ── 双色语义:本块只有青,没有绿 ─────────────────────────────────────────
 * 原型本段唯一的强调色是 `.scope-h3 { color: var(--cyan-dark) }` —— 青 =
 * 工艺 / 技术 / **参数**:这两个小标题讲的是原料形态与污染物的技术参数。
 * 绿色(--retech-x-flow = 循环 / 产出 / CTA)在本段**一次都没出现**;原型里带绿的
 * chip 是筛选器/图集里的 <a>(solutions.css:1162–1173),与本块的静态标签云不是
 * 同一个东西 —— 所以这里不给 .retech-x-scope-chip 加绿,也不加任何 hover 交互态。
 * 标签云沿用原型的**中性**件:line 描边 + gray-light 底 + ink-2 字。
 * tone=dark 时按原型 §26.2「chip-row 的浅色 chip 在深色底上要反相」(2246–2262)
 * 的注释处理:描边/底色/字色换深底档;h3 换成同色相的亮青(--retech-x-tech),
 * 因为 cyan-dark(#128FA1)压在 graphite 上对比度不足,而原型没有深色实例可照抄。
 */

@layer retech-block {
  /* ── 案例页出处行(原型 solutions.css §25.1 `.byline` 2140–2169)────────
     案例详情 `#project-data` 的 sec-head 之前有一条出处行:
       .byline > .byline-badge(img) + .byline-body(.byline-lead / .byline-sub ×2)
     类名沿用原型的 `byline*` 词干,加 `retech-x-scope-` 前缀(本文件的类命名纪律),
     这样 article-body 的 `.retech-x-byline`(新闻/知识库的单行出处行)不会被牵连。 */
  .retech-x-scope-byline {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 30px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--retech-x-line);
  }
  .retech-x-scope-byline-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    border: 1px solid var(--retech-x-line);
    border-radius: 50%;
    background: var(--retech-x-gray-light);
  }
  .retech-x-scope-byline-badge img { display: block; width: 28px; height: auto; }
  .retech-x-scope-byline-body { min-width: 0; }
  .retech-x-scope-byline-lead {
    color: var(--retech-x-ink);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    overflow-wrap: break-word;
  }
  .retech-x-scope-byline-sub {
    margin-top: 4px;
    color: var(--retech-x-ink-3);
    font-size: 12px;
    line-height: 1.6;
    overflow-wrap: break-word;
  }
  /* 团队名可点(→ 该团队的其他案例)。原型 `.byline .team-link` 用绿(循环/产出/CTA),
     与 id-card 的 team-link 同一个语义,所以这里也用 --retech-x-flow-dark。 */
  .retech-x-scope-byline .retech-x-team-link {
    color: var(--retech-x-flow-dark);
    border-bottom: 1px solid var(--retech-x-flow-a45);
  }
  .retech-x-scope-byline .retech-x-team-link:hover {
    color: var(--retech-x-flow);
    border-bottom-color: var(--retech-x-flow);
  }

  /* ── 两列栅格(原型 :96):左图 1.05fr / 右文 1fr,顶对齐 ───────────────── */
  .retech-x-scope-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 48px;
    align-items: start;
  }
  /* 作者没填配图时只有右栏 → 单列(render.php 不输出空 figure,也不留空灰框) */
  .retech-x-scope-grid--text {
    grid-template-columns: minmax(0, 1fr);
  }

  /* ── 原料照片(原型 :102–108)─────────────────────────────────────────── */
  .retech-x-scope-media {
    margin: 0;
    border-radius: var(--retech-x-r-lg);
    overflow: hidden;
    background: var(--retech-x-gray-light);
  }
  .retech-x-scope-img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
  }
  /* ── 图注(原型 `.scope-media figcaption`,solutions.css:109–114)─────────
     原型两条用法都会带图注:
       · Solution 详情 9 处 `Representative {材料} feed`(build_pages.py:1103)
       · 案例详情 13 处 `{国家} · {材料}`(build_pages.py:2283)
     ⚠️ 这里**曾经完全没有样式**(`.retech-x-scope-cap` 在插件里查不到任何规则),
     而且 Solution 族的 9 条图注连属性都没被填 —— 图注在原型里是**可见文字**,
     站点上却凭空少了一行(实测该段矮 51px)。现在补样式 + 生成器补属性。 */
  .retech-x-scope-cap {
    padding: 14px 18px;
    border-top: 1px solid var(--retech-x-line);
    color: var(--retech-x-ink-3);
    font-size: var(--retech-x-fs-xs);
  }

  /* ── 小标题:青 = 工艺 / 技术 / 参数(原型 :115–121)────────────────────── */
  .retech-x-scope-h3 {
    margin-bottom: 8px;
    color: var(--retech-x-tech-dark);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
  }
  /* 第二个小标题起与上一段留 28px(原型 :124)。第一个是 __body 的 first-child,
     即使 forms 为空(只剩 contamination)也不会多出顶部间距。 */
  .retech-x-scope-h3:not(:first-child) {
    margin-top: 28px;
  }

  /* ── 列表正文(原型 :123 的 .scope-body p)────────────────────────────────
     原型每个列表只有一条 → 单条时与原型的一段 <p> 观感一致(无项目符号、
     同字号同行高);作者要写整句就把整句放进一条。 */
  .retech-x-scope-list {
    color: var(--retech-x-ink-2);
    font-size: 14px;
    line-height: 1.66;
  }
  .retech-x-scope-list__item + .retech-x-scope-list__item {
    margin-top: 6px;
  }

  /* ── 标签云(原型 :126–133):中性件,非链接、无交互态 ────────────────── */
  .retech-x-scope-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
  }
  .retech-x-scope-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;
  }

  /* ── tone=dark(原型 §26.2:浅色 chip 在深色底上要反相)──────────────────
     原型 22 处全是浅色带,深色档是本块属性枚举允许的组合,按原型自己的注释处理,
     不让浅灰 chip 在 graphite 上「发光」成另一套观感。 */
  .retech-x-scope--dark .retech-x-scope-h3 {
    color: var(--retech-x-tech);
  }
  .retech-x-scope--dark .retech-x-scope-list {
    color: var(--retech-x-w72);
  }
  .retech-x-scope--dark .retech-x-scope-chip {
    border-color: var(--retech-x-line-dark);
    background: var(--retech-x-w08);
    color: var(--retech-x-w72);
  }
  .retech-x-scope--dark .retech-x-scope-media {
    background: var(--retech-x-steel-2);
  }
  /* 深色档图注:原型 22 处全是 sec--light,没有深色先例,按同文件的中性阶换算
     (描边走 line-dark、字色走 w60),与上面 __media 的处理一致。 */
  .retech-x-scope--dark .retech-x-scope-cap {
    border-top-color: var(--retech-x-line-dark);
    color: var(--retech-x-w60);
  }
}

@layer retech-responsive {
  /* ── 平板:两列 → 单列(原型 :573,「preserve the collapse」)────────────
     1080 档是原型自己的折叠点;1240 / 700 档原型没有 scope 规则,故不加。 */
  @media (max-width: 1080px) {
    .retech-x-scope-grid {
      grid-template-columns: minmax(0, 1fr);
      gap: 32px;
    }
  }
}