/**
 * retech/systems-list —— 首页「Core Recycling Systems」编号式宽卡
 * (原型 sec sec--dark core-systems)。
 *
 * CSS 1:1 移植自 ret-ch/assets/css/retech.css:
 *   §06 编号式宽卡(999–1072)
 *   §17 响应式:平板档(1939–1940)、手机档(1988–1990)
 * 原型 → 本块类名对照:
 *   .sys-list            → .retech-x-sys-list
 *   li.sys-item          → .retech-x-sys-list__item
 *   a.sys-card           → .retech-x-sys-list__card
 *   .sys-no              → .retech-x-sys-list__no
 *   .sys-body            → .retech-x-sys-list__body
 *   .sys-title           → .retech-x-sys-list__title
 *   .sys-desc            → .retech-x-sys-list__desc
 *   .sys-output / span   → .retech-x-sys-list__output / span
 *   .sys-media / img     → .retech-x-sys-list__media / img
 *   .sys-card .link-arrow→ .retech-x-sys-list__card .retech-x-link-arrow
 *                          (箭头与布局来自共享基座,本块只覆盖配色)
 * token 对照:--line-dark→--retech-x-line-dark,--r-lg→--retech-x-r-lg,
 *   --r-md→--retech-x-r-md,--green→--retech-x-flow,--cyan→--retech-x-tech,
 *   --w72→--retech-x-w72,--w90→--retech-x-w90,--steel→--retech-x-steel,
 *   --white→--retech-x-white,--gray-light→--retech-x-gray-light,
 *   --ink→--retech-x-ink,--ink-2→--retech-x-ink-2,
 *   --dur→--retech-x-dur,--ease-ui→--retech-x-ease-ui,
 *   --ease-entry→--retech-x-ease-entry。
 *   --fs-h3(21px)/--fs-sm(14px)在本站没有对应 token,按字面量落地(同 gallery 的
 *   --fs-xs 处理);渐变里的 rgba 数值是本块独有的视觉,原样保留。
 *   原型 hover 描边 rgba(118,192,67,.42) 用语义 token --retech-x-flow-a45(.45) 承接。
 *
 * 两处刻意的偏离:
 *   1) 原型 `.core-systems{position:relative}` 未移植 —— 本块没有任何绝对定位
 *      子元素,那条规则只是给原型其它层做包含块,落地成空规则没有意义。
 *   2) 深浅双态:原型首页这一段恒为深色(sec sec--dark),块属性 tone 允许 light,
 *      故基座按原型深色写,再用 [data-header="light"] 整套换到浅底档
 *      (描边 / 正文 / 编号描边 / 媒体底色 / 文字链配色),避免浅底上出现
 *      「白字白描边」的不可读组合。作用域用块自身的 data-header 属性而不是新增
 *      修饰类:section 上本来就有该属性,卡片是它的后代。
 *
 * 缺列收口:手填卡可以没有编号或没有配图(见 render.php 的 --no-number /
 * --no-media),栅格据此去掉空轨道;原型恒为三轨,故这几条是新增而非移植。
 *
 * 层纪律:块文件只允许 retech-block / retech-responsive 两层(不含 reset/base);
 * 所有 @media 都包在 retech-responsive 里;断点只用 1240 / 1080 / 700;
 * 不含任何强制覆盖关键字。本文件只定义 .retech-x-sys-list* 属主类;
 * .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 {
  /* ── 卡片栈(原型 .sys-list)────────────────────────────────────────── */
  .retech-x-sys-list {
    display: grid;
    gap: 20px;
  }

  /* ── 宽卡:编号 88px / 正文弹性 / 配图 minmax(320px,600px) ───────────── */
  .retech-x-sys-list__card {
    display: grid;
    /* 客户反馈「内容区域比图片区域大」:图片上限 420 → 600,正文相应收窄(~592) */
    grid-template-columns: 88px minmax(0, 1fr) minmax(320px, 600px);
    align-items: stretch;
    gap: 40px;
    padding: 32px;
    border: 1px solid var(--retech-x-line-dark);
    border-radius: var(--retech-x-r-lg);
    background: linear-gradient(120deg, rgba(255, 255, 255, .035) 0%, rgba(255, 255, 255, .012) 100%);
    transition: border-color var(--retech-x-dur) var(--retech-x-ease-ui),
                background-color var(--retech-x-dur) var(--retech-x-ease-ui),
                transform var(--retech-x-dur) var(--retech-x-ease-ui);
  }
  /* 缺编号 / 缺配图时的轨道收口(新增,原型恒为三轨) */
  .retech-x-sys-list__card--no-number {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 600px);
  }
  .retech-x-sys-list__card--no-media {
    grid-template-columns: 88px minmax(0, 1fr);
  }
  .retech-x-sys-list__card--no-number.retech-x-sys-list__card--no-media {
    grid-template-columns: minmax(0, 1fr);
  }

  .retech-x-sys-list__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%);
    transform: translateY(-2px);
  }

  /* ── 编号:描边空心字,悬停实心转绿 ────────────────────────────────── */
  .retech-x-sys-list__no {
    font-size: 34px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.03em;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, .28);
    transition: -webkit-text-stroke-color var(--retech-x-dur) var(--retech-x-ease-ui),
                color var(--retech-x-dur) var(--retech-x-ease-ui);
  }
  .retech-x-sys-list__card:hover .retech-x-sys-list__no {
    color: var(--retech-x-flow);
    -webkit-text-stroke-color: var(--retech-x-flow);
  }

  /* ── 正文列 ──────────────────────────────────────────────────────────── */
  .retech-x-sys-list__body {
    display: flex;
    flex-direction: column;
  }
  .retech-x-sys-list__title {
    font-size: 21px;      /* 原型 --fs-h3 */
    font-weight: 700;
    color: var(--retech-x-white);
    letter-spacing: -.01em;
  }
  .retech-x-sys-list__desc {
    margin-top: 12px;
    color: var(--retech-x-w72);
    font-size: 14px;      /* 原型 --fs-sm */
    line-height: 1.66;
    max-width: 62ch;
  }

  /* Output 用青色:技术/参数语义(绿 = 循环/产出/CTA,青 = 工艺/技术,不可混用) */
  .retech-x-sys-list__output {
    margin-top: 16px;
    padding-left: 14px;
    border-left: 2px solid var(--retech-x-tech);
    color: var(--retech-x-w90);
    font-size: 14px;
    line-height: 1.6;
  }
  .retech-x-sys-list__output span {
    display: block;
    margin-bottom: 3px;
    color: var(--retech-x-tech);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
  }

  /* 卡片底部文字链:箭头/间距/上推由共享 .retech-x-link-arrow 负责,
     这里只复刻原型的配色(.sys-card .link-arrow{green} / :hover{#fff})。 */
  .retech-x-sys-list__card .retech-x-link-arrow {
    color: var(--retech-x-flow);
  }
  .retech-x-sys-list__card .retech-x-link-arrow:hover {
    color: var(--retech-x-white);
  }

  /* ── 配图列 ──────────────────────────────────────────────────────────── */
  .retech-x-sys-list__media {
    position: relative;
    overflow: hidden;
    border-radius: var(--retech-x-r-md);
    background: var(--retech-x-steel);
    min-height: 172px;
  }
  .retech-x-sys-list__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 600ms var(--retech-x-ease-entry);
  }
  .retech-x-sys-list__card:hover .retech-x-sys-list__media img {
    transform: scale(1.045);
  }

  /* ── 浅色基调(tone="light")────────────────────────────────────────────
     原型没有这一档;深色取色(白字/白描边/石板底)在浅底上不可读,故整套换档。 */
  [data-header="light"] .retech-x-sys-list__card {
    border-color: var(--retech-x-line);
    background: linear-gradient(120deg, rgba(17, 23, 28, .035) 0%, rgba(17, 23, 28, .012) 100%);
  }
  [data-header="light"] .retech-x-sys-list__card:hover {
    border-color: var(--retech-x-flow-a45);
    background: linear-gradient(120deg, rgba(118, 192, 67, .10) 0%, rgba(17, 23, 28, .02) 100%);
  }
  [data-header="light"] .retech-x-sys-list__no {
    -webkit-text-stroke-color: rgba(17, 23, 28, .28);
  }
  [data-header="light"] .retech-x-sys-list__card:hover .retech-x-sys-list__no {
    color: var(--retech-x-flow-dark);
    -webkit-text-stroke-color: var(--retech-x-flow-dark);
  }
  [data-header="light"] .retech-x-sys-list__title {
    color: var(--retech-x-ink);
  }
  [data-header="light"] .retech-x-sys-list__desc {
    color: var(--retech-x-ink-2);
  }
  [data-header="light"] .retech-x-sys-list__output {
    color: var(--retech-x-ink-2);
  }
  [data-header="light"] .retech-x-sys-list__card .retech-x-link-arrow {
    color: var(--retech-x-flow-dark);
  }
  [data-header="light"] .retech-x-sys-list__card .retech-x-link-arrow:hover {
    color: var(--retech-x-ink);
  }
  [data-header="light"] .retech-x-sys-list__media {
    background: var(--retech-x-gray-light);
  }
}

@layer retech-responsive {
  /* --- 平板:编号 + 正文两轨,配图跨满整行(原型 §17 / 1080 档)--- */
  @media (max-width: 1080px) {
    .retech-x-sys-list__card {
      grid-template-columns: 62px minmax(0, 1fr);
      gap: 26px;
    }
    .retech-x-sys-list__card--no-number {
      grid-template-columns: minmax(0, 1fr);
    }
    .retech-x-sys-list__media {
      grid-column: 1 / -1;
      min-height: 0;
      aspect-ratio: 16 / 9;
    }
  }

  /* --- 手机:单列堆叠,配图 3:2(原型 §17 / 700 档)--- */
  @media (max-width: 700px) {
    .retech-x-sys-list__card {
      grid-template-columns: 1fr;
      gap: 20px;
      padding: 24px;
    }
    .retech-x-sys-list__no {
      font-size: 28px;
    }
    .retech-x-sys-list__media {
      aspect-ratio: 3 / 2;
    }
  }
}