/* ══════════════════════════════════════════════════════════════════════
   v0892_ratio.css — v0.8.9.1 · 素材「七档固定尺寸」共享帧体系（老板 2026-10-04 定案）
   横屏 3:2 / 4:3 / 16:9 ｜ 竖屏 2:3 / 3:4 / 9:16 ｜ 特殊 1:1

   口径（老板原话）：「每种尺寸固定画面显示大小，仅根据浏览器窗口或屏幕尺寸自适应，
   不根据图片随意更改框体」→ **帧尺寸只跟窗口走（--mrs 四档），与图片自身宽高无关**。
   老板已拍板 **D3 = 方案 B：完整显示（object-fit: contain），不裁切、允许框内留白**。

   用法（契约，勿改）：
     <div class="v92-frame v92-r-16x9"><img src="..." alt=""></div>
     · `.v92-frame` 只管帧体（尺寸/圆角/裁切）；`.v92-r-*` 提供该档的 --fw/--fh
     · 帧内 `<img>` 由 .v92-frame img 统一设为 100% + contain
     · JS 侧用 V92Ratio.apply(frameEl, '16:9') 自动挂对档位类（见 js/ratio.js）
   ⚠️ 帧尺寸**不要**在业务 CSS 里覆盖；要改尺寸只改本文件的七档表。
   ══════════════════════════════════════════════════════════════════════ */

:root {
  /* 素材尺寸缩放系数：**只随浏览器窗口宽度**分四档，与图片无关 */
  --mrs: 1;
  /* v0.8.9.2(S2)：--v92-frame-w 是「调用方可选覆盖」钩子（名片 5 列 / 缩略 4 列，见 :44）。
     在此声明默认值 = 原 fallback 100%，渲染等价；声明后它不再是「未定义 token」（检查器 E1）。 */
  --v92-frame-w: 100%;
}
@media (min-width: 1600px) { :root { --mrs: 1.10; } }
@media (max-width: 1279px) { :root { --mrs: 0.88; } }
@media (max-width: 767px)  { :root { --mrs: 0.58; } }

/* ── 七档**比例**（v0.8.9.2 根本性纠正）──
   老板原话：「**我跟你最开始说的是比例固定吧，当时你自己非要规定死所有的尺寸，
   我以为你尺寸会根据屏幕大小更改**」
   ★ 纠正：**「7 种大小」= 7 种宽高比，不是 7 个固定像素宽度。**
   `--ar` 是这一档的**唯一权威**；`--fw/--fh` 降级为**参考基准**（仅供布局器推算一行能放几个），
   帧的**实际尺寸由容器决定**（见下方 `.v92-frame` 的 `width:100%` + `aspect-ratio`）。 */
.v92-r-16x9 { --ar: 16 / 9;  --fw: 320px; --fh: 180px; }
.v92-r-3x2  { --ar: 3 / 2;   --fw: 300px; --fh: 200px; }
.v92-r-4x3  { --ar: 4 / 3;   --fw: 280px; --fh: 210px; }
.v92-r-1x1  { --ar: 1 / 1;   --fw: 240px; --fh: 240px; }
.v92-r-3x4  { --ar: 3 / 4;   --fw: 210px; --fh: 280px; }
.v92-r-2x3  { --ar: 2 / 3;   --fw: 200px; --fh: 300px; }
.v92-r-9x16 { --ar: 9 / 16;  --fw: 180px; --fh: 320px; }
/* 未分类/算不出时的兜底：按 3:2，避免出现无尺寸的塌陷框 */
.v92-r-unknown { --ar: 3 / 2; --fw: 300px; --fh: 200px; }

/* ★ 帧：**宽度随容器、高度按比例**（不再写死像素宽 × 媒体查询系数）。
   `--v92-frame-w` 允许调用方显式指定宽度（如名片 5 列、缩略 4 列）；缺省则吃满容器。 */
.v92-frame {
  width: var(--v92-frame-w, 100%);
  height: auto;
  aspect-ratio: var(--ar, 3 / 2);
  flex: 0 0 auto;
  position: relative;
  overflow: hidden;
  border-radius: var(--r-s, 10px);
  border: 1px solid var(--hair, rgba(20, 30, 60, .08));
  /* 留白区的底色：极淡，避免"完整显示"时露出刺眼白块（不是"卡内灰底"，是图片衬底） */
  background: color-mix(in srgb, var(--text, #1d2530) 4%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.v92-frame > img,
.v92-frame img {
  width: 100%;
  height: 100%;
  /* D3 = B：完整显示，不裁切 */
  object-fit: contain;
  display: block;
}
/* 加载中骨架（仅图片未就绪时由业务加 .is-loading） */
.v92-frame.is-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    transparent 20%,
    color-mix(in srgb, var(--text, #1d2530) 6%, transparent) 40%,
    transparent 60%);
  animation: v92-frame-shimmer 1.2s linear infinite;
}
@keyframes v92-frame-shimmer {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
  .v92-frame.is-loading::after { animation: none; }
}

/* ── 混排容器：不同档位高度不同 → 有节奏的排列；高度只有 7 个离散值 ── */
.v92-frames {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3, 12px);
  align-items: flex-start;
}
.v92-frames .v92-frame { margin: 0; }

/* ── 窄屏：帧体只随 --mrs 缩，不再额外改尺寸；容器允许横向滚动而不换行（按需） ── */
.v92-frames.v92-frames-scroll {
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 4px;
}