/* kln-lightbox — увеличение фото на весь экран (assets/js/lightbox.js): белый фон, круглые кнопки как у каруселей (.kln-arrow),
   счётчик слева сверху, миниатюры снизу. На телефоне без стрелок и миниатюр — листают свайпом. */
.kln-lightbox { display: none; position: fixed; inset: 0; z-index: 3000; font-family: var(--kln-font); -webkit-tap-highlight-color: transparent; }
.kln-lightbox._open { display: block; }
.kln-lightbox__bg { position: absolute; inset: 0; background: #fff; opacity: var(--kln-lightbox-fade, 1); animation: kln-lightbox-in .32s ease-out; }
/* z-index: 0 — свой слой: кадры внутри (z-index для шторки) не поднимаются над крестиком, счётчиком и миниатюрами */
.kln-lightbox__stage { position: absolute; inset: 0; z-index: 0; overflow: hidden; touch-action: none; }
.kln-lightbox__track { position: relative; height: 100%; }
/* Кадры лежат друг на друге (смена — шторкой, lightbox.js); слайд — offsetParent фото, от него считается положение для зума */
.kln-lightbox__slide { position: absolute; inset: 0; visibility: hidden; display: flex; align-items: center; justify-content: center; height: 100%; padding: 90px 96px 120px; box-sizing: border-box; }
.kln-lightbox_single .kln-lightbox__slide { padding-bottom: 90px; }
.kln-lightbox__img { display: block; max-width: 100%; max-height: 100%; transform-origin: center; user-select: none; -webkit-user-drag: none; }
/* Пока грузится большое фото текущего слайда — тонкая бегущая полоска сверху окна (класс _busy, lightbox.js), а не блик
   по самому фото: блик поверх уже видимого превью выглядел как сбой. С задержкой 0,3 с — из кэша полоски нет вовсе.
   Превью ещё нет — серый скелетон на месте фото. */
.kln-lightbox._busy::after { content: ""; position: absolute; top: 0; left: 0; right: 0; z-index: 1; height: 2px; background: linear-gradient(90deg, transparent, var(--kln-ink), transparent) no-repeat; background-size: 30% 100%; animation: kln-lightbox-busy 1.2s .3s linear infinite both; }
@keyframes kln-lightbox-busy {
    from { background-position: -50% 0; }
    to { background-position: 150% 0; }
}
.kln-lightbox__slide._empty::before { content: ""; position: absolute; inset: 0; width: min(100% - 192px, 100dvh - 210px); aspect-ratio: 1; margin: auto; border-radius: var(--kln-r-sm); background: linear-gradient(90deg, var(--kln-bg) 25%, #fff 50%, var(--kln-bg) 75%) 0 0 / 200% 100%; animation: kln-skeleton 1.4s linear infinite; }
.kln-lightbox__slide._empty .kln-lightbox__img { opacity: 0; }
.kln-lightbox._zoomable .kln-lightbox__img { cursor: zoom-in; }
.kln-lightbox._zoomed:not(._zoomable) .kln-lightbox__img { cursor: zoom-out; }

.kln-lightbox__counter,
.kln-lightbox__btn,
.kln-lightbox__thumbs { animation: kln-lightbox-in .32s ease-out; transition: opacity .25s; }
.kln-lightbox._closing .kln-lightbox__bg,
.kln-lightbox._closing .kln-lightbox__counter,
.kln-lightbox._closing .kln-lightbox__btn,
.kln-lightbox._closing .kln-lightbox__thumbs { opacity: 0; transition: opacity .32s; }

.kln-lightbox__counter { position: absolute; top: 20px; left: 24px; line-height: 50px; color: var(--kln-muted); font-size: var(--kln-fs-sm); }

.kln-lightbox__btn { position: absolute; width: 50px; height: 50px; padding: 0; border: 0; border-radius: 50%; background: var(--kln-surface); box-shadow: var(--kln-shadow-sm); color: var(--kln-ink); cursor: pointer; transition: background-color .3s ease-in-out, color .3s ease-in-out, opacity .25s; }
.kln-lightbox__btn svg { position: absolute; left: 50%; top: 50%; width: 17px; height: 17px; transform: translate(-50%, -50%); pointer-events: none; }
.kln-lightbox__btn:focus-visible { box-shadow: var(--kln-ring); outline: none; }
.kln-lightbox__btn:disabled { color: var(--kln-faint); cursor: default; }
@media (hover: hover) {
    .kln-lightbox__btn:not(:disabled):hover { background: var(--kln-red); color: #fff; }
}
.kln-lightbox__btn_close { top: 20px; right: 20px; }
.kln-lightbox__btn_close svg { width: 22px; height: 22px; }
.kln-lightbox__btn_prev,
.kln-lightbox__btn_next { top: 50%; margin-top: -25px; }
.kln-lightbox__btn_prev { left: 20px; }
.kln-lightbox__btn_next { right: 20px; }
.kln-lightbox__btn_prev svg { transform: translate(-50%, -50%) rotate(180deg); }
.kln-lightbox_single .kln-lightbox__btn_prev,
.kln-lightbox_single .kln-lightbox__btn_next,
.kln-lightbox_single .kln-lightbox__counter,
.kln-lightbox_single .kln-lightbox__thumbs { display: none; }

/* Миниатюры — строкой по центру внизу, активная в рамке --kln-ink */
.kln-lightbox__thumbs { position: absolute; left: 0; right: 0; bottom: 24px; display: flex; gap: 8px; padding: 0 20px; overflow-x: auto; scrollbar-width: none; }
.kln-lightbox__thumbs::-webkit-scrollbar { display: none; }
/* По центру, а когда не помещаются — прокрутка с начала (justify-content: center обрезал бы левые) */
.kln-lightbox__thumb:first-child { margin-left: auto; }
.kln-lightbox__thumb:last-child { margin-right: auto; }
.kln-lightbox__thumb { flex: 0 0 64px; height: 64px; padding: 0; border: 1px solid transparent; border-radius: var(--kln-r-sm); background: var(--kln-bg) center / cover no-repeat; opacity: .6; cursor: pointer; transition: opacity .2s, border-color .2s; }
.kln-lightbox__thumb._active { border-color: var(--kln-ink); opacity: 1; }
.kln-lightbox__thumb:focus-visible { box-shadow: var(--kln-ring); outline: none; }
@media (hover: hover) {
    .kln-lightbox__thumb:hover { opacity: 1; }
}

@keyframes kln-lightbox-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
    .kln-lightbox._busy::after,
    .kln-lightbox__slide._empty::before,
    .kln-lightbox__bg,
    .kln-lightbox__counter,
    .kln-lightbox__btn,
    .kln-lightbox__thumbs { animation: none; }
}

/* Телефон: фото во всю ширину, листают свайпом */
@media screen and (max-width: 767px) {
    .kln-lightbox__slide,
    .kln-lightbox_single .kln-lightbox__slide { padding: 72px 0; }
    .kln-lightbox__slide._empty::before { width: min(100%, 100dvh - 144px); border-radius: 0; }
    .kln-lightbox__counter { top: 12px; left: 16px; line-height: 44px; }
    .kln-lightbox__btn { width: 44px; height: 44px; }
    .kln-lightbox__btn_close { top: 12px; right: 12px; }
    .kln-lightbox__btn_prev,
    .kln-lightbox__btn_next,
    .kln-lightbox__thumbs { display: none; }
}