/* ============================================================
   Gallery 组件 —— 2 个变体
   .gallery--mosaic  错落网格，图幅不一
   .gallery--reel    横向无限 marquee，悬停减速
   ============================================================ */

/* ---------- 变体 A：mosaic ---------- */
.gallery--mosaic {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 15rem;
  gap: var(--space-sm);
}
.gallery--mosaic .media-frame:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.gallery--mosaic .media-frame:nth-child(4) { grid-row: span 2; }
/* 图多于 5 张时继续错落：第 7 张横跨 */
.gallery--mosaic .media-frame:nth-child(7) { grid-column: span 2; }
@media (max-width: 48rem) {
  .gallery--mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 10rem; }
}

/* ---------- 变体 B：reel（marquee） ---------- */
.gallery--reel {
  overflow: hidden;
  /* 边缘淡出 */
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.gallery--reel .reel__track {
  display: flex;
  gap: var(--space-sm);
  width: max-content;
  animation: reel-scroll 40s linear infinite;
}
.gallery--reel:hover .reel__track { animation-play-state: paused; }
.gallery--reel .reel__item {
  width: 22rem;
  height: 15rem;
  flex-shrink: 0;
}
.gallery--reel .reel__item:nth-child(odd) { height: 18rem; }
@keyframes reel-scroll {
  to { transform: translateX(calc(-50% - var(--space-sm) / 2)); }
}
@media (max-width: 48rem) {
  .gallery--reel .reel__item { width: 14rem; height: 10rem; }
  .gallery--reel .reel__item:nth-child(odd) { height: 12rem; }
}
@media (prefers-reduced-motion: reduce) {
  .gallery--reel .reel__track { animation: none; }
  .gallery--reel { overflow-x: auto; mask-image: none; }
}