/* Окно просмотра роликов из карточек. Поведение и разметка: assets/js/video-lightbox.js.
   Проверка: .agents/scripts/test_video.py (Chromium и WebKit), проверки reel_* и lightbox_fits_phone.

   Окно во весь экран, тёмная подложка, ролик крупно: вертикальный по высоте окна, горизонтальный
   по ширине. На компьютере текст справа от вертикального ролика и под горизонтальным; на телефоне
   (портретное окно уже 860 px) под роликом, а окно прокручивается внутри. Ролик при этом всегда
   целиком в окне браузера, крестик 44 x 44 в правом верхнем углу.
   Размеры: --vlb-w и --vlb-h, ширина и высота ролика. Сначала правило на vh, следом на svh: Chrome
   до 108 окна <dialog> уже знает, а svh ещё нет, и остаётся на vh. */

/* Описание в карточке не показываем: его видно в окне, а в разметке оно для поиска. */
.reel-card .reel-desc { display: none; }

/* Пока окно открыто, страница под ним стоит. Полоса прокрутки не пропадает рывком там, где она занимает место. */
html.vlb-lock { overflow: hidden; scrollbar-gutter: stable; }
/* Круги «▶» на обложках под окном не пульсируют: иначе размытие подложки пересчитывается каждый кадр. */
html.vlb-lock .vplayer-play::before { animation-play-state: paused; }

.vlb {
  --vlb-pad: 16px;
  --vlb-gap: 40px;
  --vlb-text: min(340px, 36vw);
  --vlb-accent: #3A86FF;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: var(--vlb-pad);
  border: 0;
  background: transparent;
  color: #FFFFFF;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
}
.vlb[open] { display: flex; }
.vlb:focus { outline: none; }
/* Размытие под подложкой: строки страницы не пестрят под текстом окна. */
.vlb::backdrop {
  background: rgba(10, 8, 7, 0.88);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* margin: auto ставит содержимое по центру, пока оно влезает, и к верху, когда не влезает:
   у justify-content: center верх длинного содержимого уехал бы за край, и его не докрутить. */
.vlb-body {
  margin: auto;
  display: flex;
  align-items: center;
  gap: var(--vlb-gap);
}
/* Первые полсекунды после открытия окно не слушает мышь (см. video-lightbox.js): второй щелчок
   двойного нажатия не ставит ролик на паузу. */
.vlb.is-opening .vlb-body { pointer-events: none; }

.vlb-media { flex: 0 0 auto; }
.vlb-video {
  display: block;
  width: var(--vlb-w);
  height: var(--vlb-h);
  border-radius: 18px;
  background: #000000;
  object-fit: contain;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(58, 134, 255, 0.16);
}
/* Рамка фокуса вокруг ролика только для клавиатуры: окно открыто с клавиатуры или по окну ходят Tab. */
.vlb-video:focus { outline: none; }
.vlb.is-keyboard .vlb-video:focus-visible { outline: 3px solid var(--vlb-accent); outline-offset: 4px; }

/* Вертикальный ролик: по высоте окна, но так, чтобы справа влез текст. */
.vlb--tall {
  --vlb-h: min(86vh, 960px, (100vw - 2 * var(--vlb-pad) - var(--vlb-gap) - var(--vlb-text)) * 16 / 9);
  --vlb-w: calc(var(--vlb-h) * 9 / 16);
}
@supports (height: 1svh) {
  .vlb--tall {
    --vlb-h: min(86svh, 960px, (100vw - 2 * var(--vlb-pad) - var(--vlb-gap) - var(--vlb-text)) * 16 / 9);
  }
}

/* Горизонтальный ролик: по ширине окна, текст под ним, и ролик с текстом влезают по высоте. */
.vlb--wide {
  --vlb-w: min(92vw, 100vw - 2 * var(--vlb-pad), 1100px, (86vh - 150px) * 16 / 9);
  --vlb-h: calc(var(--vlb-w) * 9 / 16);
}
@supports (height: 1svh) {
  .vlb--wide { --vlb-w: min(92vw, 100vw - 2 * var(--vlb-pad), 1100px, (86svh - 150px) * 16 / 9); }
}
.vlb--wide .vlb-body {
  flex-direction: column;
  align-items: stretch;
  gap: 22px;
  width: var(--vlb-w);
}

/* Текст: название, «кто · что, длина», описание. */
.vlb-text {
  flex: 0 0 var(--vlb-text);
  width: var(--vlb-text);
  min-width: 0;
}
.vlb--wide .vlb-text { flex: none; width: auto; max-width: 720px; }
.vlb-title {
  margin: 0;
  font-family: var(--font-headings, 'Montserrat', sans-serif);
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.4px;
  color: #FFFFFF;
}
.vlb-meta {
  display: flex;
  gap: 12px;
  align-items: baseline;
  margin: 14px 0 0;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  /* светлее фирменного синего: подложка над светлой полосой страницы серее, а текст мелкий */
  color: #6FA5FF;
}
.vlb-meta::before {
  content: '';
  flex: 0 0 24px;
  height: 2px;
  border-radius: 2px;
  background: var(--vlb-accent);
  transform: translateY(-4px);
}
.vlb-desc {
  margin: 16px 0 0;
  max-width: 34em;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 16px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.8);
}

/* Крестик: прибит к углу экрана и виден, даже когда окно прокручено. */
.vlb-close {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 2;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  background: rgba(26, 21, 20, 0.78);
  color: #FFFFFF;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.vlb-close::before,
.vlb-close::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 2px;
  margin: -1px 0 0 -9px;
  border-radius: 2px;
  background: currentColor;
  transform: rotate(45deg);
}
.vlb-close::after { transform: rotate(-45deg); }
.vlb-close:hover { background: var(--vlb-accent); border-color: var(--vlb-accent); transform: scale(1.06); }
.vlb-close:focus { outline: none; }
.vlb-close:focus-visible { outline: 3px solid var(--vlb-accent); outline-offset: 3px; }

/* Телефон и узкое портретное окно: всё в столбик, сверху место под крестик, ролик целиком в окне,
   и под ним выглядывает начало названия: видно, что ниже есть текст. */
@media (orientation: portrait) and (max-width: 860px) {
  .vlb { padding: 64px 16px 28px; }
  .vlb-body {
    flex-direction: column;
    align-items: center;
    gap: 18px;
    width: 100%;
  }
  .vlb--tall { --vlb-h: min(100vh - 124px, (100vw - 32px) * 16 / 9); }
  @supports (height: 1svh) {
    .vlb--tall { --vlb-h: min(100svh - 124px, (100vw - 32px) * 16 / 9); }
  }
  .vlb-text { flex: none; width: 100%; max-width: 560px; }
  .vlb-close { top: 10px; right: 10px; }
}

/* Появление: подложка проявляется, ролик с текстом чуть поднимается. */
@keyframes vlb-in {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to { opacity: 1; transform: none; }
}
@keyframes vlb-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.vlb[open] .vlb-body { animation: vlb-in 0.32s cubic-bezier(0.2, 0.8, 0.2, 1); }
.vlb[open]::backdrop { animation: vlb-fade 0.24s ease-out; }
.vlb[open] .vlb-close { animation: vlb-fade 0.24s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .vlb[open] .vlb-body,
  .vlb[open]::backdrop,
  .vlb[open] .vlb-close { animation: none; }
  .vlb-close { transition: none; }
}