/* =========================================================================
   Лучший Сезон — фундамент стилей (Фаза 3)

   ВАЖНО про ресет. Контур официально запрещает на сайте глобальные
   селекторы `* {}` и `div {}` — иначе не гарантирует работу виджета
   и снимает поддержку (см. 03-kontur-widget.md). Поэтому здесь:
     - нет ни одного `*` и ни одного голого `div`;
     - нормализация элементов живёт только внутри `.site` через :where();
     - элементы `.kontur-host` и порталов `.react-ui` исключены из
       нормализации, чтобы сохранить собственные стили виджета.
   ========================================================================= */

/* ---------- Токены ---------- */
:root {
  color-scheme: only light;
  /* Мобильные декоративные фоны (≤699 px): none убирает их со всех страниц. */
  --bg-pattern-mobile-display: block;
  /* Палитра из макетов Figma (канвас COMPONENTS) */
  --c-cream:        #F7F0E6;  /* основной фон */
  --c-olive:        #847F57;  /* акцент, ТОЛЬКО крупный текст и фоны */
  /* Оливковый, затемнённый до контраста ровно 4.5 с кремовым. Нужен
     везде, где на оливковом фоне стоит обычный текст: кремовый на
     макетном #847F57 даёт 3.6 и не проходит п. 10.13 ТЗ. На глаз от
     макетного не отличается. */
  --c-olive-dark:   #746F4C;
  --c-terra:        #9B5026;  /* акцент действия, кнопки, ссылки */
  --c-dark:         #494949;  /* основной текст */
  --c-deep:         #3A3C15;  /* заголовки, тёмные секции */
  --c-white:        #FFFFFF;
  /* Подложки со страницы дома: поля поиска и карточки-факты. Взяты из
     выгрузки макета, к прежней палитре не сводятся. */
  --c-sand:         #E6DFD1;  /* поля дат, чипы, плитки удобств */
  --c-blush:        #E9D8CA;  /* карточки-факты, развёрнутое описание */
  --c-peach:        #FDF0E4;  /* полоса выбранного диапазона в календаре */
  --c-peach-strong: #F9B98A;  /* края диапазона, кнопки счётчиков */
  --c-hover:        #EFEFEF;  /* наведение на день календаря */
  --c-muted:        #9A9A9A;  /* дни недели, подписи под счётчиками */
  --c-faded:        #C9C9C9;  /* дни соседних месяцев и прошедшие */

  /* Прозрачные заливки из макетов — идут с рамкой 1px тёмно-серым */
  --c-olive-soft:   #847F574D;
  --c-terra-soft:   #9B50264D;
  --c-dark-soft:    #4949494D;
  --c-border:       var(--c-dark);

  /* Семантика: пользуемся этими именами, не сырыми цветами */
  --bg:             var(--c-cream);
  --bg-deep:        var(--c-deep);
  --text:           var(--c-dark);
  --text-heading:   var(--c-deep);
  --text-on-dark:   var(--c-cream);
  --accent:         var(--c-terra);
  --accent-hover:   #7F401E;
  --header-shadow:  0 4px 20px rgba(0, 0, 0, .15);

  /* Типографика. Локальные Montserrat, Etude Noire и Inter — см. fonts.css. */
  --font-heading: "Etude Noire", ui-serif, Georgia, serif;
  --font-body:    "Montserrat", "Montserrat Rub", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Нижняя строка подвала набрана в макете Inter (@font-face в fonts.css) */
  --font-ui:      "Inter", "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Значения сняты из выгрузки всех слоёв макета (css all layers main desktop).
     Основной текст в макете — Montserrat 18/22, это и есть базовый кегль.
     Межстрочный по макету 1.22, а не 100%: цифра «100%» в инспекторе
     относилась к отдельному слою, массово в макете 1.20–1.25. */
  --fs-base: 1.125rem;      /* 18px */
  --lh-base: 1.22;          /* 22/18 */
  --lh-heading: 1.06;       /* 95/90 у h1, 42/40 у h2 */

  --fs-small: 1rem;         /* 16/20 — подписи, мета */
  --fs-lead: 1.25rem;       /* 20/24 */
  --fs-sub: 1.5rem;         /* 24/29, Montserrat 600 */

  /* Шкала отступов */
  /* Зазоры в макете кратны 10: чаще всего 10, 20, 40 и 60 */
  --s-1: 6px;
  --s-2: 10px;
  --s-3: 14px;
  --s-4: 20px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 40px;
  --s-8: 60px;
  --s-9: 91px;

  /* Скругления из макета: 10px основное, 20px крупное, 100px пилюли */
  --radius: 10px;
  --radius-lg: 20px;
  --radius-pill: 100px;

  /* Ширина контейнера снята инспектором по трём независимым секциям
     («Наши домики», «Наша территория», «Ответы на вопросы»): у каждой
     Left 100px и Width 1240px при фрейме 1440. Раньше здесь стояло
     1360px из выгрузки всех слоёв — вся страница была на 120px шире
     макета. */
  --container: 1240px;
  --gutter: 100px;
  --container-narrow: 760px;

  /* Вертикальный ритм из макета. Внутренний зазор снят инспектором
     (Gap 60px у всех трёх секций), внешний вычислен из координат:
     «Наши домики» Top 2684.13 + Height 1175 = 3859.13, а «Наша
     территория» начинается на 3979.13. Разница ровно 120px. */
  --section-gap-inner: 60px;
  --section-gap-outer: 120px;

  /* Минимальный размер интерактивного элемента — п. 10.13 ТЗ */
  --tap-min: 44px;
}

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

/* box-sizing на html сам по себе ничего не даёт: наследуется он только
   через `*`, а `*` запрещён Контуром. Поэтому элементы, у которых мы
   задаём ширину вместе с внутренними полями, перечислены явно. Без
   этого кнопка с width:100% и полями 40px вылезала за экран. */
.site :where(div, section, article, aside, header, footer, nav, ul, ol, li,
             p, h1, h2, h3, h4, h5, h6, a, button, input, select, textarea,
             figure, blockquote, details, summary, span, picture, img):not(:where(.kontur-host *, .react-ui, .react-ui *)) {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
}

/* ---------- Скоупленная нормализация ---------- */
.site :where(h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd):not(:where(.kontur-host *, .react-ui, .react-ui *)) {
  margin: 0;
}

/* Длинные русские слова в крупных заголовках не влезают в узкий экран:
   «бронирования» на 375px требует 366px при доступных 335. Переносим по
   слогам — у документа lang="ru", браузер знает правила переноса,
   а break-word оставляем на случай, если словарь недоступен. */
.site :where(h1, h2, h3, h4, h5, h6):not(:where(.kontur-host *, .react-ui, .react-ui *)) {
  hyphens: auto;
  overflow-wrap: break-word;
}
.site :where(h1, h2, h3, h4, h5, h6):not(:where(.kontur-host *, .react-ui, .react-ui *)) {
  font-family: var(--font-heading);
  line-height: var(--lh-heading);
  color: var(--text-heading);
  text-wrap: balance;
}

/* Верхняя граница — размеры из макета (h1 90px, h2 44px),
   нижняя подобрана так, чтобы на 360px заголовок не разъезжался. */
/* Верхние границы — размеры макета: h1 90/95 Etude Noire 500,
   h2 40/42 Etude Noire 400. Нижние подобраны так, чтобы на 360px
   заголовок не разъезжался. */
.site :where(h1):not(:where(.kontur-host *, .react-ui, .react-ui *)) {
  font-size: clamp(2.5rem, 1.4rem + 5vw, 5.625rem);
  font-weight: 500;
  line-height: 1.06;
}
.site :where(h2):not(:where(.kontur-host *, .react-ui, .react-ui *)) {
  font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
  font-weight: 400;
  line-height: 1.05;
}
.site :where(h3):not(:where(.kontur-host *, .react-ui, .react-ui *)) {
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  font-weight: 600;
  font-family: var(--font-body);
  line-height: 1.21;
}

.site :where(ul, ol):not(:where(.kontur-host *, .react-ui, .react-ui *)) { margin: 0; padding-left: 1.25em; }

.site :where(img, picture, video, canvas, svg):not(:where(.kontur-host *, .react-ui, .react-ui *)) {
  display: block;
  max-width: 100%;
  height: auto;
}

.site :where(button, input, select, textarea):not(:where(.kontur-host *, .react-ui, .react-ui *)) {
  font: inherit;
  color: inherit;
}

.site :where(a):not(:where(.kontur-host *, .react-ui, .react-ui *)) {
  color: var(--accent);
  text-underline-offset: 0.15em;
}

@media (hover: hover) and (pointer: fine) {
.site :where(a:hover):not(:where(.kontur-host *, .react-ui, .react-ui *)){ color: var(--accent-hover); }
}


.site :where(p + p):not(:where(.kontur-host *, .react-ui, .react-ui *)) { margin-top: var(--s-4); }
/* Заголовок и следующий за ним абзац стояли вплотную: сброс margin
   снимает отступ у обоих, а правило было только для пары абзацев. */
.site :where(h1, h2, h3):not(:where(.kontur-host *, .react-ui, .react-ui *)) + :where(p, ul, ol) { margin-top: var(--s-4); }

/* Фокус виден всегда — п. 10.13 ТЗ, работа с клавиатуры */
.site :where(a, button, input, select, textarea, summary):not(:where(.kontur-host *, .react-ui, .react-ui *)):focus-visible {
  outline: 3px solid var(--c-terra);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---------- Раскладка ---------- */
.container {
  width: min(100% - 2 * var(--s-4), var(--container));
  margin-inline: auto;
}
.container--narrow { max-width: var(--container-narrow); }

/* Вертикальный ритм по инспектору: между соседними секциями ровно
   120px. Половина отступа лежит на каждой секции, поэтому сумма
   соседних полей и даёт 120. Раньше здесь стояло 91px, подобранное
   на глаз, — страница шла с другим шагом, чем макет. */
.section { padding-block: var(--s-8); }
@media (min-width: 768px) {
  .section { padding-block: calc(var(--section-gap-outer) / 2); }
}

.section--deep {
  background: var(--bg-deep);
  color: var(--text-on-dark);
}
.section--deep :where(h1, h2, h3, h4, h5, h6) { color: var(--text-on-dark); }

/* Место под фоновый SVG-паттерн.
   Паттерн приклеен к своей секции: едет вместе с ней при скролле,
   не имеет собственного движения и не наезжает на текст.
   Сам файл вставляется в --pattern, когда Настя передаст исходники. */
.section--pattern {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.section--pattern > .section__pattern {
  position: absolute;
  z-index: -1;
  inset-block: 0;
  inline-size: min(60%, 640px);
  pointer-events: none;
  opacity: 0.35;
}
.section--pattern > .section__pattern--right { inset-inline-end: 0; }
.section--pattern > .section__pattern--left  { inset-inline-start: 0; }
@media (max-width: 767px) {
  /* На узком экране места под рисунок нет — решение подтвердить с Настей */
  .section--pattern > .section__pattern { display: none; }
}

/* ---------- Кнопки ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 52px;
  /* Состояния кнопок.svg: строка 24px + поля 13px + рамка 1px. */
  padding: 13px 39px;
  font-size: 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-weight: 400;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.btn--primary {
  background: var(--c-terra);
  color: var(--c-cream);
}

.btn--outline {
  background: transparent;
  border-color: var(--c-border);
  color: var(--c-dark);
}

/* ---------- Шапка ---------- */
.header {
  border-bottom: 1px solid var(--c-dark-soft);
  background: var(--bg);
}
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: 72px;
}
.header__logo { font-family: var(--font-heading); font-size: 1.25rem; text-decoration: none; color: var(--text-heading); }

.nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  text-decoration: none;
  color: var(--c-dark);
}
/* В макете активный и наведённый пункт подчёркнут, а не перекрашен.
   Подчёркивание рисуем отступя от текста, иначе оно липнет к буквам. */
.nav__link[aria-current="page"],
.nav__item--has-children:focus-within > .nav__link{
  color: var(--c-dark);
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
}
@media (hover: hover) and (pointer: fine) {
.nav__link:hover,
.nav__item--has-children:hover > .nav__link{
  color: var(--c-dark);
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
}
}


/* Вес и кегль телефона заданы ниже, по инспектору: 400, 16px */
.header__phone { text-decoration: none; white-space: nowrap; }

/* Мобильное меню — раскрытие на <details>, без своего JS */
.nav--mobile { display: none; }
@media (max-width: 899px) {
  .nav--desktop { display: none; }
  /* Именно [open]: браузер прячет содержимое закрытого <details> сам,
     но `display: block` возвращало его в поток. Пункты меню при этом
     были шире экрана и растягивали страницу — горизонтальная прокрутка
     появлялась на пустом месте, хотя меню никто не открывал.
     Ошибка была латентной и вылезла при первой же правке ширин. */
  .nav-toggle[open] .nav--mobile { display: block; }
  .nav--mobile .nav__list { flex-direction: column; gap: var(--s-2); padding-block: var(--s-4); }

  /* Шапка не влезала в 390px: логотип, телефон и кнопка «Забронировать
     даты» в сумме давали 589px, и вся страница получала горизонтальную
     прокрутку. Кнопку убираем — точку входа на мобильном закрывает
     липкая кнопка снизу (точка входа №6 таблицы п. 5.1 ТЗ). */
  .header__aside .btn { display: none; }
  .header__bar { flex-wrap: nowrap; gap: var(--s-2); }
  .header__aside { gap: var(--s-2); min-width: 0; }
  .header__phone { font-size: 0.875rem; }

  /* В мобильном меню подразделы выводятся обычным списком (.nav__sublist),
     а не выпадающим: наведение мышью на телефоне не работает. */
  .nav--mobile .nav__sublist {
    margin: var(--s-2) 0 var(--s-3);
    padding-left: var(--s-4);
    list-style: none;
    display: grid;
    gap: var(--s-2);
  }
}
@media (max-width: 480px) {
  /* На самых узких экранах телефон уводим в меню, оставляя лапку */
  .header__phone { display: none; }
}

/* ---------- Подвал ---------- */
/* Своей заливки у подвала нет — в макете он на фоне страницы, кремовом.
   Раньше он был тёмно-зелёным, это расходилось с макетом. */
.footer {
  margin-top: var(--s-8);
  padding-block: var(--s-8);
  color: var(--text);
}
.footer :where(a) { color: var(--text); text-decoration: none; }

@media (hover: hover) and (pointer: fine) {
.footer :where(a:hover){ color: var(--c-terra); text-decoration: underline; }
}

.footer__grid {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.footer__legal {
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid transparent;
  background: linear-gradient(90deg,
    rgba(73, 73, 73, .1), rgba(73, 73, 73, .5) 50%,
    rgba(73, 73, 73, .1)) center top / min(1200px, 100%) 1px no-repeat;
  font-size: 0.875rem;
}

/* ---------- Служебное ---------- */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: var(--s-4);
  top: calc(-1 * var(--tap-min) - var(--s-4));
  z-index: 100;
  padding: var(--s-3) var(--s-4);
  background: var(--c-terra);
  color: var(--c-cream);
  transition: top 0.15s ease;
}
.skip-link:focus { top: var(--s-4); color: var(--c-cream); }

/* Список элементов перечислен явно: `*` здесь использовать нельзя,
   даже под .site — он дотянулся бы до разметки виджета Контура. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .site :where(a, button, .btn, .nav__link, .skip-link, .section__pattern, img, picture) {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.footer__credits {
  margin-top: var(--s-3);
  font-size: 0.8125rem;
  color: var(--c-dark);
}

/* =========================================================================
   Главная (Фаза 4)
   ========================================================================= */

/* ---------- Первый экран ---------- */
.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  /* По макету первый экран центрирован по вертикали и горизонтали,
     а не прижат к нижнему краю. */
  align-items: center;
  /* Созвон 04.09: «чтобы первый экран был первым экраном, вообще на
     весь экран» — Настя. Отменяет прежние 877px с эталона макета.
     svh, а не vh: на телефонах панель браузера иначе режет экран. */
  min-height: 100svh;
  padding-block: var(--s-8) var(--s-7);
  color: var(--c-cream);
  text-align: center;
}

/* Затемнение под текстом первого экрана.
   В макете заголовок оливковый, и это работает только потому, что за
   ним тёмная фотография: оливковый на нашем фоне даёт 2.81 — ниже
   порога 3.0 даже для крупного текста. Редактор может загрузить любой
   снимок, в том числе светлый, поэтому читаемость нельзя оставлять
   на волю картинки. Подложка не светлее #141414 даёт 4.5 с запасом. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
    ellipse 70% 55% at 50% 52%,
    rgba(12, 14, 10, 0.82) 0%,
    rgba(12, 14, 10, 0.62) 45%,
    rgba(12, 14, 10, 0.28) 75%,
    transparent 100%
  );
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  background: var(--c-deep);
}
.hero__media::after {
  /* Затемнение: без него белый текст не проходит по контрасту
     на светлых кадрах — п. 10.13 ТЗ требует 4.5:1 */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(58,60,21,0.25) 0%, rgba(58,60,21,0.75) 100%);
}

.hero__slide {
  position: absolute;
  inset: 0;
}
.hero__slide picture,
.hero__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Слайд-шоу на CSS, без JavaScript: скрипт на первом экране утяжелил бы
   LCP, а скорость на мобильных — предмет приёмки (п. 1.2 ТЗ).
   Наборы кадров описаны отдельно, потому что проценты в @keyframes
   не считаются через var(). */
.hero__slide:not(:first-child) { opacity: 0; }

.hero__media[data-count="3"] .hero__slide {
  animation: hero-fade-3 21s infinite;
  animation-delay: calc(var(--i) * 7s);
  opacity: 0;
}
.hero__media[data-count="4"] .hero__slide {
  animation: hero-fade-4 28s infinite;
  animation-delay: calc(var(--i) * 7s);
  opacity: 0;
}
.hero__media[data-count="5"] .hero__slide {
  animation: hero-fade-5 35s infinite;
  animation-delay: calc(var(--i) * 7s);
  opacity: 0;
}

@keyframes hero-fade-3 {
  0%, 33.33% { opacity: 1; }
  38.33%, 95% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes hero-fade-4 {
  0%, 25% { opacity: 1; }
  30%, 95% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes hero-fade-5 {
  0%, 20% { opacity: 1; }
  25%, 95% { opacity: 0; }
  100% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__media[data-count] .hero__slide { animation: none !important; opacity: 0; }
  .hero__media[data-count] .hero__slide:first-child { opacity: 1; }
}

.hero__inner {
  position: relative;
  /* В макете группа «заголовок + подзаголовок + полоса поиска» стоит
     чуть ниже центра первого экрана — замер по эталону даёт +37px. */
  transform: translateY(37px);
}
@media (min-width: 900px) {
  .page-home .hero::before { background: none; }
  .page-home .hero__media::after { background: rgba(0, 0, 0, 0.5); }
  /* Центр группы макета переносим на экран 900px: +20px от фрейма 860px. */
  .page-home .hero__inner { transform: translateY(-11.5px); }
}
/* Цвет заголовка из макета — оливковый, не кремовый. Читаемость
   обеспечена затемнением .hero::before, см. комментарий выше. */
.hero__title { color: var(--c-olive); }
.hero__subtitle {
  /* Центрируем сам блок, а не только текст: без auto по бокам
     ограничение ширины прижало бы подзаголовок влево. */
  max-width: 60ch;
  margin: var(--s-4) auto 0;
  font-size: 1.125rem;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-4);
  margin-top: var(--s-4);
}
.hero .hero__links { justify-content: center; }
.btn--on-media {
  border-color: var(--c-cream);
  color: var(--c-cream);
  background: rgba(247, 240, 230, 0.08);
}

/* ---------- Карточки ---------- */
.cards {
  display: grid;
  gap: var(--s-5);
  margin: 0 0 var(--s-6);
  padding: 0;
  list-style: none;
  grid-template-columns: 1fr;
}
@media (min-width: 600px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .cards { grid-template-columns: repeat(3, 1fr); } }

.card {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.card__link { text-decoration: none; color: inherit; display: block; }
.card__link picture { border-radius: var(--radius-lg); overflow: hidden; }
.card__title { margin-top: var(--s-3); }

@media (hover: hover) and (pointer: fine) {
.card__link:hover .card__title{ color: var(--c-terra); }
}

.card__meta { font-size: 0.9375rem; opacity: 0.85; }

.card--quote blockquote { margin: 0; }
.card--quote p { font-style: italic; }

/* ---------- Двухколоночный блок ---------- */
/* В макете текстовая колонка «О нас» шириной 572px стоит слева,
   фото — справа. Ширина колонки взята из инспектора Figma. */
.split {
  display: grid;
  gap: var(--s-7);
  align-items: center;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 572px 1fr; }
  .split__text { order: 1; }
  .split__media { order: 2; }
}
.split__media picture { border-radius: var(--radius-lg); overflow: hidden; }

.center { text-align: center; }

/* ---------- Липкая кнопка на мобильном ----------
   Точка входа №6 из таблицы п. 5.1 ТЗ: появляется после прокрутки
   первого экрана, не перекрывает контент и не мешает прокрутке. */
.sticky-cta {
  position: fixed;
  z-index: 20;
  inset-inline: var(--s-4);
  bottom: var(--s-4);
  display: none;
  opacity: 0;
  transform: translateY(120%);
  /* Одной прозрачности мало: невидимая кнопка всё равно ловит нажатия и
     попадает в обход по Tab. На мобильном она висит у нижнего края, то
     есть гость может нажать «Забронировать», не видя кнопки. Убираем её
     из разметки по-настоящему, пока первый экран не ушёл. */
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s 0.2s;
  box-shadow: 0 6px 24px rgba(73, 73, 73, 0.35);
}
.sticky-cta[data-visible="true"] {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

@media (max-width: 899px) {
  .sticky-cta { display: inline-flex; }
  /* Запас снизу, чтобы кнопка не накрывала конец страницы */
  .footer { padding-bottom: calc(var(--s-7) + var(--tap-min)); }
}
@media (prefers-reduced-motion: reduce) {
  .sticky-cta { transition: none; }
}

/* =========================================================================
   Страницы домов (Фаза 5)
   ========================================================================= */

/* ---------- Первый экран внутренней страницы ----------
   Ниже главной: на внутренней странице пользователь пришёл за содержимым,
   и полноэкранная картинка только отодвигала бы его вниз. */
.page-hero,
.house-hero {
  position: relative;
  isolation: isolate;
  padding-block: var(--s-7);
}
@media (min-width: 768px) {
  .page-hero,
  .house-hero { padding-block: var(--s-8); }
}

.page-hero--media,
.house-hero--media {
  display: grid;
  align-items: end;
  min-height: min(58svh, 520px);
  color: var(--c-cream);
}
.page-hero--media :where(h1, h2, h3),
.house-hero--media :where(h1, h2, h3) { color: var(--c-cream); }
.page-hero--media :where(a),
.house-hero--media :where(a) { color: var(--c-cream); }

.page-hero__media,
.house-hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  background: var(--c-deep);
}
.page-hero__media picture,
.page-hero__media img,
.house-hero__media picture,
.house-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Затемнение: без него светлый кадр не даёт кремовому тексту 4.5:1 — п. 10.13 ТЗ */
.page-hero__media::after,
.house-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(58, 60, 21, 0.3) 0%, rgba(58, 60, 21, 0.8) 100%);
}

.page-hero__inner,
.house-hero__inner { position: relative; }

.page-hero__intro { max-width: var(--container-narrow); margin-top: var(--s-4); }

.house-hero__eyebrow {
  margin-bottom: var(--s-3);
  font-size: 0.9375rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.house-hero__lead {
  max-width: 52ch;
  margin-top: var(--s-4);
  font-size: 1.125rem;
}

.house-hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-3);
  margin-top: var(--s-5);
  padding: 0;
  list-style: none;
  font-size: 0.9375rem;
}
.house-hero__facts > li {
  padding: var(--s-1) var(--s-3);
  border: 1px solid currentColor;
  border-radius: 999px;
}

.house-hero .booking-cta { margin-top: var(--s-6); }

/* ---------- Галерея ---------- */
.gallery {
  display: grid;
  gap: var(--s-3);
  margin: 0;
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 600px) { .gallery { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .gallery { grid-template-columns: repeat(4, 1fr); } }

/* Первый кадр крупнее: даёт галерее композицию вместо ровной сетки плиток */
@media (min-width: 600px) {
  .gallery__item:first-child {
    grid-column: span 2;
    grid-row: span 2;
  }
}

/* ---------- Мозаика фото на странице домика ----------
   Инспектор (фрейм «Фото» страницы «The First»): большой кадр 609×365
   слева, четыре по 294×172 сеткой справа, зазоры 21px.
   609 + 22 + 294 + 21 + 294 = 1240 — ровно ширина контейнера.
   Доли, а не пиксели: на узких экранах раскладка ужимается целиком. */
@media (min-width: 900px) {
  .gallery--house {
    grid-template-columns: 609fr 294fr 294fr;
    grid-auto-rows: 1fr;
    gap: 21px;
    aspect-ratio: 1240 / 365;
  }
  .gallery--house .gallery__item:first-child {
    grid-column: 1;
    grid-row: span 2;
  }
  .gallery--house .gallery__item { min-height: 0; }
  .gallery--house .gallery__link { aspect-ratio: auto; height: 100%; }
  /* В SVG крупные фото домов 1 и 3 имеют вертикальное смещение 40% и 54%. */
  .page-house--domik-1 .house-mosaic__item:first-child img { object-position: center 40%; }
  .page-house--domik-3 .house-mosaic__item:first-child img { object-position: center 54%; }
}

.gallery__link {
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
  aspect-ratio: 1;
}
.gallery__link picture,
.gallery__link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s ease;
}

@media (hover: hover) and (pointer: fine) {
.gallery__link:hover img{ transform: scale(1.04); }
}


/* Свёрнутое состояние ставит скрипт: без JS показываются все кадры сразу,
   иначе часть галереи была бы недоступна. */
.gallery[data-collapsed="true"] .gallery__item--rest { display: none; }

.gallery__more { margin-top: var(--s-5); }

/* ---------- Фотогалерея: мозаика по координатам макета ----------
   Единственная секция главной во всю ширину фрейма (1440), а не в
   контейнере 1240 — так в макете. Плитки расставлены абсолютно по
   замерам инспектора: доли считаны от фрейма 1440x1290, поэтому
   композиция сохраняется на любой ширине экрана.
   Повёрнутые на -90 узлы записаны уже в экранных величинах. */
.section--gallery > .photo-mosaic { max-width: 1440px; margin-inline: auto; }
.photo-mosaic {
  position: relative;
  aspect-ratio: 1440 / 1290;
}
.photo-mosaic__tiles { margin: 0; padding: 0; list-style: none; }
.photo-mosaic__item {
  position: absolute;
  overflow: hidden;
  border-radius: var(--radius);   /* 10px, замер плиток */
}
.photo-mosaic__item picture,
.photo-mosaic__item img,
.photo-mosaic__item .ph {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* В первом кадре макета чашка крупнее и сдвинута влево и вниз.
   Остальные плитки и мобильную раскладку не меняем. */
@media (min-width: 1000px) {
  .page-home .photo-mosaic__item:first-child img {
    object-position: center 81%;
    transform: translateX(-6.5%) scale(1.15);
  }
}
/* В макете кадров ровно девять, остальные уводим на страницу галереи */
.photo-mosaic__item:nth-child(n + 10) { display: none; }
.photo-mosaic__item:nth-child(1) { left: 0.0%; top: 0.0%; width: 34.7222%; height: 19.3798%; }
.photo-mosaic__item:nth-child(2) { left: 38.8889%; top: 5.5814%; width: 24.3056%; height: 19.3798%; }
.photo-mosaic__item:nth-child(3) { left: 67.3611%; top: 0.0%; width: 28.4722%; height: 19.3798%; }
.photo-mosaic__item:nth-child(4) { left: 0.0%; top: 24.031%; width: 15.2778%; height: 44.186%; }
.photo-mosaic__item:nth-child(5) { left: 82.6389%; top: 24.031%; width: 17.3611%; height: 34.8837%; }
.photo-mosaic__item:nth-child(6) { left: 79.8611%; top: 63.5659%; width: 15.9722%; height: 27.1318%; }
.photo-mosaic__item:nth-child(7) { left: 58.3333%; top: 68.2171%; width: 17.3611%; height: 31.0078%; }
.photo-mosaic__item:nth-child(8) { left: 19.4444%; top: 72.8682%; width: 34.7222%; height: 19.3798%; }
.photo-mosaic__item:nth-child(9) { left: 0.0%; top: 72.8682%; width: 15.2778%; height: 27.1318%; }

/* Текст стоит в свободной середине мозаики. Границы блока взяты по
   просветам между плитками (220..1190 по горизонтали, 310..880 по
   вертикали), сам блок инспектором не мерился. */
/* Блок замерен: 756x303 в точке x=327, y=443 внутри фрейма 1440x1290.
   Раньше стоял по центру на глаз — заголовок вылезал за колонку */
.photo-mosaic__text {
  position: absolute;
  left: 22.7083%;   /* 327 / 1440 */
  top: 34.3411%;    /* 443 / 1290 */
  width: 52.5%;     /* 756 / 1440 */
  text-align: center;
}
.photo-mosaic__text .section__lead {
  width: 89.1534%;  /* 674 / 756 */
  margin-inline: auto;
}
@media (min-width: 1000px) {
  /* Заголовок в макете — одна строка ровно по ширине блока (756px) */
  .photo-mosaic__text .section__title { white-space: nowrap; }
}
.photo-mosaic__text .section__title { margin: 0 0 20px; font-weight: 500; color: #847F57; }
.photo-mosaic__text .section__lead { margin: 0 auto 40px; font-size: 20px; line-height: 24px; color: #494949; }
.photo-mosaic__text > p:last-child { margin: 0; }
.photo-mosaic__text .btn { width: 201px; height: 52px; min-height: 52px; padding: 13px 39px; border: 1px solid #9B5026; border-radius: 100px; font-size: 20px; line-height: 24px; font-weight: 400; color: #494949; }
@media (min-width: 1440px) {
  .photo-mosaic__text .section__title { font-size: 90px; line-height: 95px; }
}
@media (min-width: 1000px) and (max-width: 1439px) {
  .photo-mosaic__text .section__title { font-size: 6.25vw; line-height: 1.055556; }
  .photo-mosaic__text .section__lead { font-size: 1.388889vw; line-height: 1.2; }
}

/* Раскладку макета держим только на десктопе: мобильная мозаика не
   мерилась, и растягивать девять абсолютных плиток вслепую нельзя */
@media (max-width: 999px) {
  .photo-mosaic__text .section__lead br { display: none; }
  .photo-mosaic { aspect-ratio: auto; }
  .photo-mosaic__tiles {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-3);
  }
  .photo-mosaic__item {
    position: static;
    aspect-ratio: 1;
  }
  .photo-mosaic__item:nth-child(n + 10) { display: block; }
  .photo-mosaic__text {
    position: static;
    left: auto;
    top: auto;
    width: auto;
    margin-bottom: var(--s-5);
  }
}
@media (min-width: 700px) and (max-width: 999px) {
  .photo-mosaic { display: flex; flex-direction: column; }
  .photo-mosaic__text .section__lead br { display: initial; }
  .photo-mosaic__text { order: 0; padding-inline: 24px; margin-bottom: 32px; }
  .photo-mosaic__tiles {
    order: 1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    padding-inline: 20px;
  }
  .photo-mosaic__item:nth-child(n) {
    position: static;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
  }
}

/* ---------- Отзывы Яндекса ---------- */
.yandex-reviews {
  background: var(--c-cream);
}
.yandex-reviews__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 608px);
  align-items: center;
  gap: clamp(32px, 5vw, 80px);
}
.yandex-reviews__intro {
  min-width: 0;
  max-width: 480px;
}
.yandex-reviews .yandex-reviews__title {
  margin: 0 0 24px;
  color: var(--c-terra);
  font-family: var(--font-heading);
  font-size: clamp(36px, 4.2vw, 60px);
  font-weight: 500;
  line-height: 1.1;
}
.yandex-reviews__text {
  margin: 0 0 32px;
  max-width: 390px;
  color: var(--c-dark);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.55;
}
.yandex-reviews .yandex-reviews__link {
  max-width: 100%;
  box-sizing: border-box;
  padding: 14px 24px;
  color: var(--c-terra);
  font-size: 16px;
  line-height: 1.4;
  text-align: center;
  white-space: normal;
}
.yandex-reviews__shell {
  min-width: 0;
  padding: 24px;
  border-radius: var(--radius-lg);
  background: var(--c-sand);
}
.yandex-reviews__widget {
  position: relative;
  width: 100%;
  max-width: 560px;
  height: 640px;
  margin-inline: auto;
  overflow: hidden;
}
.yandex-reviews__frame {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  background: var(--c-white);
}
.yandex-reviews__attribution {
  position: absolute;
  bottom: 8px;
  left: 0;
  box-sizing: border-box;
  width: 100%;
  max-height: 14px;
  padding: 0 16px;
  overflow: hidden;
  color: #b3b3b3;
  font: 10px/14px "YS Text", sans-serif;
  text-align: center;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 999px) {
  .yandex-reviews__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
  .yandex-reviews__intro {
    max-width: 560px;
    margin-inline: auto;
    text-align: center;
  }
  .yandex-reviews__text { margin-inline: auto; }
  .yandex-reviews__shell {
    box-sizing: border-box;
    width: 100%;
    max-width: 608px;
    margin-inline: auto;
  }
}
@media (max-width: 479px) {
  .yandex-reviews__layout { width: calc(100% - 24px); }
  .yandex-reviews__shell { padding: 8px; border-radius: 16px; }
  .yandex-reviews .yandex-reviews__title { font-size: 36px; }
  .yandex-reviews__text { font-size: 16px; }
}
@media (max-width: 339px) {
  .yandex-reviews__layout { width: calc(100% - 16px); }
  .yandex-reviews__shell { padding: 2px; border-radius: 10px; }
}

/* ---------- Отзывы о домике ----------
   Инспектор (Frame 2087326587 на странице «The First»): три колонки по
   397px с зазором 24, фото 397×220 сверху, под ним 20px до текста.
   Цвета сняты с выгрузки макета: заголовок #9B5026, текст #494949. */
.reviews__title {
  text-align: center;
  color: var(--c-terra);
}
.reviews {
  display: grid;
  gap: 24px;
  margin: var(--s-6) 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 900px) {
  .reviews { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.reviews__item { display: flex; flex-direction: column; }
.reviews__media { margin-bottom: 20px; }
.reviews__media picture,
.reviews__media img {
  display: block;
  width: 100%;
  aspect-ratio: 397 / 220;
  object-fit: cover;
  border-radius: var(--radius);
}
.reviews__text { margin: 0; color: var(--c-dark); }
.reviews__text p { margin: 0; }
/* Имя автора прижато вправо — так в макете */
.reviews__author {
  margin-top: var(--s-3);
  text-align: right;
  color: var(--c-dark);
}

/* ---------- Просмотрщик фото ---------- */
.lightbox {
  width: min(96vw, 1200px);
  max-width: none;
  max-height: 94svh;
  padding: var(--s-4);
  border: none;
  border-radius: var(--radius-lg);
  background: var(--c-deep);
  color: var(--c-cream);
  overflow: hidden;
}
.lightbox::backdrop { background: rgba(58, 60, 21, 0.9); }

.lightbox__image {
  touch-action: pan-y;
  width: 100%;
  max-height: 78svh;
  margin-inline: auto;
  object-fit: contain;
}
.lightbox__caption {
  margin-top: var(--s-3);
  text-align: center;
  font-size: 0.9375rem;
  min-height: 1.5em;
}

.lightbox__close,
.lightbox__nav {
  position: absolute;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  border: 1px solid rgba(247, 240, 230, 0.4);
  border-radius: 999px;
  background: rgba(58, 60, 21, 0.6);
  color: var(--c-cream);
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
.lightbox__close:hover,
.lightbox__nav:hover{ background: var(--c-terra); border-color: var(--c-terra); }
}


.lightbox__close { top: var(--s-3); right: var(--s-3); font-size: 1.5rem; }
.lightbox__nav { top: 50%; transform: translateY(-50%); }
.lightbox__nav--prev { left: var(--s-3); }
.lightbox__nav--next { right: var(--s-3); }

/* ---------- Описание ---------- */
.prose :where(p + p, ul, ol) { margin-top: var(--s-4); }
.prose :where(li + li) { margin-top: var(--s-2); }

/* ---------- Характеристики ---------- */
.specs {
  display: grid;
  gap: var(--s-4);
  margin: 0;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.specs__item {
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--c-dark-soft);
  border-radius: var(--radius);
  background: var(--c-olive-soft);
}
.specs__item dt {
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.8;
}
.specs__item dd {
  margin: var(--s-2) 0 0;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  line-height: 1.15;
  color: var(--text-heading);
}
.specs__note {
  margin-top: var(--s-4);
  font-size: 0.9375rem;
  opacity: 0.85;
}

/* ---------- Что входит ---------- */
/* Инспектор («Развернутое описание»): подложка #985026 15%, скругление
   10px, поля 20px сверху и снизу, 32px по бокам. Колонка группы 320px,
   зазор между пунктами 16px. */
.amenities {
  display: grid;
  gap: 32px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  padding: 20px 32px;
  border-radius: 10px;
  background: rgba(152, 80, 38, 0.15);
}
/* Заголовок группы: Montserrat 600 / 20px. Межстрочный 1.2, а не 1:
   узел «Сауна» 24px высотой при кегле 20 — панель снова пишет «100%»,
   но это Auto (см. _meta.ловушка_line_height в реестре). */
.amenities__title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.2;
  color: var(--c-dark);
}
.amenities__list {
  margin: var(--s-3) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 16px;
}
/* Пункт: Montserrat 400 / 20px / 24px, #494949 */
.amenities__item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.2;
  color: var(--c-dark);
}
.icon {
  display: block;
  flex: none;
  width: 24px;
  height: 24px;
  color: inherit;
}

/* ---------- Карточка в каталоге ---------- */
.card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-top: auto;
  padding-top: var(--s-3);
}
.price {
  font-family: var(--font-heading);
  font-size: 1.375rem;
  color: var(--text-heading);
}
.price__unit { font-family: var(--font-body); font-size: 0.9375rem; opacity: 0.8; }

.btn--sm {
  min-height: var(--tap-min);
  padding: var(--s-2) var(--s-4);
  font-size: 0.9375rem;
}

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

@media (hover: hover) and (pointer: fine) {
.gallery__link:hover img{ transform: none; }
}

}

/* =========================================================================
   Довеска к Фазе 5: недостающие блоки п. 4.1.6 и п. 9.2.2 ТЗ
   ========================================================================= */

/* ---------- Полоса поиска на каталоге домов ----------
   Визуально поля, технически одна кнопка — виджет Контура не принимает
   даты при инициализации, настоящие инпуты были бы ловушкой. */
.searchbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-3);
  /* Кнопка сжимается по содержимому, поэтому justify-content внутри неё
     ничего не двигает — центрировать нужно саму кнопку. Без auto по бокам
     полоса поиска прижималась к левому краю и на главной, и в каталоге. */
  width: fit-content;
  margin-top: var(--s-6);
  margin-inline: auto;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.searchbar__field {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: var(--s-3) var(--s-5);
  border-radius: 999px;
  background: rgba(247, 240, 230, 0.14);
  border: 1px solid rgba(247, 240, 230, 0.4);
  color: var(--c-cream);
  font-size: 0.9375rem;
}
.searchbar__cta { border-radius: 999px; }

/* ---------- Компактный блок «Как добраться» на странице дома ---------- */
.directions {
  display: grid;
  gap: var(--s-5);
  align-items: center;
  padding: var(--s-6);
  border-radius: var(--radius-lg);
  background: var(--c-olive-soft);
  border: 1px solid var(--c-dark-soft);
}
@media (min-width: 900px) { .directions { grid-template-columns: 1fr auto; } }
.directions__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin: 0; }

/* =========================================================================
   Блоки главной по макету (разбор состава — 04-makety-figma.md)
   ========================================================================= */

/* Значения сняты из инспектора Figma по заголовку «О нас»:
   Etude Noire 500, 90px, межстрочный 100%, цвет #847F57.
   Это тот же кегль, что и у h1 первого экрана — в макете заголовки
   секций и заголовок героя одного размера.
   Контраст оливкового на кремовом 3.6 при норме 3.0 для крупного
   текста (от 18.66px) — проходит с запасом, но только для крупного:
   тем же цветом нельзя набирать обычный текст (п. 10.13 ТЗ).
   Нижняя граница clamp подобрана так, чтобы на 360px не разъезжалось. */
.section__title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(2.5rem, 1.2rem + 5.8vw, 5.625rem);
  line-height: 1;
  color: var(--c-olive);
  /* 60px — зазор между заголовком секции и содержимым. Инспектор дал
     Gap 60px у всех трёх измеренных секций, значит это правило, а не
     частный случай. */
  margin-bottom: var(--section-gap-inner);
}
/* В макете часть заголовков секций стоит по центру («Наши домики»,
   «Интересное рядом», «Ответы на вопросы»), часть — по левому краю
   («Наша территория», «Фотогалерея»). Это не случайность, а разметка. */
.section__title--center { text-align: center; }
.section__title--center + .section__lead { margin-inline: auto; text-align: center; }
.section__lead { max-width: 60ch; margin-bottom: var(--s-5); }

/* ---------- Блок «О нас»: фото и текст ---------- */
/* В макете абзацы этого блока набраны крупнее базовых 18px: в колонке
   572px помещается около 46 знаков в строку — это 20px, то есть уже
   заведённый токен --fs-lead. */
.split__text p { font-size: var(--fs-lead); line-height: 1.32; }

.split__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-5);
}

/* ---------- Блок-цитата ---------- */
/* Правила блока-цитаты переехали ниже, в раздел «Главная: блоки по
   макету». Здесь они остались от прежней версии и конфликтовали:
   старый padding-left в 91px растягивал колонку и давал
   горизонтальную прокрутку на мобильном. */

/* ---------- Слоган ---------- */
/* Слоган в макете стоит на общем кремовом фоне, без полосы-подложки */
.slogan {
  padding-block: var(--s-8);
  text-align: center;
}
.slogan p {
  margin: 0;
  font-family: var(--font-heading);
  /* Оливковый по контрасту годится только на крупном кегле — п. 10.13 ТЗ */
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem);
  line-height: 1.2;
  color: var(--c-deep);
}

/* ---------- Карточки домов ---------- */
@media (min-width: 600px) { .cards--houses { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .cards--houses { grid-template-columns: repeat(2, 1fr); } }

.card__body { display: flex; flex-direction: column; gap: var(--s-2); }
.card__price { font-weight: 600; font-size: 1.125rem; }
.card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-3);
}

/* ---------- Карточки «Интересное рядом» ---------- */
@media (min-width: 900px) { .cards--nearby { grid-template-columns: repeat(3, 1fr); } }

.card--nearby picture { border-radius: var(--radius-lg); overflow: hidden; }
.card__number {
  font-family: var(--font-heading);
  font-size: 2rem;
  line-height: 1;
  color: var(--c-terra);
}

/* ---------- Мозаика: территория и фотогалерея ---------- */
.mosaic {
  display: grid;
  gap: var(--s-4);
  margin: 0 0 var(--s-6);
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 700px) { .mosaic { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .mosaic { grid-template-columns: repeat(4, 1fr); } }
/* Замер десктопа главной: от низа фрейма «Наша территория» до заголовка
   «Интересное рядом» ровно 120 (60 + 60 на полях секций). Собственный
   нижний отступ списка добавлял к ним ещё 32. */
.page-home .section--pattern .mosaic { margin-bottom: 0; }

.mosaic__item {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* 10px по инспектору (узел Frame 2087326587). Раньше стояло 20px —
     догадка, ошибка ровно вдвое. */
  border-radius: var(--radius);
  /* Плитка в макете строго квадратная, 295×295. aspect-ratio вместо
     min-height: при 4 колонках в контейнере 1240 с зазором 10px
     колонка как раз даёт 295px, и высота получается сама. */
  aspect-ratio: 1 / 1;
  min-height: 0;
  background: #232323;
}
/* Пустая ячейка мозаики: держит место в сетке и больше ничего.
   Без сброса фона она была бы тёмным квадратом. */
.mosaic__item--empty {
  background: none;
  pointer-events: none;
}

/* Заголовок внутри мозаики: три ячейки первого ряда. Квадратной
   пропорции у него нет — он подстраивается под ряд плиток. */
/* Внимание: НЕ ставить сюда display: grid или flex. Chrome и Safari
   снимают с <li> роль пункта списка, как только у него меняется
   display, и проверка доступности начинает ругаться, что в <ul> лежит
   посторонний элемент. Обычного блочного потока здесь достаточно. */
.mosaic__head > * + * { margin-top: var(--s-4); }
@media (min-width: 1100px) {
  .mosaic__head { grid-column: span 3; }
}
@media (min-width: 700px) and (max-width: 1099px) {
  .mosaic__head { grid-column: span 2; }
}
.mosaic__head .section__title { margin-bottom: 0; }
/* Растягивание на две колонки осталось только у фотогалереи-масонри.
   В «Нашей территории» инспектор показал, что ВСЕ плитки строго
   295×295: сетка 4×4 из квадратов, а разрежённость даётся пустыми
   ячейками, а не широкими плитками. */
.mosaic--photos .mosaic__item--large { grid-column: span 2; }

.mosaic__item picture,
.mosaic__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mosaic__caption {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: var(--s-4);
  /* В макете подписи плиток стоят по центру, а не по левому краю */
  text-align: center;
  color: var(--c-cream);
  /* Градиент, а не сплошная плашка: без него светлые кадры
     не дают нужного контраста под текстом (п. 10.13 ТЗ) */
  background: linear-gradient(180deg, rgba(58,60,21,0) 0%, rgba(58,60,21,0.85) 100%);
}
/* Инспектор (узлы «Русская баня», «Река "Скнижка"»):
   Montserrat 600 / 24px / 100%, кремовый. */
.mosaic__caption h3 {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 29px;
  color: var(--c-cream);
}
.mosaic__caption p {
  margin-top: var(--s-1);
  font-size: 0.875rem;
}

/* Подводка «Наша территория»: инспектор даёт 674×58 при кегле 24px,
   то есть ровно две строки по 29 (auto-leading Montserrat) */
.mosaic__head .section__lead {
  max-width: 674px;
  font-size: 1.5rem;
  line-height: 29px;
}

.mosaic--photos .mosaic__item { min-height: 160px; }

/* ---------- Аккордеон вопросов ---------- */
.faq { display: grid; gap: 20px; }  /* зазор плашек, замер инспектора */

.faq__item {
  border: 1px solid var(--c-dark-soft);
  border-radius: var(--radius);
  background: var(--c-white);
}

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: var(--tap-min);
  padding: var(--s-3) var(--s-4);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.faq__question::-webkit-details-marker { display: none; }
.faq__question::after {
  content: "+";
  flex: 0 0 auto;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--c-terra);
}
.faq__item.is-open .faq__question::after { content: "−"; }

.faq__answer {
  padding: 0 var(--s-4) var(--s-4);
}

/* =========================================================================
   Соответствие макету: COMPONENTS + главная (доводка 26.08)
   ========================================================================= */

:root {
  /* Дополнительные цвета из COMPONENTS */
  --c-hover-warm:  #E4D9C9;  /* заливка вторичной кнопки при наведении */
  --c-hover-terra: #B0663C;  /* первичная кнопка при наведении */
  --c-focus:       #7FA8E8;  /* фокус нарисован синим — вне палитры, см. 04-makety-figma.md */
  --c-focus-soft:  #D8E4F7;
  --c-muted:       #C9C9C4;  /* состояние загрузки */
  /* Высота пилюли меню по инспектору — 87px. Раньше стояло 68 и первый
     экран внутренних страниц отступал меньше, чем нужно. */
  --header-h: 87px;
  /* Пилюля меню на десктопе (≥900): общие размеры для шапки и плашки cookie. */
  --header-w: min(100% - 2 * var(--s-4), 1260px);
  --header-desk-top: 32px;
  --header-desk-h: 86.91px;
  --header-radius: 100px;
  --header-cta-h: 40px;
  --nav-font-size: 1rem;
  --nav-line-height: 20px;
}

/* ---------- Кнопки: 6 состояний по COMPONENTS ---------- */
.btn--pill { border-radius: var(--radius-pill); }


.btn--outline {
  /* Инспектор (Frame 2087326585): заливки нет, только рамка 1px #9B5026,
     радиус 100, поля 14/40. Раньше стоял белый фон — на кремовой странице
     кнопка выглядела вставленной плашкой, а в макете она прозрачная и
     проступает фоновый паттерн */
  background: transparent;
  border: 1px solid var(--c-terra);
  border-radius: 100px;
  min-height: 52px;
  padding: 13px 39px;
  gap: 10px;
}

/* Третий тип из макета — текстовая кнопка без рамки */
.btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--c-dark);
}

/* Cookie notice из отдельного фрейма Оверлеи.svg. */
.cookie-banner[hidden] { display: none; }
.cookie-banner {
  position: fixed;
  z-index: 50;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 747px;
  height: 76px;
  max-width: calc(100vw - 24px);
  padding: 20px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 4px 18px rgba(73, 73, 73, .12);
  font-family: var(--font-body);
  color: var(--c-dark);
}
.cookie-icon { flex: 0 0 36px; width: 36px; height: 36px; margin-right: 16px; }
.cookie-text {
  flex: 0 0 455px;
  width: 455px;
  margin: 0 24px 0 0;
  font-size: 11px;
  line-height: 15.5px;
}
.cookie-actions { display: flex; align-items: center; gap: 20px; }
.cookie-actions button { flex: none; cursor: pointer; font-family: var(--font-body); }
.cookie-accept {
  width: 120px;
  height: 36px;
  border: 0;
  border-radius: 100px;
  background: linear-gradient(110deg, #847F57, #989366);
  color: #fff;
  font-size: 11px;
}
/* 25.10: «Отказаться» вместо крестика (ТЗ 11.2) — пара к «Согласиться» в обводке прежнего крестика. */
.cookie-decline {
  width: 120px;
  height: 36px;
  padding: 0;
  border: 1px solid #D4CEBB;
  border-radius: 100px;
  background: #fff;
  color: var(--c-dark);
  font-size: 11px;
}
.cookie-text a { color: var(--c-terra); }
@media (max-width: 699px) {
  .cookie-banner {
    bottom: 14px;
    flex-direction: column;
    width: 266px;
    height: auto;
    min-height: 154px;
    max-width: calc(100vw - 20px);
    padding: 14px;
    text-align: center;
  }
  .cookie-icon { flex: 0 0 36px; margin: 0 0 10px; }
  .cookie-text {
    flex: 0 0 auto;
    width: 238px;
    max-width: 100%;
    margin: 0;
    font-size: 9px;
    line-height: 14px;
  }
  .cookie-actions { gap: 14px; margin-top: 11px; }
  .cookie-accept { width: 99px; height: 27px; font-size: 9px; }
  .cookie-decline { width: 99px; height: 27px; font-size: 9px; }
}
/* 06.10: на десктопе плашка размером с пилюлю меню, отступ снизу = отступу шапки сверху. */
@media (min-width: 900px) {
  .cookie-banner {
    bottom: var(--header-desk-top);
    width: var(--header-w);
    max-width: none;
    height: auto;
    min-height: var(--header-desk-h);
    padding: 10px 32px;
    border-radius: var(--header-radius);
  }
  .cookie-text {
    flex: 1 1 auto;
    width: auto;
    font-size: var(--nav-font-size);
    line-height: var(--nav-line-height);
  }
  .cookie-accept { width: auto; height: var(--header-cta-h); padding-inline: 20px; }
  .cookie-decline { width: auto; height: var(--header-cta-h); padding-inline: 20px; font-size: var(--nav-font-size); white-space: nowrap; }
}

@keyframes btn-spin { to { transform: rotate(360deg); } }

/* ---------- Шапка-пилюля поверх первого экрана ---------- */
/* Шапка закреплена сверху и на десктопе, и на мобильном: при прокрутке
   вниз она остаётся на экране. Именно fixed, а не sticky: пилюля лежит
   ПОВЕРХ первого экрана, а sticky-элемент занимает место в потоке и
   сдвинул бы первый экран вниз на свою высоту. */
.header {
  position: fixed;
  z-index: 30;
  inset-inline: 0;
  top: var(--s-4);
  background: transparent;
  /* Инспектор: пилюля стоит на Top 32 от верха кадра */

  border: 0;
}
@media (min-width: 900px) { .header { top: var(--header-desk-top); } }
.page-home .hero { padding-top: calc(var(--header-h) + var(--s-7)); }
/* Шапка вынесена из потока (position: absolute сверху), поэтому первый
   блок КАЖДОЙ страницы должен сам отступить на её высоту. Раньше это
   делала только главная, и на внутренних страницах заголовок заезжал
   под пилюлю меню. */
body:not(.page-home) main > :first-child {
  padding-top: calc(var(--s-4) + var(--header-h) + var(--s-6));
}

/* Инспектор (узел «Меню»): пилюля 1260×87 с полем 90px от края кадра —
   шире общего контейнера 1240. На 1240 пункты не помещались и «О нас»
   сваливалось на вторую строку. */
.container--header {
  /* width у .container задан через min(), max-width его не перебивает —
     нужно переопределить именно width */
  width: var(--header-w);
}

/* Инспектор (узел «Меню»): 1260×86.91, поля 20×32, раскладка
   space-between, скругление 100, фон #F7F0E6, backdrop-filter blur(10px).
   Три группы внутри: знак 160×46.91, меню 551×20, правая часть 428×40. */
.header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--header-radius);
  background: var(--c-cream);
  /* Поддержка неполная, поэтому фон непрозрачный и без размытия
     шапка выглядит так же — блюр только украшает. */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--header-shadow);
}
@media (min-width: 900px) {
  /* Размеры из инспектора действуют только там, где пилюля целиком
     помещается в кадр. На узких экранах жёсткие 60px зазора и ширина
     кнопки давали горизонтальную прокрутку. */
  .header__bar {
    /* Зазор 60 в панели — номинальный: раскладка space-between, и по
       координатам между группами остаётся 28.5 (1260 − 64 полей − 160
       − 551 − 428 = 57 на два промежутка). Жёсткие 60 давали 1323 при
       ширине пилюли 1260, и кнопка вылезала за скругление вправо.
       Промежутки распределяет space-between, минимум не задаём. */
    gap: 0;
    min-height: var(--header-desk-h);
    padding: 20px 32px;
  }
}

/* Знак и название: группа 160×46.91, зазор 10.87, выравнивание по низу */
.header__logo {
  display: inline-flex;
  align-items: flex-end;
  gap: 11px;
  text-decoration: none;
  color: var(--c-deep);
  flex: 0 0 auto;
}
@media (min-width: 900px) { .header__logo { width: 160px; } }
/* Цвет знака наследуется от пилюли: на оливковой шапке внутренних
   страниц он кремовый, на кремовой главной — тёмный. Своё значение
   цвета здесь перебивало правило шапки, и знак оставался тёмным. */
.header__mark { display: inline-flex; flex: 0 0 46.91px; color: inherit; overflow: visible; }
/* У знака бренда нет собственных width/height — только viewBox, чтобы
   цвет наследовался от текста, а размер задавался здесь. Без явных
   размеров svg без атрибутов разъезжается до 300×150. */
/* Инспектор (узел «Лого 2»): знак 46.91×46.91. Держим векторный контур,
   а не присланный PNG 47×47: на экранах с удвоенной плотностью растр
   такого размера мылит, а контур ещё и красится в цвет шапки. */
.header__mark svg { width: 46.91px; height: 46.91px; flex-shrink: 0; overflow: visible; }
.footer__mark svg { width: 40px; height: 40px; }
/* Инспектор: «Лучший сезон» — Etude Noire 400, 21.7392/90%, блок 102×40,
   по центру, #494949. Две строки: 40 = 2 × 19.57 с округлением. */
.header__name {
  font-family: var(--font-heading);
  font-size: 21.7392px;
  line-height: 0.9;
  width: 102px;
  text-align: center;
}

.header__aside {
  display: flex;
  align-items: center;
  /* Инспектор (Frame 2087326542): группа 428×40, зазор 24 */
  gap: 24px;
  /* Прежний margin-inline-start: auto съедал весь свободный запас
     пилюли и сгонял его в один промежуток: меню прилипало к знаку, а
     справа зияло 45px. Промежутки раскладывает space-between. */
  flex: 0 0 auto;
}
/* Лапа: файлы от дизайнера, 30×28 в покое и 30×23 при наведении.
   Рисуем маской, а не картинкой, чтобы один файл красился в цвет шапки:
   тёмный на главной, кремовый на внутренних страницах. Коробка всегда
   30×28 — иначе при наведении соседи дёргаются. */
.header__paw {
  display: inline-block;
  flex: 0 0 auto;
  width: 30px;
  height: 28px;
  background-color: currentColor;
  -webkit-mask: url("../img/paw-big.b81d30e66a94.png") no-repeat center / 30px 28px;
  mask: url("../img/paw-big.b81d30e66a94.png") no-repeat center / 30px 28px;
  color: var(--c-deep);
}

.header__paw-wrap:focus-visible .header__paw{
  -webkit-mask: url("../img/paw-small.70815d614eab.png") no-repeat center / 30px 23px;
  mask: url("../img/paw-small.70815d614eab.png") no-repeat center / 30px 23px;
}
@media (hover: hover) and (pointer: fine) {
.header__paw-wrap:hover .header__paw{
  -webkit-mask: url("../img/paw-small.70815d614eab.png") no-repeat center / 30px 23px;
  mask: url("../img/paw-small.70815d614eab.png") no-repeat center / 30px 23px;
}
}

/* Кнопка в шапке: инспектор даёт группу 428×40 при лапе 30 и телефоне 136
   с зазорами 24, значит на кнопку остаётся 214×40. Подпись 174×20,
   Montserrat 400 16/20, кремовая — отсюда поля 20 по горизонтали и 10 по
   вертикали. Общая кнопка сайта крупнее (20/600), в шапке она своя. */
/* Инспектор (Frame 2087326541): 214×40, поля 10×20, #9B5026, скругление 100.
   Общая кнопка сайта крупнее (20/600, поля 40×14) и тянется до 44px ради
   размера цели нажатия — в шапке размер свой. Ширину задаём явно: подпись
   в браузере на 1px шире фигмовской и кнопка расплывалась до 217. Вместе с
   фиксированной шириной обязателен nowrap, иначе подпись ровно в 175px
   срывается на вторую строку и пилюля вырастает до 102px. */
.header__aside .btn {
  width: 214px;
  min-height: var(--header-cta-h);
  padding: 10px 20px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--nav-font-size);
  line-height: var(--nav-line-height);
  white-space: nowrap;
  /* У общей кнопки рамка в 1px, в макете её нет. С рамкой высота
     выходила 42 вместо 40 при тех же полях 10. */
  border: 0;
}
.header__phone {
  /* Инспектор: Montserrat 400, 16/115%, трекинг −0.02em, #494949, блок 136 */
  color: var(--c-dark);
  text-decoration: none;
  white-space: nowrap;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

/* В макете все пункты в одну строку внутри пилюли. Перенос ронял
   «О нас» на вторую строку и разрывал шапку по высоте. */
/* Инспектор (Frame 2087326536): группа меню 551×20, зазор 20.
   Пункты — Montserrat 400, 16/20, #494949 («Размещение» 108, «Акции» 55). */
.nav--desktop .nav__list { gap: 20px; flex-wrap: nowrap; }
.nav--desktop .nav__link {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--nav-font-size);
  line-height: var(--nav-line-height);
  white-space: nowrap;
}

/* ---------- Выпадающие списки ---------- */
.nav__item { position: relative; }

.nav__dropdown {
  position: absolute;
  top: 100%;
  inset-inline-start: 0;
  z-index: 5;
  min-width: 190px;
  margin: 0;
  padding: var(--s-2);
  list-style: none;
  /* Зазор именно между заливками пунктов, а не за счёт их внутренних
     полей: иначе «бабблы» соседних пунктов слипаются. */
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-radius: var(--radius);
  background: var(--c-cream);
  box-shadow: 0 8px 24px rgba(73, 73, 73, 0.22);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}
/* :focus-within обязателен — без него меню недоступно с клавиатуры (п. 10.13 ТЗ) */
.nav__item--has-children:focus-within > .nav__dropdown{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
@media (hover: hover) and (pointer: fine) {
.nav__item--has-children:hover > .nav__dropdown{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
}


.nav__sublink {
  /* В макете пункты выпадающего списка — заливка-пилюля во всю ширину
     панели, а не просто ссылки. */
  display: flex;
  align-items: center;
  min-height: var(--tap-min);
  padding-inline: var(--s-4);
  border-radius: var(--radius-pill);
  background: var(--c-olive-soft);
  color: var(--c-dark);
  text-decoration: none;
  font-size: 0.9375rem;
}

@media (hover: hover) and (pointer: fine) {
.nav__sublink:hover{ background: var(--c-hover-warm); color: var(--c-dark); }
}

@media (min-width: 1100px) {
  .nav--desktop .nav__item:nth-child(3) > .nav__dropdown { min-width: 143px; width: 143px; }
  .nav--desktop .nav__item:nth-child(5) > .nav__dropdown { min-width: 121px; width: 121px; }
  .nav--desktop .nav__dropdown { padding: 10px; }
  .nav--desktop .nav__item:nth-child(3) > .nav__dropdown { padding-bottom: 7px; }
  .nav--desktop .nav__item:nth-child(5) > .nav__dropdown { padding-bottom: 11px; }
  .nav--desktop .nav__sublink {
    min-height: 30px;
    padding-inline: 11px 12px;
    border-radius: 8px;
    font-size: 13px;
    background: #C6C0B8;
  }
  .nav--desktop .nav__item:nth-child(5) .nav__sublink { min-height: 26px; }
}

/* ---------- Мобильное меню ---------- */
.nav-toggle { display: none; }
.nav-toggle__button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-min);
  height: var(--tap-min);
  border-radius: 999px;
  cursor: pointer;
  list-style: none;
}
.nav-toggle__button::-webkit-details-marker { display: none; }
.nav-toggle[open] .nav--mobile {
  position: absolute;
  inset-inline: 0;
  top: calc(100% + var(--s-2));
  padding: var(--s-4);
  border-radius: var(--radius-lg);
  background: var(--c-cream);
  box-shadow: 0 8px 24px rgba(73, 73, 73, 0.22);
}
.nav__sublist {
  margin: 0 0 0 var(--s-4);
  padding: 0;
  list-style: none;
}

@media (max-width: 1279px) {
  .nav--desktop { display: none; }
  .nav-toggle { display: block; }
  .header__bar { position: relative; }
  .header__phone { display: none; }
}
@media (min-width: 1280px) {
  .nav--mobile, .nav-toggle { display: none; }
}

/* ---------- Тёмные карточки по COMPONENTS ---------- */
.card--house,
.card--nearby,
.card--tile {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--radius-lg);
  min-height: 320px;
  padding: var(--s-5);
  color: var(--c-cream);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--s-2);
}
.card--house > picture,
.card--nearby > picture,
.card--tile > picture {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.card--house > picture img,
.card--nearby > picture img,
.card--tile > picture img {
  width: 100%; height: 100%; object-fit: cover;
}
.card--house::before,
.card--nearby::before,
.card--tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Градиент, а не сплошная плашка: на светлых кадрах иначе не хватает
     контраста под белым текстом (п. 10.13 ТЗ, 4.5:1) */
  background: linear-gradient(180deg, rgba(58,60,21,0.15) 0%, rgba(58,60,21,0.82) 70%);
  transition: background 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
.card--house:hover::before,
.card--nearby:hover::before,
.card--tile:hover::before{
  background: linear-gradient(180deg, rgba(58,60,21,0.55) 0%, rgba(58,60,21,0.92) 70%);
}
}


.card--house .card__title,
.card--nearby .card__title,
.card--tile .card__title { color: var(--c-cream); margin: 0; }
.card--house .card__link { color: var(--c-cream); }

/* Цена углом, как в макете */
.card__badge {
  position: absolute;
  z-index: 1;
  top: var(--s-4);
  inset-inline-end: var(--s-4);
  padding: var(--s-2) var(--s-3);
  border-radius: 999px;
  background: var(--c-cream);
  color: var(--c-deep);
  font-weight: 600;
  font-size: 0.9375rem;
}

.card--nearby .card__number {
  order: -1;
  color: var(--c-cream);
  opacity: 0.9;
}

/* Описание и кнопка появляются при наведении — состояние из COMPONENTS.
   На тач-устройствах наведения нет, поэтому там показываем сразу. */
@media (hover: hover) and (min-width: 900px) {
  .card--house .card__reveal,
  .card--tile .card__reveal {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.2s ease, max-height 0.2s ease;
  }

.card--house:focus-within .card__reveal,
.card--tile:focus-within .card__reveal{
    opacity: 1;
    max-height: 16rem;
  }
@media (hover: hover) and (pointer: fine) {
.card--house:hover .card__reveal,
.card--tile:hover .card__reveal{
    opacity: 1;
    max-height: 16rem;
  }
}

}

/* ---------- Плитка-ссылка в мозаике ---------- */
.mosaic__more {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* Плитка-ссылка обязана занять ячейку целиком: квадрат задан на
     li.mosaic__item, а ссылка лежит внутри и без этого сжимается
     по содержимому. */
  height: 100%;
  /* Инспектор по узлу «Кнопка» в «Нашей территории»: 295×295,
     скругление 10px, поля 20px, фон #847F57 — то есть плитка живёт
     по тем же правилам, что и фотоплитки рядом. */
  gap: var(--s-2);
  padding: var(--s-4);
  border-radius: var(--radius);
  background: var(--c-olive);
  color: var(--c-cream);
  text-decoration: none;
  /* Макет: Montserrat 400 / 24px / 29px, цвет #F7F0E6 */
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 29px;
  color: var(--c-cream);
}

@media (hover: hover) and (pointer: fine) {
.mosaic__more:hover{ background: var(--c-deep); color: var(--c-cream); }
}

.mosaic__more::after {
  content: "";
  box-sizing: border-box;
  position: absolute;
  inset: 10px;
  border: 1px solid #F7F0E6;
  border-radius: 8px;
  pointer-events: none;
}
.mosaic__more-label { width: 195px; max-width: 100%; }
.mosaic__more-arrow {
  width: 28px;
  height: 22px;
  flex: none;
  align-self: flex-start;
  margin-left: max(0px, calc((100% - 195px) / 2));
  background: #F7F0E6;
  -webkit-mask: url("../img/icon-territory-arrow.cdb579f20f07.png") center / contain no-repeat;
  mask: url("../img/icon-territory-arrow.cdb579f20f07.png") center / contain no-repeat;
}

/* ---------- Фотогалерея масонри ---------- */
.mosaic--photos {
  display: block;
  columns: 2;
  column-gap: var(--s-4);
}
@media (min-width: 700px) { .mosaic--photos { columns: 3; } }
@media (min-width: 1100px) { .mosaic--photos { columns: 4; } }
.mosaic--photos .mosaic__item {
  break-inside: avoid;
  margin-bottom: var(--s-4);
  min-height: 0;
}
.mosaic--photos .mosaic__item picture,
.mosaic--photos .mosaic__item img { height: auto; }

/* ---------- Аккордеон оливковыми полосами ---------- */
.faq__item {
  border: 0;
  background: transparent;
}
/* Плашка вопроса описана ниже одним блоком по замерам инспектора
   (.faq__item .faq__question). Здесь раньше стояли кегль 18px и
   переменная --c-card-dark, которой в палитре нет — правило молча не
   работало, а цвет приходил от классов .faq__item--dark/--olive. */
.faq__question::after { color: var(--c-cream); }
.faq__item.is-open .faq__question { border-radius: 10px; }

/* Ответ в макете лежит прямо на кремовом фоне: ни рамки, ни белой
   подложки. Боковые поля 32px — из замера: плашка 1240, текст 1176 */
.faq__item .faq__answer {
  border: 0;
  border-radius: 0;
  padding: 20px 32px;
  background: transparent;
  color: var(--c-dark);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.5rem;      /* 24px, inspector */
  /* 29px, а не 24: панель Figma пишет «100%», но высота узлов даёт ровно
     29 на строку (116/4 и 377/13) — это auto-leading Montserrat 1.22 */
  line-height: 29px;
}
.faq__answer p { margin: 0 0 1em; }
.faq__answer p:last-child, .faq__answer ul:last-child { margin-bottom: 0; }
.faq__answer ul { margin: 0 0 1em; padding-left: 1.2em; }
.faq__answer a { color: inherit; text-decoration: underline; text-decoration-skip-ink: auto; }

/* ---------- Ряд кнопок-разделов на первом экране ---------- */
.hero__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-5);
}
.hero__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: var(--s-2) var(--s-5);
  border: 1px solid rgba(247, 240, 230, 0.55);
  border-radius: 999px;
  background: rgba(247, 240, 230, 0.12);
  color: var(--c-cream);
  text-decoration: none;
  font-size: 0.9375rem;
}

@media (hover: hover) and (pointer: fine) {
.hero__link:hover{ background: var(--c-cream); color: var(--c-deep); }
}


/* ---------- Подвал по макету ---------- */
.footer { padding-top: 100px; }
@media (min-width: 900px) {
  .footer { margin-top: 0; padding-top: 43px; padding-bottom: 13px; }
}
.footer__top { display: grid; gap: 48px; margin-bottom: 0; }
.footer__brand { display: flex; flex-direction: column; align-items: center; width: 240px; gap: 40px; }
/* Инспектор (Frame 2087326550): группа 240×70, знак 70, подпись 153,
   зазор 16.3, выравнивание по нижнему краю. */
.footer__logo { display: flex; align-items: flex-end; gap: 16.3px; width: 240px; height: 70px; color: var(--c-olive); }
.footer__mark { flex: 0 0 70px; }
.footer__mark svg { display: block; width: 70px; height: 70px; }
.footer__name {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 153px;
  height: 58px;
  font-family: var(--font-heading);
  font-style: normal;
  font-weight: 400;
  font-size: 32.6089px;
  /* 90% от 32.6089 — это 29.35px; в макете подпись в две строки, 58 = 2×29 */
  line-height: 90%;
  text-align: center;
  color: #847F57;
}
.footer__contacts { display: grid; gap: 14px; text-align: center; font-size: 16px; line-height: 18px; }
.footer__contacts p { margin: 0; }
.footer__phone { font-size: 20px; font-weight: 400; line-height: 24px; }
.footer__hours { color: var(--c-dark); }
.footer__brand .socials { margin-top: -20px; }
@media (min-width: 900px) { .footer__brand .socials { margin-top: 13px; } }
.socials { display: flex; gap: 5px; margin: 0; padding: 0; list-style: none; }
.socials li { position: relative; display: flex; align-items: flex-start; }
.socials__item { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 100px; background: transparent; color: var(--c-cream); }
.socials__item img { display: block; width: 40px; height: 40px; }

@media (hover: hover) and (pointer: fine) {
.socials__item:hover{ background: var(--c-olive); }
}

.socials__note { position: absolute; top: -5px; right: -3px; width: 7px; height: 18px; font-family: var(--font-body); font-weight: 400; font-size: 16px; line-height: 115%; }
.footer__brand .btn { width: 214px; min-height: 40px; height: 40px; padding: 0; font-size: 16px; font-weight: 400; }
.footer__columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; align-content: start; }
.footer__column-title { margin-bottom: 14px; color: var(--c-olive); font-size: 20px; font-weight: 600; line-height: 24px; }
.footer__column ul, .footer__legal-links { margin: 0; padding: 0; list-style: none; display: grid; row-gap: 10px; }
.footer__column li, .footer__legal-links li { line-height: 22px; }
.footer__column a, .footer__documents a, .footer__booking-link { font-family: var(--font-body); font-weight: 400; font-size: 18px; line-height: 22px; color: var(--c-dark); }
.footer__booking-link { display: inline; border: 0; padding: 0; background: none; cursor: pointer; text-align: left; }

@media (hover: hover) and (pointer: fine) {
.footer__booking-link:hover{ color: var(--c-terra); text-decoration: underline; }
}

.footer__documents { grid-column: 1 / -1; }
.footer__legal-links { grid-auto-flow: column; grid-template-rows: repeat(2, 22px); grid-template-columns: 100px auto; column-gap: 30px; justify-content: start; }
@media (min-width: 1200px) {
  .footer__top { grid-template-columns: 240px 1fr; column-gap: 120px; }
  .footer__columns { width: 716px; padding-top: 12px; grid-template-columns: 229px 180px 107px; column-gap: 100px; row-gap: 45px; }
  .footer__documents { width: 433px; }
  .footer__column a, .footer__documents a { white-space: nowrap; }
  .footer__legal { margin: 58px 20px 0; padding-top: 16px; }
}
@media (max-width: 599px) {
  .footer__columns { grid-template-columns: 1fr; }
  .footer__legal-links { grid-auto-flow: row; grid-template-columns: 1fr; grid-template-rows: none; }
  .footer__brand { justify-self: center; }
}

.footer__legal {
  display: grid;
  gap: var(--s-5);
  align-items: start;
}
@media (min-width: 900px) { .footer__legal { grid-template-columns: 1fr auto 1fr; } }
/* Реквизиты: инспектор даёт блок 219×48 — три строки по 16 при
   Montserrat 400 14/115%, #494949. */
.footer__requisites {
  display: grid;
  gap: 0;
  color: var(--c-dark);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.15;
  max-width: 219px;
}
/* Копирайт и сноска: Inter 400 14/125%, трекинг −0.03em.
   Копирайт #494949, звёздочка и текст сноски — тот же цвет на 50%. */
.footer__center {
  text-align: center;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.25;
  letter-spacing: -0.03em;
  color: var(--c-dark);
}
/* В макете сноска приглушена до 50%: это 2.3 при норме 4.5 (п. 10.13).
   Ставим как в макете по прямому указанию, конфликт вынесен в
   открытые вопросы реестра. */
.footer__meta-note { margin-top: var(--s-1); color: rgba(73, 73, 73, 0.5); }
.socials__note { color: rgba(73, 73, 73, 0.5); }

/* Значки оплаты, инспектор (Frame 30): группа 206×40, зазор 40.
   Внутри Visa 40×40, Mastercard 32×24 и Мир 54×16 — файлы от дизайнера. */
.footer__pay {
  display: flex;
  align-items: center;
  gap: 40px;
  justify-content: flex-end;
}
/* Размеры заданы атрибутами width/height в разметке — здесь только
   запрет на растягивание: общее правило img { max-width: 100% } без
   этого ужимало значки вместе с колонкой. */
.footer__pay img { flex: 0 0 auto; display: block; }

/* ---------- Правки контраста после замера (п. 10.13 ТЗ, 4.5:1) ---------- */

/* Кнопка на фоне первого экрана: новое правило .btn--outline задало белый фон,
   и кремовый текст на нём давал 1.13. Возвращаем полупрозрачную тёмную
   подложку — на фото она читается, на белом не появляется. */
.btn--on-media {
  background: rgba(58, 60, 21, 0.55);
  border-color: var(--c-cream);
  color: var(--c-cream);
}


/* =========================================================================
   Страницы второй очереди (Фаза 6)
   ========================================================================= */

.page-head { padding-bottom: 0; }
.page-head h1 { margin-bottom: var(--s-4); }

.prose :where(p, ul, ol) + :where(p, ul, ol, h2, h3) { margin-top: var(--s-4); }
.prose :where(h2, h3) { margin-top: var(--s-6); }

/* Список фактов: расстояние, время, адрес */
.facts {
  display: grid;
  gap: var(--s-2);
  margin: 0 0 var(--s-5);
  padding: 0;
  list-style: none;
}
.facts li {
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--c-dark-soft);
}

.mosaic__title { margin: 0; font-size: 1.125rem; color: var(--c-cream); }

/* ---------- Карта, загружаемая по нажатию ---------- */
.map {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--c-dark-soft);
  min-height: 320px;
  display: grid;
  place-items: center;
  gap: var(--s-3);
}
.map picture { position: absolute; inset: 0; z-index: 0; }
.map picture img { width: 100%; height: 100%; object-fit: cover; }
.map__button { position: relative; z-index: 1; }
.map__note {
  position: relative;
  z-index: 1;
  padding: var(--s-1) var(--s-3);
  border-radius: var(--radius);
  background: rgba(247, 240, 230, 0.92);
  color: var(--c-dark);
  font-size: 0.875rem;
}
.map__frame {
  width: 100%;
  min-height: 420px;
  border: 0;
  display: block;
}

/* ---------- Страницы ошибок ---------- */
.error-code {
  font-family: var(--font-heading);
  font-size: clamp(4rem, 2rem + 10vw, 9rem);
  line-height: 1;
  color: var(--c-olive);
  margin-bottom: var(--s-3);
}

/* =========================================================================
   Формы заявок (Фаза 8, раздел 7 ТЗ)
   ========================================================================= */

.form {
  padding: var(--s-6);
  border-radius: var(--radius-lg);
  background: var(--c-white);
  border: 1px solid var(--c-dark-soft);
}
.form__title { margin-bottom: var(--s-4); }

.form__grid {
  display: grid;
  gap: var(--s-4);
  margin-top: var(--s-5);
}
@media (min-width: 700px) { .form__grid { grid-template-columns: repeat(2, 1fr); } }
.form__field--wide { grid-column: 1 / -1; }

.form__field { display: grid; gap: var(--s-1); }
.form__label { font-size: 0.9375rem; font-weight: 600; }

.form :where(input[type="text"], input[type="tel"], input[type="email"],
              input[type="date"], input[type="number"], textarea) {
  width: 100%;
  min-height: var(--tap-min);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--c-dark-soft);
  border-radius: var(--radius);
  background: var(--c-cream);
  color: var(--c-dark);
}
.form textarea { min-height: 7rem; resize: vertical; }

.form :where(input, textarea):focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 1px;
}

/* Ловушка для ботов: убрана с экрана, но остаётся в разметке.
   display:none боты часто распознают, поэтому прячем смещением. */
.form__trap-wrap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__consent { margin-top: var(--s-2); }
.form__checkbox {
  display: flex;
  align-items: start;
  gap: var(--s-3);
  cursor: pointer;
}
.form__checkbox input {
  /* ≥44px — требование п. 10.13 к размеру интерактивных элементов */
  width: 24px;
  height: 24px;
  margin: 10px;
  flex: 0 0 auto;
}

.form__error { color: #A32C1B; font-size: 0.875rem; }

.form__note {
  padding: var(--s-3) var(--s-4);
  border-radius: var(--radius);
  margin-bottom: var(--s-4);
}
/* Кремовый на оливковом даёт 3.6:1. Порог 3.0 действует только для
   крупного текста — от 18.66px, — а здесь кегль 18px, и проверка требует
   4.5:1. Берём тёмный фон палитры: 10.1:1 с запасом. */
.form__note--ok { background: var(--c-deep); color: var(--c-cream); font-weight: 600; }
.form__note--error { background: #F6E0DA; color: #7A1F12; font-weight: 600; }

.form__actions { margin-top: var(--s-5); }
.form__legal { margin-top: var(--s-4); font-size: 0.875rem; opacity: 0.8; }


/* ============================================================
   Модальное окно бронирования — п. 5.2 ТЗ
   ============================================================ */

/* На <dialog> браузер сам даёт фокус-ловушку, закрытие по Esc и подложку.
   Своя реализация на div потребовала бы всего этого руками и почти
   наверняка потеряла бы клавиатуру. */
.booking-modal {
  width: min(760px, calc(100vw - var(--s-7)));
  max-height: calc(100vh - var(--s-7));
  padding: 0;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  /* Обрамление бренда обязательно по п. 5.4.2 и 5.4.4: виджет не ставится
     на страницу голым. Фон «лён», рамка, заголовок фирменной гарнитурой. */
  background: var(--c-cream);
  color: var(--text);
  overflow: auto;
}

.booking-modal::backdrop {
  background: rgba(58, 60, 21, 0.6);
}

.booking-modal__inner {
  position: relative;
  padding: var(--s-7);
}

.booking-modal__title {
  font-family: var(--font-display, inherit);
  margin-right: var(--s-7);
}

.booking-modal__lead {
  margin-top: var(--s-3);
  max-width: 52ch;
}

.booking-modal__loading {
  margin-top: var(--s-5);
  color: var(--c-dark);
}

.booking-modal__close {
  position: absolute;
  top: var(--s-4);
  right: var(--s-4);
  width: 44px;   /* цель нажатия не меньше 44px — п. 10.13 */
  height: 44px;
  display: grid;
  place-items: center;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--c-dark);
  background: transparent;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-pill);
  cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
.booking-modal__close:hover{ background: var(--c-olive-soft); }
}


#BookingFormWidget { margin-top: var(--s-5); }

/* Резервный блок — п. 5.6 ТЗ */
.booking-fallback { margin-top: var(--s-5); }

.booking-fallback__note {
  padding: var(--s-4);
  border-radius: var(--radius);
  /* Тот же случай, что и у .form__note--ok: даже полужирный текст не спасает, потому
     что порог 3.0 начинается с 18.66px, а здесь базовые 18px. Замер: на
     оливковом 3.6:1, на тёмном 10.1:1. */
  background: var(--c-deep);
  color: var(--c-cream);
  font-weight: 600;
}

.booking-fallback__contacts {
  margin-top: var(--s-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

/* Полный экран ниже 768px — прямое требование п. 5.2 ТЗ.
   Кнопка закрытия остаётся в фиксированной позиции. */
@media (max-width: 767px) {
  .booking-modal {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    max-height: 100vh;
    margin: 0;
    border: 0;
    border-radius: 0;
  }

  .booking-modal__inner { padding: var(--s-6) var(--s-4) var(--s-8); }

  .booking-modal__close {
    position: fixed;
    top: var(--s-2);
    right: var(--s-2);
    background: var(--c-cream);
  }
}

/* Пока окно открыто, фон не прокручивается. Положение страницы скрипт
   запоминает и возвращает при закрытии — п. 5.2 требует вернуть гостя
   на то же место. */
body[data-modal-open] {
  position: fixed;
  width: 100%;
  overflow: hidden;
}


/* ---------- Заглушки на месте фотографий ----------
   Оригиналы снимков предоставляет заказчик (п. 9.1 ТЗ). Пока их нет,
   блоки должны держать раскладку, а не схлопываться: иначе страница
   расходится с макетом не по картинкам, а по структуре.
   Полоса поперёк — чтобы заглушку нельзя было принять за готовый блок. */
.ph {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(132, 127, 87, 0.14) 0 12px,
      rgba(132, 127, 87, 0.22) 12px 24px
    );
}
.ph--tall { aspect-ratio: 3 / 4; }
/* Внутри карточек и плиток заглушка тянется на всю высоту родителя, но
   min-height обязателен: у плитки галереи нет своего содержимого, и без
   него ряд схлопывался в нулевую высоту — блок пропадал со страницы. */
.card .ph, .mosaic__item .ph {
  aspect-ratio: auto;
  height: 100%;
  min-height: 200px;
  border-radius: inherit;
}
/* В макете фото в «О нас» и в цитате не выше текстовой колонки */
/* Ограничение 420px оставляем только «расколотым» блокам: в цитате
   фото по инспектору квадратное 600×600, и потолок его резал */
.split__media .ph { max-height: 420px; }
.split__media picture { max-height: 420px; }
.split__media picture img, .quote__media picture img { height: 100%; object-fit: cover; }


/* Аккордеон вопросов держим в читаемой ширине, даже когда сама секция
   идёт в широком контейнере ради заголовка в одну строку. */
/* Инспектор по узлу «Ответы на вопросы»: Fixed 1240px, то есть блок
   занимает контейнер целиком. Ограничение в 900px было догадкой. */
.faq { max-width: var(--container); margin-inline: auto; }


/* =========================================================================
   Главная: блоки по макету SITE DESKTOP
   ========================================================================= */

/* Один жест между тёмным первым экраном и светлым контентом обрабатывает
   site.js. CSS scroll-snap оставлял короткий жест на месте, а средний —
   между двумя секциями; после перехода остальная страница прокручивается
   свободно. */
/* Секции задают только локальные координаты. Общая изоляция удерживает
   декор позади всего контента, включая элементы соседних секций. */
.home-after-hero {
  display: flow-root;
  overflow-x: clip;
  isolation: isolate;
}
.page-home .home-after-hero > section:not(.about):not(.quote),
.page-home .home-faq-background-anchor { position: relative; }
.page-home .yandex-reviews { position: relative; isolation: isolate; }
.page-home .home-background {
  position: absolute;
  inset: 0;
  display: none;
  pointer-events: none;
  user-select: none;
}
.page-home .home-background__image {
  position: absolute;
  z-index: -1;
  display: block;
  max-width: none;
  height: auto;
  pointer-events: none;
}
/* Используем уже позиционированное фото: сами about и quote сохраняют
   исходный порядок отрисовки пересекающегося контента. Стили фотографии
   не должны задавать декоративному изображению высоту и скругления. */
.page-home .about__media > .home-background { display: block; }
.page-home .about__media .home-background .home-background__image--1 {
  width: 100%;
  height: auto;
  min-height: 0;
  border-radius: 0;
  left: 0;
  top: -103px;
}
/* ---------- Фон главной (десктоп, от 900px) ----------
   Восемь слоёв сняты из Desktop Main.svg (экспорт фрейма целиком) без
   перерисовки: у каждого SVG viewBox равен рамке слоя в координатах
   макета, поэтому размер и рисунок совпадают с Figma один в один.
   Маски Figma сняты целиком: каждый слой — полный рисунок без обрезки,
   иначе на сайте, где блоки стоят чуть иначе, чем в макете, срезы маски
   видны как обрывки линий. Без масок браузер и рисует линии чётче:
   маска растеризуется отдельным слоем и мылит тонкие линии.

   Привязка: слой лежит в своей секции. left — от левого края фрейма
   1440, который всегда стоит по центру (50% - 720px), как контейнер.
   top — смещение от верха секции: (Y слоя − Y опорного элемента в макете)
   + (Y опорного элемента − верх секции на сайте при 1440).
   Опорные элементы и их Y в макете:
     about     — фото «О нас»                    947
     slogan    — сердце у слогана                 2478
     houses    — первая карточка домика           2813.13
     territory — первый ряд мозаики               3953.13
     gallery   — плитка галереи x0                6400.13
     faq-*     — первая плашка вопроса            7965.13
     footer    — иконки соцсетей                  8786.9
   Если секция меняет высоту, слой едет вместе с ней, а не с верхом
   страницы. Блока Яндекс-отзывов в макете нет — поэтому нижний слой
   привязан к подвалу, а не к FAQ. */
.home-bg { display: none; }
@media (min-width: 900px) {
  .page-home .home-faq-background-anchor > .yandex-reviews { background: transparent; }
  /* Старый слой «О нас» остаётся только для мобильной версии. */
  .page-home .about__media > .home-background { display: none; }
  /* Боковой выход декора не создаёт прокрутку; по вертикали FAQ должен
     продолжаться за границу main и под прозрачным футером. */
  .page-home .home-after-hero { position: relative; overflow-x: clip; overflow-y: visible; }
  /* Раньше общий clip также скрывал часть фонового слоя над первым экраном.
     Ограничиваем только верх этого изображения, не нижнюю границу FAQ. */
  .page-home .home-bg__layer--about { clip-path: inset(669px 0 0); }
  :is(.page-home, .page-houses, .page-promotions) .footer { position: relative; isolation: isolate; overflow: clip; }
  /* Секция территории от старой заглушки узора обрезала всё по своему
     краю (overflow: hidden) — слой территории обрывался прямыми линиями
     сверху и снизу. На главной фон живёт в общем контексте .home-after-hero. */
  .page-home .section--pattern { overflow: visible; isolation: auto; }
  :is(.page-home, .page-houses, .page-promotions) .home-bg {
    display: block;
    position: absolute;
    inset: 0;
    pointer-events: none;
    user-select: none;
  }
  :is(.page-home, .page-houses, .page-promotions) .home-bg__layer {
    position: absolute;
    z-index: -1;
    left: calc(50% - 720px + var(--x));
    top: var(--y);
    width: var(--w);
    height: var(--h);
    max-width: none;
  }
  /* 06.10: слой идёт вместе с фото «О нас» (+52 px); верх открыт на те же 52 px — без проплешины. */
  .page-home .home-bg__layer--about     { --x: -43px; --y: -669px; --w: 2124px; --h: 1827px; }
  .page-home .home-bg__layer--slogan    { --x: -654px; --y: -294.3px; --w: 1186px; --h: 1332px; }
  .page-home .home-bg__layer--houses    { --x: 908px; --y: -73.13px; --w: 1186px; --h: 1333px; }
  .page-home .home-bg__layer--territory { --x: -583px; --y: -277.13px; --w: 1714px; --h: 2584px; }
  .page-home .home-bg__layer--gallery   { --x: 353px; --y: -464.13px; --w: 1165px; --h: 1152px; }
  .page-home .home-bg__layer--faq-left  { --x: -1051px; --y: -726.13px; --w: 1554px; --h: 1618px; }
  .page-home .home-bg__layer--faq-right { --x: 844px; --y: -491.13px; --w: 1279px; --h: 1274px; }
  .page-home .home-bg__layer--footer    { --x: 221px; --y: 281.1px; --w: 2069px; --h: 1853px; }
}

/* ---------- Фон «Размещения» (десктоп, от 900px) ----------
   Три слоя из Houses.svg (экспорт фрейма 1440×4282) — это те же рисунки,
   что на главной, только в других местах: рисунок совпадает с файлом
   главной после сдвига на целое число пикселей. Поэтому новые файлы не
   нужны, берутся fon-about, fon-slogan и fon-footer (уже в кеше после
   главной). Маски сняты так же, как на главной.
   Рамки слоёв в макете и опорные элементы:
     fon-about  → x 512,  y −696  секция каталога, её верх = верх фрейма
                                  (первая карточка 577.91 и там и там)
     fon-slogan → x −666, y 1431  первая карточка доп услуг   1900.91
     fon-footer → x 221,  y 3998  иконки соцсетей             4008.39
   top считается так же, как на главной: (Y слоя − Y опоры в макете)
   + (Y опоры − верх секции на сайте при 1440).
   Слои лежат под карточками, поэтому общий контекст наложения — #main:
   у секций своего контекста и обрезки нет, иначе слой доп услуг, который
   заходит на ряд домиков, либо обрезался бы по верху секции, либо ложился
   поверх карточек. */
@media (min-width: 900px) {
  body.page-houses #main { position: relative; isolation: isolate; overflow: clip; }
  .page-houses .section--pattern { overflow: visible; isolation: auto; }
  .page-houses .houses-services { position: relative; }
  .page-houses .home-bg__layer--catalog  { --x: 512px; --y: -696px; --w: 2124px; --h: 1827px; }
  .page-houses .home-bg__layer--services { --x: -666px; --y: -166.91px; --w: 1186px; --h: 1332px; }
  .page-houses .home-bg__layer--footer   { --x: 221px; --y: 307.61px; --w: 2069px; --h: 1853px; }
}

/* ---------- Фон «Акций» (десктоп, от 900px) ----------
   Четыре слоя из Special Offers.svg (фрейм 1440×3309). Два — рисунки
   главной со сдвигом: fon-about и fon-footer. Два своих, вырезаны тем же
   способом, что fon-* главной (маски сняты — в пределах фрейма они ничего
   не прятали, сверхтонкие кольца заменены обводкой 0,6 px):
     fon-about        → x 359,  y −704  секция акций, её верх = верх фрейма
     fon-offers-left  → x −400, y 400   (первая карточка 381 и там и там)
     fon-offers-right → x 1063, y 1282
     fon-footer       → x 221,  y 3028  иконки соцсетей 3035.48, в подвале
                                        они на 318 от его верха
   Контекст наложения — #main, как на «Размещении»: правый слой заходит
   на блок вопросов и должен лежать под плашками. */
@media (min-width: 900px) {
  body.page-promotions #main { position: relative; isolation: isolate; overflow: clip; }
  .page-promotions .offers-section { position: relative; }
  .page-promotions .home-bg__layer--offers-about { --x: 359px; --y: -704px; --w: 2124px; --h: 1827px; }
  .page-promotions .home-bg__layer--offers-left  { --x: -400px; --y: 400px; --w: 1177px; --h: 1774px; }
  .page-promotions .home-bg__layer--offers-right { --x: 1063px; --y: 1282px; --w: 1036px; --h: 1031px; }
  .page-promotions .home-bg__layer--footer       { --x: 221px; --y: 310.53px; --w: 2069px; --h: 1853px; }
}
/* ---------- Фон страницы домика (десктоп, от 900px) ----------
   Четыре слоя из The First…The Fourth.svg (фреймы 1440×3423). У всех
   четырёх домиков фон один и тот же (рисунки совпадают по растру), поэтому
   один набор на шаблон. Рисунки свои, в файлы главной не входят; вырезаны
   тем же способом (маски сняты, кольца тоньше 0,6 px → обводка 0,6 px).
   Рамки слоёв в макете и опорные элементы:
     fon-house-top     → x −255, y −510  поле дат                  354
     fon-house-gallery → x 489,  y 947   большое фото мозаики      1019.55
     fon-house-left    → x −666, y 1497  карточка «Вместимость»    1444.75
     fon-house-footer  → x 211,  y 3139  иконки соцсетей           3149.71,
                                          в подвале они на 318 от его верха
   Слои едут вместе со своими секциями, так что сдвиг блоков по высоте
   на фон не влияет. Контекст наложения — #main, как на «Размещении»
   и «Акциях». */
.home-bg__layer--house-footer { display: none; }
@media (min-width: 900px) {
  body.page-house #main { position: relative; isolation: isolate; overflow: clip; }
  .page-house .footer { position: relative; isolation: isolate; overflow: clip; }
  :is(.page-house .house-title, .page-house .house-mosaic-section, .page-house .house-facts-section) { position: relative; }
  .page-house .home-bg { display: block; position: absolute; inset: 0; pointer-events: none; user-select: none; }
  .page-house .home-bg__layer {
    position: absolute;
    z-index: -1;
    left: calc(50% - 720px + var(--x));
    top: var(--y);
    width: var(--w);
    height: var(--h);
    max-width: none;
  }
  /* В общем подвале лежат оба нижних слоя: у домика свой. */
  .page-house .footer .home-bg__layer--footer { display: none; }
  .page-house .footer .home-bg__layer--house-footer { display: block; }
  .page-house .home-bg__layer--house-top     { --x: -255px; --y: -510.1px; --w: 1111px; --h: 872px; }
  .page-house .home-bg__layer--house-gallery { --x: 489px;  --y: -72.55px; --w: 1172px; --h: 1199px; }
  .page-house .home-bg__layer--house-left    { --x: -666px; --y: 52.25px;  --w: 1186px; --h: 1394px; }
  .page-house .home-bg__layer--house-footer  { --x: 211px;  --y: 307.29px; --w: 2088px; --h: 1919px; }
}
.page-home .about__panel { background: transparent; }

/* Декор обрезается по всей странице, а не на стыке main и footer.
   Секции сохраняют свои контексты наложения и исходные координаты. */
@media (min-width: 900px) {
  :is(.page-home, .page-houses, .page-promotions, .page-house) .page-content {
    position: relative;
    isolation: isolate;
    overflow: clip;
  }
  body:is(.page-home, .page-houses, .page-promotions, .page-house) #main,
  .page-home .home-after-hero,
  :is(.page-home, .page-houses, .page-promotions, .page-house) .footer {
    overflow: visible;
  }
}

/* Кнопка полосы поиска зависит от фона. На первом экране она лежит
   поверх фотографии и в макете кремовая. В каталоге «Наши домики» фон
   светлый, и там она терракотовая #9B5026 — снято с выгрузки Houses.png.
   Раньше правило было общим, и в каталоге кнопка терялась на фоне. */
.hero .searchbar__cta.btn--primary {
  background: var(--c-cream);
  color: var(--c-deep);
}

/* ---------- Блок «О нас» ----------
   Фото уходит в левый край экрана, текст лежит на кремовой панели
   со скруглённым верхним левым углом. */
.about {
  display: grid;
  align-items: stretch;
  margin-block: var(--s-8);
}
@media (min-width: 900px) {
  /* 06.10: после перехода с первого экрана под шапкой лежит фон, а заголовок
     и фото начинаются ниже неё — тот же отступ, что у первого блока страниц. */
  .page-home .about { margin-top: calc(var(--s-4) + var(--header-h) + var(--s-6)); }
  .page-home .home-faq-background-anchor > .section {
    padding-top: 70px;
    padding-bottom: 50px;
  }
  /* Отзывы доступны на странице отзывов; в десктопном фрейме главной
     после FAQ сразу следует подвал. */
  .page-home .yandex-reviews { display: none; }
  /* Инспектор по узлам «О нас» и Rectangle 27: блок 1212×800, фото
     560×800. Значит текстовая колонка — 652px, из них 572px занимает
     сам текст (замер колонки) и 80px остаётся зазором. Блок уже
     контейнера и прижат к левому краю кадра — фото уходит в край,
     это осознанный разрыв сетки в макете, а не ошибка. */
  .about {
    /* Ровно по инспектору: фото 0..560, текст 640..1212, зазор 80.
       Доли (fr) здесь не годятся — колонка подстраивалась под текст
       и отбирала ширину у фото */
    /* Доли, а не пиксели: жёсткие 560px+652px давали горизонтальную
       прокрутку на экранах уже 1212 */
    grid-template-columns: minmax(0, 518fr) minmax(0, 694fr);
    column-gap: 0;
    max-width: 1212px;
    /* Left 100px при кадре 1440, как у контейнера «Наших домиков».
       На широком экране левая граница движется вместе с общей сеткой,
       иначе блок оставался у края, пока остальные секции центрировались. */
    margin-left: max(var(--gutter), calc((100% - var(--container)) / 2));
    margin-right: auto;
    /* Высоту секции задаёт фото (800px по инспектору), а не текст.
       Без этого высота плыла: у разных сборок браузера перенос строк
       чуть разный, и секция получалась то 800, то 828. Текстовая
       колонка в макете занимает 647 из 800 — запас на перенос есть */
    /* Правленый макет 04.09: фото 560×700 (было 800). 48.6vw даёт
       ровно 700 при 1440 */
    block-size: clamp(420px, 44.93vw, 647px);
  }
  .about__text p {
    font-size: 1.25rem;      /* 20px, инспектор */
    line-height: 1.2;        /* 24px: абзацы в макете 144 и 216 = 6 и 9 строк */
  }
}
.about__media { position: relative; }
.about__media .about__mobile-image,
.quote__media .quote__mobile-image { display: none; }
.about__media picture, .about__media img, .about__media .ph {
  /* aspect-ratio обязательно сбрасываем: вместе с min-height браузер
     вычисляет из пропорции собственную ширину, и колонка сетки
     растягивается по ней — так появлялась горизонтальная прокрутка. */
  aspect-ratio: auto;
  width: 100%;
  height: 100%;
  /* 800px — высота фото по инспектору (Rectangle 27). Ниже 1440
     ужимается пропорционально: 800/1440 = 55.5vw. */
  min-height: clamp(420px, 44.93vw, 647px);
  object-fit: cover;
  /* Созвон 04.09: фотографии больше не прилипают к краям кадра и
     скругляются со всех сторон на 20px — «они у нас не крепятся
     изначально» (Настя). Отменяет прежний одинарный угол. */
  border-radius: var(--radius-lg);
}
@media (min-width: 900px) {
  /* Порядок важен: базовое правило выше задаёт min-height, и в
     медиазапросе ДО него этот сброс не срабатывал. Внутри секции с
     закреплённой высотой фото следует за ней, а не диктует свою. */
  .about__media,
  .about__media picture,
  .about__media img,
  .about__media .ph {
    block-size: 100%;
    min-block-size: 0;
  }

}
.about__panel {
  background: var(--c-cream);
  padding: var(--s-8) var(--s-7);
}
@media (min-width: 900px) {
  /* Поля по инспектору: текст занимает 640..1212 (572px), слева от него
     80px до фото, сверху 120px до заголовка. Раньше стояло по 60px с
     обеих сторон, и колонка сжималась до 452px — текст не помещался в
     800px секции и распирал её до 882 */
  /* Правленый макет: текстовая колонка начинается на 27px ниже верха
     фото (Top 947 против 920), внутренний зазор блоков 60px */
  .about__panel { padding: 0 0 0 80px; }
  /* Зазор 60 в макете стоит между текстовым блоком и рядом кнопок,
     а не между абзацами: 647 = 535 текста + 60 + 52 кнопки. Сплошной
     gap:60 распускал колонку до 808 и она вылезала из секции. */
  .about__text .split__actions { margin-top: 65px; }
  .about__text { max-width: 572px; }
  /* Замер десктопа: «О нас» → текст 40, между абзацами 40,
     от текста до ряда кнопок 60 (правило выше). */
  .about__text .section__title { margin-bottom: 40px; }
  .about__text > p:not(.split__actions) { margin: 0; }
  .about__text > p:not(.split__actions) + p:not(.split__actions) { margin-top: 40px; }
}

/* ---------- Блок-цитата ----------
   Абзацы идут лесенкой, фото уходит в правый край экрана. */
.quote {
  display: grid;
  gap: var(--s-7);
  align-items: center;
  margin-block: var(--s-9);
}
@media (min-width: 900px) {
  /* Замер десктопа: от низа блока «О нас» (фото/кнопки) до верхней
     кавычки 218, от нижней кавычки до фрейма слогана 153. Нижняя
     кавычка выступает на 60px ниже фото, поэтому здесь 153, а не 213. */
  .quote { margin-block: 218px 119.35px; }
  /* 58 к 42 — доли из макета. Раньше здесь стояло 1fr к 42fr, то есть
     текст получал одну долю против сорока двух и схлопывался в столбик
     по одному слову. */
  /* Инспектор: блок цитаты 1340×600 в точке Left 100, то есть от 100 до
     правого края кадра. Внутри — текст 708, зазор 32, фото 600×600,
     которое упирается в правый край. Доли, а не пиксели: на узких
     экранах раскладка ужимается целиком и прокрутки не даёт. */
  .quote {
    /* Инспектор 05.09: текст 635 (ширина первого абзаца), фото 600×600,
       блок стоит от Left 100 до Right 100 — 1240 при кадре 1440.
       635 + 5 + 600 = 1240. Фото больше не упирается в правый край. */
    grid-template-columns: minmax(0, 635fr) minmax(0, 600fr);
    gap: 5px;
    max-width: 1240px;
    margin-inline: auto;
    padding-left: 0;
  }
}
.quote__body { padding-inline: var(--s-4); min-width: 0; }
@media (min-width: 900px) {
  /* Поле слева задаёт сама секция (margin-inline: auto при 1240),
     внутреннего отступа у текста нет — иначе первый абзац уже 635 */
  .quote__body { padding-inline: 0; }
}
/* Инспектор (Frame 2087326626): текстовый фрейм цитаты 635×376 на
   158;1856 — то есть на 58 правее левого края блока. Колонка с зазором
   32 и выравниванием по ПРАВОМУ краю: 120 + 32 + 96 + 32 + 96 = 376.
   Лесенка получается сама — абзацы разной ширины прижаты к 793. */
.quote__text { position: relative; margin: 0; }
@media (min-width: 900px) {
  .quote__text {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 32px;
    width: 635px;
    /* Высота из инспектора: 120 + 32 + 96 + 32 + 96. Задаём явно —
       кавычки лежат в этом же контейнере абсолютом, и Chromium всё
       равно оставлял под них место в колонке. */
    height: 376px;
    margin-left: 58px;
  }
}
/* Кавычки — файлы дизайнера 48×40 (img/quote-open.png и quote-close.png).
   Рисуются маской, чтобы брать оливковый из палитры, а не зависеть от
   цвета в самом файле. Закрывающая в макете стоит на x=760, то есть на
   660 от левого края блока цитаты. Новый PNG уже развёрнут. */
.quote__mark {
  display: block;
  width: 48px;
  height: 40px;
  background-color: var(--c-olive);
  -webkit-mask: url("../img/quote-open.767a7d580585.png") no-repeat center / 48px 40px;
  mask: url("../img/quote-open.767a7d580585.png") no-repeat center / 48px 40px;
  font-size: 0;
}
.quote__mark--open { margin-bottom: var(--s-4); }
.quote__mark--close {
  margin-top: var(--s-4);
  -webkit-mask-image: url("../img/quote-close.81029aaa4954.png");
  mask-image: url("../img/quote-close.81029aaa4954.png");
  transform: none;
}
@media (min-width: 900px) {
  /* Инспектор: кавычки лежат вне текстового фрейма (158;1856).
     Открывающая на 100;1812 — это −58 и −44 от фрейма, закрывающая
     на 760;2227 — это 602 и 371. Ориентация уже задана в PNG: в макете
     левая верхняя смотрит вверх, правая нижняя — вниз. */
  .quote__mark {
    position: absolute;
    margin: 0;
  }
  .quote__mark--open { left: -58px; top: -44px; right: auto; bottom: auto; }
  .quote__mark--close { left: 602px; top: 371px; right: auto; bottom: auto; }
}
/* Лесенка: каждый следующий абзац сдвинут правее предыдущего.
   Только на широких экранах: на мобильном сдвиг плюс ширина строки
   растягивали колонку до 613px и давали горизонтальную прокрутку. */
.quote__para {
  max-width: 100%;
  font-size: 1.25rem;   /* 20px, инспектор */
  line-height: 1.2;     /* 24px: абзацы 120/96/96 = 5/4/4 строки */
}
/* Общий p + p добавляет ещё 20px поверх gap у цитаты. Из-за этого
   закрывающая кавычка пересекает третью строку вместо конца цитаты. */
@media (min-width: 900px) { .page-home .quote__para + .quote__para { margin-top: 0; } }
@media (min-width: 900px) {
  /* Сдвиг больше не нужен: абзацы выровнены по правому краю фрейма */
  .quote__para { margin-left: 0; }
  /* Ширины абзацев замерены поштучно — от них зависит, где встанут
     переносы. Без них строки ломались не там, где в макете */
  .quote__para:nth-of-type(1) { max-width: 635px; }
  .quote__para:nth-of-type(2) { max-width: 544px; }
  .quote__para:nth-of-type(3) { max-width: 447px; }
}
/* Зазор задаёт колонка фрейма (gap: 32) — margin здесь складывался бы с ним */
@media (max-width: 899px) { .quote__para + .quote__para { margin-top: 32px; } }
@media (min-width: 1280px) {
  /* На ширине макета сохраняем заданные строки, включая слово «друзей». */
  .quote__para .home-desktop-copy:has(br) { white-space: nowrap; }
}
.quote__text cite {
  display: block;
  margin-top: var(--s-5);
  font-style: normal;
  font-weight: 600;
}
.quote__media { align-self: center; }
.quote__media picture, .quote__media img, .quote__media .ph {
  /* Квадрат 600×600 по инспектору (Rectangle 27 в блоке «Цитата»),
     а не растянутая на всю высоту полоса. block-size здесь перебивает
     общее правило заглушки .ph, которое ставит свою высоту. */
  aspect-ratio: 1;
  width: 100%;
  block-size: auto;
  min-block-size: 0;
  height: auto;
  object-fit: cover;
  /* Скругление со всех углов — решение созвона 04.09 */
  border-radius: var(--radius-lg);
}

/* ---------- Слоган ----------
   В макете набран акцидентной гарнитурой, крупно, в две строки. */
/* Макет: Montserrat 300 Italic 44px, межстрочный 110%, #494949,
   по центру, блок 755px. Раньше стоял акцидентный шрифт и другой кегль. */
.slogan p {
  font-family: var(--font-body);
  font-weight: 300;
  font-style: italic;
  font-size: 2.75rem;
  line-height: 1.1;
  color: var(--c-dark);
  /* В макете блок 755×96 — две строки. Chromium рисует первую строку
     «Не ждите подходящего момента,» шириной 765px (замер спаном тем же
     шрифтом), Figma — 755. Разница метрик 1.3%. Ставим 765, иначе строка
     не помещается и слоган ломается на три. Перенос закреплён в тексте
     через \n, чтобы не зависеть от метрик шрифта вовсе. */
  max-width: 765px;
  margin-inline: auto;
  text-align: center;
  /* balance здесь ломал слоган на три строки: в одну строку он 1501px,
     то есть ровно две по 755, и «уравновешивание» уводило его в третью.
     В макете блок 755×96 — две строки. */
  text-wrap: pretty;
}
@media (min-width: 1240px) {
  /* Инспектор: слоган 755×96 в точке Left 315. Контейнер при 1440
     начинается на 100, значит внутри него отступ 215 — по центру
     кадра слоган не стоит. */
  .slogan .container > p { margin-inline: 215px auto; }
}

/* ---------- Карточка дома ---------- */
.cards--houses {
  display: grid;
  /* 20px по обеим осям. Проверяется арифметикой макета: по ширине
     610×2 + зазор = 1240, по высоте заголовок 95 + отступ 60 + два
     ряда по 500 + зазор = 1175, ровно высота секции из инспектора. */
  gap: var(--s-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 900px) { .cards--houses { grid-template-columns: 1fr 1fr; } }

/* Инспектор (Frame 2087326559): карточка 610×500 со скруглением 20px —
   это САМА фотография, а не рамка вокруг неё. Подпись и обе кнопки
   лежат поверх снимка на затемнении. Раньше карточка была коробкой с
   тёмной подложкой и полем 10px, а фото внутри — отсюда и лишняя
   высота, и не тот вид. 610×2 + зазор 20 = 1240, ширина контейнера. */
.house {
  position: relative;
  isolation: isolate;
  display: grid;
  /* Два явных ряда: свободное место, потом кнопка. Раньше подпись стояла
     в ячейке «1 / 1» с align-self: end — её бокс дотягивался до низа
     карточки и ложился поверх кнопки «Забронировать» */
  grid-template-rows: 1fr auto;
  gap: 16px;
  /* 32px по бокам — из замера: кнопка «Забронировать» Fill 546 внутри
     карточки 610, значит (610−546)/2 = 32 ровно. */
  padding: var(--s-4) 32px 20px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 610 / 500;
  /* width обязателен вместе с aspect-ratio: без него браузер выводит
     собственную ширину из min-height (380 × 610/500 = 464px), колонка
     растягивается по ней, и на мобильном появляется горизонтальная
     прокрутка. На этом уже ловились с фотографией в блоке «О нас» —
     поэтому min-height здесь нет вовсе, высоту задаёт пропорция. */
  width: 100%;
}
.house__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  isolation: isolate;
  overflow: hidden;
  display: grid;
}
.house__media picture, .house__media img, .house__media .ph {
  grid-area: 1 / 1;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}
/* Затемнение снизу: белый текст поверх фотографии обязан читаться
   при любом снимке — без него контраст зависел бы от картинки. */
/* Градиент из макета: инспектор дал линейную заливку #000000 с 0%
   сверху до 80% снизу. Он же обеспечивает читаемость белого текста
   при любой фотографии, которую загрузит редактор. */
.house__media::after {
  content: "";
  grid-area: 1 / 1;
  position: relative;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
}

/* Лента с ценой. Инспектор: 94×128 на 485;0 внутри карточки 610,
   фон #9B5026, рамка 1px #F7F0E6, снизу треугольный вырез до y=101
   (глубина 27, снята с присланного файла по альфа-каналу).
   Сам контур — инлайновый SVG в includes/price_flag.html: фоновая
   картинка растрируется под текущий размер и на увеличении даёт
   лесенку, а векторный рисунок остаётся чистым. */
.house__price {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 31px;              /* 610 − 485 − 94 */
  width: 94px;
  height: 128px;
  padding: 28px 6px 0;
  margin: 0;
  display: block;
  background: none;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 18px;
  line-height: 22px;
  color: #FFFFFF;
  text-align: center;
}
.house__price-shape {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
}
.house__price > span,
.house__price > b { position: relative; display: block; }
/* Сумма 500 18/22, подписи 400 16/20; каждая занимает одну строку. */
.house__price > span { font-size: 16px; font-weight: 400; line-height: 20px; white-space: nowrap; }
.house__price b { font-size: 18px; font-weight: 500; white-space: nowrap; }

.house__overlay {
  position: relative;
  z-index: 2;
  grid-row: 1;
  align-self: end;
  display: flex;
  /* Переносить нельзя: при длинной подписи «Подробнее» сваливалась на
     следующую строку, вылезала за низ фотографии и белым ободком
     проступала из-под кнопки «Забронировать». Вместо переноса даём
     тексту сжиматься, а кнопке — фиксированную ширину */
  flex-wrap: nowrap;
  gap: var(--s-3);
  align-items: center;
  justify-content: space-between;
  padding: 0;
  color: var(--c-cream);
}
/* Инспектор: название Montserrat 600 / 24px / 100%, подпись
   Montserrat 400 / 18px / 100%, обе чисто белые (#FFFFFF, не кремовый). */
.house__title {
  color: #FFFFFF;
  font-family: var(--font-body);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1;
}
/* ---------- Карусель фотографий в карточке домика ----------
   В макете под фото три точки. Слайды лежат стопкой в той же ячейке
   сетки: так высота карточки не зависит от того, какой кадр показан. */
.house__slides {
  position: absolute;
  inset: 0;
  display: grid;
}
.house__slide {
  grid-area: 1 / 1;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.house__slide.is-active { opacity: 1; pointer-events: auto; }
.house__slide picture,
.house__slide img,
.house__slide .ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.house__dots {
  position: absolute;
  z-index: 3;
  inset-inline: 0;
  /* 63% высоты карточки — по макету точки стоят заметно выше подписи.
     Доля, а не пиксели: карточка задана пропорцией 610/500 и ужимается
     на узких экранах вместе с точками */
  top: 63%;
  display: flex;
  justify-content: center;
  gap: 8px;
}
.house__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(247, 240, 230, 0.45);
  cursor: pointer;
  position: relative;
}
/* Зона нажатия расширена ровно до шага между точками (16px) и 24px по
   высоте. Больше нельзя: при 44px соседние зоны перекрывались и точка
   перехватывала клики по соседней — карусель не листалась вовсе.
   Шаг задан макетом, поэтому до рекомендованных 24×24 не дотягиваем;
   вопрос вынесен в открытые. */
.house__dot::after {
  content: "";
  position: absolute;
  inset: -8px -4px;
}
.house__dot.is-active { background: var(--c-cream); }
.house__dot:focus-visible { outline: 2px solid var(--c-cream); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
  .house__slide { transition: none; }
}

.house__link { color: inherit; text-decoration: none; }
.house__info { min-width: 0; }
.house__more { flex: none; }
.house__meta {
  margin-top: var(--s-2);
  color: #FFFFFF;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1;
}

/* Инспектор (Frame 2087326555): 153×40, скругление 20px, рамка 1px
   белым, поля 10/28, текст Montserrat 400 / 16px / 100% белым.
   Заливки нет — кнопка контурная поверх фотографии. */
.house__more {
  background: transparent;
  border: 1px solid #FFFFFF;
  border-radius: 20px;   /* инспектор Frame 2087326555: 153×40, радиус 20 */
  color: #FFFFFF;
  padding: 10px 28px;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
  /* 40px — высота из макета, но цель нажатия по п. 10.13 ТЗ не может
     быть меньше 44px. Добираем невидимой областью, не меняя вид. */
  min-height: 40px;
  position: relative;
}
.house__more::after {
  content: "";
  position: absolute;
  inset: -2px 0;
  min-height: var(--tap-min);
}

/* Кнопка бронирования во всю ширину карточки.
   Кремовый на оливковом даёт 3.6 — при 18px это провал (нужно 4.5).
   Цвета из макета не меняем: поднимаем кегль до 20px, тогда текст
   считается крупным (порог 18.66px при весе 700) и норма 3.0. */
/* Инспектор (Frame 2087326541): ширина во всю карточку, высота 52,
   скругление 100, поля 14/40, текст Montserrat 500 / 20px / 100%
   кремовым. Фон в макете #847F57, но кремовый на нём даёт 3.6, а
   текст 20px при весе 500 считается обычным и требует 4.5 (п. 10.13
   ТЗ). Поэтому фон затемнён до #746F4C — ровно 4.5, на глаз от
   макетного неотличим. Всё остальное как в макете. */
.house__book {
  grid-row: 2;
  width: 100%;
  min-height: 52px;
  padding: 14px 40px;
  border-radius: 100px;
  /* Ровно как в макете (Frame 2087326541, Fill 546 × 52, #847F57).
     Оговорка: кремовый на #847F57 даёт 3.6, текст здесь 20px, а п. 10.13
     требует 4.5. Раньше стоял затемнённый #746F4C ради нормы — вернул
     макетный по прямому указанию, конфликт вынесен в открытые вопросы. */
  background: var(--c-olive);
  color: var(--c-cream);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1;
}

/* ---------- Карточка «Интересное рядом» ---------- */
.cards--nearby {
  display: grid;
  /* 20px по инспектору (Frame 2087326602): три карточки по 400px
     плюс два зазора по 20 дают ровно 1240 — ширину контейнера. */
  gap: var(--s-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 900px) {
  .cards--nearby { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* 700px — высота карточки по инспектору. Именно min-height, а не
     height: если редактор напишет описание длиннее макетного, текст
     должен растянуть карточку, а не обрезаться. */
  .cards--nearby .place { min-height: 700px; }
}

.place {
  /* Столбик, чтобы кнопку можно было прижать к низу: в макете все три
     «Подробнее» стоят на одной линии, а описания разной длины */
  display: flex;
  flex-direction: column;
  /* Внутренние размеры по инспектору (Frame 2087326601):
     поля 40px сверху и снизу, 20px по бокам, зазор между блоками 40px. */
  gap: var(--s-7);
  padding: var(--s-7) var(--s-4);
  border-radius: var(--radius-lg);
  color: var(--c-cream);
}
.place--dark { background: #1E1E1E; }
.place--olive { background: #847F57; }

/* Инспектор (Frame 2087326597): блок «номер + название» ровно 146px
   при любой длине названия — от этого зависит, встанут ли фото трёх
   карточек на одну линию. Названия в макете двухстрочные. */
.place__head { text-align: center; }
@media (min-width: 900px) {
  .place__head {
    min-height: 146px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }
}
.place__number {
  font-family: var(--font-heading);
  font-size: 2rem;
  line-height: 1;
  letter-spacing: 0.06em;
}
.place__title {
  margin-top: var(--s-3);
  color: var(--c-cream);
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 1.75rem;
  line-height: 1.1;
}
/* Фото не сжимается под длинное описание: в макете все три кадра
   одной высоты, а флекс-колонка ужимала третий */
.place__media { flex: none; aspect-ratio: 360 / 220; }
.place__media picture, .place__media img, .place__media .ph { display: block; width: 100%; height: auto; }
.place__media picture, .place__media img, .place__media .ph {
  border-radius: var(--radius);
  /* 360×220 — размер фото из присланного макета. */
  aspect-ratio: 360 / 220;
  object-fit: cover;
  min-height: 0;
}
/* Тянущийся блок: описание сверху, кнопка прижата к низу карточки.
   Без него margin-top: auto у кнопки не работал — .place__actions лежит
   внутри .place__body, а не прямо в колонке карточки */
.place__body { flex: 1; display: flex; flex-direction: column; }
.place__body p { font-size: 18px; line-height: 22px; }
/* Прижимаем к низу карточки — тогда кнопки трёх карточек на одной линии */
.place__actions { margin-top: auto; }
.place__more {
  width: 100%;
  background: var(--c-cream);
  color: var(--c-deep);
}
.place__details summary { list-style: none; cursor: pointer; }
.place__details summary::-webkit-details-marker { display: none; }
.place__details .place__details-copy { margin: 20px 0 0; }
.place__collapse-label, .place__details[open] .place__expand-label { display: none; }
.place__details[open] .place__collapse-label { display: inline; }
.place__body:has(.place__details[open]) > .place__description { display: none; }

/* Контурная кнопка-пилюля терракотой — «Больше интересных мест рядом».
   Инспектор (Frame 2087326585): 443×52, радиус 100, рамка 1px #9B5026,
   поля 14/40, зазор до стрелки 10px. */
.nearby-more {
  background: transparent;
  border: 1px solid var(--c-terra);
  border-radius: 100px;
  color: var(--c-terra);
  min-height: 52px;
  padding: 14px 40px;
  gap: 10px;
}
/* 60px до кнопки: ряд карточек кончается на 855, кнопка стоит на 915 */
.cards--nearby + .center { margin-top: 60px; }
.place__head { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.place__number { margin: 0; font-size: 40px; line-height: 42px; letter-spacing: 0; }
.place__title { margin: 0; width: 330px; max-width: 100%; font-size: 40px; line-height: 42px; white-space: nowrap; }
.place { min-width: 0; }
.place:not(.place--olive) .place__title { width: 279px; }
.place__body { gap: 20px; }
.place__description { margin: 0; min-height: 91px; }
.place__actions { margin-bottom: 13px; }
.place__more { min-height: 50px; height: 50px; padding: 14px 40px; font-size: 18px; line-height: 22px; font-weight: 400; color: #494949; }
.nearby-more { width: 443px; max-width: 100%; height: 52px; padding: 13px 39px; font-size: 20px; line-height: 24px; font-weight: 400; color: #494949; white-space: nowrap; }
/* Стрелка рисуется маской и красится currentColor: файл от дизайнера —
   PNG, у <img> цвет не наследуется, и на наведении стрелка оставалась
   тёмной, пока подпись становилась кремовой. */
.nearby-more__arrow {
  flex: none;
  width: 13px;
  height: 10px;
  background-color: currentColor;
  -webkit-mask: url("../img/nearby-arrow.9b2282936dae.png") center / contain no-repeat;
  mask: url("../img/nearby-arrow.9b2282936dae.png") center / contain no-repeat;
  transition: background-color 0.2s ease;
}
@media (max-width: 899px) {
  .place__description br { display: none; }
  .nearby-more { height: auto; padding-inline: 20px; font-size: 16px; }
}
@media (min-width: 900px) and (max-width: 1279px) {
  .place__description br { display: none; }
  .place__title { font-size: 30px; line-height: 34px; }
}
@media (min-width: 700px) and (max-width: 1279px) {
  .place__description br { display: initial; }
}
@media (max-width: 420px) {
  .place__title { font-size: 32px; line-height: 36px; }
}
.nearby-more { transition: background-color 0.2s ease, color 0.2s ease; }

/* ---------- Аккордеон вопросов ---------- */
.faq { display: grid; gap: 20px; }  /* зазор плашек, замер инспектора */
.faq__item {
  border-radius: var(--radius);
}
/* Цвет несёт ПЛАШКА ВОПРОСА, а не весь блок. Раньше фон стоял на
   .faq__item, и раскрытый ответ, будучи прозрачным, показывал сквозь
   себя цвет плашки — визуально ответ выглядел оливковым или тёмным.
   В макете ответ лежит на кремовом фоне страницы.
   #232323 — по инспектору. Было #1F1F1D, подобранное на глаз. */
.faq__item--dark > .faq__question { background: #232323; }
.faq__item--olive > .faq__question { background: var(--c-olive); }
.faq__item .faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  /* Инспектор (Frame 2087326605/606): полоса 1240×63, скругление 10px,
     поля 12/32, текст Montserrat 500 / 32px / 100% кремовым.
     На 32px текст считается крупным (порог 24px при обычном весе), и
     кремовый на оливковом 3.6 проходит норму 3.0. Поэтому вес 500 из
     макета можно оставить как есть — раньше приходилось поднимать до
     700, потому что кегль стоял 20px. */
  min-height: 63px;
  padding: 12px 32px;
  border-radius: var(--radius);
  color: var(--c-cream);
  font-size: 2rem;
  line-height: 1.21875;   /* 39/32 — высота узла в макете, не «100%» */
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}
/* Мобильный макет FAQ не рисовался. Кегль 32px и поля 32px по бокам
   рассчитаны на контейнер 1240: на 375px плашка не помещалась и давала
   горизонтальную прокрутку. Ужимаем кегль и поля — пропорции сохраняются. */
@media (max-width: 700px) {
  .faq__item .faq__question {
    font-size: 1.375rem;
    padding: 12px 16px;
    gap: var(--s-3);
  }
  .faq__answer { padding-inline: 16px; font-size: 1.125rem; }
}
.faq__item .faq__question::-webkit-details-marker { display: none; }
/* Шеврон рисуем сами: системный маркер <details> в макете не подходит */
.faq__item .faq__question::after {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-3px, -3px);
  transition: transform 0.2s ease;
}
.faq__item.is-open .faq__question::after { content: ""; transform: rotate(-135deg) translate(-3px, -3px); }
/* 26.10: на десктопе стрелка — точный контур из макетов FAQ (24×12, белая, скруглённые концы);
   прежний квадрат с рамкой давал 28×15 и кремовый цвет. Мобильная стрелка (home-mobile.css) прежняя. */
@media (min-width: 700px) {
  .faq__item .faq__question::after { width: 24px; height: 12px; border: 0; background: url("../img/faq-chevron.0f20cce6077e.svg") 0 0 / 24px 12px no-repeat; transform: none; }
  .faq__item.is-open .faq__question::after { transform: rotate(180deg); }
}
/* Значения ответа собраны в одном правиле выше (.faq__answer, замеры
   инспектора). Здесь раньше стоял кремовый текст — наследие тёмной
   секции; на кремовом фоне он был почти нечитаем. */


/* Иконки в пилюлях полосы поиска — как в макете */
.searchbar__field { gap: var(--s-2); }
.searchbar__field svg { flex: none; opacity: 0.9; }

/* Шапка каталога по центру — так в макете «Наши домики» */
.page-hero__inner--center { text-align: center; }
.page-hero__inner--center .searchbar { margin-inline: auto; }
.page-hero__inner--center .page-hero__intro { margin-inline: auto; max-width: 900px; }


/* Полоса поиска на светлой странице. На главной она лежит поверх
   фотографии и полупрозрачная, а в каталоге фон кремовый — пилюли
   сливались с ним и оставалась видна только кнопка.
   #D5CEBB — снято пикселями с выгрузки макета Houses.png. */
.page-hero__inner--center .searchbar__field {
  background: #D5CEBB;
  border-color: transparent;
  color: var(--c-dark);
}

body.page-houses #main {
  background: var(--c-cream);
}

/* Верх секции. В макете H1 стоит на y=198.91, пилюля шапки кончается
   на 118.91 — значит между ними 80. Шапка вынесена из потока, поэтому
   отступ считаем от верха страницы: 198.91 − 0 = 198.91 до базовой
   линии блока. Прежние 60 поднимали весь блок на 60 выше макета, и это
   компенсировали подгонкой высоты секции снизу. */
.houses-catalog {
  padding-bottom: 0;
}
/* Селектор с тем же весом, что и общее правило
   `body:not(.page-home) main > :first-child` — иначе оно перебивает и
   секция остаётся на прежних ~139. */
body.page-houses main > .houses-catalog {
  padding-top: 198.91px;
}

.houses-catalog__inner {
  display: grid;
  gap: 60px;
}

.houses-catalog__head {
  display: grid;
  gap: 20px;
  text-align: center;
}

.houses-catalog__head .section__title {
  margin: 0;
}

/* Панель инспектора: Etude Noire 500, 90/95, #847F57, по центру, блок
   1240×95 («identical to box height»). В выгрузке JSON межстрочный
   записан как 94.53 — это то же значение до округления, но 95 даёт
   ровно высоту блока. */
.page-houses .section__title {
  /* 90px — размер макета, но слово «домики» в такой кегль не влезает в
     узкий кадр и распирало страницу до 412 при 375. Ниже 1280 кегль
     тянется по ширине экрана. */
  font-size: clamp(2.5rem, 6.25vw, 90px);
  line-height: 1.056;
}
@media (min-width: 1280px) {
  .page-houses .section__title {
    font-size: 90px;
    line-height: 95px;
  }
}

/* Панель: Montserrat 400, 20/24, #494949, по центру, блок 1240×96 —
   ровно 4 строки по 24. С межстрочным 24.38 из JSON выходило 98. */
.houses-catalog__intro {
  /* Блок в макете 1240 на всю ширину контейнера. Одного max-width мало:
     это элемент грид-раскладки, и с `margin-inline: auto` он ужимался по
     самой длинной строке (1173 вместо 1240). */
  width: 100%;
  max-width: 1240px;
  min-height: 96px;
  margin-inline: auto;
  color: var(--c-dark);
  font-size: 20px;
  line-height: 24px;
  text-align: center;
}

.houses-catalog__intro p {
  margin: 0;
}

/* Полоса поиска. Координаты из выгрузки Houses_58006-2465.json:
   поля 216 / 219 / 181 стоят на 251, 481, 714 — зазор 14, а кнопка 254
   начинается на 935, то есть отделена зазором 40, а не 14. При едином
   зазоре ряд выходил 912 вместо 938 и всё уезжало на 13px влево. */
.page-houses .houses-search { margin-top: 0; }
/* Точные колонки — только там, где ряд помещается: 938px в узком кадре
   растягивали всю сетку секции и давали прокрутку до 406 при 375. */
@media (min-width: 1280px) {
  .page-houses .houses-search {
    display: grid;
    grid-template-columns: 216px 219px 181px 254px;
    column-gap: 14px;
    width: 938px;
    justify-content: start;
  }
  .page-houses .houses-search > :nth-child(4) { margin-left: 26px; }
}

/* Инспектор: поля 216 / 219 / 181 × 46, поля 14px сверху и снизу,
   60 справа и 32 слева, зазор до подписи 10, фон rgba(132,127,87,0.3),
   скругление 100. Подпись Montserrat 400 16/115% с трекингом −0.02em,
   цвет #494949. Кнопка 254×48, поля 14×40, #9B5026, подпись 16/20
   кремовая. Прежний min-height: 48 при полях 12px и иконке давал 58,
   и весь ряд карточек уезжал вниз на 9px. */
.page-houses .houses-search { align-items: center; }
.page-houses .houses-search .searchbar__field,
.page-houses .houses-search .searchbar__cta {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 100px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem;
}
.page-houses .houses-search .searchbar__field {
  height: 46px;
  min-height: 0;
  justify-content: center;
  padding: 14px 60px 14px 32px;
  background: rgba(132, 127, 87, 0.3);
  color: var(--c-dark);
  line-height: 1.15;
  letter-spacing: -0.02em;
}
/* У поля гостей выключено выравнивание по центру — в макете
   justify-content стоит только у двух полей с датами */
.page-houses .houses-search .searchbar__field:nth-child(3) { justify-content: flex-start; }
.page-houses .houses-search .searchbar__cta {
  /* Ширину задаём явно: сама кнопка не растягивалась по колонке сетки
     и выходила 228 вместо 254 */
  width: 254px;
  height: 48px;
  min-height: 0;
  justify-content: center;
  padding: 14px 40px;
  background: var(--c-terra);
  color: var(--c-cream);
  line-height: 20px;
}
/* Иконки — файлы от дизайнера, рисуются маской, чтобы брать цвет
   подписи. Видимый контур 16×18 у дат и 12×16 у гостей, файлы на
   пиксель шире из-за прозрачной рамки при выгрузке. */
.searchbar__icon {
  flex: 0 0 auto;
  display: block;
  background-color: currentColor;
}
.hero .searchbar__icon { color: #FFFFFF; }
.searchbar__icon--date {
  width: 18px;
  height: 20px;
  -webkit-mask: url("../img/icon-calendar.1f5f0fefa21c.png") no-repeat center / 18px 20px;
  mask: url("../img/icon-calendar.1f5f0fefa21c.png") no-repeat center / 18px 20px;
}
.searchbar__icon--guest {
  width: 14px;
  height: 18px;
  -webkit-mask: url("../img/icon-guest.03bd14f4c82a.png") no-repeat center / 14px 18px;
  mask: url("../img/icon-guest.03bd14f4c82a.png") no-repeat center / 14px 18px;
}

.page-houses .cards--houses {
  margin-top: 0;
}

/* Высоту секции не закрепляем: в макете «Наши домики» — 1399 от
   y=198.91 до 1597.91, и она набирается содержимым. Прежний
   min-height: 1598 компенсировал недостающий верхний отступ, то есть
   подгонял низ вместо того, чтобы поставить верх на место. */

@media (min-width: 1280px) {
  .page-houses .house {
    inline-size: 610px;
    block-size: 500px;
    aspect-ratio: auto;
  }
}

@media (min-width: 1280px) {
  .page-houses .cards--houses { grid-template-columns: 610px 610px; }
}

/* Секция «Доп услуги». Инспектор: блок 1240×1078 на y=1677.91,
   колонка с зазором 60 между заголовочной группой, рядом крупных
   карточек и рядом плиток. Верх секции = 1677.91 − низ «Наших домиков»
   (1597.91) = 80. */
.houses-services {
  padding-top: 80px;
  padding-bottom: 0;
}
.houses-services__inner {
  display: grid;
  gap: 60px;
  justify-items: center;
}
/* Заголовочная группа: H1 1240×95 и подпись 1240×48 — те же, что у
   «Наших домиков», зазор между ними 20 */
.houses-catalog__head--services {
  display: grid;
  gap: 20px;
  width: 100%;
  text-align: center;
  margin-bottom: 0;
}

/* То же и здесь: «Доп услуги» в макете 1078, высота набирается
   содержимым, а не закрепляется числом. */

/* Ряд плиток: четыре 295×295 с зазором 20 (295×4 + 20×3 = 1240).
   Подпись прижата к низу, поля из инспектора 217 сверху, 20 снизу,
   39 и 38 по бокам; поверх фотографии тёмный градиент снизу. */
.cards--service-tiles {
  display: grid;
  /* 06.10: родитель центрирует детей (justify-items: center) — без явной
     ширины auto-fit схлопывал ряд до 40 px на 700–1279. */
  justify-self: stretch;
  width: 100%;
  grid-template-columns: repeat(auto-fit, minmax(min(295px, 100%), 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.service-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  aspect-ratio: 1;
  padding: 20px;
  border-radius: 10px;
  overflow: hidden;
}
/* Точные размеры из инспектора — только там, где ряд из четырёх плиток
   помещается в кадр: 295×4 + 20×3 = 1240. Ниже плитки тянутся долями,
   иначе на 375 появлялась горизонтальная прокрутка до 1260. */
@media (min-width: 700px) and (max-width: 1279px) {
  .cards--service-tiles { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1280px) {
  .cards--service-tiles { grid-template-columns: repeat(4, 295px); }
  .service-tile {
    width: 295px;
    height: 295px;
    aspect-ratio: auto;
    padding: 217px 38px 20px 39px;
  }
}
.service-tile > picture img { display: block; width: 100%; height: 100%; object-fit: cover; }
.service-tile > img,
.service-tile > picture,
.service-tile > .ph {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Градиент по инспектору: снизу вверх, от rgba(0,0,0,0.8) до прозрачного
   на 39.37% высоты. Без него белая подпись пропадает на светлом кадре. */
.service-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(360deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 39.37%);
}
.service-tile__title {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 24px;
  line-height: 29.26px;
  color: var(--c-white, #FFFFFF);
  text-align: center;
}

/* Зазор между заголовочной группой и рядом карточек задаёт сетка
   секции (60). Прежний margin-bottom складывался с ним и давал 120. */
.houses-catalog__head--services p {
  margin: 0;
  color: var(--c-dark);
  font-size: 20px;
  line-height: 24px;
}

.cards--services {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 1280px) {
  .page-houses .cards--services { grid-template-columns: 610px 610px; }
}

.service-card__price {
  flex: none;
  margin: 0;
  color: #FFFFFF;
  font-size: 1rem;
  line-height: 1;
}

.page-houses .section--deep {
  display: none;
}


/* ---------- Акции: Special Offers, карточки 404×540 ---------- */
/* Рамка «Акции» 226–321 (по нижнему выносу «ц»), первая карточка 381. */
body.page-promotions main > .offers-section { padding-top: 226px; padding-bottom: 0; }
.page-promotions .offers-title { margin: 0; font-family: var(--font-heading); font-weight: 500; font-size: 90px; line-height: 95px; color: #847F57; text-align: center; }
.page-promotions .offers-intro { margin: 20px 0 0; text-align: center; }
.promos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 80px 0 0; padding: 0; list-style: none; }
.page-promotions .promos { margin-top: 60px; }
.promo { display: flex; flex-direction: column; align-items: center; gap: 40px; min-width: 0; min-height: 540px; padding: 20px 20px 40px; border-radius: 20px; color: #F7F0E6; text-align: center; }
.promo--olive { background: #847F57; }
.promo--dark { background: #1E1E1E; }
.promo__media { flex: none; width: 100%; padding-inline: 2px; }
.promo--olive .ph { background-color: #F7F0E6; }
.promo__media .ph { display: block; width: 100%; min-height: 0; aspect-ratio: 360 / 220; border-radius: 10px; }
.promo__copy { width: 100%; }
.promo__title { margin: 0; font-family: var(--font-heading); font-weight: 400; color: #F7F0E6; font-size: 24px; line-height: 25px; min-height: 50px; }
.promo__copy .promo__text { margin: 14px 0 0; color: #F7F0E6; font-size: 18px; line-height: 22px; }
.promo__book { flex: none; margin-top: auto; width: 100%; height: 50px; min-height: 50px; padding: 14px 40px; font-size: 18px; font-weight: 500; line-height: 22px; border: 0; background: #F7F0E6; color: #494949; border-radius: 100px; }
.page-promotions .offers-section + .section { padding-top: 60px; }
@media (max-width: 1279px) {
  .promo__title br, .promo__text br { display: none; }
  .promo__title { min-height: 50px; }
}
@media (min-width: 700px) and (max-width: 1099px) {
  .promos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 699px) {
  body.page-promotions main > .offers-section { padding-top: 160px; }
  .page-promotions .offers-title { font-size: 54px; line-height: 60px; }
  .promos { grid-template-columns: minmax(0, 1fr); }
  .promo { min-height: 540px; }
}

/* Перенос по слогам включён для заголовков ради длинных слов на телефоне
   («Правила бронирования»). В карточках он вредит: макет рвёт названия
   по словам, а не по слогам — «Вы-годная», «Госте-приимство» это уже
   не 1 в 1. Отключаем там, где карточка. */
.promo__title,
.house__title,
.place__title,
.reviews__title,
.mosaic__caption h3 {
  hyphens: manual;
}

/* Ряд акций в макете 1260 (Frame «1260 Fill × 540 Hug»), шире общего
   контейнера 1240. У .container ширина задана через width: min(), поэтому
   переопределять надо именно width, max-width её не перебивает. */
.container--wide { width: min(100% - 2 * var(--s-4), 1260px); }


/* ---------- Цвет шапки по страницам ----------
   Макет: на главной пилюля кремовая поверх фотографии, на остальных
   страницах оливковая #847F57 с кремовым текстом. Цвета сняты пикселями
   с выгрузок Houses.png и Special Offers.png.
   Оговорка: кремовый на #847F57 даёт 3.6 при норме 4.5 для текста 15px
   (п. 10.13). Ставим как в макете по прямому указанию, конфликт вынесен
   в открытые вопросы. */
.header__bar {
  background: var(--c-olive);
}
.header__bar .nav__link,
.header__bar .header__phone,
.header__bar .header__logo,
.header__bar .header__name,
.header__bar .header__paw {
  color: var(--c-cream);
}
.page-home .header__bar { background: var(--c-cream); }
.page-home .header__bar .nav__link,
.page-home .header__bar .header__phone,
.page-home .header__bar .header__logo,
.page-home .header__bar .header__name,
.page-home .header__bar .header__paw {
  color: var(--c-dark);
}

/* Светлый текст на существующем тёмно-оливковом токене имеет контраст 4.5. */
.site .header--scrolled .header__bar { background: var(--c-olive-dark); }
.site .header--scrolled .header__bar :is(.nav__link, .header__phone, .header__logo, .header__name, .header__paw, .nav-toggle__button) { color: var(--c-cream); }
.site .header--scrolled .nav--mobile .nav__link { color: var(--c-dark); }

/* Раскрытое меню имеет собственный кремовый фон на любой странице. */
.header__bar .nav--mobile .nav__link {
  color: var(--c-dark);
  white-space: normal;
  hyphens: none;
}
.header__bar .nav--mobile .nav__sublink {
  white-space: normal;
  hyphens: none;
}
.card__title, .mosaic__title { hyphens: none; }

/* ---------- Страница «Размещение»: типографика карточек ----------
   Инспектор карточки домика: название Montserrat 600 24/29 #FFFFFF,
   подпись Montserrat 400 18/22 #FFFFFF на всю ширину блока 546,
   кнопка 546×52 с полями 14×40, фоном #847F57 и скруглением 100,
   «Подробнее» 153×40 Montserrat 400 16/19.5. */
@media (min-width: 1280px) {
  .house__info { width: 546px; }
  .house__title {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 24px;
    line-height: 29px;
    color: #FFFFFF;
  }
  .house__meta {
    width: 546px;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 18px;
    line-height: 22px;
    color: #FFFFFF;
  }
  .house__book {
    width: 546px;
    height: 52px;
    padding: 14px 40px;
    background: var(--c-olive);
    border-radius: 100px;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 20px;
    line-height: 24.38px;
  }
  .house__more {
    width: 153px;
    height: 40px;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 19.5px;
  }
}

/* Подписи плиток: инспектор даёт #F7F0E6, а не белый, и межстрочный 29.
   «Финская сауна» и «Аренда велосипедов» стоят в две строки — перенос
   хранится в названии услуги, поэтому уважаем переводы строк. */
.service-tile__title {
  color: var(--c-cream);
  line-height: 29px;
  white-space: pre-line;
}

/* Подпись поля поиска в макете в одну строку (98×18). В колонку 216 с
   полями 60 и 32 и иконкой она не влезала и рвалась на две. */
.page-houses .houses-search .searchbar__field { white-space: nowrap; }
/* Кнопка тоже в одну строку, как в макете (текст 172 в поле 174). Chromium
   набирает «Забронировать даты» на ~1px шире и переносил «даты». */
.page-houses .houses-search .searchbar__cta { white-space: nowrap; }

/* Блок вопросов на «Размещении» по выгрузке Houses.svg (фрейм 4282):
   плитки кончаются на 2755.91, рамка заголовка 2885.91–2980.91 (снято
   по нижнему выносу «р», как у «Что добавить»), первая плашка 3030.91,
   последняя кончается на 3630.91, знак в подвале — 3790.91.
   Значит сверху 130, под заголовком 50, снизу 0: 160 до знака дают
   общие 60 отступа подвала и 100 его поля. Прежние 80/60/60 поднимали
   вопросы на 40 и отодвигали подвал на 60. */
.houses-faq { padding-top: 80px; }
@media (min-width: 900px) {
  .page-houses .houses-faq { padding-top: 130px; padding-bottom: 0; }
  .page-houses .houses-faq .section__title { margin-bottom: 50px; }
}

/* ---------- Карточка домика на «Размещении»: точная геометрия ----------
   Инспектор, координаты внутри карточки 610×500:
     блок содержимого 32;299 546×169 — снизу тоже 32
     точки          287;299  36×8
     инфо            32;331 546×61 — название 29, зазор 10, подпись 22
     кнопка          32;416 546×52
     «Подробнее»    425;333 153×40, рамка 1px #FFFFFF, скругление 20,
                    поля 10×28
   Арифметика сходится сама: 32 снизу + 52 кнопка + 24 зазор + 61 инфо
   = блок начинается на 331, а точки на 24 выше — на 299. Поэтому здесь
   не абсолютные координаты, а поля и зазоры: так карточка не разъедется,
   если подпись станет длиннее.
   «Подробнее» — единственный абсолютный элемент: в потоке он растягивал
   строку с названием до 713 и вылезал за карточку вправо. Координаты
   считаются от блока инфо (32;331), поэтому 425−32 и 333−331.
   У второй карточки инспектор показывает 341 вместо 333 — расхождение
   самого макета на 8px, берём 333 (три карточки из четырёх). */
@media (min-width: 1280px) {
  .house {
    padding: 0 32px 32px;
    grid-template-rows: auto auto;
    align-content: end;
    row-gap: 24px;
  }
  .house__dots {
    position: absolute;
    inset-inline: 0;
    bottom: 193px;   /* 500 − 299 − 8 */
    top: auto;
    z-index: 2;
  }
  .house__overlay {
    position: relative;
    display: block;
    width: 546px;
    padding: 0;
    margin: 0;
  }
  .house__info { display: grid; gap: 10px; width: 546px; }
  .house__title,
  .house__meta { margin: 0; }
  .house__more {
    position: absolute;
    left: 393px;
    top: 2px;
    width: 153px;
    height: 40px;
    padding: 10px 28px;
    border: 1px solid #FFFFFF;
    border-radius: 20px;
    background: transparent;
  }
  .house__book { margin: 0; }
}

/* ---------- Наведение на карточку домика ----------
   Одинаково на главной и на «Размещении»: фотография чуть приближается,
   состояния кнопок зависят от самих кнопок. Движение выключается для тех, кто просил уменьшить
   анимацию (п. 10.13 ТЗ). */
.house__media img {
  transition: transform 0.35s ease;
}

@media (hover: hover) and (pointer: fine) {
.house:hover .house__media img{
  transform: scale(1.03);
}
}

.house__book { transition: background-color 0.2s ease; }
.house__more { transition: background-color 0.2s ease, color 0.2s ease; }
@media (prefers-reduced-motion: reduce) {

@media (hover: hover) and (pointer: fine) {
.house:hover .house__media img{ transform: none; }
}

}

/* ---------- Подписи кнопок ----------
   «Забронировать», «Забронировать даты» и «Подробнее» набраны обычным
   начертанием. В инспекторе у «Забронировать» стоит 500, но файла
   Montserrat Medium в проекте нет, и браузер подделывает его из 600 —
   подпись выглядела жирной. По прямому указанию заказчика 05.09 везде
   ставим 400. */
.house__book,
.house__more,
.searchbar__cta,
.header__aside .btn { font-weight: 400; }

/* ---------- Первый экран главной ----------
   Заголовок: Etude Noire 700, 90/95, блок 788×95, по центру. Заливка —
   радиальный градиент по тексту, из инспектора:
   radial-gradient(53.36% 122.5% at 46.64% -0.53%, #6A6C54 0%, #969044 100%).
   Начертание 700 у Etude Noire в проекте есть, подделывать нечего. */
.searchbar__date-mobile, .home-mobile-copy,
.mobile-catalog-services, .mobile-calendar-next, .mobile-gallery-more { display: none; }
.hero__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 90px;
  line-height: 95px;
  text-align: center;
  /* Цвет остаётся запасным: если браузер не умеет background-clip: text,
     заголовок будет оливковым, а не невидимым. */
  color: var(--c-olive);
  background-image: radial-gradient(53.36% 122.5% at 46.64% -0.53%, #6A6C54 0%, #969044 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero__title { -webkit-text-fill-color: transparent; color: transparent; }
}
@media (max-width: 1279px) {
  /* 90px в узкий кадр не влезают: «сезон» распирало страницу */
  .hero__title { font-size: clamp(2.5rem, 6.25vw, 90px); line-height: 1.056; }
}

/* Подзаголовок: Montserrat 400 18/22 белым по центру, блок 865×44 —
   две строки, перенос после «восстановиться» стоит в самом тексте. */
.hero__subtitle {
  max-width: 865px;
  /* Замер десктопа: от заголовка первого экрана до подзаголовка 10px. */
  margin: 10px auto 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 18px;
  line-height: 22px;
  color: #FFFFFF;
  text-align: center;
}

/* Полоса поиска первого экрана. Инспектор: группа полей 644×46 с
   зазором 14, поля 216 / 219 / 181 × 46 с полями 14/60/14/32 и фоном
   rgba(255,255,255,0.3); кнопка 254×48, поля 14×40, фон #F7F0E6,
   скругление 100. От каталога отличается только цветом: там поля
   оливковые, а кнопка терракотовая. */
@media (min-width: 1280px) {
  .hero .searchbar {
    display: grid;
    grid-template-columns: 216px 219px 181px 254px;
    column-gap: 14px;
    align-items: center;
    /* Колонки в сумме 912 при полосе 938: между группой полей (644) и
       кнопкой (254) зазор 40, а не 14. При выравнивании по центру всё
       уезжало на 13px вправо. */
    justify-content: start;
    width: 938px;
    margin-inline: auto;
  }
  .hero .searchbar > :nth-child(4) { margin-left: 26px; }
}
/* Инспектор: от подзаголовка до ряда плашек 60px. */
@media (min-width: 700px) {
  .hero .searchbar { margin-top: 60px; }
}
.hero .searchbar__field,
.hero .searchbar__cta {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 100px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem;
}
/* Свечение стекла сосредоточено у контура плашки: радиальная белая
   заливка растёт от прозрачного центра до 30% на краю. */
.hero .searchbar__field {
  height: 46px;
  min-height: 0;
  justify-content: center;
  padding: 14px 60px 14px 32px;
  border: 1px solid transparent;
  background:
    radial-gradient(ellipse at center, rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, 0.12) 82%, rgba(255, 255, 255, 0.3) 100%) padding-box,
    radial-gradient(ellipse at center, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.3) 100%) border-box;
  box-shadow: inset 0 0 8px rgba(255, 255, 255, 0.12), 0 0 6px rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  color: var(--c-cream);
  line-height: 1.15;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
/* Без backdrop-filter полупрозрачный белый на светлом кадре нечитаем:
   там подложка плотнее. */
@supports not ((-webkit-backdrop-filter: blur(4px)) or (backdrop-filter: blur(4px))) {
  .hero .searchbar__field { background: rgba(73, 73, 73, 0.55); }
}
/* Десктоп: матовая заливка из макета; градиент только в тонкой рамке. */
@media (min-width: 700px) {
  @supports ((-webkit-backdrop-filter: blur(4px)) or (backdrop-filter: blur(4px))) {
    .page-home .hero .searchbar__field {
      position: relative;
      background: rgba(255, 255, 255, 0.3);
      background-clip: padding-box;
      box-shadow: none;
      -webkit-backdrop-filter: blur(20px);
      backdrop-filter: blur(20px);
    }
    .page-home .hero .searchbar__field::before {
      content: '';
      position: absolute;
      inset: -1px;
      padding: 1px;
      border-radius: inherit;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.52) 0%, rgba(255, 255, 255, 0.35) 100%);
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events: none;
    }
  }
}
.hero .searchbar__field:nth-child(3) { justify-content: flex-start; }
.hero .searchbar__cta {
  width: 254px;
  height: 48px;
  min-height: 0;
  justify-content: center;
  padding: 14px 40px;
  background: var(--c-cream);
  color: var(--c-deep);
  line-height: 20px;
  white-space: nowrap;
}

/* ---------- Подпись у лапы ----------
   Показываем свою, а не системную подсказку: та появляется с задержкой,
   рисуется шрифтом системы и встаёт где придётся. Своя стоит под лапой
   по центру и появляется вместе с ней. */
.header__paw-wrap { position: relative; display: inline-flex; }
.header__paw-note {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: none;
  z-index: 5;
  box-sizing: border-box;
  width: 204px;
  height: 69px;
  padding: 20px 14px 9px;
  background: url("../img/pet-tooltip.4d0fc64a3a87.png") center / 100% 100% no-repeat;
  color: #494949;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
/* Именно :focus-visible, а не :focus-within: при клике мышью браузер
   оставляет фокус на обёртке, и облачко висело на экране после нажатия.
   С клавиатуры :focus-visible срабатывает — подсказка остаётся доступной. */
.header__paw-wrap:focus-visible .header__paw-note{ opacity: 1; }
@media (hover: hover) and (pointer: fine) {
.header__paw-wrap:hover .header__paw-note{ opacity: 1; }
}


/* «Подробнее»: панель инспектора даёт межстрочный 20, в выгрузке JSON
   он записан как 19.5 — то же значение до округления. */
.house__more { line-height: 20px; }

/* ---------- Кнопки блока «О нас» ----------
   Инспектор (Frame 2087326585): ряд 531×52, зазор 32. Подписи
   «Забронировать даты» 218×24 (#F7F0E6) и «Подробнее» 121×24 (#494949),
   обе Montserrat 400 20/24 — то есть кнопки 298×52 и 201×52 при полях
   40 по горизонтали. Стояло 600-е начертание, оттого и выглядело жирнее. */
.about__text .split__actions {
  display: flex;
  align-items: flex-start;
  gap: 32px;
}
.about__text .split__actions .btn {
  min-height: 52px;
  height: 52px;
  padding: 14px 40px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 20px;
  line-height: 24px;
}

/* ---------- Слоган: сердце ----------
   Инспектор: фрейм слогана 809.13×118.13 на 315;2420, сердце 50×50 на
   1064;2478 с поворотом 13.25° — это 749 и 58 от левого верхнего угла
   фрейма. */
.slogan__frame { position: relative; }
.slogan__heart {
  position: absolute;
  left: 749px;
  top: 58px;
  width: 50px;
  height: 50px;
  transform: rotate(14deg);
  pointer-events: none;
}
@media (min-width: 1240px) {
  /* Фрейм слогана начинается на 315, как и сам текст */
  .slogan__frame { width: 809.13px; margin-inline: 215px auto; }
  .slogan .container > .slogan__frame > p { margin-inline: 0; }
}
@media (max-width: 1239px) { .slogan__heart { display: none; } }

/* ---------- «Наша территория» ----------
   Инспектор: заголовок 674×190 Etude Noire 500 90/95 #847F57 — две
   строки; подпись 674×58 Montserrat 400 24/29 #494949 — тоже две. */
.mosaic .section__title {
  width: 674px;
  line-height: 95px;
}
@media (max-width: 1279px) {
  .mosaic .section__title { width: auto; line-height: 1.056; }
}

/* ================= Страница дома по макету «Первый домик» =================
   Размеры сняты с выгрузки Figma и приведены к контейнеру 1240:
   поля 858 + 362 при зазоре 20, карточки 858 + 360, мозаика
   609.38 + 294.08 + 294.08 при зазоре 21.23, колонки 598.77 при 42.46.
   Всё под .page-house: страница отдельная, общие блоки не задеваем. */

/* Нормализация проекта перечисляет теги поимённо (глобальный `*`
   запрещён Контуром), и label в список не попал — у него остаётся
   content-box, из-за чего кнопка 143×40 вырастала до 209×62.
   Перечисляем свои блоки с размерами из макета. */
.page-house :where(.booking-field, .calendar, .guests, .chip, .amenity-tag,
                   .equipment, .equipment__toggle, .fact-card, .house-mosaic__link) {
  box-sizing: border-box;
}

/* ---------- Заголовок ---------- */
.page-house .house-title { padding-block: 198.91px 60px; }
.page-house .house-title h1 {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 90px;
  line-height: 95px;
  text-align: center;
  color: var(--c-olive);
  margin: 0;
}

/* ---------- Блок бронирования ---------- */
.page-house .booking-panel { padding-block: 0 var(--s-8); }

.page-house .booking-panel__fields {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}
.page-house .booking-field {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 67.47px;
  padding: 21.23px 42.46px;
  background: var(--c-sand);
  border-radius: var(--radius);
}
.page-house .booking-field--dates { flex: 0 0 858px; gap: 36px; }
.page-house .booking-field--guests { flex: 1 1 auto; gap: 13px; }

.page-house .booking-field__slot {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 25px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 21.23px;
  color: var(--text);
  cursor: pointer;
}
.page-house .booking-field__slot--static { cursor: default; }
.page-house .booking-field__slot .icon { width: 20px; height: 20px; color: var(--text); }
.page-house .booking-field__dash { color: #494949; }
/* Выбранное поле подсвечивается: гость видит, какую дату поставит клик */
.page-house .booking-field__slot.is-active { color: var(--accent); font-weight: 500; }

.page-house .booking-panel__cards {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

/* ---------- Календарь ---------- */
.page-house .calendar {
  flex: 0 0 858px;
  padding: 42.46px;
  background: var(--c-white);
  border-radius: 17px;

  min-height: 518.08px;
}
.page-house .calendar__months { display: flex; gap: 59.45px; }
.page-house .calendar__month { flex: 1 1 0; }

.page-house .calendar__head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42.46px;
  margin-bottom: 21.23px;
}
.page-house .calendar__title {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 21.23px;
  line-height: 26px;
  color: var(--text);
}
.page-house .calendar__arrow {
  position: absolute;
  top: 50%;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  /* Явное центрирование: уголок — блочный ::before, и в потоке кнопки
     он вставал по верхнему краю, отчего стрелка выглядела смещённой. */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid #E0E0E0;
  border-radius: 50%;
  background: var(--c-white);
  cursor: pointer;
}
.page-house .calendar__arrow--prev { left: 0; }
.page-house .calendar__arrow--next { right: 0; }
.page-house .calendar__arrow.mobile-calendar-next { display: none; }
/* Стрелка нарисована рамкой: ради двух треугольников не стоит грузить
   файл, а в спрайте иконок навигации нет — она чисто декоративная. */
.page-house .calendar__arrow::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-top: 1.5px solid var(--text);
  border-right: 1.5px solid var(--text);
  /* Уголок нарисован рамкой, его видимая масса смещена к острию: без
     сдвига стрелка «вправо» начинается от центра кнопки. Сдвиг именно
     transform, margin здесь сложился бы с авто-полями. */
  transform: translateX(-3px) rotate(45deg);
}
.page-house .calendar__arrow--prev::before { transform: translateX(3px) rotate(-135deg); }

@media (hover: hover) and (pointer: fine) {
.page-house .calendar__arrow:hover:not([disabled]){ background: var(--c-hover); border-color: transparent; }
}

.page-house .calendar__arrow[disabled] { cursor: default; }
.page-house .calendar__arrow[disabled]::before { border-color: #CBD2E0; }

.page-house .calendar__grid {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 4.25px;
  table-layout: fixed;
}
.page-house .calendar__grid th {
  padding-bottom: 21.23px;
  font-weight: 400;
  font-size: 14.86px;
  color: var(--text);
}
.page-house .calendar__grid th abbr { text-decoration: none; }
.page-house .calendar__cell { height: 50.96px; text-align: center; padding: 0; }

.page-house .calendar__day {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42.46px;
  height: 42.46px;
  border: 0;
  border-radius: 50%;
  background: none;
  font: inherit;
  font-size: 14.86px;
  color: #667595;
  cursor: pointer;
}
.page-house .calendar__day--off { color: #CBD2E0; cursor: default; }

@media (hover: hover) and (pointer: fine) {
.page-house .calendar__day:hover:not(.calendar__day--off){ background: var(--c-hover); }
}


/* Полоса диапазона идёт по всей ячейке, поэтому фон живёт на td,
   а круг у краёв — на самой кнопке. */
.page-house .calendar__cell--range,
.page-house .calendar__cell--range-start,
.page-house .calendar__cell--range-end { background: #FFF0E4; }
.page-house .calendar__cell--range-start { border-radius: var(--radius) 0 0 var(--radius); }
.page-house .calendar__cell--range-end { border-radius: 0 var(--radius) var(--radius) 0; }
/* Обрыв полосы на краях недели скругляем: иначе она упирается в край
   карточки прямым срезом, чего в макете нет. */
.page-house .calendar__grid tr > .calendar__cell:first-child {
  border-start-start-radius: var(--radius);
  border-end-start-radius: var(--radius);
}
.page-house .calendar__grid tr > .calendar__cell:last-child {
  border-start-end-radius: var(--radius);
  border-end-end-radius: var(--radius);
}

.page-house .calendar__cell--selected .calendar__day{ background: #FFCDA6; }
@media (hover: hover) and (pointer: fine) {
.page-house .calendar__cell--selected .calendar__day:hover{ background: #FFCDA6; }
}


.page-house .calendar__day:focus-visible,
.page-house .calendar__arrow:focus-visible,
.page-house .booking-field__slot:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.page-house .calendar__status { margin: 12px 0 0; font-size: 14px; line-height: 20px; color: var(--accent); }
.page-house .calendar__status:empty { display: none; }

/* Сегодняшний день помечен точкой под цифрой */
.page-house .calendar__cell--today .calendar__day { position: relative; }
.page-house .calendar__cell--today .calendar__day::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 3px;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: #E23F2A;
}

/* ---------- Гости, итог, кнопка ---------- */
.page-house .booking-panel__sidebar {
  flex: 1 1 362px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.page-house .guests {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25.48px;
  padding: 25.48px;
  min-height: 339.3px;
  background: var(--c-white);
  border-radius: 16.99px;
}
.page-house .guests__title {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 21.23px;
  line-height: 26px;
  color: var(--text);
}
.page-house .guests__row { position: relative; width: 100%; }
.page-house .guests__line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}
.page-house .guests__label { font-size: 21.23px; color: var(--text); }
.page-house .guests__control { display: inline-flex; align-items: center; gap: 12px; }
.page-house .guests__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 31.85px;
  height: 31.85px;
  border: 0;
  border-radius: 50%;
  background: #FFF0E6;
  font: inherit;
  font-size: 24px;
  line-height: 1;
  color: var(--text);
  cursor: pointer;
}
.page-house .guests__step[disabled] { color: #CBD2E0; cursor: default; }
.page-house .guests__value { min-width: 20px; text-align: center; font-size: 21.23px; }
.page-house .guests__note {
  margin: 10.62px 0 0;
  font-size: 18px;
  color: #B5B5B5;

  line-height: 22px;
}
.page-house .guests__hint { display: inline-flex; vertical-align: middle; }
.page-house .guests__hint-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; padding: 0; border: 1px solid currentColor;
  border-radius: 50%; background: transparent; font: 500 12px/1 var(--font-body);
  cursor: help;
}
.page-house .guests__hint-text {
  position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 10;
  white-space: normal;
  box-sizing: border-box; width: min(280px, 75vw); padding: 10px 12px; border-radius: 8px;
  background: var(--c-white); box-shadow: 0 6px 24px rgb(0 0 0 / .14);
  color: var(--text); font: 400 14px/1.4 var(--font-body);
  opacity: 0; visibility: hidden;
}

.page-house .guests__hint:is(:focus-within) .guests__hint-text{ opacity: 1; visibility: visible; }
@media (hover: hover) and (pointer: fine) {
.page-house .guests__hint:is(:hover, :focus-within) .guests__hint-text{ opacity: 1; visibility: visible; }
}

@media (min-width: 700px) and (max-width: 899px) {
  .page-house .guests__hint-text { left: auto; right: 0; }
}
.page-house .guests__hint-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.page-house .booking-summary {
  display: flex;
  gap: 25px;
  margin: 0;

  font-size: 20px;

  line-height: 24px;
}
.page-house .booking-summary__item { display: inline-flex; align-items: center; gap: 8px; }
.page-house .booking-summary .icon { width: 22px; height: 22px; color: var(--accent); }
.page-house .booking-total {
  margin: 0;
  font-weight: 500;
  font-size: 24px;
  line-height: 29px;
  text-align: center;
  color: var(--text);
}
/* Подсказка «i» у цены. Значок вынесен за правый край цены абсолютом,
   чтобы сама цена оставалась по центру, как в макете. */
.page-house .booking-total { position: relative; width: fit-content; max-width: calc(100% - 68px); margin-inline: auto; }  /* место под значок, если вместо цены длинное сообщение об ошибке */
.page-house .booking-hint {
  position: absolute;
  top: 50%;
  left: calc(100% + 10px);
  transform: translateY(-50%);
  display: inline-flex;
}
.page-house .booking-hint__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1.5px solid var(--accent);
  border-radius: 50%;
  background: transparent;
  color: var(--accent);
  font: 600 14px/1 var(--font-body);
  cursor: help;
}
.page-house .booking-hint__text {
  position: absolute;
  right: -8px;
  bottom: calc(100% + 10px);
  z-index: 5;
  width: 280px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--c-white);
  box-shadow: 0 6px 24px rgb(0 0 0 / 0.14);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.35;
  text-align: left;
  color: var(--text);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s, visibility 0.15s;
}

.page-house .booking-hint:is(:focus-within) .booking-hint__text{ opacity: 1; visibility: visible; }
@media (hover: hover) and (pointer: fine) {
.page-house .booking-hint:is(:hover, :focus-within) .booking-hint__text{ opacity: 1; visibility: visible; }
}

.page-house .booking-hint.is-dismissed .booking-hint__text { opacity: 0; visibility: hidden; }
/* Правая колонка по макету The First: карточка гостей 339.3 (441.62–780.92),
   строка «ночи/гости» — текст с 802, цена — с 845, кнопка 887.92–959.39,
   то есть низ кнопки на одной линии с низом календаря. Пояснение ушло в
   подсказку, поэтому колонка больше не выше календаря. Подпись под
   счётчиком 18/18 — иначе строки гостей шли на 4 px реже, чем в макете. */
@media (min-width: 700px) {
  .page-house .guests__note { line-height: 18px; }
  .page-house .booking-summary { margin-top: 3.5px; }
  .page-house .booking-total { margin-top: -1.1px; }
  .page-house .booking-submit { margin-top: 3px; height: 71.47px; min-height: 0; padding-block: 0; }
}
.page-house .booking-error {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--accent);
  text-align: center;
}
.page-house .booking-submit {
  width: 100%;
  min-height: 71.47px;
  border-radius: var(--radius-pill);
  font-size: 24px;
  font-weight: 500;

  line-height: 29px;

  padding: 21.23px 32px;
}

/* ---------- Мозаика фото ---------- */
.page-house .house-mosaic-section { padding-block: 0 var(--s-8); }
.page-house .house-mosaic {
  display: grid;
  grid-template-columns: 609.38fr 294.08fr 294.08fr;
  grid-auto-rows: 171.99px;
  gap: 21.23px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-house .house-mosaic__item { margin: 0; }
.page-house .house-mosaic__item:first-child { grid-column: 1; grid-row: span 2; }
.page-house .house-mosaic__link {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 21.23px;
}
.page-house .house-mosaic__item:first-child .house-mosaic__link { border-radius: 24.37px; }
.page-house .house-mosaic__link img { width: 100%; height: 100%; object-fit: cover; }

/* Последняя плитка ведёт в просмотрщик: затемнение и подпись «Смотреть» */
.page-house .house-mosaic__more {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  background: rgba(0, 0, 0, .2);
  color: var(--c-white);
  font-size: 21.23px;

  flex-direction: column;
}
.page-house .house-mosaic__more .icon { width: 22px; height: 22px; }
.page-house .house-mosaic__rest { display: none; }

/* ---------- Карточки-факты ---------- */
.page-house .house-facts-section { padding-block: 0 42.46px; }
.page-house .house-facts { display: flex; gap: 42.46px; }
.page-house .fact-card {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 21.23px;
  padding: 21.2329px 33.9726px;
  background: var(--c-blush);
  border-radius: 10.6164px;
}
.page-house .fact-card__title {
  font-family: var(--font-body);
  text-wrap: wrap;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0;
  font-weight: 600;
  font-size: 22px;
  line-height: 27px;
  color: var(--text);
}
.page-house .fact-card__title .icon { width: 22px; height: 22px; color: var(--accent); }
.page-house .fact-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 21.23px;
  margin: 0;
}
.page-house .chip {
  display: inline-flex;
  align-items: center;
  gap: 10.62px;
  min-height: 27px;
  padding: 0;
  background: transparent;
  border-radius: 0;
  font-size: 22px;
  color: var(--text);

  line-height: 27px;
}
.page-house .chip .icon { width: 18px; height: 18px; color: var(--accent); }

/* ---------- «О домике» и «Удобства» ---------- */
.page-house .house-about-section { padding-block: 0 48px; }
.page-house .house-about { display: flex; gap: 42.46px; }
.page-house .house-about__text,
.page-house .house-about__amenities { flex: 1 1 0; }
.page-house .house-about .section__title {
  margin: 0 0 25.48px;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 34px;
  line-height: 36px;
  color: var(--accent);
}
.page-house .amenity-tags {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10.62px 21.23px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-house .amenity-tag {
  display: flex;
  align-items: center;
  min-height: 43.99px;
  padding: 8.49px 21.23px;
  background: var(--c-sand);
  border-radius: 10.62px;
  font-size: 22px;
  line-height: 27px;
  color: var(--text);
}
@media (min-width: 1280px) {
  .page-house .amenity-tag--alice { justify-content: center; padding-inline: 10px; white-space: nowrap; }
}

/* ---------- Развёрнутое описание ----------
   Оба состояния занимают контейнер 1240. Колонки по 320px
   распределены между внутренними полями 40px. */
.page-house .equipment-section { padding-block: 0 var(--s-8); }
.page-house .equipment {
  display: flex;
  flex-direction: column;
  padding: 24px 40px;
  background: #E9D8CA;
  border-radius: var(--radius);
}
/* Переключатель — скрытый чекбокс: закрытый <details> прячет содержимое
   целиком, а макет показывает начало колонок с затуханием. */
.page-house .equipment__toggle {
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 173px;
  /* .btn держит min-height 44 и padding 14/40 — в макете кнопка ниже,
     40 при padding 10/32. Перебиваем явно, на узких экранах отступ
     под палец возвращаем ниже. */
  height: 40px;
  min-height: 40px;
  margin-top: 8px;
  padding: 10px 32px;
  /* Пункты списка в этом блоке 20px, кнопка остаётся обычной 16-й:
     иначе она наследует крупный шрифт и вырастает вдвое */
  font-size: 18px;
  line-height: 22px;
  cursor: pointer;
  font-weight: 400;
  color: #494949;
}
/* Раскрытая надпись короче, и кнопка в макете уже: 143 против 173 */
.page-house .equipment__switch:checked ~ .equipment__toggle { min-width: 143px; }
.page-house .equipment__toggle-less { display: none; }
.page-house .equipment__switch:checked ~ .equipment__toggle .equipment__toggle-more { display: none; }
.page-house .equipment__switch:checked ~ .equipment__toggle .equipment__toggle-less { display: inline; }
/* Клавиатура: у чекбокса нет своей рамки, подсвечиваем саму кнопку */
.page-house .equipment__switch:focus-visible ~ .equipment__toggle {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.page-house .equipment__columns {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0;
  width: 100%;
  max-width: none;
  margin-inline: auto;
}
/* Колонку задаёт группа, а не браузер: multi-column выравнивает колонки
   по высоте и раскладывает группы не так, как в макете. */
.page-house .equipment__column {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 320px;
}
/* Свёрнутое состояние: видно начало колонок, дальше текст затухает */
.page-house .equipment__switch:not(:checked) ~ .equipment__columns {
  max-height: 210px;
  overflow: hidden;
  mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
}
.page-house .equipment__group {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.page-house .equipment__title {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 20px;
  line-height: 24px;
  color: var(--text);
}
.page-house .equipment__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-house .equipment__list li {
  margin: 0;
  font-size: 20px;
  line-height: 24px;
  color: var(--text);
}

/* ---------- Отзывы ---------- */
.page-house .house-reviews-section { padding-block: 0; }
.page-house .house-reviews-section .section__title {
  margin: 0 0 60px;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 34px;
  line-height: 36px;
  color: var(--accent);
}
.page-house .reviews {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-house .reviews__item {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
}
.page-house .reviews__media { height: 220px; margin-bottom: 0; border-radius: 20px; overflow: hidden; }
.page-house .reviews__media img { width: 100%; height: 100%; object-fit: cover; }
.page-house .reviews__text { margin: 0; }
.page-house .reviews__text p { margin: 0; font-size: 18px; line-height: 22px; color: var(--text); white-space: pre-line; }
.page-house .reviews__author {
  margin: 0;
  font-weight: 500;
  font-size: 20px;
  line-height: 24px;
  text-align: right;
  color: var(--text);
}
@media (min-width: 700px) and (max-width: 1099px) {
  .page-house .reviews { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 700px) and (max-width: 1279px) {
  .page-house .reviews__item { min-width: 0; }
  .page-house .reviews__media picture { width: 100%; }
}

/* ---------- Узкие экраны ----------
   Мобильный макет не приходил: складываем блоки в одну колонку, чтобы
   страница оставалась читаемой до отдельной задачи по адаптиву. */
@media (max-width: 1279px) {
  .page-house .house-title h1 { font-size: 56px; line-height: 1.06; }
  .page-house .booking-panel__fields,
  .page-house .booking-panel__cards,
  .page-house .house-facts,
  .page-house .house-about { flex-wrap: wrap; }
  .page-house .booking-field--dates,
  .page-house .calendar,
  .page-house .booking-panel__sidebar { flex: 1 1 100%; }
  .page-house .house-mosaic { grid-template-columns: 1fr 1fr; }
  .page-house .house-mosaic__item:first-child { grid-column: span 2; }
}
@media (max-width: 767px) {
  .page-house .calendar__months { flex-direction: column; }
  .page-house .amenity-tags { grid-template-columns: 1fr; }
  .page-house .equipment__toggle { height: var(--tap-min); }
  .page-house .equipment__columns { flex-direction: column; gap: 32px; }
  .page-house .equipment__column { width: 100%; }
  .page-house .reviews { grid-template-columns: 1fr; }
}
@media (min-width: 768px) and (max-width: 899px) {
  .page-house .amenity-tags { grid-template-columns: 1fr; }
}

body.page-house main > .house-title:first-child { padding-top: 198.91px; }
.page-house .house-about .prose { font-size: 22px; line-height: 27px; }
.page-house .house-about .prose p { margin: 0; }
.page-house .house-about__text, .page-house .house-about__amenities { min-width: 0; }
.page-house .house-mosaic__link picture, .page-house .reviews__media picture { display: block; height: 100%; }
.page-house .equipment__switch:checked ~ .equipment__columns { min-height: 1080px; }
.page-house .equipment__switch:not(:checked) ~ .equipment__columns .equipment__group ~ .equipment__group { visibility: hidden; }
@media (max-width: 1279px) {
  .page-house .equipment__column { width: 30%; }
}
@media (max-width: 767px) {
  body.page-house main > .house-title:first-child { padding-top: 150px; }
  .page-house .house-title h1 { font-size: 42px; }
  .page-house .booking-field { padding: 16px; }
  .page-house .booking-field--dates { gap: 12px; }
  .page-house .booking-field__slot { font-size: 14px; }
  .page-house .calendar { padding: 24px; }
  .page-house .house-facts, .page-house .house-about { flex-direction: column; }
  .page-house .equipment { padding: 24px; }
  .page-house .equipment__column { width: 100%; }
  .page-house .equipment__switch:checked ~ .equipment__columns { min-height: 0; }
}

.page-house .chip .house-icon--sofa_bed { width: 36px; height: 25px; }
.page-house .chip .house-icon--bunk_bed { width: 26px; height: 23px; }
.page-house .chip .house-icon--bed { width: 26px; height: 23px; }
.page-house .house-icon { object-fit: contain; flex-shrink: 0; }

.page-house .house-mosaic--empty { height: 365.21px; }

.page-house .house-mosaic__link { aspect-ratio: auto; }
@media (min-width: 1280px) {
  .page-house .fact-card { min-height: 117.7px; }
  .page-house .fact-card__chips { flex-wrap: nowrap; }
  .page-house .fact-card:last-child .fact-card__chips { width: 100%; justify-content: space-between; gap: 10px; }
}
@media (min-width: 1280px) {
  .page-home .quote { grid-template-columns: 693px 455px; gap: 92px; align-items: start; }
  .page-home .quote__body { padding-top: 44px; }
  .page-home .quote__media { align-self: start; }
}
@media (min-width: 900px) and (max-width: 1279px) {
  /* Доли, а не 1fr против 455fr: при 1fr текст получал одну долю из 456
     и колонка схлопывалась в ~2px, а абзацы с max-width 635 уезжали за
     левый край экрана (замер: left −131 при 1024). Секция выглядела
     пустой кремовой полосой на всём диапазоне 900–1279. Пропорция
     635:455 сохраняет замысел этого брейкпоинта — фото уже, чем на
     десктопе, — и стыкуется с правилом 1280 без скачка. */
  .page-home .quote { grid-template-columns: minmax(0, 635fr) minmax(0, 455fr); gap: 40px; padding-inline: 40px; }
  .page-home .quote__text { width: auto; height: auto; margin-left: 0; }
  .page-home .quote__mark--open { left: -40px; }
  .page-home .quote__mark--close { left: auto; right: 0; top: auto; bottom: -95px; }
}
@media (min-width: 900px) and (max-width: 1279px) {
  /* На промежуточной ширине текст «О нас» выше прежней фиксированной
     секции; естественная высота не даёт цитате наехать на этот текст. */
  .page-home .about { block-size: auto; min-block-size: clamp(420px, 44.93vw, 647px); }
  .page-home .about__media { align-self: start; height: clamp(420px, 44.93vw, 647px); }
  .page-home .about__media picture, .page-home .about__media img { height: 100%; }
  .page-home .about__text .section__title { margin-bottom: 24px; }
  .page-home .about__text > p:not(.split__actions) { font-size: 16px; line-height: 22px; }
  .page-home .about__text > p:not(.split__actions) + p:not(.split__actions) { margin-top: 24px; }
  .page-home .about__text .split__actions { margin-top: 32px; }
  .page-home .quote { margin-block: 80px; }
  .page-home .quote__media { align-self: start; }
  .page-home .quote__mark--close { right: -16px; bottom: -40px; }
}

/* Состояния карточек территории. Статика — чистый кадр с заголовком;
   затемнение, размытие, описание и кнопка появляются только при
   наведении (десктоп) или нажатии (тач, класс .is-open). */
.territory-card > picture, .territory-card > .ph {
  display: block;
  width: 100%;
  height: 100%;
  transition: filter .2s ease;
}
/* Кадры в актуальном Desktop Main (7).png: фото не меняем, только
   выравниваем фокус внутри квадратных плиток. На мобильном свой макет. */
@media (min-width: 900px) {
  .page-home .territory-card--sports > picture img { object-position: center bottom; }
  .page-home .territory-card--sauna > picture img { object-position: center 72%; }
  .page-home .territory-card--river > picture img { object-position: center 93%; }
  .page-home .territory-card--pavilion > picture img { object-position: 40% center; }
  .page-home .territory-card--workshops > picture img { object-position: center 91%; }
}
/* Подпись занимает всю плитку: отступы из макета (295×295,
   padding 217/38/20/39) сами прижимают заголовок к низу. */
.territory-card .mosaic__caption {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 217px 38px 20px 39px;
  background: linear-gradient(to bottom, transparent 55%, rgba(0, 0, 0, .48) 100%);
}
.territory-card .mosaic__caption :is(h2, h3) { margin: 0; font-size: 24px; line-height: 29px; font-weight: 600; }
.territory-card__details { display: none; width: 100%; }
.territory-card .territory-card__details p {
  width: 262px;
  max-width: 100%;
  margin: 0 auto;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 400;
  line-height: 22px;
  text-align: center;
  color: #F7F0E6;
}
.territory-card__link {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 40px;
  padding: 10px 28px;
  margin-top: 24px;
  border-radius: 20px;
  background: #847F57;
  color: #F7F0E6;
  font: 500 16px/20px var(--font-body);
  text-decoration: none;
}
/* Подложка карточки: параметры из макета (Rectangle 34624283).
   Кликов не перехватывает — кнопка «Подробнее» лежит под ней по слоям.
   В статике её нет, поэтому opacity, а не display: так остаётся переход. */
.territory-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: #00000040;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
}
/* Без backdrop-filter сохраняется та же прозрачность затемнения. */
@supports not ((-webkit-backdrop-filter: blur(4px)) or (backdrop-filter: blur(4px))) {
  .territory-card::after { background: #00000040; }
}

.territory-card:is(:focus-within, .is-open)::after{ opacity: 1; }
@media (hover: hover) and (pointer: fine) {
.territory-card:is(:hover, :focus-within, .is-open)::after{ opacity: 1; }
}

/* На промежуточных ширинах сохраняем центрирование содержимого. */
.territory-card:is(:focus-within, .is-open) .mosaic__caption{
  justify-content: center;
  padding: 20px 38px 20px 39px;
}
@media (hover: hover) and (pointer: fine) {
.territory-card:is(:hover, :focus-within, .is-open) .mosaic__caption{
  justify-content: center;
  padding: 20px 38px 20px 39px;
}
}


.territory-card:is(:focus-within, .is-open) .territory-card__details{ display: block; }
@media (hover: hover) and (pointer: fine) {
.territory-card:is(:hover, :focus-within, .is-open) .territory-card__details{ display: block; }
}

/* Десктоп: строки заголовка и описания — ровно как в макете. Переносы
   стоят в шаблоне (territory_lines / layout_lines), браузер своих не
   добавляет. Описание 262px в плитке 295 — поля по 16px; строка длиннее
   («и съёмочная команда Алины») свисает поровну в обе стороны. */
@media (min-width: 1280px) {
/* В десктопном макете кнопка каждой карточки стоит в 20px от низа,
     а зазор между заголовком и описанием — 14px. */
.territory-card:is(:focus-within, .is-open) .mosaic__caption{
    justify-content: flex-end;
    gap: 14px;
    padding-inline: 16px;
  }
@media (hover: hover) and (pointer: fine) {
.territory-card:is(:hover, :focus-within, .is-open) .mosaic__caption{
    justify-content: flex-end;
    gap: 14px;
    padding-inline: 16px;
  }
}


.territory-card:is(:focus-within, .is-open) .territory-card__details{
    display: flex;
    flex-direction: column;
    align-items: center;
  }
@media (hover: hover) and (pointer: fine) {
.territory-card:is(:hover, :focus-within, .is-open) .territory-card__details{
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

  .territory-card .mosaic__caption :is(h2, h3),
  .territory-card .territory-card__details p { white-space: nowrap; }
  .territory-card .territory-card__details p { width: max-content; min-width: 262px; margin: 0; }
}
.territory-card:focus-visible { outline: 2px solid var(--c-olive); outline-offset: 3px; }
/* На тач-устройствах раскрытие вешает скрипт по нажатию (.is-open):
   наведения там нет, а :focus-within срабатывал бы от одного касания. */
@media (hover: none) {
  .territory-card .territory-card__details { display: none; }
  .territory-card:is(:hover, :focus-within):not(.is-open)::after { opacity: 0; }
  .territory-card:is(:hover, :focus-within):not(.is-open) > picture,
  .territory-card:is(:hover, :focus-within):not(.is-open) > .ph { filter: none; }
  .territory-card:is(:hover, :focus-within):not(.is-open) .mosaic__caption {
    justify-content: flex-end;
    padding: 217px 38px 20px 39px;
  }
  .territory-card.is-open .territory-card__details { display: block; }
}
@media (max-width: 699px) {
  .site { --gutter: 20px; }
  .territory-card { aspect-ratio: auto; min-height: 295px; }
  .territory-card > picture, .territory-card > .ph { position: absolute; inset: 0; }
  .territory-card .mosaic__caption { min-height: 295px; padding-inline: 16px; }

.territory-card:is(:focus-within, .is-open) .mosaic__caption{ padding-inline: 16px; }
@media (hover: hover) and (pointer: fine) {
.territory-card:is(:hover, :focus-within, .is-open) .mosaic__caption{ padding-inline: 16px; }
}

}
@media (prefers-reduced-motion: reduce) {
  .territory-card > picture, .territory-card > .ph { transition: none; }
  .territory-card::after { transition: none; }
}

/* Якорные ссылки: цель не должна уезжать под закреплённую шапку. */
.service-card[id], .service-tile[id] { scroll-margin-top: calc(var(--header-h) + 32px); }
:target { scroll-margin-top: calc(var(--header-h) + 32px); }

.promo__media picture { display: block; width: 100%; aspect-ratio: 360 / 220; border-radius: 10px; overflow: hidden; }
.promo__media img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }

/* «Акции» по выгрузке Special Offers.svg (фрейм 3309): карточки
   кончаются на 2071, рамка заголовка вопросов 2201–2296 (по нижнему
   выносу «р», как на «Размещении»), первая плашка 2346, от последней
   плашки до знака в подвале 160. Значит сверху 130, заголовок 95 и под
   ним 50, до подвала 60 его отступа + 100 его поля. Прежние 120/90/60 и
   60 были сняты с Special Offers.png старой версии; ниже 900 они
   оставлены (мобильного макета с этими блоками нет). */
.page-promotions .offers-section { padding-bottom: 0; }
.page-promotions main > .section:last-child { padding-top: 120px; padding-bottom: 0; }
.page-promotions .footer { padding-top: 60px; }
@media (min-width: 900px) {
  .page-promotions main > .section:last-child { padding-top: 130px; }
  .page-promotions .footer { padding-top: 100px; }
}
@media (min-width: 1280px) {
  .page-promotions main > .section:last-child .section__title { line-height: 95px; margin-bottom: 50px; }
}

/* От последней плашки до логотипа в макетах: 160 px у каталога/акций,
   100 px у домика. Сжатый промежуток перед иконками компенсируется
   исходными 58 px перед нижней строкой — координаты обеих групп совпадают. */
@media (min-width: 900px) {
  .page-houses .footer, .page-promotions .footer { padding-top: 160px; }
  .page-house .footer { padding-top: 100px; }
  .page-houses .footer { padding-bottom: 15px; }
  :is(.page-promotions, .page-house) .footer { padding-bottom: 14px; }
  :is(.page-home, .page-houses, .page-promotions, .page-house, .page-territory, .page-scenarios) .footer__brand .socials { margin-top: -21px; }
  :is(.page-houses, .page-promotions, .page-house, .page-territory, .page-scenarios) .footer__legal { margin-top: 58px; }
  /* «Территория», «Чем заняться»: нижняя строка подвала на 3,7 px выше (кадры 25.10). */
  :is(.page-territory, .page-scenarios) .footer__legal { margin-top: 54.3px; }
  .page-house--domik-1 .house-about-section,
  .page-house--domik-4 .house-about-section { padding-bottom: 39.77px; }
  .page-house .house-reviews-section { padding-bottom: 18px; }
}

.faq__answer p { margin: 0; }
.faq__answer p + p { margin-top: 29px; }
/* FAQ sheets use consecutive lines; only two home answers have a blank line. */
:is(.page-home, .page-houses, .page-promotions) .faq__answer p + p { margin-top: 0; }
:is(.page-home, .page-houses, .page-promotions) .faq__answer ul { margin: 0; }
.page-home .faq__item:first-child .faq__answer > p:first-child,
.page-home .faq__item:nth-child(5) .faq__answer > p:first-child { margin-bottom: 29px; }
.page-home .faq__item:last-child .faq__answer ul { list-style-type: '▸ '; padding-left: 14px; }
.page-houses .faq__answer ul { list-style-type: '- '; padding-left: 15px; }
@media (max-width: 700px) {
  .faq__item .faq__answer { padding: 20px 16px; font-size: 18px; line-height: 24px; }
  .page-home .faq__item:first-child .faq__answer > p:first-child,
  .page-home .faq__item:nth-child(5) .faq__answer > p:first-child { margin-bottom: 24px; }
}

/* Правки по аудиту 30.09; координаты декора остаются локальны секциям. */
.desktop-background { display: contents; }
.page-head .container { width: min(100% - 2 * var(--gutter), 1240px); max-width: 1240px; }
.page-head h1 { color: #847F57; }
.guests__note-end { white-space: nowrap; }
.house-icon:is(.house-icon--sofa_bed, .house-icon--bunk_bed, .house-icon--bed) {
  display: inline-block; background: #9B5026;
  mask: var(--bed-icon) center / contain no-repeat;
}
.house-icon--sofa_bed { --bed-icon: url("../img/house-icons/sofa_bed.b3a07a0af101.png"); }
.house-icon--bunk_bed { --bed-icon: url("../img/house-icons/bunk_bed.2a2957c07faf.png"); }
.house-icon--bed { --bed-icon: url("../img/house-icons/bed.8c793f947608.png"); }
.territory-card .mosaic__caption :is(h2, h3) { font-family: var(--font-body); font-weight: 600; }
.page-reviews .reviews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding: 0; margin: 0; list-style: none; }
.page-reviews .reviews__item { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.page-reviews .reviews__media { height: 220px; border-radius: 20px; overflow: hidden; }
.page-reviews .reviews__media :is(picture, img) { display: block; width: 100%; height: 100%; object-fit: cover; }
.page-reviews .reviews__text { margin: 0; }
.page-reviews .reviews__text p { margin: 0; font-size: 20px; line-height: 24px; }
.page-reviews .reviews__author { margin: auto 0 0; text-align: right; font-size: 20px; line-height: 24px; }
.service-details { margin-top: 32px; scroll-margin-top: 120px; }
@media (max-width: 899px) { .page-reviews .reviews { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 699px) { .page-services .cards--services { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 900px) {
  .page-head { text-align: center; }
  .page-house .reviews__text { margin-right: -3px; }
  .page-house .equipment__title { font-size: 22px; line-height: 27px; }
  .page-house .equipment__list li { font-size: 22px; line-height: 27px; }
  .page-home .about__text .section__title { transform: none; }
  .page-home .slogan__frame { transform: translateY(-27px); }
  .page-home .mosaic__head { transform: translateY(-11px); }
  .page-home .home-nearby > .container > .section__title { transform: translateY(-5px); }
  .page-home .home-faq-background-anchor > .section { padding-top: 75px; }
  .page-houses .houses-faq .section__title,
  .page-promotions main > .section:last-child .section__title { margin-bottom: 57px; }
}
@media (max-width: 699px) {
  .page-head h1 { font-size: 36px; line-height: 38px; }
  .page-head .section__lead { font-size: 14px; line-height: 17px; }
  .page-head { text-align: left; }
  .cookie-banner { bottom: min(167px, 20dvh); }
  .cookie-accept { box-shadow: 0 3px 5px #49494940; }
  .form:has(input[name="form_type"][value="transfer"]) .form__actions .btn { width: 100%; }
}

/* Комплектация по группам — после правил прежнего колонного вида. */
@media (min-width: 700px) {
  .page-house .equipment--accordion > :is(.equipment__switch, .equipment__toggle) { display: none; }
  .page-house .equipment--accordion .equipment__switch ~ .equipment__columns { flex-direction: column; gap: 4px; min-height: 0; max-height: none; overflow: visible; mask-image: none; }
  .page-house .equipment--accordion .equipment__column { display: contents; }
  .page-house .equipment--accordion .equipment__group { width: 100%; gap: 0; }
  .page-house .equipment--accordion .equipment__switch ~ .equipment__columns .equipment__group ~ .equipment__group { visibility: visible; }
  .page-house .equipment--accordion .equipment__list[hidden] { display: none; }
  .page-house .equipment--accordion .equipment__list:not([hidden]) { padding: 8px 0 16px; }
  .page-house .equipment--accordion .footer__toggle { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 56px; border: 0; padding: 10px 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
  .page-house .equipment--accordion .footer__toggle::after { content: ''; flex: none; width: 10px; height: 10px; background: url("../img/mobile-footer-plus.2b42fe34359f.png") center / contain no-repeat; }
  .page-house .equipment--accordion .footer__toggle[aria-expanded="true"]::after { height: 2px; background: #847f57; }
  .page-house .equipment--accordion .footer__toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
}

/* ---------- Кадр фотографий ----------
   Размер фото задаёт окно, а не пропорции исходника. Без ограничения
   grid-строки карточка резала вытянутый слайд сверху. */
.house__slides { grid-template: minmax(0, 1fr) / minmax(0, 1fr); }
.house__slide { min-height: 0; overflow: hidden; }
.house__slide picture { display: block; height: 100%; }
.mosaic--photos .mosaic__item { position: relative; }
.mosaic--photos .mosaic__item > picture { position: absolute; inset: 0; }
.mosaic--photos .mosaic__item > picture img { width: 100%; height: 100%; object-fit: cover; }
/* Фокус из админки работает и при выдаче оригинала на production.
   Более специфичные правила территории и мозаики сохраняют приоритет. */
.site picture > img:not(:where(.kontur-host *)) { object-position: var(--focus, 50% 50%); }

.site .promotion-request-modal { box-sizing: border-box; width: 640px; max-width: calc(100% - 32px); padding: 32px 20px 20px; }
.promotion-request-modal .section { padding: 16px 0; }
.promotion-request-modal .container { width: 100%; }
.promotion-request-modal .booking-modal__close { position: absolute; top: 12px; right: 12px; }
.promotion-request-modal [data-promotion-request-title] { margin: 0 32px 16px 0; font: 500 28px/1.2 var(--font-heading); }

/* Уточнения макетов меню и просмотра фото, 03.10.2026. */
.page-houses .houses-search .searchbar__field { background: #D5CEBC; }
.house__slides { touch-action: pan-y; user-select: none; -webkit-user-select: none; }
@media (hover: none), (max-width: 699px) {
  .house__slides { touch-action: auto; }
}
.house__slides img { -webkit-user-drag: none; }
.house__media { z-index: 0; }
.house__overlay, .house__book { position: relative; z-index: 2; }
.house__overlay { pointer-events: none; }
.house__overlay :is(a, button) { pointer-events: auto; }
.site .lightbox {
  box-sizing: border-box; width: min(1240px, calc(100vw - 80px)); max-width: none;
  height: min(921px, calc(100dvh - 80px)); max-height: none;
  padding: 122px 40px 40px; border-radius: 40px;
  background: #F7F0E6; color: #494949; overflow: hidden;
}
.site .lightbox[open] { display: flex; flex-direction: column; gap: 40px; }
.site .lightbox::backdrop { background: rgba(43, 49, 67, .7); }
.site .lightbox__image {
  display: block; flex: 1 1 0; min-height: 0; width: 100%; max-height: none;
  border-radius: 23px; background: #D9D9D9; object-fit: contain;
}
.site .lightbox__caption { flex: none; margin: 0; min-height: 24px; font-size: 20px; line-height: 24px; }
.site .lightbox__close { top: 32px; right: 32px; width: 50px; height: 50px; border: 0; border-radius: 15px; background: #E0D9C9; color: #847F57; font-size: 32px; }
.site .lightbox__nav { top: calc(50% + 19px); width: 40px; height: 40px; min-width: 40px; min-height: 40px; border: 1px solid #847F57; background: #E0D9C9; color: #847F57; }
.site .lightbox__nav--prev { left: 20px; }
.site .lightbox__nav--next { right: 20px; }

@media (hover: hover) and (pointer: fine) {
.site .lightbox :is(button):hover{ background: #9B5026; color: #F7F0E6; border-color: #9B5026; }
}

@media (max-width: 1279px) {
  body.menu-open { overflow: hidden; }
  .site .header:has(.nav-toggle[open]) { top: 0; transform: none; }
  .site .header:has(.nav-toggle[open]) .header__bar { background: #847F57; }
  .site .header:has(.nav-toggle[open]) :is(.header__logo, .header__name, .header__phone, .nav-toggle__button) { color: #F7F0E6; }
  .site .nav-toggle[open] .nav--mobile {
    position: fixed; top: 72px; inset-inline: 0; width: 100%;
    height: calc(100dvh - 72px); max-height: none; overflow-y: auto;
    overscroll-behavior: contain; padding: 24px 30px 40px;
    border-radius: 0 0 20px 20px; background: #F7F0E6;
    animation: menu-slide .25s ease both;
  }
  .site .nav--mobile .nav__list { display: grid; gap: 0; padding: 0; margin: 0; }
  .nav-section > summary { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding-block: 10px; font: 400 18px/24px var(--font-body); color: #494949; cursor: pointer; list-style: none; }
  .nav-section > summary::-webkit-details-marker { display: none; }
  .nav-mobile__home { display: flex; align-items: center; min-height: 44px; padding-block: 10px; font: 400 18px/24px var(--font-body); color: #494949; text-decoration: none; }
  .nav-section__sign::before { content: '+'; color: #847F57; font-size: 22px; }
  .nav-section[open] .nav-section__sign::before { content: '−'; }
  .site .nav--mobile .nav__sublist { display: grid; gap: 10px; padding: 10px 0; margin: 0; }
  .site .nav--mobile .nav__sublink { min-height: 40px; padding: 8px 20px; font: 400 16px/24px var(--font-body); background: #E0D9C9; border-radius: 100px; }
  .nav-mobile__bottom { display: flex; flex-direction: column; align-items: center; gap: 40px; padding-top: 36px; }
  .site .nav-mobile__bottom > .btn { width: min(280px, 100%); min-height: 40px; padding: 9px 20px; background: #9B5026; color: #F7F0E6; font-size: 16px; }
  .nav-mobile__pets { padding: 14px 20px; margin: 0; border: 1px solid #9B5026; border-radius: 20px; font: 400 16px/20px var(--font-body); color: #494949; text-align: center; }
  .nav-mobile__contacts { display: grid; gap: 16px; text-align: center; color: #494949; font-size: 16px; }
  .nav-mobile__contacts p { margin: 0; }
  .nav-mobile__contacts a { text-decoration: none; }
  .nav-mobile__contacts .nav-mobile__phone { color: #9B5026; font-size: 24px; line-height: 30px; }
  .nav-mobile__bottom .socials { justify-content: center; gap: 5px; margin: -14px 0 0; }
  .site .nav-toggle[open] .nav-toggle__button span { border: 0; height: 16px; }
  .site .nav-toggle[open] .nav-toggle__button span::before,
  .site .nav-toggle[open] .nav-toggle__button span::after { content: ''; position: absolute; top: 7px; left: 0; width: 16px; border-top: 2px solid currentColor; transform: rotate(45deg); }
  .site .nav-toggle[open] .nav-toggle__button span::after { transform: rotate(-45deg); }
}
@keyframes menu-slide { from { transform: translateX(100%); } to { transform: translateX(0); } }
@media (min-width: 700px) and (max-width: 1279px) { .site .nav-toggle[open] .nav--mobile { top: 110px; height: calc(100dvh - 110px); } }
@media (max-width: 699px) {
  .site .lightbox { width: calc(100vw - 24px); height: calc(100dvh - 32px); padding: 76px 16px 24px; border-radius: 24px; }
  .site .lightbox[open] { gap: 24px; }
  .site .lightbox__close { top: 16px; right: 16px; width: 44px; height: 44px; }
  .site .lightbox__caption { font-size: 16px; line-height: 22px; }
  .site .lightbox__image { border-radius: 16px; }
  .site .lightbox__nav--prev { left: 4px; }
  .site .lightbox__nav--next { right: 4px; }
}
@media (prefers-reduced-motion: reduce) { .site .nav-toggle[open] .nav--mobile { animation: none; } }

.nav-section > summary > a { color: inherit; text-decoration: none; }

html:has(.lightbox[open]) { overflow: hidden; }

/* Invisible touch targets keep the approved icon dimensions and coordinates. */
@media (max-width: 699px) {
  :is(.guests__step, .guests__hint-toggle, .booking-hint__toggle, .booking-field__slot, .cookie-accept, .cookie-decline, .footer__cta, .lightbox__nav) { position: relative; }
  .site .lightbox__nav { position: absolute; }
  :is(.guests__step, .guests__hint-toggle, .booking-hint__toggle, .booking-field__slot, .cookie-accept, .cookie-decline, .footer__cta, .lightbox__nav)::after {
    content: ''; position: absolute; width: max(100%, 44px); height: max(100%, 44px);
    left: 50%; top: 50%; transform: translate(-50%, -50%);
  }
  .site.page-house .guests__step::after { inset: auto; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
  .site.page-house [data-counter="adults"] .guests__step::after { top: calc(50% - 4px); }
  .site.page-house .guests__hint-toggle::after { top: calc(50% + 4px); }
  .site.page-house [data-counter="pets"] .guests__hint-toggle::after { top: calc(50% + 9px); }
  :is(.guests__step, .cookie-decline, .lightbox__nav):focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
}

/* Approved hero: keep the booking CTA, hide the date/guest decorations. */
.site .searchbar--cta-only {
  display: flex; justify-content: center; width: 254px; max-width: 100%;
  padding: 0; border: 0; background: none;
}
.site .searchbar--cta-only .searchbar__field { display: none; }
.site .searchbar--cta-only .searchbar__cta { width: 100%; margin: 0; }
@media (max-width: 699px) {
  .page-home .hero .searchbar--cta-only { width: 240px; }
}

/* FAQ: native buttons, one expanded answer. PNG/SVG panels: 1240 x 63. */
.faq__item .faq__question { width: 100%; border: 0; text-align: left; font-family: var(--font-body); }
.faq__question:focus-visible { outline: 2px solid #9B5026; outline-offset: 4px; }
.faq__answer { overflow: hidden; }
.faq__reference-break { display: none; }
@media (min-width: 1280px) { .faq__reference-break { display: initial; } }
.faq__answer[hidden] { display: none; }
.service-tile.territory-card .territory-card__details p { white-space: normal; width: 100%; min-width: 0; max-height: 92px; overflow-y: auto; }
.service-tile.territory-card .mosaic__caption :is(h2, h3) { white-space: normal; }
/* 06.10, «Шаблоны карточек»: плитки каталога — как карточки главной: описание 18/22
   с закреплёнными переносами, кнопка в 18 px от низа (замер по SVG: все строки на 2 px ниже). */
@media (min-width: 700px) {
  .cards--service-tiles .territory-card .territory-card__details p { width: 262px; max-width: none; white-space: nowrap; max-height: none; overflow: visible; }
  /* В SVG у двух новых карточек описание 17/21 (строки на 6 % уже, шаг 21). */
  :is(#service-arenda-sapov, #service-arenda-velosipedov) .territory-card__details p { font-size: 17px; line-height: 21px; }
}
@media (min-width: 1280px) {
  .territory-card:is(:focus-within, .is-open) .mosaic__caption { padding-bottom: 18px; }
}
@media (min-width: 1280px) and (hover: hover) and (pointer: fine) {
  .territory-card:is(:hover, :focus-within, .is-open) .mosaic__caption { padding-bottom: 18px; }
}
/* Preserve the existing photo controls; optically centre their arrows. */
.site .lightbox__nav { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; --step-x: -3px; }
.site .lightbox__nav--next { --step-x: 3px; }
.lightbox__nav svg { display: block; width: 40px; height: 40px; }
.lightbox__nav circle { stroke: #847F57; }
.site .lightbox__nav:is(:active, .is-pressed) circle { stroke: var(--button-pressed-border); }
@media (hover: hover) and (pointer: fine) { .site .lightbox__nav:hover circle { stroke: #9B5026; } }
.lightbox__nav.is-stepping { animation: photo-nav-press 180ms ease-out; }
.lightbox__nav.is-stepping .lightbox__chevron { animation: photo-nav-arrow 180ms ease-out; }
@keyframes photo-nav-press { 0%, 100% { transform: translateY(-50%) scale(1); } 40% { transform: translateY(-50%) scale(.92); } }
@keyframes photo-nav-arrow { 0%, 100% { transform: translateX(0); } 40% { transform: translateX(var(--step-x)); } }
@media (prefers-reduced-motion: reduce) { .lightbox__nav.is-stepping, .lightbox__nav.is-stepping .lightbox__chevron { animation: none; } }

/* House pages start with photos; the working booking entry sits before reviews. */
.page-house .house-booking-cta { padding-block: 0 var(--s-8); }
.page-house .house-booking-cta .container { display: flex; justify-content: center; }
.page-house .house-booking-cta .btn { min-width: 240px; max-width: 100%; }
@media (max-width: 699px) {
  body.page-house main > .house-mosaic-section:first-child { padding-top: 112px; }
  .page-house .house-booking-cta { padding-bottom: 32px; }
}

/* 06.10: заглушка раздела без текста — кадр главной, фраза и две кнопки. */
.page-placeholder__card {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 32px;
  min-height: 420px; padding: 60px 24px; border-radius: 20px; background: #232323; text-align: center;
}
.page-placeholder__media { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.page-placeholder__media :is(picture, img) { display: block; width: 100%; height: 100%; object-fit: cover; }
.page-placeholder__media::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, .5); }
.page-placeholder__text { max-width: 640px; margin: 0; color: #F7F0E6; font: 400 24px/30px var(--font-body); }
.page-placeholder__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.page-placeholder__actions .btn { min-width: 214px; }
@media (max-width: 699px) {
  .page-placeholder__card { min-height: 320px; padding: 40px 20px; gap: 24px; }
  .page-placeholder__text { font-size: 18px; line-height: 22px; }
  .page-placeholder__actions { flex-direction: column; width: 100%; }
  .page-placeholder__actions .btn { width: 100%; }
}

/* Пометка «в разработке» (K1): тонкая строка над H1, не меняет сетку шапки. */
.dev-strip {
  display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 8px;
  width: fit-content; max-width: 100%; margin: 0 auto 14px; padding: 5px 14px;
  border: 1px solid var(--c-olive-soft); border-radius: 999px;
  color: var(--c-olive); font-size: 13px; line-height: 18px; text-align: center;
}
.dev-strip__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c-terra);  flex: none; }
.site .dev-strip__link { color: var(--c-terra); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 699px) { .dev-strip { margin: 0 0 10px; padding: 5px 12px; border-radius: 12px; font-size: 12px; line-height: 16px; text-align: left; } }

/* Д8, Д9 — появление при прокрутке и прорисовка пунктира (js/reveal.js).
   Скрывает только класс reveal-ready: без JS и при reduced-motion всё видно. */
.reveal-ready [data-reveal] { transition: opacity 0.4s ease var(--reveal-delay, 0ms), transform 0.4s ease var(--reveal-delay, 0ms); }
.reveal-ready [data-reveal]:not(.is-visible) { opacity: 0; transform: translateY(12px); }
.reveal-ready [data-draw] { stroke-dasharray: var(--draw-length); stroke-dashoffset: var(--draw-length); transition: stroke-dashoffset 1.2s ease; }
.reveal-ready [data-draw].is-visible { stroke-dashoffset: 0; }

/* Д10 — чип-фильтр (js/chips.js). */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 var(--s-4); padding: 0; }
.filter-chip {
  min-height: 44px; padding: 0 18px; border: 1px solid var(--c-olive); border-radius: 999px;
  background: transparent; color: var(--c-deep); font: inherit; font-size: 15px; cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.filter-chip:hover { background: var(--c-hover-warm); }
.filter-chip[aria-pressed="true"] { background: var(--c-olive); border-color: var(--c-olive); color: var(--c-cream); }
.filter-chip:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
[data-chips-for] [data-tags] { transition: opacity 0.2s ease; }
[data-chips-for] [data-tags].is-fading { opacity: 0; }

/* K3 — место под будущее видео: видео не встраиваем, пока ролика нет. */
.video-slot { position: relative; margin: 0; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 16px; background: var(--c-sand); }
.video-slot picture, .video-slot img { width: 100%; height: 100%; object-fit: cover; }
.video-slot--poster::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(58,60,21,0.15) 0%, rgba(58,60,21,0.82) 70%); }
.video-slot__play { position: absolute; z-index: 2; top: 50%; left: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border: 1.5px dashed var(--c-cream); border-radius: 50%; opacity: 0.8; }
.video-slot__play::after { content: ""; position: absolute; top: 50%; left: 50%; margin: -10px 0 0 -6px; border-style: solid; border-width: 10px 0 10px 16px; border-color: transparent transparent transparent var(--c-cream); }
.video-slot__caption { position: absolute; z-index: 2; inset: auto 0 0; display: flex; flex-direction: column; gap: 4px; padding: 16px 20px; color: var(--c-cream); font-size: 15px; line-height: 20px; }
.video-slot__caption b { font-weight: 500; }
.video-slot--empty { border: 1.5px dashed var(--c-olive-soft); }
.video-slot--empty .video-slot__caption { inset: 0; align-items: center; justify-content: center; text-align: center; color: var(--c-dark); }
.video-slot--empty .video-slot__caption .btn { margin-top: 12px; }
@media (max-width: 699px) { .video-slot, .video-slot--tall { aspect-ratio: 4 / 5; border-radius: 12px; } }

/* K4 — карточки-факты. */
.fact-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; margin: 0 0 var(--s-5); padding: 0; list-style: none; }
.fact-cards__item { display: flex; flex-direction: column; gap: 6px; padding: 20px 24px; border-radius: 16px; background: var(--c-blush); }
.fact-cards__value { font-family: var(--font-heading); font-weight: 400; font-size: 32px; line-height: 1.1; color: var(--c-deep); }
.fact-cards__label { font-size: 15px; line-height: 20px; color: var(--c-dark); }
@media (max-width: 699px) { .fact-cards { grid-template-columns: 1fr 1fr; gap: 8px; } .fact-cards__item { padding: 14px 16px; border-radius: 12px; } .fact-cards__value { font-size: 24px; } .fact-cards__label { font-size: 13px; line-height: 16px; } }

@media (prefers-reduced-motion: reduce) {
  .filter-chip, [data-chips-for] [data-tags] { transition: none; }
}

/* Контакты (docs/dop-stranicy/16-kontakty.md): плитки связи одним нажатием. */
.contact-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.contact-tile {
  display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; column-gap: 14px; row-gap: 2px; align-items: center;
  min-height: 88px; padding: 20px 22px; border: 1px solid var(--c-olive-soft); border-radius: 16px;
  background: var(--c-white); color: var(--c-dark); text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.site .contact-tile:hover, .site .contact-tile:focus-visible { background: #E5D0C0; border-color: transparent; color: var(--c-dark); }
.contact-tile.is-success { background: var(--c-blush); }
.contact-tile__icon { grid-row: 1 / span 2; width: 40px; height: 40px; }
.contact-tile__icon--phone { border-radius: 50%; background: var(--c-terra) center / 20px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F7F0E6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2'/%3E%3C/svg%3E"); }
.contact-tile__name { font-weight: 600; font-size: 17px; line-height: 22px; color: var(--c-deep); }
.contact-tile__hint { font-size: 14px; line-height: 18px; color: var(--c-dark); }
.contact-tiles__email { margin: var(--s-4) 0 0; text-align: center; }
.contacts-hosts .split__media picture { aspect-ratio: 3 / 2; }
.contacts-requisites { margin-top: var(--s-5); text-align: center; color: var(--c-muted); }
@media (max-width: 699px) {
  .contact-tiles { grid-template-columns: 1fr 1fr; gap: 8px; }
  .contact-tile { grid-template-columns: 1fr; min-height: 64px; padding: 14px; row-gap: 6px; }
  .contact-tile__icon { grid-row: auto; width: 32px; height: 32px; }
  .contact-tile__name { font-size: 15px; line-height: 19px; }
  .contact-tile__hint { font-size: 12px; line-height: 15px; }
}
@media (prefers-reduced-motion: reduce) { .contact-tile { transition: none; } }

/* Как добраться (docs/dop-stranicy/13-kak-dobratsya.md): вкладки и шаги пунктиром. */
.directions__tabs { justify-content: center; }
.directions__panel { padding: var(--s-4) 0 0; }
.directions__panel h2 { margin-top: 0; }
.directions__address { font-size: 18px; line-height: 26px; color: var(--c-deep); }
.route-steps { position: relative; margin: 0 0 var(--s-4); padding: 0; list-style: none; }
.route-steps__item { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 0 0 22px 36px; }
.route-steps__item::before { content: ""; position: absolute; top: 4px; left: 6px; width: 12px; height: 12px; border: 2px solid var(--c-olive); border-radius: 50%; background: var(--c-cream); }
.route-steps__item:not(:last-child)::after { content: ""; position: absolute; top: 22px; bottom: 2px; left: 12px; border-left: 2px dashed var(--c-olive-soft); }
.route-steps__item--end::before { border-color: var(--c-terra); background: var(--c-terra); }
.route-steps__item b { font-weight: 600; color: var(--c-deep); }
.route-steps__item span { font-size: 15px; line-height: 20px; color: var(--c-dark); }

/* FAQ (docs/dop-stranicy/17-faq.md): поиск и темы над прежним аккордеоном. */
.faq-page__tools { display: flex; flex-direction: column; align-items: center; gap: var(--s-4); margin-bottom: var(--s-5); }
.faq-page__tools .chips { justify-content: center; margin: 0; }
.faq-page__search { width: min(100%, 560px); }
.faq-page__search input {
  width: 100%; min-height: 52px; padding: 0 22px; border: 1px solid var(--c-olive-soft); border-radius: 999px;
  background: var(--c-white); color: var(--c-dark); font: inherit; font-size: 16px;
}
.faq-page__search input:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.faq-page__empty { margin: var(--s-4) 0 0; text-align: center; }
.faq-page__ask { justify-content: center; }
.faq__item { scroll-margin-top: calc(var(--header-h, 96px) + 16px); }

/* Отзывы (docs/dop-stranicy/15-otzyvy.md): рейтинг, цитата, фильтр по домику. */
.reviews-rating__value { margin: 0; font-family: var(--font-heading); font-size: 96px; line-height: 1; color: var(--c-olive); }
.reviews-rating__count { margin: 8px 0 0; font-size: 18px; line-height: 24px; color: var(--c-deep); }
.reviews-rating__tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: var(--s-4) 0 0; padding: 0; list-style: none; }
.reviews-rating__tags li { padding: 6px 14px; border-radius: 999px; background: var(--c-sand); font-size: 14px; }
.reviews-quote .split__media picture { aspect-ratio: 3 / 2; }
.reviews-quote__text { margin: 0; }
.reviews-quote__text blockquote { margin: 0; font-family: var(--font-heading); font-size: 28px; line-height: 1.3; color: var(--c-deep); }
.reviews-quote__text blockquote p::before { content: "«"; }
.reviews-quote__text blockquote p::after { content: "»"; }
.reviews-quote__text figcaption { margin-top: var(--s-4); color: var(--c-dark); }
.reviews__chips { justify-content: center; }
.reviews__meta { margin: 4px 0 0; font-size: 13px; line-height: 16px; color: var(--c-muted); text-align: right; }
.reviews__links { justify-content: center; margin-bottom: var(--s-5); }
@media (max-width: 699px) {
  .reviews-rating__value { font-size: 64px; }
  .reviews-quote__text blockquote { font-size: 20px; }
}

/* Интересное рядом (docs/dop-stranicy/12-interesnoe-ryadom.md): метки и маршрут. */
.nearby__chips, .nearby__actions { justify-content: center; }
.place__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; padding: 0; list-style: none; }
.place__chips li { padding: 4px 10px; border-radius: 999px; background: rgb(247 240 230 / 16%); color: var(--c-cream); font-size: 13px; line-height: 16px; }
.place__chips .place__chip--season { background: var(--c-cream); color: var(--c-deep); }
.place--off-season .place__media { opacity: 0.85; }
.place__actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* Услуги (docs/dop-stranicy/11-uslugi.md): «Только свои», счётчик часов, сертификат. */
.group-offer { position: relative; display: grid; min-height: 360px; overflow: hidden; border-radius: var(--radius-lg); color: var(--c-cream); text-decoration: none; }
.group-offer picture, .group-offer img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; }
.group-offer::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(58,60,21,0.88) 0%, rgba(58,60,21,0.55) 55%, rgba(58,60,21,0.15) 100%); }
.group-offer__body { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 12px; max-width: 520px; padding: 40px; }
.group-offer__label { font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.85; }
.group-offer__title { font-family: var(--font-heading); font-weight: 400; font-size: 36px; line-height: 1.15; }
.group-offer__text { font-size: 16px; line-height: 24px; }
.site .group-offer:hover, .site .group-offer:focus-visible { color: var(--c-cream); }
@media (hover: hover) and (pointer: fine) { .group-offer:hover img { transform: scale(1.04); } }
.service-card__includes, .service-card__ask { margin: 4px 0 0; font-size: 14px; line-height: 18px; color: var(--c-cream); opacity: 0.9; }
.site .service-card__ask a { color: var(--c-cream); text-decoration: underline; }
.hours { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding: 4px 6px 4px 4px; border-radius: 999px; background: rgb(247 240 230 / 18%); color: var(--c-cream); }
.hours__step { width: 32px; height: 32px; border: 1px solid var(--c-cream); border-radius: 50%; background: transparent; color: var(--c-cream); font: inherit; font-size: 18px; line-height: 1; cursor: pointer; }
.hours__step:disabled { opacity: 0.4; cursor: default; }
.hours__value { min-width: 34px; text-align: center; font-weight: 500; }
.hours__total { font-weight: 600; }
.hours__hint { position: relative; }
.hours__hint .booking-hint__toggle { width: 22px; height: 22px; border: 1px solid var(--c-cream); border-radius: 50%; background: transparent; color: var(--c-cream); font-size: 12px; cursor: pointer; }
.hours__hint .booking-hint__text { position: absolute; z-index: 5; bottom: calc(100% + 8px); right: -8px; width: 220px; padding: 10px 12px; border-radius: 10px; background: var(--c-cream); color: var(--c-dark); font-size: 13px; line-height: 17px; opacity: 0; visibility: hidden; transition: opacity 0.15s, visibility 0.15s; }
.hours__hint:is(:hover, :focus-within) .booking-hint__text { opacity: 1; visibility: visible; }
.gift { align-items: start; }
@media (max-width: 699px) {
  .group-offer { min-height: 420px; }
  .group-offer::before { background: linear-gradient(180deg, rgba(58,60,21,0.2) 0%, rgba(58,60,21,0.9) 60%); }
  .group-offer__body { justify-content: flex-end; padding: 24px 20px; }
  .group-offer__title { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) { .group-offer img, .hours__hint .booking-hint__text { transition: none; } }

/* Территория (docs/dop-stranicy/10-territoriya.md): аэрофото, чипы, цены, соседи. */
.territory-aerial picture { display: block; overflow: hidden; border-radius: var(--radius-lg); aspect-ratio: 16 / 7; }
.territory-aerial img { width: 100%; height: 100%; object-fit: cover; }
.territory__chips, .territory__actions { justify-content: center; }
.territory-card__price { z-index: 3; font-size: 13px; padding: 4px 10px; top: 12px; inset-inline-end: 12px; }
.territory-neighbours__text { margin: 0 auto var(--s-5); text-align: center; }
.territory-neighbours__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 0; padding: 0; list-style: none; }
.territory-neighbours__item { overflow: hidden; border-radius: 16px; aspect-ratio: 1; }
.territory-neighbours__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
@media (hover: hover) and (pointer: fine) { .territory-neighbours__item:hover img { transform: scale(1.04); } }
@media (max-width: 699px) {
  .territory-aerial picture { aspect-ratio: 4 / 3; }
  .territory-neighbours__grid { grid-template-columns: 1fr 1fr; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) { .territory-neighbours__item img { transition: none; } }

/* Доп. страницы на ContentPage (docs/dop-stranicy/18–20). */
.scenarios__chips { justify-content: center; }
.scenario { padding: var(--s-4) 0 var(--s-5); }
.scenario__title { margin: 0 0 8px; text-align: center; }
.scenario__lead { max-width: 640px; margin: 0 auto var(--s-5); text-align: center; }
.scenario__steps { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.scenario__step { position: relative; display: flex; flex-direction: column; gap: 6px; }
.scenario__step:not(:last-child)::after { content: ""; position: absolute; top: 18px; left: calc(100% + 2px); width: 20px; border-top: 2px dashed var(--c-olive-soft); }
.scenario__media { position: relative; overflow: hidden; border-radius: 16px; aspect-ratio: 4 / 3; background: var(--c-sand); }
.scenario__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
@media (hover: hover) and (pointer: fine) { .scenario__step:hover .scenario__media img { transform: scale(1.04); } }
.scenario__price { z-index: 2; font-size: 13px; padding: 4px 10px; top: 10px; inset-inline-end: 10px; }
.scenario__time { margin: 6px 0 0; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--c-olive); }
.scenario__step-title { margin: 0; font-size: 20px; line-height: 26px; color: var(--c-deep); }
.scenario__text { margin: 0; font-size: 15px; line-height: 21px; }
.scenario__add { align-self: flex-start; margin-top: 6px; }
.scenario__ask { font-size: 14px; color: var(--c-terra); }
.scenario__house { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin-top: var(--s-5); padding: 20px 24px; border-radius: 16px; background: var(--c-blush); text-align: center; }
.scenario__house p { flex-basis: 100%; margin: 0; }
.rainy-day { margin-top: var(--s-4); }
.rainy-day .fact-cards__value { font-size: 24px; }
.events-next__label { margin: 0; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--c-olive); }
.events-archive, .occasions, .partners, .diary-posts { display: grid; gap: 20px; margin: 0; padding: 0; list-style: none; }
.events-archive { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.events-archive__media, .partners__media { overflow: hidden; border-radius: 16px; aspect-ratio: 3 / 2; background: var(--c-sand); }
.events-archive__media img, .partners__media img, .occasions__link img { width: 100%; height: 100%; object-fit: cover; }
.events-archive__item h3, .partners__title { margin: 12px 0 6px; font-size: 20px; line-height: 26px; color: var(--c-deep); }
.events-archive__item { opacity: 0.92; }
.group-offer--static .group-offer__button { margin-top: 4px; }
.occasions { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.occasions__link { position: relative; display: block; overflow: hidden; border-radius: 16px; aspect-ratio: 3 / 4; color: var(--c-cream); text-decoration: none; }
.occasions__link::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(58,60,21,0.15) 0%, rgba(58,60,21,0.82) 70%); transition: background 0.2s ease; }
@media (hover: hover) and (pointer: fine) { .occasions__link:hover::before { background: linear-gradient(180deg, rgba(58,60,21,0.55) 0%, rgba(58,60,21,0.92) 70%); } }
.site .occasions__link:hover { color: var(--c-cream); }
.occasions__caption { position: absolute; z-index: 2; inset: auto 0 0; display: flex; flex-direction: column; gap: 6px; padding: 16px; font-size: 14px; line-height: 19px; }
.occasions__caption b { font-size: 18px; line-height: 22px; font-weight: 600; }
.group-rules { margin: var(--s-4) 0 0; text-align: center; color: var(--c-dark); }
.partners { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.partners__item { display: flex; flex-direction: column; gap: 6px; }
.partners__item .btn { align-self: flex-start; margin-top: auto; }
.partners__terms { font-size: 15px; line-height: 21px; }
.partners__kit { aspect-ratio: auto; min-height: 140px; }
.cancel-scale__item--1 { background: rgb(132 127 87 / 30%); }
.cancel-scale__item--2 { background: var(--c-blush); }
.cancel-scale__item--3 { background: var(--c-sand); }
.rules-docs a { color: var(--c-terra); }
.diary-posts { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.diary-posts__link { display: flex; flex-direction: column; gap: 8px; color: var(--c-dark); text-decoration: none; }
.diary-posts__image, .diary-posts__link .ph { width: 100%; aspect-ratio: 4 / 3; border-radius: 16px; object-fit: cover; background: var(--c-sand); }
.diary-posts__link time { font-size: 13px; color: var(--c-olive); }
.diary__actions { justify-content: center; }
@media (max-width: 699px) {
  .scenario__steps { grid-template-columns: 1fr; gap: 20px; }
  .scenario__step:not(:last-child)::after { top: auto; bottom: -16px; left: 16px; width: 0; height: 12px; border-top: 0; border-left: 2px dashed var(--c-olive-soft); }
  .occasions { grid-template-columns: 1fr 1fr; gap: 8px; }
  .occasions__caption span { display: none; }
}
@media print {
  .header, .footer, .sticky-cta, .booking-modal, .section--deep, .rules-docs .btn { display: none !important; }
  .page-rules .faq__answer { display: block !important; }
}
@media (prefers-reduced-motion: reduce) { .scenario__media img, .occasions__link::before { transition: none; } }
/* Фото заполняют рамку целиком. Без этого <picture> держит высоту кадра:
   вертикальное фото срезалось снизу, горизонтальное оставляло пустую полосу. */
:is(.territory-neighbours__item, .scenario__media, .events-archive__media, .partners__media, .occasions__link) { position: relative; }
:is(.territory-neighbours__item, .scenario__media, .events-archive__media, .partners__media, .occasions__link) > picture { position: absolute; inset: 0; }
:is(.territory-neighbours__item, .scenario__media, .events-archive__media, .partners__media, .occasions__link) > picture img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Галерея (docs/dop-stranicy/14-galereya.md): фильтр, «Утреннее», переход на домик. */
.gallery-page__motto, .gallery-page__lead { max-width: 640px; margin: 0 auto var(--s-4); text-align: center; }
.gallery-page__filters .chips, .gallery-page__actions { justify-content: center; }
/* Плитки квадратные, поэтому сетка, а не колонки: при фильтре колонки
   заполнялись неравномерно, одна оставалась пустой. Кадр — на всю плитку. */
.page-gallery .mosaic--photos { display: grid; columns: auto; grid-template-columns: repeat(2, 1fr); grid-auto-flow: dense; gap: var(--s-4); }
@media (min-width: 700px) { .page-gallery .mosaic--photos { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .page-gallery .mosaic--photos { grid-template-columns: repeat(4, 1fr); } }
.page-gallery .mosaic--photos .mosaic__item { margin-bottom: 0; }
.page-gallery .mosaic--photos .mosaic__item--large { grid-row: span 2; aspect-ratio: auto; }
.page-gallery .mosaic--photos .gallery__link { height: 100%; aspect-ratio: auto; }
.page-gallery .mosaic--photos .gallery__link :is(picture, img) { display: block; width: 100%; height: 100%; object-fit: cover; }
.gallery-videos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 0; padding: 0; list-style: none; }
.gallery-videos .video-slot { aspect-ratio: 4 / 5; }
/* Цитата гостя (includes/guest_quote.html): настоящий отзыв, крупная
   кавычка Etude Noire слева, фраза по теме страницы подчёркнута маркером. */
.guest-quote { position: relative; max-width: 920px; margin: 0 auto; padding: 8px 0 0 150px; }
.guest-quote__mark { position: absolute; top: -40px; left: 0; font-family: var(--font-heading); font-size: 240px; line-height: 1; color: var(--c-olive); opacity: 0.3; pointer-events: none; }
.guest-quote__label { margin: 0 0 14px; font-size: 13px; line-height: 16px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-olive-dark); }
.guest-quote__text { margin: 0; }
.guest-quote__text p { margin: 0; font-family: var(--font-body); font-size: 26px; font-style: italic; font-weight: 300; line-height: 38px; color: var(--c-deep); }
.guest-quote__text mark { padding: 0 2px; color: inherit; background: linear-gradient(180deg, transparent 58%, rgb(249 185 138 / 60%) 58%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.guest-quote__by { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--c-olive-soft); font-size: 15px; line-height: 20px; color: var(--c-dark); }
.guest-quote__by b { font-weight: 600; color: var(--c-deep); }
.guest-quote__by a { color: var(--c-terra); }
.guest-quote__more { margin-left: auto; font-weight: 600; text-decoration: none; }
.guest-quote__more::after { content: " →"; }
@media (max-width: 699px) {
  .guest-quote { padding: 56px 0 0; }
  .guest-quote__mark { top: -24px; font-size: 150px; }
  .guest-quote__text p { font-size: 19px; line-height: 28px; }
  .guest-quote__more { margin-left: 0; flex-basis: 100%; }
}

/* Готовые вопросы в Telegram (includes/ask_chips.html). */
.ask-chips { max-width: 820px; margin: var(--s-7) auto 0; text-align: center; }
.ask-chips__title { margin: 0 0 14px; font-family: var(--font-heading); font-size: 26px; line-height: 30px; color: var(--c-deep); }
.ask-chips__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ask-chips__chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 18px; border: 1px solid var(--c-olive-soft); border-radius: var(--radius-pill); background: var(--c-white); font-size: 15px; line-height: 20px; color: var(--c-deep); text-decoration: none; transition: background 0.2s ease, border-color 0.2s ease; }
.ask-chips__chip::before { content: ""; flex: none; width: 18px; height: 18px; background: url("../img/social-telegram.0605a78ea0ac.png") center / contain no-repeat; }
@media (hover: hover) and (pointer: fine) { .site .ask-chips__chip:hover { border-color: var(--c-olive); background: var(--c-blush); color: var(--c-deep); } }
.ask-chips__hint { margin: 12px 0 0; font-size: 13px; line-height: 16px; color: var(--c-dark); }

/* Контакты: часы связи и бронь сразу под способами связи. */
.contacts-now { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 24px; margin-top: var(--s-6); }
.contacts-now__hours { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-size: 16px; color: var(--c-deep); }
.contacts-now__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c-olive); box-shadow: 0 0 0 0 var(--c-olive-soft); animation: contacts-pulse 2.4s ease-out infinite; }
@keyframes contacts-pulse { 0% { box-shadow: 0 0 0 0 rgb(132 127 87 / 50%); } 70%, 100% { box-shadow: 0 0 0 10px rgb(132 127 87 / 0%); } }

/* Интересное рядом: маршрут от глэмпинга в Яндекс Картах. */
.guide-card__route { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin: 4px 0; font-size: 15px; font-weight: 600; color: var(--c-terra); text-decoration: none; }
.guide-card__route::before { content: ""; width: 12px; height: 12px; border: 2px solid currentColor; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); }
.guide-card__route::after { content: "→"; }

/* 404: карточки домиков, чтобы гость не уходил с сайта. */
.house-teasers { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.house-teaser { display: flex; flex-direction: column; gap: 6px; color: var(--c-dark); text-decoration: none; }
.house-teaser__media { position: relative; display: block; overflow: hidden; border-radius: 16px; aspect-ratio: 4 / 3; background: var(--c-sand); }
.house-teaser__media > picture, .house-teaser__media > .ph { position: absolute; inset: 0; }
.house-teaser__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
@media (hover: hover) and (pointer: fine) { .house-teaser:hover img { transform: scale(1.04); } }
.house-teaser__title { margin-top: 6px; font-size: 20px; line-height: 26px; font-weight: 600; color: var(--c-deep); }
.house-teaser__meta { font-size: 14px; line-height: 19px; }
@media (prefers-reduced-motion: reduce) { .contacts-now__dot { animation: none; } .house-teaser__media img { transition: none; } }

/* ---------- Дополнительные блоки страниц без макета (core/dop_extras.py) ---------- */
/* Зацепка: крупная фраза слева, пояснение справа внизу — не по центру, как остальное. */
.x-hook { padding-top: 0; }
.x-hook__grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 20px; align-items: end; }
.x-hook__kicker { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; margin: 0 0 18px; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-olive-dark); }
.x-hook__kicker::after { content: ""; flex: 0 0 80px; border-top: 2px dashed var(--c-olive-soft); }
.x-hook__title { grid-column: 1 / span 8; margin: 0; font-family: var(--font-heading); font-size: 64px; line-height: 68px; color: var(--c-deep); text-wrap: balance; }
.x-hook__side { grid-column: 9 / -1; padding-bottom: 6px; }
.x-hook__text { margin: 0; font-size: 18px; line-height: 27px; color: var(--c-dark); }
.x-hook__side .btn { margin-top: 18px; }
@media (max-width: 899px) {
  .x-hook__title, .x-hook__side { grid-column: 1 / -1; }
  .x-hook__title { font-size: 38px; line-height: 42px; }
  .x-hook__side { margin-top: 16px; }
  .x-hook__text { font-size: 16px; line-height: 24px; }
}

/* Цифры: крупно и без рамок, только тонкая линия слева. */
.x-numbers { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 28px 20px; margin: 0; }
.x-numbers__item { padding-left: 20px; border-left: 2px solid var(--c-olive-soft); }
.x-numbers dt { font-family: var(--font-heading); font-size: 56px; line-height: 60px; color: var(--c-olive); white-space: nowrap; }
.x-numbers dd { margin: 6px 0 0; font-size: 15px; line-height: 20px; color: var(--c-dark); }
@media (max-width: 699px) { .x-numbers { grid-template-columns: 1fr 1fr; } .x-numbers__item { padding-left: 14px; } .x-numbers dt { font-size: 34px; line-height: 38px; white-space: normal; } }

/* Коллаж: три кадра внахлёст, с белой рамкой и лёгким наклоном. Поворот —
   через rotate, чтобы не спорить с transform у появления (reveal.js). */
.x-collage__grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: center; }
.x-collage--flip .x-collage__photos { order: 2; }
.x-collage__photos { position: relative; height: 480px; }
.x-collage__photo { position: absolute; overflow: hidden; border: 6px solid var(--c-white); border-radius: 20px; background: var(--c-sand); box-shadow: 0 18px 40px rgb(58 60 21 / 18%); }
.x-collage__photo > picture { position: absolute; inset: 0; }
.x-collage__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.x-collage__photo--1 { top: 0; left: 0; width: 58%; aspect-ratio: 4 / 5; rotate: -3deg; }
.x-collage__photo--2 { top: 30px; right: 0; width: 46%; aspect-ratio: 1; rotate: 4deg; }
.x-collage__photo--3 { bottom: 0; left: 34%; z-index: 2; width: 42%; aspect-ratio: 4 / 3; rotate: -1.5deg; }
.x-collage__photos--1 .x-collage__photo--1 { width: 86%; }
.x-collage__kicker { margin: 0 0 10px; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-olive-dark); }
.x-collage__title { margin: 0 0 16px; font-size: 40px; line-height: 44px; color: var(--c-deep); }
.x-collage__text p { margin: 0; font-size: 18px; line-height: 27px; }
@media (max-width: 899px) {
  .x-collage__grid { grid-template-columns: 1fr; gap: 32px; }
  .x-collage--flip .x-collage__photos { order: 0; }
  .x-collage__photos { height: 320px; }
  .x-collage__title { font-size: 30px; line-height: 34px; }
  .x-collage__text p { font-size: 16px; line-height: 24px; }
}

/* Бегущая строка: тёмная лента во всю ширину. */
.x-marquee { overflow: hidden; margin: var(--s-6) 0; padding: 18px 0; background: var(--c-deep); color: var(--c-cream); }
.x-marquee__track { display: flex; width: max-content; animation: x-marquee 45s linear infinite; }
.x-marquee__group { display: flex; flex: none; }
.x-marquee__group span { display: inline-flex; align-items: center; gap: 28px; padding-right: 28px; font-family: var(--font-heading); font-size: 30px; line-height: 36px; white-space: nowrap; }
.x-marquee__group span::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--c-peach-strong); }
@keyframes x-marquee { to { transform: translateX(-50%); } }
@media (max-width: 699px) { .x-marquee__group span { font-size: 22px; line-height: 28px; } }

/* Подсказка-стикер: чуть повёрнута, сверху «скотч». */
.x-note { position: relative; max-width: 560px; margin: 0 auto; padding: 30px 32px 26px; border-radius: 6px; background: var(--c-peach); box-shadow: 0 14px 30px rgb(58 60 21 / 12%); rotate: -1.5deg; }
.x-note::before { content: ""; position: absolute; top: -12px; left: 50%; width: 110px; height: 26px; margin-left: -55px; background: rgb(132 127 87 / 28%); rotate: 3deg; }
.x-note__title { margin: 0 0 8px; font-family: var(--font-heading); font-size: 24px; line-height: 28px; color: var(--c-terra); }
.x-note__text { margin: 0; font-size: 17px; line-height: 25px; color: var(--c-deep); }

/* «Вместо … — …»: городское зачёркнуто, наше — крупно. */
.x-compare__title { margin: 0 0 24px; text-align: center; }
.x-compare { margin: 0; padding: 0; list-style: none; }
.x-compare__row { display: grid; grid-template-columns: minmax(0, 1fr) 70px minmax(0, 1.5fr); align-items: center; gap: 16px; padding: 18px 0; border-bottom: 1px dashed var(--c-olive-soft); }
.x-compare__city { font-size: 18px; color: var(--c-dark); text-decoration-color: var(--c-terra); text-decoration-thickness: 2px; text-align: right; }
.x-compare__arrow { position: relative; height: 2px; background: repeating-linear-gradient(90deg, var(--c-olive) 0 6px, transparent 6px 11px); }
.x-compare__arrow::after { content: ""; position: absolute; top: -4px; right: 0; width: 8px; height: 8px; border-top: 2px solid var(--c-olive); border-right: 2px solid var(--c-olive); rotate: 45deg; }
.x-compare__here { font-size: 22px; line-height: 28px; font-weight: 600; color: var(--c-deep); }
@media (max-width: 699px) {
  .x-compare__row { grid-template-columns: minmax(0, 1fr) 32px minmax(0, 1.4fr); gap: 10px; }
  .x-compare__city { font-size: 14px; }
  .x-compare__here { font-size: 17px; line-height: 22px; }
}

/* Тропа шагов: пунктир между кружками. */
.x-path__title { margin: 0 0 28px; text-align: center; }
.x-path { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.x-path__step { position: relative; display: flex; flex-direction: column; gap: 6px; padding-top: 40px; }
.x-path__step::before { content: ""; position: absolute; top: 0; left: 0; z-index: 1; width: 22px; height: 22px; border: 3px solid var(--c-olive); border-radius: 50%; background: var(--c-cream); }
.x-path__step:not(:last-child)::after { content: ""; position: absolute; top: 11px; left: 30px; right: -16px; border-top: 2px dashed var(--c-olive-soft); }
.x-path__step:last-child::before { background: var(--c-terra); border-color: var(--c-terra); }
.x-path__step b { font-family: var(--font-heading); font-size: 26px; line-height: 30px; font-weight: 400; color: var(--c-deep); }
.x-path__step span { font-size: 15px; line-height: 21px; }
@media (max-width: 699px) {
  .x-path { grid-template-columns: 1fr; gap: 22px; }
  .x-path__step { padding: 0 0 0 40px; }
  .x-path__step:not(:last-child)::after { top: 28px; bottom: -18px; left: 10px; right: auto; border-top: 0; border-left: 2px dashed var(--c-olive-soft); }
}

/* «Сейчас»: тёмная карточка с текущим месяцем. */
.x-now { display: grid; grid-template-columns: auto 1fr; gap: 24px 40px; padding: 40px 44px; border-radius: 24px; background: var(--c-deep); color: var(--c-cream); }
.x-now__kicker { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; }
.x-now__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c-peach-strong); animation: contacts-pulse 2.4s ease-out infinite; }
.x-now__month { min-width: 240px; margin: 4px 0 0; font-size: 52px; line-height: 56px; color: var(--c-cream); overflow-wrap: normal; word-break: normal; hyphens: none; }
.x-now__events { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; font-size: 18px; line-height: 26px; }
.x-now__events li { position: relative; padding-left: 26px; }
.x-now__events li::before { content: ""; position: absolute; top: 9px; left: 0; width: 10px; height: 10px; border-radius: 0 50%; background: var(--c-peach-strong); }
.x-now__season { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding-top: 22px; border-top: 1px solid rgb(247 240 230 / 20%); }
.x-now__season p { margin: 0; font-size: 14px; opacity: 0.85; }
.x-now__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.x-now__tags li { padding: 6px 14px; border: 1px solid rgb(247 240 230 / 40%); border-radius: var(--radius-pill); font-size: 14px; }
@media (max-width: 699px) {
  .x-now { grid-template-columns: 1fr; padding: 28px 22px; }
  .x-now__month { font-size: 40px; line-height: 44px; }
  .x-now__events { font-size: 16px; line-height: 23px; }
}

/* Сколько ехать: полоса длиной в минуты. */
.x-radius__title { margin: 0 0 6px; text-align: center; }
.x-radius__lead { margin: 0 0 28px; text-align: center; font-size: 14px; color: var(--c-dark); }
.x-radius { display: grid; gap: 14px; max-width: 980px; margin: 0 auto; padding: 0; list-style: none; }
.x-radius__place { display: grid; grid-template-columns: 280px 1fr 200px; align-items: center; gap: 20px; }
.x-radius__name { font-size: 17px; line-height: 22px; color: var(--c-deep); }
.x-radius__bar { position: relative; height: 10px; border-radius: var(--radius-pill); background: var(--c-sand); }
.x-radius__bar::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--x); border-radius: inherit; background: linear-gradient(90deg, var(--c-olive), var(--c-terra)); }
.x-radius__time { font-size: 14px; line-height: 19px; color: var(--c-dark); }
@media (max-width: 699px) {
  .x-radius__place { grid-template-columns: 1fr auto; gap: 6px 12px; }
  .x-radius__bar { grid-column: 1 / -1; grid-row: 2; }
  .x-radius__time { text-align: right; }
}
@media (prefers-reduced-motion: reduce) {
  .x-marquee__track { animation: none; flex-wrap: wrap; width: auto; }
  .x-marquee__group + .x-marquee__group { display: none; }
  .x-now__dot { animation: none; }
}

.lightbox__counter { margin-left: 8px; opacity: 0.8; }
.lightbox__link { margin-left: 12px; }
@media (max-width: 699px) {
  .gallery-videos { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; }
  .gallery-videos > li { scroll-snap-align: start; }
}

/* Поиск (docs/dop-stranicy/21): как поиск FAQ. */
.search-form { display: flex; gap: 8px; margin: var(--s-4) auto 0; }
.search-form label { flex: 1; }
.search-results { margin: 0 0 var(--s-5); padding: 0; list-style: none; }
.search-results__item { padding: 14px 0; border-bottom: 1px solid var(--c-olive-soft); }
.search-results__item a { font-weight: 500; color: var(--c-deep); }
.search-results__item p { margin: 4px 0 0; font-size: 15px; }
.search-results__pages { display: flex; justify-content: space-between; }
.error-links a { color: var(--c-terra); }

/* Мероприятия: лента ближайших событий, дата крупно (Etude Noire). */
.events-list { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.events-list__item { display: grid; grid-template-columns: 120px 1fr auto; align-items: center; gap: 24px; padding: 20px 28px; border-radius: 16px; background: var(--c-white); }
.events-list__date { margin: 0; font-family: var(--font-heading); font-size: 56px; line-height: 1; color: var(--c-olive); text-align: center; }
.events-list__date span { display: block; margin-top: 6px; font-family: var(--font-body); font-size: 14px; color: var(--c-dark); }
.events-list__body h3 { margin: 0 0 6px; color: var(--c-deep); }
.events-list__body p { margin: 0 0 4px; }
.events-list__meta { font-size: 14px; color: var(--c-olive); }
@media (max-width: 699px) {
  .events-list__item { grid-template-columns: 72px 1fr; padding: 16px; gap: 12px; }
  .events-list__date { font-size: 40px; }
  .events-list__item .btn { grid-column: 1 / -1; }
}
.video-slot--video { background: var(--c-deep); }
.video-slot__video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Наполнение доп. страниц 07.10: путеводитель, калькуляторы, календарь ---------- */
.guide__intro { max-width: 640px; margin: 0 auto var(--s-4); }
.guide__planner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 20px; margin: 0 auto var(--s-4); max-width: 900px; padding: 16px 20px; border-radius: 16px; background: var(--c-blush); }
.guide__day { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; color: var(--c-deep); }
.guide__day select, .weekend-calc select, .weekend-calc input, .rules-calc input, .rules-calc select, .group-calc input {
  min-height: 44px; padding: 0 14px; border: 1px solid var(--c-olive-soft); border-radius: 12px; background: var(--c-white); color: var(--c-dark); font: inherit; font-size: 15px;
}
.guide__plan { flex: 1 1 320px; margin: 0; font-size: 15px; line-height: 21px; }
.dayplan__warn { color: var(--c-terra); font-weight: 500; }
.guide__chips { justify-content: center; }
.guide__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.guide__list--short { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-bottom: var(--s-4); }
.guide-card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 22px 24px; border-radius: 16px; background: var(--c-white); transition: opacity 0.2s ease, box-shadow 0.2s ease; }
@media (hover: hover) and (pointer: fine) { .guide-card:hover { box-shadow: 0 6px 24px rgb(58 60 21 / 10%); } }
.guide-card h3 { margin: 0; font-size: 20px; line-height: 26px; color: var(--c-deep); }
.guide-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.guide-card__add { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--c-sand); font-size: 13px; cursor: pointer; }
.guide-card__facts { display: grid; gap: 6px; margin: 0; font-size: 14px; line-height: 19px; }
.guide-card__facts div { display: grid; grid-template-columns: 84px 1fr; gap: 8px; }
.guide-card__facts dt { color: var(--c-olive); }
.guide-card__facts dd { margin: 0; }
.guide-card p { margin: 0; font-size: 15px; line-height: 21px; }
.guide-card__tip { padding: 10px 12px; border-radius: 10px; background: var(--c-cream); }
.guide-card__tip b { color: var(--c-terra); font-weight: 600; }
.guide-card__closed { display: none; color: var(--c-terra); font-weight: 500; }
.guide-card.is-closed { opacity: 0.6; }
.guide-card.is-closed .guide-card__closed { display: block; }
.guide-card .guide-card__sources, .guide__note { font-size: 12px; line-height: 16px; color: var(--c-muted); }
.guide-card__sources a { color: var(--c-muted); }
.guide__note { margin-top: var(--s-4); text-align: center; }
.route-from { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: var(--s-4) 0; }
.route-from > span { margin-right: 4px; font-weight: 500; color: var(--c-deep); }
.route-from__link { display: inline-flex; align-items: center; text-decoration: none; }
.road-tips { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.road-tips li { position: relative; padding: 10px 14px 10px 36px; border-radius: 12px; background: var(--c-white); font-size: 15px; line-height: 21px; }
.road-tips li::before { content: ""; position: absolute; top: 16px; left: 14px; width: 8px; height: 8px; border-radius: 50%; background: var(--c-olive); }
.train-compare__title { margin: var(--s-5) 0 12px; }
.train-compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.train-compare__item { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px; border-radius: 16px; background: var(--c-white); }
.train-compare__item b { color: var(--c-deep); }
.train-compare__item p { margin: 0; font-size: 15px; line-height: 21px; }
.train-compare__numbers { display: flex; flex-wrap: wrap; gap: 8px; }
.train-compare__numbers span { padding: 4px 12px; border-radius: 999px; background: var(--c-blush); font-weight: 500; }
.checklist { padding: 22px 24px; border-radius: 16px; background: var(--c-white); }
.checklist__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.checklist__head h2 { margin: 0 0 6px; }
.checklist__count { color: var(--c-olive); font-weight: 500; }
.checklist ul { display: grid; gap: 4px; margin: 12px 0 0; padding: 0; list-style: none; }
.checklist label { display: flex; align-items: flex-start; gap: 10px; min-height: 40px; padding: 8px 0; border-bottom: 1px solid var(--c-sand); cursor: pointer; font-size: 15px; line-height: 21px; }
.checklist input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--c-olive); flex: none; }
.checklist label:has(input:checked) { color: var(--c-muted); text-decoration: line-through; }
.weekend-calc { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px 16px; align-items: end; padding: 24px; border-radius: 16px; background: var(--c-white); }
.weekend-calc label, .rules-calc label, .group-calc label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--c-olive); }
.weekend-calc__out { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; padding: 14px 16px; border-radius: 12px; background: var(--c-blush); font-size: 15px; }
.weekend-calc__out b { font-size: 20px; color: var(--c-deep); }
.weekend-calc__book { grid-column: 1 / -1; justify-self: center; }
.review-themes { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.review-themes li { display: grid; grid-template-columns: 160px 1fr 70px; align-items: center; gap: 12px; }
.review-themes__label { font-weight: 500; color: var(--c-deep); }
.review-themes__bar { height: 10px; border-radius: 999px; background: var(--c-sand); overflow: hidden; }
.review-themes__bar span { display: block; height: 100%; border-radius: inherit; background: var(--c-olive); }
.review-themes__count { font-size: 14px; color: var(--c-olive); text-align: right; }
.review-themes__note { margin-top: 12px; font-size: 12px; color: var(--c-muted); }
.filter-chip--soft { border-style: dashed; }
.neighbour-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 0 auto var(--s-5); }
.neighbour-groups__item { padding: 16px 18px; border-radius: 16px; background: var(--c-white); text-align: center; }
.neighbour-groups__item .reviews-rating__tags { margin-top: 10px; }
.activities__month { display: flex; justify-content: center; flex-wrap: wrap; margin: 0 auto var(--s-4); }
.activities__hint { flex-basis: 100%; text-align: center; font-weight: 400; font-size: 13px; color: var(--c-olive); }
.activities__who { display: block; margin-top: 4px; opacity: 0.85; }
.mosaic__item.is-off-season { opacity: 0.35; filter: grayscale(0.6); }
.season-calendar__months { justify-content: center; }
.season-calendar__month { padding: 22px 24px; border-radius: 16px; background: var(--c-white); }
.season-calendar__month h3 { margin: 0 0 10px; color: var(--c-deep); }
.season-calendar__month ul { margin: 0; padding-left: 20px; }
.season-calendar__month li { margin-bottom: 6px; }
.group-calc { display: flex; flex-wrap: wrap; align-items: end; gap: 12px 20px; padding: 20px 24px; border-radius: 16px; background: var(--c-blush); }
.group-calc output { flex: 1 1 280px; font-size: 16px; line-height: 23px; color: var(--c-deep); }
.group-plan, .rules-calcs { align-items: start; }
.rules-calc { display: flex; flex-direction: column; gap: 12px; padding: 22px 24px; border-radius: 16px; background: var(--c-white); }
.rules-calc h3 { margin: 0; color: var(--c-deep); }
.rules-calc output { padding: 12px 14px; border-radius: 12px; background: var(--c-blush); font-weight: 500; color: var(--c-deep); }
.highlights { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.highlights__item a { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 18px 20px; border-radius: 16px; background: var(--c-white); color: var(--c-dark); text-decoration: none; transition: background-color 0.2s ease; }
.site .highlights__item a:hover { background: #E5D0C0; color: var(--c-dark); }
.highlights__item time { font-size: 13px; color: var(--c-olive); }
.highlights__item b { color: var(--c-deep); font-size: 17px; }
.highlights__item span { font-size: 15px; line-height: 21px; }
.rubrics { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.rubrics li { display: grid; grid-template-columns: 180px 1fr; gap: 12px; padding: 12px 16px; border-radius: 12px; background: var(--c-white); }
.rubrics b { color: var(--c-terra); }
@media (max-width: 699px) {
  .guide__list { grid-template-columns: 1fr; }
  .guide-card { padding: 18px; }
  .review-themes li { grid-template-columns: 1fr 60px; }
  .review-themes__bar { grid-column: 1 / -1; grid-row: 2; }
  .rubrics li { grid-template-columns: 1fr; gap: 4px; }
  .weekend-calc { grid-template-columns: 1fr 1fr; padding: 18px; }
}
@media (prefers-reduced-motion: reduce) { .guide-card, .highlights__item a { transition: none; } }

/* ---------- Рассказы страниц без макетов (core/dop_stories.py) ---------- */
.story__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px 64px; align-items: start; max-width: 1120px; }
.story__kicker { margin: 0 0 10px; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-terra); }
.story__title { margin: 0 0 24px; color: var(--c-deep); }
.story__facts { display: grid; gap: 12px; margin: 0; }
.story__facts div { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 14px; padding: 14px 18px; border-radius: 16px; background: var(--c-blush); }
.story--alt .story__facts div { background: var(--c-white); }
.story__facts dt { font-size: 24px; line-height: 28px; font-weight: 600; color: var(--c-deep); white-space: nowrap; }
.story__facts dd { margin: 0; font-size: 15px; line-height: 20px; }
.story__body p { margin: 0 0 16px; font-size: 17px; line-height: 27px; }
.story__body .story__lead { font-size: 21px; line-height: 31px; color: var(--c-deep); }
.story__quote { margin: 24px 0 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--c-terra); }
.story__quote p { margin: 0 0 6px; font-size: 20px; line-height: 28px; font-style: italic; color: var(--c-deep); }
.story__quote cite { font-size: 14px; font-style: normal; color: var(--c-olive); }
.story__body .story__source { font-size: 13px; line-height: 18px; color: var(--c-muted); }
.story__source a { color: inherit; }
.story--alt { background: var(--c-blush); }
@media (max-width: 899px) {
  .story__grid { grid-template-columns: 1fr; gap: 20px; }
  .story__body p { font-size: 16px; line-height: 25px; }
  .story__body .story__lead { font-size: 18px; line-height: 27px; }
  .story__facts dt { font-size: 20px; line-height: 24px; }
}

/* 20.10: контраст ≥ 4,5 у мелкого текста на страницах без макета
   (оливковый #847F57 по палитре — только для крупного текста). */
.dev-strip { color: #6A6545; }
.story__body .story__source, .guide-card .guide-card__sources, .guide__note { color: #6E6E6E; }
.events-next__label, .activities__hint { color: #6A6545; }

/* 20.10: горизонтальная прокрутка на планшетах (аудит 700–1024). */
.x-numbers__item { min-width: 0; }
@media (min-width: 700px) and (max-width: 1279px) { .x-numbers dt { font-size: 40px; line-height: 46px; white-space: normal; overflow-wrap: anywhere; } }
.scenario__steps { overflow-x: clip; }
@media (min-width: 700px) and (max-width: 899px) {
  .cookie-text { flex: 1 1 auto; width: auto; min-width: 0; }
}
.fact-cards__item { min-width: 0; }
.fact-cards__value { overflow-wrap: anywhere; }
/* Сноска «*» у WhatsApp на «Контактах» — у названия, а не у края страницы (давала прокрутку 3 px). */
.contact-tile .socials__note { position: static; display: inline; margin-left: 2px; }
/* «Выезды компаний»: на 900–1279 колонка 572 px + чек-лист не влезали (прокрутка 48 px). */
.group-plan > * { min-width: 0; }
@media (min-width: 900px) and (max-width: 1279px) { .split.group-plan { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* 20.10: зона нажатия строчных ссылок на телефоне ≥ 24 px (WCAG 2.5.8),
   видимый размер и раскладка прежние — отступ компенсируется. */
@media (max-width: 699px) {
  :is(.footer :is(li, p) > a:not(.socials__item), .house__link, .dev-strip__link, .t-back, .t-game__reset, .guest-quote__more, .footer__phone, summary.button--type-b) {
    padding-block: 4px; margin-block: -4px;
  }
}
/* Иконка TikTok — файл 38×41 в рамке 40×40: не растягивать (PageSpeed «неверные пропорции»). */
.socials__item img { object-fit: contain; }