/* =============================================================
   ПГС78 — Lightbox
   Click any [data-lightbox-src] to open full-size image overlay.
   Group images via [data-lightbox-group="..."] for prev/next nav.
   ============================================================= */

[data-lightbox-src] { cursor: zoom-in; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(14, 15, 17, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms ease, visibility 0s linear 200ms;
}
.lightbox.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 200ms ease;
}

.lightbox__img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  border-radius: 6px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
  background: #fff;
}

.lightbox__close,
.lightbox__nav {
  position: absolute;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.18);
  cursor: pointer;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-family: inherit;
  transition: background 150ms ease, border-color 150ms ease, transform 150ms ease;
}
.lightbox__close:hover,
.lightbox__nav:hover {
  background: rgba(255, 255, 255, 0.20);
  border-color: rgba(255, 255, 255, 0.32);
}
.lightbox__close:active,
.lightbox__nav:active { transform: scale(0.96); }

.lightbox__close { top: 24px; right: 24px; }
.lightbox__close svg { width: 18px; height: 18px; }

.lightbox__nav {
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
}
.lightbox__nav:hover { transform: translateY(-50%) scale(1.04); }
.lightbox__nav:active { transform: translateY(-50%) scale(0.96); }
.lightbox__nav--prev { left: 24px; }
.lightbox__nav--next { right: 24px; }
.lightbox__nav svg { width: 22px; height: 22px; }
.lightbox__nav[hidden] { display: none; }

.lightbox__counter {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 6px 14px;
  border-radius: 999px;
}
.lightbox__counter[hidden] { display: none; }

body.is-lightbox-open { overflow: hidden; }

@media (max-width: 600px) {
  .lightbox { padding: 16px; }
  .lightbox__close { top: 12px; right: 12px; }
  .lightbox__nav { width: 40px; height: 40px; }
  .lightbox__nav--prev { left: 8px; }
  .lightbox__nav--next { right: 8px; }
}