/* ── Кастомизация лайтбокса GLightbox ──────────────────────────────────────
   Подключается ТОЛЬКО на страницах с галереей (base.njk, флаг hasGallery),
   ПОСЛЕ glightbox.min.css — поэтому переопределяет его на равной специфичности.
   Задачи: подпись под скрином не нужна, стрелки ближе к картинке и всегда
   видны (в т.ч. на мобилке). Слайдшоу не используется. */

/* Тёмный фон-оверлей — чуть плотнее дефолта, тёплый чёрный. */
.glightbox-container .goverlay,
.glightbox-mobile .goverlay {
  background: rgba(10, 8, 6, .94);
}

/* Убираем потемнение при листании. GLightbox для эффекта перехода пишет ИНЛАЙНОВЫЙ
   opacity прямо в .ginner-container (картинка + подпись), и он иногда застревает на
   промежуточном значении (напр. 0.58) → весь слайд просвечивает тёмным оверлеем.
   `!important` перебивает даже инлайн-стиль, поэтому блок всегда непрозрачен.
   (Анимация перехода отключена в base.njk через slideEffect:'none'.)
   Заодно глушим штатное приглушение картинки в режиме .gdesc-open (opacity:.4). */
.glightbox-container .ginner-container,
.glightbox-container .gslide-media,
.glightbox-container.gdesc-open .gslide-media {
  opacity: 1 !important;
}

/* Подпись (название игры) под скрином — БЕЗ плашки: просто белый текст по центру.
   Убираем дефолтную белую/градиентную подложку GLightbox и лишние отступы. */
.glightbox-container .gslide-description,
.glightbox-mobile .glightbox-container .gslide-description {
  background: none !important;
  padding: 12px 16px 8px !important;
  text-align: center;
}
.glightbox-container .gslide-description .gslide-title,
.glightbox-mobile .glightbox-container .gslide-description .gslide-title {
  color: #fff;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  margin: 0;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .8);  /* читаемость на светлых скринах */
}

/* Стрелки: прижаты ближе к краям изображения (не к самым краям экрана),
   круглые полупрозрачные кнопки, всегда видны — включая тач-устройства. */
.glightbox-container .gprev,
.glightbox-container .gnext {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .45);
  transition: background .2s ease, opacity .2s ease;
  opacity: .85;
  display: flex !important;   /* перебиваем возможное скрытие в мобильном режиме */
}
/* Стрелки держатся у КРАЯ КАРТИНКИ, а не у края экрана.
   Скриншоты ~800px шириной → половина ≈ 400px; отступаем ещё на ширину стрелки
   с зазором (~56px), чтобы стрелка стояла вплотную слева/справа от изображения.
   На узких экранах calc уходит в минус → срабатывает нижняя граница (край экрана). */
.glightbox-container .gprev { left:  max(10px, calc(50vw - 456px)); right: auto; }
.glightbox-container .gnext { right: max(10px, calc(50vw - 456px)); left:  auto; }

.glightbox-container .gprev:hover,
.glightbox-container .gnext:hover {
  background: rgba(0, 0, 0, .75);
  opacity: 1;
}
.glightbox-container .gprev svg,
.glightbox-container .gnext svg {
  width: 22px;
  height: 22px;
}

/* На узких экранах — компактнее и вплотную к краям картинки. */
@media (max-width: 768px) {
  .glightbox-container .gprev,
  .glightbox-container .gnext {
    width: 42px;
    height: 42px;
  }
  .glightbox-container .gprev { left: 8px; }
  .glightbox-container .gnext { right: 8px; }
}