/* ==========================================================================
   ЖК ALEЯ — правки верстки
   --------------------------------------------------------------------------
   Файл самодостатній: його можна цілком вставити в
   Elementor → Site Settings → Custom CSS на живому сайті.
   Нічого, крім цього файлу, для роботи правок не потрібно.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. ГОРИЗОНТАЛЬНА ОРІЄНТАЦІЯ (ландшафт на телефоні)

   Причина проблем: телефон у горизонталі має ширину 844–932px, тому Elementor
   вважає його десктопом і застосовує десктопні фіксовані висоти секцій
   (min-height: 800/900/920px) — при висоті екрана 390px секція займає
   2–3.5 екрана. Тут ці висоти знімаються, а відступи стискаються.

   Умова спрацьовує лише на низьких екранах, тож планшетів і десктопа
   не зачіпає.
   -------------------------------------------------------------------------- */

@media (orientation: landscape) and (max-height: 560px) {

  /* Знімаємо десктопні фіксовані висоти — секція стає по контенту */
  .elementor-1332 .e-con.e-parent,
  .elementor-1332 .elementor-top-section {
    min-height: 0 !important;
    height: auto !important;
  }

  /* Свідомо не чіпаємо padding глобально: у CSS не можна сказати
     «зменшити, якщо більше за X», а єдине значення для всіх секцій
     тим, у кого відступи були малі, лише додає висоти. */

  /* Герой: не на весь екран, щоб було видно початок наступного блоку.
     max-height тут ставити не можна — герой має overflow:hidden, і
     заголовок просто обрізається. Висоту стримуємо через внутрішній
     контейнер, якому Elementor задає min-height:100vh. */
  /* Селектор навмисно містить .e-con.e-parent: без цього загальне правило
     вище (3 класи) перебиває це (2 класи) і герой схлопується. */
  .elementor-1332 .e-con.e-parent.elementor-element-4d96c98e {
    min-height: 78svh !important;
    height: auto !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  .elementor-1332 .elementor-element-7f30cf30 {
    min-height: 0 !important;
    height: auto !important;
  }

  /* Блок заголовка позиціонований абсолютно і має margin-top: 265px —
     значення з десктопної розкладки, де герой заввишки 940px. На екрані
     390px воно виносить текст за нижню межу героя, і overflow:hidden
     його зрізає. Ставимо пропорційне до висоти екрана. */
  .elementor-1332 .elementor-element-0a8aa4e {
    margin-top: 20svh !important;
  }

  /* Заголовок героя не має з'їдати весь екран */
  .elementor-1332 .elementor-element-4d96c98e h1,
  .elementor-1332 .elementor-element-4d96c98e h2 {
    font-size: clamp(20px, 3.4vw, 32px) !important;
    line-height: 1.15 !important;
  }

  /* Секції з фоновим зображенням мають зберегти видиму висоту.
     Специфічність — як у загального правила вище, інакше не спрацює. */
  .elementor-1332 .e-con.e-parent.elementor-element-7d5e541e,
  .elementor-1332 .e-con.e-parent.elementor-element-509b2160,
  .elementor-1332 .e-con.e-parent.elementor-element-1c2d6c16 {
    min-height: 62svh !important;
  }

  /* Стрілка прокрутки на низькому екрані заважає — прибираємо */
  #scroll-arrow {
    display: none !important;
  }
}


/* --------------------------------------------------------------------------
   2. МЕНЮ — прибрати підкреслювання
   Elementor малює підкреслення і через text-decoration, і через
   псевдоелемент, тому знімаємо обидва варіанти.
   -------------------------------------------------------------------------- */

.elementor-location-header a,
.elementor-location-header a:hover,
.elementor-location-header a:focus,
.elementor-nav-menu a,
.elementor-nav-menu a:hover,
.menu-link a,
.menu-link a:hover {
  text-decoration: none !important;
}

.elementor-location-header .elementor-item:before,
.elementor-location-header .elementor-item:after,
.elementor-nav-menu .elementor-item:before,
.elementor-nav-menu .elementor-item:after {
  content: none !important;
  display: none !important;
}


/* --------------------------------------------------------------------------
   3. ГАЛЕРЕЇ — пагінація (крапки під слайдером)
   Стосується всіх слайдерів Elementor на сторінці.
   -------------------------------------------------------------------------- */

/* ПОВЕРНЕНО НА ПРОХАННЯ. Раніше пагінацію було прибрано, але без неї
   зникає підказка «скільки всього кадрів і де я зараз». Тому вона на місці,
   але в мінімальному вигляді: власний CSS сайту малював її як «скляну»
   плашку — фон, тінь і фіксовані розміри з --glass-w / --glass-h. Тут плашка
   знімається, лишаються самі крапки.

   Селектор довгий навмисно: правило сайту має 4 класи, коротший програє
   йому навіть з !important. */

.elementor-1332 .elementor-element[class*="elementor-element-"] .swiper-pagination.swiper-pagination-bullets,
.elementor-1332 .elementor-element[class*="elementor-element-"] .swiper-pagination.swiper-pagination-horizontal {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  background: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  border: 0 !important;
  inset-inline: 0 !important;
}

.elementor-1332 .swiper-pagination-bullet {
  width: 7px !important;
  height: 7px !important;
  margin: 0 !important;
  opacity: 1 !important;
  background: rgba(197, 174, 145, 0.35) !important;
  transition: background 0.25s var(--aleya-ease, ease),
              transform 0.25s var(--aleya-ease, ease);
}

.elementor-1332 .swiper-pagination-bullet-active {
  background: #C5AE91 !important;
  transform: scale(1.3);
}

@media (hover: hover) and (pointer: fine) {
  .elementor-1332 .swiper-pagination-bullet:hover {
    background: rgba(197, 174, 145, 0.7) !important;
  }
}

/* Дрібні крапки на дотик незручні — збільшуємо саму зону натискання,
   не змінюючи вигляду. */
@media (max-width: 1024px) {
  .elementor-1332 .swiper-pagination-bullet {
    position: relative;
  }
  .elementor-1332 .swiper-pagination-bullet::after {
    content: "";
    position: absolute;
    inset: -14px;
  }
}


/* --------------------------------------------------------------------------
   4. МОБІЛЬНИЙ — ПАНОРАМА АЛЕЇ

   Зображення алеї має пропорції 7.96:1 (2048×262). На екрані 375px воно
   стискається до смужки 345×44px, а на ній розміщено 12 хотспотів — влучити
   пальцем неможливо.

   Хотспоти позиціоновані у відсотках від .elementor-widget-container, тому
   контейнер можна просто зробити ширшим: пропорції збережуться, прив'язка
   до картинки не поїде. Панораму гортаємо пальцем по горизонталі —
   для довгої алеї це природний жест.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {

  .elementor-1332 .elementor-element.elementor-element-7cdc160 {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    /* запас, щоб підказки хотспотів не зрізало контейнером прокрутки */
    padding-bottom: 12px !important;
    /* У віджета justify-content: flex-end. Якщо його не змінити, вміст,
       ширший за екран, притискається праворуч, а лівий край іде в мінус
       і стає недосяжним — прокрутка не працює. */
    justify-content: flex-start !important;
  }

  /* Віджет — flex-контейнер, і flex-shrink стискає ширину назад до екрана.
     Тому саму лише width задати мало: потрібен ще заборонений shrink. */
  .elementor-1332 .elementor-element.elementor-element-7cdc160 > .elementor-widget-container {
    width: 1100px !important;
    min-width: 1100px !important;
    max-width: none !important;
    flex: 0 0 1100px !important;
  }

  .elementor-1332 .elementor-element.elementor-element-7cdc160 .hotspot-map-image {
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
  }

  /* Підписи до хотспотів були 10px — дрібно для телефона */
  .elementor-1332 .e-hotspot__tooltip p,
  .elementor-1332 .e-hotspot__tooltip {
    font-size: 13px !important;
    line-height: 1.35 !important;
  }
}


/* --------------------------------------------------------------------------
   5. ЗОНИ НАТИСКАННЯ НА СЕНСОРНИХ ЕКРАНАХ

   Стрілки галерей були 25×25px. Оскільки нижній перемикач ми прибрали,
   стрілки лишились основним способом гортати — вони мусять бути зручними.
   Рекомендований мінімум — 44px.
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {

  .elementor-1332 .elementor-element .elementor-swiper-button,
  .elementor-1332 .elementor-element .swiper-button-next,
  .elementor-1332 .elementor-element .swiper-button-prev {
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
  }

  /* Іконки соцмереж — 32px замало для пальця.
     Два важливі нюанси:
     1) вони в підвалі, а це окремий шаблон Elementor (.elementor-268),
        тому префікс .elementor-1332 сюди не діє — селектор без нього;
     2) розмір рахується з CSS-змінної --icon-size через calc(),
        тож правильно міняти саме змінну, а не width. */
  .elementor-icon.elementor-social-icon {
    --icon-size: 22px;
    width: 40px !important;
    height: 40px !important;
  }
}


/* --------------------------------------------------------------------------
   6. ПЕРЕНОСИ ТЕКСТУ

   У заголовках проставлені жорсткі <br> — вони розраховані на десктопну
   ширину. На телефоні рядок не влазить і без них, тому браузер рве текст
   ще раз, і на рядку лишається одне слово:

       ALEЯ — коли / природа / стає сусідом
       Продумане планування, закрита / територія, / власна алея...

   На вузьких екранах вимикаємо жорсткі переноси і даємо тексту лягати
   природно, а браузеру — балансувати рядки.
   -------------------------------------------------------------------------- */

/* УВАГА, перевірено на практиці: ховати <br> через display:none НЕ МОЖНА.
   У розмітці навколо них немає пробілів («природа<br>стає»), тож разом із
   розривом зникає і єдиний роздільник — слова злипаються в «природастає»
   та «територія,власна». Тому переноси лишаємо на місці, а рядок
   підганяємо розміром шрифта нижче. */

/* Балансування рядків: браузер сам вирівнює довжину рядків і не лишає
   поодиноких слів у кінці. Свідомо тільки до 1024px — десктопну
   розкладку не чіпаємо. */
@media (max-width: 1024px) {

  .elementor-1332 .e-heading-base,
  .elementor-1332 .elementor-heading-title,
  .elementor-1332 h1,
  .elementor-1332 h2,
  .elementor-1332 h3,
  .elementor-1332 h4 {
    text-wrap: balance;
  }
}

/* Герой на телефоні: шрифт 32px не давав рядку «ALEЯ — коли природа»
   вміститися у доступні 353px, тому браузер рвав його ще раз і лишав
   «природа» саму. Виміряна межа — 29.3px, ставимо з запасом. */
@media (max-width: 767px) {

  .elementor-1332 .elementor-element-5a4186c .e-heading-base,
  .elementor-1332 .elementor-element-5a4186c h1,
  .elementor-1332 .elementor-element-5a4186c h2 {
    font-size: clamp(22px, 7.6vw, 29px) !important;
    line-height: 1.2 !important;
  }
}


/* --------------------------------------------------------------------------
   7. ПЕРЕНОСИ В ОСНОВНОМУ ТЕКСТІ

   text-wrap: pretty просить браузер не лишати одне слово на останньому
   рядку абзацу. Заголовки вже балансуються вище (balance), тут — абзаци,
   списки й описи. Властивість не підтримується старими браузерами, але
   деградує беззбитково: текст просто переноситься як раніше.
   -------------------------------------------------------------------------- */

.elementor-1332 p,
.elementor-1332 li,
.elementor-1332 .elementor-widget-text-editor,
.elementor-1332 .e-heading-base + p {
  text-wrap: pretty;
}


/* --------------------------------------------------------------------------
   8. СТРІЛКИ КАРУСЕЛЕЙ — однаковий розмір

   В оригіналі три каруселі мають стрілки 44×44, а одна («Справжній комфорт»)
   — 25×25. Приводимо до спільного розміру, щоб не було різнобою і щоб у
   стрілку було зручно влучати.
   -------------------------------------------------------------------------- */

.elementor-1332 .elementor-element .elementor-swiper-button {
  width: 44px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}


/* ==========================================================================
   9. СИСТЕМА РУХУ

   Тон сайту заданий його ж текстом: «архітектура тихої преміальності —
   без візуального шуму». Тому тут не набір ефектів, а один узгоджений
   характер руху: коротка амплітуда, м'яке сповільнення, нічого стрибкого.

   Що було не так у штатних налаштуваннях:
   • fadeInUp зсував блок на translate3d(0, 100%, 0) — на цілу власну
     висоту. Для великих контейнерів це сотні пікселів «наїзду».
   • Тривалість — 2 секунди. Разом виходило важке, повільне в'їжджання.

   Нижче амплітуда зменшена до 24px, тривалість — до 0.9s.
   ========================================================================== */

:root {
  --aleya-ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* спокійне сповільнення */
  --aleya-fast: 0.2s;
  --aleya-slow: 0.9s;
  --aleya-shift: 24px;
}

/* --- 9.1 Поява блоків ---------------------------------------------------- */

.elementor-1332 .animated {
  animation-duration: var(--aleya-slow) !important;
  animation-timing-function: var(--aleya-ease) !important;
  animation-fill-mode: both !important;
}

/* Блоки з класом animated-slow лишаємо трохи повільнішими — це акценти */
.elementor-1332 .animated.animated-slow {
  animation-duration: 1.25s !important;
}

/* Перевизначення амплітуди. Файл підключений останнім, тому ці кадри
   перекривають штатні. */
/* Значення тут навмисно літеральні, а не var(): змінні всередині
   @keyframes мають браузерні примхи, і якщо змінна не розв'яжеться,
   уся трансформація стане невалідною. */
@keyframes fadeInUp {
  from { opacity: 0; transform: translate3d(0, 24px, 0); }
  to   { opacity: 1; transform: none; }
}

@keyframes fadeInRight {
  from { opacity: 0; transform: translate3d(24px, 0, 0); }
  to   { opacity: 1; transform: none; }
}

/* --- 9.2 Черговість появи ------------------------------------------------ */
/* Картки переваг з'являються одна за одною, а не всі разом. Крок навмисно
   малий: 70ms — око читає це як плавність, а не як чергу. */

.elementor-1332 .elementor-element-32636674 .e-con.e-child.animated:nth-of-type(1) { animation-delay: 0ms !important; }
.elementor-1332 .elementor-element-32636674 .e-con.e-child.animated:nth-of-type(2) { animation-delay: 70ms !important; }
.elementor-1332 .elementor-element-32636674 .e-con.e-child.animated:nth-of-type(3) { animation-delay: 140ms !important; }
.elementor-1332 .elementor-element-32636674 .e-con.e-child.animated:nth-of-type(4) { animation-delay: 210ms !important; }
.elementor-1332 .elementor-element-32636674 .e-con.e-child.animated:nth-of-type(5) { animation-delay: 280ms !important; }
.elementor-1332 .elementor-element-32636674 .e-con.e-child.animated:nth-of-type(6) { animation-delay: 350ms !important; }
.elementor-1332 .elementor-element-32636674 .e-con.e-child.animated:nth-of-type(n+7) { animation-delay: 420ms !important; }

/* --- 9.3 Наведення ------------------------------------------------------- */
/* Тільки для пристроїв зі справжнім курсором: на тачскріні :hover
   «залипає» після дотику. */

@media (hover: hover) and (pointer: fine) {

  .elementor-1332 .elementor-element-32636674 .e-con.e-child {
    transition: transform var(--aleya-fast) var(--aleya-ease),
                box-shadow var(--aleya-fast) var(--aleya-ease);
  }

  .elementor-1332 .elementor-element-32636674 .e-con.e-child:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(35, 31, 32, 0.14);
  }

  .elementor-1332 .elementor-button {
    transition: transform var(--aleya-fast) var(--aleya-ease),
                box-shadow var(--aleya-fast) var(--aleya-ease),
                background-color var(--aleya-fast) var(--aleya-ease);
  }

  .elementor-1332 .elementor-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(35, 31, 32, 0.18);
  }

  /* Стрілки каруселей: підсвічуємо намір, не смикаємо */
  .elementor-1332 .elementor-element .elementor-swiper-button {
    transition: transform var(--aleya-fast) var(--aleya-ease),
                opacity var(--aleya-fast) var(--aleya-ease);
  }

  .elementor-1332 .elementor-element .elementor-swiper-button:hover {
    transform: scale(1.12);
  }

  /* Пункти меню — лише зміна кольору, підкреслення ми свідомо прибрали */
  .elementor-location-header a {
    transition: color var(--aleya-fast) var(--aleya-ease),
                opacity var(--aleya-fast) var(--aleya-ease);
  }

  .elementor-location-header a:hover {
    opacity: 0.72;
  }
}

/* --- 9.4 Повага до налаштувань користувача ------------------------------- */
/* Якщо в системі увімкнено «зменшити рух» (а це не рідкість: вестибулярні
   розлади, мігрень), рух вимикається повністю, а контент лишається
   видимим — жодних напівпрозорих блоків, що так і не з'явились. */

@media (prefers-reduced-motion: reduce) {

  .elementor-1332 *,
  .elementor-1332 *::before,
  .elementor-1332 *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }

  .elementor-1332 .elementor-invisible {
    visibility: visible !important;
  }
}


/* --------------------------------------------------------------------------
   10. МЕНЮ — підкреслення активного пункту

   Підкреслення малює не сама шапка, а скрипт активного розділу: при
   прокрутці він вішає на поточний пункт клас .is-section-active, а власний
   CSS сайту домальовує йому text-decoration: underline !important.

   Саме тому загальне правило в секції 2 його не знімало: селектор
   `a.is-section-active` специфічніший. Тут специфічність та сама, а файл
   підключений останнім — тому виграє.

   Жирність (600) навмисно лишаємо: це єдина підказка «ви зараз тут»,
   і прибирати її разом із підкресленням не варто.
   -------------------------------------------------------------------------- */

/* Специфічність навмисно завищена (html body ...): правило сайту лежить у
   стилі, який підключається пізніше за цей файл, тож за рівної специфічності
   виграє воно. Перевірено — з коротшим селектором підкреслення лишалось. */
html body .elementor-location-header a.is-section-active,
html body .elementor-nav-menu a.is-section-active,
html body .e-n-menu a.is-section-active,
html body .menu-link a.is-section-active,
html body a.is-section-active,
html body .elementor-location-header a.is-section-active:hover,
html body a.is-section-active:hover {
  text-decoration: none !important;
  text-underline-offset: 0 !important;
  text-decoration-line: none !important;
}


/* --------------------------------------------------------------------------
   11. ФОРМА ЗВОРОТНОГО ДЗВІНКА (сторінки новин)

   Було: віджет форми завширшки 429px у контейнері на 760px. Три колонки по
   163px, а самі поля всередині — по 103px. У таке поле не видно ні свого
   імені, ні номера телефону, і форма читається як стиснута.

   Стало: форма займає доступну ширину, поля тягнуться, кнопка — по вмісту.
   Висота полів 48px — зручно для пальця і рівно з кнопкою.
   -------------------------------------------------------------------------- */

.elementor-element-2849b3d4,
.elementor-element-2849b3d4 .elementor-widget-container {
  width: 100% !important;
  max-width: 640px !important;
}

.elementor-element-2849b3d4 .elementor-form {
  display: flex !important;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}

.elementor-element-2849b3d4 .elementor-field-group {
  flex: 1 1 190px;
  max-width: none !important;
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
}

.elementor-element-2849b3d4 .elementor-field-group.elementor-field-type-submit {
  flex: 0 0 auto;
}

.elementor-element-2849b3d4 .elementor-field-group > label {
  margin-bottom: 6px;
  display: block;
  font-size: 12px;
  letter-spacing: 0.4px;
  opacity: 0.75;
}

.elementor-element-2849b3d4 input[type="text"],
.elementor-element-2849b3d4 input[type="tel"],
.elementor-element-2849b3d4 input[type="email"] {
  width: 100% !important;
  min-height: 48px !important;
  padding: 12px 14px !important;
  font-size: 15px !important;
  border-radius: 3px !important;
  transition: border-color var(--aleya-fast, 0.2s) var(--aleya-ease, ease),
              background-color var(--aleya-fast, 0.2s) var(--aleya-ease, ease);
}

.elementor-element-2849b3d4 input:focus {
  outline: none;
  border-color: rgba(197, 174, 145, 0.75) !important;
  background-color: rgba(0, 0, 0, 0.28) !important;
}

.elementor-element-2849b3d4 button[type="submit"] {
  min-height: 48px !important;
  padding-inline: 28px !important;
}

/* На телефоні три елементи в рядок не мають сенсу — складаємо стовпчиком */
@media (max-width: 767px) {

  .elementor-element-2849b3d4 .elementor-field-group,
  .elementor-element-2849b3d4 .elementor-field-group.elementor-field-type-submit {
    flex: 1 1 100%;
  }

  .elementor-element-2849b3d4 button[type="submit"] {
    width: 100% !important;
  }
}