/**
 * retech/gallery —— 详情页图集 / 媒体网格块样式(原型 sec sec--light|--dark sol-gallery)。
 *
 * CSS 1:1 移植自原型 assets/css/solutions.css §21.2b(1820–1863)+ §21.5 响应式
 * (1941–1966 中属于 .sol-gallery 的那几条):
 *   .sol-gallery .media-grid                                  → .retech-x-gallery__grid
 *   .sol-gallery .media-grid.columns-2                        → .retech-x-gallery--cols-2 .retech-x-gallery__grid
 *   .sol-gallery .media-tile                                  → .retech-x-gallery__tile
 *   .sol-gallery .media-tile-btn(+ :hover / img)              → .retech-x-gallery__btn(+ :hover / img)
 *   .sol-gallery .media-grid.columns-2 .media-tile-btn img    → .retech-x-gallery--cols-2 .retech-x-gallery__btn img
 *   .sol-gallery .media-cap                                   → .retech-x-gallery__cap
 *   .sec--dark.sol-gallery .media-tile-btn / img / .media-cap → .retech-x-gallery--dark .retech-x-gallery__btn / img / cap
 *
 * 原型 token → 本站 token 对照(retech.css / style-index.css):
 *   --line→--retech-x-line, --green→--retech-x-flow, --r-md→--retech-x-r-md,
 *   --sh-md→--retech-x-sh-md, --ink-3→--retech-x-ink-3, --steel→--retech-x-steel,
 *   --steel-2→--retech-x-steel-2, --gray-light→--retech-x-gray-light,
 *   --white→--retech-x-white, --w60→--retech-x-w60, --line-dark→--retech-x-line-dark,
 *   --dur-fast→--retech-x-dur-fast, --ease-ui→--retech-x-ease-ui。
 *   只有 --fs-xs(13px)在本站没有对应 token —— 按字面量 13px 落地。
 *
 * 原型里**刻意不移植**的两组规则(它们不属于 sol-gallery,是正文图集 .art-body 的):
 *   1) solutions.css:1763–1802 `.art-body .media-grid` 基座(object-fit:contain、
 *      margin:26px 0、`.columns-1{max-width:560px}`)——那是产品/新闻正文里老站抓图的
 *      小图平铺版式,属 retech-x-rich 正文样式,不是本区块的职责。
 *   2) solutions.css:1809–1819 `.art-body .media-grid.columns-4` 的「手机端保 4 列 +
 *      横向滑动」例外 —— 只服务于产品页 Applications 图集(4 原料 + 4 成品上下对应),
 *      是产品正文的排版决策。本块 columns=4 时仍按 sol-gallery 的既有节奏在
 *      ≤1080px 收成 2 列(见 retech-responsive);若日后产品详情要把 Applications
 *      图集也切到本块,再单独决策是否恢复横滑。
 *      另:原型 ≤480px 的 `.sol-gallery ... { gap: 10px }`(1964–1966)因本站断点只有
 *      1240/1080/700 而折进 700px 档(取原型 767px 档的 gap:12px),不再单独设 480 档。
 *
 * 层纪律:块文件只允许 retech-block / retech-responsive 两层(不含 reset/base);
 * 所有 @media 都在 retech-responsive 里;不使用任何强制覆盖关键字。
 * 本文件只定义本块属主类 .retech-x-gallery*(section / wrap / section-head /
 * eyebrow / h2 / section-lead / section--light / section--dark 一律来自全局
 * blocks/style-index.css,此处不重复定义 —— 重复锚定会被 check-css 判 E5)。
 *
 * 深浅色次序照抄原型:深色覆盖写在 columns-2 之前。原型里
 * `.sol-gallery .media-grid.columns-2 .media-tile-btn img`(4 类)特异性高于
 * `.sec--dark.sol-gallery .media-tile-btn img`(3 类),所以深色 + 2 列时
 * 布局渲染图仍是浅底白板;本站两条选择器特异性相同(各 2 类),靠**源序**复现
 * 同一结果 —— 调整顺序会改变深色区块里 16:10 图的底色,别动。
 */

@layer retech-block {
  /* ── 网格:默认 3 列(solutions.css:1827–1833)────────────────────────── */
  .retech-x-gallery__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin: 0;
  }
  .retech-x-gallery--cols-1 .retech-x-gallery__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .retech-x-gallery--cols-2 .retech-x-gallery__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .retech-x-gallery--cols-4 .retech-x-gallery__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  /* ── tile:figure + 可点击按钮 + 可选图注(1834–1858)────────────────── */
  .retech-x-gallery__tile {
    margin: 0;
  }
  .retech-x-gallery__btn {
    display: block;
    width: 100%;
    padding: 0;
    border: 1px solid var(--retech-x-line);
    border-radius: var(--retech-x-r-md);
    background: var(--retech-x-white);
    cursor: zoom-in;
    overflow: hidden;
    transition: border-color var(--retech-x-dur-fast) var(--retech-x-ease-ui),
                box-shadow var(--retech-x-dur-fast) var(--retech-x-ease-ui),
                transform var(--retech-x-dur-fast) var(--retech-x-ease-ui);
  }
  .retech-x-gallery__btn:hover {
    border-color: var(--retech-x-flow);
    box-shadow: var(--retech-x-sh-md);
    transform: translateY(-2px);
  }
  .retech-x-gallery__btn img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    background: var(--retech-x-gray-light);
  }
  .retech-x-gallery__cap {
    margin-top: 10px;
    color: var(--retech-x-ink-3);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.45;
  }

  /* ── 深色区块里的图集(整线实拍在 sec--dark 上,1860–1863)──────────── */
  .retech-x-gallery--dark .retech-x-gallery__btn {
    border-color: var(--retech-x-line-dark);
    background: var(--retech-x-steel);
  }
  .retech-x-gallery--dark .retech-x-gallery__btn img {
    background: var(--retech-x-steel-2);
  }
  .retech-x-gallery--dark .retech-x-gallery__cap {
    color: var(--retech-x-w60);
  }

  /* ── columns-2:布局渲染图 16:10 等轴测图,contain 不裁设备(1857)────
     放在深色覆盖之后:同特异性下由源序决定,复现原型「2 列时用浅底白板」的结果。 */
  .retech-x-gallery--cols-2 .retech-x-gallery__btn img {
    aspect-ratio: 16 / 10;
    object-fit: contain;
    background: var(--retech-x-gray-light);
  }
  /* 段末小字(原型 `p.sol-note`,retech.css:217 一带 → margin-top:30px / 13px / ink-3)。
     共享类 .retech-x-sol-note 的尺寸属主在 blocks/proof,本块只补作用域内尺寸。 */
  .retech-x-gallery__note {
    margin-top: 30px;
    color: var(--retech-x-ink-3);
    font-size: 13px;
    line-height: 1.68;
  }

}

@layer retech-responsive {
  /* ── ≤1080px:3 列在平板挤,降到 2 列(原型 1941–1943)──────────────── */
  @media (max-width: 1080px) {
    .retech-x-gallery--cols-3 .retech-x-gallery__grid,
    .retech-x-gallery--cols-4 .retech-x-gallery__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  /* ── ≤700px:仍是 2 列,只收间距(原型 1951–1953 的 gap:12px)───────── */
  @media (max-width: 700px) {
    .retech-x-gallery--cols-2 .retech-x-gallery__grid,
    .retech-x-gallery--cols-3 .retech-x-gallery__grid,
    .retech-x-gallery--cols-4 .retech-x-gallery__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }
  }

  /* 原型 1969 行的 reduced-motion 处理里含 .media-tile-btn,这里只关本块自己的过渡。 */
  @media (prefers-reduced-motion: reduce) {
    .retech-x-gallery__btn {
      transition: none;
    }
  }
}