/* =====================================================================
   Номера (rooms.html, глава III) — только то, чего нет в base.css.
   Ритм: открытие главы (заголовок и лид) → крупные пластины номеров в две колонки
   со ступенькой → таблица «номер целиком или место» с тихой строкой о ценах.
   ===================================================================== */

/* ---------- Строка «Гостей: все 1 2 … 6» — радиокнопки, набранные цифрами, без коробок ---------- */
.rooms-filter { margin: 0 0 clamp(36px, 1rem + 2.4vw, 64px) var(--hang); }   /* по линии текста главы, как разделы галереи */
.rooms-filter__set { min-width: 0; margin: 0; padding: 0; border: 0; }
.rooms-filter__row { display: flex; flex-wrap: wrap; align-items: center; column-gap: 6px; }
.rooms-filter__label { margin-right: 14px; }
.rooms-filter__opt {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px;
  cursor: pointer;
}
.rooms-filter__opt span {
  padding: 0 2px 3px;
  border-bottom: 1px solid transparent;
  font-size: 1.25rem; line-height: 1.2; color: var(--ink-2);
  transition: color .25s var(--ease-out), border-color .25s var(--ease-out);
}
.rooms-filter__opt:hover span { color: var(--ink); border-bottom-color: var(--rule-strong); }
.rooms-filter__opt input:checked + span { color: var(--ink); border-bottom-color: var(--ink); }
.rooms-filter__opt input:focus-visible + span { outline: 2px solid var(--terracotta); outline-offset: 5px; }

/* ---------- Пластины: две колонки со ступенькой, крупнее, чем на главной ----------
   Карточки и «Оснащение» идут по очереди: нечётные — слева (колонки 1–5), чётные — справа (8–12) ниже на ступеньку. */
.rooms-grid { row-gap: clamp(72px, 2.5rem + 4vw, 136px); }
.rooms-grid > .room-card,
.rooms-grid > .rooms-equip { grid-column: 1 / span 5; }
.rooms-grid > .room-card:nth-child(even),
.rooms-grid > .rooms-equip:nth-child(even) { grid-column: 8 / span 5; margin-top: clamp(0px, 9vw, 152px); }
.rooms-grid .room-card__text { max-width: 25em; }

/* «Оснащение номеров» — текстовая пластина: заголовок в кегле названий номеров и волосяной список с иконками */
.rooms-equip { min-width: 0; }
.rooms-equip__lead { margin: var(--s-3) 0 var(--s-6); max-width: 25em; color: var(--ink-2); }
.rooms-grid > .state,
.rooms-grid__fallback { grid-column: 2 / span 8; }
/* Пока номера не пришли, место под пластины занято — таблица ниже не прыгает */
html.js .rooms-grid.is-pending { min-height: 90vh; align-content: start; }

/* ---------- Номер целиком или спальное место ---------- */
.modes__text { grid-column: 2 / span 5; }
.modes__text .h2 { max-width: 8.5em; margin-bottom: var(--s-6); margin-right: calc(-1 * var(--hang)); }  /* заходит в пустую 7-ю колонку: «место» не остаётся одно (как .beds на главной) */
.modes__prose { max-width: 26em; color: var(--ink-2); }
.modes__side { grid-column: 8 / span 5; }
.modes__note { margin-top: var(--s-6); max-width: 24em; font-size: var(--fs-small); font-style: italic; line-height: 1.45; color: var(--ink-3); }
.modes__side .link { margin-top: var(--s-4); }

/* ---------- Адаптив ---------- */
@media (max-width: 900px) {
  /* ≤ 900: две колонки без ступенек (design-system §4) */
  .rooms-grid { row-gap: var(--s-8); }
  .rooms-grid > .room-card:nth-child(n),
  .rooms-grid > .rooms-equip:nth-child(n) { grid-column: span 6; margin-top: 0; }
  .rooms-filter { margin-left: 0; }
  .rooms-grid > .state, .rooms-grid__fallback, .modes__text, .modes__side { grid-column: 1 / -1; }
  .modes__side { margin-top: var(--s-8); }
  .modes__text .h2 { margin-right: 0; }
}
@media (max-width: 640px) {
  .rooms-grid > .room-card:nth-child(n),
  .rooms-grid > .rooms-equip:nth-child(n) { grid-column: 1 / -1; }
  .rooms-filter__label { flex-basis: 100%; margin: 0 0 2px; }
  .rooms-filter__row { margin-left: -10px; }   /* цифры по краю текста: поле касания шире самой цифры */
  .rooms-filter__label { margin-left: 10px; }
}