/**
 * retech/proof 块样式 —— 移植自原型 assets/css/solutions.css §「Project Proof」
 * = 367–395,以及响应式 576–578(≤1080 单列)。
 *
 * 层级:只在 retech-block / retech-responsive 内写规则。断点:1240 / 1080 / 700。
 * 共享件(wrap / section-head / eyebrow / h2 / section-lead / section--dark)由全局文件单一属主。
 */

@layer retech-block {
  /* ── 双图:2fr / 1fr(左大右小)────────────────────────────────────────── */
  .retech-x-proof-media {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    margin-bottom: 32px;
  }
  .retech-x-proof-media img {
    width: 100%;
    height: 100%;
    min-height: 260px;
    object-fit: cover;
    border-radius: var(--retech-x-r-lg);
  }
  /* 只有一张图时铺满(避免右侧留一条空档) */
  .retech-x-proof-media > img:only-child {
    grid-column: 1 / -1;
  }

  /* ── 编号证明卡 ───────────────────────────────────────────────────────── */
  .retech-x-proof-grid {
    display: grid;
    gap: 24px;
  }
  .retech-x-proof-grid--cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  /* 原型有 proof-grid--two 变体(深色区用) */
  .retech-x-proof-grid--cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .retech-x-proof-card {
    padding: 26px 24px;
    border: 1px solid var(--retech-x-line);
    border-radius: var(--retech-x-r-lg);
    background: var(--retech-x-gray-light);
  }
  /* 编号:绿色 + 等宽 —— 绿色 = 产出 / 正向结果(与 factors 的青色编号区分:
     那里是"配置因素"(参数语义),这里是"项目证明"(产出语义)。 */
  .retech-x-proof-no {
    display: inline-block;
    margin-bottom: 12px;
    color: var(--retech-x-flow);
    font-family: var(--wp--preset--font-family--mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 13px;
    font-weight: 700;
  }
  .retech-x-proof-card h3 {
    color: var(--retech-x-ink);
    font-size: 16px;
    font-weight: 700;
  }
  .retech-x-proof-card p {
    margin-top: 8px;
    color: var(--retech-x-ink-2);
    font-size: 13px;
    line-height: 1.6;
  }

  /* ── 卡内要点列表(原型 `ul.route-points`,solutions.css:194–208)──────────
     「无编号 + 标题 + 要点列表」那一类 proof-card 用它(5 个 System 详情页的
     `#engineering`「Capacity, Layout and Control」)。
     它与 `output-routes` 的 `.retech-x-route-points` 是**同一个原型类**的两次落地 ——
     不能共用一个 class(check-css E5:同一 class 被两个块文件锚定),
     所以本块的叫 `-proof-points`,取值逐条对齐原型。 */
  .retech-x-proof-points {
    display: grid;
    gap: 10px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--retech-x-line);
  }
  .retech-x-proof-points li {
    position: relative;
    padding-left: 22px;
    color: var(--retech-x-ink-2);
    font-size: 13px;          /* 原型 --fs-xs */
    line-height: 1.55;
  }
  /* 11px 圆点 + 3px 青环(inset box-shadow 画环,与原型同法) */
  .retech-x-proof-points li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 5px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 3px var(--retech-x-tech);
  }

  /* ── 深色基调(原型深色区用到的变体)──────────────────────────────────── */
  .retech-x-section--dark .retech-x-proof-card {
    border-color: var(--retech-x-line-dark);
    background: var(--retech-x-steel);
  }
  .retech-x-section--dark .retech-x-proof-card h3 {
    color: #fff;
  }
  .retech-x-section--dark .retech-x-proof-card p {
    color: var(--retech-x-w72);
  }
  /* 深色档的要点:原型 `#engineering` 恒为浅色(solutions.css 只给浅色值),
     这里按本文件既有做法换算 —— 描边走 line-dark、要点字色走 w72,圆点仍是青色
     (青 = 工艺/技术/参数,深底上同样成立)。 */
  .retech-x-section--dark .retech-x-proof-points {
    border-top-color: var(--retech-x-line-dark);
  }
  .retech-x-section--dark .retech-x-proof-points li {
    color: var(--retech-x-w72);
  }
}

@layer retech-responsive {
  /* ── 笔记本 / 平板:双图与卡片都转单列 ───────────────────────────────────
     原型 `solutions.css:576–578`(在 **≤1080** 块内,该块从 :571 起):
       .proof-media     { grid-template-columns: minmax(0, 1fr); }
       .proof-media img { min-height: 220px; }
       .proof-grid      { grid-template-columns: minmax(0, 1fr); }
     ⚠️ 旧版把这三条写在 ≤1240:原型的 ≤1240 块是 `solutions.css:564–569`,里面
     只有 challenge-grid / factor-grid / sol-grid / process-track 四条(分属
     challenges / factors / sol-list / process-route 四个块),**没有**任何 proof
     规则。写错断点的后果:1081–1240px 区间本站证明区塌成单列,而原型仍是多列。
     本条按原型移到 1080,proof 在 1240 档**没有**规则。 */
  @media (max-width: 1080px) {
    .retech-x-proof-media {
      grid-template-columns: minmax(0, 1fr);
    }
    .retech-x-proof-media img {
      min-height: 220px;
    }
    .retech-x-proof-grid--cols-3,
    .retech-x-proof-grid--cols-2 {
      grid-template-columns: minmax(0, 1fr);
    }
  }
  /* ── 段尾 / 卡片内小字(`p.sol-note`)───────────────────────────────────
     原型两处不同的来源,尺寸也不同,不要合并:
       · 段尾(proof-grid 之后)  `retech.css:217`  → margin-top:30px; 13px; ink-3
       · 卡片内(`.about-mvp .proof-card .sol-note`,solutions.css:1311)
                                  → margin-top:10px; --w40(深底)
     卡片内小字在**浅底**段里原型没有专门规则 → 继承 `.proof-card p` 的字号,
     颜色用 ink-3。 */
  .retech-x-proof .retech-x-sol-note {
    margin-top: 30px;
    color: var(--retech-x-ink-3);
    font-size: 13px;
    line-height: 1.68;
  }
  .retech-x-proof-card .retech-x-sol-note {
    margin-top: 10px;
    color: var(--retech-x-ink-3);
    font-size: 14px;
    line-height: 1.6;
  }
  .retech-x-proof.retech-x-section--dark .retech-x-proof-card .retech-x-sol-note { color: var(--retech-x-w40); }
  .retech-x-proof.retech-x-section--dark .retech-x-sol-note { color: var(--retech-x-w60); }

}