/*
 * Листалка фото ЖК: общая для страницы ЖК и карточек подбора. Значения — из tokens.css. Высоту задаёт
 * страница: лента заполняет .gal целиком, поэтому ширина телефона ей ничем не грозит.
 */

.gal { position: relative; width: 100%; height: 100%; overflow: hidden; background: var(--c-fill); }
.gal:focus-visible { outline: var(--focus-width) solid var(--c-focus); outline-offset: calc(var(--focus-width) * -1); }

.gal__track {
  position: absolute;
  inset: 0;
  display: flex;
  overflow: auto hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  outline: none;
}
.gal__track::-webkit-scrollbar { display: none; }

.gal__frame {
  position: relative;
  display: block;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: none;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
button.gal__frame { cursor: pointer; }
.gal__frame:focus-visible { outline: var(--focus-width) solid var(--c-focus); outline-offset: calc(var(--focus-width) * -1); }
.gal__img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }

/* Стрелки и счётчик вместе в углу: снизу на обложке подбора лежат плашки срока и типа. Цвета одни в обеих
   темах: подложка лежит на фото, а не на странице. */
.gal__nav {
  position: absolute;
  top: var(--sp-2);
  right: var(--sp-2);
  display: flex;
  align-items: center;
  border-radius: var(--r-pill);
  background: rgba(0, 0, 0, .62);
  color: #fff;
}
.gal__nav[hidden] { display: none; }
.gal__count { min-width: 3.4em; font-size: var(--fs-caption); line-height: 1; font-variant-numeric: var(--numeric-tabular); text-align: center; white-space: nowrap; }
.gal__arrow {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background var(--dur-hover) var(--ease-standard);
}
.gal__arrow:hover { background: rgba(255, 255, 255, .18); }
.gal__arrow:focus-visible { outline: var(--focus-width) solid #fff; outline-offset: -3px; }
.gal__arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.gal__caption { margin: 0; color: var(--c-text-tertiary); font-size: var(--fs-caption); line-height: var(--lh-caption); }
.gal__caption a { color: inherit; }

/* Размер на странице ЖК: у обложки подбора высоту задаёт сама карточка. */
.gal--page { height: auto; aspect-ratio: 16 / 9; max-height: 460px; border-radius: var(--r-md); }
.gal--page + .gal__caption { margin-top: var(--sp-2); }

/* Лента едет по стрелкам плавно только без этой настройки: выбор делает скрипт (motion), а здесь гасится подсветка кнопок. */
@media (prefers-reduced-motion: reduce) {
  .gal__arrow { transition: none; }
}

@media print {
  .gal__nav { display: none; }
}