/* Полноэкранный просмотр фото и видео (js/components/media-viewer.js). Чёрный фон в обеих темах – как в галереях. */
.media-viewer {
  --viewer-dim: 1;
  position: fixed;
  inset: 0;
  z-index: 130;
  display: grid;
  /* Слегка прозрачный фон; размытие не даёт ленте за ним отвлекать. */
  background: rgb(0 0 0 / calc(0.88 * var(--viewer-dim)));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  touch-action: none;
  animation: media-viewer-in 160ms ease-out;
}

/* Фото и под ним ряд «1/3 ↓» – одной группой по центру экрана. */
.media-viewer__stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: 0;
  padding: calc(56px + env(safe-area-inset-top)) 0 calc(var(--space-4) + env(safe-area-inset-bottom));
  transition: transform 160ms ease-out;
}

.media-viewer__frame { display: grid; place-items: center; min-height: 0; max-width: 100%; }

.media-viewer__media {
  display: block;
  max-width: 100vw;
  max-height: calc(100dvh - 56px - 72px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.media-viewer__controls { display: flex; align-items: center; justify-content: center; gap: var(--space-4); min-height: 44px; }
.media-viewer__counter { color: rgb(255 255 255 / 85%); font-size: var(--text-md); font-variant-numeric: tabular-nums; }
.media-viewer__counter[hidden] { display: none; }

.media-viewer__bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  min-height: calc(56px + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) var(--space-1) 0;
  transition: opacity 160ms ease;
}

.media-viewer__btn,
.media-viewer__nav {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: #fff;
  cursor: pointer;
}

.media-viewer__btn svg { width: 22px; height: 22px; }
.media-viewer__btn:hover { background: rgb(255 255 255 / 12%); }
.media-viewer__btn--round { background: rgb(255 255 255 / 16%); }
.media-viewer__btn--round:hover { background: rgb(255 255 255 / 26%); }
.media-viewer__btn:focus-visible,
.media-viewer__nav:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }

/* Стрелки листания – для компьютера; на телефоне листают смахиванием. */
.media-viewer__nav {
  position: absolute;
  top: 50%;
  z-index: 1;
  background: rgb(255 255 255 / 14%);
  transform: translateY(-50%);
  transition: opacity 160ms ease;
}

.media-viewer__nav svg { width: 22px; height: 22px; }
.media-viewer__nav--prev { left: var(--space-3); }
.media-viewer__nav--next { right: var(--space-3); }
.media-viewer__nav[hidden] { display: none; }

@media (hover: none) {
  .media-viewer__nav { display: none; }
}

/* Нажатие на фото прячет панель – смотреть без помех. */
.media-viewer.is-bare :is(.media-viewer__bar, .media-viewer__nav, .media-viewer__controls) { opacity: 0; pointer-events: none; }
.media-viewer__controls { transition: opacity 160ms ease; }

@keyframes media-viewer-in { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .media-viewer { animation: none; }
  .media-viewer__stage { transition: none; }
}