/* ============================================================
   ФУНКЦИЯ ДИЗАЙНА · КАРУСЕЛЬ + ЛАЙТБОКС
   Самодостаточный компонент. Разметка-источник:
     <div class="carousel" data-carousel> <img> <img> … </div>
   carousel.js превращает её в стейдж со стрелками + ленту превью.
   Листание без анимации. Клик по фото — фулскрин-лайтбокс
   со стрелками и управлением с клавиатуры (←/→/Esc).
   Зависит от tokens.css. Поддерживает тёмную тему.
   ============================================================ */

.carousel{margin:1.6em 0}
/* до инициализации скрываем сырые картинки, чтобы не было вспышки списка */
.carousel:not(.carousel--ready) > img{display:none}

.carousel__stage{position:relative;display:flex;align-items:center;justify-content:center;
  background:hsl(var(--muted-bg) / .4);border:1px solid hsl(var(--border));
  border-radius:var(--radius);overflow:hidden;min-height:120px}
.carousel__img{display:block;max-width:100%;max-height:72vh;max-height:72dvh;width:auto;height:auto;
  margin:0 auto;cursor:zoom-in}

.carousel__arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:44px;height:44px;border-radius:50%;border:1px solid hsl(var(--border));
  background:hsl(var(--background) / .82);-webkit-backdrop-filter: blur(8px); backdrop-filter:blur(8px);
  color:hsl(var(--foreground));font-size:1.5rem;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0;
  transition:border-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.carousel__arrow:hover{border-color:var(--level);color:var(--level)}
.carousel__arrow--prev{left:12px}
.carousel__arrow--next{right:12px}

.carousel__counter{position:absolute;right:12px;bottom:12px;z-index:2;
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.04em;
  color:hsl(var(--foreground));background:hsl(var(--background) / .82);
  -webkit-backdrop-filter: blur(8px); backdrop-filter:blur(8px);border:1px solid hsl(var(--border));
  border-radius:var(--radius-full);padding:.2rem .6rem}

.carousel__thumbs{display:flex;gap:.5rem;margin-top:.7rem;overflow-x:auto;
  padding-bottom:.35rem;scrollbar-width:thin;scrollbar-color:hsl(var(--border)) transparent}
.carousel__thumb{flex:none;width:88px;height:58px;border-radius:var(--radius-sm);
  overflow:hidden;border:2px solid transparent;background:hsl(var(--muted-bg));
  cursor:pointer;padding:0;opacity:.65;
  transition:opacity var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
.carousel__thumb:hover{opacity:1}
.carousel__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.carousel__thumb.is-active{border-color:var(--level);opacity:1}

/* ─── Лайтбокс (общий, один на страницу) ─── */
.lightbox{position:fixed;inset:0;z-index:200;display:none;
  align-items:center;justify-content:center;background:rgb(0 0 0 / .92)}
.lightbox.is-open{display:flex}
.lightbox__img{max-width:92vw;max-height:88vh;max-height:88dvh;width:auto;height:auto;
  object-fit:contain;border-radius:var(--radius-sm);user-select:none}
.lightbox__btn{position:absolute;z-index:2;border:1px solid rgb(255 255 255 / .25);
  background:rgb(255 255 255 / .08);color:var(--level-contrast);cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0;
  transition:background-color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
.lightbox__btn:hover{background:rgb(255 255 255 / .18);border-color:rgb(255 255 255 / .5)}
.lightbox__prev,.lightbox__next{top:50%;transform:translateY(-50%);
  width:54px;height:54px;border-radius:50%;font-size:1.8rem;line-height:1}
.lightbox__prev{left:18px}
.lightbox__next{right:18px}
.lightbox__close{top:18px;right:18px;width:46px;height:46px;border-radius:50%;font-size:1.5rem;line-height:1}
.lightbox__counter{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:2;
  font-family:var(--font-mono);font-size:.8rem;color:rgb(255 255 255 / .8)}

@media(max-width:560px){
  .lightbox__prev,.lightbox__next{width:44px;height:44px;font-size:1.4rem}
  .lightbox__prev{left:8px}.lightbox__next{right:8px}
}
@media(prefers-reduced-motion:reduce){
  .carousel__arrow,.carousel__thumb,.lightbox__btn{transition:none}
}