@layer retech-block {
  /* retech/video-grid —— 原型 `assets/css/solutions.css` §19.4「Videos」逐条搬运:
     `.vid-sec` / `.vid-filter` / `.chip-row(--dark)` / `.vid-grid(--three)` /
     `.vid-card` / `.vid-link` / `.vid-thumb` / `.vid-play` / `.vid-dur` /
     `.vid-body` / `.vid-cat` / `.vid-title` / `.vid-empty` / `.vid-more`,
     加上 §19.14 的深色区 `.link-arrow` 兜底与 §19.10 / §19.11 的响应式。

     类名加 `retech-x-` 前缀;原型变量换成本站 token(见 video-facade/style.css
     的对照表)。本节里唯一的额外推导:
       · 原型 `.chip-row { margin-top: 18px }` + `.vid-filter { margin-bottom: 30px }`
         两条合并成 `.retech-x-vidgrid-filter { margin: 18px 0 30px }`
         —— chip 行只在本块里出现一次,拆成两个类名没有意义。
       · 段落的纵向节奏(`.vid-sec` / `.vid-more` 的 --sec-y-sm)在本块声明,
         详情页的播放器段用 retech/video-detail 自己的类 —— 见那个文件的说明
         (块 CSS 按块入队,共用一个类名会在没有那个块的页面上失样式)。 */

  .retech-x-vid-sec {
    padding-top: var(--retech-x-sec-y-sm);
    padding-bottom: var(--retech-x-sec-y-sm);
  }
  .retech-x-vid-more {
    padding-top: var(--retech-x-sec-y-sm);
    padding-bottom: var(--retech-x-sec-y-sm);
  }

  /* ── 分类 chip 行 ─────────────────────────────────────────────────────── */
  .retech-x-vidgrid-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 18px 0 30px;
  }
  .retech-x-vidgrid-filter a {
    display: inline-block;
    padding: 9px 16px;
    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;                 /* 原型 --fs-xs */
    font-weight: 600;
    transition: border-color var(--retech-x-dur-fast) var(--retech-x-ease-ui),
                background-color var(--retech-x-dur-fast) var(--retech-x-ease-ui),
                color var(--retech-x-dur-fast) var(--retech-x-ease-ui);
  }
  .retech-x-vidgrid-filter a span { opacity: 0.6; margin-left: 4px; }
  .retech-x-vidgrid-filter a:hover { border-color: var(--retech-x-flow); color: #fff; }
  .retech-x-vidgrid-filter a.is-active {
    background: var(--retech-x-flow);
    border-color: var(--retech-x-flow);
    color: #fff;
  }
  /* 浅色底(原型 `.sec--light .chip-row a`) */
  .retech-x-section--light .retech-x-vidgrid-filter a {
    border-color: var(--retech-x-line);
    background: var(--retech-x-white);
    color: var(--retech-x-ink-2);
  }
  .retech-x-section--light .retech-x-vidgrid-filter a:hover {
    border-color: var(--retech-x-flow);
    color: var(--retech-x-flow-dark);
  }
  .retech-x-section--light .retech-x-vidgrid-filter a.is-active {
    background: var(--retech-x-flow);
    border-color: var(--retech-x-flow);
    color: #fff;
  }

  /* ── 卡片网格 ─────────────────────────────────────────────────────────── */
  .retech-x-vid-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }
  .retech-x-vid-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .retech-x-vid-card[hidden] { display: none; }

  .retech-x-vid-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid var(--retech-x-line-dark);
    border-radius: var(--retech-x-r-lg);
    background: var(--retech-x-steel);
    overflow: hidden;
    transition: border-color var(--retech-x-dur-fast) var(--retech-x-ease-ui),
                transform var(--retech-x-dur-fast) var(--retech-x-ease-ui);
  }
  .retech-x-section--light .retech-x-vid-link {
    border-color: var(--retech-x-line);
    background: var(--retech-x-white);
  }
  .retech-x-vid-link:hover {
    border-color: var(--retech-x-flow);
    transform: translateY(-2px);
  }

  .retech-x-vid-thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--retech-x-steel-2);
    overflow: hidden;
  }
  .retech-x-vid-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0.9;
  }
  .retech-x-vid-play {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: rgba(17,23,28,0.62);
    border: 1.5px solid rgba(255,255,255,0.72);
    backdrop-filter: blur(4px);
  }
  .retech-x-vid-play::after {
    content: "";
    position: absolute;
    left: 52%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-style: solid;
    border-width: 9px 0 9px 15px;
    border-color: transparent transparent transparent #fff;
  }
  .retech-x-vid-link:hover .retech-x-vid-play {
    background: var(--retech-x-flow);
    border-color: var(--retech-x-flow);
  }
  .retech-x-vid-dur {
    position: absolute;
    right: 10px;
    bottom: 10px;
    padding: 3px 9px;
    border-radius: var(--retech-x-r-xs);
    background: rgba(17,23,28,0.72);
    color: var(--retech-x-w90);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .retech-x-vid-body {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 18px 20px 20px;
    flex: 1;
  }
  .retech-x-vid-cat {
    color: var(--retech-x-tech);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .retech-x-vid-title {
    color: #fff;
    font-size: 14px;                 /* 原型 --fs-sm */
    font-weight: 700;
    line-height: 1.45;
  }
  .retech-x-section--light .retech-x-vid-title { color: var(--retech-x-ink); }
  .retech-x-vid-body .retech-x-link-arrow { margin-top: auto; }

  /* 原型 §19.14:`.link-arrow` 默认墨色,压在深色卡上对比度 1:1(隐形)。
     本块是深色卡,所以在这里兜底一次,不用每张卡手加 `--light` 修饰类。 */
  .retech-x-vid-card .retech-x-link-arrow { color: var(--retech-x-w90); }
  .retech-x-vid-card .retech-x-link-arrow:hover { color: var(--retech-x-flow); }

  .retech-x-vid-empty {
    margin-top: 34px;
    text-align: center;
    color: var(--retech-x-w60);
    font-size: 14px;
  }
  .retech-x-section--light .retech-x-vid-empty { color: var(--retech-x-ink-3); }
}

@layer retech-responsive {
  /* 原型 §19.10 */
  @media (max-width: 1240px) {
    .retech-x-vid-grid,
    .retech-x-vid-grid--three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 767px) {
    .retech-x-vid-grid,
    .retech-x-vid-grid--three { grid-template-columns: minmax(0, 1fr); }
  }

  /* 原型 §19.11:动效克制 */
  @media (prefers-reduced-motion: reduce) {
    .retech-x-vid-link { transition: none; }
    .retech-x-vid-link:hover { transform: none; }
  }
}