/* ---------------------------------------------------------------
   Карусель фотографий в карточке объекта.
   Перенос с goderdzi.ski (.stays-ph / .stays-trk / .stays-bars):
   на телефоне свайп силами браузера, на десктопе фотография следует
   за курсором. Высоту, скругление и object-fit даёт .title__item__img,
   поэтому геометрия карточки не меняется.
   --------------------------------------------------------------- */

/* Ширину карточки задаёт колонка, а не её содержимое.
   Без этого ссылка карточки — флекс-элемент, который меряется по контенту,
   и каждый добавленный кадр раздвигал карточку на 4%: фотография прыгала
   под курсором (a4c5ebd отменял такую попытку). Закрепив ширину, мы вправе
   достраивать ленту на лету — а это нужно, чтобы она не была широкой
   заранее: Safari держит буфер под ВСЮ прокручиваемую область, и 72 ленты
   по 1910 точек вместо 382 роняли вкладку (проверено 09.10.2026). */
.cards-wrapper .title__item_link { width: 100%; min-width: 0; }

.gg-ph {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  /* Ровный фон, а не фотография. Раньше сюда подкладывалась обложка — это
     осталось от схемы, где кадры дорисовывались по наведению и могли не
     успеть загрузиться. Теперь все кадры лежат в разметке сразу, а подложка
     давала артефакт: на айфоне при резиновом отскоке лента отъезжала и
     из-под неё выглядывала первая фотография. Выглядело как фото на фото. */
  background: #f1f1f1;
}

.gg-trk {
  position: relative;
  z-index: 1;
  background: transparent;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  /* НЕ возвращать -webkit-overflow-scrolling: touch. Это свойство заставляет
     Safari на iOS вынести каждый прокручиваемый блок на отдельный слой со
     своим буфером (~4,4 МБ при ширине карточки 382 и тройной плотности).
     На подборке из 72 карточек это около 320 МБ только под пустые слои,
     поверх памяти под сами фотографии — вкладка падала (09.10.2026,
     /en/batumi). Пользы от него нет: с iOS 13 инерционная прокрутка
     работает по умолчанию, свойство объявлено устаревшим. */
  /* никакого scroll-behavior: smooth — при движении мыши картинка
     должна меняться мгновенно, иначе ощущается вязко */
}
.gg-trk::-webkit-scrollbar { display: none; }

.gg-trk > .gg-slide__img {
  flex: 0 0 100%;
  width: 100%;
  scroll-snap-align: start;
}

.gg-slide__img {
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

/* полоски: активная растягивается, как в сторис */
.gg-bars {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  z-index: 2;
  pointer-events: none;
}
.gg-bars i {
  flex: 0 0 6px;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.6);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
  transition: flex-basis 0.2s, background 0.2s;
}
.gg-bars i.on {
  flex-basis: 20px;
  background: #fff;
}

/* Подстраховка: задаём коробке карусели ту же высоту, что и .title__item__img
   в index.css (504px от 1000px ширины, 320px ниже). Без этого высота зависит
   от того, доехали ли стили картинки, и при любом сбое карточка разъезжается —
   ровно так и случилось 09.10.2026, когда файл со стилями не был подключён. */
@media screen and (min-width: 1000px) {
  .gg-ph, .gg-trk, .gg-trk > .gg-slide__img, .gg-trk > .gg-vslot { height: 504px; }
}
@media screen and (max-width: 999px) {
  .gg-ph, .gg-trk, .gg-trk > .gg-slide__img, .gg-trk > .gg-vslot { height: 320px; }
}
.gg-trk > .gg-slide__img { object-fit: cover; }

/* ───────────────────────────────────────────────────────────
   Ролик первым кадром в карточке.
   Проявляется, только когда реально пошёл: класс is-on ставит
   скрипт после успешного play. Пока не играет — видно фон, а не
   чёрный прямоугольник.
   ─────────────────────────────────────────────────────────── */
.gg-snap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* ПОД лентой, а не поверх неё. Первым кадром в ленте идёт прозрачная
     пустышка .gg-vslot: сквозь неё видно ролик, а при свайпе на её место
     наезжает первая фотография, и ролик уходит вбок вместе со всей лентой.
     Так сделано на goderdzi.ski. Если положить видео поверх и гасить его
     при смене кадра, лента едет, а ролик стоит на месте и мигает —
     свайп перестаёт читаться как листание. */
  z-index: 0;
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
.gg-snap.is-on { opacity: 1; }

/* прозрачный первый кадр: место для ролика в самой ленте */
.gg-vslot {
  flex: 0 0 100%;
  width: 100%;
  scroll-snap-align: start;
  background: transparent;
}