/* Каталог отеля: лента в шапке панели, окно альбома, просмотр кадра.
 *
 * Величины берутся токенами раздела (`hotelsearch.css`), цвет и отступ —
 * общими (`tokens.css`). Число здесь означает, что нужного токена нет вовсе,
 * и тогда оно объяснено рядом.
 */

/* --- лента в шапке --------------------------------------------------------- */

/* Стоит на месте прежних трёх квадратов — до ленты фактов и не прокручивается:
 * отель узнаётся кадром быстрее, чем строкой. Шапка от этого стала **короче**:
 * было 168 + низ, стало 88 + низ. */
.hs-album {
  flex: none;
  padding: 0 var(--s8) var(--s5);
  min-width: 0;
}

.hs-album-strip {
  display: flex;
  gap: var(--s4);
  overflow-x: auto;
  scroll-behavior: smooth;
}

/* Плитка — кнопка, а не картинка с обработчиком: иначе кадр не берётся
 * с клавиатуры вовсе. */
.hs-album-tile,
.hs-album-cell,
.hs-gym-tile {
  flex: none;
  padding: 0;
  border: 1px solid var(--edge-card);
  border-radius: var(--r3);
  background: var(--sunken);
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease);
}

.hs-album-tile {
  width: var(--hs-tile);
  aspect-ratio: 3 / 2;
}

.hs-album-tile:hover,
.hs-album-cell:hover {
  transform: scale(1.02);
}

.hs-album-tile:focus-visible,
.hs-album-cell:focus-visible,
.hs-album-tab:focus-visible,
.hs-gym-tile:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Слот картинки. `is-gone` — промах: пустое место того же размера, а не значок
 * разорванного листа. Блочный намеренно: элемент строчный, и `aspect-ratio`
 * коробки родителя без этого схлопывается. */
.hs-album-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hs-album-img.is-gone {
  background: var(--fill);
}

/* Пока каталог едет — ряд пустых плиток. Держит высоту шапки: без него панель
 * прыгает на восемьдесят восемь пикселей, когда кадры приходят. */
.hs-album-tile.is-load,
.hs-gym-tile.is-load {
  display: block;
  background: var(--fill);
  cursor: default;
}

/* Вход в альбом. Слово, а не значок: «Все 327» отвечает и «сколько их»,
 * и «что будет по нажатию», — приём взят у источника («See All 113 Photos»).
 *
 * **Прижат к правому краю ленты, а не стоит в её конце.** Стоящий в конце,
 * он уезжает за экран вместе с лентой: у Tourdot.hotel в первой категории
 * 20 кадров, лента шириной 939 px прокручивается на 2972, и левый край
 * плитки приходился на 3321 при правой границе 1420 — в альбом нельзя было
 * попасть, не домотав двадцать фотографий. У источника кнопка тоже
 * на виду поверх последнего кадра. Боевой 07.09.2026. */
.hs-album-more {
  position: sticky;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--s5);
  font: 500 var(--t-14) / 1.2 var(--sans);
  color: var(--ink-2);
  background: var(--fill);
  width: auto;
  aspect-ratio: auto;
  min-width: var(--hs-tile);
}

.hs-album-more:hover {
  background: var(--fill-hover);
  color: var(--ink);
}

/* Отказ источника — не то же, что «фотографий нет»: у первого причина снаружи,
 * и молчать о ней значит отправить искать дефект в отеле. */
.hs-album-gone {
  margin: 0;
  font: 400 var(--t-14) / 1.3 var(--sans);
  color: var(--ink-3);
}

/* --- лента зала ------------------------------------------------------------ */

/* Стоит в прокручиваемом теле панели, под суждением о зале, а не в шапке:
 * плитка здесь вдвое крупнее, и в шапке она отняла бы у суждений полэкрана. */
.hs-gym {
  flex: none;
  min-width: 0;
}

/* Один ряд с прокруткой вбок: стороны стоят друг за другом, сперва отель. */
.hs-gym-strip {
  display: flex;
  gap: var(--s6);
  overflow-x: auto;
  /* Обводка фокуса и подъём плитки под курсором иначе срезаются краем ленты. */
  padding: var(--hair);
  margin: calc(-1 * var(--hair));
}

.hs-gym-part {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

/* Подпись стороны едет вместе с лентой, но не уезжает раньше своих кадров:
 * у гостей их бывает три десятка, и на двадцатом иначе не понять, чьи они. */
.hs-gym-cap {
  position: sticky;
  left: 0;
  align-self: flex-start;
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  white-space: nowrap;
}

.hs-gym-name {
  font: 400 var(--t-13) / 1 var(--sans);
  color: var(--ink-3);
}

.hs-gym-row {
  display: flex;
  gap: var(--s4);
}

/* Коробка — общая с плиткой каталога (правило вверху файла), свой только размер. */
.hs-gym-tile {
  width: var(--hs-gym-tile);
  aspect-ratio: 3 / 2;
}

/* Подъём слабее, чем у плитки каталога (1,02): на коробке 288 px те же два
 * процента — шесть пикселей, и соседняя плитка под ними скрывается. */
.hs-gym-tile:hover {
  transform: scale(1.01);
}

/* --- окно альбома ---------------------------------------------------------- */

/* Слой ниже `.toast` (60) и `.quick` (60) намеренно: сообщение «не сохранилось»
 * обязано быть видно поверх альбома, иначе форма, которую видно, но нельзя
 * нажать, — худший из исходов. Лестница раздела: полоса 5, панель 15, сито 20. */
.hs-album-win {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--hs-light-ground);
  animation: fade var(--dur) var(--ease);
}

.hs-album-win-card {
  width: min(1280px, 92vw);
  height: 88vh;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border-radius: var(--r4);
  box-shadow: var(--sh-modal);
  overflow: hidden;
}

.hs-album-win-head {
  display: flex;
  align-items: center;
  gap: var(--s5);
  flex: none;
  padding: var(--s5) var(--s6);
  border-bottom: 1px solid var(--line);
}

.hs-album-sides {
  display: flex;
  gap: var(--s3);
}

.hs-album-win-name {
  flex: 1;
  min-width: 0;
  text-align: right;
  font: 400 var(--t-14) / 1.2 var(--sans);
  color: var(--ink-3);
}

/* Лента вкладок по категориям: превью, имя и счёт. Карточкой, а не строкой
 * текста, — как у источника: у отеля 133659329 девять категорий, и «Другое»
 * от «Общественных зон» словом не отличить, а кадром отличается сразу. */
.hs-album-tabs {
  flex: none;
  display: flex;
  gap: var(--s4);
  overflow-x: auto;
  padding: var(--s5) var(--s6);
  border-bottom: 1px solid var(--line);
}

.hs-album-tab {
  flex: none;
  width: var(--hs-album-tab);
  padding: 0 0 var(--s3);
  border: 1px solid var(--edge-card);
  border-radius: var(--r3);
  background: var(--sunken);
  overflow: hidden;
  cursor: pointer;
  text-align: center;
  transition: border-color var(--dur-fast) var(--ease);
}

.hs-album-tab-shot {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* Имя жмётся, счёт — нет: он и отвечает «сколько там», ради чего вкладку
 * и выбирают. `min-width: 0` обязателен — без него обрезаемое имя не сжимается
 * уже своего текста и выдавливает счёт за карточку. */
.hs-album-tab-name {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--s2);
  padding: var(--s3) var(--s3) 0;
  font: 400 var(--t-14) / 1.2 var(--sans);
  color: var(--ink-2);
}

.hs-album-tab-name > .clip {
  min-width: 0;
}

.hs-album-tab-name > .chip-num {
  flex: none;
}

.hs-album-tab:hover {
  border-color: var(--ink-3);
}

.hs-album-tab[aria-selected="true"] {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.hs-album-tab[aria-selected="true"] .hs-album-tab-name {
  color: var(--accent);
}

.hs-album-win-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--s6);
}

/* Сетка одной категории во всю ширину: колонки якорей больше нет, а вместе
 * с ней и второй колонки под неё. */
.hs-album-cells {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--s4);
}

.hs-album-cell {
  width: 100%;
  aspect-ratio: 3 / 2;
}

/* --- просмотр кадра -------------------------------------------------------- */