/**
 * retech/challenges —— 通用「编号卡网格」块样式(深色带上的编号卡)。
 *
 * CSS 1:1 移植自原型 ret-ch/assets/css/solutions.css
 *   §「Recycling Challenges(深色)」banner 138,正文 140–166:
 *     .challenge-grid        → .retech-x-challenge-grid
 *     .challenge-card        → .retech-x-challenge-card
 *     .challenge-card:hover  → .retech-x-challenge-card:hover
 *     .challenge-no          → .retech-x-challenge-no
 *     .challenge-card h3     → .retech-x-challenge-title
 *     .challenge-card p      → .retech-x-challenge-desc
 *   §「响应式」564–569(≤1240:4→2 列)与 584–587(≤700:2→1 列)。
 *   ⚠️ **原型的实际渲染是「≤1240 恒 2 列」,584–587 那条 ≤700 单列从未生效。**
 *      原因:原型 §26 在 2348–2349(≤1080 块)又写了一次
 *      `.challenge-grid { grid-template-columns: repeat(2, …) }`,两个媒体查询在
 *      ≤700 视口下同时命中,而 2349 在文件里更靠后 ⇒ 后置者胜。
 *      (2026-09-23 用 Chrome 在 390px 实测:computed `165px 165px`,两行共 556px。)
 *      本站纪律是「以原型渲染结果为准」,所以本块**只落 1240 一档**,不写 700 档。
 *      详见文件末尾 retech-responsive 层的说明。
 *      对照:同文件的 `.factor-grid`(solutions.css:586)那条 ≤700 单列**没有**被
 *      后置规则覆盖,手机上确实是 1 列 —— 所以 challenges 2 列 / factors 1 列
 *      这个"不一致"是原型的真实行为,不是笔误。
 *
 * 原型 token → 本站 token(style-index.css reset 层):
 *   --cyan→--retech-x-tech, --line-dark→--retech-x-line-dark,
 *   --r-lg→--retech-x-r-lg, --dur→--retech-x-dur, --ease-ui→--retech-x-ease-ui,
 *   --w60→--retech-x-w60, --ink→--retech-x-ink, --ink-2→--retech-x-ink-2,
 *   --line→--retech-x-line, --gray-light→--retech-x-gray-light,
 *   --fs-xs 在本站无对应 token,按字面量 13px 落地(同 process-flow / gallery)。
 *   原型 hover 的 rgba(24,175,196,.44) 用 --retech-x-tech-a50 近似(本站
 *   已有的青色透明档,a30/a50 之间取 a50,视觉一致)。
 *
 * ★ 双色语义(原型显式规定):编号是**青色** —— `.challenge-no{color:var(--cyan)}`
 *   = --retech-x-tech(青 = 工艺 / 技术 / 参数),hover 描边同样是青色。
 *   绿色 --retech-x-flow(循环 / 产出 / CTA)在本文件里**一次都不出现**。
 *
 * ★ 区块默认深色(tone=dark),卡片按原型深色底写:深色描边 + 微亮渐变 +
 *   白字 + 青色编号。tone=light 时只补最小可读性回退(卡片底色 / 描边 /
 *   标题色),编号仍是青色 —— 青色在浅底上同样成立,既保持色彩语义,
 *   也不给「通用块」发明一套新的浅色设计。
 *
 * 层纪律:块文件只允许 retech-block / retech-responsive 两层(不含 base);
 *   所有 @media(含 prefers-reduced-motion)都在 retech-responsive 里;
 *   不使用强制覆盖关键字;本块自有类只有 .retech-x-challenge-*。
 *   .retech-x-section* / .retech-x-wrap / .retech-x-section-head /
 *   .retech-x-eyebrow / .retech-x-h2 / .retech-x-section-lead 的唯一属主是
 *   blocks/style-index.css,本文件只消费、不重复定义(重复锚定会被 check-css
 *   判 E5)。
 */

@layer retech-block {
  /* 桌面 4 列(原型 140–144);栅格子项是 li,article 撑满 li。 */
  .retech-x-challenge-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
  }
  .retech-x-challenge-item {
    display: flex;
    min-width: 0;
  }

  /* 卡片本体(原型 145–152):深色描边 + 135° 微亮渐变 + hover 抬升。
     描边/抬升的过渡时长与缓动沿用原型 --dur / --ease-ui。 */
  .retech-x-challenge-card {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    padding: 28px 24px;
    border: 1px solid var(--retech-x-line-dark);
    border-radius: var(--retech-x-r-lg);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.012) 100%);
    transition: border-color var(--retech-x-dur) var(--retech-x-ease-ui),
      transform var(--retech-x-dur) var(--retech-x-ease-ui);
  }
  .retech-x-challenge-card:hover {
    border-color: var(--retech-x-tech-a50);
    transform: translateY(-2px);
  }

  /* 编号:青色 + 等宽字体(原型 153–161);--fs-xs 无 token,13px 字面量。 */
  .retech-x-challenge-no {
    display: inline-block;
    margin-bottom: 16px;
    color: var(--retech-x-tech);
    font-family: var(--wp--preset--font-family--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
  }

  /* 标题(原型 162):--fs-sm 无 token,取 16px 字面量;深色底显式转白,
     不依赖共享层的 h2 修复(那是 h2 专属,这里是无 class 的 h3)。 */
  .retech-x-challenge-title {
    margin: 0;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
  }

  /* 描述(原型 163):--w60 次级白。margin-top 由原型 9px 保留;
     :where() 零特异性,不会压过标题自身的行高/颜色规则。 */
  .retech-x-challenge-desc {
    margin-top: 9px;
    color: var(--retech-x-w60);
    font-size: 13px;
    line-height: 1.62;
  }

  /* 浅色基调回退(judgement call,见文件头):只换卡片底色 / 描边 / 标题色,
     编号保持青色。:where() 保持零特异性 —— 深色卡片规则在前,浅色覆盖在后,
     两者特异性相同时后写的胜出,hover 由更高特异性单独接管。 */
  :where(.retech-x-section--light) .retech-x-challenge-card {
    border-color: var(--retech-x-line);
    background: var(--retech-x-gray-light);
  }
  :where(.retech-x-section--light) .retech-x-challenge-card:hover {
    border-color: var(--retech-x-tech-a50);
  }
  :where(.retech-x-section--light) .retech-x-challenge-title {
    color: var(--retech-x-ink);
  }
  :where(.retech-x-section--light) .retech-x-challenge-desc {
    color: var(--retech-x-ink-2);
  }

  /* ── 网格下方「Typical Contamination」小标题 + 胶囊行 ────────────────────
     原型 `.challenges-tags`(solutions.css:2247-2256):
       .challenges-tags{margin-top:40px;padding-top:28px;border-top:1px solid var(--line-dark)}
       .challenges-tags h3{margin-bottom:16px;color:#fff;font-size:13px;font-weight:800;
                           letter-spacing:.08em;text-transform:uppercase}
       .challenges-tags .chip-row{margin-top:0}
     胶囊本身复用 sys-list 的 `.material-chip` 形态(padding/border-radius/底色);
     `.sec--dark .material-chip` 的深底配色(solutions.css:2258 起)照搬到这里。 */
  .retech-x-challenge-tags {
    margin-top: 40px;
    padding-top: 28px;
    border-top: 1px solid var(--retech-x-line-dark);
  }
  .retech-x-challenge-tags-title {
    margin: 0 0 16px;
    color: var(--retech-x-white);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  .retech-x-challenge-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .retech-x-challenge-chip {
    padding: 6px 12px;
    border: 1px solid var(--retech-x-line-dark);
    border-radius: var(--retech-x-r-pill);
    background: var(--retech-x-w08);
    color: var(--retech-x-w72);
    font-size: 13px;
  }
  :where(.retech-x-section--light) .retech-x-challenge-tags {
    border-top-color: var(--retech-x-line);
  }
  :where(.retech-x-section--light) .retech-x-challenge-tags-title {
    color: var(--retech-x-ink);
  }
  :where(.retech-x-section--light) .retech-x-challenge-chip {
    border-color: var(--retech-x-line);
    background: var(--retech-x-gray-light);
    color: var(--retech-x-ink-2);
  }
}

@layer retech-responsive {
  /* ≤1240:4 列 → 2 列(原型 565)。 */
  @media (max-width: 1240px) {
    .retech-x-challenge-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  /* ⚠️ **这里没有 ≤700 的单列规则,这是刻意的 —— 复刻原型的层叠结果。**
     原型写过两条互相打架的声明:
       · solutions.css:585(≤700 块)`.challenge-grid { grid-template-columns: minmax(0,1fr) }`
       · solutions.css:2349(≤1080 块)`.challenge-grid { grid-template-columns: repeat(2,…) }`
     两个媒体查询在 ≤700 视口下**同时命中**,而 2349 在文件里更靠后 ⇒ 后置者胜,
     原型 **≤700 实际渲染 2 列**(2026-09-23 用 Chrome 实测确认:390px 下
     computed `grid-template-columns: 165px 165px`,段高 556px / 552px 两行)。
     也就是说原型那条 ≤700 单列是**被压死的死规则**,从未生效。
     本站纪律是"以原型渲染结果为准",所以不实现 1 列 —— 只落 ≤1240 一档。
     (整个原型 408 条断点声明里,被自身后置块压死的**只有这一条**。
       形成对照的是同文件的 `.factor-grid`:它的 ≤700 单列(solutions.css:586)
       没有被任何后置规则覆盖,所以 factor-grid 手机上确实是 1 列 ——
       本站 `blocks/factors/style.css` 实现的就是 1 列,两者都不是笔误。
       下一轮审计若再把这里报成"缺失 ≤700 规则",请回看本条。)
     视觉代价:390px 下卡片宽 165px、正文约 117px,偏挤但可读,与原型一致。 */

  /* ≤700:挑战标签区(原型 solutions.css:2361 `.challenges-tags{margin-top:30px;
     padding-top:22px}`)。这一条**没有**被任何后置规则覆盖,必须实现。 */
  @media (max-width: 700px) {
    .retech-x-challenge-tags {
      margin-top: 30px;
      padding-top: 22px;
    }
  }

  /* 降级:hover 抬升关掉(纯装饰动效,不影响信息)。 */
  @media (prefers-reduced-motion: reduce) {
    .retech-x-challenge-card {
      transition: none;
    }
    .retech-x-challenge-card:hover {
      transform: none;
    }
  }
}