/*
  Витрина: РАСКЛАДКА экрана одного дома. Второй и последний уровень: список → дом.

  Кнопка, свойства и панель подборки здесь НЕ ОПИСАНЫ — они в komponenty.css
  и showcase.css, одни на всю витрину. Здесь только то, что есть у одной этой
  страницы: шапка с возвратом, название, вводная строка, цена, разделы.

  ТОКЕНЫ — ТОЛЬКО ИЗ tema.css. Ни одного цвета, радиуса, шрифта или длительности
  литералом. Значения нет в системе — сначала правка design/design-system.md.
*/

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0 var(--kraya) env(safe-area-inset-bottom);
  background: var(--fon);
  color: var(--tekst);
  font: var(--font-tekst);
  font-feature-settings: "tnum" 1;
  /* Как в core: тонкое сглаживание, без него системный шрифт на светлом стекле жирнит */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Сцена под всем — та же, что в ленте (showcase.css) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--scena);
  pointer-events: none;
}

.chislo { font-family: var(--shrift-cifry); font-variant-numeric: tabular-nums; }

@media (min-width: 700px) {
  body { max-width: var(--kolonka); margin: 0 auto; }
  .dom-tekst { padding: var(--otstup-24) var(--otstup-24) var(--otstup-12); }
}

/* Шапка с возвратом «‹ Все дома» — общий компонент, komponenty.css */

/* Запас снизу под панель подборки ставит komponenty.css на body — пока панель видна. */

/*
  ГАЛЕРЕЯ: одна крупная, остальные превью, планировка последней
  (partials/galereya.ejs; design-system, раздел 8, 16.09.2026).
*/
.galereya { margin-bottom: var(--otstup-24); }

/* Скрытые крупные кадры: hidden слабее display у .kadr, поэтому правило явное */
.galereya-kadr[hidden] { display: none; }

/*
  ОДНА РАМКА У ВСЕХ КАДРОВ — решение владельца 16.09.2026 («один размер у всех кадров,
  без разнобоя»). Крупный кадр всегда 16:10 и не выше 45% высоты экрана, что бы в нём
  ни стояло: фото — с обрезкой, как обложка в ленте; планировка — целиком, по центру,
  на светлом листе. Рамка не меняет высоту при выборе превью, и страница не прыгает.
  Под кадром видно имя и плитки без прокрутки (исследование core, раздел 4.2).
*/
.galereya-glavnyy .kadr-polnyy {
  aspect-ratio: 16 / 10;
  max-height: 45svh;
}

.galereya-glavnyy .kadr-polnyy picture img {
  height: 100%;
  max-height: none;
  object-fit: cover;
}

/* Планировка — документ: в той же рамке, целиком, без обрезки; ссылка ниже открывает её во весь размер */
.galereya-glavnyy .kadr-plan picture img {
  object-fit: contain;
}

/* Превью сеткой по четыре — не каруселью: свайп у края закрывает мини-приложение */
.galereya-prevyu {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--otstup-8);
  margin: var(--otstup-8) 0 0;
  padding: 0;
  list-style: none;
}

.prevyu {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: var(--liniya-1) solid var(--karta-liniya);
  border-radius: var(--skruglenie-knopki);
  background: var(--liniya);
  box-shadow: var(--ten);
}

.prevyu img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.prevyu-plan { background: var(--karta); }
.prevyu-plan picture img { object-fit: contain; }

/* Текущее превью — кольцо акцента внутрь, без сдвига соседей (та же роль, что «вы здесь») */
.prevyu[aria-current="true"] {
  border-color: var(--akcent);
  box-shadow: inset 0 0 0 1px var(--akcent);
}

@media (hover: hover) {
  .prevyu:not([aria-current="true"]):hover { border-color: var(--granica); }
}

.prevyu:focus-visible {
  outline: var(--liniya-2) solid var(--akcent);
  outline-offset: var(--otstup-4);
}

/* Кнопка «крупнее» на кадре — матовая, в правом верхнем углу рамки, тач-цель 44 */
.galereya-glavnyy { position: relative; }

.galereya-razvernut:not([hidden]) {
  position: absolute;
  top: var(--otstup-12);
  right: var(--otstup-12);
  display: grid;
  place-items: center;
  width: var(--tach);
  height: var(--tach);
  padding: 0;
  color: var(--tekst);
  background: var(--pole-fon);
  -webkit-backdrop-filter: var(--steklo-malo);
  backdrop-filter: var(--steklo-malo);
  border: 0;
  border-radius: var(--skruglenie-pilyuli);
  box-shadow: var(--ten-badzha);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.galereya-razvernut:focus-visible {
  outline: var(--liniya-2) solid var(--akcent);
  outline-offset: 2px;
}

/*
  Просмотр во весь экран: диалог системы без полей и рамки, тёмное затемнение,
  кадр целиком по центру. Страница остаётся на месте — это окно поверх неё.
*/
.galereya-prosmotr {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.galereya-prosmotr::backdrop { background: rgb(0 0 0 / .9); }

.galereya-prosmotr-vnutri {
  display: grid;
  place-items: center;
  height: 100%;
  padding: 0;
}

.galereya-prosmotr-kadr {
  max-width: 100vw;
  max-height: 100dvh;
  object-fit: contain;
}

.galereya-prosmotr-zakryt {
  top: calc(var(--otstup-12) + env(safe-area-inset-top));
  color: var(--karta-plotnaya);
  background: rgb(255 255 255 / .16);
  border-radius: var(--skruglenie-pilyuli);
}

/* Планировки нет — сказано словами, а не пустой плиткой */
.galereya-net {
  margin: 0 0 var(--otstup-24);
  font: var(--font-podpis);
  color: var(--tusklyy);
}

/* Чего нет — о том сказано словами, а не пустой рамкой */
.dom-net {
  margin: 0;
  color: var(--tusklyy);
}

/* Название дома на своей странице — заголовок экрана (раздел 2) */
.dom-imya {
  margin: 0;
  font: var(--font-imya);
  letter-spacing: var(--trekking-imeni);
  text-wrap: balance;
}

/* Строка, по которой дом узнаётся до всех таблиц: что это и где стоит */
.dom-vvodnaya {
  margin: var(--otstup-8) 0 0;
  font: var(--font-vvodnaya);
  color: var(--tusklyy);
}

/* Цена и дата прайса — всегда вместе (И12) */
.dom-cena {
  margin: var(--otstup-24) 0 0;
  padding-top: var(--otstup-16);
  border-top: var(--liniya-1) solid var(--liniya);
}

.dom-cena-chislo {
  display: block;
  font: var(--font-cena);
  color: var(--akcent);
}

.dom-cena-data {
  display: block;
  font: var(--font-cifry);
  color: var(--tusklyy);
}

/* Действие — сразу под ценой, в первом экране телефона вместе с названием */
.dom-deystvie { margin-top: var(--otstup-24); }
/* Слова о сбое отметки — под кнопкой; пусто — строки нет (.podborka-skazano:empty) */
.dom-deystvie-sboy { margin-top: var(--otstup-12); }

.dom-razdel { margin-top: var(--otstup-48); }

/*
  ОПИСАНИЕ И МАТЕРИАЛЫ — в стеклянной панели, как в core: там markdown карточки лежит
  в .g-панели, а у каждого заголовка раздела слева стоит вертикальный маркер
  (.kb-doc h2::before). Текст на голой сцене читался как черновик; в панели — как раздел.
*/
.dom-tekst {
  padding: var(--otstup-16) var(--otstup-16) var(--otstup-8);
  background: var(--karta);
  -webkit-backdrop-filter: var(--steklo);
  backdrop-filter: var(--steklo);
  border: var(--liniya-1) solid var(--karta-liniya);
  border-radius: var(--skruglenie-karty);
  box-shadow: var(--ten), var(--ten-blik);
}

.dom-tekst .dom-zagolovok {
  position: relative;
  padding-left: var(--otstup-16);
}

/* Маркер раздела — полоска акцента слева, как у core, только без градиента (раздел 6) */
.dom-tekst .dom-zagolovok::before {
  content: "";
  position: absolute;
  left: 0;
  top: var(--otstup-4);
  bottom: var(--otstup-4);
  width: var(--otstup-4);
  border-radius: var(--skruglenie-pilyuli);
  background: var(--akcent);
}

.dom-tekst .dom-zagolovok:not(:first-child) { margin-top: var(--otstup-32); }

.dom-abzac {
  margin: 0 0 var(--otstup-12);
  max-width: 60ch;
  font: var(--font-tekst);
}

.dom-spisok {
  margin: 0 0 var(--otstup-12);
  padding-left: var(--otstup-24);
  max-width: 60ch;
  font: var(--font-tekst);
}

.dom-spisok li { margin-bottom: var(--otstup-8); }

.dom-podzagolovok {
  margin: var(--otstup-16) 0 var(--otstup-8);
  font: var(--font-podpis-zhirnaya);
}

.dom-zagolovok {
  margin: 0 0 var(--otstup-16);
  font: var(--font-imya);
}

/*
  АНИМАЦИИ здесь не описаны: №1 (отметка) и №2 (панель подборки) живут в
  komponenty.css вместе с кнопкой и панелью, №3 (фото) — там же, рядом с кадром.
*/