/* ============================================================
   ЛАЙТБОКС ПРОСМОТРА ФОТО (десктоп) — общий для страниц работ,
   будущих проектов и блока отзывов на главной.
   Вынесен из city_works/style.css, потому что подключается сразу
   на нескольких страницах со своими наборами стилей.
   Переменные заданы с запасными значениями: на главной свой :root.
   ============================================================ */

body.lightbox-open { overflow: hidden; }

.lightbox {
  /* Ширина кнопок листания. Стрелка «назад» считается от неё же, чтобы обе
     иконки выглядели одинаково: в svg переключения фото кольцо занимает
     ~0.87 ширины файла (49.5 из 57), а стрелка «назад» — всю ширину. */
  --lb-nav-w: clamp(30px, 3vw, 56px);
  --lb-back-w: calc(var(--lb-nav-w) * 0.87);
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 14, 20, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: lightbox-in .22s ease both;
}

.lightbox[hidden] { display: none; }
@keyframes lightbox-in { from { opacity: 0; } to { opacity: 1; } }

.lightbox__img {
  max-width: min(78vw, 1100px);
  max-height: 82vh;
  width: auto;
  height: auto;
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  object-fit: contain;
  background: #0d1116;
  animation: lightbox-img-in .25s cubic-bezier(0.23, 1, 0.32, 1) both;
}
@keyframes lightbox-img-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }

/* Кнопка «назад» — только стрелка, без тёмного круга под ней. */
.lightbox__close {
  position: absolute;
  top: 2.2vw;
  left: 2.2vw;
  z-index: 5;
  width: var(--lb-back-w);
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .2s cubic-bezier(0.23, 1, 0.32, 1);
}
.lightbox__close img { display: block; width: 100%; height: auto; }
.lightbox__close:hover { transform: translateX(-3px); }

.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: var(--lb-nav-w);
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  transition: transform .2s cubic-bezier(0.23, 1, 0.32, 1), filter .2s ease;
}
.lightbox__nav img { display: block; width: 100%; height: auto; }
.lightbox__nav--prev { left: 2vw; }
.lightbox__nav--next { right: 2vw; }
.lightbox__nav--prev img { transform: scaleX(-1); }
.lightbox__nav:hover { transform: translateY(-50%) scale(1.1); filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.25)); }
.lightbox__nav:active { transform: translateY(-50%) scale(0.96); }

.lightbox__dots {
  position: absolute;
  left: 50%;
  bottom: 3vw;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.6vw;
  max-width: 70vw;
}
.lightbox__dot {
  width: 0.6vw;
  height: 0.6vw;
  min-width: 8px;
  min-height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.4);
  transition: background-color .2s ease, transform .2s ease;
}
.lightbox__dot.is-active { background: var(--blue, #186BB8); transform: scale(1.3); }

@media (prefers-reduced-motion: reduce) {
  .lightbox, .lightbox__img { animation: none !important; transition: none !important; }
}

@media (max-width: 768px) {
  .lightbox { --lb-nav-w: 40px; backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(10, 14, 20, 0.86); }
  .lightbox__img { max-width: 92vw; max-height: 74vh; }
  .lightbox__close { top: 16px; left: 16px; }
  .lightbox__nav--prev { left: 10px; }
  .lightbox__nav--next { right: 10px; }
  .lightbox__dots { bottom: 18px; gap: 8px; }
  .lightbox__dot { width: 7px; height: 7px; }
}