/* ============================================================
   Видео: централизованный плеер Plyr (static/js/video.js)
   Обложка — только круг с треугольником (как в оригинале:
   .elementor-custom-embed-play, глиф eicon-play 70px, opacity .8)
   ============================================================ */

.video-block {
  width: 100%;
}

/* Подпись под видео: зазор до картинки = 20px (дефолтный Elementor-зазор виджетов),
   как в оригинале. В нашей разметке подпись встречается в двух видах:
     1) внутри .video-block — <h3 class="heading"> из макроса videoblock (параметр caption);
     2) соседним элементом — <p class="text"> сразу после .video-block. */
.video-block__player + .heading,
.video-block + .text,
.video-block + .heading {
  margin-top: var(--widget-gap);
}

/* Плеер занимает ширину колонки, скругление как у карточек */
.video-block__player .plyr {
  width: 100%;
  border-radius: var(--radius-card);
}

.video-block__player .plyr__video-wrapper {
  border-radius: inherit;
}

/* Обложка: постер «cover», как elementor-custom-embed-image-overlay */
.video-block__player .plyr__poster {
  background-size: cover;
  background-color: #000;
}

/* Пока показывается обложка — панель управления скрыта */
.video-block__player .plyr--stopped .plyr__controls {
  display: none;
}

/* Кнопка «играть» на обложке: прозрачная, глиф круг+треугольник 70px */
.video-block__player .plyr__control--overlaid {
  width: 70px;
  height: 70px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-image: url("/vendor/plyr/play-cover.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.8;
  filter: drop-shadow(1px 0 6px rgba(0, 0, 0, 0.3));
  transition: opacity 0.5s;
}

/* При наведении Plyr ставит на этот же элемент `.plyr--video .plyr__control:hover`
   со шорткатом `background`, который сбрасывает `background-image` в `none` — из-за этого
   символ «пропадал». Здесь мы снова задаём глиф (уже оранжевый, как у кнопок) и
   сохраняем прозрачный фон: правило идёт после plyr.css и перекрывает его. */
.video-block__player .plyr__control--overlaid:hover,
.video-block__player .plyr__control--overlaid:focus {
  background-color: transparent;
  background-image: url("/vendor/plyr/play-cover-hover.svg");
  opacity: 1;
}

/* После старта центр-кнопка не нужна (в оригинале оверлей исчезает) */
.video-block__player .plyr:not(.plyr--stopped) .plyr__control--overlaid {
  display: none;
}

/* Внутренний треугольник Plyr не нужен — глиф рисуется фоном */
.video-block__player .plyr__control--overlaid svg {
  display: none;
}

/* --- Сетка видео («Видеоматериалы» на /bankomat/) ---
   На mobile ряды схлопываются в одну колонку, поэтому видео выстраиваются подряд;
   делаем вертикальный зазор единым и равным межрядовому (mt-40), а не 20px от `.row`. */
@media (max-width: 767px) {
  .row--videos {
    gap: 40px;
  }
}