/* 细节拆封顶部画廊：主动露出相邻媒体，提示可横向浏览。 */
.gallery {
  position: relative;
  height: 400px;
  padding-block: 14px 34px;
  background: #fff;
  overflow: hidden;
}
.gallery__viewport {
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 7%;
  scrollbar-width: none;
  cursor: grab;
  touch-action: pan-x;
}
.gallery__viewport:active { cursor: grabbing; }
.gallery__viewport::-webkit-scrollbar { display: none; }
.gallery__track {
  display: flex;
  gap: 12px;
  height: 100%;
  padding-inline: 7%;
}
.gallery__slide {
  position: relative;
  flex: 0 0 86%;
  min-width: 0;
  height: 100%;
  border-radius: var(--r-md);
  background: #111;
  overflow: hidden;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  box-shadow: 0 8px 28px -18px rgba(17, 17, 17, .48);
}
.gallery__slide.is-portrait {
  flex-basis: auto;
  aspect-ratio: var(--media-ratio);
}
.gallery__slide img,
.gallery__slide video,
.gallery__image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.gallery__image { display: block; }
.gallery__play,
.gallery__nav {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: rgba(0, 0, 0, .62);
  color: #fff;
  backdrop-filter: blur(8px);
}
.gallery__play {
  left: 50%; top: 50%;
  width: 58px; height: 58px;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, .74);
}
.gallery__nav {
  top: calc(50% - 10px);
  width: 36px; height: 36px;
  transform: translateY(-50%);
  transition: opacity var(--d-fast) var(--ease), transform var(--d-fast) var(--ease);
}
.gallery__nav.is-prev { left: 10px; }
.gallery__nav.is-next { right: 10px; }
.gallery__nav:disabled { opacity: .18; cursor: default; }
.gallery__counter {
  position: absolute;
  left: 50%; bottom: 9px;
  transform: translateX(-50%);
  color: var(--ink-3);
  font-size: var(--t-xs);
  font-variant-numeric: tabular-nums;
}

/* 全屏媒体查看器：图片可缩放拖动，视频由用户手动播放。 */
.media-viewer {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(10, 10, 12, .97);
  color: #fff;
}
.media-viewer__count {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: max(20px, env(safe-area-inset-bottom));
  padding: 6px 11px;
  border-radius: var(--r-pill);
  transform: translateX(-50%);
  background: rgba(255,255,255,.12);
  color: rgba(255,255,255,.76);
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
  backdrop-filter: blur(8px);
  pointer-events: none;
}
.media-viewer__nav {
  position: absolute;
  z-index: 3;
  top: 50%;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-pill);
  transform: translateY(-50%);
  background: rgba(255,255,255,.14);
  color: #fff;
  backdrop-filter: blur(8px);
}
.media-viewer__nav.is-prev { left: max(14px, env(safe-area-inset-left)); }
.media-viewer__nav.is-next { right: max(14px, env(safe-area-inset-right)); }
.media-viewer__nav:disabled { opacity: .18; cursor: default; }
.media-viewer__stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
}
.media-viewer__stage:active { cursor: grabbing; }
.media-viewer__stage img,
.media-viewer__stage video {
  max-width: min(92vw, 1600px);
  max-height: 88dvh;
  object-fit: contain;
  transform-origin: center;
  user-select: none;
}
.media-viewer__stage img { transition: transform 80ms linear; }
.media-viewer__stage video { width: min(92vw, 1600px); }
@media (max-width: 760px) {
  .gallery { height: min(40dvh, 340px); padding-block: 10px 30px; }
  .gallery__track { gap: 8px; padding-inline: 5%; }
  .gallery__viewport { scroll-padding-inline: 5%; }
  .gallery__slide { flex-basis: 90%; border-radius: var(--r-sm); }
  .gallery__slide.is-portrait { flex-basis: auto; }
  .gallery__nav { display: none; }
  .media-viewer__stage img,
  .media-viewer__stage video { max-width: 100vw; max-height: 84dvh; }
}