/* ==========================================================================
   Медиа: полоса миниатюр и просмотр.

   Одна раскладка на все места, где человек приложил файл, — страница идеи,
   очередь модерации, переписка поддержки. До 10.09.2026 каждое место рисовало
   по-своему: страница идеи выкладывала картинки в полный размер столбиком, и
   вертикальный скриншот телефона занимал экран целиком, а текст под ним искали
   прокруткой.

   Правило простое: **в потоке страницы стоят миниатюры в ряд, оригинал
   открывается поверх.** Полный размер в потоке ломает чтение того, ради чего
   страницу и открыли, — а картинка к идее это иллюстрация, а не содержание.

   Файл общий у САЙТА и АДМИНКИ: обе живут в одном домене и берут его по
   `/shared/media.css`. У приложения свой экземпляр — оно собирается отдельно и
   до файлов сайта в рантайме не дотягивается; так же устроены `dialog.js` и
   логотип в `brand/`. Расходиться этим двум копиям нельзя: вид описан здесь.
   ========================================================================== */

/* Сетка, а не строка: плитки занимают ВСЮ ширину блока и делят её поровну.
   `auto-fill` с минимумом в 140px считает по ширине КОНТЕЙНЕРА, а не окна, и это
   именно то, что нужно: в широкой карточке идеи выходит четыре-пять в ряд, в
   узком пузыре переписки — одна-две, и медиазапросов для этого не требуется.

   Раньше здесь была строка с плитками фиксированной высоты: она оставляла
   справа пустое место и на широком блоке выглядела огрызком. */
.media-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
  margin: 14px 0;
}

/* Пропорция вместо высоты: у плиток одинаковая форма при любой ширине колонки,
   а картинка вписывается кадрированием. Разные пропорции в одном ряду читаются
   как сломанная вёрстка. */
.media-tile {
  position: relative;
  display: block; padding: 0;
  width: 100%; aspect-ratio: 4 / 3;
  border: 1px solid var(--card-border); border-radius: 10px;
  background: var(--input-bg);
  overflow: hidden; cursor: zoom-in;
  transition: border-color 0.15s;
}
.media-tile:hover { border-color: var(--card-border-active); }
.media-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.media-tile img,
.media-tile video {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
}

/* Значок над видео: плитка неподвижна, и без него она неотличима от картинки. */
.media-tile-play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.35);
  color: #fff; font-size: 26px; line-height: 1;
  pointer-events: none;
}

/* ---- Просмотр поверх страницы ---- */

.media-viewer {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.85);
  padding: 48px; cursor: zoom-out;
}
/* Рамка по размеру картинки: за неё держатся крестик и счётчик. */
.media-viewer-frame { position: relative; display: inline-block; max-width: 100%; max-height: 100%; }
.media-viewer-frame img,
.media-viewer-frame video {
  display: block;
  /* Не «во весь экран», а «сколько влезло»: оригинал бывает больше монитора, и
     показать его как есть значит показать его кусок. */
  max-width: 100%; max-height: calc(100vh - 96px);
  border-radius: 10px; cursor: default;
}

/* Крестик держится за угол КАРТИНКИ, а не за угол экрана: смотрят на картинку,
   и кнопка в дальнем углу пустого экрана не попадается на глаза.
   Фон плотный — кнопка наполовину лежит на картинке, а картинка бывает любой. */
.media-viewer-close,
.media-viewer-step {
  position: absolute;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: #16161c; color: #fff;
  font-size: 22px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.media-viewer-close:hover,
.media-viewer-step:hover { background: #24242c; }
.media-viewer-close { top: -14px; right: -14px; font-size: 24px; }
.media-viewer-step-prev { left: -20px; top: 50%; transform: translateY(-50%); }
.media-viewer-step-next { right: -20px; top: 50%; transform: translateY(-50%); }

/* Счётчик под картинкой: «2 из 3» отвечает на вопрос «а сколько их всего»,
   который иначе задаётся закрытием просмотра и пересчётом миниатюр. */
.media-viewer-count {
  position: absolute; left: 50%; bottom: -30px; transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.75); font-size: 0.8rem; white-space: nowrap;
}

@media (max-width: 560px) {
  .media-viewer { padding: 20px; }
  .media-viewer-step-prev { left: -12px; }
  .media-viewer-step-next { right: -12px; }
  .media-strip { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
}