/* Лайтбокс сайта (lightbox.js). Цвета — в духе темы: тёмный фон, жёлтый акцент #f5c518. */
.lb { position: fixed; inset: 0; z-index: 10000; display: none; font-family: 'Roboto', sans-serif; color: #fff; }
.lb--open { display: block; }
.lb__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .92); }
.lb__stage { position: absolute; left: 0; right: 0; top: 0; bottom: 150px; display: flex; align-items: center; justify-content: center; padding: 56px 72px 12px; box-sizing: border-box; }
.lb--single .lb__stage { bottom: 60px; }
.lb__content { position: relative; max-width: 100%; max-height: 100%; display: flex; align-items: center; justify-content: center; }
.lb__img { max-width: 100%; max-height: calc(100vh - 220px); width: auto; height: auto; display: block; box-shadow: 0 10px 40px rgba(0, 0, 0, .6); background: #111; }
.lb--single .lb__img { max-height: calc(100vh - 130px); }
/* Размер — по метаданным ролика (есть и вертикальные), как у картинки: вписать в оба ограничения */
.lb__video { max-width: 100%; max-height: calc(100vh - 220px); width: auto; height: auto; min-width: 280px; background: #000; outline: none; box-shadow: 0 10px 40px rgba(0, 0, 0, .6); }
.lb--single .lb__video { max-height: calc(100vh - 130px); }
.lb__close, .lb__nav { position: absolute; z-index: 2; border: 0; background: rgba(0, 0, 0, .35); color: #fff; cursor: pointer; font-size: 28px; line-height: 1; width: 48px; height: 48px; border-radius: 50%; transition: background .2s, color .2s; }
.lb__close:hover, .lb__nav:hover, .lb__close:focus, .lb__nav:focus { background: #f5c518; color: #111; outline: none; }
.lb__close { top: 14px; right: 14px; font-size: 34px; }
.lb__nav { top: 50%; margin-top: -24px; font-size: 22px; }
.lb__nav--prev { left: 14px; }
.lb__nav--next { right: 14px; }
.lb--single .lb__nav { display: none; }
.lb__counter { position: absolute; top: 24px; left: 20px; font-size: 14px; letter-spacing: 1px; color: #bbb; z-index: 2; }
.lb__caption { position: absolute; left: 0; right: 0; bottom: 96px; text-align: center; font-size: 15px; line-height: 22px; padding: 0 80px; color: #eee; text-shadow: 0 1px 2px #000; }
.lb--single .lb__caption { bottom: 20px; }
.lb__thumbs { position: absolute; left: 0; right: 0; bottom: 0; height: 90px; display: flex; gap: 8px; align-items: center; justify-content: safe center; overflow-x: auto; overflow-y: hidden; padding: 8px 16px; box-sizing: border-box; background: rgba(0, 0, 0, .55); scrollbar-width: thin; }
.lb--single .lb__thumbs { display: none; }
.lb__thumb { position: relative; flex: 0 0 auto; width: 100px; height: 66px; padding: 0; border: 2px solid transparent; border-radius: 3px; background: #222; cursor: pointer; opacity: .55; overflow: hidden; transition: opacity .2s, border-color .2s; }
.lb__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lb__thumb:hover, .lb__thumb:focus { opacity: 1; outline: none; }
.lb__thumb--active { opacity: 1; border-color: #f5c518; }
.lb__play { position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: rgba(0, 0, 0, .6) ; box-shadow: 0 0 0 2px rgba(255, 255, 255, .85) inset; }
.lb__play::after { content: ""; position: absolute; left: 10px; top: 7px; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent #fff; }
.lb__spinner { position: absolute; left: 50%; top: 50%; width: 36px; height: 36px; margin: -18px 0 0 -18px; border: 3px solid rgba(255, 255, 255, .25); border-top-color: #f5c518; border-radius: 50%; animation: lb-spin .8s linear infinite; pointer-events: none; }
@keyframes lb-spin { to { transform: rotate(360deg); } }
body.lb-open { overflow: hidden !important; }

/* Превью видео на странице: кадр + значок play */
.video-preview { position: relative; display: block; overflow: hidden; background: #000; }
.video-preview img { width: 100%; height: auto; display: block; opacity: .95; transition: opacity .2s, transform .3s; }
.video-preview:hover img { opacity: 1; transform: scale(1.02); }
.video-preview .play-icon { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: rgba(0, 0, 0, .55); box-shadow: 0 0 0 3px #f5c518 inset; transition: background .2s; }
.video-preview:hover .play-icon { background: #f5c518; }
.video-preview .play-icon::after { content: ""; position: absolute; left: 26px; top: 20px; border-style: solid; border-width: 12px 0 12px 20px; border-color: transparent transparent transparent #fff; }
.video-preview:hover .play-icon::after { border-left-color: #111; }
.video-preview .video-title { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 12px; font-size: 13px; line-height: 18px; color: #fff; background: linear-gradient(transparent, rgba(0, 0, 0, .75)); }

@media (max-width: 767px) {
    .lb__stage { padding: 52px 8px 8px; bottom: 120px; }
    .lb__nav { width: 40px; height: 40px; margin-top: -20px; font-size: 18px; }
    .lb__nav--prev { left: 6px; } .lb__nav--next { right: 6px; }
    .lb__caption { padding: 0 16px; font-size: 13px; bottom: 82px; }
    .lb__thumbs { height: 76px; } .lb__thumb { width: 80px; height: 54px; }
    .lb__img, .lb__video { max-height: calc(100vh - 190px); }
}