/**
 * @file lightbox.css — полноэкранный просмотр фото (js/lightbox.js). Токены системы, ни одного «сырого» значения кроме тех,
 * что определяют геометрию самого оверлея (z-index выше шторок --ee-shutter, подложка непрозрачнее --ee-overlay).
 */
.ee-lightbox { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; }
.ee-lightbox[hidden] { display: none; }
html.ee-lightbox-lock, html.ee-lightbox-lock body { overflow: hidden; }
.ee-lightbox__backdrop { position: absolute; inset: 0; background: color-mix(in oklab, black 88%, transparent); }
.ee-lightbox__stage { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: var(--ee-s6) var(--ee-s7); box-sizing: border-box; }
.ee-lightbox__img { max-width: 100%; max-height: calc(100vh - var(--ee-s7) * 3); object-fit: contain; box-shadow: var(--shadow-2xl); border-radius: var(--ee-s1); background: color-mix(in oklab, black 20%, transparent); cursor: pointer; }
/* клик по самой картинке листает (правая половина = вперёд, левая = назад, js/lightbox.js); клик мимо неё (на .ee-lightbox__stage
   вокруг фото, или на подложке) закрывает — оба узла помечены data-ee-lb-close, картинка — нет */
.ee-lightbox__close {
  position: absolute; top: var(--ee-s4); right: var(--ee-s4); z-index: 2; display: inline-flex; align-items: center; justify-content: center;
  width: var(--ee-control); height: var(--ee-control); border: 0; border-radius: 50%; background: color-mix(in oklab, black 45%, transparent);
  color: #fff; cursor: pointer;
}
.ee-lightbox__close:hover { background: color-mix(in oklab, black 65%, transparent); }
.ee-lightbox__close:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.ee-lightbox__nav {
  position: absolute; top: 50%; z-index: 2; display: inline-flex; align-items: center; justify-content: center; transform: translateY(-50%);
  width: var(--ee-control); height: var(--ee-control); border: 0; border-radius: 50%; background: color-mix(in oklab, black 45%, transparent);
  color: #fff; cursor: pointer;
}
.ee-lightbox__nav[hidden] { display: none; }
.ee-lightbox__nav:hover { background: color-mix(in oklab, black 65%, transparent); }
.ee-lightbox__nav:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.ee-lightbox__nav--prev { left: var(--ee-s4); }
.ee-lightbox__nav--next { right: var(--ee-s4); }
.ee-lightbox__caption { position: absolute; left: 0; right: 0; bottom: var(--ee-s6); z-index: 2; margin: 0; padding: 0 var(--ee-s6); color: #fff; text-align: center; font-size: var(--ee-fs-card); }
.ee-lightbox__caption[hidden] { display: none; }
.ee-lightbox__counter { position: absolute; top: var(--ee-s4); left: var(--ee-s4); z-index: 2; margin: 0; color: color-mix(in oklab, white 80%, transparent); font-size: var(--ee-fs-meta); }
.ee-lightbox__counter[hidden] { display: none; }

/* курсор-подсказка на увеличиваемых картинках (текст статей и т.п.) */
.ee-lightbox-zoomable { cursor: zoom-in; }

@media (max-width: 47.99rem) {
  .ee-lightbox__stage { padding: var(--ee-s4); }
  .ee-lightbox__img { max-height: calc(100vh - var(--ee-s6) * 2); }
  .ee-lightbox__nav { display: none; }   /* на телефоне листает свайп, кнопки-стрелки не нужны — экономят место */
  .ee-lightbox__close { top: var(--ee-s2); right: var(--ee-s2); }
}