/* ПОЛНОЭКРАННЫЙ ПРОСМОТР РОЛИКОВ.
 *
 * ТЁМНЫЙ ВСЕГДА, как и экран камеры: светлый интерфейс поверх видео слепит и мешает
 * смотреть. Это не «тема не поддержана» — это осознанное решение для полноэкранного
 * показа; светлая тема сайта под просмотрщиком остаётся нетронутой.
 *
 * Геометрия: один ролик на экран, прокрутка с привязкой. Ничего между роликами нет —
 * ни отступов, ни разделителей: пауза между кадрами и есть то, что читается как рывок.
 */

.rv{
  position:fixed;inset:0;z-index:2147483000;
  background:#000;color:#fff;
  display:block;overscroll-behavior:contain;
  -webkit-tap-highlight-color:transparent}

/* Пока открыт просмотрщик, страница под ним не прокручивается: иначе палец уводит
   ленту, а человек думает, что листает ролики. */
html.rv-open,html.rv-open body{overflow:hidden;overscroll-behavior:none}

.rv__track{
  position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;
  scroll-snap-type:y mandatory;scroll-behavior:auto;
  overscroll-behavior-y:contain;
  scrollbar-width:none;-ms-overflow-style:none}
.rv__track::-webkit-scrollbar{display:none}

.rv__slide{
  position:relative;display:block;
  width:100%;height:100dvh;min-height:100dvh;
  scroll-snap-align:start;scroll-snap-stop:always;
  background:#000;overflow:hidden}
/* Запасной вариант для сборок без dvh: 100vh на iOS считает высоту без адресной
   строки, поэтому dvh стоит первым и перекрывает его там, где он поддержан. */
@supports not (height:100dvh){
  .rv__slide{height:100vh;min-height:100vh}
}

.rv__stage{position:absolute;inset:0;display:block;background:#000;overflow:hidden}

/* ── ЧЕМ ЗАПОЛНЕН ЭКРАН ──
 *
 * По умолчанию кадр вписывается ЦЕЛИКОМ: обрезать сильно непохожую пропорцию (4:5 на
 * узком телефоне) значит выбросить почти половину кадра.
 *
 * Но у РОДНОЙ вертикали 9:16 на экране 19.5:9 «вписать целиком» даёт чёрные полосы
 * сверху и снизу — в полноэкранном разделе это читается как поломка, а не как забота о
 * кадре. Поэтому там, где обрезка мала (класс is-fill ставит скрипт, посчитав её по
 * настоящим размерам кадра), экран заполняется целиком.
 *
 * Полосы, если они всё же остаются, закрывает размытая подложка того же кадра —
 * чёрный прямоугольник рядом с видео выглядит дешевле всего. */
.rv__blur{
  position:absolute;left:0;top:0;width:100%;height:100%;
  object-fit:cover;transform:scale(1.15);
  filter:blur(30px) brightness(.45) saturate(1.1);
  opacity:.9;pointer-events:none;display:block}
.rv__slide.is-fill .rv__blur{display:none}

.rv__video,.rv__cover{
  position:absolute;left:0;top:0;width:100%;height:100%;
  object-fit:contain;object-position:center;display:block}
.rv__slide.is-fill .rv__video,
.rv__slide.is-fill .rv__cover{object-fit:cover}
.rv__video{background:transparent;z-index:1}
.rv__cover{
  z-index:2;pointer-events:none;opacity:1;transition:opacity .2s ease-out}
.rv__slide.is-vframe .rv__cover{opacity:0}
@media (prefers-reduced-motion:reduce){
  .rv__cover{transition:none}
}

/* Слой нажатия занимает кадр, но НЕ заходит под столбец действий и подпись:
   иначе нажатие на «Нравится» превращалось бы в паузу. */
.rv__tap{
  position:absolute;left:0;top:0;right:76px;bottom:132px;z-index:2;
  -webkit-appearance:none;appearance:none;border:0;padding:0;
  background:transparent;cursor:pointer}
.rv__tap:focus{outline:0}
.rv__tap:focus-visible{outline:2px solid #fff;outline-offset:-4px}

/* Значок паузы появляется только когда пауза и правда стоит. */
.rv__pause{
  position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:3;
  display:none;align-items:center;justify-content:center;
  width:64px;height:64px;border-radius:999px;
  background:rgba(0,0,0,.42);color:#fff;pointer-events:none}
.rv__slide.is-paused .rv__pause{display:flex}

/* ── автор и подпись ── */
.rv__meta{
  position:absolute;left:0;right:76px;bottom:0;z-index:4;
  display:flex;flex-direction:column;gap:6px;
  padding:0 12px calc(18px + env(safe-area-inset-bottom,0)) calc(12px + env(safe-area-inset-left,0));
  background:linear-gradient(0deg,rgba(0,0,0,.62),rgba(0,0,0,0))}
.rv__who{
  -webkit-appearance:none;appearance:none;border:0;padding:0;
  display:flex;align-items:center;gap:8px;
  background:transparent;color:inherit;cursor:pointer;text-align:left;
  min-height:44px}
.rv__avatar{
  width:32px;height:32px;flex:0 0 auto;border-radius:999px;object-fit:cover;
  background:rgba(255,255,255,.16)}
.rv__name{font-size:14px;font-weight:600;letter-spacing:-.01em}
.rv__official{
  width:14px;height:14px;flex:0 0 auto;border-radius:999px;
  background:var(--pub-brand,#e8651c)}
.rv__when{font-size:12px;color:rgba(255,255,255,.62)}
.rv__text{
  margin:0;font-size:13.5px;line-height:1.38;color:rgba(255,255,255,.94);
  white-space:pre-wrap;overflow-wrap:anywhere}
.rv__text.is-clamped{
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.rv__more-text{
  -webkit-appearance:none;appearance:none;border:0;padding:2px 0;
  align-self:flex-start;background:transparent;cursor:pointer;
  font-size:12.5px;color:rgba(255,255,255,.7)}

/* ── столбец действий ── */
.rv__actions{
  position:absolute;right:0;bottom:0;z-index:5;
  display:flex;flex-direction:column;align-items:center;gap:14px;
  padding:0 calc(10px + env(safe-area-inset-right,0)) calc(20px + env(safe-area-inset-bottom,0)) 10px}
.rv__act{
  -webkit-appearance:none;appearance:none;border:0;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  min-width:44px;min-height:44px;padding:4px;
  background:transparent;color:#fff;cursor:pointer;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
.rv__act:focus{outline:0}
.rv__act:focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:12px}
.rv__act.is-on{color:var(--pub-brand,#e8651c)}
.rv__act.is-on svg{fill:currentColor}
.rv__count{font-size:11.5px;font-weight:600;font-variant-numeric:tabular-nums;
  letter-spacing:.01em}
.rv__count:empty{display:none}

/* ── закрытие ── */
.rv__close{
  position:absolute;z-index:6;
  left:calc(10px + env(safe-area-inset-left,0));
  top:calc(10px + env(safe-area-inset-top,0));
  -webkit-appearance:none;appearance:none;border:0;
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  border-radius:999px;background:rgba(0,0,0,.34);color:#fff;cursor:pointer}
.rv__close:focus{outline:0}
.rv__close:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* ── пусто ── */
.rv__empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  height:100dvh;padding:24px;text-align:center}
.rv__empty-text{margin:0;font-size:14px;color:rgba(255,255,255,.78);max-width:26ch}
.rv__btn{
  -webkit-appearance:none;appearance:none;border:0;
  min-height:44px;padding:0 18px;border-radius:999px;
  background:var(--pub-brand,#e8651c);color:#fff;
  font-size:13.5px;font-weight:600;cursor:pointer}

/* ── компьютер ──
   Растягивать вертикальный ролик на широкий монитор незачем: он от этого не станет
   шире. Показ ограничивается по ширине и центрируется, поля остаются СНАРУЖИ кадра. */
@media (min-width:768px){
  .rv__slide{display:flex;align-items:center;justify-content:center}
  .rv__stage{
    position:relative;inset:auto;
    width:min(calc(100dvh * 9 / 16), 480px);height:100dvh;
    margin:0 auto}
  .rv__meta{right:auto;left:50%;width:min(calc(100dvh * 9 / 16), 480px);
    translate:-50% 0;padding-right:76px}
  .rv__actions{right:50%;translate:calc(min(50dvh * 9 / 16, 240px) + 0px) 0}
}

/* Узкий телефон: подписи и счётчики не должны наезжать друг на друга. */
@media (max-width:360px){
  .rv__actions{gap:11px;padding-right:6px}
  .rv__act{min-width:42px;padding:2px}
  .rv__meta{right:66px}
  .rv__tap{right:66px}
}

/* Телефон в горизонтали: высоты почти нет, столбец действий поджимается. */
@media (orientation:landscape) and (max-height:560px){
  .rv__actions{gap:8px;padding-bottom:calc(8px + env(safe-area-inset-bottom,0))}
  .rv__meta{padding-bottom:calc(8px + env(safe-area-inset-bottom,0))}
  .rv__act{min-height:40px;min-width:40px}
}