/* Промо-ролики: обложка на странице (.promo-video) и плеер поверх страницы (.promo-player). Разметка - promovideo.class.php,
   поведение - promo-video.js. Стороны - логическими свойствами: в иврите время и крестик переезжают на другую сторону сами. */
.promo-video { position:relative; display:block; width:100%; padding:0; border:0; overflow:hidden; background:#000; cursor:pointer }
.promo-video__poster { display:block; width:100%; height:auto }
.promo-video__play { position:absolute; top:50%; left:50%; width:56px; height:56px; margin:-28px 0 0 -28px; border-radius:50%; background:rgba(0,0,0,.65); transition:background .2s }
.promo-video__play::after { content:''; position:absolute; top:50%; left:56%; transform:translate(-50%,-50%); border-style:solid; border-width:11px 0 11px 18px; border-color:transparent transparent transparent #fff }
.promo-video__time { position:absolute; bottom:8px; inset-inline-end:8px; padding:2px 6px; border-radius:4px; background:rgba(0,0,0,.7); color:#fff; font:600 12px/1.3 sans-serif }
.promo-video:hover .promo-video__play, .promo-video:focus-visible .promo-video__play { background:#FBA507 }
.promo-video--wide .promo-video__play { width:78px; height:78px; margin:-39px 0 0 -39px }
.promo-video--wide .promo-video__play::after { border-width:13px 0 13px 23px }

/* Окно <dialog>: во весь экран браузера, без рамки и полей, которые браузер даёт окнам сам; затемнение - ::backdrop. */
.promo-player { width:100%; height:100%; max-width:none; max-height:none; margin:0; padding:0; border:0; overflow:hidden; background:transparent }
.promo-player::backdrop { background:rgba(0,0,0,.9) }
.promo-player__box { position:relative; display:flex; width:100%; height:100%; align-items:center; justify-content:center }
.promo-player__frame { background:#000 }
.promo-player__video { display:block; width:100%; height:100%; background:#000 }
.promo-player--pointer .promo-player__video:focus { outline:none }
.promo-player__close { position:absolute; top:8px; inset-inline-end:8px; width:40px; height:40px; padding:0; border:0; border-radius:50%; background:rgba(0,0,0,.6); color:#fff; font:28px/40px sans-serif; cursor:pointer }
.promo-player__close:hover, .promo-player__close:focus-visible { background:#FBA507 }
/* Кнопка «Discuss your competition», когда ролик доиграл (класс окна promo-player--ended ставит promo-video.js): вверху по
   середине, в одном ряду с крестиком и не заходя на него (крестик - 40 точек в 8 от края, отсюда 56). На компьютере и
   планшете это поле над кадром, на телефоне - чёрная полоса над роликом. Середина кадра не годится: на последних секундах
   роликов там знак Contaste и финальная фраза (а Chrome на телефоне рисует поверх свою кнопку повтора), внизу - кнопки
   управления ролика. Если на телефоне полосы над роликом нет (класс promo-player--corner, его ставит fit() в
   promo-video.js), кнопка - в верхнем углу напротив крестика: верх по середине у широкого ролика 00 занимает знак Contaste. */
.promo-player__cta { position:absolute; top:8px; left:56px; right:56px; display:none; width:fit-content; margin:0 auto; padding:9px 20px; border-radius:8px }
.promo-player__cta { background:#FBA507; color:#10283c; font:bold 16px/22px sans-serif; text-align:center; text-decoration:none }
.promo-player--corner .promo-player__cta { inset-inline-start:8px; inset-inline-end:56px; margin:0 }
.promo-player--ended .promo-player__cta { display:block }
.promo-player__cta:hover, .promo-player__cta:focus-visible { background:#ffbe3d }