/* ── Окно поверх страницы ───────────────────────────────────────
   Открывается для фото и роликов RuTube. Плеер вставляется только
   после нажатия: до этого на странице нет ни одного чужого
   запроса — ровно то, что мы обещаем клиентам. */

.lb {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: color-mix(in srgb, var(--navy) 92%, black);
  opacity: 0;
  transition: opacity 240ms ease;
}
.lb.is-on { opacity: 1; }
.lb[hidden] { display: none; }

.lb__in {
  width: min(96rem, 100%);
  transform: translateY(8px) scale(.985);
  transition: transform 240ms cubic-bezier(.2, .7, .3, 1);
}
.lb.is-on .lb__in { transform: none; }

.lb__stage {
  position: relative;
  background: #000;
  border-radius: 2px;
  overflow: hidden;
}
.lb__stage img,
.lb__stage iframe { display: block; width: 100%; border: 0; }
.lb__stage img { max-height: 78svh; object-fit: contain; margin: 0 auto; }
.lb__stage iframe { aspect-ratio: 16 / 9; height: auto; }

.lb__poster {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: #000;
  cursor: pointer;
}
.lb__poster img { opacity: .75; transition: opacity 240ms ease; }
.lb__poster:hover img { opacity: .9; }
.lb__poster--blank { aspect-ratio: 16 / 9; }

.lb__pl {
  position: absolute;
  left: 50%; top: 50%;
  translate: -50% -50%;
  width: 5.5rem; height: 5.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  transition: scale 240ms cubic-bezier(.2, .7, .3, 1);
}
.lb__poster:hover .lb__pl { scale: 1.06; }
.lb__pl svg { width: 2rem; height: 2rem; fill: var(--ink); margin-left: .2rem; }

/* Заглушка, когда изображение не загружено */
.lb__none {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  color: color-mix(in srgb, var(--paper) 55%, transparent);
  font-size: .95rem;
}

.lb__cap {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding-top: .9rem;
  color: var(--paper);
}
.lb__cap .meta { color: var(--bronze); }
.lb__ttl { font-size: 1.15rem; }

.lb__x {
  position: absolute;
  top: 1rem; right: 1.25rem;
  width: 3rem; height: 3rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--paper);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  transition: background 200ms ease;
}
.lb__x:hover { background: color-mix(in srgb, var(--paper) 14%, transparent); }

.md__go {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
}

@media (prefers-reduced-motion: reduce) {
  .lb, .lb__in { transition-duration: 1ms; }
}