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

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

/* Сама анимация всплытия/скрытия окна (затемнение + зум картинки) — штатная
   в glightbox.min.css, 0.5s. Ускоряем: длительность анимации задаётся именно
   через animation-duration на тех же классах-триггерах (.gfadeIn/.gfadeOut —
   оверлей, .gzoomIn/.gzoomOut — слайд), transition тут ни при чём. */
.glightbox-container .gfadeIn,
.glightbox-container .gfadeOut,
.glightbox-container .gzoomIn,
.glightbox-container .gzoomOut {
  animation-duration: .35s;
}

/* Убираем потемнение при листании. 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 .12s ease, opacity .12s ease;
  opacity: .85;
  display: flex !important;   /* перебиваем возможное скрытие в мобильном режиме */
  -webkit-tap-highlight-color: transparent;  /* убираем синий квадрат-подсветку тапа на мобилке */
}
/* После тапа кнопка остаётся в :focus (мобильные браузеры фокус сами не снимают).
   Явно гасим рамку фокуса, если он не с клавиатуры (:focus-visible оставляем
   для доступности) — но НЕ трогаем фон/opacity здесь, иначе это правило
   (специфичность выше :hover) перебивает наведение на десктопе после клика. */
.glightbox-container .gprev:focus:not(:focus-visible),
.glightbox-container .gnext:focus:not(:focus-visible) {
  outline: none;
}

/* Стрелки не должны появляться раньше самой картинки: пока GLightbox показывает
   свой спиннер (.gloader, display:block — как в момент открытия, так и при
   листании на следующий слайд), прячем стрелки. Спиннер прячется инлайновым
   style="display:none" ровно тогда, когда картинка полностью загрузилась —
   в этот момент стрелки появляются вместе с ней. */
.glightbox-container:has(.gloader:not([style*="display: none"])) .gprev,
.glightbox-container:has(.gloader:not([style*="display: none"])) .gnext {
  opacity: 0;
  pointer-events: none;
}
/* Стрелки держатся у КРАЯ КАРТИНКИ, а не у края экрана.
   Скриншоты ~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; }

/* Только для устройств с настоящим наведением (мышь). На тач-экранах :hover
   ставится по тапу и не снимается до следующего тапа в другом месте — из-за
   этого кнопка "залипает" подсвеченной. (hover: hover) исключает тач. */
@media (hover: hover) and (pointer: fine) {
  .glightbox-container .gprev:hover,
  .glightbox-container .gnext:hover {
    background: rgba(255, 255, 255, .30);
    opacity: 1;
  }
  .glightbox-container .gprev:hover .garrow,
  .glightbox-container .gnext:hover .garrow {
    stroke: #000;
  }
}
.glightbox-container .gprev svg,
.glightbox-container .gnext svg {
  width: 22px;
  height: 22px;
}
.glightbox-container .gprev .garrow,
.glightbox-container .gnext .garrow {
  transition: stroke .12s ease;
}

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