/* =====================================================================
   Страница номера (room.html?id=…, глава III) — только то, чего нет в base.css.
   Ритм: крошки и название → крупный кадр 3:2 (колонки 1–8) с колонкой размещения (9–12) →
   узкая колонка описания рядом с волосяными списками → «Другие номера» по одному фото.
   ===================================================================== */

/* Пока номер не пришёл, название не мигает словом «Номер», а стрелка в крошках не указывает в пустоту
   (класс ставит и снимает room.js) */
.is-loading [data-room-title],
.is-loading .crumbs li + li { visibility: hidden; }
/* Без JS номер виден, только если его вписал сервер (<main data-prerendered>, server/lib/prerender.mjs):
   первый кадр, колонка и описание. Полоса превью без JS не работает — её нет */
html:not(.js) [data-room-page]:not([data-prerendered]) .room,
html:not(.js) .room-viewer__bar { display: none; }
.room-nojs .state { grid-column: 2 / span 8; }

/* ---------- Первый экран номера: кадр 3:2 и колонка размещения ---------- */
/* Открытие плотнее, чем у глав: крошки, название и весь кадр 3:2 помещаются в первый экран 1440×900 и 1280×800 */
.room-opener { padding-top: var(--s-7); }
.room-opener .crumbs { margin-bottom: var(--s-4); }
.room-top { margin-top: var(--s-6); align-items: start; }
.room-viewer { grid-column: 1 / span 8; min-width: 0; }
.room-side { grid-column: 9 / span 4; min-width: 0; }

.room-viewer__frame { cursor: zoom-in; touch-action: pan-y; }
.room-viewer__frame.is-empty,
html:not(.js) .room-viewer__frame { cursor: default; }
.room-viewer__frame > img { opacity: 0; transition: opacity .8s var(--ease-out); }
.room-viewer__frame > img.is-active { opacity: 1; }

.room-viewer__bar { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-5); margin-top: var(--s-4); }
.room-viewer__bar--one { justify-content: flex-end; }
/* Полоса превью: под каждым кадром волосяная линия, у текущего — тёмная (как полосы прогресса в карточке) */
.room-thumbs {
  display: flex; gap: 10px; min-width: 0;
  margin: -4px; padding: 4px; overflow-x: auto; scrollbar-width: none;
}
.room-thumbs::-webkit-scrollbar { display: none; }
.room-thumbs li { flex: none; }
.room-thumbs__btn { display: block; width: 96px; padding: 0; border: 0; background: none; cursor: pointer; }
.room-thumbs__img { position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--photo-bg); }
.room-thumbs__img > img, .room-thumbs__img > .media-missing { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.room-thumbs__btn::after {
  content: ""; display: block; height: 1px; margin-top: 8px;
  background: var(--rule-strong); transition: background-color .25s var(--ease-out);
}
.room-thumbs__btn:hover::after { background: var(--ink-3); }
.room-thumbs__btn[aria-current="true"]::after { background: var(--ink); }

.room-viewer__ctrl { display: flex; align-items: center; gap: 8px; flex: none; }
.room-viewer__nav {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--rule-strong); background: none; color: var(--ink);
  transition: background-color .25s var(--ease-out), color .25s var(--ease-out), border-color .25s var(--ease-out);
}
.room-viewer__nav .i { width: 18px; height: 18px; }
.room-viewer__nav:hover { background: var(--ink); border-color: var(--ink); color: var(--paper-hi); }
.room-viewer__full {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; margin-right: 14px; padding: 0;
  border: 0; background: none; color: var(--ink-2);
  font-family: var(--font-sc); font-size: 1rem; letter-spacing: .07em; text-transform: lowercase;
  transition: color .25s var(--ease-out);
}
.room-viewer__full .i { width: 18px; height: 18px; }
.room-viewer__full:hover { color: var(--ink); }

/* Колонка: категория курсивом, волосяной список фактов, бронирование */
.room-side__tag { margin-bottom: var(--s-5); font-size: var(--fs-lead); font-style: italic; line-height: 1.35; color: var(--ink-2); }
.room-facts { border-top: 1px solid var(--rule-strong); }
.room-facts__row {
  display: grid; grid-template-columns: 8.2em minmax(0, 1fr); column-gap: var(--s-4); align-items: baseline;
  padding: 13px 0; border-bottom: 1px solid var(--rule);
}
.room-facts dt { line-height: 1.4; }
.room-facts dd { font-size: 1.125rem; line-height: 1.4; }
.room-facts__line { display: block; }
.room-side__actions { display: grid; justify-items: start; gap: var(--s-5); margin-top: var(--s-6); }
.room-side .state { padding-top: 0; }

/* ---------- Описание рядом с оснащением ---------- */
.room-about { padding-top: clamp(64px, 2.5rem + 4vw, 136px); align-items: start; }
.room-about__text { grid-column: 2 / span 6; }
.room-about__prose { font-size: var(--fs-lead); line-height: 1.55; }
.room-about__prose p { max-width: 29em; }
.room-about__extras { max-width: 26em; }
.room-about__prose + .room-about__extras { margin-top: clamp(40px, 1.5rem + 2vw, 64px); }
.room-about__equip { grid-column: 9 / span 4; }
.room-about .label { margin-bottom: var(--s-3); }

/* ---------- Другие номера: тихие ссылки по одному фото ---------- */
.room-others__title { grid-column: 2 / span 6; margin-bottom: clamp(28px, 1rem + 2vw, 48px); }
.room-others__list { row-gap: var(--s-7); }
.room-others__item { grid-column: span 3; min-width: 0; }
.room-other { display: block; text-decoration: none; }
.room-other__media { display: block; }
.room-other__title { display: block; margin-top: var(--s-3); font-size: 1.25rem; line-height: 1.3; }
.room-other__meta { display: block; margin-top: 2px; font-size: var(--fs-small); color: var(--ink-3); }
.room-other:hover .room-other__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; }
.room-other:focus-visible { outline-offset: 6px; }

/* ---------- Номера нет ---------- */
.room-lost__list { grid-column: 2 / span 7; }
.room-lost__rooms a { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-5); }
.room-lost__meta { font-size: var(--fs-small); color: var(--ink-3); }
.room-lost__rooms a:hover .room-lost__meta { font-style: normal; }
.room-lost__rooms a:hover span:first-child { font-style: italic; }

@media (prefers-reduced-motion: reduce) {
  .room-viewer__frame > img { transition: none; }
}

/* ---------- Адаптив ---------- */
@media (max-width: 1100px) {
  /* колонка справа узкая: подпись над значением, а не рядом */
  .room-facts__row { grid-template-columns: minmax(0, 1fr); row-gap: 2px; padding: 11px 0 12px; }
}
@media (max-width: 900px) {
  .room-facts__row { grid-template-columns: 8.2em minmax(0, 1fr); row-gap: 0; padding: 13px 0; }
  .room-viewer, .room-side, .room-about__text, .room-about__equip, .room-others__title, .room-lost__list, .room-nojs .state { grid-column: 1 / -1; }
  .room-side { margin-top: var(--s-7); }
  .room-about__equip { margin-top: var(--s-8); }
  .room-others__item { grid-column: span 6; }
}
@media (max-width: 640px) {
  /* Название номера короткое: слоги не рвём («Трёхмест-ный» в балансе строк выглядит случайно);
     слово длиннее строки всё равно перенесётся — overflow-wrap из base.css */
  .room-opener .opener__title { -webkit-hyphens: manual; hyphens: manual; }
  .room-viewer__bar { gap: var(--s-4); }
  .room-thumbs { gap: 8px; }
  .room-thumbs__btn { width: 56px; }
  .room-viewer__ctrl { gap: 6px; }
  /* на телефоне «На весь экран» — такой же квадрат, как стрелки, подпись остаётся для скринридера */
  .room-viewer__full { width: 44px; margin: 0; justify-content: center; border: 1px solid var(--rule-strong); color: var(--ink); }
  .room-viewer__full-text { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .room-side__actions .btn { flex: 1 1 100%; }
  .room-others__list { row-gap: var(--s-6); }
  .room-other__title { font-size: 1.125rem; }
}