/* Окно с роликом YouTube (/js/site/video-modal.js): видео 16:9 по центру, скруглённые углы,
   затемнённый фон, крестик над роликом. Влезает и в горизонтальный телефон. */

.video-modal { position: fixed; inset: 0; z-index: 10050; display: flex; align-items: center; justify-content: center; padding: 16px; }
.video-modal[hidden] { display: none; }
.video-modal__backdrop { position: absolute; inset: 0; background: rgba(20, 20, 20, .82); opacity: 0; transition: opacity .25s ease; cursor: pointer; }
.video-modal__box {
  position: relative; width: min(1100px, calc(100vw - 32px), calc((100vh - 120px) * 16 / 9));
  opacity: 0; transform: scale(.96); transition: opacity .25s ease, transform .25s ease;
}
.video-modal.is-open .video-modal__backdrop { opacity: 1; }
.video-modal.is-open .video-modal__box { opacity: 1; transform: none; }
.video-modal__frame { aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; background: #000; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); }
.video-modal__frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.video-modal__close {
  position: absolute; top: -52px; right: 0; width: 42px; height: 42px; border: 0; border-radius: 50%;
  background: #fff; cursor: pointer; transition: transform .2s;
}
.video-modal__close:hover { transform: rotate(90deg); }
.video-modal__close:focus-visible { outline: 3px solid #62ba87; outline-offset: 2px; }
.video-modal__close:before, .video-modal__close:after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 2px; border-radius: 1px; background: #272727;
  transform: translate(-50%, -50%) rotate(45deg);
}
.video-modal__close:after { transform: translate(-50%, -50%) rotate(-45deg); }
html.video-modal-open, html.video-modal-open body { overflow: hidden; }

@media (max-width: 767px) {
  .video-modal__frame { border-radius: 14px; }
  .video-modal__close { top: -50px; width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .video-modal__backdrop, .video-modal__box { transition: none; }
}