/* ============================================================
   Ручные правки поверх стилей Tilda.
   Всё, что меняли вручную после экспорта, собрано здесь —
   так правки не теряются среди сгенерированных стилей.

   Селекторы намеренно «длиннее» тильдовских (добавлен класс
   .t396__artboard / .t776), чтобы перебивать их по весу,
   а не по порядку подключения. Поэтому !important не нужен.
   ============================================================ */


/* ---- 1. Верхнее меню ---------------------------------------
   Было: Unbounded — очень широкий шрифт, пункты меню слипались
   («ГлавнаяКонцепцияТуралар-дома»), «Вопрос-Ответ» переносился
   на вторую строку, а надпись вылезала за рамку кнопки.
   Стало: Roboto Condensed — узкий, помещается целиком и совпадает
   с основным текстом сайта.
   Переменную переопределяем на самом блоке: её берут все пункты
   меню, телефон и кнопка «Забронировать».
   Селектор с двумя id — потому что Tilda задаёт эту переменную
   правилом «#allrecords .r», а оно тяжелее простого «#rec…».     */
#allrecords #rec4034349501.r {
  --t-headline-font: 'Roboto Condensed', Arial, sans-serif;
}

/* Чуть разреженные буквы — так меню читается спокойнее.
   Телефон сюда намеренно не входит: его блок шириной 143px,
   а номер при разрядке занимает 145px и уезжает на вторую строку. */
#rec4034349501 .t396__artboard .tn-elem[data-elem-id="1713019645778"] .tn-atom,
#rec4034349501 .t396__artboard .tn-elem[data-elem-id="1744439303667"] .tn-atom,
#rec4034349501 .t396__artboard .tn-elem[data-elem-id="1713019706498"] .tn-atom,
#rec4034349501 .t396__artboard .tn-elem[data-elem-id="1713019729146"] .tn-atom,
#rec4034349501 .t396__artboard .tn-elem[data-elem-id="1713019743315"] .tn-atom,
#rec4034349501 .t396__artboard .tn-elem[data-elem-id="1712819027454"] .tn-atom {
  letter-spacing: .02em;
}

/* Телефон — строго одной строкой: браузер иначе рвёт номер по дефисам */
#rec4034349501 .t396__artboard .tn-elem[data-elem-id="1712818976413"] .tn-atom {
  white-space: nowrap;
}


/* ---- 2. Заголовок первого экрана ---------------------------
   Переведён на 'Svoi' (Cormorant SC Light) — тот же шрифт,
   что у заголовков разделов и названий домиков.
   line-height подняли с 1.05: для антиквы с капителью
   это было слишком тесно.
   Тень — чтобы светлый тонкий шрифт не терялся на видео.        */
#rec4034349501 .t396__artboard .tn-elem[data-elem-id="1713020020829"] .tn-atom {
  font-family: 'Svoi', Georgia, 'Times New Roman', serif;
  line-height: 1.18;
  letter-spacing: .015em;
  text-shadow: 0 2px 16px rgba(0, 0, 0, .5);
}


/* ---- 3. Цены в карточках -----------------------------------
   Было 30px жирным Unbounded — цена перевешивала название домика.
   Стало 22px: заметно, но не кричит. Мобильные размеры уменьшены
   в той же пропорции.
   Правки применены к обоим блокам с карточками, чтобы цены
   на странице выглядели одинаково.                              */
@media screen and (min-width: 480px) {
  #rec4034350901 .t776 .t776__price,
  #rec4034350901 .t776 .t776__price_old,
  #rec4034352501 .t776 .t776__price,
  #rec4034352501 .t776 .t776__price_old {
    font-size: 22px;
  }
}

@media screen and (max-width: 480px) {
  #rec4034350901 .t776 .t776__price,
  #rec4034350901 .t776 .t776__price_old,
  #rec4034352501 .t776 .t776__price,
  #rec4034352501 .t776 .t776__price_old {
    font-size: 1.2rem;
  }
}

@media screen and (max-width: 480px), (orientation: landscape) and (max-height: 480px) {
  #rec4034350901 .t776 .t776__price,
  #rec4034350901 .t776 .t776__price_old,
  #rec4034352501 .t776 .t776__price,
  #rec4034352501 .t776 .t776__price_old {
    font-size: 17px;
  }
}


/* ---- 4. Описания домиков: поповеры по кнопке «Подробнее» -----
   Пять блоков с описаниями (Эпту, Ырысту, Jакшы, Аил, Глэмпинг)
   в экспорте висели простынёй прямо на странице: поповеры Tilda
   ссылались на номера записей, которых в выгрузке нет
   (rec756751143 и другие). Номера исправлены в index.html,
   здесь — оформление самой карточки.                            */

/* Фон под поповером. Размытие Tilda ставит сама, но подложка
   у неё прозрачная — белая карточка сливалась со светлой
   страницей. Добавляем затемнение в цвет фирменной зелени.      */
.t1093 .t-popup__bg {
  background-color: rgba(18, 26, 16, .55);
}

/* Полотно поповера.
   ВАЖНО: ширину здесь ограничивать нельзя. Скрипт Tilda
   расставляет элементы зеро-блока inline-стилями, считая
   координаты от ширины ОКНА (left: calc(innerWidth/2) + сдвиг),
   а не от контейнера. Стоит сузить контейнер — правая колонка
   с описанием уезжает за край и обрезается.
   Поэтому полотно остаётся во всю ширину, а воздух по бокам
   создаёт сама сетка блока: содержимое центрируется по 1200px. */
.t1093 .t-popup__container {
  background-color: #fff;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
}

/* Крестик: тёмный значок терялся на светлых фото галереи,
   поэтому сажаем его на белый кружок.                           */
.t1093 .t-popup__close {
  top: 20px;
  right: 20px;
}

.t1093 .t-popup__close-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, .92);
  box-shadow: 0 2px 12px rgba(0, 0, 0, .25);
  transition: background-color .2s ease-in-out;
}

.t1093 .t-popup__close-wrapper:hover,
.t1093 .t-popup__close-wrapper:focus-visible {
  background-color: #fff;
}



/* ---- 5. «Jакшы тура» — приводим к общему стилю ---------------
   Четыре описания из пяти набраны Svoi (заголовок и кнопки)
   и Roboto Condensed (текст). Пятое осталось на шрифтах Tilda
   по умолчанию — Unbounded и TildaSans — и выбивалось из ряда.
   Переопределяем переменные на самом блоке: так правится одним
   правилом вместо пяти отдельных.                               */
#allrecords #rec4034351101.r {
  --t-headline-font: 'Svoi', Georgia, 'Times New Roman', serif;
  --t-text-font: 'Roboto Condensed', Arial, sans-serif;
}


/* ---- 6. Блок «Вопрос-Ответ»: убираем бирюзовую подложку -------
   У аккордеона (rec4034353201) нет своего фона, поэтому сквозь
   него был виден фон <body>. А фон body перекрашивает в бирюзовый
   (#aedada) скрытый ниже по странице триггер Tilda (блок T213,
   rec4034353401) — так задумана плавная смена цвета страницы при
   прокрутке, но здесь это просто некстати наложилось.
   Не трогаем сам триггер — вдруг он ещё для чего-то нужен —
   а глушим эффект локально: даём аккордеону непрозрачный фон
   того же #eeeeee, что и у заголовка блока над ним.             */
#allrecords #rec4034353201.r {
  background-color: #eeeeee;
}


/* ---- 7. Первый экран: чиним и оформляем -----------------------
   ВАЖНО про 7a: это не косметика, а починка бага. В исходном
   макете Tilda у мобильной версии главного заголовка стоял
   left: calc(50% - 160px + -515px) — лишние -515px уводят блок
   на пол-экрана влево. На телефонах заголовок был полностью
   за пределами экрана: ни видно, ни доступно скринридеру.
   У всех остальных элементов той же строки координат смещение
   было 0 (у формы бронирования) или небольшим (+22px у эмблемы) —
   -515px явно случайная правка в редакторе Tilda.

   Настоящая правка — в index.html: там же изменён атрибут
   data-field-left-res-320-value с "-515" на "0". Это важно,
   потому что для текстовых блоков с textfit:autoheight Tilda
   не просто применяет статический CSS с этой страницы (он
   сгенерирован один раз при экспорте и не пересчитывается) —
   её скрипт при загрузке САМ вычисляет позицию из data-атрибутов
   и пишет её напрямую в атрибут style элемента. Инлайновый style
   перебивает любой CSS, в том числе этот файл, поэтому раньше
   правило ниже физически не могло сработать, пока JS активен.
   Оставлено как подстраховка на случай, если JS не выполнится
   (например, отключён в браузере) — тогда сработает хотя бы
   встроенный в страницу CSS, который эту же ошибку повторяет.  */
@media screen and (max-width: 1199px) {
  #rec4034349501 .tn-elem[data-elem-id="1713020020829"] {
    left: calc(50% - 160px + 0px) !important;
  }
}

/* 7b. Пустое пространство между формой бронирования и волной
   внизу (на широких экранах — от ~230px до ~450px чистого видео)
   заполняем строкой преимуществ и стрелкой «листайте вниз».
   Разметка — обычные div'ы, добавленные вручную в index.html
   внутри артборда первого экрана, а не «зеро-элементы» Tilda:
   так они не зависят от её JS-калькулятора координат и не могут
   быть случайно сдвинуты редактором, как это произошло с 7a.

   Обе привязаны к НИЖНЕМУ краю артборда (bottom), как и волна
   под ними (та тоже bottom-anchored) — при любой высоте экрана
   расстояние до волны остаётся одинаковым. Проверено: даже на
   самом низком варианте (высота блока = 800px, минимум Tilda)
   между низом формы бронирования и началом этой строки остаётся
   от 30px запаса, так что наложения не будет.
   На экранах уже 1200px (там же, где Tilda переключает координаты
   на мобильные) — просто скрываем: тесно, и ниже по странице
   те же преимущества уже перечислены отдельным блоком с иконками. */
.hero-usps,
.hero-scrollcue {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
}

.hero-usps {
  bottom: 264px;
  display: flex;
  gap: 36px;
  padding: 18px 32px;
  border-radius: 16px;
  background-color: rgba(3, 34, 1, .38);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.hero-usps__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 108px;
  text-align: center;
}

.hero-usps__icon {
  width: 30px;
  height: 30px;
  /* иконки — тёмные SVG из общего набора сайта; делаем их белыми,
     чтобы читались на видео так же, как текст рядом.              */
  filter: brightness(0) invert(1);
  opacity: .95;
}

.hero-usps__item span {
  color: #fff;
  font-family: 'Roboto Condensed', Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.25;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .4);
}

.hero-scrollcue {
  bottom: 190px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1.5px solid rgba(255, 255, 255, .7);
  border-radius: 50%;
  text-decoration: none;
  animation: hero-scrollcue-bounce 2.2s ease-in-out infinite;
  transition: border-color .2s ease-in-out, background-color .2s ease-in-out;
}

.hero-scrollcue:hover,
.hero-scrollcue:focus-visible {
  border-color: #fff;
  background-color: rgba(255, 255, 255, .12);
}

.hero-scrollcue__chevron {
  width: 10px;
  height: 10px;
  border-right: 1.5px solid #fff;
  border-bottom: 1.5px solid #fff;
  transform: translateY(-2px) rotate(45deg);
}

@keyframes hero-scrollcue-bounce {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 8px); }
}

@media screen and (max-width: 1199px) {
  .hero-usps,
  .hero-scrollcue {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-scrollcue {
    animation: none;
  }
}