/*
    Стили отдельных страниц (Приоритет 3 аудита).

    Отдельный файл, а не правки в main.css: главная страница остаётся
    ровно такой, какой была, и откатить всю разбивку можно, просто
    перестав подключать этот файл. Переменных и сброса здесь нет —
    используются те же цвета и шрифты, что и в основном стиле.

    Шапка сайта position: fixed, высота 5rem — отсюда отступ сверху
    у каждой внутренней страницы, иначе заголовок уезжает под шапку.
*/

.page {
  padding-top: 5rem;
}

/*
    Переход по якорю с фиксированной шапкой. Браузер ставит цель ровно
    под верхний край окна, а там уже стоит шапка высотой 5rem — и заголовок
    секции оказывается ей перекрыт. Отступ прокрутки поднимает цель ниже.
    Касается ссылок вида /about#arc и /infrastructure#day из меню.
*/
[id] {
  scroll-margin-top: 6rem;
}

/*
    Последний блок страницы упирался в футер вплотную: у секции .consult
    отступ задан только сверху (на главной за ней идёт следующая секция,
    и её собственный отступ создавал воздух). На внутренних страницах
    .consult часто последняя, поэтому отступ снизу задаём здесь.
*/
.page > *:last-child {
  padding-bottom: 5rem;
}

.page-head {
  padding: 3rem 0 2rem;
}

.page-head__crumbs {
  margin-bottom: 1.5rem;
  font-size: 0.8rem;
  color: #6C7F80;
}

.page-head__crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-head__crumbs li:not(:last-child)::after {
  content: '—';
  margin-left: 0.5rem;
  color: #B3BEBE;
}

.page-head__crumbs a {
  color: #6C7F80;
  text-decoration: none;
  border-bottom: 1px solid rgba(108, 127, 128, 0.35);
}

.page-head__crumbs a:hover {
  color: #0E2930;
}

.page-head__title {
  line-height: 1.2;
  font-size: 2.4rem;
  font-family: "Gilroy", sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  color: #0E2930;
  margin: 0;
}

.page-head__text {
  margin-top: 1rem;
  max-width: 46rem;
  line-height: 1.6;
  color: #293D3E;
}

.page-section {
  padding: 2rem 0 3rem;
}

/* Сетка карточек. С 15.09.2026 каталог вилл и апартаментов — витрина
   планировок ниже в файле, а эти карточки остались у блоков /contacts */

.villas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.villa-card {
  border: 1px solid #E4EAEA;
  border-radius: 0.75rem;
  overflow: hidden;
  background: #fff;
}

/*
    Без явных размеров фотография объекта выводилась в натуральную величину
    и разносила сетку. Локально это не было видно: символьной ссылки
    public/storage в выгрузке нет, и картинки просто не грузились.
*/
.villa-card img {
  display: block;
  width: 100%;
  height: 12rem;
  object-fit: cover;
}

.villa-card__body {
  padding: 1.25rem;
}

.villa-card__title {
  font-size: 1.15rem;
  font-family: "Gilroy", sans-serif;
  color: #0E2930;
  margin: 0 0 0.75rem;
}

.villa-card__params {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.85rem;
  color: #6C7F80;
}

.villa-card__params li {
  display: flex;
  justify-content: space-between;
  padding: 0.35rem 0;
  border-bottom: 1px solid #F0F4F4;
}

.villa-card__params li:last-child {
  border-bottom: 0;
}

/* Новости */

.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.news-card {
  display: flex;
  flex-direction: column;
  border: 1px solid #E4EAEA;
  border-radius: 0.75rem;
  overflow: hidden;
  background: #fff;
  text-decoration: none;
  color: inherit;
}

.news-card img {
  width: 100%;
  height: 12rem;
  object-fit: cover;
}

.news-card__body {
  padding: 1.25rem;
}

.news-card__date {
  font-size: 0.8rem;
  color: #6C7F80;
}

.news-card__title {
  margin: 0.5rem 0 0;
  font-size: 1.05rem;
  font-family: "Gilroy", sans-serif;
  color: #0E2930;
  line-height: 1.35;
}

.article {
  max-width: 46rem;
}

.article__date {
  color: #6C7F80;
  font-size: 0.85rem;
}

.article__image {
  width: 100%;
  border-radius: 0.75rem;
  margin: 1.5rem 0;
}

.article__body {
  line-height: 1.7;
}

.article__body p {
  margin-bottom: 1rem;
}

/* Вопросы и ответы */

.faq-list {
  margin-top: 2rem;
  max-width: 46rem;
}

.faq-item {
  border-bottom: 1px solid #E4EAEA;
  padding: 1.25rem 0;
}

.faq-item__question {
  font-family: "Gilroy", sans-serif;
  font-size: 1.1rem;
  color: #0E2930;
  margin: 0 0 0.5rem;
}

.faq-item__answer {
  line-height: 1.6;
  color: #293D3E;
  margin: 0;
}

.faq-item__answer + .faq-item__answer {
  margin-top: 0.75em;
}

.page-empty {
  padding: 2rem 0 3rem;
  color: #6C7F80;
}

/* Навигация по разделам в подвале */

.footer-sitemap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.75rem 2rem;
  padding: 2rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  margin-top: 2rem;
}

.footer-sitemap a {
  color: inherit;
  opacity: 0.75;
  text-decoration: none;
  font-size: 0.85rem;
}

.footer-sitemap a:hover {
  opacity: 1;
}

@media (max-width: 768px) {
  .page-head {
    padding: 2rem 0 1.5rem;
  }

  .page-head__title {
    font-size: 1.6rem;
  }
}

/*
    Текстовый блок страницы. Подключается и на главной, поэтому стили
    держим самодостаточными: на главной pages.css раньше не грузился,
    теперь он подключается в layouts/main.
*/

.seo-text {
  padding: 3rem 0 4rem;
}

.seo-text__body {
  max-width: 52rem;
  line-height: 1.7;
  color: #293D3E;
}

.seo-text__body p {
  margin: 0 0 1rem;
}

.seo-text__body p:last-child {
  margin-bottom: 0;
}

.seo-text .section-title {
  margin-bottom: 1.5rem;
}

@media (max-width: 768px) {
  .seo-text {
    padding: 2rem 0 2.5rem;
  }
}

/*
    ================================================================
    МОБИЛЬНЫЕ РАЗМЕРЫ ТЕКСТА
    ================================================================

    В шаблоне базовый размер шрифта задан в rem и на узком экране
    уменьшается: на ширине 375 px html получает 14 px, а текст страницы —
    12,6 px. Наши подписи, заданные в долях rem, опускались до 11,2 px.
    Читать такое с телефона тяжело, особенно текст в несколько абзацев.

    Поэтому для узких экранов размеры заданы в пикселях: так они
    не зависят от того, как шаблон масштабирует rem, и не могут
    оказаться мельче разумного минимума.

    Правится только то, что добавили мы. Оригинальные блоки сайта
    не трогаем: их размеры — решение дизайнера, и менять их
    в одностороннем порядке нельзя.
*/

@media (max-width: 768px) {

    /* Текст, который читают подряд. 15 px — нижняя граница, при которой
       абзац на телефоне читается без напряжения */
    .seo-text__body,
    .page-head__text,
    .article__body,
    .faq-item__answer {
        font-size: 15px;
        line-height: 1.65;
    }

    .seo-text__body p {
        margin-bottom: 0.9em;
    }

    /* Заголовки */
    .page-head__title {
        font-size: 24px;
        line-height: 1.25;
    }

    .faq-item__question {
        font-size: 17px;
        line-height: 1.35;
    }

    .villa-card__title {
        font-size: 17px;
    }

    .news-card__title {
        font-size: 16px;
        line-height: 1.35;
    }

    /* Параметры объекта: раньше 11,9 px — это уже мелкий шрифт */
    .villa-card__params {
        font-size: 13px;
    }

    .villa-card__params li {
        padding: 0.5rem 0;
    }

    .news-card__date,
    .article__date {
        font-size: 13px;
    }

    /* Хлебные крошки. Заодно увеличиваем зону нажатия по вертикали:
       ссылка высотой в одну строчку на телефоне попадается через раз */
    .page-head__crumbs {
        font-size: 13px;
        margin-bottom: 1rem;
    }

    .page-head__crumbs a,
    .page-head__crumbs span {
        display: inline-block;
        padding: 5px 0;
    }

    .page-head__crumbs ol {
        gap: 0.35rem;
    }

    /* Карточки: на телефоне они идут в одну колонку, поэтому
       фотографию можно сделать выше — так объект видно лучше */
    .villa-card img,
    .news-card img {
        height: 190px;
    }

    .page-empty {
        font-size: 15px;
    }
}

/* Совсем узкие экраны (от iPhone SE и меньше) */
@media (max-width: 360px) {
    .page-head__title {
        font-size: 21px;
    }

    .villa-card img,
    .news-card img {
        height: 165px;
    }
}

/*
    ================================================================
    ФОРМЫ НА ТЕЛЕФОНЕ
    ================================================================

    Две вещи, которые мешают оставить заявку с телефона.

    1. Шрифт в полях был 12,6 px. Safari на iPhone при касании поля
       со шрифтом меньше 16 px автоматически увеличивает страницу —
       человек тычет в «Телефон», а экран прыгает и уезжает вбок.
       Обратно он сам не вернётся, придётся сводить пальцами.
       Ровно 16 px — порог, при котором iOS этого не делает.

    2. Высота поля была 33 px. Рекомендованный минимум для пальца — 44 px,
       иначе промахи. Это же касается кнопки отправки.

    Правки только для узких экранов и только для полей форм —
    на вид остального сайта не влияют.
*/

@media (max-width: 768px) {

    .form input[type="text"],
    .form input[type="tel"],
    .form input[type="email"],
    .form_name,
    .form_tel,
    .feedback input[type="text"],
    .feedback input[type="tel"],
    .genplan-consult__form input {
        font-size: 16px;
        min-height: 44px;
    }

    .form_btn,
    .form button.btn,
    .feedback button {
        min-height: 44px;
        font-size: 15px;
    }

    /* Согласие на обработку данных — галочку тоже надо попасть пальцем */
    .form label,
    .feedback label {
        min-height: 24px;
    }
}

/* ------------------------------------------------------------------
   Калькулятор доходности.

   Реальных цифр по доходности компании здесь нет — считает по тому,
   что ввёл сам посетитель. Подробно — в invest-calculator.blade.php
   и config/invest_calculator.php.
   ------------------------------------------------------------------ */

.calc {
  padding: 4rem 0;
  background: #F7FAFA;
}

.calc__lead {
  max-width: 42rem;
  margin-top: 0.75rem;
  color: #6C7F80;
}

.calc-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2rem;
  margin-top: 2.5rem;
  align-items: start;
}

.calc-inputs,
.calc-results {
  background: #fff;
  border: 1px solid #E4EAEA;
  border-radius: 1rem;
  padding: 2rem;
}

.calc-field {
  margin-bottom: 1.75rem;
}

.calc-field:last-child {
  margin-bottom: 0;
}

.calc-field__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.6rem;
}

.calc-field label {
  font-size: 0.9rem;
  font-weight: 500;
  color: #0E2930;
}

.calc-field__num {
  font-family: "Gilroy", sans-serif;
  font-size: 1.05rem;
  color: #0E2930;
  white-space: nowrap;
}

.calc-field__hint {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.75rem;
  color: #A6ADAE;
}

/* Тарифная сетка: уровни спроса вместо ползунка суточной ставки.
   С 16.09.2026 их три — базовый, высокий, пиковый. */

.calc-tariffs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.4rem;
}

.calc-tariff {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 0.55rem 0.3rem;
  border: 1px solid #E4EAEA;
  border-radius: 0.5rem;
  background: #fff;
  color: #6C7F80;
  cursor: pointer;
  transition: 0.2s all;
}

.calc-tariff:hover {
  border-color: #0E2930;
  color: #0E2930;
}

.calc-tariff.is-active {
  background: #0E2930;
  border-color: #0E2930;
  color: #fff;
}

.calc-tariff__name {
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
}

.calc-tariff__pct {
  font-family: "Gilroy", sans-serif;
  font-size: 0.9rem;
  line-height: 1.1;
}

/* Ползунок: убираем системный вид и рисуем свой — трек и бегунок
   стилизуются отдельно в каждом движке, общих свойств для этого нет */
/*
    Высота самого input — 2.75rem: это область, за которую браузер
    засчитывает клик или касание. Трек рисуется тонким отдельно, через
    псевдоэлемент — так на телефоне палец не должен попасть точно
    в 4-пиксельную линию, а сам input остаётся визуально тонким.
*/
.calc-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 2.75rem;
  background: transparent;
  outline: none;
  margin: 0;
  cursor: pointer;
}

.calc-range::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: #E4EAEA;
}

.calc-range::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: #E4EAEA;
}

.calc-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #0E2930;
  border: 3px solid #fff;
  box-shadow: 0 0 0 1px #0E2930;
  cursor: pointer;
  /* Стандартный сдвиг: у WebKit бегунок не центрируется по треку сам */
  margin-top: -7px;
}

.calc-range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #0E2930;
  border: 3px solid #fff;
  box-shadow: 0 0 0 1px #0E2930;
  cursor: pointer;
}

.calc-number {
  width: 100%;
  height: 2.6rem;
  padding: 0 0.9rem;
  border: 1px solid #E4EAEA;
  border-radius: 0.5rem;
  font-family: "Gilroy", sans-serif;
  font-size: 1rem;
  color: #0E2930;
  background: #fff;
}

.calc-number:focus {
  outline: none;
  border-color: #0E2930;
}

/* Стрелки числового поля мешают на телефоне — палец промахивается
   мимо них чаще, чем попадает */
.calc-number::-webkit-outer-spin-button,
.calc-number::-webkit-inner-spin-button {
  margin: 0;
}

.calc-result-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.calc-result {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1rem;
  border-radius: 0.6rem;
  background: #F7FAFA;
}

.calc-result__label {
  font-size: 0.78rem;
  color: #6C7F80;
}

.calc-result__value {
  font-family: "Gilroy", sans-serif;
  font-size: 1.5rem;
  color: #0E2930;
  font-variant-numeric: tabular-nums;
}

.calc-result--accent {
  background: #0E2930;
}

.calc-result--accent .calc-result__label {
  color: #9FB4B5;
}

.calc-result--accent .calc-result__value {
  color: #fff;
}

.calc-chart {
  margin-top: 1.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid #F0F4F4;
}

.calc-chart__head {
  font-size: 0.85rem;
  color: #6C7F80;
  margin-bottom: 1rem;
}

.calc-chart__plot {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  height: 11rem;
  padding-bottom: 1.6rem;
}

.calc-chart__bar {
  flex: 1 1 0;
  min-width: 0;
  height: 2%;
  background: #DCE6E6;
  border-radius: 0.2rem 0.2rem 0 0;
  position: relative;
  transition: height .25s ease;
}

.calc-chart__bar.is-paid-off {
  background: #0E2930;
}

.calc-chart__bar-value {
  position: absolute;
  bottom: calc(100% + 0.3rem);
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.68rem;
  color: #6C7F80;
  white-space: nowrap;
}

.calc-chart__bar-label {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.7rem;
  color: #A6ADAE;
}

.calc-chart__line {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 2px dashed #C7A15A;
  z-index: 1;
}

.calc-chart__line span {
  position: absolute;
  right: 0;
  bottom: 0.25rem;
  font-size: 0.68rem;
  color: #8A6A20;
  background: #F7FAFA;
  padding: 0 0.35rem;
}

.calc__disclaimer {
  max-width: 42rem;
  margin-top: 1.5rem;
  font-size: 0.78rem;
  line-height: 1.5;
  color: #A6ADAE;
}

@media (max-width: 900px) {
  .calc-wrap {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767.98px) {
  .calc {
    padding: 2.5rem 0;
  }

  .calc-inputs,
  .calc-results {
    padding: 1.25rem;
    border-radius: 0.75rem;
  }

  .calc-result-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
  }

  .calc-result__value {
    font-size: 1.2rem;
  }

  /*
      Ниже — фиксированные px, а не rem. Базовый размер шрифта на этой
      ширине переменный (сжимается медиазапросами в main.css вплоть до 14px
      и меньше), и доля от него уходила ниже 12px — подсказка о комиссии
      становилась 10,5px, подписи результатов и дисклеймер — 10,9px.
      Здесь тот же приём, что уже применён для .section-text и .infra__text
      выше в этом файле: твёрдый пол читаемости, не зависящий от того,
      что происходит с :root на этой ширине.
  */
  .calc-field__hint,
  .calc-result__label,
  .calc__disclaimer,
  .calc-chart__head,
  .calc-chart__line span {
    font-size: 12px;
  }

  /* В два ряда кнопки тарифа ставились из-за подписи «Сниженный»:
     она рвалась по буквам. С 16.09.2026 этого уровня нет, а «Базовый»,
     «Высокий» и «Пиковый» втроём помещаются в один ряд. */

  .calc-tariff__name {
    font-size: 12px;
  }

  .calc-chart__plot {
    height: 8rem;
  }

  .calc-chart__bar-value,
  .calc-chart__bar-label {
    font-size: 10px;
  }
}

/* ------------------------------------------------------------------
   Управление под ключ — шаги от покупки до выплат (x-invest-program:
   /villas, /apartments, /investment). Обратная связь заказчика от
   15.09.2026, п. 6. Широкий экран — сетка 4 + 3, иконки шагов в ряду
   соединены линией; телефон — лента сверху вниз с линией слева.
   ------------------------------------------------------------------ */

.invprogram {
  padding: 4rem 0;
}

/* Заголовок слева, ссылка на /investment справа на его уровне; на телефоне
   ссылка уходит под шаги */
.invprogram__wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "head cta"
    "steps steps";
  column-gap: 2rem;
  align-items: end;
}

.invprogram-head {
  grid-area: head;
}

.invprogram__lead {
  max-width: 42rem;
  margin-top: 0.75rem;
  color: #6C7F80;
}

.invprogram__cta {
  grid-area: cta;
  justify-self: end;
}

.invprogram__cta:focus-visible {
  outline: 2px solid #0E2930;
  outline-offset: 2px;
}

.invprogram-steps {
  grid-area: steps;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 2rem;
  row-gap: 2.75rem;
  list-style: none;
  margin: 3rem 0 0;
  padding: 0;
}

.invprogram-step {
  position: relative;
  min-width: 0;
}

.invprogram-step__head {
  display: flex;
  align-items: center;
  margin-bottom: 1.25rem;
}

/* Линия к следующему шагу: через промежуток сетки до иконки соседа.
   В конце ряда и у последнего шага её нет */
.invprogram-step__head::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  margin: 0 -1.25rem 0 0.75rem;
  background: #D5DFDF;
}

.invprogram-step:nth-child(4n) .invprogram-step__head::after,
.invprogram-step:last-child .invprogram-step__head::after {
  display: none;
}

.invprogram-step__ico {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: max(3.5rem, 44px);
  height: max(3.5rem, 44px);
  border: 1px solid #CBD7D8;
  border-radius: 50%;
  background: #fff;
  color: #0E2930;
}

.invprogram-step__ico svg {
  display: block;
  width: max(1.75rem, 22px);
  height: max(1.75rem, 22px);
}

.invprogram-step__num {
  margin: 0 0 0.35rem;
  font-family: "Gilroy", sans-serif;
  font-size: max(0.85rem, 12px);
  letter-spacing: 0.08em;
  color: #9AB2B6;
}

.invprogram-step__title {
  margin: 0 0 0.5rem;
  font-family: "Gilroy", sans-serif;
  font-size: max(1.25rem, 16px);
  font-weight: 400;
  line-height: 1.3;
  color: #0E2930;
}

.invprogram-step__text,
.invprogram-split__item {
  margin: 0;
  font-size: max(0.88rem, 13px);
  line-height: 1.55;
  color: #6C7F80;
}

/* Доли выручки: полоса и подписи с цветной точкой того же цвета */
.invprogram-split__bar {
  display: flex;
  gap: 2px;
  max-width: 16rem;
  height: 6px;
  margin: 0.2rem 0 0.8rem;
  border-radius: 3px;
  overflow: hidden;
}

.invprogram-split__part {
  flex-basis: 0;
  min-width: 3px;
}

.invprogram-split {
  display: grid;
  gap: 0.3rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.invprogram-split__item {
  position: relative;
  padding-left: 1rem;
}

.invprogram-split__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
}

.invprogram-split__part--owner,
.invprogram-split__item--owner::before {
  background: #0E2930;
}

.invprogram-split__part--company,
.invprogram-split__item--company::before {
  background: #9AB2B6;
}

.invprogram-split__part--fund,
.invprogram-split__item--fund::before {
  background: #C7A15A;
}

.invprogram-split__share {
  font-weight: 600;
  color: #0E2930;
}

/* По два шага в ряду: до 900 px и на планшете стоя — там шаблон поднимает
   rem до 17 px, и в четырёх колонках текст шагов шёл бы по слову в строку */
@media (max-width: 900.98px), (max-width: 1080px) and (orientation: portrait) {
  .invprogram-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 3rem;
    row-gap: 2.25rem;
  }

  .invprogram-step__head::after {
    margin-right: -2.25rem;
  }

  .invprogram-step:nth-child(2n) .invprogram-step__head::after {
    display: none;
  }
}

/* Телефон: лента сверху вниз, линия слева соединяет иконки. Размеры
   в пикселях — по той же причине, что и у витрины планировок выше */
@media (max-width: 767.98px) {
  .invprogram {
    padding: 2.5rem 0;
  }

  .invprogram__wrap {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "head"
      "steps"
      "cta";
  }

  .invprogram__cta {
    justify-self: start;
    margin-top: 2rem;
  }

  .invprogram-steps {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
    margin-top: 1.75rem;
  }

  .invprogram-step {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 16px;
    padding-bottom: 22px;
  }

  .invprogram-step:last-child {
    padding-bottom: 0;
  }

  .invprogram-step::before {
    content: "";
    position: absolute;
    left: 22px;
    top: 50px;
    bottom: 6px;
    width: 1px;
    background: #D5DFDF;
  }

  .invprogram-step:last-child::before {
    display: none;
  }

  .invprogram-step__head {
    display: block;
    margin: 0;
  }

  .invprogram-step__head::after {
    display: none;
  }

  .invprogram-step__ico {
    width: 44px;
    height: 44px;
  }

  .invprogram-step__ico svg {
    width: 24px;
    height: 24px;
  }

  .invprogram-step__body {
    padding-top: 2px;
  }

  .invprogram-step__num {
    margin-bottom: 2px;
    font-size: 12px;
  }

  .invprogram-step__title {
    margin-bottom: 4px;
    font-size: 17px;
  }

  .invprogram-step__text,
  .invprogram-split__item {
    font-size: 14px;
  }

  .invprogram-split__bar {
    max-width: 220px;
    margin: 6px 0 10px;
  }

  .invprogram-split__item {
    padding-left: 14px;
  }

  .invprogram-split__item::before {
    width: 6px;
    height: 6px;
  }
}

/* wow.js проявляет шаги при прокрутке — без движения они видны сразу */
@media (prefers-reduced-motion: reduce) {
  .invprogram .wow {
    visibility: visible !important;
    animation: none !important;
  }
}

/* ------------------------------------------------------------------
   Трансляция со стройки на странице «Ход строительства».
   ------------------------------------------------------------------ */

.stream {
  padding: 3rem 0 1rem;
}

.stream__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-top: 1.5rem;
  background: #0E2930;
  border-radius: 1rem;
  overflow: hidden;
}

.stream__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 767.98px) {
  .stream {
    padding: 2rem 0 0.5rem;
  }

  .stream__frame {
    border-radius: 0.6rem;
  }
}

/* ------------------------------------------------------------------
   Раскрывающаяся карточка объекта — вилл и апартаментов.

   Тот же класс модального окна, что и .popup-slider/.feedback:
   position: fixed, скрыт через display: none, показывается через
   fadeIn/fadeOut в main.js. z-index ниже, чем у .feedback (8): внутри
   лежит форма заявки, и общий обработчик отправки (main.js) при успехе
   показывает .feedback поверх — какую бы форму на странице ни отправили.
   Если бы это окно стояло выше .feedback, «Спасибо» пряталось бы под ним.
   ------------------------------------------------------------------ */

.object-modal {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 7;
  background: rgba(14, 41, 48, 0.6);
  display: none;
  overflow-y: auto;
  padding: 3rem 1rem;
}

.object-modal__close {
  position: fixed;
  top: 1.25rem;
  right: 1.25rem;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: #fff;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  user-select: none;
  transition: .3s all;
  z-index: 1;
}

.object-modal__close svg {
  width: .8rem;
  height: .8rem;
}

.object-modal__close:hover {
  background: #0E2930;
  color: #fff;
}

.object-modal__panel {
  max-width: 56rem;
  margin: 0 auto;
  background: #fff;
  border-radius: 1rem;
  overflow: hidden;
}

.object-modal__gallery {
  position: relative;
  background: #0E2930;
}

.object-modal__carousel .owl-item img {
  display: block;
  width: 100%;
  height: 22rem;
  object-fit: cover;
}

.object-modal__carousel .owl-item img.is-plan {
  object-fit: contain;
  background: #fff;
}

.object-modal__arrows {
  position: absolute;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  z-index: 2;
}

.object-modal__body {
  padding: 2rem 2.5rem 2.5rem;
}

.object-modal__title {
  font-family: "Gilroy", sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  color: #0E2930;
  margin: 0 0 1.25rem;
}

.object-modal__params {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0 0 1.5rem;
  border-bottom: 1px solid #E4EAEA;
}

.object-modal__params li {
  display: flex;
  flex-direction: column;
  gap: .25rem;
}

.object-modal__params li span {
  font-size: .8rem;
  color: #6C7F80;
}

.object-modal__params li strong {
  font-family: "Gilroy", sans-serif;
  font-size: 1.3rem;
  color: #0E2930;
  font-weight: 500;
}

/* На месте прежней строки «Цена» — ведёт к заявке ниже в этом же окне */
.object-modal__price-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: -0.25rem 0 1.5rem;
  padding: 0.65rem 1.5rem;
  border: 1px solid #0E2930;
  border-radius: 0.4rem;
  background: #0E2930;
  color: #fff;
  font-family: "Gilroy", sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}

.object-modal__price-btn:hover {
  background: #14414D;
  border-color: #14414D;
}

.object-modal__price-btn:focus-visible {
  outline: 2px solid #0E2930;
  outline-offset: 2px;
}

/* Имя объекта над заголовком заявки — только в режиме «Узнать цену» */
.object-modal__consult-object {
  font-size: .8rem;
  color: #6C7F80;
  margin-bottom: .35rem;
}

.object-modal__consult-text {
  margin: -0.5rem 0 1rem;
  font-size: .85rem;
  line-height: 1.5;
  color: #6C7F80;
}

.object-modal__text {
  line-height: 1.65;
  color: #293D3E;
  margin-bottom: 2rem;
}

.object-modal__consult {
  background: #F7FAFA;
  border-radius: .75rem;
  padding: 1.5rem;
}

.object-modal__consult-title {
  font-family: "Gilroy", sans-serif;
  font-size: 1.15rem;
  color: #0E2930;
  margin-bottom: 1rem;
}

.object-modal__form {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.object-modal__form input {
  width: calc(50% - .5rem);
}

.object-modal__form .form-error {
  width: 100%;
}

.object-modal__form .btn {
  width: 100%;
}

@media (max-width: 767.98px) {
  .object-modal {
    padding: 1.25rem .75rem;
  }

  .object-modal__panel {
    border-radius: .75rem;
  }

  .object-modal__carousel .owl-item img {
    height: 14rem;
  }

  .object-modal__body {
    padding: 1.5rem 1.25rem 1.75rem;
  }

  .object-modal__title {
    font-size: 20px;
  }

  .object-modal__params {
    gap: 1rem 1.5rem;
  }

  .object-modal__params li span {
    font-size: 12px;
  }

  .object-modal__params li strong {
    font-size: 18px;
  }

  .object-modal__price-btn {
    width: 100%;
    min-height: 44px;
    font-size: 15px;
  }

  .object-modal__consult-object {
    font-size: 12px;
  }

  .object-modal__consult-text {
    font-size: 14px;
  }

  .object-modal__text {
    font-size: 14px;
    line-height: 1.6;
  }

  .object-modal__form input {
    width: 100%;
  }
}

/*
    ================================================================
    ВИТРИНА ПЛАНИРОВОК
    ================================================================

    /apartments, /villas и блок апартаментов на главной (обратная связь
    заказчика от 15.09.2026, п. 3 и 7). Разметка — компоненты x-layout-*,
    переключение — раздел LAYOUTS в main.js.

    Цвета, шрифты и кнопки те же, что у остального сайта: тёмный #0E2930,
    линии #E4EAEA, подписи #6C7F80, пилюли — как у прежнего фильтра
    апартаментов, кнопка «Узнать цену» — как в прежней карточке каталога.
    Стили фильтра, фото и кнопок тех карточек удалены вместе с разметкой.
*/

/* У панелей и этажей свой display ниже — без этого правила атрибут hidden
   проигрывал бы ему, и скрытые вкладки оставались бы на странице */
.lt-type[hidden],
.lt-variant[hidden],
.lt-plan[hidden],
.lt-lightbox [hidden] {
  display: none !important;
}

/* ---------- Карточки типов ---------- */

.lt-showcase {
  padding: 1rem 0 2.5rem;
}

.lt-home {
  padding: 6rem 0 4rem;
}

.lt-home .section-title {
  margin-bottom: 3.5rem;
  text-align: center;
}

.lt-cards {
  display: flex;
  gap: 1.25rem;
}

.lt-card {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  color: #0E2930;
  text-decoration: none;
}

.lt-card:hover {
  color: #0E2930;
}

.lt-card__cover {
  position: relative;
  display: block;
  height: 32rem;
  overflow: hidden;
  background: #0E2930;
}

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

.lt-card__caption {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  padding-top: 1rem;
}

.lt-card__name {
  font-family: "Gilroy", sans-serif;
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}

/* Выбранный тип на /apartments. На широком экране его видно и по ширине,
   на телефоне карточки одинаковые — остаётся черта под названием */
.lt-card[aria-selected="true"] .lt-card__name {
  border-bottom-color: #0E2930;
}

.lt-card__more {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #6C7F80;
  transition: color .3s;
}

.lt-card__more svg {
  flex-shrink: 0;
  transition: transform .3s;
}

.lt-card:hover .lt-card__more,
.lt-card.is-active .lt-card__more {
  color: #0E2930;
}

.lt-card:focus-visible {
  outline: 2px solid #0E2930;
  outline-offset: 4px;
}

/*
    Расширение. Ширину делит flex-grow: выбранная карточка (на главной —
    первая) занимает больше места, под курсором или фокусом — та, что под
    ними, остальные сужаются. :has, а не .lt-cards:hover — иначе курсор
    в зазоре между карточками на миг сбрасывал бы все к одной ширине.
    Браузер без :has просто оставит выбранную карточку широкой.

    Только на широком экране с мышью и без просьбы системы убрать движение:
    на телефоне наведения нет, а при prefers-reduced-motion карточки
    не меняют ширину вовсе — прыжок без анимации хуже, чем покой.
*/
@media (min-width: 901px) {
  .lt-card {
    transition: flex-grow .8s cubic-bezier(.4, 0, .2, 1);
  }

  .lt-card.is-active {
    flex-grow: 2.2;
  }

  .lt-card__cover img {
    transition: transform 1.2s ease;
  }
}

@media (min-width: 901px) and (hover: hover) and (prefers-reduced-motion: no-preference) {
  .lt-cards:has(.lt-card:hover) .lt-card {
    flex-grow: 1;
  }

  .lt-cards:has(.lt-card:hover) .lt-card:hover {
    flex-grow: 2.2;
  }

  .lt-card:hover .lt-card__cover img {
    transform: scale(1.04);
  }

  .lt-card:hover .lt-card__more svg {
    transform: translateX(3px);
  }
}

@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .lt-cards:has(.lt-card:focus-visible) .lt-card {
    flex-grow: 1;
  }

  .lt-cards:has(.lt-card:focus-visible) .lt-card:focus-visible {
    flex-grow: 2.2;
  }
}

/* Узкий экран: ряд прокручивается пальцем, карточки одинаковые */
@media (max-width: 900.98px) {
  .lt-cards {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 1rem;
    padding-bottom: 0.75rem;
    -webkit-overflow-scrolling: touch;
  }

  .lt-card {
    flex: 0 0 42%;
    scroll-snap-align: start;
  }

  .lt-card__cover {
    height: 26rem;
  }
}

@media (max-width: 767.98px) {
  .lt-home {
    padding: 5rem 0 2.5rem;
  }

  .lt-home .section-title {
    margin-bottom: 2rem;
  }

  .lt-showcase {
    padding: 0.5rem 0 1.5rem;
  }

  .lt-card {
    flex-basis: 78%;
  }

  .lt-card__cover {
    height: 22rem;
  }

  .lt-card__name {
    font-size: 20px;
  }

  .lt-card__more {
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lt-card,
  .lt-card__cover img,
  .lt-card__more,
  .lt-card__more svg {
    transition: none;
  }
}

/* ---------- Обзор типа и варианта ---------- */

.lt-overview {
  padding: 1rem 0 4rem;
}

.lt-overview--villas {
  padding-top: 1rem;
}

.lt-type__title {
  margin-bottom: 1.5rem;
}

.lt-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0 0 2rem;
}

.lt-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.7rem 1.6rem;
  border: 1px solid #E4EAEA;
  border-radius: 999px;
  background: #fff;
  color: #0E2930;
  font-family: "Gilroy", sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: 0.2s all;
}

.lt-pill:hover {
  border-color: #0E2930;
  color: #0E2930;
}

.lt-pill.is-active {
  background: #0E2930;
  border-color: #0E2930;
  color: #fff;
}

.lt-pill:focus-visible {
  outline: 2px solid #0E2930;
  outline-offset: 2px;
}

.lt-pills--small {
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.lt-pills--small .lt-pill {
  padding: 0.5rem 1.1rem;
  font-size: 0.85rem;
}

.lt-variant__title {
  font-family: "Gilroy", sans-serif;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.25;
  color: #0E2930;
  margin: 0 0 1.5rem;
}

.lt-variant__text {
  max-width: 46rem;
  margin: -0.75rem 0 1.5rem;
  line-height: 1.6;
  color: #293D3E;
}

/* Часть обзора: слева номер и название, справа содержимое */
.lt-part {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: 2rem;
  padding: 2.25rem 0;
  border-top: 1px solid #E4EAEA;
}

/* Название части не уезжает, пока листается высокий план */
.lt-part__head {
  position: sticky;
  top: 6rem;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.lt-part__num {
  font-family: "Gilroy", sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  color: #9AB2B6;
}

.lt-part__title {
  font-family: "Gilroy", sans-serif;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.25;
  color: #0E2930;
  margin: 0;
}

.lt-part__empty {
  margin: 0;
  padding: 2rem 1.5rem;
  border-radius: 0.75rem;
  background: #F7F9F9;
  color: #6C7F80;
}

/*
  Строка под таблицей помещений: площадей у варианта нет нигде.
  Не плашка, как lt-part__empty, — это примечание к таблице над ней,
  а не пустое состояние вместо содержимого.
*/
.lt-part__note {
  margin: 1rem 0 0;
  font-size: 0.85rem;
  line-height: 1.4;
  color: #6C7F80;
}

/* Кнопка заявки вместо списка объектов (x-layout-request) */
.lt-request__btn {
  margin-top: 1.25rem;
}

/* 1. Планировка */

.lt-plan {
  margin: 0;
}

.lt-plan__link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  border: 1px solid #E4EAEA;
  border-radius: 0.75rem;
  background: #fff;
  cursor: zoom-in;
}

.lt-plan__link img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 36rem;
  object-fit: contain;
}

.lt-plan__zoom {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  width: 2.6rem;
  height: 2.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(14, 41, 48, 0.75);
  color: #fff;
  transition: background .25s ease;
}

.lt-plan__link:hover .lt-plan__zoom {
  background: #0E2930;
}

.lt-plan__link:focus-visible,
.lt-renders__item:focus-visible {
  outline: 2px solid #0E2930;
  outline-offset: 2px;
}

.lt-plan__caption {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  margin-top: 0.75rem;
  font-size: 0.85rem;
  color: #6C7F80;
}

/* 2. Рендеры с ремонтом */

.lt-renders {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.lt-renders__item {
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 0.5rem;
  background: #F0F4F4;
  cursor: zoom-in;
}

.lt-renders__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}

.lt-renders__item:hover img {
  transform: scale(1.04);
}

/* 3. Размеры */

.lt-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 3.5rem;
  margin: 0;
}

.lt-stats__item {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.lt-stats dt {
  font-size: 0.8rem;
  color: #6C7F80;
}

.lt-stats dd {
  margin: 0;
  font-family: "Gilroy", sans-serif;
  font-size: 2rem;
  line-height: 1.1;
  color: #0E2930;
  font-variant-numeric: tabular-nums;
}

.lt-rooms {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.5rem 2.5rem;
  margin-top: 2rem;
}

.lt-rooms:first-child {
  margin-top: 0;
}

.lt-rooms__scroll {
  overflow-x: auto;
}

.lt-rooms__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  color: #293D3E;
}

.lt-rooms__table caption {
  padding-bottom: 0.6rem;
  text-align: left;
  font-family: "Gilroy", sans-serif;
  font-size: 1.05rem;
  color: #0E2930;
}

.lt-rooms__total {
  margin-left: 0.5rem;
  font-family: 'Manrope', sans-serif;
  font-size: 0.85rem;
  color: #6C7F80;
}

.lt-rooms__table th {
  padding: 0.4rem 0.75rem 0.4rem 0;
  border-bottom: 1px solid #E4EAEA;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 500;
  color: #6C7F80;
}

.lt-rooms__table td {
  padding: 0.5rem 0.75rem 0.5rem 0;
  border-bottom: 1px solid #F0F4F4;
  vertical-align: top;
}

.lt-rooms__table th:first-child,
.lt-rooms__table td:first-child {
  width: 2rem;
  color: #6C7F80;
}

.lt-rooms__table th:last-child,
.lt-rooms__table td:last-child {
  padding-right: 0;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/*
  Столбцов бывает меньше трёх: на чертежах угловой виллы нет ни номеров
  помещений, ни площадей, и пустые столбцы не выводятся (x-layout-parts).
  Тогда «первый» и «последний» столбец — это название, и правила для
  номера (узкая колонка серым) и для площади (прижата вправо, без
  переносов) ему не годятся: список названий читается слева.
*/
.lt-rooms__table--no-num th:first-child {
  width: auto;
}

.lt-rooms__table--no-num td:first-child {
  width: auto;
  color: #293D3E;
}

.lt-rooms__table--no-area th:last-child,
.lt-rooms__table--no-area td:last-child {
  text-align: left;
  white-space: normal;
  font-variant-numeric: normal;
}

/* 4. Материалы и бренды */

.lt-materials {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: 1.25rem 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.lt-material {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.lt-material img {
  flex-shrink: 0;
  width: 5rem;
  height: 5rem;
  object-fit: cover;
  border-radius: 0.5rem;
  background: #F0F4F4;
}

.lt-material__name {
  display: block;
  font-family: "Gilroy", sans-serif;
  font-size: 1rem;
  color: #0E2930;
}

.lt-material__text {
  margin: 0.25rem 0 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: #6C7F80;
}

/* Свободные апартаменты и виллы */

.lt-flats {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid #E4EAEA;
}

.lt-flat {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 2fr) auto;
  align-items: center;
  gap: 0.75rem 2rem;
  padding: 1rem 0;
  border-bottom: 1px solid #E4EAEA;
}

.lt-flat__name {
  font-family: "Gilroy", sans-serif;
  font-size: 1.05rem;
  color: #0E2930;
}

.lt-flat__params {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 2rem;
  margin: 0;
}

.lt-flat__param {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.lt-flat__param dt {
  font-size: 0.8rem;
  color: #6C7F80;
}

.lt-flat__param dd {
  margin: 0;
  font-family: "Gilroy", sans-serif;
  font-weight: 500;
  color: #0E2930;
}

.lt-flat__btn {
  padding: 0.65rem 1.25rem;
  border: 1px solid #0E2930;
  border-radius: 0.4rem;
  background: #0E2930;
  color: #fff;
  font-family: "Gilroy", sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}

.lt-flat__btn:hover {
  background: #14414D;
  border-color: #14414D;
}

.lt-flat__btn:focus-visible,
.lt-flats__calc:focus-visible {
  outline: 2px solid #0E2930;
  outline-offset: 2px;
}

.lt-flats__calc {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1.25rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: #0E2930;
  text-decoration: none;
}

.lt-flats__calc svg {
  flex-shrink: 0;
  transition: transform .2s;
}

.lt-flats__calc:hover {
  color: #14414D;
}

.lt-flats__calc:hover svg {
  transform: translateX(3px);
}

@media (max-width: 900.98px) {
  .lt-part {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
    padding: 1.75rem 0;
  }

  .lt-part__head {
    position: static;
    flex-direction: row;
    align-items: baseline;
    gap: 0.75rem;
  }
}

/* Размеры в пикселях — по той же причине, что и выше в файле: rem на этой
   ширине сжимается шаблоном, и доли от него уходили бы ниже 12 px */
@media (max-width: 767.98px) {
  .lt-overview {
    padding-bottom: 2.5rem;
  }

  .lt-pills {
    gap: 0.5rem;
    margin-bottom: 1.5rem;
  }

  .lt-pill,
  .lt-pills--small .lt-pill {
    min-height: 40px;
    padding: 0.5rem 1rem;
    font-size: 14px;
  }

  .lt-variant__title {
    font-size: 20px;
    margin-bottom: 1rem;
  }

  .lt-variant__text {
    margin-top: -0.25rem;
    font-size: 15px;
  }

  .lt-part__title {
    font-size: 20px;
  }

  .lt-part__num {
    font-size: 13px;
  }

  .lt-part__empty {
    padding: 1.25rem 1rem;
    font-size: 15px;
  }

  .lt-part__note {
    font-size: 14px;
  }

  .lt-plan__link {
    padding: 0.75rem;
  }

  .lt-plan__link img {
    max-height: 70vh;
  }

  .lt-plan__zoom {
    right: 10px;
    bottom: 10px;
    width: 38px;
    height: 38px;
  }

  .lt-plan__caption {
    font-size: 14px;
  }

  .lt-renders {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
  }

  .lt-stats {
    gap: 1rem 2rem;
  }

  .lt-stats dt {
    font-size: 13px;
  }

  .lt-stats dd {
    font-size: 26px;
  }

  .lt-rooms__table {
    font-size: 14px;
  }

  .lt-rooms__table caption {
    font-size: 17px;
  }

  .lt-rooms__total,
  .lt-rooms__table th {
    font-size: 13px;
  }

  .lt-material__name {
    font-size: 16px;
  }

  .lt-material__text {
    font-size: 14px;
  }

  .lt-flat {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.5rem 1rem;
    padding: 0.9rem 0;
  }

  .lt-flat__name {
    grid-column: 1 / -1;
    font-size: 16px;
  }

  .lt-flat__params {
    gap: 0.25rem 1.25rem;
  }

  .lt-flat__param dt {
    font-size: 13px;
  }

  .lt-flat__param dd {
    font-size: 15px;
  }

  .lt-flat__btn {
    min-height: 44px;
    font-size: 14px;
  }

  .lt-flats__calc {
    font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lt-pill,
  .lt-plan__zoom,
  .lt-renders__item img,
  .lt-flat__btn,
  .lt-flats__calc svg {
    transition: none;
  }

  .lt-renders__item:hover img,
  .lt-flats__calc:hover svg {
    transform: none;
  }
}

/* ---------- Просмотр на весь экран ---------- */

html.lt-lightbox-open {
  overflow: hidden;
}

.lt-lightbox {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(14, 41, 48, 0.97);
  color: #fff;
  overflow: hidden;
}

.lt-lightbox::backdrop {
  background: transparent;
}

.lt-lightbox__figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 4.5rem 1.5rem 6rem;
}

.lt-lightbox__img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100vh - 13rem);
  object-fit: contain;
  border-radius: 0.25rem;
}

.lt-lightbox.is-plan .lt-lightbox__img {
  padding: 1rem;
  background: #fff;
}

.lt-lightbox__caption {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem 1rem;
  margin-top: 1rem;
  font-size: 0.85rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.8);
}

.lt-lightbox__close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 2;
  width: 2.6rem;
  height: 2.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fff;
  color: #0E2930;
  cursor: pointer;
  transition: .3s all;
}

.lt-lightbox__close svg {
  width: .8rem;
  height: .8rem;
}

.lt-lightbox__arrows {
  position: absolute;
  left: 50%;
  bottom: 1.5rem;
  z-index: 2;
  transform: translateX(-50%);
}

/* Те же круглые стрелки, что у слайдеров сайта (.arrows span), только кнопками */
.lt-lightbox__arrows button {
  width: 2.6rem;
  height: 2.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #fff;
  border-radius: 50%;
  background: #fff;
  color: #0E2930;
  cursor: pointer;
  transition: .3s all;
}

.lt-lightbox__arrows button svg {
  width: 1.2rem;
  height: auto;
}

.lt-lightbox__close:hover,
.lt-lightbox__arrows button:hover {
  background: #9AB2B6;
  border-color: #9AB2B6;
}

.lt-lightbox button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

@media (max-width: 767.98px) {
  .lt-lightbox__figure {
    padding: 4rem 0.75rem 5.5rem;
  }

  .lt-lightbox__img {
    max-height: calc(100vh - 11rem);
  }

  .lt-lightbox.is-plan .lt-lightbox__img {
    padding: 0.5rem;
  }

  .lt-lightbox__caption {
    font-size: 13px;
  }

  .lt-lightbox__close,
  .lt-lightbox__arrows button {
    width: 44px;
    height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lt-lightbox__close,
  .lt-lightbox__arrows button {
    transition: none;
  }
}

/*
    ================================================================
    ИНФРАСТРУКТУРА
    ================================================================

    x-infra на главной и /infrastructure (обратная связь заказчика
    от 15.09.2026, п. 5): на широком экране фото выбранного объекта
    с названием и описанием слева, список всех объектов справа; на узком
    (до 900 px, как у карточек типов апартаментов) — аккордеон. Разметка
    и почему аккордеон, а не вкладки — в шапке components/infra.blade.php,
    переключение — раздел INFRA в main.js.

    Фон, плашка и заголовок секции — прежние из main.css (.infra, .infra__bg,
    .infra-head): размытое фото открытого объекта под тёмной вуалью.
    Правила ленты (.infra-main, .infra-slider, .infra-arrows, .infra-wrap)
    там остались, но разметки под ними больше нет. Выбранный пункт — белая
    строка с тёмным текстом, как плашка над заголовком.
*/

/* У панели свой display в сетке — без этого hidden проигрывал бы ему */
.infra-tabs__panel[hidden] {
  display: none !important;
}

/* main.css снимает у контейнера секции правый отступ — лента уходила
   за край экрана. Списку он нужен: возвращаем значения .container */
.infra .container {
  padding-right: 6rem;
}

.infra-head {
  margin-bottom: 3rem;
}

/*
    Сетка: кнопки — во второй колонке, по строке на объект; все панели
    стоят в первой колонке поверх друг друга и занимают высоту всех строк.
    Число строк приходит из разметки (--infra-count), иначе -1 указывал бы
    только на первую строку.
*/
.infra-tabs {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  grid-template-rows: repeat(var(--infra-count, 17), auto);
  column-gap: 3rem;
  align-items: start;
}

.infra-tabs__head {
  grid-column: 2;
  display: flex;
  margin: 0;
  font: inherit;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}

.infra-tabs__head:first-of-type {
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}

.infra-tabs__button {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 0.7rem 1rem;
  text-align: left;
  color: #fff;
  font-family: "Gilroy", sans-serif;
  font-weight: 500;
  font-size: max(14px, 0.9rem);
  line-height: 1.3;
  cursor: pointer;
  transition: color .3s, background-color .3s;
}

.infra-tabs__num {
  flex-shrink: 0;
  min-width: 1.6em;
  font-size: 0.85em;
  font-variant-numeric: tabular-nums;
  opacity: 0.6;
}

.infra-tabs__name {
  flex: 1 1 auto;
  min-width: 0;
}

.infra-tabs__icon {
  flex-shrink: 0;
  width: 1.2rem;
  height: 1.2rem;
  min-width: 18px;
  min-height: 18px;
  opacity: 0;
  transform: translateX(-0.4rem);
  transition: opacity .3s, transform .3s;
}

@media (hover: hover) {
  .infra-tabs__button:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
  }

  .infra-tabs__button:hover .infra-tabs__icon {
    opacity: 0.6;
    transform: none;
  }
}

.infra-tabs__button[aria-expanded="true"] {
  color: #0E2930;
  background: #fff;
}

.infra-tabs__button[aria-expanded="true"] .infra-tabs__icon {
  opacity: 1;
  transform: none;
}

/* Глобально у кнопок outline: none (main.css) — фокус с клавиатуры возвращаем */
.infra-tabs__button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -2px;
}

.infra-tabs__button[aria-expanded="true"]:focus-visible {
  outline-color: #0E2930;
  outline-offset: -5px;
}

.infra-tabs__panel {
  position: relative;
  grid-column: 1;
  grid-row: 1 / -1;
  min-width: 0;
}

.infra-tabs__img {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: rgba(14, 41, 48, 0.6);
}

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

.infra-tabs__caption {
  max-width: 40rem;
  padding-top: 1.5rem;
}

.infra-tabs__title {
  margin-bottom: 0.75rem;
  font-family: "Gilroy", sans-serif;
  font-size: max(20px, 1.45rem);
  line-height: 1.2;
}

.infra-tabs__text {
  font-size: max(13px, 0.8rem);
  line-height: 1.6;
  color: #fff;
}

/*
    ----------------------------------------------------------------
    ГАЛЕРЕЯ ОБЪЕКТА (заказчик 16.09.2026: галереи инфраструктуры делаем)

    Только у объектов с кадрами (.infra-tabs__img--gallery), остальные
    панели не меняются. Основное фото — ссылка на просмотр на весь экран
    (окно планировок, .lt-lightbox), значок лупы в правом верхнем углу.
    Ряд миниатюр на широком экране лежит поверх нижнего края фото, на тёмной
    растяжке: высота фото и подписи та же, что у объектов без галереи,
    и расчёт «блок на один экран» ниже не меняется. Высота миниатюр идёт
    от высоты окна, как и всё в блоке. На узком экране ряд — под фото.
    ----------------------------------------------------------------
*/
.infra-tabs__img--gallery {
  position: relative;
}

.infra-tabs__zoom {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  cursor: zoom-in;
}

.infra-tabs__zoom:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -4px;
}

.infra-tabs__zoom-icon {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2.6rem;
  height: 2.6rem;
  min-width: 36px;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(14, 41, 48, 0.75);
  color: #fff;
  transition: background .25s ease;
}

.infra-tabs__zoom:hover .infra-tabs__zoom-icon {
  background: #0E2930;
}

.infra-gallery {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  gap: 0.5rem;
  margin: 0;
  padding: 2.5rem 1rem 1rem;
  list-style: none;
  background: linear-gradient(to top, rgba(14, 41, 48, 0.7), rgba(14, 41, 48, 0));
  /* Растяжка не должна перехватывать клик по фото между миниатюрами */
  pointer-events: none;
}

.infra-gallery li {
  flex: 0 0 auto;
  pointer-events: auto;
}

.infra-gallery__item {
  position: relative;
  display: block;
  height: clamp(34px, calc(var(--infra-1vh, 1vh) * 6), 4rem);
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(14, 41, 48, 0.6);
  cursor: zoom-in;
  transition: border-color .25s ease;
}

.infra-gallery__item img {
  transition: transform .6s ease;
}

.infra-gallery__item:hover {
  border-color: #fff;
}

.infra-gallery__item:hover img {
  transform: scale(1.06);
}

.infra-gallery__item:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* «+4» на последней видимой миниатюре: столько кадров ещё в просмотре */
.infra-gallery__more {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(14, 41, 48, 0.62);
  color: #fff;
  font-family: "Gilroy", sans-serif;
  font-weight: 500;
  font-size: max(14px, 0.95rem);
  line-height: 1;
}

/*
    ----------------------------------------------------------------
    ОДИН ЭКРАН (задача заказчика от 16.09.2026)

    Было: на 1440x900 секция занимала 1035 px при окне 900. Высоту
    задавали две неподвижные величины — фото с соотношением 4/3 (551 px)
    и 17 строк списка по 44 px (725 px). До нижних пунктов приходилось
    прокручивать страницу, и целиком блок не было видно ни на одном
    ноутбуке.

    Стало: на широком экране секция ровно в высоту окна, а её содержимое
    считается от этой высоты. Список делит остаток на 17 равных строк
    (число объектов приходит из разметки в --infra-count), фото забирает
    то, что осталось от строки с подписью. Ничего не прокручивается —
    ни страница, ни список внутри.

    Считаем в svh — это высота окна без учёта выезжающих панелей
    браузера; где svh не поддержан, остаётся vh. Пиксельных высот здесь
    нет намеренно: на окне 700 px блок ужимается сам.

    Фото не расплющивается: жёсткое соотношение сторон снято, кадрирует
    по-прежнему object-fit: cover.
    ----------------------------------------------------------------
*/
@media (min-width: 901px) {
  .infra {
    /* Одна точка подмены единицы вместо пары «свойство: vh; свойство: svh»
       в каждом правиле — дальше по блоку считаем от неё */
    --infra-1vh: 1vh;

    /* Шапка сайта закреплена поверх страницы и всегда занимает верхние
       80 px окна. Блок высотой ровно в окно из-за неё не помещался:
       верх уходил под шапку, а низ списка обрезался. Поэтому высоту
       считаем от свободной части окна, а при прокрутке к блоку по якорю
       оставляем шапке её полосу (scroll-margin-top) */
    --infra-header: 80px;

    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: calc(var(--infra-1vh) * 100 - var(--infra-header));
    scroll-margin-top: var(--infra-header);
    padding-top: clamp(0.6rem, calc(var(--infra-1vh) * 2.4), 2rem);
    padding-bottom: clamp(0.8rem, calc(var(--infra-1vh) * 3.4), 2.6rem);
  }

  @supports (height: 1svh) {
    .infra {
      --infra-1vh: 1svh;
    }
  }

  .infra > .container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1 1 auto;
    min-height: 0;
  }

  .infra-head {
    margin-bottom: clamp(0.8rem, calc(var(--infra-1vh) * 3), 2.4rem);
  }

  .infra__subtitle {
    margin-bottom: clamp(0.5rem, calc(var(--infra-1vh) * 2), 1.7rem);
  }

  /* Заголовок держим в двух строках: кегль падает вместе с окном, поэтому
     строке дали больше ширины — иначе уменьшенный текст рассыпался бы на три */
  .infra .white-title {
    max-width: 34rem;
    font-size: min(2.5rem, calc(var(--infra-1vh) * 4.6));
    line-height: 1.12;
  }

  /*
      Строки списка делят высоту блока поровну (1fr на объект) — так видны
      все 17, а не первые десять. Высоту блока задаёт остаток от окна,
      поэтому и строка, и фото подстраиваются сами.
      Верхняя граница нужна на высоких окнах: без неё на мониторе 1440p
      строки расползлись бы до 60 px и список читался бы как меню. Предел
      с px-минимумом, как у кегля кнопки: на ширине 901–1000 px корневой
      шрифт сайта падает до 8,5 px, и граница в одних rem срезала бы список
      до 24-пиксельных строк, оставив под ним пустоту.
  */
  .infra-tabs {
    flex: 1 1 auto;
    min-height: 0;
    max-height: calc(var(--infra-count, 17) * max(34px, 2.9rem));
    grid-template-rows: repeat(var(--infra-count, 17), minmax(0, 1fr));
    align-items: stretch;
  }

  /* Высоту строки теперь задаёт сетка, вертикальные отступы кнопки
     только мешали бы — текст просто стоит по центру своей строки */
  .infra-tabs__button {
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1.25;
  }

  .infra-tabs__panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .infra-tabs__img {
    flex: 1 1 auto;
    min-height: 0;
    aspect-ratio: auto;
  }

  .infra-tabs__caption {
    flex: 0 0 auto;
    padding-top: clamp(0.4rem, calc(var(--infra-1vh) * 1.8), 1.5rem);
  }

  .infra-tabs__title {
    margin-bottom: clamp(0.15rem, calc(var(--infra-1vh) * 0.8), 0.75rem);
    font-size: min(max(20px, 1.45rem), calc(var(--infra-1vh) * 3.4));
  }

  /* Описания у объектов разной длины: без места под три строки нижний край
     фото прыгал бы при каждом переключении */
  .infra-tabs__text {
    min-height: 4.5em;
    line-height: 1.5;
  }
}

/*
    Ниже 640 px в окне 17 строк уже не уместить по-человечески: строка
    ушла бы под 30 px вместе с кеглем. Там отпускаем высоту секции —
    страница прокручивается, как было до правки.
*/
@media (min-width: 901px) and (max-height: 639.98px) {
  .infra {
    height: auto;
  }

  .infra-tabs {
    min-height: calc(var(--infra-count, 17) * 1.9rem);
  }
}

/*
    Смена объекта на широком экране: новое фото проявляется поверх прежнего,
    прежняя подпись гаснет, новая поднимается. Длительности — в main.js
    (850 мс до уборки прежней панели).
*/
@keyframes infra-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes infra-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes infra-rise {
  from { opacity: 0; transform: translateY(0.75rem); }
  to { opacity: 1; transform: none; }
}

@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .infra-tabs__panel.is-entering {
    z-index: 2;
  }

  .infra-tabs__panel.is-entering .infra-tabs__img {
    animation: infra-fade-in .7s ease both;
  }

  .infra-tabs__panel.is-entering .infra-tabs__caption {
    animation: infra-rise .6s ease .2s both;
  }

  .infra-tabs__panel.is-leaving .infra-tabs__caption {
    animation: infra-fade-out .2s ease both;
  }
}

@media (max-width: 1500.98px) {
  .infra .container {
    padding-right: 5rem;
  }
}

/* Узкий экран: аккордеон, панель раскрывается под своим пунктом */
@media (max-width: 900.98px) {
  .infra-tabs {
    display: block;
    border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  }

  .infra-tabs__head,
  .infra-tabs__head:first-of-type {
    border-top: 1px solid rgba(255, 255, 255, 0.22);
    border-bottom: 0;
  }

  .infra-tabs__button {
    gap: 0.75rem;
    min-height: 48px;
    padding: 0.75rem 0;
    font-size: 16px;
  }

  .infra-tabs__button:hover,
  .infra-tabs__button[aria-expanded="true"] {
    color: #fff;
    background: transparent;
  }

  .infra-tabs__button[aria-expanded="true"]:focus-visible {
    outline-color: #fff;
    outline-offset: -2px;
  }

  .infra-tabs__icon {
    width: 22px;
    height: 22px;
    opacity: 0.8;
    transform: rotate(90deg);
  }

  .infra-tabs__button:hover .infra-tabs__icon {
    transform: rotate(90deg);
  }

  .infra-tabs__button[aria-expanded="true"] .infra-tabs__icon {
    transform: rotate(-90deg);
  }

  .infra-tabs__panel {
    padding: 0.25rem 0 1.5rem;
  }

  .infra-tabs__img {
    aspect-ratio: 16 / 10;
  }

  .infra-tabs__caption {
    padding-top: 1rem;
  }

  /* Название уже в строке над фото */
  .infra-tabs__title {
    display: none;
  }

  .infra-tabs__text {
    font-size: 14px;
    line-height: 1.55;
  }

  /* Галерея: соотношение сторон переходит с рамки на само фото, ряд
     миниатюр встаёт под фото — поверх снимка шириной в телефон он закрыл бы
     его треть. Квадратные плитки делят ширину поровну: на 375 px выходит
     около 60 px — палец попадает */
  .infra-tabs__img--gallery {
    aspect-ratio: auto;
    overflow: visible;
    background: transparent;
  }

  .infra-tabs__img--gallery .infra-tabs__zoom {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: rgba(14, 41, 48, 0.6);
  }

  .infra-tabs__zoom:focus-visible {
    outline-offset: 2px;
  }

  .infra-tabs__zoom-icon {
    top: 10px;
    right: 10px;
    width: 38px;
    height: 38px;
  }

  .infra-gallery {
    position: static;
    padding: 0.5rem 0 0;
    background: none;
    pointer-events: auto;
  }

  .infra-gallery li {
    flex: 0 1 88px;
    min-width: 0;
  }

  .infra-gallery__item {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
  }
}

@media (max-width: 900.98px) and (prefers-reduced-motion: no-preference) {
  .infra-tabs__panel.is-entering {
    animation: infra-rise .5s ease both;
  }
}

@media (max-width: 767.98px), (max-width: 1080px) and (orientation: portrait) {
  .infra .container {
    padding-right: 3rem;
  }
}

@media (max-width: 767.98px) {
  .infra .container {
    padding-right: 1rem;
  }

  .infra-head {
    margin-bottom: 2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .infra-tabs__button,
  .infra-tabs__icon,
  .infra-tabs__zoom-icon,
  .infra-gallery__item,
  .infra-gallery__item img {
    transition: none;
  }

  .infra-gallery__item:hover img {
    transform: none;
  }
}

/*
    ================================================================
    КАРТА ЧАРВАКА
    ================================================================

    x-charvak-map в блоке расположения — главная и /location, сразу под
    заголовком блока (заказчик 15.09.2026, п. 4; маркетолог 16.09.2026, п. 7;
    заказчик 16.09.2026 — «в таком же качестве, как у Apex, только в нашем
    стиле», позже — крупный масштаб: что рядом с курортом в пешей доступности):
    рисунок карты окрестностей курорта из векторных данных OpenStreetMap, места
    в кадре — точками со значком и плашками с минутами пешком, места за кадром —
    светлыми указателями у края, у выбранного места — его пеший маршрут, линейка
    «300 м ≈ 4 мин пешком», «развернуть» — окно с картой крупно. Разметка —
    components/charvak-map.blade.php, переключение, раскладка указателей и окно —
    раздел CHARVAK MAP в main.js, рисунок, его цвета, положения меток, время
    и маршруты — scripts/charvak-map. Доработка по замечаниям арт-директора 17.09.2026,
    по второй и третьей проверке в тот же день.

    Широкий экран (от 1201 px): карта по ширине карточек .location-info,
    заголовок и карточка места — белой панелью в правом верхнем углу карты
    (там вода залива без меток), «развернуть» и линейка левее неё — в правом нижнем
    углу. Уже — заголовок над картой, карточка под ней. Телефон (до 767.98 px):
    карта во всю ширину экрана окном 4 : 5 — тот же рисунок крупнее, места рядом
    чуть левее середины (справа кнопка WhatsApp); указателей на ней нет, все места —
    кнопками в списке под карточкой (.cmap__more); «развернуть» — в правом верхнем углу
    и на планшете стоя (в нижнем её закрывала кнопка WhatsApp), линейка на телефоне —
    в левом нижнем. В окне (.cmap__grid.is-expanded) от 1024 px — рисунок целиком
    (.cmap-dialog.is-whole), уже — крупнее окна и прокручивается; указатели прижаты
    к видимому краю окна, заголовок и карточка — панелью справа, левее крестика окна.

    Иерархия: курорт — крупнее всего (точка с широким песочным кольцом, логотип 64 px),
    места рядом — тёмные плашки со значком, 13 px, указатели пешком — белые карточки с рамкой
    в 10 px от края, 13 px, дальние места — тихие вкладки вплотную к краю, 12 px, стрелка
    в светлом кружке, подпись воды — тихий курсив. Тёмная заливка — только у мест в кадре
    (четвёртая проверка арт-директора, 17.09.2026: тёмные кружки дальних спорили с точками мест,
    а подпись за краем 13 px была крупнее плашек мест 12 px).

    Палитра сайта: плашки мест #0E2930, наведение #14414D, выбранное место —
    песочная обводка плашки и песочный кружок значка, как карточка виллы на генплане;
    указатели — белые с текстом #0E2930; второстепенный текст #62777A; подпись воды
    #6F9AA3. Размеры с px-минимумом, как в «Инфраструктуре»: между 900 и 1500 px
    корневой шрифт сайта падает до 10–15 px, и подписи в rem стали бы мелкими.
*/

.cmap {
  margin: 2.5rem 0 3.5rem;
}

/* Карта — строки 1–3 на всю ширину, панель — второй столбец двух верхних строк поверх неё, на воде */
.cmap__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max(320px, 23rem);
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  max-width: 70rem;
  margin: 0 auto;
}

.cmap__head {
  grid-column: 2;
  grid-row: 1;
  z-index: 4;
  margin: 1.5rem 1.5rem 0 0;
  padding: 1.75rem 1.75rem 1.25rem;
  border-radius: 0.25rem 0.25rem 0 0;
  background: #fff;
  box-shadow: 0 0.5rem 1.5rem rgba(14, 41, 48, 0.14);
  clip-path: inset(-2rem -2rem 0 -2rem);
}

/* В панели на карте — в одну строку на её ширину; над картой (до 1200 px) крупнее */
.cmap__title {
  font-family: "Gilroy", sans-serif;
  font-weight: 400;
  font-size: max(18px, 1.3rem);
  line-height: 1.2;
  text-transform: uppercase;
  color: #0E2930;
}

.cmap__hint {
  margin-top: 0.75rem;
  font-size: max(13px, 0.8rem);
  line-height: 1.5;
  color: #62777A;
}

/* Пояснение ко времени пешком — мельче подсказки */
.cmap__note {
  margin-top: 0.25rem;
  font-size: max(12px, 0.72rem);
  line-height: 1.45;
  color: #62777A;
}

/* Значки пешехода и машины на плашках, в карточке и в списке — по размеру текста */
.cmap-icon {
  flex: none;
  width: 1.1em;
  height: 1.1em;
}

/* Текст только для читалки экрана */
.cmap-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.cmap__map {
  position: relative;
  grid-column: 1 / -1;
  grid-row: 1 / 4;
  min-width: 0;
}

.cmap__viewport {
  position: relative;
  overflow: hidden;
  border-radius: 0.25rem;
}

/* Фон — цвет суши рисунка (STYLE.land в build-map.mjs): пока SVG грузится, место карты не белое */
.cmap__canvas {
  position: relative;
  background: #ECE5DA;
}

.cmap__img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  -webkit-user-drag: none;
  user-select: none;
}

/*
    Пеший маршрут выбранного места — пунктиром цвета плашек поверх рисунка:
    видно, что «3 мин» — это путь по дорожкам, а не по прямой. Толщина и шаг
    пунктира в пикселях экрана при любом размере рисунка (non-scaling-stroke)
*/
.cmap__routes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.cmap__route {
  display: none;
  fill: none;
  stroke: #0E2930;
  stroke-opacity: 0.6;
  stroke-width: 2.5px;
  stroke-dasharray: 6px 4px;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.cmap__route.is-shown {
  display: inline;
}

/*
    Подпись воды — единственная подпись на рисунке, тихая: курсив с разрядкой цвета
    воды потемнее, середина — в точке из конфига (на воде левее панели). Под метками
    и маршрутом, мышь и касание проходят сквозь неё
*/
.cmap__water {
  position: absolute;
  z-index: 0;
  transform: translate(-50%, -50%);
  font-family: "Gilroy", sans-serif;
  font-style: italic;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 0.12em;
  color: #6F9AA3;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

/*
    Линейка — в правом нижнем углу карты, левее «развернуть»: в левом нижнем теснились
    указатели. Отрезок во столько метров, сколько в подписи; подпись шире отрезка
    выступает влево, а не на кнопку
*/
.cmap__scale {
  position: absolute;
  right: calc(1rem + 40px + 12px);
  bottom: 1rem;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: calc(var(--cmap-scale) * 1%);
  margin: 0;
  pointer-events: none;
  font-family: "Gilroy", sans-serif;
  font-size: 11px;
  line-height: 1.2;
  color: #0E2930;
}

.cmap__scale-bar {
  display: block;
  align-self: stretch;
  height: 5px;
  border: 1.5px solid #0E2930;
  border-top: 0;
}

.cmap__scale-text {
  display: inline-block;
  margin-top: 3px;
  padding: 1px 5px;
  border-radius: 0.2rem;
  background: rgba(255, 255, 255, 0.8);
  white-space: nowrap;
}

/*
    Подсказка в окне: карту можно двигать — до первого перетаскивания, прокрутки или выбора места.
    Светлая, как подпись линейки: тёмная капсула рядом со светлыми вкладками дальних мест читалась
    кнопкой (четвёртая проверка арт-директора, 17.09.2026)
*/
.cmap__pan {
  position: absolute;
  left: 50%;
  bottom: 1rem;
  z-index: 5;
  margin: 0;
  padding: 4px 10px;
  border-radius: 0.2rem;
  background: rgba(255, 255, 255, 0.85);
  color: #0E2930;
  font-family: "Gilroy", sans-serif;
  font-size: 13px;
  line-height: 1.3;
  white-space: nowrap;
  pointer-events: none;
  transform: translateX(-50%);
}

.cmap__grid:not(.is-expanded) .cmap__pan {
  display: none;
}

/*
    «Развернуть» — белая квадратная кнопка в правом нижнем углу карты: правый
    верхний на широком экране занят панелью. Без <dialog> её нет
*/
.cmap__expand {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  z-index: 5;
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 0.25rem;
  background: #fff;
  color: #0E2930;
  box-shadow: 0 0.25rem 0.75rem rgba(14, 41, 48, 0.18);
  cursor: pointer;
  transition: background-color .3s, color .3s;
}

.cmap--dialog .cmap__expand {
  display: inline-flex;
}

@media (hover: hover) {
  .cmap__expand:hover {
    background: #0E2930;
    color: #fff;
  }
}

.cmap__expand:focus-visible {
  outline: 2px solid #0E2930;
  outline-offset: 2px;
}

/* Подпись OpenStreetMap (условие лицензии) — под картой справа */
.cmap__osm {
  grid-column: 1 / -1;
  grid-row: 4;
  justify-self: end;
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.4;
}

.cmap__osm a {
  color: #62777A;
}

.cmap__osm a:hover {
  color: #0E2930;
  text-decoration: underline;
}

.cmap__osm a:focus-visible {
  outline: 2px solid #0E2930;
  outline-offset: 2px;
}

/* ---------- Метки ---------- */

.cmap__pins {
  position: absolute;
  inset: 0;
}

/*
    Кнопка метки — точка с центром в left/top из конфига, плашка отложена
    от неё в сторону side. --cmap-dot — диаметр точки, --cmap-gap — зазор
    от точки до плашки, --cmap-tip — хвостик плашки, --cmap-plate и --cmap-ink —
    цвет плашки и текста, --cmap-ring — обводка плашки (выбранная и наведённая
    метка меняют только их). У кнопки размер точки, а не ноль: иначе дерево
    доступности считает её невидимой
*/
.cmap-pin {
  --cmap-dot: 22px;
  --cmap-gap: 7px;
  --cmap-tip: 5px;
  --cmap-plate: #0E2930;
  --cmap-ink: #fff;
  --cmap-ring: transparent;
  position: absolute;
  z-index: 1;
  box-sizing: border-box;
  width: var(--cmap-dot);
  height: var(--cmap-dot);
  margin: calc(var(--cmap-dot) / -2) 0 0 calc(var(--cmap-dot) / -2);
  padding: 0;
  border: 0;
  background: none;
  font-family: "Gilroy", sans-serif;
  font-weight: 500;
  font-size: 13px;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: none;
}

/* Зона нажатия вокруг точки — не меньше 40 px, хоть точка и меньше */
.cmap-pin:not(.cmap-pin--pointer)::before {
  content: "";
  position: absolute;
  inset: min(0px, calc((var(--cmap-dot) - 40px) / 2));
  border-radius: 50%;
}

/*
    Пляж: точка из конфига — середина кромки песка у воды, --cmap-shore — направление
    от кромки на воду. Кружок с плашкой сдвинут туда на радиус с кантом: на воде вплотную
    к песку при любом размере карты, пеший маршрут приходит к его краю. Посреди полосы
    кружок закрывал половину песка (третья проверка арт-директора, 17.09.2026)
*/
.cmap-pin[data-cmap-shore] {
  --cmap-shore-r: calc(var(--cmap-dot) / 2 + 3px);
  translate: calc(cos(var(--cmap-shore)) * var(--cmap-shore-r)) calc(sin(var(--cmap-shore)) * var(--cmap-shore-r));
}

/* Точка места — тёмный кружок с белым значком: пляж, смотровая, зарядка узнаются без подписи */
.cmap-pin__mark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #0E2930;
  color: #fff;
  box-shadow: 0 0 0 2px #fff, 0 1px 4px 2px rgba(14, 41, 48, 0.22);
  transition: box-shadow .3s, background-color .3s;
}

.cmap-pin__mark .cmap-icon {
  width: 62%;
  height: 62%;
}

.cmap-pin__label {
  position: absolute;
  display: flex;
  align-items: center;
  padding: 5px 9px;
  border-radius: 0.25rem;
  background: var(--cmap-plate);
  color: var(--cmap-ink);
  box-shadow: 0 0 0 3px var(--cmap-ring), 0 0.2rem 0.6rem rgba(14, 41, 48, 0.22);
  transition: background-color .3s, color .3s, box-shadow .3s, opacity .3s;
}

/*
    Минуты на плашке — после названия, через тонкую черту: у места рядом —
    пешком, у стрелки — на машине. Тот же цвет, что у названия, приглушённый
*/
.cmap-pin__time {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 7px;
  padding-left: 7px;
  border-left: 1px solid currentColor;
  border-left-color: rgba(255, 255, 255, 0.3);
  font-weight: 400;
}

.cmap-pin__time > [aria-hidden="true"],
.cmap-pin__time .cmap-icon {
  opacity: 0.8;
}

/* Хвостик плашки к точке — треугольник цвета плашки */
.cmap-pin__label::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border: var(--cmap-tip) solid transparent;
  transition: border-color .3s;
}

/*
    Над точкой и под ней плашка по центру; --cmap-nudge — сдвиг вбок, если у края окна
    «развернуть» она не влезает (main.js), хвостик при этом остаётся над точкой
*/
.cmap-pin--top .cmap-pin__label {
  left: 50%;
  bottom: calc(100% + var(--cmap-gap));
  transform: translateX(calc(-50% + var(--cmap-nudge, 0px)));
}

.cmap-pin--top .cmap-pin__label::after {
  top: 100%;
  left: calc(50% - var(--cmap-nudge, 0px));
  margin-left: calc(var(--cmap-tip) * -1);
  border-bottom-width: 0;
  border-top-color: var(--cmap-plate);
}

.cmap-pin--bottom .cmap-pin__label {
  left: 50%;
  top: calc(100% + var(--cmap-gap));
  transform: translateX(calc(-50% + var(--cmap-nudge, 0px)));
}

.cmap-pin--bottom .cmap-pin__label::after {
  bottom: 100%;
  left: calc(50% - var(--cmap-nudge, 0px));
  margin-left: calc(var(--cmap-tip) * -1);
  border-top-width: 0;
  border-bottom-color: var(--cmap-plate);
}

.cmap-pin--left .cmap-pin__label {
  right: calc(100% + var(--cmap-gap));
  top: 50%;
  transform: translateY(-50%);
}

.cmap-pin--left .cmap-pin__label::after {
  left: 100%;
  top: 50%;
  margin-top: calc(var(--cmap-tip) * -1);
  border-right-width: 0;
  border-left-color: var(--cmap-plate);
}

.cmap-pin--right .cmap-pin__label {
  left: calc(100% + var(--cmap-gap));
  top: 50%;
  transform: translateY(-50%);
}

.cmap-pin--right .cmap-pin__label::after {
  right: 100%;
  top: 50%;
  margin-top: calc(var(--cmap-tip) * -1);
  border-left-width: 0;
  border-right-color: var(--cmap-plate);
}

@media (hover: hover) {
  .cmap-pin:hover {
    --cmap-plate: #14414D;
    z-index: 3;
  }
}

/*
    Выбранное место: плашка остаётся тёмной (песочная сливалась с бежевой сушей),
    выбор — песочной обводкой плашки 3 px и песочным кружком с тёмным значком
    в тёмном кольце. Остальные тёмные плашки мест, пока выбрано не курорт, чуть
    приглушены: выбранная заметна и на 1x (вторая проверка арт-директора, 17.09.2026)
*/
.cmap-pin[aria-selected="true"] {
  --cmap-ring: #D2C1A9;
  z-index: 3;
}

.cmap-pin[aria-selected="true"] .cmap-pin__mark {
  background: #D2C1A9;
  color: #0E2930;
  box-shadow: 0 0 0 2px #0E2930, 0 0 0 4px #fff, 0 1px 6px 5px rgba(14, 41, 48, 0.24);
}

.cmap__pins:has(.cmap-pin:not(.cmap-pin--resort)[aria-selected="true"]) .cmap-pin--place:not(.cmap-pin--pointer):not([aria-selected="true"]) .cmap-pin__label {
  opacity: 0.85;
}

/* Глобально у кнопок outline: none (main.css) — фокус с клавиатуры возвращаем */
.cmap-pin:focus-visible {
  outline: none;
}

.cmap-pin:focus-visible .cmap-pin__label {
  outline: 2px solid #0E2930;
  outline-offset: 2px;
}

/*
    Mediva Resort — главная метка карты, крупнее мест рядом: точка без значка
    с белым кантом и широким песочным кольцом (--cmap-halo), плашка белая с логотипом
    сайта и тёмной рамкой, хвостик тёмный. Зазор до плашки — за кольцом. Подпись
    текстом только для читалки экрана: название есть на логотипе. Выбранный курорт —
    мягкая тень плашки и кольцо плотнее
*/
.cmap-pin--resort {
  --cmap-dot: 22px;
  --cmap-halo: 12px;
  --cmap-gap: 16px;
  --cmap-tip: 6px;
  --cmap-plate: #fff;
  z-index: 2;
}

.cmap-pin--resort .cmap-pin__mark {
  box-shadow: 0 0 0 3px #fff, 0 0 0 var(--cmap-halo) rgba(210, 193, 169, 0.6);
}

.cmap-pin--resort .cmap-pin__label {
  padding: 6px 10px;
  border: 2px solid #0E2930;
  box-shadow: 0 0.3rem 0.9rem rgba(14, 41, 48, 0.25);
}

.cmap-pin--resort .cmap-pin__label::after {
  border-top-color: transparent;
  border-bottom-color: transparent;
}

.cmap-pin--resort.cmap-pin--bottom .cmap-pin__label::after {
  bottom: calc(100% + 2px);
  border-bottom-color: #0E2930;
}

.cmap-pin--resort.cmap-pin--top .cmap-pin__label::after {
  top: calc(100% + 2px);
  border-top-color: #0E2930;
}

.cmap-pin--resort.cmap-pin--left .cmap-pin__label::after {
  left: calc(100% + 2px);
  border-left-color: #0E2930;
}

.cmap-pin--resort.cmap-pin--right .cmap-pin__label::after {
  right: calc(100% + 2px);
  border-right-color: #0E2930;
}

/*
    max-width: none — у плашки нет своей ширины, и общее img { max-width: 100% } сжало бы логотип в ноль.
    64 px — «RESORT» на логотипе читается (при 50 px не читалось)
*/
.cmap-pin__logo {
  display: block;
  width: auto;
  max-width: none;
  height: 64px;
}

@media (hover: hover) {
  .cmap-pin--resort:hover {
    --cmap-plate: #fff;
  }

  .cmap-pin--resort:hover .cmap-pin__label {
    box-shadow: 0 0 0 3px rgba(14, 41, 48, 0.2), 0 0.3rem 0.9rem rgba(14, 41, 48, 0.25);
  }
}

.cmap-pin--resort[aria-selected="true"] {
  --cmap-plate: #fff;
  --cmap-ink: #0E2930;
}

.cmap-pin--resort[aria-selected="true"] .cmap-pin__label {
  box-shadow: 0 0.5rem 1.4rem rgba(14, 41, 48, 0.32);
}

.cmap-pin--resort[aria-selected="true"] .cmap-pin__mark {
  background: #0E2930;
  box-shadow: 0 0 0 3px #fff, 0 0 0 var(--cmap-halo) rgba(210, 193, 169, 0.85);
}

/* Курорт привлекает взгляд: волна от кружка три раза после загрузки; без движения — нет */
@keyframes cmap-pulse {
  from { opacity: 0.5; transform: scale(1); }
  to { opacity: 0; transform: scale(2.6); }
}

@media (prefers-reduced-motion: no-preference) {
  .cmap-pin--resort .cmap-pin__mark::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #0E2930;
    opacity: 0;
    animation: cmap-pulse 2.2s ease-out 0.6s 3;
  }
}

.cmap-pin__name--hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/*
    Указатель на место за кадром. Место, куда ходят пешком (кафе, «Робинзон»), —
    белая карточка с тонкой рамкой и тенью в 10 px от края, 13 px, стрелка внутри
    плашки со стороны края, повёрнута на само место. Прижат к краю: без скрипта —
    от точки x, y на крае (translate по краю edge), со скриптом — left и top в пикселях
    (is-placed), main.js раскладывает указатели без наложений и не под панелями.
    Отступы плашки — переменными: --cmap-py сверху и снизу, --cmap-px-in со стороны
    стрелки, --cmap-px-out с другой (у правого края стрелка справа)
*/
.cmap-pin--pointer {
  --cmap-plate: #fff;
  --cmap-ink: #0E2930;
  --cmap-edge: 10px;
  --cmap-py: 5px;
  --cmap-px-in: 7px;
  --cmap-px-out: 9px;
  --cmap-arrow: 14px;
  width: auto;
  height: auto;
  margin: 0;
  font-size: 13px;
}

.cmap-pin--pointer .cmap-pin__label {
  position: static;
  gap: 6px;
  padding: var(--cmap-py) var(--cmap-px-out) var(--cmap-py) var(--cmap-px-in);
  border: 1px solid rgba(14, 41, 48, 0.15);
  box-shadow: 0 0 0 3px var(--cmap-ring), 0 0.15rem 0.5rem rgba(14, 41, 48, 0.12);
}

.cmap-pin--pointer .cmap-pin__label::after {
  content: none;
}

.cmap-pin__arrow {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  color: #0E2930;
}

.cmap-pin__arrow .cmap-icon {
  width: var(--cmap-arrow);
  height: var(--cmap-arrow);
  transform: rotate(var(--cmap-angle, 0deg));
}

.cmap-pin--pointer .cmap-pin__time {
  margin-left: 2px;
  padding-left: 6px;
  border-left-color: rgba(14, 41, 48, 0.2);
}

/* У правого края стрелка — справа, у остальных краёв — слева */
.cmap-pin--edge-right .cmap-pin__label {
  flex-direction: row-reverse;
  padding: var(--cmap-py) var(--cmap-px-in) var(--cmap-py) var(--cmap-px-out);
}

/*
    Дальние места (Газалкент, Ташкент…) — второй уровень указателей, тише пеших:
    вкладка, прижатая к самому краю карты (--cmap-edge: 0), скруглена только внутрь,
    без рамки и тени, тёплая полупрозрачная, 12 px обычным начертанием, стрелка — тёмная
    в светлом кружке --cmap-circle (четвёртая проверка: тёмные кружки у края были самыми
    тёмными точками карты и перетягивали взгляд с мест и пеших). Пешие (кафе, «Робинзон») — белые карточки с рамкой
    и тенью в 10 px от края, 13 px. Вторая проверка (17.09.2026): на 1440 пешие не должны
    выглядеть так же, как Ташкент за 72 км; третья: дальние 10,5 px на 1x — пятно,
    а шесть одинаковых капсул у левого края читались легендой, и ГЭС под кафе казалась
    пешим местом — теперь дальние отделены от пеших и видом, и местом (main.js, APART)
*/
.cmap-pin--direction {
  --cmap-plate: rgba(246, 242, 236, 0.94);
  --cmap-edge: 0px;
  --cmap-py: 3px;
  --cmap-px-in: 4px;
  --cmap-px-out: 10px;
  --cmap-arrow: 12px;
  --cmap-circle: 18px;
  font-size: 12px;
  font-weight: 400;
}

.cmap-pin--direction .cmap-pin__label {
  border: 0;
  border-radius: 0 2rem 2rem 0;
  box-shadow: 0 0 0 3px var(--cmap-ring);
}

.cmap-pin--direction.cmap-pin--edge-right .cmap-pin__label {
  border-radius: 2rem 0 0 2rem;
}

.cmap-pin--direction.cmap-pin--edge-top .cmap-pin__label {
  border-radius: 0 0 0.9rem 0.9rem;
}

.cmap-pin--direction.cmap-pin--edge-bottom .cmap-pin__label {
  border-radius: 0.9rem 0.9rem 0 0;
}

.cmap-pin--direction .cmap-pin__arrow {
  width: var(--cmap-circle);
  height: var(--cmap-circle);
  border-radius: 50%;
  background: rgba(20, 65, 77, 0.12);
  color: #0E2930;
}

.cmap-pin--direction .cmap-pin__time {
  color: #62777A;
}

.cmap-pin--edge-right .cmap-pin__time {
  margin: 0 2px 0 0;
  padding: 0 6px 0 0;
  border-left: 0;
  border-right: 1px solid rgba(14, 41, 48, 0.2);
}

.cmap-pin--pointer:not(.is-placed).cmap-pin--edge-left {
  transform: translate(var(--cmap-edge), -50%);
}

.cmap-pin--pointer:not(.is-placed).cmap-pin--edge-right {
  transform: translate(calc(-100% - var(--cmap-edge)), -50%);
}

.cmap-pin--pointer:not(.is-placed).cmap-pin--edge-top {
  transform: translate(-50%, var(--cmap-edge));
}

.cmap-pin--pointer:not(.is-placed).cmap-pin--edge-bottom {
  transform: translate(-50%, calc(-100% - var(--cmap-edge)));
}

@media (hover: hover) {
  .cmap-pin--pointer:hover {
    --cmap-plate: #F4EFE8;
  }

  .cmap-pin--direction:hover {
    --cmap-plate: #fff;
  }
}

.cmap-pin--pointer[aria-selected="true"] {
  --cmap-plate: #fff;
}

/*
    Пеший маршрут выбранного места проходит под указателем другого места (main.js, markRoutes):
    плашка просвечивает, пунктир виден сквозь неё. Указатели при выборе места не переносятся
    (четвёртая проверка арт-директора, 17.09.2026)
*/
.cmap-pin--pointer.is-over-route {
  --cmap-plate: rgba(255, 255, 255, 0.55);
}

.cmap-pin--pointer.is-over-route .cmap-pin__label {
  box-shadow: 0 0 0 3px var(--cmap-ring);
}

/* ---------- Карточка места ---------- */

/* Продолжение панели под заголовком: та же белая подложка, тень без верхнего края */
.cmap__cards {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  z-index: 4;
  margin-right: 1.5rem;
  padding: 0 1.75rem 1.75rem;
  border-radius: 0 0 0.25rem 0.25rem;
  background: #fff;
  box-shadow: 0 0.5rem 1.5rem rgba(14, 41, 48, 0.14);
  clip-path: inset(0 -2rem -2rem -2rem);
}

.cmap-card {
  padding-top: 1.25rem;
  border-top: 1px solid rgba(14, 41, 48, 0.12);
}

.cmap-card:focus-visible {
  outline: 2px solid #0E2930;
  outline-offset: 4px;
}

.cmap-card__name {
  margin-bottom: 0.5rem;
  font-family: "Gilroy", sans-serif;
  font-weight: 500;
  font-size: max(18px, 1.3rem);
  line-height: 1.2;
  color: #0E2930;
}

.cmap-card__text {
  font-size: max(14px, 0.85rem);
  line-height: 1.55;
}

/* Время: у места рядом — «≈ 3 мин пешком», у дальнего — пешком и на машине из «Расположения» */
.cmap-card__walk,
.cmap-card__travel {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-bottom: 0.6rem;
  font-family: "Gilroy", sans-serif;
  font-weight: 500;
  font-size: max(14px, 0.85rem);
  line-height: 1.3;
  color: #0E2930;
}

.cmap-card__walk,
.cmap-card__trip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.cmap-card__trip span {
  color: #62777A;
  font-weight: 400;
}

.cmap-card__trip b {
  font-weight: 500;
}

@keyframes cmap-card-in {
  from { opacity: 0; transform: translateY(0.5rem); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .cmap-card.is-entering {
    animation: cmap-card-in .4s ease both;
  }
}

/* ---------- Места списком: только на телефоне ---------- */

.cmap__more {
  display: none;
}

.cmap__more-title {
  font-family: "Gilroy", sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.3;
  color: #0E2930;
}

/* Группа: «Пешком» — места по минутам, «Дальше» — дальние места */
.cmap__more-group {
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.4;
  color: #62777A;
}

.cmap__more-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cmap-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 4px 12px 4px 6px;
  border: 1px solid rgba(14, 41, 48, 0.25);
  border-radius: 2rem;
  background: #fff;
  font-family: "Gilroy", sans-serif;
  font-weight: 500;
  font-size: 13px;
  line-height: 1.2;
  color: #0E2930;
  transition: background-color .3s, border-color .3s, color .3s;
}

/* Значок как у точки на карте — видно, что это то же место; у дальних — стрелка в сторону места */
.cmap-chip__icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #0E2930;
  color: #fff;
}

.cmap-chip__icon .cmap-icon {
  width: 14px;
  height: 14px;
}

.cmap-chip__icon--arrow {
  border: 1px solid rgba(14, 41, 48, 0.2);
  background: #fff;
  color: #0E2930;
}

.cmap-chip__icon--arrow .cmap-icon {
  transform: rotate(var(--cmap-angle, 0deg));
}

/* Минуты — как на плашке: пешком у мест рядом, на машине у дальних */
.cmap-chip__time {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding-left: 6px;
  border-left: 1px solid rgba(14, 41, 48, 0.2);
  font-weight: 400;
  color: #62777A;
}

.cmap-chip[aria-pressed="true"] .cmap-chip__time {
  color: #0E2930;
}

.cmap-chip[aria-pressed="true"] {
  border-color: #D2C1A9;
  background: #D2C1A9;
}

.cmap-chip:focus-visible {
  outline: 2px solid #0E2930;
  outline-offset: 2px;
}

/* Уже 1201 px: панель на карте закрыла бы треть её — заголовок над картой, карточка под ней */
@media (max-width: 1200.98px) {
  .cmap__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
  }

  .cmap__head {
    grid-column: 1;
    grid-row: 1;
    margin: 0 0 1.25rem;
    padding: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    clip-path: none;
  }

  .cmap__title {
    font-size: max(20px, 1.6rem);
  }

  .cmap__map {
    grid-column: 1;
    grid-row: 2;
  }

  .cmap__osm {
    grid-column: 1;
    grid-row: 3;
  }

  /* Карта, карточка выбранного места, затем список мест */
  .cmap__more {
    grid-row: 5;
  }

  .cmap__cards {
    grid-column: 1;
    grid-row: 4;
    margin: 0.75rem 0 0;
    padding: 1.25rem 1.5rem 1.5rem;
    border-left: 3px solid #0E2930;
    border-radius: 0 0.25rem 0.25rem 0;
    box-shadow: 0 1.9rem 1.25rem rgba(0, 0, 0, 0.04), 0 1rem 0.65rem rgba(0, 0, 0, 0.035), 0 0.4rem 0.3rem rgba(0, 0, 0, 0.027), 0 0.1rem 0.15rem rgba(0, 0, 0, 0.01);
    clip-path: none;
  }

  .cmap-card {
    padding-top: 0;
    border-top: 0;
  }
}

/*
    Телефон: карта во всю ширину экрана окном 4 : 5 — тот же рисунок в --cmap-zoom
    раз шире окна (около 1,15 км, build-map.mjs), середина окна — на середине мест рядом
    (--cmap-fx, --cmap-fy), но рисунок не отходит от краёв окна: clamp. Указателей
    на такой карте нет — все места кнопками в списке под карточкой.
    --cmap-aside — места левее середины окна на столько: справа над картой проплывает
    кнопка WhatsApp (.tel-popup, main.css), и плашка пляжа правее логотипа курорта уходила
    под неё и вставала в 3 px от края (третья проверка арт-директора, 17.09.2026)
*/
@media (max-width: 767.98px) {
  .cmap {
    margin: 1.75rem 0 2.5rem;
  }

  /* Без полей контейнера: на телефоне каждый пиксель на счету */
  .cmap__map {
    margin: 0 -1rem;
  }

  .cmap__viewport {
    border-radius: 0;
  }

  .cmap__grid:not(.is-expanded) .cmap__viewport {
    aspect-ratio: 4 / 5;
  }

  /* Высота рисунка в долях высоты окна: zoom × ширина / пропорция рисунка / (1,25 × ширина) */
  .cmap__grid:not(.is-expanded) .cmap__canvas {
    --cmap-h: calc(var(--cmap-zoom) / (1.25 * var(--cmap-ratio)) * 100%);
    --cmap-aside: 64px;
    position: absolute;
    width: calc(var(--cmap-zoom) * 100%);
    left: clamp(calc(100% - var(--cmap-zoom) * 100%), calc(50% - var(--cmap-fx) * var(--cmap-zoom) * 100% - var(--cmap-aside)), 0%);
    top: clamp(calc(100% - var(--cmap-h)), calc(50% - var(--cmap-fy) * var(--cmap-h)), 0%);
  }

  .cmap__grid:not(.is-expanded) .cmap-pin--pointer {
    display: none;
  }

  /* Заголовок блока мельче заголовка секции «Чарвак в 90 минутах от Ташкента», как подзаголовки «Расположения» */
  .cmap__grid:not(.is-expanded) .cmap__title {
    font-size: 18px;
  }

  /* Линейка — в левом нижнем углу: справа внизу над картой проплывает кнопка WhatsApp */
  .cmap__grid:not(.is-expanded) .cmap__scale {
    right: auto;
    left: 0.5rem;
    bottom: 0.5rem;
    align-items: flex-start;
    width: calc(var(--cmap-scale) * var(--cmap-zoom) * 1%);
  }

  .cmap__more {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 1.5rem;
  }

  /* Карточка под картой: при выборе места из списка подтягивается — не под кнопку WhatsApp */
  .cmap__cards {
    padding: 1.25rem 1.25rem 1.5rem;
    scroll-margin: 5rem 0 6rem;
  }
}

/*
    Метки мельче там же, где сайт переходит на телефонную вёрстку (main.css): и планшет стоя.
    В окне — обычные. Указатели (они здесь только на планшете) — не мельче 12 px: пешие 13 px,
    дальние 12 px, как на широком экране (третья проверка арт-директора, 17.09.2026); плашки мест —
    13 px, не мельче пеших указателей (четвёртая проверка), на телефоне ниже — 11 px
*/
@media (max-width: 767.98px), (max-width: 1080px) and (orientation: portrait) {
  /*
      «Развернуть» — в правом верхнем углу, на воде: в нижнем её закрывала кнопка WhatsApp.
      И на планшете стоя: карта там в полях контейнера, но кнопка WhatsApp (3rem, справа 1.5rem)
      на 1.5rem заходит на карту, и у низа карты «развернуть» уходила под неё
  */
  .cmap__expand {
    top: 0.5rem;
    right: 0.5rem;
    bottom: auto;
    width: 40px;
    height: 40px;
  }

  .cmap__grid:not(.is-expanded) .cmap-pin {
    --cmap-dot: 20px;
    --cmap-gap: 5px;
    --cmap-tip: 4px;
    font-size: 13px;
  }

  .cmap__grid:not(.is-expanded) .cmap-pin__label {
    padding: 3px 7px;
  }

  .cmap__grid:not(.is-expanded) .cmap-pin--pointer {
    --cmap-py: 4px;
    --cmap-px-in: 6px;
    --cmap-px-out: 8px;
    font-size: 13px;
  }

  .cmap__grid:not(.is-expanded) .cmap-pin--direction {
    --cmap-py: 2px;
    --cmap-px-in: 3px;
    --cmap-px-out: 9px;
    font-size: 12px;
  }

  .cmap__grid:not(.is-expanded) .cmap-pin--pointer .cmap-pin__label {
    padding: var(--cmap-py) var(--cmap-px-out) var(--cmap-py) var(--cmap-px-in);
  }

  .cmap__grid:not(.is-expanded) .cmap-pin--edge-right .cmap-pin__label {
    padding: var(--cmap-py) var(--cmap-px-in) var(--cmap-py) var(--cmap-px-out);
  }

  /* Курорт и здесь крупнее мест: точка 22 px (у мест 20) с кольцом, логотип 52 px (на телефоне 44) */
  .cmap__grid:not(.is-expanded) .cmap-pin--resort {
    --cmap-dot: 22px;
    --cmap-halo: 9px;
    --cmap-gap: 12px;
    --cmap-tip: 5px;
  }

  .cmap__grid:not(.is-expanded) .cmap-pin--resort .cmap-pin__label {
    padding: 4px 7px;
  }

  .cmap__grid:not(.is-expanded) .cmap-pin__logo {
    height: 52px;
  }

  .cmap__grid:not(.is-expanded) .cmap__water {
    font-size: 11px;
  }

  .cmap__osm {
    font-size: 10px;
  }

  .cmap-card__name {
    font-size: 18px;
  }

  .cmap-card__text {
    font-size: 14px;
  }
}

/*
    На телефоне логотип курорта 44 px: при 32 px буквы «MEDIVA» были около 5 px.
    Если рядом тесно, скрипт переставляет плашку пляжа, а не уменьшает логотип.
    Плашки мест на телефоне — 11 px, указателей на карте нет
*/
@media (max-width: 767.98px) {
  .cmap__grid:not(.is-expanded) .cmap-pin__logo {
    height: 44px;
  }

  .cmap__grid:not(.is-expanded) .cmap-pin {
    font-size: 11px;
  }

  .cmap__grid:not(.is-expanded) .cmap-pin__label {
    padding: 3px 6px;
  }
}

/* ---------- Карта крупно: окно ---------- */

html.cmap-dialog-open {
  overflow: hidden;
}

/* --cmap-dialog-pad — поля окна: на низком экране меньше (ниже), от них считается окно с рисунком целиком */
.cmap-dialog {
  --cmap-dialog-pad: 1.5rem;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: var(--cmap-dialog-pad);
  border: 0;
  background: transparent;
  color: #293D3E;
  overflow: hidden;
}

/* Затемнение плотное и размытое: заголовок секции под окном не читается, разрезанный краем окна */
.cmap-dialog::backdrop {
  background: rgba(14, 41, 48, 0.9);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.cmap-dialog__box {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 0.25rem;
  background: #ECE5DA;
  box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.3);
}

/*
    Рисунок целиком (.is-whole, ставит main.js от 1024 px, если так карта крупнее, чем на странице):
    окно — в пропорциях рисунка (--cmap-ratio) и во весь экран по меньшей стороне, по середине.
    Прежде рисунок накрывал окно с запасом и начинался на местах рядом: на 1440 × 900 и 1280 × 800
    были срезаны левый и верхний край, подпись воды и вода над курортом, и в окне было видно
    меньше, чем на странице (третья проверка арт-директора, 17.09.2026)
*/
.cmap-dialog.is-whole[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}

.cmap-dialog.is-whole .cmap-dialog__box {
  width: min(100%, calc((100vh - 2 * var(--cmap-dialog-pad)) * var(--cmap-ratio)));
  height: auto;
  aspect-ratio: var(--cmap-ratio);
}

/*
    Низкий экран (окно браузера с панелями, 1366 × 657, 1280 × 649): поля окна 8 px — рисунок целиком
    крупнее; main.js включает его здесь уже от 0,95 размера на странице (четвёртая проверка)
*/
@media (min-width: 1024px) and (max-height: 699.98px) {
  .cmap-dialog {
    --cmap-dialog-pad: 8px;
  }
}

@keyframes cmap-dialog-in {
  from { opacity: 0; transform: scale(0.98); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .cmap-dialog[open] .cmap-dialog__box {
    animation: cmap-dialog-in .3s ease both;
  }
}

/*
    Крестик — в правом верхнем углу окна, отдельно от панели: на углу карточки он читался
    как «закрыть карточку». Панель в окне сдвинута левее на ширину крестика и отступ
*/
.cmap-dialog__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #0E2930;
  box-shadow: 0 0.25rem 0.75rem rgba(14, 41, 48, 0.2);
  cursor: pointer;
  transition: background-color .3s, color .3s;
}

.cmap-dialog__close svg {
  width: 14px;
  height: 14px;
}

@media (hover: hover) {
  .cmap-dialog__close:hover {
    background: #0E2930;
    color: #fff;
  }
}

.cmap-dialog__close:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px #0E2930;
}

/*
    Та же сетка, что на широкой странице: карта на всё окно, панель — второй столбец поверх неё.
    Второй столбец шире на крестик окна (44 px) и отступ: панель той же ширины, что на странице
*/
.cmap__grid.is-expanded {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(max(320px, 23rem) + 44px + 1rem);
  grid-template-rows: auto auto minmax(0, 1fr);
  max-width: none;
  margin: 0;
}

.cmap__grid.is-expanded .cmap__map {
  position: relative;
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  margin: 0;
}

/*
    Рисунок шире окна — прокручивается колесом, пальцем и перетаскиванием мышью
    (main.js), полос прокрутки нет, как у любой веб-карты. scroll-padding — чтобы
    метка, на которую перешёл фокус, не встала под панель заголовка и карточки справа
*/
.cmap__grid.is-expanded .cmap__viewport {
  position: absolute;
  inset: 0;
  overflow: auto;
  overscroll-behavior: contain;
  border-radius: 0;
  scroll-padding: 5rem calc(max(360px, 26rem) + 60px) 5rem 5rem;
  scrollbar-width: none;
  cursor: grab;
}

.cmap__grid.is-expanded .cmap__viewport::-webkit-scrollbar {
  display: none;
}

.cmap__grid.is-expanded .cmap__viewport.is-dragging {
  cursor: grabbing;
  user-select: none;
}

.cmap__grid.is-expanded .cmap__canvas {
  width: 100%;
}

/* Метки в окне крупнее, чем на странице */
.cmap__grid.is-expanded .cmap-pin {
  --cmap-dot: 24px;
  --cmap-gap: 8px;
  --cmap-tip: 6px;
  font-size: 14px;
}

.cmap__grid.is-expanded .cmap-pin__label {
  padding: 6px 11px;
}

.cmap__grid.is-expanded .cmap-pin--pointer {
  --cmap-py: 6px;
  --cmap-px-in: 8px;
  --cmap-px-out: 11px;
  --cmap-arrow: 15px;
  font-size: 14px;
}

.cmap__grid.is-expanded .cmap-pin--direction {
  --cmap-py: 3px;
  --cmap-px-in: 4px;
  --cmap-px-out: 11px;
  --cmap-arrow: 12px;
  --cmap-circle: 20px;
  font-size: 13px;
}

.cmap__grid.is-expanded .cmap-pin--pointer .cmap-pin__label {
  padding: var(--cmap-py) var(--cmap-px-out) var(--cmap-py) var(--cmap-px-in);
}

.cmap__grid.is-expanded .cmap-pin--edge-right .cmap-pin__label {
  padding: var(--cmap-py) var(--cmap-px-in) var(--cmap-py) var(--cmap-px-out);
}

.cmap__grid.is-expanded .cmap-pin--resort {
  --cmap-dot: 26px;
  --cmap-halo: 13px;
  --cmap-gap: 18px;
}

.cmap__grid.is-expanded .cmap-pin--resort .cmap-pin__label {
  padding: 7px 12px;
}

.cmap__grid.is-expanded .cmap-pin__logo {
  height: 64px;
}

.cmap__grid.is-expanded .cmap__water {
  font-size: 15px;
}

.cmap__grid.is-expanded .cmap__expand,
.cmap__grid.is-expanded .cmap__more {
  display: none;
}

/*
    Заголовок и карточка — одной белой панелью справа вверху, как на странице:
    на воде залива. Крестик окна — отдельно, в углу окна правее панели: отступ панели
    справа — крестик (44 px) и два отступа по 1rem
*/
.cmap__grid.is-expanded .cmap__head {
  grid-column: 2;
  grid-row: 1;
  z-index: 4;
  margin: 1rem calc(44px + 2rem) 0 0;
  padding: 1.25rem 1.5rem 1rem;
  border-radius: 0.25rem 0.25rem 0 0;
  background: #fff;
  box-shadow: 0 0.5rem 1.5rem rgba(14, 41, 48, 0.18);
  clip-path: inset(-2rem -2rem 0 -2rem);
}

.cmap__grid.is-expanded .cmap__title {
  font-size: max(18px, 1.3rem);
}

/*
    Окно с рисунком целиком уже 1280 px: рисунок в нём не выше 760 px, и панель с подсказками
    закрывала треть высоты — плашке пляжа под точкой не оставалось места. Подсказки
    («Нажмите на метку», время пешком примерное) — на странице, в окне их нет, как в окне столбцом.
    Так же на низком экране (1366 × 657, 1280 × 649): рисунок там около 1000 × 640
*/
@media (max-width: 1279.98px), (max-height: 699.98px) {
  .cmap-dialog.is-whole .cmap__hint,
  .cmap-dialog.is-whole .cmap__note {
    display: none;
  }
}

.cmap__grid.is-expanded .cmap__cards {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  z-index: 4;
  margin: 0 calc(44px + 2rem) 0 0;
  padding: 0 1.5rem 1.5rem;
  border: 0;
  border-radius: 0 0 0.25rem 0.25rem;
  background: #fff;
  box-shadow: 0 0.5rem 1.5rem rgba(14, 41, 48, 0.18);
  clip-path: inset(0 -2rem -2rem -2rem);
}

.cmap__grid.is-expanded .cmap-card {
  padding-top: 1rem;
  border-top: 1px solid rgba(14, 41, 48, 0.12);
}

/* Линейка в окне — справа внизу над подписью OSM; ширина по рисунку в окне, её задаёт скрипт */
.cmap__grid.is-expanded .cmap__scale {
  right: 1rem;
  bottom: 2rem;
}

.cmap__grid.is-expanded .cmap__osm {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 4;
  margin: 0;
  padding: 2px 6px;
  border-radius: 0.25rem 0 0 0;
  background: rgba(255, 255, 255, 0.85);
}

/*
    Телефон и планшет стоя (уже 1024 px): окно на весь экран столбцом — заголовок
    полосой сверху, карта, карточка снизу. Не поверх карты: панель справа заняла бы
    половину узкого окна, и курорт с местами рядом не поместились бы слева от неё
*/
@media (max-width: 1023.98px) {
  .cmap-dialog {
    padding: 0;
  }

  .cmap-dialog__box {
    border-radius: 0;
  }

  .cmap-dialog__close {
    top: 4px;
    right: 4px;
    width: 40px;
    height: 40px;
    box-shadow: none;
  }

  .cmap__grid.is-expanded {
    display: flex;
    flex-direction: column;
  }

  .cmap__grid.is-expanded .cmap__head {
    position: static;
    order: 1;
    flex: none;
    width: auto;
    margin: 0;
    padding: 14px 56px 14px 1rem;
    border-radius: 0;
    box-shadow: 0 1px 0 rgba(14, 41, 48, 0.1);
    clip-path: none;
  }

  .cmap__grid.is-expanded .cmap__title {
    padding-right: 0;
    font-size: 16px;
  }

  .cmap__grid.is-expanded .cmap__hint,
  .cmap__grid.is-expanded .cmap__note {
    display: none;
  }

  .cmap__grid.is-expanded .cmap__map {
    position: relative;
    inset: auto;
    order: 2;
    flex: 1 1 auto;
    min-height: 0;
  }

  .cmap__grid.is-expanded .cmap__viewport {
    scroll-padding: 1rem;
  }

  /* align-self: stretch — иначе align-self: start общего правила сужает карточку в столбце до текста */
  .cmap__grid.is-expanded .cmap__cards {
    position: static;
    order: 4;
    flex: none;
    align-self: stretch;
    width: auto;
    max-height: 40%;
    overflow: auto;
    margin: 0;
    padding: 1rem 1rem 1.25rem;
    border-top: 3px solid #0E2930;
    border-radius: 0;
    box-shadow: none;
    clip-path: none;
  }

  .cmap__grid.is-expanded .cmap-card {
    padding-top: 0;
    border-top: 0;
  }

  /*
      Подсказка — по середине внизу, в одну строку с линейкой справа. Пропадает после первого
      перетаскивания, прокрутки колесом или пальцем и выбора места (main.js). На телефоне — в левом
      нижнем углу (ниже): посреди карты над линейкой она висела над дорожками (третья проверка);
      на планшете в левом углу она стояла в строку со вкладкой «Амирсой» (четвёртая проверка)
  */
  .cmap__grid.is-expanded .cmap__pan {
    bottom: 0.75rem;
    font-size: 12px;
  }

  .cmap__grid.is-expanded .cmap__scale {
    right: 0.75rem;
    bottom: 0.75rem;
  }

  /*
      Подпись OSM — строкой под картой справа, над карточкой, как на странице. Поверх карты в правом
      верхнем углу она не пускала указатели кафе и «Робинзона» в левый верхний угол над курортом
      (четвёртая проверка арт-директора, 17.09.2026)
  */
  .cmap__grid.is-expanded .cmap__osm {
    position: static;
    order: 3;
    flex: none;
    align-self: flex-end;
    padding: 2px 0.75rem;
    border-radius: 0;
    background: none;
  }
}

/*
    Окно на телефоне: метки мельче, чем в окне на планшете и широком экране. Дальних
    мест на карте нет — они стеной вставали у левого края поверх курорта и маршрута
    (вторая проверка арт-директора, 17.09.2026); у края только кафе и «Робинзон»,
    дальние — в списке «Дальше» под карточкой на странице, как и на телефонной карте
*/
@media (max-width: 767.98px) {
  .cmap__grid.is-expanded .cmap__pan {
    left: 0.75rem;
    bottom: 0.75rem;
    transform: none;
  }

  .cmap__grid.is-expanded .cmap-pin {
    --cmap-dot: 22px;
    font-size: 13px;
  }

  .cmap__grid.is-expanded .cmap-pin--direction {
    display: none;
  }

  .cmap__grid.is-expanded .cmap-pin__label {
    padding: 5px 9px;
  }

  .cmap__grid.is-expanded .cmap-pin--pointer {
    --cmap-py: 5px;
    --cmap-px-in: 7px;
    --cmap-px-out: 9px;
    --cmap-arrow: 14px;
    font-size: 13px;
  }

  .cmap__grid.is-expanded .cmap-pin--resort {
    --cmap-dot: 24px;
    --cmap-halo: 11px;
    --cmap-gap: 16px;
  }

  .cmap__grid.is-expanded .cmap-pin--resort .cmap-pin__label {
    padding: 6px 10px;
  }

  .cmap__grid.is-expanded .cmap-pin__logo {
    height: 52px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cmap-pin__mark,
  .cmap-pin__label,
  .cmap-pin__label::after,
  .cmap__expand,
  .cmap-dialog__close,
  .cmap-chip {
    transition: none;
  }
}

/* ------------------------------------------------------------------
   Ссылка из карточки генплана в каталог вилл.

   Карточка виллы на схеме (.genplan-item, main.css) показывает фото,
   текст и параметры, но купить оттуда нельзя: заявка в карточке общая,
   без номера лота. Ссылка ведёт к строке этой виллы в списке на /villas,
   где у неё своя кнопка «Узнать цену».

   Место — верхняя полоса карточки, слева от крестика (.genplan-top, 3,3rem
   пустого бежевого поля). Ниже, под параметрами, ссылку поставить нельзя:
   карточка ровно по высоте блока генплана (48,5rem) и заполнена вплотную —
   кнопка «Отправить» в заявке под ней стоит впритык к нижнему краю. Любая
   лишняя строка срезала бы кнопку, поэтому ссылка берёт уже пустое место,
   а высота карточки не меняется. Поэтому же position: absolute, а не блок
   в потоке: карточек девять, а полоса с крестиком одна на все.

   Стиль — как у ссылки на калькулятор в списке вилл (.lt-flats__calc):
   стрелка и её сдвиг на наведении. Цвет тёмный, а не белый: полоса карточки
   бежевая (#D2C1A9). Боковой отступ — как у текста карточки.
   ------------------------------------------------------------------ */

.genplan-item__link {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  height: 3.3rem;
  padding-left: 3.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: #0E2930;
  text-decoration: none;
  transition: color .2s;
}

.genplan-item__link span {
  border-bottom: 1px solid rgba(14, 41, 48, 0.35);
  transition: border-color .2s;
}

.genplan-item__link svg {
  flex-shrink: 0;
  transition: transform .2s;
}

.genplan-item__link:hover {
  color: #14414D;
}

.genplan-item__link:hover span {
  border-color: #14414D;
}

.genplan-item__link:hover svg {
  transform: translateX(3px);
}

.genplan-item__link:focus-visible {
  outline: 2px solid #0E2930;
  outline-offset: -4px;
}

/*
    Выбранная вилла в списке: человек пришёл по ссылке с генплана и должен
    сразу увидеть, какая строка его. Слева полоса, а не только заливка:
    браузеры по умолчанию не печатают фоны, и на бумаге от подсветки
    осталась бы ровно эта полоса. Текст на заливке остаётся тёмным,
    контраст не падает.
*/
.lt-flat.is-current {
  background: #F2F6F6;
  border-left: 3px solid #0E2930;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

/* Программный фокус при прокрутке к строке рамки не рисует — её роль играет подсветка */
.lt-flat.is-current:focus {
  outline: none;
}

.lt-flat.is-current:focus-visible {
  outline: 2px solid #0E2930;
  outline-offset: 2px;
}

@media (max-width: 767.98px) {
  /* Полоса карточки на телефоне ниже (3rem), боковой отступ — 1rem (main.css) */
  .genplan-item__link {
    height: 3rem;
    padding-left: 1rem;
    padding-right: 1rem;
    font-size: 14px;
  }

  .lt-flat.is-current {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .genplan-item__link,
  .genplan-item__link span,
  .genplan-item__link svg {
    transition: none;
  }

  .genplan-item__link:hover svg {
    transform: none;
  }
}

@media print {
  .lt-flat.is-current {
    background: none;
  }
}

/*
    ----------------------------------------------------------------
    Подтверждённые ответы заказчика 16.09.2026
    ----------------------------------------------------------------
*/

/*
    Строка со сроком сдачи на /construction. Не плашка-предупреждение
    и не выноска: это обычный факт из договора, поэтому оформление
    спокойное — та же тёмная типографика страницы и тонкая полоса слева
    в фирменном цвете. Полоса, а не заливка: браузеры по умолчанию
    не печатают фоны, и на бумаге от плашки не осталось бы ничего.
*/
.page-note {
  padding: 0 0 1rem;
}

.page-note__text {
  margin: 0;
  padding: 0.65rem 0 0.65rem 1rem;
  border-left: 3px solid #0E2930;
  max-width: 46rem;
  line-height: 1.5;
  color: #0E2930;
  font-family: "Gilroy", sans-serif;
  font-size: 1.05rem;
}

/*
    Оговорка «после открытия» в блоках инфраструктуры и «Один день».
    Оба блока тёмные, поэтому текст белый с прозрачностью: читается,
    но не спорит с заголовком. Кегль мельче основного — это сноска
    к блоку, а не вторая строка заголовка.

    Ширина — как у заголовка блока инфраструктуры (34rem): на широком
    экране строка помещается целиком, а в тесном блоке экономит лишнюю
    строку высоты. В колонке «Одного дня» (20rem) предел не срабатывает,
    там строка переносится по ширине колонки.
*/
.infra__note,
.day__note {
  margin: 0.9rem 0 0;
  max-width: 34rem;
  font-size: 0.9rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.72);
}

/*
    Шапка блока инфраструктуры выровнена по центру, и заголовок в ней
    центрируется своим margin: 0 auto. Оговорке предел ширины нужно
    центрировать так же: иначе её строка прижата к левому краю
    контейнера и читается подписью сбоку, а не сноской под заголовком.
    В «Одном дне» шапка левая — там этого делать нельзя.
*/
.infra__note {
  margin-inline: auto;
}

/*
    Блок инфраструктуры считает свою высоту от окна (см. выше по файлу),
    поэтому и оговорка меряется той же единицей: на низком окне она
    ужимается вместе с заголовком, а не выталкивает список за край.
*/
@media (min-width: 901px) {
  .infra__note {
    margin-top: clamp(0.4rem, calc(var(--infra-1vh) * 1.4), 1.1rem);
    font-size: min(0.9rem, calc(var(--infra-1vh) * 1.9));
  }
}

@media (max-width: 767.98px) {
  .page-note__text {
    padding-left: 0.75rem;
    font-size: 1rem;
  }

  .infra__note,
  .day__note {
    margin-top: 0.7rem;
    font-size: 0.85rem;
  }
}

/*
    ----------------------------------------------------------------
    Тексты маркетолога 16.09.2026
    ----------------------------------------------------------------
*/

/*
    Переходы по ссылкам внутри страницы (#presentation с первого экрана)
    плавные — html { scroll-behavior: smooth } в main.css. Кто просил
    системой меньше движения, тот переходит сразу.
*/
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/*
    Фокус с клавиатуры у кнопок, которые стали ссылками: main.css снимает
    обводку у всех ссылок. На первом экране кнопка лежит на фото — обводка
    белая, в «О проекте» на белом — фирменная тёмная
*/
.main__btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.about__btn:focus-visible {
  outline: 2px solid #0E2930;
  outline-offset: 3px;
}

/*
    Четыре выгоды в блоке «О проекте» (п. 5). Ряд стоит на месте прежнего
    ряда иконок (.about-top из main.css, его отступы остаются), но у каждой
    выгоды теперь заголовок и строка с фактом. Иконка и заголовок —
    как у прежних подписей: тёмный фирменный цвет, Gilroy. Строка
    приглушена, но контраст с белым 5,7 : 1 — #6C7F80 из других блоков
    дал бы 4,2 и не прошёл бы порог 4,5 для обычного текста.

    Контейнер в main.css — flex с space-evenly, поэтому сетке задана
    полная ширина: иначе она сжалась бы по содержимому.
*/
.about-benefits {
  flex: 1 1 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 3rem;
  row-gap: 2.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.about-benefit {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.about-benefit__ico {
  display: block;
  width: 3rem;
  height: 3rem;
  margin-bottom: 1rem;
}

.about-benefit__title {
  margin: 0 0 0.5rem;
  font-family: "Gilroy", sans-serif;
  font-weight: 500;
  font-size: max(1.15rem, 16px);
  line-height: 1.3;
  color: #0E2930;
}

.about-benefit__text {
  margin: 0;
  max-width: 17rem;
  font-size: max(0.85rem, 13px);
  line-height: 1.5;
  color: #566A6B;
}

/* Два абзаца блока шли через список пунктов, теперь подряд — нужен зазор */
.about__text2 {
  margin-top: 1.2rem;
}

/*
    Без списка пунктов текст блока стал короче коллажа справа, и под кнопкой
    оставалось пустое поле в треть высоты. Текст — по центру коллажа
*/
.about-wrap {
  align-self: center;
}

/*
    «Ваш день в Mediva Resort» — сценарии отдыха (п. 9). Вместо карусели
    из восьми карточек с абзацами — сетка из четырёх: фото, название,
    строка. Тёмный фон и отступ сверху — как у прежнего блока (.news
    в main.css), отступ снизу свой: раньше его давала полоса .empty-block
    на главной, а на /infrastructure не было вовсе.

    Широкий экран — четыре в ряд; планшет стоя — два; телефон — список
    строк: фото квадратом слева, название и строка справа, чтобы четыре
    сценария не растягивались на несколько экранов.
*/
.day-scenes {
  margin-top: 7rem;
  padding: 6rem 0;
  background: #0E2930;
  color: #fff;
}

.day-scenes__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2.5rem 1.5rem;
  list-style: none;
  margin: 3rem 0 0;
  padding: 0;
}

.day-scene {
  min-width: 0;
}

.day-scene__img {
  aspect-ratio: 4 / 5;
  margin-bottom: 1.25rem;
  overflow: hidden;
  background: #14414D;
}

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

.day-scene__title {
  margin: 0 0 0.5rem;
  font-family: "Gilroy", sans-serif;
  font-weight: 400;
  font-size: max(1.35rem, 17px);
  line-height: 1.3;
  text-transform: uppercase;
  color: #fff;
}

.day-scene__text {
  margin: 0;
  font-size: max(0.9rem, 13px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);
}

/* Те же условия, что у телефонной вёрстки main.css: планшет стоя сюда входит */
@media (max-width: 767.98px), (max-width: 1080px) and (orientation: portrait) {
  .about-benefits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2rem;
  }

  .day-scenes {
    margin-top: 4rem;
    padding: 4rem 0;
  }

  /* На телефонной вёрстке блок идёт колонкой — текст над коллажем, как раньше */
  .about-wrap {
    align-self: stretch;
  }

  .day-scenes__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 2rem;
  }

  /* Два в ряд на планшете стоя: фото ниже, чтобы блок не занимал полтора экрана */
  .day-scene__img {
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 767.98px) {
  /* Выгоды списком: иконка слева, текст справа */
  .about-benefits {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 1.5rem;
  }

  .about-benefit {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    column-gap: 1rem;
    align-items: start;
    text-align: left;
  }

  .about-benefit__ico {
    grid-row: 1 / span 2;
    width: 2.5rem;
    height: 2.5rem;
    margin: 0;
  }

  .about-benefit__title {
    margin-bottom: 0.25rem;
    font-size: 16px;
  }

  .about-benefit__text {
    max-width: none;
    font-size: 14px;
  }

  .about__text2 {
    margin-top: 1rem;
  }

  .day-scenes__list {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
  }

  .day-scene {
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 1rem;
    align-content: center;
  }

  .day-scene__img {
    grid-row: 1 / span 2;
    align-self: center;
    aspect-ratio: 1;
    margin: 0;
  }

  .day-scene__title {
    align-self: end;
    margin-bottom: 0.3rem;
    font-size: 17px;
  }

  .day-scene__text {
    align-self: start;
    font-size: 14px;
  }
}

/* ------------------------------------------------------------------
   Люди Mediva (/people)

   Видеоблог, команда и отзывы собственников — одной сеткой на раздел.
   Формы карточек разные: снятый телефоном ролик вертикальный (9/16),
   снятый камерой горизонтальный (16/9), отзыв без видео — просто текст.
   Поэтому горизонтальная карточка и отзыв занимают две колонки: в колонке
   шириной с вертикальный ролик отзыв читался бы в три слова в строку,
   а горизонтальный кадр стал бы полоской в сотню пикселей высотой.
   ------------------------------------------------------------------ */

.people-section + .people-section {
  padding-top: 0;
}

.people-grid {
  display: grid;
  /* Колонка шириной с вертикальный ролик, сколько влезет — столько и будет:
     число разделов и записей в них задаёт заказчик, под него не подстроишься */
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 2rem 1.5rem;
  align-items: start;
  margin-top: 2rem;
}

/* Единственная карточка на всю страницу: в колонке общей сетки она
   выглядела бы обрезком макета, а не тем, ради чего страницу открыли */
.people-grid--single {
  grid-template-columns: minmax(0, 19rem);
}

/* Подписи приходят из админки: длинное слово без пробелов не должно
   расталкивать колонку и уводить страницу в горизонтальную прокрутку */
.people-card {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.people-card--horizontal,
.people-card--quote {
  grid-column: span 2;
}

/* Обложка, кнопка и подставленный плеер лежат друг на друге — сетка
   в одну ячейку вместо абсолютного позиционирования: высоту держит
   соотношение сторон, и ничего не выпадает из потока */
.people-card__media {
  position: relative;
  display: grid;
  overflow: hidden;
  border-radius: 0.75rem;
  background: #14414D;
}

.people-card__media > img,
.people-card__media > button,
.people-card__media > video {
  grid-area: 1 / 1;
}

.people-card--vertical .people-card__media {
  aspect-ratio: 9 / 16;
}

.people-card--horizontal .people-card__media {
  aspect-ratio: 16 / 9;
}

.people-card__poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Сам ролик не режем: у человека в кадре срезанная макушка заметна
   сильнее, чем поля по краям, если пропорции файла не совпали с сеткой */
.people-card__video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #0E2930;
}

.people-card__play {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1rem;
  border: 0;
  /* Затемнение снизу: подпись белая, а обложка приходит любая */
  background: linear-gradient(180deg, rgba(14, 41, 48, 0) 45%, rgba(14, 41, 48, 0.55) 100%);
  color: #fff;
  font-family: "Gilroy", sans-serif;
  font-size: max(0.8rem, 12px);
  line-height: 1.3;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.people-card__play-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #0E2930;
  transition: .3s all;
}

.people-card__play:hover .people-card__play-icon {
  background: #fff;
  transform: scale(1.08);
}

/* Кнопка лежит на фотографии, системная рамка фокуса на ней теряется */
.people-card__play:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -4px;
}

.people-card__play-text {
  text-shadow: 0 1px 6px rgba(14, 41, 48, 0.55);
}

.people-card__time {
  position: absolute;
  right: 0.5rem;
  bottom: 0.5rem;
  padding: 0.1rem 0.4rem;
  border-radius: 0.3rem;
  background: rgba(14, 41, 48, 0.7);
  color: #fff;
  font-size: max(0.7rem, 11px);
  font-variant-numeric: tabular-nums;
}

/* Плеер запущен — обложка, кнопка и длительность уступают ему место */
.people-card__media.is-playing .people-card__poster,
.people-card__media.is-playing .people-card__play,
.people-card__media.is-playing .people-card__time {
  display: none;
}

.people-card__body {
  margin-top: 0.85rem;
}

/* Заголовок ролика — о чём он. Стоит над именем: на карточке взгляд
   должен цепляться за тему, а не за должность */
.people-card__title {
  margin: 0 0 0.25rem;
  font-family: "Gilroy", sans-serif;
  font-weight: 600;
  font-size: max(1.05rem, 15px);
  line-height: 1.3;
  color: #0E2930;
}

.people-card__name {
  margin: 0;
  font-family: "Gilroy", sans-serif;
  font-size: max(1.05rem, 15px);
  line-height: 1.3;
  color: #0E2930;
}

/* Под заголовком имя становится подписью, а не вторым заголовком */
.people-card__title + .people-card__name {
  font-size: max(0.9rem, 14px);
  color: #45595E;
}

.people-card__role {
  margin: 0.2rem 0 0;
  font-size: max(0.8rem, 13px);
  line-height: 1.45;
  color: #6C7F80;
}

/* Запись бывает и с роликом, и с текстом сразу — тогда текст идёт
   под подписью, помельче имени, чтобы карточка читалась сверху вниз */
.people-card__text {
  margin: 0.6rem 0 0;
  font-size: max(0.8rem, 13px);
  line-height: 1.55;
  color: #293D3E;
}

.people-card--quote {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  border: 1px solid #E4EAEA;
  border-radius: 0.75rem;
  background: #fff;
}

.people-quote__mark {
  font-family: "Gilroy", sans-serif;
  font-size: 2.4rem;
  line-height: 0.6;
  color: #C2D2D2;
}

.people-quote__text {
  margin: 0.6rem 0 0;
}

.people-quote__text p {
  margin: 0;
  font-size: max(0.95rem, 14px);
  line-height: 1.6;
  color: #293D3E;
}

/* Имя автора прижато к низу карточки: отзывы в ряду разной длины,
   а подписи под ними должны стоять на одной линии */
.people-card--quote .people-card__body {
  margin-top: auto;
  padding-top: 1rem;
}

@media (max-width: 767.98px) {
  /* Две колонки, а не поток по ширине экрана: вертикальный ролик во всю
     ширину телефона занял бы три четверти экрана и заголовок раздела
     уехал бы за верхний край ещё до того, как виден второй ролик */
  .people-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem 0.75rem;
  }

  /* Отзыв в колонке 165 px нечитаем, а кадр 16/9 в ней — полоска */
  .people-card--horizontal,
  .people-card--quote {
    grid-column: 1 / -1;
  }

  .people-grid--single {
    grid-template-columns: minmax(0, 1fr);
  }

  .people-card__play-icon {
    width: 2.6rem;
    height: 2.6rem;
  }

  .people-card--quote {
    padding: 1.25rem;
  }
}

/* ======================= Логотип в шапке ======================= */
/*
    24.09.2026, просьба заказчика: логотип в шапке ведёт на главную.
    В теме подрядчика это были <div> с заданной шириной; ссылка по умолчанию
    строчная, и ширина к ней бы не применилась — логотип схлопнулся бы
    до размера картинки. Поэтому блочное отображение задаём явно.
    Сами размеры и позиционирование остаются в main.css, здесь их не дублируем.
*/
a.header__logo,
a.header__logo-sliced,
a.header-mobile__logo {
    display: block;
}

/*
    06.10.2026: правка выше ломала мобильную шапку, и это надо было поймать
    сразу. На телефоне main.css прячет десктопные логотипы
    (.header__logo и .header__logo-sliced — display: none в своей медиазапросе),
    а наш селектор с тегом `a` весит больше голого класса и идёт позже,
    поэтому возвращал их на экран. На главной выходило два логотипа разом —
    десктопный поверх мобильного, — и оба наезжали на «меню»: подпись
    начиналась с 95 пикселя, логотип с 125.

    Поэтому скрытие возвращаем здесь же, в том же условии, что в main.css,
    и с той же специфичностью — выигрывает порядок, а он наш.
    Мобильный логотип не трогаем: ему блочность как раз нужна.
*/
@media (max-width: 767.98px), (max-width: 1080px) and (orientation: portrait) {
    a.header__logo,
    a.header__logo-sliced {
        display: none;
    }
}

/* ===================== Генплан: подсказка и угловые виллы ===================== */
/*
    24.09.2026, просьба заказчика: подсказка при наведении «выглядит крупно
    и пусто». В теме подрядчика это коробка 11,2 × 10,3 rem, где номер прижат
    к верху, площадь к низу, а между ними пустота (justify-content: space-between
    при фиксированной высоте). Здесь высота снимается, строки идут подряд,
    и в подсказку добавлены этажность и общая площадь.

    Переопределяем, а не правим main.css: этот файл собран из исходников
    подрядчика, которых у нас нет, и следующая его пересборка затёрла бы правку.
*/
.genplan-info {
    width: auto;
    min-width: 12rem;
    max-width: 20rem;
    height: auto;
    padding: 0.9rem 1.1rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.3rem;
    border-radius: 0.4rem;
    box-shadow: 0 0.4rem 1.6rem rgba(14, 41, 48, 0.18);
}

.genplan-info__title {
    font-size: 1.4rem;
    line-height: 1.25;
    font-weight: 500;
}

.genplan-info__params {
    font-family: "Gilroy", sans-serif;
    font-size: 1.6rem;
    line-height: 1.2;
    white-space: nowrap;
}

/*
    Строка про каталог нужна только угловым виллам: у проданных подсказка
    пустая, и лишний отступ от неё был бы виден
*/
.genplan-info__hint {
    font-size: 1.2rem;
    line-height: 1.2;
    opacity: 0.75;
}

.genplan-info__hint:empty {
    display: none;
}

/* У угловых вилл площади и номера нет — крупная строка параметров ни к чему */
.genplan-info--soon .genplan-info__params {
    font-family: inherit;
    font-size: 1.3rem;
}

/* Контур угловой виллы — ссылка в каталог, поэтому курсор как у ссылки */
.genplan__soon {
    cursor: pointer;
}

.genplan-wrap svg a:focus-visible .genplan__soon {
    fill-opacity: 0.55;
    stroke-dasharray: none;
}

/* ===================== Кружок «Видео о проекте» на главной ===================== */
/*
    24.09.2026, заказчик по мобильной версии: текст не отцентрован в круге.

    Причина: у кнопки flex с выравниванием по центру, но сам текст — анонимный
    элемент, и внутри него строки выравнивает text-align, а он в теме подрядчика
    остался start. На широком экране подпись влезала в одну строку и это было
    незаметно; на телефоне она переносится, и «ПРОЕКТЕ» прижималось влево.

    Отступ по бокам нужен, чтобы строки не упирались в край круга: у круга
    ширина строки к краям сходит на нет, и текст без отступа касается границы.
*/
.main__video {
    text-align: center;
    line-height: 1.25;
    padding: 0 1rem;
}

/* ------------------------------------------------------------------
   Доходность виллы — объяснение вместо калькулятора (x-villa-income:
   только /villas). Решение заказчика 03.10.2026: считать доходность
   на сайте перестали, цифра зависит от наполняемости и читалась бы
   как обещание. На /apartments калькулятор остался, его стили — .calc.

   Три пункта в ряд, кнопка записи в офис под ними; телефон — колонка.
   Цвета и размеры те же, что в соседнем блоке «Управление под ключ»:
   два блока стоят подряд, и расходиться им незачем.
   ------------------------------------------------------------------ */

.income {
  padding: 4rem 0;
}

.income__lead {
  max-width: 42rem;
  margin-top: 0.75rem;
  color: #6C7F80;
}

.income-points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 2rem;
  row-gap: 2.5rem;
  list-style: none;
  margin: 3rem 0 0;
  padding: 0;
}

.income-point {
  min-width: 0;
}

.income-point__ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: max(3.5rem, 44px);
  height: max(3.5rem, 44px);
  margin-bottom: 1.25rem;
  border: 1px solid #CBD7D8;
  border-radius: 50%;
  background: #fff;
  color: #0E2930;
}

.income-point__ico svg {
  display: block;
  width: max(1.75rem, 22px);
  height: max(1.75rem, 22px);
}

.income-point__title {
  margin: 0 0 0.5rem;
  font-family: "Gilroy", sans-serif;
  font-size: max(1.25rem, 16px);
  font-weight: 400;
  line-height: 1.3;
  color: #0E2930;
}

.income-point__text {
  margin: 0;
  font-size: max(0.88rem, 13px);
  line-height: 1.55;
  color: #6C7F80;
}

.income__cta {
  margin-top: 3rem;
}

.income__cta:focus-visible {
  outline: 2px solid #0E2930;
  outline-offset: 2px;
}

@media (max-width: 767.98px) {
  .income {
    padding: 2.5rem 0;
  }

  .income-points {
    grid-template-columns: 1fr;
    row-gap: 2rem;
    margin-top: 2rem;
  }

  .income-point__ico {
    margin-bottom: 1rem;
  }

  .income__cta {
    display: block;
    width: 100%;
    margin-top: 2rem;
    text-align: center;
  }
}