/* Проигрыватель видео.
   -----------------------------------------------------------------------
   Файл подключается только на страницах, где метка `[video N]` действительно
   встретилась, — поэтому здесь ровно то, что относится к ролику, и ничего
   про остальную страницу.

   Собственное оформление Plyr оставлено как есть, меняются только те его
   переменные, которые задают цвет и радиусы: у темы нет ни синего, ни
   скруглений. */

.pepfer-video {
  --plyr-color-main: var(--pepfer-ink, #201B14);
  /* Белое поле вокруг кадра: ролики снимают вертикально и квадратом, и
     чёрные поля рядом с фотографиями на белой странице читаются как дыра. */
  --plyr-video-background: #FFFFFF;
  --plyr-badge-background: var(--pepfer-ink, #201B14);
  --plyr-captions-background: rgba(32, 27, 20, 0.8);
  --plyr-range-thumb-shadow: none;
  --plyr-tooltip-radius: 0;
  --plyr-badge-radius: 0;
  --plyr-menu-radius: 0;

  margin: 28px 0;
  padding: 0;
}

.pepfer-video .plyr {
  border-radius: 0;
}

/* До того как проигрыватель поднялся, кадр держит сам тег video: без этого
   текст под роликом успевает прыгнуть вверх и обратно. */
.pepfer-video__player {
  display: block;
  width: 100%;
  max-width: 100%;
  background: var(--pepfer-paper, #FFFFFF);
}

/* Пропорции приходят из самого ролика и бывают любыми — набора готовых
   правил не хватило бы. */
.pepfer-video > video.pepfer-video__player { aspect-ratio: var(--pepfer-video-ratio, 16 / 9); }

/* Вертикальный ролик во всю ширину страницы занял бы два экрана. */
.pepfer-video[data-ratio="9:16"],
.pepfer-video[data-ratio="3:4"],
.pepfer-video[data-ratio="2:3"],
.pepfer-video[data-ratio="4:5"] {
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}

.pepfer-video__caption {
  margin: 10px 0 0;
  font-family: var(--pepfer-sans, system-ui, sans-serif);
  font-size: 13px;
  line-height: 1.5;
  color: var(--pepfer-muted, #6E6353);
}

.pepfer-video__fallback {
  margin: 0;
  padding: 16px;
  font-family: var(--pepfer-sans, system-ui, sans-serif);
  font-size: 14px;
  color: var(--pepfer-paper, #fff);
}

.pepfer-video__fallback a { color: inherit; text-decoration: underline; }

@media (max-width: 767px) {
  .pepfer-video { margin: 20px 0; }

  /* Подсказки при наведении на телефоне показать нечем, а место занимают. */
  .pepfer-video .plyr__tooltip { display: none; }
}

/* Ролик слайдом в галерее карточки.
   Здесь у ролика нет полей: он занимает слайд целиком, как и фотография.
   Ширину нужно назвать вслух: слайд — гибкий контейнер, и без неё
   проигрыватель сжимается до своего внутреннего размера. */
.pepfer-video--slide { width: 100%; margin: 0; }

.pepfer-video--slide .plyr { height: 100%; }

.swiper-slide--video {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--pepfer-paper, #FFFFFF);
}

/* Миниатюра ролика в ленте помечена знаком воспроизведения: иначе она
   неотличима от фотографии, и о видео узнают случайно. */
.gallery-thumb--video { position: relative; display: block; }

.gallery-thumb--video::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  border-radius: 50%;
  background: rgba(32, 27, 20, 0.55);
  /* Треугольник рисуется границами: отдельный файл со значком ради одной
     стрелки в ленте — лишний запрос к серверу. */
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5) inset;
}

.gallery-thumb--video::before {
  content: '';
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  margin: -5px 0 0 -3px;
  border-style: solid;
  border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent #fff;
}

/* Полный экран проигрывателя: там своё поле, и оно тоже чёрное по умолчанию. */
.pepfer-video .plyr--fullscreen-active,
.pepfer-video .plyr--fullscreen-fallback {
  background: var(--pepfer-paper, #FFFFFF);
}

/* Подпись под роликом на белом поле должна остаться читаемой. */
.pepfer-video__fallback { color: var(--pepfer-ink, #201B14); }

/* ---- Ролик у края, текст обтекает ---------------------------------------
   Ставится словом в метке: `[video 7 слева]` или `[video 7 справа]`.

   Ширина в половину колонки — та же, что у обложки коллекции, чтобы на одной
   странице картинка и ролик стояли одинаково. Верхний отступ меньше обычного:
   у обтекающего ролика он должен совпасть с первой строкой абзаца, а не
   отодвинуть его.

   Вертикальные ролики выше по файлу центруются автоотступами; здесь отступ
   задан явной стороной, а второй остаётся автоматическим — у плавающего
   элемента он считается нулём, и ролик встаёт вплотную к краю колонки. */
.pepfer-video.pepfer-video--left,
.pepfer-video.pepfer-video--right {
  width: min(48%, 520px);
  margin-top: 6px;
  margin-bottom: 20px;
  /* Ролик спускается ниже всего, что уже плавает выше. Без этого он вставал
     бок о бок с обложкой коллекции, и между ними оставалась колонка шириной
     в два слова — читать её невозможно, а дыры вокруг видно сразу. */
  clear: both;
}

/* Класс продублирован не для красоты: вертикальным роликам выше отступы
   заданы автоматом, а селектор с атрибутом весит больше одного класса — и
   просвет между роликом и текстом схлопывался в ноль. */
.pepfer-video.pepfer-video--left {
  float: left;
  margin-left: 0;
  margin-right: clamp(24px, 3vw, 48px);
}

.pepfer-video.pepfer-video--right {
  float: right;
  margin-right: 0;
  margin-left: clamp(24px, 3vw, 48px);
}

/* На телефоне обтекание оставило бы по два слова в строке. */
@media (max-width: 767px) {
  .pepfer-video.pepfer-video--left,
  .pepfer-video.pepfer-video--right {
    float: none;
    width: 100%;
    margin: 20px 0;
  }
}