/* Фитнес-клубы на карте подбора: метка клуба и его карточка в углу карты.
 *
 * Цвет и отступ — общими токенами (`tokens.css`), цвет итога — теми же тройками
 * состояний, что у чипов сита (`--ok-*`, `--warn-*`): «прошёл» у клуба и у зала
 * отеля обозначены одним цветом.
 */

/* --- метка ----------------------------------------------------------------- */

/* Круг, залитый цветом итога, с белым значком зала. Не чёрный: чёрным на этой
 * карте стоят плашки цен, и клуб читался бы ещё одним отелем. Не белый с кольцом:
 * так было в первой версии, и на боевом среди 142 отелей Мёндона клуб
 * терялся на светлой подложке — читалась одна подпись (11.10.2026). */
.pin.is-club {
  width: 24px;
  height: 24px;
  background: var(--ok-ink);
  color: var(--card);
}

.pin.is-club.is-tone-warn {
  background: var(--warn-ink);
}

/* Наведение и выбор — акцентом, как у всякого пина: правило цвета выше
 * стоит позже общего `.pin:hover` и иначе его перебивало бы. */
.pin.is-club:hover,
.pin.is-club.is-on {
  background: var(--accent);
}

/* Тесная карта ужимает пины в точку 18 px (`components.css`), а клуб — нет:
 * на тесной карте отелей больше сорока, и клуб нужен ровно там, чтобы найти
 * его среди них. Клубов на район — единицы, тесноты они не добавляют. */
.map.is-dense .pin.is-club {
  width: 24px;
  height: 24px;
}

.map.is-dense .pin.is-club > svg {
  width: 14px;
  height: 14px;
}

/* Клуб — справка к кандидатам, поэтому под плашками цен, а не поверх: цена
 * отеля — то, ради чего на карту смотрят. Открытый клуб поднимается. */
.map-point:has(.pin.is-club) {
  z-index: 0;
}

.map-point:has(.pin.is-club.is-on) {
  z-index: 3;
}

/* --- карточка -------------------------------------------------------------- */

/* В левом нижнем углу карты, а не панелью справа: панель отеля закрывает
 * карту, а клуб открывают, чтобы видеть его рядом с отелями. */
.hs-club {
  position: absolute;
  left: var(--s6);
  bottom: var(--s6);
  z-index: 6;
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  width: 320px;
  max-width: calc(100% - 2 * var(--s6));
  padding: var(--s5);
  border: 1px solid var(--edge-card);
  border-radius: var(--r3);
  background: var(--card);
  box-shadow: var(--sh-float);
}

.hs-club-head {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
}

.hs-club-name {
  margin: 0;
  font: 600 var(--t-15) / 1.25 var(--sans);
  color: var(--ink);
}

.hs-club-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s5);
  font-size: var(--t-13);
  color: var(--ink-2);
}

.hs-club-said {
  margin: 0;
  font: 400 var(--t-13) / 1.4 var(--sans);
  color: var(--ink-2);
}

.hs-club-said.is-ok b {
  color: var(--ok-ink);
}

.hs-club-said.is-warn b {
  color: var(--warn-ink);
}

/* Три кадра в ряд квадратами: по ним видно, тот ли это зал, раньше, чем
 * по баллу. Пустой слот держит место — промах не сдвигает ссылку ниже. */
.hs-club-shots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s2);
}

.hs-club-shot {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--r2);
  background: var(--fill);
  object-fit: cover;
}

.hs-club .btn {
  align-self: flex-start;
}