/**
 * retech/product-categories —— 首页「Key Machines / 3 类设备入口」三卡栅格
 * (原型 sec sec--light product-categories)。
 *
 * CSS 1:1 移植自 ret-ch/assets/css/retech.css:
 *   §10 Key Machines(3 类)1376–1396
 *   §17 响应式:1080 档 `.cat-grid` → 2 列(1947)、700 档 → 1 列(2012)
 * 原型 → 本块类名对照:
 *   .cat-grid                 → .retech-x-cat-grid
 *   article.cat-card          → .retech-x-cat-card
 *   .cat-card > a             → .retech-x-cat-card__link
 *   .cat-media / img          → .retech-x-cat-media / img
 *   .cat-body                 → .retech-x-cat-body
 *   .cat-title                → .retech-x-cat-title
 *   .cat-desc                 → .retech-x-cat-desc
 *   .cat-card .link-arrow     → .retech-x-cat-card .retech-x-link-arrow
 *                               (原型这一段对 .link-arrow 没有覆盖,基座的
 *                                墨色/悬停绿与原型 §基础 .link-arrow 完全一致,
 *                                故本块只在深色档覆盖配色)
 * token 对照:--line→--retech-x-line,--r-lg→--retech-x-r-lg,
 *   --white→--retech-x-white,--gray-light→--retech-x-gray-light,
 *   --ink→--retech-x-ink,--ink-2→--retech-x-ink-2,
 *   --sh-md→--retech-x-sh-md,--dur→--retech-x-dur,
 *   --ease-ui→--retech-x-ease-ui,--ease-entry→--retech-x-ease-entry。
 *   --fs-h3(21px)/--fs-sm(14px)在本站没有对应 token,按字面量落地
 *   (同 systems-list / gallery);悬停描边 rgba(118,192,67,.5) 用语义 token
 *   --retech-x-flow-a45(.45) 承接(与 systems-list 同一处四舍五入)。
 *
 * 三处刻意的偏离:
 *   1) 深浅双态:原型首页这一段恒为浅色(sec sec--light),块属性 tone 允许 dark,
 *      故基座按原型浅色写,再用 [data-header="dark"] 整套换到深底档(描边 /
 *      卡底 / 标题 / 正文 / 媒体底色 / 文字链配色),避免深底上出现
 *      「黑字黑描边」的不可读组合。作用域用块自身的 data-header 属性而不是新增
 *      修饰类:section 上本来就有该属性,卡片是它的后代。
 *   2) `--no-media`:原型恒有图;插件尚未落地任何图片(block.json 的 cards 默认
 *      image 也是 ""),无图卡不收媒体框(render.php),卡片退成单轨。同行卡片由
 *      栅格默认 stretch 自动等高;整页 3 张都无图时给正文一个最小高度,免得整段
 *      塌成三条矮条 —— 这个 240px 是新增的版式补丁,不是原型数值。
 *   3) 原型 `.cat-card > a` 直接子选择器换成显式类 .retech-x-cat-card__link:
 *      无落点的卡片退成 <div>(不输出 href="" 空锚点),结构仍是同一层。
 *
 * 层纪律:块文件只允许 retech-block / retech-responsive 两层(不含 reset/base);
 * 所有 @media 都包在 retech-responsive 里;断点只用 1240 / 1080 / 700;
 * 不含任何强制覆盖关键字。本文件只定义 .retech-x-cat-* 属主类;
 * .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 {
  /* ── 三卡栅格(原型 .cat-grid)──────────────────────────────────────── */
  .retech-x-cat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }

  /* ── 卡片外壳(原型 article.cat-card)────────────────────────────────── */
  .retech-x-cat-card {
    border: 1px solid var(--retech-x-line);
    border-radius: var(--retech-x-r-lg);
    background: var(--retech-x-white);
    overflow: hidden;
    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-cat-card:hover {
    border-color: var(--retech-x-flow-a45);
    box-shadow: var(--retech-x-sh-md);
    transform: translateY(-3px);
  }

  /* 整卡链接(原型 .cat-card > a):纵向两段,撑满卡片高度 */
  .retech-x-cat-card__link {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  /* ── 媒体框(原型 .cat-media,3:2)─────────────────────────────────── */
  .retech-x-cat-media {
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--retech-x-gray-light);
  }
  .retech-x-cat-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 600ms var(--retech-x-ease-entry);
  }
  .retech-x-cat-card:hover .retech-x-cat-media img {
    transform: scale(1.04);
  }

  /* ── 正文列(原型 .cat-body)───────────────────────────────────────── */
  .retech-x-cat-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 26px 24px 28px;
  }
  .retech-x-cat-title {
    font-size: 21px;      /* 原型 --fs-h3 */
    font-weight: 700;
    color: var(--retech-x-ink);
  }
  .retech-x-cat-desc {
    margin-top: 11px;
    color: var(--retech-x-ink-2);
    font-size: 14px;      /* 原型 --fs-sm */
    line-height: 1.66;
  }

  /* ── 无图变体:不收媒体框,正文自己撑起卡片体量 ──────────────────────
     原型恒有图,这条是新增加而非移植(见文件头「刻意的偏离 2)」)。
     同行有图/无图卡片仍由栅格 stretch 拉平,min-height 只在整行都无图时生效。 */
  .retech-x-cat-card--no-media .retech-x-cat-body {
    min-height: 240px;
  }

  /* ── 深色基调(tone="dark")────────────────────────────────────────────
     原型没有这一档;浅色取色(墨字/浅描边/白卡底)在深底上不可读,故整套换档。
     卡底改用与 systems-list 同款的极淡白渐变,而不是纯白块。 */
  [data-header="dark"] .retech-x-cat-card {
    border-color: var(--retech-x-line-dark);
    background: linear-gradient(120deg, rgba(255, 255, 255, .035) 0%, rgba(255, 255, 255, .012) 100%);
  }
  [data-header="dark"] .retech-x-cat-card:hover {
    border-color: var(--retech-x-flow-a45);
    background: linear-gradient(120deg, rgba(118, 192, 67, .07) 0%, rgba(255, 255, 255, .02) 100%);
  }
  [data-header="dark"] .retech-x-cat-media {
    background: var(--retech-x-steel);
  }
  [data-header="dark"] .retech-x-cat-title {
    color: var(--retech-x-white);
  }
  [data-header="dark"] .retech-x-cat-desc {
    color: var(--retech-x-w72);
  }
  /* 基座 .retech-x-link-arrow 默认墨色,深底上会「隐形」—— 原型记过同一个坑 */
  [data-header="dark"] .retech-x-cat-card .retech-x-link-arrow {
    color: var(--retech-x-flow);
  }
  [data-header="dark"] .retech-x-cat-card .retech-x-link-arrow:hover {
    color: var(--retech-x-white);
  }
}

@layer retech-block {
  /* ══ 分类交叉链接(原型 `sec--light cat-cross` + `ul.chip-row`)══════════
     CSS 对照 `ret-ch/assets/css/solutions.css:126`(.chip-row)、`:1278`(.cat-cross)
     与 `:1162`(.sec--light .chip-row a)。用于老 8 类分类页底部的
     「Other Categories / Browse the Rest of the Equipment Range」chip 列表。 */
  .retech-x-cat-cross {
    padding-top: var(--retech-x-sec-y-sm);
    padding-bottom: var(--retech-x-sec-y-sm);
  }
  .retech-x-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
  }
  .retech-x-chip-row a {
    display: inline-block;
    padding: 9px 16px;
    border: 1px solid var(--retech-x-line);
    border-radius: var(--retech-x-r-pill);
    background: var(--retech-x-white);
    color: var(--retech-x-ink-2);
    font-size: 13px;   /* 原型 --fs-xs */
    font-weight: 600;
    transition: border-color 150ms var(--retech-x-ease-ui),
                background-color 150ms var(--retech-x-ease-ui),
                color 150ms var(--retech-x-ease-ui);
  }
  .retech-x-chip-row a:hover {
    border-color: var(--retech-x-flow);
    color: var(--retech-x-flow-dark);
  }

  /* ══ 设备范围证明卡(原型 `sec--light sol-proof` > `.proof-grid`)════════
     新 3 类分类页专用(`/product-category/{slug}.html`),不是产品列表。
     CSS 逐条对照 `ret-ch/assets/css/solutions.css:380`(.proof-grid)、
     `:381`(.proof-card)、`:392`(.proof-card h3)、`:393`(.proof-card p)、
     `:578`(1080 档单列)。

     ⚠️ 为什么**不**复用 `blocks/proof/style.css` 里同名的
     `.retech-x-proof-grid` / `.retech-x-proof-card`(它们也是 `.proof-grid` /
     `.proof-card` 的移植):
       1) `check-css` 的 E5 要求一个类只有**一个**属主文件 —— 在本文件里再写一遍
          就是「被多个块文件锚定」,自检直接红(实测报错);
       2) 那套规则在 **1240 档**就把三列压成一列,而原型 `.proof-grid` 是
          **1080 档**(solutions.css:571/578)。分类页要 1:1,所以这里用自己的
          `.retech-x-cat-proof-*` 命名,断点跟原型走。
     卡内的 `ul.route-points` 用**共享类** `.retech-x-route-points` /
     `.retech-x-route-point`(属主是 blocks/output-routes/style.css,跨块按需加载),
     本文件不重复定义(E5)。 */
  .retech-x-cat-proof-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }
  .retech-x-cat-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);
  }
  .retech-x-cat-proof-card h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--retech-x-ink);
  }
  .retech-x-cat-proof-card p {
    margin-top: 8px;
    color: var(--retech-x-ink-2);
    font-size: 13px;
    line-height: 1.6;
  }
}

@layer retech-responsive {
  /* --- 平板:三卡 → 两列(原型 §17 / 1080 档)--- */
  @media (max-width: 1080px) {
    .retech-x-cat-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  /* --- 平板:证明卡 3 列 → 单列(原型 solutions.css:578 / 1080 档)--- */
  @media (max-width: 1080px) {
    .retech-x-cat-proof-grid {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  /* --- 手机:单列堆叠(原型 §17 / 700 档)--- */
  @media (max-width: 700px) {
    .retech-x-cat-grid {
      grid-template-columns: 1fr;
    }
  }
}