/* VideoBlock — вводное видео фронтальной страницы трека и экрана регистрации.
   Палитра и радиусы берутся у страницы (web/css/app.css + tokens.css):
   собственных цветов компонент не заводит, чтобы лендинг и экран
   регистрации выглядели одной платформой, а не двумя. */

.видео { margin: 14px 0 0; }

/* Пока показана обложка, плеер спрятан атрибутом. Без этой строки
   `display: block` ниже перебивает `hidden`, и под обложкой остаётся
   пустая чёрная рамка плеера. */
.видео-плеер[hidden] { display: none; }

.видео-плеер {
  display: block;
  width: 100%;
  border-radius: var(--radius-lg, 18px);
  border: 1px solid var(--line);
  background: #000;
}

.видео-пусто {
  display: grid;
  place-items: center;
  gap: 10px;
  aspect-ratio: 16 / 9;
  padding: 20px;
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: var(--radius-lg, 18px);
  background: var(--panel);
}

.видео-пусто-значок {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  color: var(--fg-mute);
  font-size: 18px;
}

.видео-пусто-текст { margin: 0; color: var(--fg-dim); max-width: 42ch; }
.видео-длительность { margin: 0; color: var(--fg-mute); font-size: 12.5px; }

/* ── Форма кадра ──────────────────────────────────────────────────────────
   Класс ставит JS по ширине окна (VideoBlock.js, УЗКИЙ_ЭКРАН). Форму держим
   и у плеера, и у заглушки одинаковой: иначе в день, когда появится файл,
   вёрстка страницы переедет. */

/* Горизонтальный кадр — ноутбук и планшет. Размер задаёт ширина колонки. */
.видео--широкое .видео-плеер { aspect-ratio: 16 / 9; object-fit: contain; }

/* Вертикальный кадр — телефон. На всю ширину его пускать нельзя: 9/16 от
   ширины экрана — это почти два экрана в высоту, форма уезжает под сгиб и
   человек не понимает, что от него хотят. Поэтому ширину считаем от
   допустимой высоты, а высоту оставляем производной от неё.

   Задавать разом height и width: auto нельзя: у блочного элемента width:auto
   растягивается на всю строку, обе стороны становятся определёнными и
   aspect-ratio молча выключается. Определяем ширину — высота придёт сама.

   Двойной width — не опечатка: svh не прыгает при появлении адресной строки
   на телефоне, а старые браузеры вторую строку пропустят и останутся на vh. */
.видео--узкое .видео-плеер,
.видео--узкое .видео-пусто {
  aspect-ratio: 9 / 16;
  height: auto;
  width: min(100%, calc(62vh * 9 / 16), 340px);
  width: min(100%, calc(62svh * 9 / 16), 340px);
  max-width: 100%;
  margin-inline: auto;
}
.видео--узкое .видео-плеер { object-fit: contain; }
.видео--узкое .видео-пусто { padding: 16px; }

.расшифровка { margin-top: 12px; }
.расшифровка > summary {
  cursor: pointer;
  color: var(--fg-dim);
  font-size: 13px;
  padding: 6px 0;
}
.расшифровка > summary:hover { color: var(--fg); }
.расшифровка p { color: var(--fg-dim); margin: 8px 0 0; }

/* ── Обложка ролика ──────────────────────────────────────────────────────
   Стоит НА МЕСТЕ плеера, а не поверх него: пока её не нажали, плеера в
   потоке нет, и высоту гнезда задаёт сама обложка. Абсолютный слой поверх
   16:9-плеера здесь не работал — кадр обложки вертикальный, и она вылезала
   за рамку.

   Кадр показываем целиком (`contain`) и ограничиваем по высоте, чтобы
   вертикальная картинка не занимала два экрана на ноутбуке.

   Две картинки на одну обложку: тему на платформе переключают кнопкой,
   и выбор отдан CSS — при смене темы обложка меняется в тот же кадр. */
.видео-обложка {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg, 18px);
  overflow: hidden;
  cursor: pointer;
  background: transparent;
  line-height: 0;
}

.видео-обложка__кадр {
  width: 100%;
  height: auto;
  max-height: 62vh;
  max-height: 62svh;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

.видео-обложка__кадр--тёмная { display: none; }

[data-theme="dark"] .видео-обложка__кадр--светлая { display: none; }
[data-theme="dark"] .видео-обложка__кадр--тёмная { display: block; }

.видео-обложка:focus-visible { outline: 2px solid var(--accent, #c8a35a); outline-offset: 2px; }