/* Компоненты. Раскладка и ритм сняты со спеки кита Ventr (docs/kits/),
 * язык формы — со свайп-файла (docs/swipe-file-premium-2026-08-07.md).
 * Цвета берутся только из семантики токенов: ни одного хекса в этом файле.
 */

/* ═══ Шапка ═══
   Лежит поверх героя прозрачной, фон набирает при скролле (класс вешает JS).
   Телефон в шапке — требование обоих брендов: в премиуме звонят чаще, чем
   заполняют форму. */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: var(--s-6);
  padding-block: var(--s-5);
  transition: background var(--dur) var(--ease), backdrop-filter var(--dur) var(--ease);
}

.header--solid {
  background: rgb(0 0 0 / 0.5);
  backdrop-filter: blur(12px);
}

.header__logo {
  display: flex;
  align-items: center;
  margin-right: auto;
  text-decoration: none;   /* логотип бывает ссылкой на главную, подчёркивать его незачем */
  /* запасной вид, если знак не подгрузился: имя бренда шрифтом */
  font-family: var(--font-display);
  font-size: var(--t-h4);
  text-transform: var(--display-case);
  letter-spacing: var(--display-ls);
  hyphens: manual;
  white-space: nowrap;
}

/* ═══ Знак бренда ═══
   Один элемент на оба бренда. Логотип подключён CSS-маской, а не картинкой:
   заливка идёт currentColor, поэтому знак сам принимает цвет текста и работает
   на любом фоне. У Дом Форм это вектор из брендбука, у Челюскинцева растр с
   вырезанной прозрачностью: вектора его логотипа в гайде нет (долг заказчику,
   см. brand/LOGOS.md). В роли маски разница не видна. */
.brand-logo {
  --logo-h: 24px;
  display: block;
  height: var(--logo-h);
  width: calc(var(--logo-h) * var(--logo-ratio));
  background: currentColor;
  -webkit-mask: var(--logo) center / contain no-repeat;
  mask: var(--logo) center / contain no-repeat;
}

/* Без поддержки маски знак стал бы сплошным прямоугольником. Тогда прячем его
   и показываем текстовый запасной вариант. */
@supports not (mask-image: url("#")) {
  .brand-logo {
    display: none;
  }
}

@supports (mask-image: url("#")) or (-webkit-mask-image: url("#")) {
  /* фолбэк прячется в ЛЮБОМ лого-локапе, не только в шапке: в футере правило
     только на .header__logo давало знак и текст разом (ревью П2, 14.08) */
  .header__logo .logo-fallback,
  .footer__logo .logo-fallback {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

@media (max-width: 520px) {
  .brand-logo {
    --logo-h: 18px;
  }
}

.header__nav {
  display: flex;
  gap: var(--s-6);
  font-size: var(--t-small);
}

.header__nav a {
  text-decoration: none;
  color: var(--fg-muted);
  transition: color var(--dur-fast) var(--ease);
}

.header__nav a:hover {
  color: var(--fg);
}

.header__phone {
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  white-space: nowrap;
}

@media (max-width: 860px) {
  .header__nav {
    display: none;
  }
}

/* На 390px имя бренда и телефон вдвоём не помещаются в строку — телефон уезжал
   за край. Оба даём мельче: терять номер нельзя, в премиуме звонят чаще, чем
   пишут. */
@media (max-width: 520px) {
  .header {
    gap: var(--s-4);
  }

  .header__logo {
    font-size: var(--t-lead);
  }

  .header__phone {
    font-size: var(--t-small);
  }
}

/* ═══ Герой ═══
   Правило свайп-файла: первый экран без цифры-оффера. Атмосфера, адрес,
   статус, одно обещание. Цена живёт в каталоге. */
.hero {
  position: relative;
  min-height: 88svh;
  display: flex;
  align-items: flex-end;
  padding-block: var(--s-11);
  isolation: isolate;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Скрим отдельным слоем: на картинку псевдоэлемент не вешается */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--scrim);
}

.hero__inner {
  max-width: 46ch;
  /* Страховка поверх скрима. Рендеры непредсказуемы: закатное небо или
     освещённый фасад могут оказаться ровно под строкой, и градиента не хватит.
     Тень мягкая и широкая — на глаз не читается, но контраст держит. */
  text-shadow: 0 1px 28px rgb(0 0 0 / 0.55);
}

/* Кикер на фото — приглушённый, но не призрачный: --fg-faint (38%) хватает на
   ровном фоне и пропадает на снимке. */
.hero .caption {
  color: var(--fg-muted);
}

/* На узком экране текст идёт во всю ширину, и боковой градиент не спасает —
   усиливаем нижний. */
@media (max-width: 700px) {
  .hero::after {
    background: linear-gradient(180deg, rgb(0 0 0 / 0.5) 0%, rgb(0 0 0 / 0.25) 30%, rgb(0 0 0 / 0.78) 100%);
  }
}

.hero__title {
  font-size: var(--t-display);
  line-height: var(--lh-tight);
}

.hero__sub {
  margin-top: var(--s-5);
  font-size: var(--t-lead);
  color: var(--fg-muted);
  hyphens: manual;   /* «историче-ском» поперёк первого экрана — брак */
}

.hero__actions {
  margin-top: var(--s-8);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
}

/* ═══ Кнопки ═══ */
.btn {
  --btn-pad: var(--s-4) var(--s-7);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  padding: var(--btn-pad);
  border-radius: var(--r-full);
  font-size: var(--t-small);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease);
}

.btn:active {
  transform: translateY(1px);
}

.btn--primary {
  background: var(--accent);
  color: var(--accent-fg);
}

.btn--primary:hover {
  filter: brightness(1.08);
}

.btn--ghost {
  border: 1px solid var(--line-strong);
  color: var(--fg);
}

.btn--ghost:hover {
  border-color: var(--fg);
  background: rgb(255 255 255 / 0.06);
}

/* Пилюля с миниатюрой — из макета сайта «Дом Форм» (брендбук, стр. 12).
   Картинка внутри кнопки показывает, куда ведёт, до клика. */
.btn--thumb {
  --btn-pad: var(--s-2) var(--s-6) var(--s-2) var(--s-2);
  border: 1px solid var(--line-strong);
}

.btn--thumb img {
  width: 36px;
  height: 36px;
  border-radius: var(--r-full);
  object-fit: cover;
}

/* Круглая стрелка вместо кнопки — приём Sminex. Тихий CTA для премиума,
   где «оставьте заявку» отталкивает. */
.btn--circle {
  width: 56px;
  height: 56px;
  padding: 0;
  border: 1px solid var(--line-strong);
}

.btn--circle:hover {
  background: var(--accent);
  color: var(--accent-fg);
  border-color: var(--accent);
}

/* ═══ Карточка лота ═══ */
/* про [hidden] vs display:flex — глобальное правило в base.css (смоук П3.3) */
.lot {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  text-decoration: none;
  color: inherit;
}

.lot__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--bg-elev);
}

.lot__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease);
}

.lot:hover .lot__media img {
  transform: scale(1.04);
}

.lot__badge {
  position: absolute;
  top: var(--s-4);
  left: var(--s-4);
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-full);
  background: rgb(0 0 0 / 0.55);
  backdrop-filter: blur(8px);
  font-size: var(--t-caption);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

.lot__title {
  font-family: var(--font-text);
  font-size: var(--t-h4);
  font-weight: 500;
}

.lot__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  font-size: var(--t-small);
  color: var(--fg-muted);
}

.lot__price {
  font-size: var(--t-h4);
  margin-top: var(--s-2);
}

.lot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--s-8) var(--s-7);
}

/* ═══ Чипы фильтра ═══ */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

.chip {
  padding: var(--s-3) var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  font-size: var(--t-small);
  color: var(--fg-muted);
  transition: all var(--dur-fast) var(--ease);
}

.chip:hover {
  border-color: var(--line-strong);
  color: var(--fg);
}

.chip[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-fg);
}

/* ═══ Спек-таблица ═══
   Ventr «Details»: строки с разделителем 1px, метка слева, значение справа. */
.specs {
  display: grid;
  gap: var(--s-4);
}

.specs__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-5);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--line);
}

.specs__key {
  color: var(--fg-muted);
  font-size: var(--t-small);
}

.specs__val {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ═══ Карточка формы ═══
   Ventr «Inquiry Form»: радиус 32, паддинг 24, тонкая рамка. */
.form-card {
  padding: var(--s-6);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--bg-elev);
}

.field {
  display: grid;
  gap: var(--s-2);
}

.field label {
  font-size: var(--t-small);
  color: var(--fg-muted);
}

.field input,
.field textarea,
.field select {
  padding: var(--s-4);
  /* --field-border, не --line: контур поля обязан держать ≥3:1 (WCAG 1.4.11),
     у --line 14% всего ~1.5:1 — поймано гейтом check-premium-ds.mjs 14.08 */
  border: 1px solid var(--field-border);
  border-radius: var(--r-md);
  background: transparent;
  transition: border-color var(--dur-fast) var(--ease);
}

.field input:hover,
.field textarea:hover {
  border-color: var(--fg-muted);
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--fg-faint);
}

/* ═══ FAQ ═══
   На <details>: работает без единой строки JS, доступно с клавиатуры,
   раскрыто для поисковика. */
.faq__item {
  border-bottom: 1px solid var(--line);
}

.faq__item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-5);
  padding-block: var(--s-6);
  cursor: pointer;
  font-size: var(--t-h4);
  list-style: none;
}

.faq__item summary::-webkit-details-marker {
  display: none;
}

.faq__item summary::after {
  content: "+";
  flex: none;
  font-size: var(--t-h3);
  color: var(--accent);
  transition: transform var(--dur) var(--ease);
}

.faq__item[open] summary::after {
  transform: rotate(45deg);
}

.faq__item > p {
  padding-bottom: var(--s-6);
  color: var(--fg-muted);
  max-width: 70ch;
}

/* ═══ Переключатель объектов ═══
   Приём FORMA: карточки проектов в углу первого экрана. Решает задачу
   «два объекта, один трафик», не размывая бренд каждого. */
.switcher {
  display: flex;
  gap: var(--s-4);
  flex-wrap: wrap;
}

.switcher__item {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-3);
  padding-right: var(--s-6);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: rgb(0 0 0 / 0.35);
  backdrop-filter: blur(10px);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease);
}

.switcher__item:hover {
  border-color: var(--accent);
}

.switcher__item img {
  width: 56px;
  height: 56px;
  border-radius: var(--r-md);
  object-fit: cover;
}

.switcher__name {
  font-family: var(--font-display);
  text-transform: var(--display-case);
  letter-spacing: var(--display-ls);
}

.switcher__from {
  font-size: var(--t-small);
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
}

/* Кадр с подписью в ленте — для фич-крючков и фотоотчётов (v2 главной Ч5, разбор
   бренд-ленда 14.08: продукт продают существительные под кадром, не спек-таблица).
   Обёртка перенимает флекс-поведение кадра, сам кадр внутри неё живёт блоком. */
.gallery__item-wrap {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

.gallery__item-wrap .gallery__item {
  scroll-snap-align: none;
}

.gallery__caption {
  margin-top: var(--s-3);
  font-size: var(--t-body);
}

.gallery__caption .muted {
  display: block;
  font-size: var(--t-small);
}

/* ═══ Дисклеймер ═══
   Легал прячем в тон, но не в невидимость: гард запрещает кредитные цифры
   без ставки и срока рядом. */
.disclaimer {
  font-size: var(--t-caption);
  line-height: 1.45;
  color: var(--fg-faint);
  max-width: 80ch;
}

/* ═════════════════════════════════════════════════════════════════════════
   НОВЫЕ КОМПОНЕНТЫ (П2-сборка, 14.08.2026)
   Спеки: premium/ds/tz-p2-build.md. Цвета — только через семантику токенов.
   ═════════════════════════════════════════════════════════════════════════ */

/* ═══ 1. Подвал (.footer) ═══
   Сквозной подвал всех страниц. На десктопе раскладывается в 3 зоны: знак бренда,
   две колонки навигационных ссылок и контактный телефон справа. Внизу — дисклеймер
   застройщика и ссылка на обработку данных. На мобильных устройствах (≤700px)
   перестраивается в вертикальный стек с увеличенным зазором. */
.footer {
  border-top: 1px solid var(--line);
  padding-block: var(--s-10);
  background: var(--bg);
}

.footer__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--s-8);
  margin-bottom: var(--s-8);
}

.footer__logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  font-family: var(--font-display);
  font-size: var(--t-h4);
  text-transform: var(--display-case);
  letter-spacing: var(--display-ls);
  hyphens: manual;
  white-space: nowrap;
}

.footer__nav {
  display: flex;
  gap: var(--s-8);
}

.footer__col {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  font-size: var(--t-small);
}

.footer__col a {
  color: var(--fg-muted);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}

.footer__col a:hover {
  color: var(--fg);
}

.footer__phone {
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  white-space: nowrap;
}

.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--s-6);
  border-top: 1px solid var(--line);
  padding-top: var(--s-6);
}

.footer__legal {
  font-size: var(--t-caption);
  white-space: nowrap;
  color: var(--fg-muted);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}

.footer__legal:hover {
  color: var(--fg);
}

@media (max-width: 700px) {
  .footer__top {
    flex-direction: column;
    gap: var(--s-6);
  }

  .footer__nav {
    flex-direction: column;
    gap: var(--s-6);
  }

  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-4);
  }
}

/* ═══ 2. Планировка на «бумаге» (.lot__media--plan, .plan-panel) ═══
   Архитектурные планы и чертежи отдаются с прозрачным фоном и тёмными линиями.
   На тёмном фоне сайта они становятся невидимыми. Подложка --paper имитирует
   белую/светлую бумагу, на которой чертёж сохраняет исходный контраст, а
   подписи и метки выводятся через --paper-fg. */
.lot__media--plan {
  background: var(--paper);
  color: var(--paper-fg);
}

.lot__media--plan img {
  object-fit: contain;
  padding: var(--s-6);
}

.plan-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--s-6);
  border-radius: var(--r-card);
  background: var(--paper);
  color: var(--paper-fg);
  overflow: hidden;
}

.plan-panel img {
  max-width: 100%;
  height: auto;
  max-height: 380px;
  object-fit: contain;
  padding: var(--s-6);
}

.plan-panel__caption {
  margin-top: var(--s-4);
  font-size: var(--t-small);
  color: var(--paper-fg);
  text-align: center;
}

/* ═══ 3. Горизонтальная лента галереи (.gallery) ═══
   Горизонтальный скролл с привязкой кадров (scroll-snap) для фоторяда объекта
   и страницы лота. Оверфлоу изолирован строго внутри контейнера ленты, чтобы не
   создавать горизонтальный скролл страницы на узких экранах. Полоса прокрутки
   скрыта для эстетики, управление колесом и свайпом сохранено. */
.gallery {
  display: flex;
  gap: var(--s-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--s-2);
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.gallery::-webkit-scrollbar {
  display: none;
}

.gallery__item {
  flex: 0 0 auto;
  width: clamp(260px, 60vw, 560px);
  aspect-ratio: 3 / 2;
  border-radius: var(--r-card);
  overflow: hidden;
  scroll-snap-align: start;
  background: var(--bg-elev);
}

.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ═══ 4. Хлебные крошки (.crumbs) ═══
   Навигационная цепочка пути (каталог → лот). Ссылки приглушены в --fg-muted,
   разделитель «·» добавляется псевдоэлементом ::after у всех элементов, кроме
   последнего. Текущий элемент не является ссылкой и выделен основным цветом --fg. */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-small);
  line-height: var(--lh-body);
}

.crumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-1);
  list-style: none;
  padding: 0;
  margin: 0;
}

.crumbs__item {
  display: inline-flex;
  align-items: center;
}

.crumbs__item:not(:last-child)::after {
  content: "·";
  margin-left: var(--s-2);
  color: var(--fg-faint);
}

.crumbs a {
  color: var(--fg-muted);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}

.crumbs a:hover {
  color: var(--fg);
}

.crumbs__current,
.crumbs [aria-current="page"] {
  color: var(--fg);
}

/* ═══ 5. Боевая шапка секции (.section-head) ═══
   Единая типографическая композиция для контентных секций: надзаголовочный кикер
   .caption, дисплейный заголовок h2 и вводный абзац .lead с ограничением ширины. */
.section-head {
  display: grid;
  gap: var(--s-3);
  margin-bottom: var(--s-8);
}

.section-head .lead {
  max-width: 62ch;
}

/* ═══ 6. Пустая выдача каталога (.catalog-empty) ═══
   Информационный блок нулевого результата фильтрации. Предлагает сброс фильтров
   или персональный подбор лота без тупика в сценарии выбора. */
.catalog-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--s-10);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  gap: var(--s-4);
  background: var(--bg-elev);
}

.catalog-empty__title {
  font-family: var(--font-text);
  font-size: var(--t-h4);
  font-weight: 500;
}

.catalog-empty__text {
  color: var(--fg-muted);
  max-width: 48ch;
}

.catalog-empty__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  justify-content: center;
  margin-top: var(--s-4);
}

/* ═══ 7. Ошибка поля формы (.field--error, .field__error) ═══
   Модификатор состояния невалидного ввода. Подсвечивает границу поля токеном --error
   и выводит поясняющую строку ошибки кеглем --t-small. */
.field--error input,
.field--error textarea,
.field--error select {
  border-color: var(--error);
}

.field--error input:hover,
.field--error textarea:hover {
  border-color: var(--error);
}

.field__error {
  font-size: var(--t-small);
  color: var(--error);
}

/* Страховка контраста контура полей на приподнятом фоне (.form-card):
   на фоне --bg-elev белое стекло 42% гарантирует выполнение WCAG 1.4.11
   (контраст границы ≥3:1). */
.form-card .field input,
.form-card .field textarea,
.form-card .field select {
  border-color: rgb(255 255 255 / 0.42);
}

/* ═══ 8. Занятый лот / бронь (.lot--booked) ═══
   Статус забронированного лота. Изображение приглушается полупрозрачностью (0.55),
   но текст карточки (заголовок, метры, цена) не приглушается для сохранения
   нормативного контраста и читаемости в каталоге. */
.lot--booked .lot__media img {
  opacity: 0.55;
}

.lot--booked:hover .lot__media img {
  transform: none;
}

/* ═══ 9. Карточка офиса продаж (.contact-card) ═══
   Двухколоночный блок для раздела контактов: изображение карты слева и контактные
   данные (телефон крупно, таблица деталей .specs) справа. На экранах ≤900px
   схлопывается в одну колонку. */
.contact-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-8);
  padding: var(--s-8);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--bg-elev);
}

@media (min-width: 900px) {
  .contact-card {
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
  }
}

.contact-card__map {
  position: relative;
  border-radius: var(--r-card);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--bg);
}

.contact-card__map img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.contact-card__info {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
}

.contact-card__phone {
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}

/* ═══ 10. Баннер тест-контура (.rev-banner) ═══
   Служебная полоса сверху страницы для непубличных сборок тест-контура.
   Полоска --bg-elev, текст --t-caption и --fg-muted, выравнивание по центру. */
.rev-banner {
  background: var(--bg-elev);
  color: var(--fg-muted);
  font-size: var(--t-caption);
  text-align: center;
  padding: var(--s-2) var(--s-4);
}



/* ═══ 11. Honeypot формы (.hp) ═══
   Поле-приманка name="company" уводится за экран (НЕ display:none — автозаполнялки
   ботов такие пропускают реже). Сервер флагует заполнивших (_suspect, R-076). */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Нулевая высота поля-приманки: боты читают DOM, а не рендер, зато гейт
   тач-целей (O) не считает невидимый input интерактивной целью */
.hp input {
  height: 0;
  padding: 0;
  border: 0;
}