/* ══════════════════════════════════════════════════════════════════════
   v0892_masonry.css — v0.8.9.2 · 真·瀑布流（配合 js/masonry.js）
   修的是老板 2026-10-04 截图指出的两件事：
     ① 每个卡片**右侧空一大块**（卡片宽 > 帧宽）
     ② 横竖图混排时**下面有空隙**（按行排 → 矮的下面必然空）
   ══════════════════════════════════════════════════════════════════════ */

/* `--v92-mgap` 由 JS（masonry.js）按调用方传入的 gap 写到容器上；此处给声明与默认值，
   避免被当成"未定义 token"。`--fw` / `--mrs` 来自 v0892_ratio.css 的 `.v92-r-*`（跨文件共享）。 */
:root { --v92-mgap: var(--sp-3); }

.v92-masonry {
  display: flex;
  align-items: flex-start;      /* 列不等高，必须顶对齐 */
  gap: var(--v92-mgap, var(--sp-3));
  width: 100%;
}

.v92-mcol {
  display: flex;
  flex-direction: column;
  gap: var(--v92-mgap, var(--sp-3));
  flex: 0 0 auto;               /* 列宽由内容决定，不被拉伸 */
  min-width: 0;
}

/* ── 核心修复①：子项宽度必须**贴合帧宽**，不许 100% ──
   否则帧是 240–352px、卡片却是整列宽 → 右侧多出一块空背景（截图里那个灰块）。 */
.v92-mcol > * {
  width: max-content;
  max-width: 100%;
}
/* 帧本身已经是固定尺寸，这里再加一层保险 */
.v92-mcol > * > .v92-frame,
.v92-mcol .v92-frame {
  width: calc(var(--fw) * var(--mrs));
}

/* ── 核心修复②：卡片内部不留底白（标题紧贴帧） ── */
.v92-mcol > * {
  margin: 0;
}
.v92-mcol .v92-card-cap,
.v92-mcol figcaption {
  margin-top: var(--sp-1);
}

/* 移动端：间距略收，列数由 JS 按宽度算（帧 0.58 档后一列通常放得下 2 列） */
@media (max-width: 767px) {
  .v92-masonry { gap: var(--sp-2); }
  .v92-mcol { gap: var(--sp-2); }
}

/* 兼容：旧容器若还没走 JS 分列，至少保证不出现"卡片宽于帧"的空白 */
.v92-frames > * { width: max-content; max-width: 100%; }