/* ============================================================
   Ужанські купелі — дизайн-система + Hero
   ============================================================ */

:root{
  /* ПАЛІТРА. Стороннього кольору у файлі немає ЖОДНОГО: усе інше — ці ж тони,
     або приглушені прозорістю, або зведені між собою.
       Green #23514C · Near-black #11211F · Sage Leaf #96AD90 · Sand #DCB470 · Warm Cream #F6F2E9
     2026-08-17: попередній Forest Green #23514C прибрано з усього сайту —
     Дарʼя: «прибери цей яскраво-зелений всюди, він дратує». На заміну взято
     систему voevodyno.com (її референс): їхній приглушений зелений #23514C
     і майже чорний #11211F для темних секцій, їхній пісочний #DCB470.
     Шрифтову пару звідти взяти не можна — Beatrix Antiqua й Geometria платні
     та без кирилиці, тому Yeseva One + Roboto Flex лишаються.
     2026-08-15: сам крем пересунуто з #FFF8E7 на #F6F2E9 — Дарʼя принесла референс
     сторінки про історію: «фон приємніший, не такий жовтий». Тон той самий теплий,
     тільки на два щаблі спокійніший; міняли ОДНИМ значенням у трьох токенах
     (--sand-bg, --sage, --light) і в усіх rgba(246,242,233,…), щоб на сайті
     не з'явилося двох різних кремів. Контраст лишився з запасом:
     текст 13,4:1, зелений 7,2:1, світле на зеленому 7,2:1.
     Похідні тони взяті в тих самих пропорціях, у яких стояли старі токени
     до старого брендового зеленого, тому вся глибина сайту лишилася як була. */
  --green:        #23514C;   /* бренд: шапка, заголовки, футер. 8,0:1 на кремі */
  --green-deep:   #11211F;   /* майже чорний — темні секції й затемнення знімків */
  --green-mid:    #2F6B64;   /* він же світліший — світлий кінець градієнтів */
  --ink:          #252824;   /* основний текст. У палітрі кольору тексту немає,
                                лишаємо теплий майже-чорний: 13,3:1 на тлі сайту */
  --sand-bg:      #F6F2E9;   /* Warm Cream — тло сайту (рішення Дарʼї: «warm cream
                                для фону»). Тепле й світле: сайт виходив надто
                                важким, тло має його підіймати */
  --sage:         #F6F2E9;   /* світлі поверхні секцій — той самий Warm Cream.
                                2026-08-13 Дарʼя: «хочу щоб ці заливки, і хедер, і БГ
                                всюди були Warm Cream». Тобто світлого відтінку більше
                                немає взагалі: усе світле на сайті — один теплий крем,
                                а ритм сторінки тримають знімки й темні секції */
  --sage-leaf:    #96AD90;   /* Sage Leaf у повну силу — підвал, вода на карті, декор */
  /* 2026-08-17 БІЛЬШЕ НЕ ВИКОРИСТОВУЄТЬСЯ. Разом зі зміною палітри всі темні
     поверхні й завіси переїхали на --green-deep #11211F. Лишаю значення на
     випадок «поверни як було», але нових правил на нього не вішати.
     Історія рішення нижче: */
  --sage-deep:    #3C453A;   /* Sage Leaf, затемнений до 40% — ЗАВІСА НА ЗНІМКАХ HERO.
                                Дарʼя 2026-08-13: «sage leaf для заливки Hero», але
                                Hero лишається темним, бо заголовок і меню на ньому
                                світлі (Warm Cream на самому Sage Leaf — 2,29:1).
                                Цей тон зелено-сірий, а не чорно-зелений, і на два
                                щаблі світліший за колишню завісу: 9,8:1 для світлого
                                тексту й 5,1:1 для пісочного активного пункту */
  --sand:         #DCB470;   /* пісочний — вторинний: маркери, підписи, активний пункт */
  --sand-hi:      #E8CB92;   /* він же світліший — hover головної дії на темному */
  /* АКЦЕНТ. Живе тільки на інтерактиві (кнопки, hover, фокус), див. правило акценту.
     2026-08-13 Дарʼя обрала «строго чотири кольори», тому акцент = той самий
     зелений, що й бренд. Токен лишаємо окремим: передумати — один рядок. */
  --accent:       #23514C;   /* бренд-зелений — 8,0:1 на тлі сайту */
  --accent-d:     #1A3D39;   /* натиснутий і hover-стан — той самий зелений, темніший.
                                10,6:1 проти 8,0:1 у бази — hover нарешті видно */
  --light:        #F6F2E9;   /* Warm Cream. Він і світлий текст на темному, і поверхні
                                карток та панелей — за тим самим рішенням Дарʼї про
                                «Warm Cream всюди». Картки тепер не відрізняються від
                                тла кольором: тримаються знімком, відступом і тінню
                                на hover. Захочеш вернути площини — тут одне значення */

  /* СКЛО — поверхня карток на світлих секціях.
     2026-08-16 Дарʼя: «хочу щоб всі такі картки стали склом, щоб лого на БГ
     не пропадало кусками». Річ у тім, що картка була залита тим самим кремом,
     що й тло секції: кольору вона не давала ЖОДНОГО, зате вирізала у водяному
     знаку прямокутну дірку — знак ішов уривками. Тепер поверхня прозора:
     вигляд той самий, а логотип проходить наскрізь.
     Захочеш матове скло замість прозорого — підняти альфу ТУТ, і зміняться
     всі картки разом. Далі 0.35–0.5 знак під карткою вже помітно гасне */
  --glass: rgba(246,242,233,0);

  /* сітка і ритм */
  --container:    1560px;
  --gutter:       20px;
  --gutter-lg:    32px;
  --radius:       0;     /* прямі кути: блоки стикуються в мозаїку без округлень */
  --control-h:    52px;
  --control-h-sm: 46px;

  /* типографіка: заголовки — Yeseva One (дисплейна антиква з різким контрастом
     штрихів), текст та інтерфейс — Roboto Flex у розширеному накресленні.
     Обидва з Google Fonts, кирилиця повна.
     Ширину Roboto Flex вмикає `font-stretch:125%` нижче на body: у Google це
     окреме накреслення, і без цього рядка браузер візьме звичайну ширину */
  --serif: "Yeseva One", Georgia, "Times New Roman", serif;
  --sans:  "Roboto Flex", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* вертикальні поля секції — винесені, щоб блок міг їх «з'їсти» і піти в край */
  --section-pad: clamp(72px, 10vw, 140px);

  --header-h: 96px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--sand-bg);
  color:var(--ink);
  /* кегль на пункт менший за референсні 18px, інтерліньяж просторіший */
  font:400 17px/1.8 var(--sans);
  /* розширене накреслення Roboto Flex (wdth 125). Властивість успадковується,
     тому діє на весь сайт; на Yeseva One вона просто не впливає */
  font-stretch:125%;
  -webkit-font-smoothing:antialiased;
}

img,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
@media (min-width:768px){ .container{ padding-inline:var(--gutter-lg); } }

/* на всю ширину екрана з мінімальними полями — для блоків, де головне фото */
.container--fluid{ max-width:none; padding-inline:16px; }
@media (min-width:768px){ .container--fluid{ padding-inline:24px; } }

/* ---------------------------- кнопки ---------------------------- */

.btn{
  position:relative; isolation:isolate;
  display:inline-flex; align-items:center; justify-content:center;
  height:var(--control-h); padding:0 30px;
  border:1px solid transparent; border-radius:var(--radius);
  font:600 13px/1 var(--sans);
  letter-spacing:.12em; text-transform:uppercase; white-space:nowrap;
  --btn-fill:transparent;
  transition:border-color .28s var(--ease), color .28s var(--ease);
}
/* Заливка на наведення (Дарʼя 2026-08-20): шар ::before росте від лівого
   краю, сам текст лишається на місці. z-index:-1 разом з isolation тримає
   шар НАД тлом кнопки, але ПІД написом — тому напис не блимає.
   Колір заливки кожен різновид кнопки задає своєю змінною --btn-fill,
   а на самій кнопці background НЕ чіпаємо: міняється тільки колір тексту,
   щоб він лишався читабельним поверх нової заливки */
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--btn-fill);
  transform:scaleX(0); transform-origin:left;
  transition:transform .4s ease;
}
.btn:hover::before,
.btn:focus-visible::before{ transform:scaleX(1); }
@media (prefers-reduced-motion:reduce){
  .btn::before{ transition:none; }
}
.btn--sm{ height:var(--control-h-sm); padding:0 22px; font-size:12px; }

/* головна дія — акцентна теракота: єдиний колір, який має право
   зупиняти око, тому живе тільки на кнопках і станах наведення */
/* Заливка НЕ «той самий колір, тільки трохи темніший» (Дарʼя 2026-08-20:
   «там де темна кнопка погано видно»), але й не пісочна — вона їй не
   сподобалася на кнопках. Тепер це проста інверсія: зелена кнопка
   заливається кремом, напис зеленіє, рамка лишається зеленою й тримає
   форму кнопки на кремовому тлі сторінки. Контраст заливки до тла кнопки 8:1 */
.btn--primary{
  background:var(--accent); border-color:var(--accent); color:var(--light);
  --btn-fill:var(--light);
}
.btn--primary:hover{ color:var(--green); }

/* Головна дія В ШАПЦІ залежить від стану шапки (рішення Дарʼї 2026-08-13:
   «коли хедер прозорий — кнопка Warm Cream, коли в колір — як зараз»).
   Поки шапка прозора, під нею знімок Hero: зелена заливка на ньому губиться,
   тому кнопка кремова з зеленим текстом (9,8:1 проти завіси, 7,6:1 текст).
   На кремовій шапці спрацьовує базове правило вище — зелена заливка.
   Шапка — компонент, спільний для всіх 13 сторінок, тому правило одне. */
.header:not(.is-solid) .btn--primary{
  background:var(--light); border-color:var(--light); color:var(--green);
  --btn-fill:var(--green);
}
.header:not(.is-solid) .btn--primary:hover{ border-color:var(--green); color:var(--light); }

/* на темному тлі будь-який темний акцент тоне у фоні, тому головна дія
   там світлішає до пісочного — контраст 8.5 замість 2–3 */
/* тут кнопка вже пісочна, тому заливка навпаки — темна */
.section--dark .btn--primary{
  background:var(--sand); border-color:var(--sand); color:var(--green);
  --btn-fill:var(--green-deep);
}
.section--dark .btn--primary:hover{ border-color:var(--green-deep); color:var(--light); }

/* другорядна дія на темному тлі */
.btn--ghost{
  border-color:rgba(246,242,233,.5); color:var(--light);
  --btn-fill:var(--light);
}
/* світла заливка — напис темніє, інакше кремове по кремовому */
.btn--ghost:hover{ border-color:var(--light); color:var(--green-deep); }

/* другорядна дія на світлому тлі */
.btn--outline{
  border-color:rgba(35,81,76,.32); color:var(--green);
  --btn-fill:var(--green);
}
.btn--outline:hover{ border-color:var(--green); color:var(--light); }

/* ============================ ШАПКА ============================ */

/* Висота однакова в обох станах (рішення Дарʼї 2026-08-13): 4 + 88 + 4 = 96px,
   рівно --header-h. Раніше прозорий стан був 108px, а кремовий 84px, і шапка
   стрибала на першому ж скролі. Змінюється тільки колір тла.
   Поля навмисно мінімальні: логотип майже впритул до країв шапки в обох станах */
.header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  padding:4px 0;
  transition:transform .4s var(--ease), background-color .35s var(--ease),
             box-shadow .35s var(--ease);
}
.header__inner{
  position:relative;
  display:flex; align-items:center; justify-content:space-between; gap:28px;
  min-height:88px;
}

/* ховається при скролі вниз, повертається (уже кремовою) при скролі вгору */
.header.is-hidden{ transform:translateY(-100%); }

/* щільний стан після Hero — кремова шапка з брендовим зеленим текстом.
   Поля не чіпаємо: висота однакова в обох станах */
.header.is-solid{
  background:var(--sand-bg);
}
.header.is-solid .nav a,
.header.is-solid .actions__link,
.header.is-solid .lang,
.header.is-solid .phone{ color:var(--green); }

.header.is-solid .nav a:hover,
.header.is-solid .actions__link:hover,
.header.is-solid .phone:hover{ color:var(--accent-d); }

.header.is-solid .burger span{ background:var(--green); }

.header__logo{ position:relative; display:block; line-height:0; }
.header__logo img{
  width:auto; height:88px;   /* однакова висота в обох станах — логотип не стрибає */
  transition:opacity .35s var(--ease);
}
/* поверх темного Hero — прозорий логотип; на кремовій шапці — версія на плашці
   (прозорий на кремовому просто зникає) */
.header__logo .is-plaque{ position:absolute; left:0; top:0; opacity:0; }

.header.is-solid .header__logo .is-plain{ opacity:0; }
.header.is-solid .header__logo .is-plaque{ opacity:1; }

/* на десктопі логотип строго по центру шапки — як у референсі */
@media (min-width:1181px){
  .header__logo{
    position:absolute; left:50%; top:50%;
    transform:translate(-50%,-50%);
  }
}

.drawer{ display:contents; }

/* меню */
.nav ul{ display:flex; align-items:center; gap:6px; }
.nav a{
  display:block; padding:10px 16px;
  font:500 14px/1 var(--sans); letter-spacing:.08em; text-transform:uppercase;
  color:var(--light);
  transition:color .25s var(--ease);
}
.nav a:hover{ color:var(--sand); }
.nav__mobile-only{ display:none; }

/* правий кластер */
.actions{ display:flex; align-items:center; gap:22px; }

.actions__link{
  font:500 14px/1 var(--sans); letter-spacing:.08em; text-transform:uppercase;
  color:var(--light);
  transition:color .25s var(--ease);
}
.actions__link:hover{ color:var(--sand); }
/* «Про нас» переїхало в правий кластер, тож поточну сторінку тут теж треба
   позначати — так само, як у .nav a.is-current */
.actions__link.is-current{ color:var(--sand); }
/* На кремовій шапці поточний пункт кольором уже не виділити: акцент — той самий
   Forest Green, що й усі пункти (палітра «строго чотири кольори», 2026-08-13),
   а Earth Sand на кремовому дає 1,86:1 і просто зникає. Тому позначка стала
   формою, а не кольором: підкреслення. text-decoration не займає місця, тому
   шапка від нього не стрибає. */
.header.is-solid .actions__link.is-current{
  color:var(--green);
}

.lang{
  display:inline-flex; align-items:center; gap:7px;
  font:600 13px/1 var(--sans); letter-spacing:.12em; color:var(--light);
  opacity:.9; cursor:default;
  transition:color .25s var(--ease);
}
.lang__globe{
  width:15px; height:15px; border:1px solid currentColor; border-radius:50%;
  position:relative;
}
.lang__globe::before{
  content:""; position:absolute; inset:-1px 3px; border:1px solid currentColor; border-radius:50%;
}

.phone{
  display:inline-flex; align-items:center; gap:9px;
  font:600 15px/1 var(--sans); letter-spacing:.02em; color:var(--light);
  transition:color .25s var(--ease);
}
.phone:hover{ color:var(--sand); }
.phone__ic{
  width:16px; height:16px; flex:none;
  background:currentColor;
  -webkit-mask:var(--ic-phone) center/contain no-repeat;
          mask:var(--ic-phone) center/contain no-repeat;
}
:root{
  /* значки месенджерів (2026-08-20): силуети simple-icons, стоять поруч
     із номерами замість кнопок */
  --ic-viber:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M11.4 0C9.5.1 5.4.4 3 2.5 1.3 4.2.7 6.7.6 9.8c0 3.1-.1 8.9 5.6 10.5v2.4s0 1 .6 1.2c.8.2 1.2-.5 1.9-1.3l1.2-1.4c3.9.3 6.9-.4 7.2-.5.8-.3 5.2-.8 5.9-6.6.8-6-.4-9.8-2.5-11.5C19.8.9 16.9-.1 11.4 0Zm.1 1.7c4.7-.1 7.2.7 8.4 1.9 1.8 1.4 2.7 4.7 2 9.7-.6 4.8-4.1 5.1-4.8 5.4-.3.1-2.9.7-6.3.5l-2.3 2.7c-.2.2-.4.3-.5.3-.2 0-.2-.2-.2-.5v-3c-4.8-1.3-4.5-6.2-4.5-8.8.1-2.6.5-4.7 1.9-6.1C7.2 2 10.7 1.7 11.5 1.7Zm.4 2.5c-.3 0-.3.4 0 .5 2 .1 3.6.8 4.8 2 1.2 1.2 1.7 2.9 1.8 5 0 .3.5.3.5 0 0-2.2-.7-4.1-2-5.4-1.3-1.3-3.1-2-5.1-2.1Zm-3 1.1c-.4 0-.7.1-1 .3l-.9.7c-.5.4-.8 1-.8 1.6 0 .9.6 2.6 2.1 4.6 1.5 2 3.2 3.4 4.5 3.9.5.2 1.1.1 1.6-.3l.6-.7c.4-.4.4-1 .1-1.4-.3-.4-1.1-1.1-1.6-1.4-.5-.3-1.1-.2-1.4.2l-.4.5c-.2.2-.5.3-.8.2-.6-.3-1.4-1-2.1-1.9-.6-.9-.9-1.6-.9-2 0-.3.1-.5.3-.7l.5-.4c.4-.3.5-.9.3-1.3-.3-.6-.9-1.4-1.3-1.7-.2-.2-.5-.2-.8-.2Zm3.2 1.4c-.3 0-.3.5 0 .5 1.5.1 2.7 1.2 2.8 2.9 0 .3.5.3.5 0-.1-2-1.5-3.3-3.3-3.4Zm.2 1.9c-.3 0-.4.5 0 .5.7.1 1 .4 1.1 1.1 0 .3.5.3.5 0 0-1-.6-1.5-1.6-1.6Z'/%3E%3C/svg%3E");
  --ic-whatsapp:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M17.5 14.4c-.3-.2-1.8-.9-2-1-.3-.1-.5-.2-.7.2-.2.3-.8 1-.9 1.2-.2.2-.3.2-.6.1-.3-.2-1.3-.5-2.4-1.5-.9-.8-1.5-1.8-1.7-2.1-.2-.3 0-.5.1-.6l.5-.5c.1-.2.2-.3.3-.5.1-.2 0-.4 0-.5 0-.2-.7-1.6-.9-2.2-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.5s1.1 2.9 1.2 3.1c.2.2 2.1 3.3 5.2 4.6.7.3 1.3.5 1.7.6.7.2 1.4.2 1.9.1.6-.1 1.8-.7 2-1.5.3-.7.3-1.4.2-1.5-.1-.2-.3-.2-.6-.4ZM12 2.2c-5.4 0-9.8 4.4-9.8 9.8 0 1.7.5 3.4 1.3 4.9L2.2 21.8l5-1.3c1.4.8 3.1 1.2 4.8 1.2 5.4 0 9.8-4.4 9.8-9.8S17.4 2.2 12 2.2Zm0 17.9c-1.5 0-3-.4-4.3-1.2l-.3-.2-3 .8.8-2.9-.2-.3c-.8-1.3-1.3-2.9-1.3-4.5 0-4.5 3.7-8.2 8.2-8.2s8.2 3.7 8.2 8.2-3.7 8.3-8.1 8.3Z'/%3E%3C/svg%3E");
  --ic-telegram:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M11.9 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0h-.1Zm5 7.2c.1 0 .3 0 .5.1a.5.5 0 0 1 .2.4c0 .1 0 .3-.1.5-.2 1.9-1 6.5-1.4 8.6-.1.9-.5 1.2-.8 1.2-.7.1-1.2-.5-1.9-.9-1-.7-1.6-1.1-2.7-1.8-1.2-.8-.4-1.2.3-1.9.2-.2 3.2-3 3.3-3.2 0 0 0-.2-.1-.2h-.2c-.1 0-1.8 1.1-5.1 3.3-.5.3-.9.5-1.3.5-.4 0-1.3-.3-1.9-.5-.7-.2-1.3-.4-1.3-.8 0-.2.3-.4.9-.7 3.5-1.5 5.8-2.5 7-3 3.3-1.4 4-1.6 4.5-1.6Z'/%3E%3C/svg%3E");
  --ic-phone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2Z'/%3E%3C/svg%3E");
}

/* --- значки месенджерів поруч із номером (2026-08-20, Дарʼя: «значки
   рядом с телефонами, без кнопок») --- */
.chat-ics{ display:inline-flex; align-items:center; gap:10px; margin-left:10px; vertical-align:middle; }
.chat-ic{
  width:18px; height:18px; display:block;
  background:currentColor; opacity:.55;
  transition:opacity .25s var(--ease), transform .25s var(--ease);
}
.chat-ic:hover,
.chat-ic:focus-visible{ opacity:1; transform:translateY(-1px); }
.chat-ic:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.chat-ic--viber{
  -webkit-mask:var(--ic-viber) center/contain no-repeat;
          mask:var(--ic-viber) center/contain no-repeat;
}
.chat-ic--whatsapp{
  -webkit-mask:var(--ic-whatsapp) center/contain no-repeat;
          mask:var(--ic-whatsapp) center/contain no-repeat;
}
.chat-ic--telegram{
  -webkit-mask:var(--ic-telegram) center/contain no-repeat;
          mask:var(--ic-telegram) center/contain no-repeat;
}
/* у темній панелі форми і в модалці значки світлі */
.book__aside .chat-ic,
.bookmodal__aside .chat-ic{ opacity:.7; }
.book__aside .chat-ic:hover,
.bookmodal__aside .chat-ic:hover{ opacity:1; }

/* рядок «телефон + значки» у темних панелях форми і модалки.
   ⚠️ Колір задаємо явно й із запасом специфічності: у проєкті є
   `.section p{ color:var(--ink) }`, і без цього і номер, і значки
   (вони фарбуються currentColor) виходили темними на темному знімку */
.book__phones{ margin:10px 0 0; line-height:2.1; }
.section .book__aside .book__phones,
.section .book__aside .book__channels,
.bookmodal__aside .book__phones{ color:var(--light); }
.section .book__aside .book__channels{ color:rgba(246,242,233,.72); }
.book__phone{
  font:600 17px/1 var(--sans); letter-spacing:.01em;
  border-bottom:1px solid transparent;
  transition:border-color .25s var(--ease);
}
.book__phone:hover{ border-bottom-color:currentColor; }

/* бургер */
.burger{ display:none; width:44px; height:44px; position:relative; }
.burger span{
  position:absolute; left:11px; width:22px; height:1.5px; background:var(--light);
  transition:transform .3s var(--ease), opacity .2s var(--ease), background-color .35s var(--ease);
}
.burger span:nth-child(1){ top:16px; }
.burger span:nth-child(2){ top:22px; }
.burger span:nth-child(3){ top:28px; }
.burger.is-open span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.burger.is-open span:nth-child(2){ opacity:0; }
.burger.is-open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* вузький десктоп — тиснемо меню, щоб не наїхало на центральний логотип.
   Після появи пункту «SPA-комплекс» (на 20px ширший за колишній «Спа-релакс»)
   самого зменшення кегля вже не вистачало — прибрано ще й проміжок між пунктами */
@media (min-width:1181px) and (max-width:1599px){
  .nav ul{ gap:0; }
  .nav a{ padding:10px 6px; font-size:13px; }
  .actions__link{ font-size:13px; }
  .actions{ gap:16px; }
  .phone{ font-size:14px; }
  .header .btn--sm{ padding:0 18px; }
}

/* найвужчий десктоп: логотип по центру вже з 1181px, а місця ліворуч від нього
   лишається менше за меню — тут тиснемо ще й кегль з міжлітерним інтервалом */
@media (min-width:1181px) and (max-width:1300px){
  .nav a{ padding:10px 5px; font-size:12px; letter-spacing:.05em; }
}

/* Ноутбучні ширини: центральна композиція тут не збирається. Заміри 2026-08-15
   (логотип 221px завширшки): зазор між логотипом і правим кластером дорівнює
   -97px на 1181, -68 на 1240, -18 на 1339 — кластер (Про нас + Контакти + UA +
   номер + кнопка = 537px) наїжджає на логотип. Ліворуч запас є завжди (50-127px),
   тобто тиснути меню марно — вузьке місце праворуч.
   Рішення Дарʼї: і зменшити кластер, і зняти логотип із центру.
   1. Логотип повертається в потік і стає ліворуч, менший — 60px заввишки.
      position:relative, а НЕ static: усередині лежить .is-plaque з
      position:absolute, і без позиціонованого предка він поїхав би до
      .header__inner.
   2. Номер згортається в іконку (посилання tel: працює), перемикач мов
      ховається — мова поки одна, кнопка й так disabled.
   Разом зазор стає +80px на 1181 і далі тільки більший. З 1440px усе
   повертається: логотип у центрі, номер і UA на місці */
@media (min-width:1181px) and (max-width:1439px){
  .header__logo{ position:relative; left:auto; top:auto; transform:none; }
  .header__logo img{ height:60px; }
  .lang{ display:none; }
  .phone__num{ display:none; }
  .phone{ gap:0; }
}

/* ------- мобільна панель ------- */
@media (max-width:1180px){
  .burger{ display:block; }

  .drawer{
    display:flex; flex-direction:column; justify-content:center; gap:40px;
    position:fixed; inset:0; z-index:-1;
    padding:120px var(--gutter) 60px;
    background:var(--green);
    opacity:0; visibility:hidden;
    transform:translateY(-12px);
    transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
  }
  .drawer.is-open{ opacity:1; visibility:visible; transform:none; z-index:1; }

  /* логотип і бургер лишаються над висувною панеллю */
  .header__logo,
  .burger{ position:relative; z-index:2; }

  .nav ul{ flex-direction:column; align-items:flex-start; gap:2px; }
  .nav a{ padding:12px 0; font-size:18px; }
  .nav__mobile-only{ display:block; }
  .actions__link{ display:none; }

  .actions{ flex-direction:column; align-items:flex-start; gap:22px; }
  .actions .btn{ width:100%; max-width:340px; }

  body.is-locked{ overflow:hidden; }

  /* висувна панель темна — щільна кремова шапка на її тлі не потрібна */
  body.is-locked .header,
  body.is-locked .header.is-solid{ background:transparent; box-shadow:none; }
  body.is-locked .header.is-solid .burger span{ background:var(--light); }

  /* Висувна панель залита брендовим Forest Green, а він же тепер і колір
     головної дії — зелена кнопка в розкритому меню зливалася з панеллю
     (видно було тільки текст). Тому в розкритому меню кнопка ЗАВЖДИ кремова,
     незалежно від того, прокручена сторінка чи ні: 7,6:1 на панелі. */
  body.is-locked .header .btn--primary{
    background:var(--light); border-color:var(--light); color:var(--green);
  }
  body.is-locked .header .btn--primary{ --btn-fill:var(--green); }
  body.is-locked .header .btn--primary:hover{ border-color:var(--green); color:var(--light); }
}

/* ============================= HERO ============================= */

.hero{
  position:relative;
  min-height:100svh;
  /* stretch, а не center: внутрішній блок сам розкладає логотип і низ */
  display:flex; align-items:stretch;
  padding:calc(var(--header-h) + 40px) 0 clamp(36px, 5vh, 64px);
  overflow:hidden;
  color:var(--light);
  isolation:isolate;
}

/* тло: відеолуп; заливка під ним видно, поки кадри не приїхали */
.hero__media{ position:absolute; inset:0; z-index:-2; background:var(--green-deep); }
.hero__video{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
}
/* спокійний режим: замість руху — той самий кадр, що й постер.
   Фон вантажиться тільки коли медіа-запит спрацював */
@media (prefers-reduced-motion:reduce){
  .hero__media{
    background:var(--green-deep) url("../img/hero-poster.webp") center/cover no-repeat;
  }
  .hero__video{ display:none; }
}

/* Затемнення під текст і під шапку.
   2026-08-17: тон переїхав із сіро-зеленого #3C453A на майже чорний #11211F
   разом з усією палітрою, але альфи перераховані ВНИЗ, щоб кадр не став
   темнішим: Дарʼя просила «не перегни з затемненням». Рахував не на око —
   підбирав альфу так, щоб середня яскравість постера під завісою лишилася
   тією самою. Важливий нюанс, який видно тільки на замірі: старий сіро-зелений
   був СВІТЛІШИЙ за низ кадру й насправді підсвічував його, тому внизу «як було»
   недосяжно в принципі — там альфи опущені найсильніше (.82→.24), щоб різниця
   лишилася непомітною. Підсумок під підписом: фон ~(37,50,43) проти (59,68,57),
   контраст пісочного 6,8:1 проти 5,1:1.
   Другим кроком того ж дня Дарʼя сказала «завісу скрізь можна більше затемнити,
   її майже немає» — альфи підняті ще раз, і тепер кадр справді темніший за
   старий: верх (53,67,65) проти (82,91,81), центр (56,72,71) проти (74,87,82),
   низ (29,43,38) проти (59,68,57). Контраст: меню 5,3:1, логотип 8,6:1,
   підпис 7,5:1 — усе з запасом */
.hero__scrim{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(to bottom, rgba(17,33,31,.58) 0%, rgba(17,33,31,0) 32%),
    linear-gradient(to top,    rgba(17,33,31,.42) 0%, rgba(17,33,31,.05) 55%),
    radial-gradient(120% 80% at 50% 55%, rgba(17,33,31,.38) 0%, rgba(17,33,31,.48) 100%);
}

.hero__inner{
  flex:1;
  display:flex; flex-direction:column; align-items:center; text-align:center;
}

/* --- титульний блок: логотип як головний акцент ---
   авто-поля з двох боків центрують логотип у вільному просторі,
   а підпис із кнопками лишається біля нижнього краю */
.hero__crest{
  position:relative;
  display:flex; flex-direction:column; align-items:center;
  margin-block:auto;
}

.hero__foot{ display:flex; flex-direction:column; align-items:center; }

.hero__title{ margin:0; line-height:0; }

.hero__logo-wrap{ position:relative; display:inline-block; line-height:0; }

/* напівпрозорий: під логотипом працює відео, воно має проглядати крізь літери */
.hero__logo{
  width:clamp(340px, 74vw, 1400px); height:auto;
  opacity:.82;
  filter:drop-shadow(0 0 48px rgba(220,180,112,.35));
}

/* Відблиск. Маска — той самий логотип, тому світла смуга йде рівно по літерах,
   а не по прямокутнику. Довга пауза між пробіжками, щоб не миготіло */
.hero__shine{
  position:absolute; inset:0;
  pointer-events:none;
  background:linear-gradient(105deg,
      rgba(246,242,233,0)   42%,
      rgba(246,242,233,.85) 50%,
      rgba(246,242,233,0)   58%) 150% 0 / 250% 100% no-repeat;
  -webkit-mask:url("../img/logo.webp") center/contain no-repeat;
          mask:url("../img/logo.webp") center/contain no-repeat;
  animation:hero-shine 7s var(--ease) infinite;
}
@keyframes hero-shine{
  0%, 62% { background-position:150% 0; }
  100%    { background-position:-60% 0; }
}

/* нижнє поле піднімає рядок над краєм екрана: кнопки під ним більше немає,
   і без нього підпис лягав майже на панель бронювання */
.hero__sub{
  margin:clamp(22px, 4vh, 44px) 0 clamp(28px, 6vh, 72px);
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.7rem, 3.6vw, 2.9rem);
  line-height:1.3; letter-spacing:.02em;
  /* світлий, як заголовки Hero на внутрішніх сторінках (.page-hero__title):
     пісочний тут читався як акцент, а акцент живе тільки на інтерактиві */
  color:var(--light);
}

/* --- мобільна адаптація Hero --- */
@media (max-width:767px){
  .hero{ padding:calc(var(--header-h) + 16px) 0 clamp(28px, 4vh, 44px); }
  .hero__logo{ width:min(100%, 380px); }
}

/* короткі екрани — тиснемо вертикальний ритм */
@media (max-height:700px) and (min-width:768px){
  .hero__logo{ width:clamp(300px, 56vw, 940px); }
}

/* ======================= СЕКЦІЇ НА СВІТЛОМУ ======================= */

.section{ position:relative; overflow:hidden; padding:var(--section-pad) 0; }

/* --- ледь помітний логотип на тлі секції ---
   brightness(0) робить із золотого суцільний силует, далі гасимо прозорістю;
   на темних секціях силует інвертуємо у світлий, інакше він зникає у фоні */
.section__mark{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:min(1500px, 130%); max-width:none; height:auto;
  opacity:.05; filter:brightness(0);
  pointer-events:none; user-select:none;
}
.section--dark .section__mark{ opacity:.05; filter:brightness(0) invert(1); }

/* контент завжди поверх знака */
.section > .container{ position:relative; z-index:1; }

@media (max-width:900px){
  .section__mark{ width:180%; }
}

/* НЕ ВИКОРИСТОВУЄТЬСЯ: надзаголовки прибрані з розмітки 2026-08-10 —
   капслок над кожним заголовком з'їдав повітря. Правила лишені на випадок,
   якщо клас знадобиться знову; специфічність вища за `.section p` */
.section .eyebrow,
.promo .eyebrow{
  margin:0 0 20px;
  font:600 12px/1 var(--sans); letter-spacing:.24em; text-transform:uppercase;
  color:rgba(35,81,76,.62);
}

.section__title{
  margin:0 0 28px;
  font-family:var(--serif); font-weight:400;
  font-size:clamp(2.2rem, 4.4vw, 4rem);
  line-height:1.08; letter-spacing:0;
  color:var(--green);
}

.section p{ margin:0 0 20px; color:var(--ink); }

/* --- заглушка під фото: підпис показує, що сюди піде --- */
.ph{
  position:relative; margin:0; overflow:hidden;
  border-radius:var(--radius);
  background:
    repeating-linear-gradient(45deg, transparent 0 10px, rgba(35,81,76,.045) 10px 11px),
    linear-gradient(140deg, rgba(150,173,144,.5), rgba(35,81,76,.12)),
    var(--sage);
  border:1px solid rgba(35,81,76,.14);
}
.ph::after{
  content:attr(data-label);
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  padding:12px; text-align:center;
  font:500 10px/1.5 var(--sans); letter-spacing:.14em; text-transform:uppercase;
  color:rgba(35,81,76,.55);
}

/* ------------------------ Про комплекс ------------------------ */

/* колонки рівно навпіл і БЕЗ проміжку: межа колонок збігається з центром
   екрана, тому всі великі фото головної спиняються на одній вертикалі.
   Повітря між текстом і фото дає падинг колонки, а не gap */
.about__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:0;
  row-gap:clamp(28px, 4vw, 56px);
  align-items:start;
  /* На весь екран, як промо-блок і купелі (Дарʼя 2026-08-17). Висоту знову
     задаємо сітці, а не секції: велике фото тягнеться по її рядках і
     впирається в межі блоку. Якщо тексту більше за екран — секція росте */
  min-height:calc(100svh - 2 * var(--section-pad));
}
.about__text,
.about__thumbs{ padding-right:clamp(28px, 4vw, 56px); }

.about__text  { grid-column:1; grid-row:1; }

/* головне фото впирається в правий край екрана, а по вертикалі стоїть у межах
   полів секції: верх на рівні заголовка, низ — на рівні квадратів.
   Висоту йому задає ліва колонка, тому aspect-ratio тут не потрібен */
.about__photo{
  position:relative;
  grid-column:2; grid-row:1 / span 2;
  align-self:stretch;
  margin:0;
  margin-right:calc(-1 * (max(0px, (100vw - var(--container)) / 2) + var(--gutter-lg)));
  border:0; border-radius:0;
  overflow:hidden;
}
.about__thumbs{
  grid-column:1; grid-row:2;
  display:grid; grid-template-columns:repeat(3, 1fr); gap:12px;
}
.about__thumbs figure{ margin:0; overflow:hidden; aspect-ratio:1/1; }

/* знімок заповнює свою рамку: у великого висоту задає сусідня колонка,
   у квадратів — aspect-ratio, тому кадрування скрізь на совісті object-fit.
   Великий винесено в absolute навмисне: інакше його власна пропорція
   розсуває рядок сітки, і секція росте під фото, а не фото під секцію */
.about__photo img{ position:absolute; inset:0; }
.about__photo img,
.about__thumbs img{ width:100%; height:100%; object-fit:cover; }

/* колонка широка, але рядок тексту тримаємо в межах читабельних ~70 знаків */
.about__text p{ max-width:620px; }
.about__text .btn{ margin-top:12px; }

@media (max-width:900px){
  .about__grid{ grid-template-columns:1fr; }
  .about__text,
  .about__photo,
  .about__thumbs{ grid-column:1; grid-row:auto; }
  /* колонка одна — відступ під фото праворуч більше не потрібен */
  .about__text,
  .about__thumbs{ padding-right:0; }
  /* фото стоїть посередині блоку, тому поля секції лишаємо,
     а по ширині розтягуємо його від краю до краю */
  .about__photo{
    aspect-ratio:3/2;
    margin-inline:calc(50% - 50vw);
    margin-block:0;
  }
}

/* -------------------------- Проживання -------------------------- */

.rooms{ background:var(--sage); }

/* На весь екран (Дарʼя 2026-08-17): шапка секції зверху, панелі забирають
   усю решту висоти. Плюс панелі впираються в краї екрана — боковi поля
   контейнера тут зняті, їх лишає собі тільки шапка */
.rooms > .container--fluid{
  min-height:calc(100svh - 2 * var(--section-pad));
  display:flex; flex-direction:column;
  padding-inline:0;
}
.rooms > .container--fluid > .section__head{ padding-inline:var(--gutter); }
/* панелі забирають решту висоти під шапкою. Підлога тут нижча за спільну
   (та лишається для «Що поруч» на about.html): із високою секція не влазила
   в екран і виходило 1050px замість 900 */
.rooms .panels{ flex:1; }
.rooms .panel{ min-height:clamp(320px, 26vw, 460px); }

.section__head{ max-width:720px; margin:0 auto clamp(40px, 5vw, 64px); text-align:center; }
.section__head .section__title{ margin-bottom:22px; }
.section__lead{ margin:0; color:var(--ink); }

/* Шапка без ліда (Дарʼя 2026-08-19: «більше повітря в цьому заголовку, бо
   підзаголовка немає»). Відступ під шапкою розрахований на пару «заголовок +
   лід»; коли ліда немає, контент підходить до заголовка надто близько, а
   22px під самим заголовком просто висять. Прибираємо хвіст і дозволяємо
   заголовку дихати. :has() не підтримує лише старий браузер — там лишиться
   нинішній відступ, тобто просто трохи щільніше */
.section__head:not(:has(.section__lead)){ margin-bottom:clamp(56px, 6.5vw, 96px); }
.section__head:not(:has(.section__lead)) .section__title{ margin-bottom:0; }

/* ============ ГАРМОШКА ПАНЕЛЕЙ (спільний компонент) ============ */
/* Ряд панелей: наведена росте, сусідні ужимаються, під нею розкривається
   опис. Використовується двічі: номери на головній (панель — посилання)
   і «Що поруч» на сторінці «Про комплекс» (панель — просто картка). */
.panels{ display:flex; gap:12px; }

.panel{
  position:relative; display:block; overflow:hidden;
  flex:1 1 0; min-width:0;
  /* не height, а підлога: у номерах на головній ряд тягнеться до низу
     екрана, у «Що поруч» на about.html висота лишається саме цією */
  min-height:clamp(460px, 38vw, 720px);
  border-radius:var(--radius);
  color:var(--light); text-decoration:none;
  transition:flex-grow .5s var(--ease);
}
.panel:hover,
.panel:focus-visible{ flex-grow:1.9; }

/* ЗАГЛУШКА замість фото: підпис зверху показує, що сюди піде */
.panel__photo{
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(45deg, transparent 0 12px, rgba(246,242,233,.035) 12px 13px),
    linear-gradient(155deg, var(--green-mid) 0%, var(--green-deep) 100%);
}
.panel__photo::before{
  content:attr(data-label);
  position:absolute; top:16px; left:12px; right:12px;
  font:500 9px/1.4 var(--sans); letter-spacing:.16em; text-transform:uppercase;
  text-align:center; color:rgba(246,242,233,.45);
}
.panel__photo::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(rgba(17,33,31,0) 25%, rgba(17,33,31,.88) 100%);
}

/* там, де справжнє фото вже є, підпис-заглушка не потрібен */
.panel__photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.panel__photo--photo::before{ content:none; }

.panel__body{
  position:absolute; inset:auto 0 0 0; z-index:2;
  padding:0 18px 32px; text-align:center;
}

/* у номерах це <span> усередині посилання, у «Що поруч» — <h3>,
   тому власний margin заголовка гасимо */
.panel__name{
  display:block; margin:0;
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.35rem, 2.1vw, 2rem);
  line-height:1.1; letter-spacing:.01em;
}

.panel__line{
  display:block; width:80px; height:1px; margin:16px auto 0;
  background:var(--sand);
  transition:width .5s var(--ease);
}
.panel:hover .panel__line,
.panel:focus-visible .panel__line{ width:150px; }

.panel__reveal{
  display:block; overflow:hidden;
  max-height:0; opacity:0;
  transition:max-height .5s var(--ease), opacity .35s var(--ease);
}
.panel:hover .panel__reveal,
.panel:focus-visible .panel__reveal{ max-height:340px; opacity:1; }

.panel__anons{
  display:block; margin:20px auto 0; max-width:340px;
  font-size:15px; line-height:1.55; color:rgba(246,242,233,.88);
}
/* короткі рядки під описом: місткість і ціна в номерах, факт у «Що поруч» */
.panel__meta,
.panel__price{
  display:block; margin:10px 0 0;
  font:500 14px/1.5 var(--sans);
  color:var(--sand);
}
.panel__reveal .btn{ margin-top:20px; }

.rooms__foot{
  margin-top:clamp(36px, 4vw, 56px);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:16px 28px; text-align:center;
}
.rooms__foot p{ margin:0; }

@media (max-width:900px){
  /* колонкою блок і так вищий за екран — тягнути його до 100svh не потрібно */
  .rooms > .container--fluid{ min-height:0; display:block; }
  .panels{ flex-direction:column; }
  /* усе розкрито одразу, тому панель має бути вищою, ніж на десктопі у стані спокою */
  .panel{ flex:none; min-height:0; height:430px; }
  .panel:hover,
  .panel:focus-visible{ flex-grow:0; }
  /* на тачскріні hover не спрацьовує — показуємо все одразу */
  .panel__reveal{ max-height:none; opacity:1; }
  .panel__line{ width:150px; }
}

/* ======================== КУПЕЛІ ТА SPA ======================== */

/* темна секція: перебиває кольори світлої теми (специфічність та сама,
   тому правила мають лежати нижче за базові) */
.section--dark{ background:var(--green-deep); color:rgba(246,242,233,.82); }
.section--dark .eyebrow{ color:rgba(220,180,112,.85); }
.section--dark .section__title{ color:var(--light); }
.section--dark p{ color:rgba(246,242,233,.82); }

/* м'яке мінеральне світіння в кутку — атмосфера, а не декор заради декору */
.spa::before{
  content:""; position:absolute; z-index:0;
  top:-20%; right:-10%; width:70%; aspect-ratio:1;
  background:radial-gradient(circle, rgba(150,173,144,.16) 0%, rgba(150,173,144,0) 65%);
  pointer-events:none;
}

/* Шапка секції — окрема світла смуга над темним блоком (Дарʼя 2026-08-17).
   Поля менші за типові: зверху вже дихає секція номерів, а знизу заголовок
   не має відриватися від фото, яке починається одразу за межею кольору */
.spa-intro{ padding-block:clamp(56px, 7vw, 96px) clamp(48px, 6vw, 80px); }
.spa-intro .section__head{ margin-bottom:0; }

/* половина екрана під фото, половина під перелік послуг — межа колонок
   лягає на центр екрана, як у «Про комплекс» і промо-блоці. Відступ між
   колонками дає падинг, не gap */
.spa__grid{
  position:relative; z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  column-gap:0;
  /* На весь екран, як промо-блок SPA нижче (Дарʼя 2026-08-17). Висоту
     задаємо сітці, а не секції, — інакше фото центрується і перестає
     впиратися в межі блоку. Поля секції фото з'їдає, тому їх вираховуємо;
     420px — підлога для низьких вікон, щоб знімок не став смужкою */
  min-height:max(420px, calc(100svh - 2 * var(--section-pad)));
}
.spa__nav{ padding-left:clamp(32px, 4.5vw, 72px); }
.spa__stage{ grid-column:1; grid-row:1; }

/* Права колонка тягнеться на всю висоту блоку: перелік стоїть по центру,
   а кнопка притиснута до низу секції (Дарʼя 2026-08-17) */
.spa__nav{
  grid-column:2; grid-row:1;
  align-self:stretch;
  display:flex; flex-direction:column;
}
.spa__list{ flex:1; display:flex; flex-direction:column; justify-content:center; }

/* --- ліва колонка: фото активної послуги --- */

/* фото виходить із контейнера і впирається в лівий край екрана.
   Відсотки в margin грид-елемента рахуються від ширини КОЛОНКИ, тому
   звичний трюк calc(50% - 50vw) тут не працює — рахуємо виліт явно:
   поле контейнера + половина того, що лишилось поза його max-width */
.spa__stage{
  position:relative; overflow:hidden;
  /* власної висоти немає: її задає рядок сітки (100svh мінус поля секції),
     а фото просто розтягується по ньому */
  margin-left:calc(-1 * (max(0px, (100vw - var(--container)) / 2) + var(--gutter-lg)));
  /* з'їдаємо вертикальні поля секції — фото стає на всю її висоту */
  margin-block:calc(-1 * var(--section-pad));
  background:var(--green);
}

.spa__slide{
  position:absolute; inset:0; margin:0;
  opacity:0; visibility:hidden;
  transform:scale(1.03);
  transition:opacity .6s var(--ease), transform .8s var(--ease), visibility .6s;
}
.spa__slide.is-active{ opacity:1; visibility:visible; transform:none; }

/* ЗАГЛУШКА замість фото послуги */
.spa__ph{
  position:absolute; inset:0;
  border-radius:0; border:0;
  background:
    repeating-linear-gradient(45deg, transparent 0 12px, rgba(246,242,233,.035) 12px 13px),
    linear-gradient(155deg, var(--green-mid) 0%, var(--green-deep) 100%);
}
.spa__ph::after{ align-items:flex-start; padding-top:26px; color:rgba(246,242,233,.45); }

/* справжнє фото послуги — на місце заглушки, у ту саму рамку слайда */
.spa__img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  /* сцена вузька і висока — горизонтальні кадри ріже по боках. Там, де в
     кадрі є що зберегти (вивіска «Дикі чани»), слайд задає свою точку
     фокуса через --img-pos (2026-08-20) */
  object-position:var(--img-pos, center);
}

.spa__scrim{
  position:absolute; inset:0;
  background:linear-gradient(rgba(17,33,31,0) 35%, rgba(17,33,31,.9) 100%);
}

/* НЕ ВИКОРИСТОВУЄТЬСЯ з 2026-08-17: Дарʼя прибрала підписи з самих знімків —
   назва активної послуги читається в переліку праворуч. Правила лишені
   на випадок повернення; новим блокам їх не давати */
.spa__caption{
  position:absolute; inset:auto 0 0 0;
  padding:clamp(24px, 3vw, 44px);
  color:var(--light);
}
.spa__name{
  display:block;
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.9rem, 3.4vw, 3.4rem);
  line-height:1.12; letter-spacing:.02em;
}
.spa__anons{
  display:block; max-width:640px; margin-top:16px;
  font-size:clamp(16px, 1.4vw, 21px); line-height:1.55;
  color:rgba(246,242,233,.86);
}

/* --- права колонка: список послуг --- */

/* Кегль більший за типовий для таких переліків, а рядки просторіші: блок
   на весь екран, і дрібний список у ньому губився (Дарʼя 2026-08-17).
   Верхня межа тримається так, щоб найдовший пункт — «Турецький хамам із
   сауною і джакузі» — лишався в один рядок */
.spa__tab{
  display:flex; align-items:center;
  width:100%; padding:clamp(12px, 1.5vw, 22px) 2px;
  font:500 clamp(16px, 1.65vw, 24px)/1.25 var(--sans);
  letter-spacing:.08em; text-transform:uppercase; text-align:left;
  color:rgba(246,242,233,.66);
  transition:color .3s var(--ease), padding-left .3s var(--ease);
}
.spa__tab:hover{ color:var(--light); }
/* активний пункт: із 2026-08-19 це посилання, а не таб, тому клас, а не aria */
.spa__tab.is-active{ color:var(--sand); padding-left:10px; }

/* Стрілки в активного пункту немає (Дарʼя 2026-08-17): вона висіла в
   протилежному краї колонки, далеко від самого напису. Активний стан
   тримається кольором і зсувом рядка */

/* --- планшет і мобільний: фото → список, одна колонка --- */
@media (max-width:900px){
  .spa__grid{
    grid-template-columns:1fr;
    row-gap:clamp(24px, 3vw, 40px);
    /* в одну колонку блок і так вищий за екран: фото + перелік */
    min-height:0;
  }
  .spa__stage,
  .spa__nav{ grid-column:1; grid-row:auto; }
  /* колонка одна — відступ від фото ліворуч більше не потрібен */
  .spa__nav{ padding-left:0; }
  /* на вузькому екрані фото займає всю ширину — від краю до краю.
     По вертикалі воно посередині блоку, тому поля секції лишаємо */
  .spa__stage{
    min-height:0; aspect-ratio:4/3;
    margin-inline:calc(50% - 50vw);
    margin-block:0;
  }
}
@media (max-width:600px){
  .spa__stage{ aspect-ratio:3/4; }
  .spa__tab{ padding:13px 2px; }
}

/* ================ ПРОМО: SPA-КОМПЛЕКС У ВОЛОСЯНЦІ ================ */

/* повноцінна секція, а не вузька смуга: другий комплекс заслуговує свого блоку
   в загальній мозаїці, тому ритм і поля тут такі самі, як у сусідніх секцій */
.promo{ background:var(--sage); }

/* повноекранний блок: поруч із секціями на ~1000px вузька смуга читалася як
   банер, а не як окремий напрямок комплексу. Висоту задаємо сітці, а не
   секції, — інакше фото центрується і перестає впиратися в межі блоку */
.promo__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:0;
  row-gap:clamp(28px, 4vw, 56px);
  align-items:center;
  min-height:calc(100svh - 2 * var(--section-pad));
}

.promo__body{
  grid-column:1; max-width:620px;
  padding-right:clamp(28px, 4vw, 56px);
}

/* фото впирається в правий край екрана і в межі секції по вертикалі —
   той самий прийом, що в «Про комплекс»: блоки стикуються без полів */
.promo__ph{
  position:relative;
  grid-column:2;
  align-self:stretch;
  /* <figure> без класу .ph лишається з браузерним margin:1em 40px — через
     нього ліва межа знімка не збігалася з межею фото/панелі в темній секції
     вище (633 проти 673 на 1280px). Обнуляємо (2026-08-20) */
  margin-left:0;
  /* та сама висота, що в спа-блоці вище: блок має важити як повноцінна секція,
     а не як вузька смуга між двома великими */
  min-height:clamp(420px, 42vw, 660px);
  margin-right:calc(-1 * (max(0px, (100vw - var(--container)) / 2) + var(--gutter-lg)));
  margin-block:calc(-1 * var(--section-pad));
  border:0; border-radius:0;
  overflow:hidden;
}
/* коли замість заглушки стоїть справжній кадр — заповнює рамку, як у
   .about__photo: висоту диктує сама рамка, знімок під неї підрізається */
.promo__ph img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; display:block;
}

.promo__title{
  margin:0 0 16px;
  font:400 clamp(1.9rem, 3vw, 2.9rem)/1.12 var(--serif);
  color:var(--green);
}
.promo__text{ margin:0 0 clamp(24px, 2.6vw, 34px); color:var(--ink); }

@media (max-width:900px){
  /* одна колонка: повна висота екрана і падинг під фото більше не потрібні */
  .promo__grid{ grid-template-columns:1fr; min-height:0; }
  .promo__body{ padding-right:0; }
  .promo__body,
  .promo__ph{ grid-column:1; }
  /* фото стоїть під текстом, тому вертикальні поля секції лишаємо,
     а по ширині розтягуємо його від краю до краю.
     align-self:start обов'язковий: із stretch ширину почне диктувати
     aspect-ratio від висоти рядка, і фото вилазить за екран */
  .promo__ph{
    align-self:start;
    min-height:0; aspect-ratio:3/2;
    margin-inline:calc(50% - 50vw);
    margin-block:0;
  }
}
@media (max-width:600px){
  .promo .btn{ width:100%; }
}

/* ================== ВІТРИНА: фото + текст + гармошка ==================
   Спільний блок: велике фото тримає одну половину від краю екрана,
   у другій — текст, під ним гармошка знімків. Використовує колиба
   на головній і котеджі. Модифікатор --mirror дзеркалить сторони */

.showcase{
  --rest-gap:clamp(32px, 4.5vw, 72px);
  /* скільки треба «відкусити», щоб дотягнутися до краю екрана */
  --bleed:calc(max(0px, (100vw - var(--container)) / 2) + var(--gutter-lg));

  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  grid-template-rows:auto auto;
  column-gap:var(--rest-gap);
  row-gap:clamp(32px, 4vw, 56px);
  align-items:start;
}

/* головне фото тримає всю ліву половину блоку — від краю екрана
   і від верхньої до нижньої межі секції */
.showcase__hero{
  margin:0;
  grid-column:1; grid-row:1 / span 2;
  align-self:stretch;
  margin-left:calc(-1 * var(--bleed));
  margin-block:calc(-1 * var(--section-pad));
  border:0; border-radius:0;
  overflow:hidden;
}
.showcase__hero img{ width:100%; height:100%; object-fit:cover; }

/* Колиба на головній — на весь екран (Дарʼя 2026-08-17). Тільки вона:
   вітрини котеджів на room-cottages.html лишаються по контенту */
.restaurant .showcase{ min-height:calc(100svh - 2 * var(--section-pad)); }

/* Фасад колиби: кадр горизонтальний (1448×1086), а рамка вітрини висока —
   при звичайному центруванні cover зрізає 46% ширини й ділить будівлю навпіл.
   Зсув до 40% ставить у центр ґанок із вертикальною вивіскою «КОЛИБА».
   На вузьких екранах рамка стає 3:2 і зсув уже не потрібен — там видно все */
.restaurant .showcase__hero img{ object-position:40% center; }
@media (max-width:1000px){
  .restaurant .showcase__hero img{ object-position:center; }
}

.showcase__strip > figure{ margin:0; overflow:hidden; }
.showcase__strip > figure img{ width:100%; height:100%; object-fit:cover; }

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

.showcase__text p{ max-width:560px; margin-bottom:0; }

/* --- перемикач гармошки: показує знімки одного котеджу з чотирьох --- */
.strip-tabs{
  display:flex; flex-wrap:wrap; gap:8px;
  margin:clamp(26px, 3vw, 34px) 0 0;
}
.strip-tabs__label{
  width:100%; margin:0 0 12px;
  font:500 13px/1.4 var(--sans); color:rgba(37,40,36,.62);
}
.strip-tab{
  padding:10px 20px;
  border:1px solid rgba(35,81,76,.22); border-radius:var(--radius);
  background:transparent;
  font:500 13px/1 var(--sans); letter-spacing:.08em; text-transform:uppercase;
  color:var(--green);
  cursor:pointer;
  transition:color .25s var(--ease), border-color .25s var(--ease), background-color .25s var(--ease);
}
.strip-tab:hover{ border-color:var(--accent-d); color:var(--accent-d); }
.strip-tab.is-active{
  background:var(--accent); border-color:var(--accent); color:var(--light);
}
.strip-tab:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

/* панелі чужого котеджу зникають із гармошки повністю */
.showcase__strip > figure[hidden]{ display:none; }

/* сторінка котеджів: два блоки поспіль, тому панський відбитий тлом */
.cots--pansky{ background:var(--sage); }
.cots-terms{ background:var(--sand-bg); }

/* ========================= РЕСТОРАН ========================= */

/* після темного спа-блоку йде світла секція — тепле тло сайту */
.restaurant{ background:var(--sand-bg); }

/* --- переваги: короткі мітки в рядок --- */
.rest__tags{
  display:flex; flex-wrap:wrap; gap:10px;
  margin:clamp(26px, 3vw, 36px) 0 clamp(28px, 3.2vw, 40px);
}
.rest__tags li{
  padding:9px 17px;
  border:1px solid rgba(35,81,76,.22); border-radius:var(--radius);
  background:rgba(246,242,233,.55);
  font:500 13px/1.2 var(--sans); letter-spacing:.04em;
  color:var(--green);
}

/* у блоці лишилася одна дія — кнопка тримає власну ширину */
.showcase__cta{
  display:flex; flex-wrap:wrap; gap:12px;
  /* власного відступу зверху не було, і кнопки прилипали до переліку цін
     над ними (Дарʼя 2026-08-17) */
  margin-top:clamp(22px, 2.4vw, 30px);
  max-width:560px;
}

/* --- гармошка знімків: нижній кут блоку, у край екрана і в низ секції --- */
.showcase__strip{
  grid-column:2; grid-row:2;
  --strip-gap:6px;

  display:flex; gap:var(--strip-gap);
  /* зʼїдаємо міжколонковий проміжок, але лишаємо між фото й першою панеллю
     такий самий шов, як між панелями гармошки */
  margin-left:calc(-1 * var(--rest-gap) + var(--strip-gap));
  margin-right:calc(-1 * var(--bleed));
  margin-bottom:calc(-1 * var(--section-pad));
}
.showcase__strip > figure{
  flex:1 1 0; min-width:0;
  height:clamp(260px, 21vw, 360px);
  border:0; border-radius:0;
  transition:flex-grow .55s var(--ease);
}
/* наведена панель розсуває сусідів — той самий прийом, що в блоці номерів.
   Колонка вузька, тому коефіцієнт більший, ніж у номерах */
.showcase__strip > figure:hover{ flex-grow:3.2; }

/* --- дзеркальний варіант: фото праворуч, текст і гармошка ліворуч ---
   Дзеркалимо й САМІ колонки, а не лише вміст. Інакше широка колонка (1.05fr)
   лишається ліворуч, фото потрапляє у вузьку — і шов «фото / текст» з'їжджає:
   у звичайному блоці він на 632 px, у дзеркальному був на 684. По всьому сайту
   ця вертикаль одна (на головній так стикуються «Про комплекс» і «Ресторан»:
   фото праворуч від 633 і фото ліворуч до 632), тому блоки мусять сходитися
   в одну лінію — Дарʼя 2026-08-16 про сторінку котеджів */
.showcase--mirror{ grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); }
.showcase--mirror .showcase__hero{
  grid-column:2;
  margin-left:0;
  margin-right:calc(-1 * var(--bleed));
}
.showcase--mirror .showcase__text{ grid-column:1; }
.showcase--mirror .showcase__strip{
  grid-column:1;
  margin-left:calc(-1 * var(--bleed));
  margin-right:calc(-1 * var(--rest-gap) + var(--strip-gap));
}

@media (max-width:900px){
  .showcase{ grid-template-columns:1fr; }
  .showcase__hero,
  .showcase__text,
  .showcase__strip,
  .showcase--mirror .showcase__hero,
  .showcase--mirror .showcase__text,
  .showcase--mirror .showcase__strip{ grid-column:1; grid-row:auto; }
  .showcase__hero,
  .showcase--mirror .showcase__hero{
    aspect-ratio:3/2;
    margin-left:0; margin-right:0; margin-block:0;
    margin-inline:calc(50% - 50vw);
  }
  .showcase__text p{ max-width:none; }
  .showcase__cta{ max-width:none; }
  .showcase__cta .btn{ width:100%; }

  /* на тачскріні hover не спрацьовує — замість гармошки гортання пальцем */
  .showcase__strip,
  .showcase--mirror .showcase__strip{
    margin-inline:calc(50% - 50vw);
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .showcase__strip::-webkit-scrollbar{ display:none; }
  .showcase__strip > figure{
    flex:0 0 62%;
    height:clamp(260px, 58vw, 340px);
    scroll-snap-align:start;
  }
  .showcase__strip > figure:hover{ flex-grow:0; }
}

/* ===================== АКТИВНИЙ ВІДПОЧИНОК ===================== */

.acts{ background:var(--sage); }

.cards{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(22px, 2.6vw, 36px);
}

.card__ph{ aspect-ratio:4/3; margin-bottom:clamp(18px, 2vw, 26px); }
/* там, де замість заглушки вже стоїть справжнє фото. margin-top обнуляємо
   разом із боковими: у <figure> без класу .ph лишається браузерний
   margin:1em 40px, і картка зі знімком просідала на 17px нижче сусідніх
   заглушок — рядок заголовків роз'їжджався (знайдено 18.08 на джип-турі) */
.card__ph{ margin-block-start:0; margin-inline:0; overflow:hidden; background:var(--sage); }
.card__ph img{ display:block; width:100%; height:100%; object-fit:cover; }

.card__name{
  margin:0 0 12px;
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.5rem, 2.3vw, 2.05rem); line-height:1.12;
  color:var(--green);
}
.card p{ margin:0; }

/* ціна — короткий рядок, який має читатися окремо від опису */
.section .price-tag{
  display:block; margin-top:14px;
  font:600 16px/1.25 var(--sans);
  color:var(--green);
}
.price-tag--free{ color:var(--green); }

/* описи в картках різної довжини — ціну притискаємо донизу,
   щоб у ряду вона стояла на одній лінії */
/* Картка розваги влаштована рівно як картка номера .cat (Дарʼя 2026-08-19:
   «нам в 2 надо как в 1»): знімок на всю ширину картки, БЕЗ рамки й полів
   навколо нього, поле — тільки під текстом. На наведення підіймається вся
   картка разом із текстом, а не сам знімок. Тло прозоре (--glass), щоб
   водяний знак секції йшов крізь картку */
.card{
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--glass); border-radius:var(--radius);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
  /* нижнє поле більше за бокове (Дарʼя 2026-08-19): опис упирався в край
     картки, і рядок під текстом читався як обрізаний */
  padding-bottom:clamp(24px, 2.4vw, 34px);
}
.card:hover{ transform:translateY(-6px); box-shadow:0 18px 40px rgba(35,81,76,.14); }
/* знімок лишається на всю ширину картки, поле — тільки під текстом (як .cat__body) */
.card__name,
.card > p,
.card .price-tag{ padding-inline:clamp(18px, 1.8vw, 26px); }
/* знімок усередині більше не стрибає окремо — інакше на наведення картка й
   кадр підіймалися б удвох, кожен по-своєму. Лишається тільки плавний зум */
.card .card__ph:hover{ transform:none; box-shadow:none; z-index:auto; }
.card:hover .card__ph img{ transform:scale(1.04); }
@media (prefers-reduced-motion:reduce){
  .card:hover{ transform:none; }
}
.card .price-tag{ margin-top:auto; padding-top:14px; }

/* решта розваг: назва, рядок пояснення і ціна */
.card-rows{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  gap:clamp(16px, 1.8vw, 24px);
  margin-top:clamp(36px, 4vw, 56px);
}
.card-row{
  display:flex; flex-direction:column;
  padding:clamp(20px, 2vw, 26px);
  /* матове скло у спокої — світле молочне тло, розмиття підкладки та мʼяка тінь.
     На наведення скло стає щільнішим і картка трохи підіймається */
  /* ⚠️ brightness() тут не ставити: тло сайту — світлий крем #F6F2E9, і навіть
     1.07 виганяє його майже в чистий білий — замість скла виходить щільна
     біла плашка. У спокої молочного нальоту немає зовсім (Дарʼя 2026-08-19):
     скло тримається ЛИШЕ на розмитті підкладки й тонкому світлому краї —
     тому й водяний знак секції йде крізь картку без «шматків» */
  background:var(--glass);
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.45);
  box-shadow:0 10px 30px -18px rgba(17,33,31,.10), inset 0 1px 0 rgba(255,255,255,.4);
  -webkit-backdrop-filter:blur(18px) saturate(125%);
          backdrop-filter:blur(18px) saturate(125%);
  transition:transform .35s var(--ease), background .35s var(--ease),
             border-color .35s var(--ease), box-shadow .35s var(--ease);
}
/* наведення: скло щільнішає, глибша тінь, картка трохи підіймається */
.card-row:hover{
  transform:translateY(-4px);
  background:linear-gradient(150deg, rgba(255,255,255,.34), rgba(255,255,255,.12));
  border-color:rgba(255,255,255,.62);
  box-shadow:0 22px 44px -20px rgba(17,33,31,.24), inset 0 1px 0 rgba(255,255,255,.55);
}
@media (prefers-reduced-motion:reduce){
  .card-row{ transition:background .25s linear, box-shadow .25s linear; }
  .card-row:hover{ transform:none; }
}
.card-row__name{
  margin:0 0 8px;
  font-family:var(--serif); font-weight:400;
  font-size:1.4rem; line-height:1.2;
  color:var(--green);
}
.section .card-row p{ margin:0; font-size:14px; color:rgba(37,40,36,.72); }
/* ціна притискається донизу, щоб рядки не гуляли по висоті */
.card-row .price-tag{ margin-top:auto; padding-top:14px; }

/* блок на всю ширину під переліком розваг — дитячий майданчик */
.acts__wide{ margin-top:clamp(48px, 5vw, 80px); }
.acts__wide .price-tag{ display:inline-block; margin-top:clamp(24px, 2.6vw, 34px); }

.callout{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:20px clamp(24px, 3vw, 48px);
  margin-top:clamp(36px, 4vw, 56px);
  padding:clamp(24px, 2.6vw, 36px);
  border:1px solid rgba(35,81,76,.16); border-radius:var(--radius);
}
.callout > div{ max-width:64ch; }
.section .callout p{ margin:0; }
.callout .card__name,
.callout .dish__name{ margin-bottom:10px; }

/* та сама врізка, але залита, а не обведена — для світлих секцій */
.callout--filled{ border-color:transparent; background:var(--glass); }

.acts__foot{ margin-top:clamp(36px, 4vw, 60px); text-align:center; }

@media (max-width:1180px){
  .card-rows{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}
@media (max-width:900px){
  .cards{ grid-template-columns:1fr; gap:clamp(28px, 4vw, 40px); }
  .card__ph{ aspect-ratio:3/2; }
  .acts__foot .btn{ width:100%; }
}
@media (max-width:600px){
  .card-rows{ grid-template-columns:1fr; }
  .callout{ flex-direction:column; align-items:stretch; }
  .callout .btn{ width:100%; }
}

/* ================== ПОЯВА БЛОКІВ ПРИ ПРОКРУТЦІ ==================
   Клас .reveal ставить JS (main.js), тому без нього сторінка лишається
   повністю видимою — жодного порожнього екрана, якщо скрипт не завантажився.
   IntersectionObserver додає .visible, коли блок заходить у поле зору */
.reveal{
  opacity:0; transform:translateY(30px);
  will-change:opacity, transform;
}
/* Перехід вмикається окремим класом і тільки на наступному кадрі після того,
   як блоки отримали .reveal. Інакше вже намальований контент ПЛАВНО ГАСНЕ
   до нуля (браузер бачить зміну opacity 1→0 і анімує її), і сторінка на
   мить порожніє */
.reveal--anim{ transition:opacity .7s ease, transform .7s ease; }
.reveal.visible{ opacity:1; transform:none; }
/* спокійний режим: нічого не рухаємо */
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* ========================== INSTAGRAM ========================== */

/* світле тло розводить стрічку з формою бронювання зверху
   і контактами знизу — інакше три секції поспіль зливаються */
.ig{ background:var(--light); }

.ig__head{ margin-bottom:clamp(32px, 4vw, 52px); }

.ig__grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:clamp(10px, 1.1vw, 16px);
}

.ig__cell{
  position:relative; overflow:hidden;
  aspect-ratio:1/1;
  border-radius:var(--radius);
  background:var(--sage);
}

.ig__cell img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .6s var(--ease);
}
.ig__cell:hover img,
.ig__cell:focus-visible img{ transform:scale(1.05); }

/* затемнення з іконкою — проявляється тільки при наведенні */
.ig__cell::after{
  content:""; position:absolute; inset:0;
  background:rgba(17,33,31,.42) var(--ic-instagram) center/34px no-repeat;
  opacity:0;
  transition:opacity .35s var(--ease);
}
.ig__cell:hover::after,
.ig__cell:focus-visible::after{ opacity:1; }

.ig__cell:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

/* значок для Reels і відео — видно завжди, щоб було зрозуміло, що це ролик */
.ig__play{
  position:absolute; top:10px; right:10px; z-index:1;
  width:26px; height:26px;
  border-radius:50%;
  background:rgba(17,33,31,.55);
}
.ig__play::before{
  content:""; position:absolute; top:50%; left:52%;
  width:0; height:0;
  border-left:8px solid var(--light);
  border-top:5px solid transparent; border-bottom:5px solid transparent;
  transform:translate(-50%,-50%);
}

/* скелетон: тримає висоту сітки, поки не приїхала відповідь */
.ig__cell.is-skeleton{
  background:linear-gradient(100deg,
    var(--sage) 30%, rgba(246,242,233,.65) 50%, var(--sage) 70%) 0 0/300% 100%;
  animation:ig-shimmer 1.6s ease-in-out infinite;
}
@keyframes ig-shimmer{
  0%  { background-position:100% 0; }
  100%{ background-position:0 0; }
}

.ig__foot{ margin-top:clamp(28px, 3vw, 44px); text-align:center; }

/* API мовчить — ховаємо сітку, лишаємо заголовок і кнопку */
.ig.is-empty .ig__grid{ display:none; }

@media (max-width:900px){
  .ig__grid{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  /* у три колонки восьма плитка лишає дірку — ховаємо її */
  .ig__grid > *:nth-child(n+7){ display:none; }
}
@media (max-width:600px){
  .ig__grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .ig__grid > *:nth-child(n+7){ display:block; }
  .ig__foot .btn{ width:100%; }
}

:root{
  --ic-instagram:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFDF8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2' width='20' height='20' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.5' cy='6.5' r='1'/%3E%3C/svg%3E");
}

/* ========================= БРОНЮВАННЯ ========================= */

/* 2026-08-18. Секцію перебрано: ліворуч суцільна темна панель зі знімком,
   праворуч форма на кремі — та сама мова, що й у попапа бронювання, який з
   17.08 став основним шляхом. Було: текст ліворуч, форма праворуч на
   прозорому склі поверх водяного знака. Знак Дарʼя прибрала («заважає
   читати»), а разом із ним відпала й причина тримати форму прозорою.
   Секція йде на всю ширину, без .container — як «Проживання» й «Купелі» */

.book{ background:var(--sand-bg); padding:0; }

/* половина на половину (Дарʼя 2026-08-20: «картинку до центра як і скрізь»):
   знімок закінчується рівно на середині екрана, як у секціях «Про комплекс»,
   «Купелі та SPA» і промо SPA */
.book__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:stretch;
  min-height:min(760px, 88svh);
}

/* --- ліва панель: знімок і контакти --- */
.book__aside{ position:relative; display:flex; overflow:hidden; }

/* ЗАГЛУШКА замість знімка (18.08): фото чана Дарʼї не підійшло, чекаємо інше.
   Плашка темна навмисно — тексти на ній світлі, і коли приїде знімок, вони
   лягатимуть на таку саму темну поверхню й нічого перефарбовувати не треба.
   Коли фото буде: розкоментувати background-image і завісу, а з розмітки
   зняти data-label — підпис зникне сам */
/* 2026-08-20: замість темної плашки тут знімок басейну (Дарʼя прислала
   pool_form.webp — вертикальний кадр, рівно під високу ліву панель) */
.book__shot{
  position:absolute; inset:0;
  background:linear-gradient(160deg, #1B3A36 0%, var(--green-deep) 100%);
  background-image:url('../img/leisure/pool_form.webp');
  background-size:cover; background-position:center;
}
/* завіса під світлий текст: угорі знімок майже чистий, донизу щільна */
.book__shot::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(17,33,31,.35) 0%, rgba(17,33,31,.92) 100%);
}

.book__aside-body{
  position:relative; z-index:1; align-self:end; width:100%;
  padding:clamp(32px, 4vw, 64px);
  /* запас під підпис заглушки: на вузькому екрані панель тягнеться по вмісту,
     текст підпирає верх і напис «ТУТ БУДЕ ФОТО» лягав просто на заголовок.
     Разом зі знімком цей рядок можна прибрати — підпису вже не буде */
  padding-top:calc(clamp(32px, 4vw, 64px) + 30px);
  color:var(--light);
}
.book__title{
  margin:0 0 18px; max-width:14ch;
  font-family:var(--serif); font-weight:400;
  font-size:clamp(2rem, 3.2vw, 3.2rem); line-height:1.1;
  color:var(--light);
}
/* специфічність під `.section p` і `.section li` — інакше глобальний темний
   колір тексту переб'є світлий і напис зникне на темній панелі */
.section .book__text{
  margin:0 0 28px; max-width:38ch;
  font-size:16px; line-height:1.65; color:rgba(246,242,233,.82);
}

.book__notes{ display:grid; gap:10px; margin:0 0 32px; padding:0; list-style:none; }
.section .book__notes li{
  position:relative; padding-left:24px;
  font-size:15px; line-height:1.55; color:rgba(246,242,233,.78);
}
.book__notes li::before{
  content:""; position:absolute; left:0; top:9px;
  width:8px; height:8px;
  background:var(--sand);
}
/* месенджери стоять на темному — рамка й текст кремові, як у попапі */
.book__aside .messenger{ border-color:rgba(246,242,233,.46); color:var(--light); }
.book__aside .messenger:hover{
  border-color:var(--sand); background:var(--sand); color:var(--green-deep);
}
.book__aside .messenger:focus-visible{ outline:2px solid var(--sand); outline-offset:3px; }

/* --- права колонка: форма на кремі --- */
.book__main{
  display:flex; align-items:center; justify-content:center;
  padding:clamp(40px, 5vw, 88px) clamp(24px, 3.5vw, 64px);
}
/* Форма — матове скло, той самий рецепт, що в .card-row: розмиття підкладки,
   тонкий світлий край і мʼяка тінь. Вужча за колонку (Дарʼя 2026-08-20:
   «сама форма більш зібрана, зараз надто широка, як розмазана») */
.book__form{
  width:100%; max-width:460px; margin:0 auto;
  padding:clamp(24px, 2.6vw, 40px);
  background:var(--glass);
  border:1px solid rgba(255,255,255,.45);
  border-radius:var(--radius);
  box-shadow:0 10px 30px -18px rgba(17,33,31,.10), inset 0 1px 0 rgba(255,255,255,.4);
  -webkit-backdrop-filter:blur(18px) saturate(125%);
          backdrop-filter:blur(18px) saturate(125%);
}
/* у вужчій формі двоколонковий ряд тісний — імʼя й телефон стають одне під одним */
.book__form .book__row{ grid-template-columns:1fr; gap:0; }
.book__form .book__row .field{ margin-bottom:18px; }

/* пастка для ботів прибрана з потоку, але лишається в DOM */
.book__trap{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.book__row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.book__row--three{ grid-template-columns:1.3fr 1fr 1fr; }

.field{ display:grid; gap:8px; margin-bottom:18px; }
.book__row .field{ margin-bottom:0; }
.book__row + .field,
.book__row + .book__row{ margin-top:18px; }

.field__label{
  font:500 14px/1.3 var(--sans);
  color:rgba(35,81,76,.75);
}

.field__input{
  width:100%; height:var(--control-h);
  padding:0 16px;
  font:400 16px/1 var(--sans); color:var(--ink);
  /* поле теж скло: інакше сім прямокутників форми різали б водяний знак
     замість однієї панелі. Видно його по межі, а не по заливці — див. нижче */
  background:var(--glass);
  /* Межа помітна САМА: після зведення всіх світлих поверхонь до Warm Cream
     (2026-08-13) поле більше не відрізняється від панелі власним тлом, тому
     єдине, що показує «сюди можна писати», — рамка. .62 дає рівно 3:1 на
     кремовому, як і треба для меж елементів керування. Слабшати їй не можна:
     на .16 поля бронювання ставали невидимими. */
  border:1px solid rgba(35,81,76,.62); border-radius:var(--radius);
  transition:border-color .25s var(--ease), background-color .25s var(--ease);
}
.field__input::placeholder{ color:rgba(37,40,36,.38); }
.field__input:hover{ border-color:rgba(35,81,76,.8); }
.field__input:focus{
  outline:none;
  background:var(--light);
  border-color:var(--accent);
}
/* підсвічуємо помилку тільки після спроби відправити */
.book__form.is-checked .field__input:invalid{ border-color:var(--accent); }

.field__input--area{
  height:auto; padding:14px 16px;
  line-height:1.6; resize:vertical;
}

.book__submit{ width:100%; margin-top:8px; }

.book__status{
  margin:16px 0 0;
  font-size:15px; text-align:center;
  color:var(--green);
}
.book__status:empty{ display:none; }
.book__status.is-error{ color:var(--accent-d); }

/* після успішної відправки лишаємо тільки подяку */
.book__form.is-sent .book__row,
.book__form.is-sent .field,
.book__form.is-sent .book__submit{ display:none; }
.book__form.is-sent .book__status{ margin:0; font-size:17px; }

@media (max-width:900px){
  .book__grid{ grid-template-columns:1fr; min-height:0; }
  /* панель мусить лишитися помітною смугою, інакше на вузькому екрані від неї
     лишається кілька сантиметрів і сенс великого знімка зникає */
  .book__aside{ min-height:420px; }
}
@media (max-width:600px){
  .book__row,
  .book__row--three{ grid-template-columns:1fr; gap:0; }
  .book__row .field{ margin-bottom:18px; }
}

/* ========================== КОНТАКТИ ========================== */

.contacts__grid{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(28px, 4vw, 64px);
  align-items:start;
}

.contacts__list{ display:grid; gap:26px; }

.contacts__item{ display:flex; align-items:flex-start; gap:16px; }

/* іконки — маска по currentColor, як у телефона в шапці */
.contacts__ic{
  width:20px; height:20px; flex:none; margin-top:3px;
  background:var(--green);
}
.contacts__ic--pin{
  -webkit-mask:var(--ic-pin) center/contain no-repeat;
          mask:var(--ic-pin) center/contain no-repeat;
}
.contacts__ic--phone{
  -webkit-mask:var(--ic-phone) center/contain no-repeat;
          mask:var(--ic-phone) center/contain no-repeat;
}
.contacts__ic--mail{
  -webkit-mask:var(--ic-mail) center/contain no-repeat;
          mask:var(--ic-mail) center/contain no-repeat;
}
.contacts__ic--clock{
  -webkit-mask:var(--ic-clock) center/contain no-repeat;
          mask:var(--ic-clock) center/contain no-repeat;
}
.contacts__ic--car{
  -webkit-mask:var(--ic-car) center/contain no-repeat;
          mask:var(--ic-car) center/contain no-repeat;
}

.contacts__label{
  margin:0 0 6px;
  font:500 14px/1.3 var(--sans);
  color:rgba(35,81,76,.62);
}
/* специфічність під `.section p` */
.section .contacts__value{ margin:0; }
.contacts__value a{ transition:color .25s var(--ease); }
.contacts__value a:hover{ color:var(--accent); }

.contacts__actions{
  display:flex; flex-wrap:wrap; gap:12px;
  margin-top:clamp(28px, 3vw, 40px);
}

/* ---- карта: до кліку — плашка, після — врізка Google ---- */

.map{ position:relative; }

.map__load{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  width:100%; aspect-ratio:16/11;
  padding:24px; text-align:center;
  border-radius:var(--radius);
  /* та сама фактура, що й у заглушок фото — карта не випадає зі стилістики */
  background:
    repeating-linear-gradient(45deg, transparent 0 10px, rgba(35,81,76,.045) 10px 11px),
    linear-gradient(140deg, rgba(150,173,144,.5), rgba(35,81,76,.12)),
    var(--sage);
  transition:box-shadow .3s var(--ease);
}
.map__load:hover{ box-shadow:inset 0 0 0 1px rgba(35,81,76,.28); }
.map__load:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

.map__pin{
  width:34px; height:34px;
  background:var(--green);
  -webkit-mask:var(--ic-pin) center/contain no-repeat;
          mask:var(--ic-pin) center/contain no-repeat;
}
.map__place{
  font-family:var(--serif); font-size:clamp(1.35rem, 2.2vw, 1.8rem); line-height:1.2;
  color:var(--green);
}
.map__hint{
  font:500 14px/1.3 var(--sans);
  color:rgba(37,40,36,.62);
}

/* врізку Google вставляє скрипт і тільки за наявності згоди на куки (див.
   «ЗГОДА НА КУКИ» в кінці файла). Плашка вище знову в ділі: вона стоїть на
   місці карти, доки згоди немає або доки в ній відмовлено */
.map__frame{
  width:100%; aspect-ratio:16/11;
  border:0; border-radius:var(--radius);
  display:block;
}

/* Маршрут і Waze. Стояли під врізкою карти, з 2026-08-18 живуть у лівій
   колонці під адресою: під картою вони читалися як її підпис, а не як дія.
   Відступ менший за колишні 16px — рядок належить адресі, а не блоку */
.contacts__routes{ display:flex; flex-wrap:wrap; gap:24px; }
/* Відступ мусить стояти під `.section`, інакше `.section p{margin:0 0 20px}`
   перебиває його специфічністю й margin-top обнуляється. Саме через це під
   картою рядок і злипався з нею: заявлені 16px не діяли жодного дня */
.section .contacts__routes{ margin:16px 0 0; }
/* без лінії під написом — Дарʼя 2026-08-17 прибрала такі підкреслення
   в усіх посиланнях: тримаємося кольору й наведення */
.contacts__routes a{
  font:600 12px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase;
  color:var(--green);
  transition:color .25s var(--ease);
}
.contacts__routes a:hover{ color:var(--accent-d); }
.contacts__routes a:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

@media (max-width:900px){
  .contacts__grid{ grid-template-columns:1fr; }
  .map__load,
  .map__frame{ aspect-ratio:4/3; }
}
@media (max-width:600px){
  .contacts__actions .btn{ width:100%; }
}

/* =========================== ПІДВАЛ ===========================
   Перезібраний 2026-08-21 за референсом Дар’ї. Схема: верхня
   смуга (герб — гасло — дія), тонкий роздільник із ромбом, три
   колонки з медальонами, правовий рядок і копірайт.

   Кольори — тільки з нашої системи: тло --green-deep, текст --light,
   акцент --sand. Знімок footer.webp лягає під них і гасне під
   завісою: без неї світлий текст на небі й тумані сипався б. */

.footer{
  position:relative; isolation:isolate;
  background:var(--green-deep);
  color:var(--light);
  padding:clamp(48px, 5vw, 72px) 0 28px;
}

/* Сам знімок. Притискаємо до НИЗУ: на кадрі гори й ліс у нижній
   третині, верх — рівне небо, тож текст верхньої смуги стоїть
   на спокійному тлі */
.footer::before{
  content:""; position:absolute; inset:0; z-index:-2; pointer-events:none;
  background:url("../img/footer.webp") center bottom/cover no-repeat;
}
/* Завіса — ЛЕГКА, і це підраховано, а не на око. Сам знімок
   дуже темний: найсвітліша його ділянка (туман між хребтами) —
   всього (50,63,52), тобто світлий текст дає на ній 9,9:1 і без
   будь-якої завіси. Щільна завіса тут нічого не рятує, зате
   закрашує гори в рівну плашку — знімка просто не видно.
   Тримаємо мінімум: трохи щільніше згори (там гасло й герб)
   і знизу (копірайт), легше в середині. Найгірша точка після
   цього: світлий текст 11,2:1, пісочний 6,4:1 — обидва з запасом */
.footer::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(to bottom, rgba(17,33,31,.46) 0%, rgba(17,33,31,.26) 40%, rgba(17,33,31,.44) 100%);
}

/* ------------------------- верхня смуга ------------------------- */
/* 1fr auto 1fr, а не auto 1fr auto: при «auto» крайні колонки виходять
   різної ширини (герб ширший за кнопку) і гасло зсувається вбік
   від середини підвала. Рівні крайні частки тримають його рівно по центру */
.footer__top{
  display:grid; grid-template-columns:1fr auto 1fr;
  align-items:center; gap:clamp(24px, 3vw, 48px);
}

/* герб — готова плашка з рамкою, та сама, що в шапці на світлому.
   Ширина самого посилання обмежена: інакше воно тягнеться на всю
   колонку й ловить кліки там, де зображення вже немає */
.footer__plaque{ display:block; justify-self:start; width:min(100%, 250px); line-height:0; }
.footer__plaque img{ width:100%; height:auto; }

.footer__slogan{
  margin:0; text-align:center;
  font-family:var(--serif);
  font-size:clamp(1.5rem, 2.6vw, 2.4rem); line-height:1.25;
  color:var(--light);
}
/* другий рядок трохи дрібніший — як на референсі */
.footer__slogan span{ display:block; font-size:.82em; }

.footer__act{ display:grid; justify-self:end; justify-items:center; gap:14px; }

/* гірський гребінь над кнопкою */
.footer__peaks{
  /* пропорція малюнка 3:1; 96px, як у старих трикутників, для цього контуру
     замало — тонкі штрихи зливалися */
  width:132px; height:44px;
  background:var(--sand);
  -webkit-mask:var(--ic-peaks) center/contain no-repeat;
          mask:var(--ic-peaks) center/contain no-repeat;
}

/* ---------------------- роздільник із ромбом ---------------------- */
/* Знак-монограма — той самий, що в маркерах списків (.spa2__list li::before),
   тому він читається як родний для сайту */
.footer__rule{
  display:flex; align-items:center; gap:18px;
  margin:clamp(28px, 3.5vw, 44px) 0 clamp(36px, 4vw, 56px);
}
.footer__rule::before,
.footer__rule::after{
  content:""; flex:1; height:1px;
  background:rgba(246,242,233,.18);
}
.footer__rhomb{
  width:17px; height:20px; flex:none;
  background:var(--mark) center/contain no-repeat;
}

/* --------------------------- три колонки --------------------------- */
.footer__grid{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(32px, 4vw, 64px);
}

/* Заголовок колонки = медальйон + капс. Кругла рамка — єдине
   місце на сайті зі скругленням: так на референсі, і медальйон
   читається як ознака, а не як кнопка */
.footer__title{
  display:flex; align-items:center; gap:14px;
  margin:0 0 24px;
  font:600 15px/1.3 var(--sans); letter-spacing:.14em; text-transform:uppercase;
  color:var(--sand);
}
.footer__medal{
  flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px;
  border:1px solid rgba(220,180,112,.55); border-radius:50%;
}
.footer__medal::before{
  content:""; width:21px; height:21px; background:var(--sand);
}
.footer__medal--house::before{
  -webkit-mask:var(--ic-house) center/contain no-repeat;
          mask:var(--ic-house) center/contain no-repeat;
}
.footer__medal--phone::before{
  -webkit-mask:var(--ic-phone) center/contain no-repeat;
          mask:var(--ic-phone) center/contain no-repeat;
}
.footer__medal--clock::before{
  -webkit-mask:var(--ic-clock) center/contain no-repeat;
          mask:var(--ic-clock) center/contain no-repeat;
}

.footer__links{ display:grid; gap:14px; font-size:16px; font-weight:500; }
.footer__links a{ transition:color .25s var(--ease); }
.footer__links a:hover{ color:var(--sand); }

/* шеврон перед пунктом навігації — дві межі, повернуті на 45° */
.footer__links--arrow li{ position:relative; padding-left:26px; }
.footer__links--arrow li::before{
  content:""; position:absolute; left:2px; top:.42em;
  width:6px; height:6px;
  border-top:1.5px solid var(--sand); border-right:1.5px solid var(--sand);
  transform:rotate(45deg);
}

/* контакти: рядок = іконка + значення */
.footer__contacts{ display:grid; gap:16px; font-size:16px; font-weight:500; }
.footer__contacts li{ display:flex; align-items:center; gap:14px; }
.footer__contacts a{ transition:color .25s var(--ease); }
.footer__contacts a:hover{ color:var(--sand); }

.footer__ic{
  flex:none; width:18px; height:18px; background:var(--sand);
}
.footer__ic--phone{
  -webkit-mask:var(--ic-phone) center/contain no-repeat;
          mask:var(--ic-phone) center/contain no-repeat;
}
.footer__ic--pin{
  -webkit-mask:var(--ic-pin) center/contain no-repeat;
          mask:var(--ic-pin) center/contain no-repeat;
}

/* години роботи: рядки розділені тонкою лінією, як на референсі */
.footer__hours{ display:grid; font-size:16px; color:rgba(246,242,233,.88); }
.footer__hours li{ padding:14px 0; border-bottom:1px solid rgba(246,242,233,.14); }
.footer__hours li:first-child{ padding-top:0; }
.footer__hours li:last-child{ border-bottom:0; padding-bottom:0; }

.footer__social{ display:flex; gap:12px; margin-top:26px; }

.soc{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px;
  border:1px solid rgba(246,242,233,.42);
  transition:border-color .25s var(--ease), background-color .25s var(--ease);
}
.soc:hover{ border-color:var(--sand); background:rgba(246,242,233,.08); }
.soc:focus-visible{ outline:2px solid var(--sand); outline-offset:3px; }

.soc__ic{ width:19px; height:19px; background:var(--light); }
.soc__ic--ig{
  -webkit-mask:var(--ic-instagram) center/contain no-repeat;
          mask:var(--ic-instagram) center/contain no-repeat;
}
.soc__ic--fb{
  -webkit-mask:var(--ic-facebook) center/contain no-repeat;
          mask:var(--ic-facebook) center/contain no-repeat;
}

/* Головна дія — кремова плашка: зелена заливка на цьому тлі
   дає 1,24:1 і кнопка просто зникає */
.footer .btn--primary{
  background:var(--light); border-color:var(--light); color:var(--green);
  --btn-fill:var(--green);
}
.footer .btn--primary:hover{ border-color:var(--green); color:var(--light); }

/* ------------------------- нижні рядки ------------------------- */
/* Правовий рядок. Кнопка налаштувань cookie стоїть саме тут:
   за GDPR відкликати згоду має бути не важче, ніж її дати */
.footer__legal{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:10px 0;
  margin-top:clamp(40px, 4.5vw, 64px);
  padding-top:24px;
  border-top:1px solid rgba(246,242,233,.16);
}
.footer__legal a,
.footer__legal button{
  padding:0 22px;
  font:400 14px/1.5 var(--sans);
  color:rgba(246,242,233,.85);
  transition:color .25s var(--ease);
}
/* знак між пунктами — той самий, що в роздільнику вище */
.footer__legal > * + *{ position:relative; }
.footer__legal > * + *::before{
  content:""; position:absolute; left:-6px; top:50%;
  width:10px; height:12px; margin-top:-6px;
  background:var(--mark) center/contain no-repeat;
  opacity:.75;
}
.footer__legal a:hover,
.footer__legal button:hover{ color:var(--sand); }
.footer__legal a:focus-visible,
.footer__legal button:focus-visible{ outline:2px solid var(--sand); outline-offset:3px; }

.footer__bottom{
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center;
  gap:8px 24px;
  margin-top:24px;
}
.footer__bottom p{
  display:flex; align-items:center; gap:10px;
  margin:0;
  font-size:14px; color:rgba(246,242,233,.85);
}

@media (max-width:1100px){
  .footer__top{ grid-template-columns:1fr; justify-items:center; text-align:center; }
  .footer__plaque,
  .footer__act{ justify-self:center; }
  .footer__grid{ grid-template-columns:1fr 1fr; }
  .footer__grid > :last-child{ grid-column:1 / -1; }
}
@media (max-width:700px){
  .footer__grid{ grid-template-columns:1fr; gap:36px; }
  .footer__grid > :last-child{ grid-column:auto; }
  .footer__legal{ flex-direction:column; gap:12px; }
  /* у стовпчику ромби-роздільники зайві */
  .footer__legal > * + *::before{ display:none; }
  .footer__bottom{ flex-direction:column; align-items:flex-start; }
  /* кнопка на всю ширину, як у всіх дій на телефоні. Самого width:100%
     мало: у .footer__act стоїть justify-items:center, і елемент стискається
     до вмісту — тому тут ж розтягуємо саму комірку */
  .footer__act{ justify-self:stretch; justify-items:stretch; }
  .footer__peaks{ justify-self:center; }
  .footer .btn--primary{ width:100%; }
}

/* ==================== ВНУТРІШНЯ СТОРІНКА ==================== */

/* активний пункт меню — тільки на внутрішніх сторінках. Логіка та сама, що в
   .actions__link.is-current: поверх прозорої шапки — пісочний Earth Sand
   (4,1:1 на темному знімку), на кремовій — підкреслення, бо кольором поточний
   пункт від решти вже не відрізнити */
.nav a.is-current{ color:var(--sand); }
.header.is-solid .nav a.is-current{
  color:var(--green);
}

/* Шапка внутрішньої сторінки. Знімок під заголовком підставляється змінною
   --hero-img просто в розмітці секції, тому правило одне на всі сторінки:
   .page-hero style="--hero-img:url('assets/img/...')"
   Без змінної секція лишається рівною сажевою плашкою, як була.
   Головна сюди не входить — там свій .hero з відео. */
/* На весь екран, як Hero головної. У шапці лишається САМЕ заголовок:
   крихти прибрані зовсім, анонс поїхав нижче, у .page-intro (рішення Дарʼї
   2026-08-13). Знімок ЗАТЕМНЮЄМО, а не висвітлюємо, текст світлий — так само,
   як на головній: на світлому приглушеному фото темний текст читався погано */
.page-hero{
  /* Просвіт під заголовком тримаємо ДВОМА частинами, а не одним полем секції:
     на портреті (.page-hero--mobshot) поле секції знімається, а --hero-gap
     лишається, інакше заголовок ліг би впритул до краю знімка */
  --hero-gap:clamp(40px, 7vh, 90px);
  --hero-bottom:calc(var(--header-h) + var(--hero-gap));
  position:relative; isolation:isolate; overflow:hidden;
  min-height:100svh;
  /* Заголовок стоїть УНИЗУ екрана (Дарʼя 2026-08-18, референс — шапка
     contacts.html). До 2026-08-17 він був притиснутий до низу знімка, далі
     півдня простояв рівно по центру — тепер низ повернувся, але вже однаково
     на всіх внутрішніх сторінках, а не лише на контактах.
     Просвіт під заголовком складається з двох частин: поле секції --header-h
     (те саме, що зверху під прозору шапку) і відступ контейнера нижче.
     Разом це --hero-bottom — стільки ж місця під заголовком лишають і ті
     шапки, у яких низ уже зайнятий (rooms.html, spa.html) */
  display:flex; align-items:flex-end;
  padding:var(--header-h) 0;
  background:var(--green-deep);
  color:var(--light);
  text-align:center;
}

.page-hero > .container{ transform:none; padding-bottom:var(--hero-gap); }

/* саме фото: на повну, трохи знебарвлене — приглушує його вже затемнення нижче */
.page-hero::before{
  content:""; position:absolute; inset:0; z-index:-2; pointer-events:none;
  background-image:var(--hero-img, none);
  background-size:cover;
  background-position:var(--hero-pos, center);
  filter:saturate(.72);
}

/* Відео у шапці внутрішньої сторінки (spa.html, 2026-08-21).
   Живий шар лягає рівно туди ж, де ::before зі знімком: той самий z-index,
   але елемент іде після псевдоелемента в дереві, тому малюється поверх нього.
   Знімок із --hero-img лишається запасним кадром — його видно, поки відео
   вантажиться, якщо файлу немає взагалі й у спокійному режимі.
   Затемнення ::after працює далі без змін. */
.page-hero__media{ position:absolute; inset:0; z-index:-2; pointer-events:none; }
.page-hero__video{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
  /* те саме приглушення, що й у фотошапки, аби кадр не сварився з текстом */
  filter:saturate(.72);
}
/* спокійний режим: рух прибираємо зовсім, лишається фото з --hero-img */
@media (prefers-reduced-motion:reduce){
  .page-hero__media{ display:none; }
}

/* Затемнення — те саме, що на Hero головної, щоб обидві шапки читалися однаково:
   зверху смуга під прозору шапку, знизу — під заголовок, радіальна тінь збирає
   увагу до центру. Знімок під ним лишається впізнаваним, але не свариться
   зі світлим текстом. Без знімка це просто брендовий темно-зелений екран */
.page-hero::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    /* трохи щільніше за головну: там під шапкою відео, тут — денне фото.
       Альфи перераховані разом із Hero: тон темніший, тому число менше */
    linear-gradient(to bottom, rgba(17,33,31,.62) 0%, rgba(17,33,31,0) 32%),
    /* Нижній край доводимо до ЧИСТОГО --green-deep, а не до .82: інакше крізь
       нього просвічує фото, наступна секція йде рівним кольором, і на стику
       видно смугу. Тепер останній рядок шапки збігається з нею піксель у піксель
       (важливо для about.html, де далі темна секція з картою) */
    linear-gradient(to top,
      rgba(17,33,31,1)   0%,
      rgba(17,33,31,.48) 13%,
      rgba(17,33,31,.06) 58%),
    radial-gradient(120% 80% at 50% 55%, rgba(17,33,31,.42) 0%, rgba(17,33,31,.52) 100%);
}

/* Вертикальний кадр для портретних екранів (contacts.html, 2026-08-18).
   Знімок 3:2 у вузьку шапку заходить лише кропом по боках, а тоді від
   «Ужанські купелі» лишається «ькі Ку». Тому на портреті беремо окремий
   файл --hero-img-mob і вписуємо його ПО ШИРИНІ: вивіска видна цілком.
   Нижче знімок гасне в --green-deep — це зроблено всередині файлу, тому
   стик збігається з краєм фото на будь-якій ширині екрана (у CSS частку
   висоти знімка не порахувати: вона залежить від ширини).
   Шапка тут не на весь екран, інакше під фото лишалася б порожня третина:
   висота = сам знімок (66.67vw при 3:2) + поле під заголовок. */
@media (max-aspect-ratio:4/5){
  /* нижнє поле --header-h тут зайве: воно тримає центрування на десктопі,
     а на портреті заголовок і так стоїть унизу — з ним він притискався
     впритул до краю знімка */
  .page-hero--mobshot{ min-height:calc(66.67vw + 190px); padding-bottom:0; }
  .page-hero--mobshot::before{
    background-image:var(--hero-img-mob, var(--hero-img, none));
    background-size:100% auto;
    background-position:center top;
    background-repeat:no-repeat;
  }
}

/* ---- смуга під шапкою: анонс сторінки ---- */
.page-intro{ padding:clamp(30px, 4vw, 54px) 0 0; }
/* коли в смузі стоїть великий заголовок (restaurant.html), даємо йому повітря
   згори й знизу — на тісних відступах він виглядав зажатим (Дарʼя 2026-08-17).
   Скоуп через :has, щоб на інших сторінках із лідом смуга лишалась як була */
.page-intro:has(.page-intro__title){ padding:clamp(48px, 6vw, 80px) 0 clamp(20px, 2.6vw, 34px); }
.page-intro__lead{ margin:0; max-width:70ch; }
/* на restaurant.html у цій смузі стоїть не лід, а заголовок секції.
   По центру — як усі заголовки секцій на сайті (.section__head), і тим самим
   спільним кеглем .section__title (Дарʼя просила зрівняти з рештою, 2026-08-17).
   Нижній відступ .section__title тут зайвий — його тримає сама смуга */
.page-intro__title{
  margin:0 auto;
  /* межа в em, а не в ch: фраза «Смак Закарпаття у кожній страві» у Yeseva One
     має ширину 17,5em, тож 19em тримає її одним рядком на будь-якому кеглі,
     а на вузьких екранах ширину однаково обмежує контейнер */
  max-width:19em;
  text-align:center;
}
/* далі одразу перша секція, тому її верхнє поле тут зайве */
.page-intro + .section{ padding-top:clamp(30px, 3.4vw, 52px); }
.page-intro + .page-jump{ padding-top:clamp(22px, 2.6vw, 34px); }

/* НЕ ВИКОРИСТОВУЄТЬСЯ з 2026-08-13: Дарʼя прибрала хлібні крихти з усіх
   сторінок. Правила лишені на випадок повернення — новим блокам не давати */
.crumbs{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  margin-bottom:22px;
  font:500 14px/1.3 var(--sans);
  color:rgba(35,81,76,.6);
}
.crumbs a{ transition:color .25s var(--ease); }
.crumbs a:hover{ color:var(--accent); }

/* Кегль навмисно великий: заголовок — єдине, що є на першому екрані, і має
   читатися як вивіска, а не як звичайний h1 (Дарʼя 2026-08-17).
   Довгі назви («Стандарт плюс, двокімнатний») спокійно перетікають у два
   рядки — line-height нижче одиниці тримає їх однією плитою.
   Якщо на якійсь сторінці треба тихіше, кегль правиться однією змінною
   просто в розмітці: <section class="page-hero" style="--hero-title:6rem"> */
.page-hero__title{
  margin:0;
  font-family:var(--serif); font-weight:400;
  /* Нижня межа рахована, а не на око: найширше слово в назвах сторінок —
     «двокімнатний» (room-standart-plus), у Yeseva One це 7.46em. На 320px
     під текст лишається 280px, отже кегль не може бути більшим за 37.5px.
     Беремо 2.3rem = 36.8px. Вище 460px керує вже 8vw, тож підлога
     впливає тільки на найвужчі екрани.
     Стелю 2026-08-18 знижено з 8.5rem до 6.5rem (Дарʼя): заголовок стоїть
     унизу, і на широких екранах 136px читалися вже не вивіскою, а плитою */
  font-size:var(--hero-title, clamp(2.3rem, 8vw, 6.5rem));
  line-height:.96; letter-spacing:.01em;
  text-wrap:balance;
  color:var(--light);
}

/* Рядок годин роботи під заголовком — низ шапки, як на референсі.
   Поза потоком: місце під нього заголовку віддає .page-hero--hours нижче.
   Підпис приглушений, самі години світлі: читається пара «що — коли» */
.page-hero__hours{
  position:absolute; z-index:1; left:0; right:0;
  bottom:clamp(28px, 4vw, 56px);
  margin:0; padding:0 var(--gutter);
  font:500 clamp(12px, 1.05vw, 15px)/1.6 var(--sans);
  letter-spacing:.14em; text-transform:uppercase;
  color:rgba(246,242,233,.62);
}
/* самі години — світлі, підпис лишається приглушеним */
.page-hero__hours b{ font-weight:500; color:var(--light); }
/* Шапка, у якої низ зайнятий рядком годин (spa.html). Заголовок так само
   притиснутий до низу, але просвіт міряємо не до краю шапки, а до самого
   рядка годин: під заголовок віддаємо його висоту (кегль × line-height 1.6)
   і його власний відступ знизу, а вже над ними лишаємо --hero-gap. Разом
   просвіт від заголовка до годин дорівнює --hero-bottom — тобто такий самий,
   як від заголовка до низу шапки на решті сторінок (Дарʼя 2026-08-18).
   Три clamp() тут навмисно повторюють значення .page-hero__hours: міняти
   кегль або відступ годин — міняти й тут */
.page-hero--hours{
  /* висота самого рядка: кегль × line-height 1.6 з .page-hero__hours */
  --hero-hours-h:calc(clamp(12px, 1.05vw, 15px) * 1.6);
}
.page-hero--hours > .container{
  padding-bottom:calc(var(--hero-gap) + clamp(28px, 4vw, 56px) + var(--hero-hours-h));
}

/* на телефоні два проміжки часу в рядок не лізуть — крапка з комою відпадає
   разом із переносом, тому просто ховаємо роздільник */
@media (max-width:560px){
  .page-hero__hours{ letter-spacing:.1em; }
  .page-hero__hours i{ display:block; font-style:normal; font-size:0; height:2px; }
  /* рядок став двоповерховим — стільки ж місця під нього віддає й заголовок,
     інакше просвіт до годин виходить меншим за --hero-bottom */
  .page-hero--hours{ --hero-hours-h:calc(clamp(12px, 1.05vw, 15px) * 3.2 + 2px); }
}

/* ==================== КАРТА ТЕРИТОРІЇ (about.html) ====================
   Аерознімок і контури будівель лежать в одному <svg> з viewBox
   0 0 1536 1024 (натуральний розмір знімка), тому контури не з'їжджають
   із будівель на жодній ширині екрана.

   Три шари хмар ідуть поверх знімка з різною швидкістю — це декор,
   кліки крізь них проходять (pointer-events:none).

   Кольори — наявні токени. Акцент, як і скрізь, живе тільки на
   інтерактиві: фільтри, кнопка в картці, обведення фокуса.
   ==================================================================== */

/* карта доходить до кінця блоку: знизу не має світитися зелене тло */
/* Заголовок сидить вище, ніж в інших секціях: під ним не текст, а знімок
   із хмарами, і зайве повітря зверху читалося як провал (Дарʼя показала
   стрілкою, наскільки підняти) */
/* Повітря над заголовком навмисно щедре: секція темна й одразу під шапкою
   сторінки, і на попередніх відступах (36-68px) заголовок читався приплюснутим
   до верхньої кромки — Дарʼя 2026-08-15 */
.rmap{ padding-top:clamp(64px, 7vw, 120px); padding-bottom:0; }

/* тло блоку — той самий тон, що у підвалі (--sage-deep), а не брендовий
   темно-зелений: так карта з хмарами стикується з низом сторінки */
/* 2026-08-17: разом із підвалом переведено з --sage-deep на майже чорний,
   інакше секція карти лишалася єдиним місцем зі старим сіро-зеленим тлом.
   Розтушовка верху знімка (SVG-градієнт rmapTopFade в about.html) залита
   ТИМ САМИМ значенням — міняти обидва місця разом */
.section--dark.rmap{ background:var(--green-deep); }

/* Стик із шапкою сторінки. Хмари лежать вище за верхній край секції, а секція
   їх обрізає (overflow:hidden) — виходила різка горизонтальна смуга: над лінією
   хмар немає, під лінією вони одразу на повну. Власна маска хмари тут не
   допомагає: вона рахується в її ж коробці, а не від краю секції.
   Тому кладемо поверх хмар (z:5, під заголовком z:6) шар кольору секції, який
   тане донизу — зріз ховається, хмари проступають поступово.
   Висота смуги — єдине число, яким це регулюється */
.rmap::before{
  content:""; position:absolute; z-index:5; pointer-events:none;
  inset:0 0 auto; height:200px;
  background:linear-gradient(to bottom,
    var(--green-deep) 0%,
    rgba(17,33,31,.92) 22%,
    rgba(17,33,31,0) 100%);
}

/* Повітря під лідом. Карта йде від краю до краю екрана, її мітки починаються
   майже від верхньої кромки кадру — тому загального відступу секції тут мало,
   текст і карта злипалися (Дарʼя, 2026-08-16: «так сильно наляписто»).
   Було clamp(44px, 5vw, 76px) */
.rmap .section__head{ margin-bottom:clamp(64px, 8vw, 128px); }

/* Хмари лежать на рівні секції (z 2..4), тому кадру й заголовку потрібен
   явний порядок: кадр під хмарами, текст над ними.
   Селектор із батьком обовʼязковий — у файлі вже є `.section > .container`
   з z-index:1, і односкладовий `.rmap__head` йому програє */
.rmap__frame{ z-index:1; }
.rmap > .rmap__head{ position:relative; z-index:6; }

/* Заголовок і фільтри проступають разом зі сценою.
   Ховаємо їх ТІЛЬКИ коли скрипт живий і сам додав .rmap--anim:
   інакше зламаний ефект сховав би від людини всю карту */
/* 2026-08-16: .8s → 1.2s. На швидкому прокручуванні заголовок спалахував
   майже миттєво — Дарʼя: «анимация появления текстов очень быстрая» */
.rmap--anim .rmap__head{
  opacity:0; transform:translateY(18px);
  transition:opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.rmap--anim.is-in .rmap__head{ opacity:1; transform:none; }

/* ---------------------------- сцена ---------------------------- */

.rmap__stage{ position:relative; }

/* Кадр тримає пропорції знімка — висота відома до завантаження,
   тому секція не стрибає (CLS = 0).
   УВАГА: співвідношення нижче має збігатися з viewBox у JS.
   Мобільний кадр — data-rmap-viewbox-mobile у розмітці about.html */
/* карта йде від краю до краю екрана — без полів і без обмеження контейнера */
.rmap__frame{
  position:relative;
  width:100%;
  aspect-ratio:1536 / 1160;
  overflow:hidden;
  border-radius:var(--radius);
  /* той самий тон, що у секції: інакше на верхньому краї кадру видно рівну
     горизонтальну лінію — стик двох різних темних заливок.
     2026-08-17 переїхав слідом за секцією на --green-deep */
  background:var(--green-deep);
}
.rmap--anim .rmap__frame{ opacity:0; transition:opacity 1.4s var(--ease); }
.rmap--anim.is-in .rmap__frame{ opacity:1; }

/* сцену рухає JS (паралакс) — CSS сюди transform не пише, щоб не битися */
/* М'який в'їзд у знімок: верхній край не обрізається лінійкою, а розчиняється
   у тлі секції. Лежить над хмарами (z-index 5), щоб розмивалася вся сцена
   разом, інакше хмари продовжували б різати край.

   Смуга навмисно дуже вузька і швидко сходить нанівець: найвища табличка
   (баня) стоїть на 7% висоти знімка, і будь-який довший градієнт її гасить.
   Завдання смуги — прибрати рівну лінію на самому краю, а не затемнювати
   верх кадру */

/* Розмиття верхньої кромки знімка живе всередині svg (див. about.html):
   CSS-маска тут не годиться — вона рахується до трансформації, і при
   збільшенні сцени розтушовка йде повз фотографію */
/* Сцена стоїть нерухомо, край до краю кадру: паралакс несуть лише хмари.
   Будь-який зум обрізав би її по краях, а разом із ними — і розтушовку
   верхньої кромки, яка живе в координатах знімка */
.rmap__scene{ position:absolute; inset:0; z-index:1; }
.rmap__svg{ display:block; width:100%; height:100%; }
.rmap__photo{ pointer-events:none; }

/* --------------------------- зони --------------------------- */

/* тінь відриває табличку від світлої хмари під нею */
.rmap__zone{
  cursor:pointer;
  transition:opacity .3s var(--ease);
  filter:drop-shadow(0 1px 4px rgba(16,33,14,.55));
}

/* Будівлю не обводимо взагалі: полігон — лише область наведення.
   Обʼєкт показує ромбик, а назва живе в овалі поруч */
.rmap__shape{ fill:transparent; stroke:none; }

/* Овал навколо слів — головний елемент карти. Розміри рахує JS
   по реальних габаритах тексту.
   pathLength="1" звільняє від обчислення довжини еліпса вручну:
   обведення штрихом задається долями, а не пікселями */
.rmap__pill{
  /* Щільна заливка й чиста біла обводка: таблички лежать і на темному лісі,
     і поверх світлих хмар — напівпрозорий овал зникав і там, і там.
     2026-08-16 Дарʼя: «хочу щоб ці виділення були темно-зеленими як футер» —
     колір тепер РІВНО той самий токен, що тло підвалу, і без прозорості:
     крізь напівпрозорий овал просвічували сонячні панелі й дах */
  /* 2026-08-17: було майже чорне тло + чиста біла обводка — Дарʼя: «на карті
     просто виїдає очі». Пара пом'якшена в межах системи: заливка — брендовий
     зелений (світліший за майже чорний), обводка й літери — теплий крем
     замість #fff. Контраст напису лишається 8:1, а плями на світлому знімку
     вже не б'ють. Темніший тон тепер зайнятий станом наведення */
  fill:var(--green);
  stroke:var(--light);
  stroke-width:1.8;
  vector-effect:non-scaling-stroke;
  stroke-dasharray:1;
  stroke-dashoffset:1;
  transition:stroke-dashoffset 1.1s var(--ease),
             fill .13s var(--ease), stroke .13s var(--ease), opacity .3s var(--ease);
}
.rmap.is-in .rmap__pill{ stroke-dashoffset:0; }

/* Назва всередині овала. Плашка вже дає контраст, тому темного ореолу
   навколо літер більше не треба */
.rmap__label{
  fill:var(--light);
  font:600 13px/1 var(--sans); letter-spacing:.1em; text-transform:uppercase;
  transition:fill .28s var(--ease), opacity .3s var(--ease);
  pointer-events:none;
}

/* Наведення й фокус: овал темніє, обводка лишається білою. Раніше він
   заливався акцентом (світліший лісовий зелений) — на карті це читалося як
   інший колір, а не як стан того самого овала.
   `.is-on` вішає скрипт: підпис і контур будівлі лежать у різних шарах SVG,
   тому саме собою :hover з одного на інший не переходить */
.rmap__zone:hover .rmap__pill,
.rmap__zone.is-on .rmap__pill,
.rmap__zone:focus-visible .rmap__pill{
  fill:var(--green-deep);
  stroke:var(--sand);
  stroke-width:2.4;
}
/* 2026-08-17: стан наведення був невидимий — після зміни палітри база й hover
   опинилися на ОДНОМУ токені (--green-deep). Тепер вони знову різні: база —
   --green, наведення — --green-deep, плюс пісочна обводка. Овал і темнішає,
   і міняє контур, тому стан видно і на світлій хмарі, і на темному лісі */
.rmap__zone:focus{ outline:none; }

/* Табличка, яка не вміщується поруч із сусідами (тісний кут карти або
   вузький екран): не показуємо постійно, але повертаємо при наведенні.
   Ромбик лишається — обʼєкт видно завжди, ховається тільки назва */
.rmap__zone.is-mute .rmap__label,
.rmap__zone.is-mute .rmap__pill{ opacity:0; }
.rmap__zone.is-mute:hover .rmap__label,
.rmap__zone.is-mute:hover .rmap__pill,
.rmap__zone.is-mute.is-on .rmap__label,
.rmap__zone.is-mute.is-on .rmap__pill,
.rmap__zone.is-mute:focus-visible .rmap__label,
.rmap__zone.is-mute:focus-visible .rmap__pill{ opacity:1; }
.rmap__zone:focus-visible{ outline:2px solid var(--sand); outline-offset:2px; }

/* фільтр сховав зону: ні кліку, ні Tab */
.rmap__zone.is-off{ opacity:0; pointer-events:none; }

/* --------------------------- хмари --------------------------- */

/* Три шари мають читатися як хмари, а не як спільний серпанок. Тому:
   1) маска знімає молочну середину знімків — територія лишається чистою,
      а щільні хмари по краях кадру працюють у повну силу;
   2) шари різного розміру і зсунуті один відносно одного, інакше три
      однакові силуети накладаються і зливаються в пляму;
   3) середній шар віддзеркалений властивістю scale (не transform —
      transform належить паралаксу, JS його перезаписує).
   Якщо хмар забагато або замало — крутити opacity нижче */
/* ХМАРИ. Лежать на рівні секції й проходять крізь заголовок аж на знімок —
   так тло читається як одне ціле, без двох відтінків один за одним.

   Маска — ОДИН градієнт (не список!): він розмиває власні верхній і нижній
   краї шару. Без цього край картинки проступає рівною лінією, щойно паралакс
   зсуне шар. Список масок із mask-composite тут не годиться: `intersect` на
   першому шарі перетинається з порожнечею і гасить хмари цілком.

   Пропорції шару тримаємо близькими до 3:2 самої картинки, інакше
   object-fit:cover обріже бічні хмари, заради яких усе й затівалося */
.rmap__cloud{
  position:absolute;
  object-fit:cover;
  max-width:none;
  pointer-events:none; user-select:none;
  will-change:transform;
  /* верхня розтушовка довга (30%, було 15%): хмара набирає щільність
     поступово, а не стіною одразу під текстом */
  -webkit-mask-image:linear-gradient(to bottom,
    rgba(0,0,0,0) 0%, #000 30%, #000 76%, rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(to bottom,
    rgba(0,0,0,0) 0%, #000 30%, #000 76%, rgba(0,0,0,0) 100%);
}
/* Три шари стоять сходинкою по вертикалі, а не один над одним: разом вони
   дають суцільну хмарну масу від верху секції до початку фотографії.
   Саме нижній шар накриває стик, де починається знімок, — інакше там
   лишається рівна лінія. Закінчується він трохи вище за «Баню» */
/* ⚠️ 2026-08-16. Відступ під лідом секції збільшили — і Дарʼя не побачила
   різниці («или я слепая или ничего не поменялось»). Причина не в відступі:
   він відсунув КАРТУ, а хмари стоять у відсотках від висоти всієї секції,
   тому разом із нею просто розтягнулися. Заміри: видима кромка верхнього
   шару була на 532 px ВИЩЕ за нижній край ліда — тобто текст лежав просто
   в хмарах.
   Тому вся маса опущена на 12 відсоткових пунктів (було 9 / -6 / -14).
   Разом із довшою розтушовкою (30% вгорі) хмари починають проступати вже
   під текстом, а не крізь нього. Стик знімка (23% висоти секції) вони, як і
   раніше, накривають: нижні краї шарів ідуть на 95 / 84 / 81 %. */
.rmap__cloud--back{
  z-index:2; opacity:.9;
  top:21%; left:-7%; width:114%; height:74%;
}
.rmap__cloud--mid{
  z-index:3; opacity:.8;
  top:6%; left:-10%; width:120%; height:78%;
  scale:-1 1;                 /* дзеркало, щоб не повторювати силует сусіда */
}
.rmap__cloud--front{
  z-index:4; opacity:.65;
  top:-2%; left:-14%; width:128%; height:83%;
}


/* ------------------------ перелік об'єктів ------------------------
   На вузькому екрані кадр показує лише центр території, тому поруч
   завжди є текстовий перелік — ним дістати можна будь-який об'єкт */

.rmap__list{ display:none; }

.rmap__row{
  display:block; width:100%; text-align:left;
  padding:15px 18px;
  border:1px solid rgba(246,242,233,.16); border-radius:var(--radius);
  transition:border-color .25s var(--ease), background-color .25s var(--ease);
}
.rmap__row + .rmap__row{ margin-top:8px; }
.rmap__row.is-active,
.rmap__row:hover{ border-color:var(--accent); background:rgba(35,81,76,.16); }
.rmap__row:focus-visible{ outline:2px solid var(--sand); outline-offset:2px; }
.rmap__row-name{
  display:block;
  font:600 13px/1 var(--sans); letter-spacing:.12em; text-transform:uppercase;
  color:var(--light);
}
.rmap__row-note{
  display:block; margin-top:6px;
  font:400 14px/1.5 var(--sans); color:rgba(246,242,233,.66);
}

/* ------------------------- вузький екран ------------------------- */

@media (max-width:700px){
  /* кадр стає вертикальним: показуємо центр території крупніше.
     Числа мають збігатися з data-rmap-viewbox-mobile у розмітці */
  .rmap__frame{ aspect-ratio:720 / 1160; }

  /* підпис у одиницях знімка: кадр вужчий, тому кегль більший */
  .rmap__label{ font-size:19px; }

  /* тут з'являється перелік, тому знизу знову потрібне поле */
  .rmap{ padding-bottom:clamp(40px, 8vw, 64px); }
  .rmap__list{ display:block; margin-top:20px; }
}

@media (min-width:701px) and (max-width:1200px){
  .rmap__label{ font-size:16px; }
}

/* ------------------------ спокійний режим ------------------------ */

@media (prefers-reduced-motion: reduce){
  /* селектор мусить бути не менш специфічним за .rmap--anim …,
     інакше секція так і лишиться прозорою: медіазапит специфічності не додає */
  .rmap--anim .rmap__head,
  .rmap--anim .rmap__frame{ opacity:1; transform:none; transition:none; }
  .rmap__scene,
  .rmap__cloud{ transform:none !important; will-change:auto; }
  /* нічого не обводиться штрихом — усе вже намальовано */
  .rmap__pill{ stroke-dashoffset:0; transition:fill .28s var(--ease), stroke .28s var(--ease); }
}

/* ------------------------- CTA-смуга ------------------------- */
.cta__inner{ max-width:720px; margin-inline:auto; text-align:center; }

/* ---- Останній блок сторінки на знімку карпатського лісу ----
   Дарʼя 2026-08-13 дала панораму туманного лісу: «це поставь як БГ на сторінках
   Номери і Про нас одразу над футером». Замість темно-зеленої плашки блок
   «Готові приїхати?» тепер стоїть на цьому знімку.
   Знімок притиснутий до НИЗУ, а верх блока залитий кремом (::after), тому текст
   і кнопки завжди лежать на рівному Warm Cream — читаність не залежить від того,
   що саме на фото і як воно обрізалося на цій ширині екрана.
   Шлях до знімка передається змінною в розмітці й ОБОВʼЯЗКОВО від кореня сайту:
   відносний шлях усередині custom property Chrome вважає від style.css (404).
   Поки файла немає, блок — просто кремовий, нічого не ламається. */
.cta--forest{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--sand-bg);
  color:var(--ink);
  /* Висота смуги = НАТУРАЛЬНА пропорція знімка (banner: 1832×859), а не довільне
     число. Дарʼя 2026-08-13: «треба щоб фон зливався з верхом картинки». У знімка
     верхні 20% — рівне кремове небо #FDF5E2, і воно майже точно наш Warm Cream
     #F6F2E9 (різниця 2–5 одиниць на канал). Але зливається воно ТІЛЬКИ якщо небо
     видно: при `cover` у смузі фіксованої висоти браузер обрізав знімок згори саме
     по небу, і на стику виходила лінія посеред гір.
     Відсоткове padding-bottom вважається від ВЛАСНОЇ ширини блока, а ::before
     тримає ту саму пропорцію через aspect-ratio — тому відступ і знімок збігаються
     на будь-якій ширині, і текст фізично не може наїхати на фото. */
  padding-bottom:calc(100% * 859 / 1832);
}
.cta--forest::before{
  content:""; position:absolute; left:0; right:0; bottom:0; z-index:-1;
  aspect-ratio:1832 / 859; pointer-events:none;
  /* крем згори добиває ті 2–5 одиниць різниці й шум стиснення webp, щоб стик
     не читався навіть на градієнтному небі. Знизу те саме, тільки в бік підвалу:
     низ знімка в середньому #1B251F, підвал #11211F — різниця мала, але на
     рівній смузі помітна, тому останні 8% висоти йдуть у колір підвалу.
     Порядок шарів у CSS — зверху вниз */
  background:
    linear-gradient(to bottom, var(--sand-bg) 0%, rgba(246,242,233,0) 12%),
    linear-gradient(to top,    var(--green-deep) 0%, rgba(17,33,31,0) 8%),
    var(--cta-img, none) bottom center / cover no-repeat;
}

/* ---- від 1200px текст ЛОЖИТЬСЯ НА знімок ----
   Дарʼя показала референс (hotelpremium): заголовок і кнопки просто поверх
   панорами. Тут це працює не на всякій ширині, і причина геометрична: знімок
   широкий і низький (2,13:1), а текстовий блок — 386px. Знімок притиснутий до
   низу, тому чим вужчий екран, тим нижче по фото опускається низ тексту:
     1920 — 36% висоти знімка, 1440 — 48%, 1200 — 57% (світлі гори, читається)
     1000 — 69%, 768 — 82%, 375 — 64% (ТЕМНІ ЯЛИНИ, текст пропадає)
   Тому накладення тільки від 1200px, а нижче лишається розкладка «текст над
   смугою» — вона вже перевірена й читається на будь-якій ширині.
   Розпірка ::before переходить у потік (grid-комірка), інакше абсолютний знімок
   не давав би секції висоти й вилазив би у попередню секцію під overflow:hidden. */
@media (min-width:1200px){
  .cta--forest{
    display:grid; align-items:start;
    /* нуль, а не відступ: у цьому режимі знімок лежить у grid-комірці, тому
       будь-яке нижнє поле лишає між фото й підвалом кремову смугу */
    padding-bottom:0;
  }
  .cta--forest::before{ position:static; grid-area:1/1; width:100%; }
  .cta--forest > .container{ grid-area:1/1; position:relative; z-index:1; }
  /* друга кнопка стає кремовою плашкою: прозора з тонкою рамкою на тлі гір
     майже не читалася (зелений по #B1BDC5 — 3,8:1, а рамка й того менше) */
  .cta--forest .btn--outline{
    background:var(--light); border-color:var(--light);
    --btn-fill:var(--green);
  }
  .cta--forest .btn--outline:hover{ border-color:var(--green); color:var(--light); }
}
/* ---- перехресна смуга: велике фото сусідньої сторінки + посилання на неї ----
   Відрізняється від .cta--forest задачею: там панорама з кремовим небом, що
   зливається з тлом сторінки, і темний текст ПІД знімком. Тут знімок довільний
   (SPA, ресторан), тому висота задана екраном, текст завжди лежить НА фото,
   а читабельність тримає завіса того ж тону, що на Hero (--sage-deep).
   Знімок підставляється змінною --cta-img у розмітці. Поки фото немає, змінна
   вказує на неіснуючий файл: смуга залишається рівною темною плашкою, текст і
   кнопки не ламаються, а після появи файла нічого правити не треба */
.cta--cross{
  position:relative; isolation:isolate; overflow:hidden;
  display:grid;
  /* текст притиснутий донизу, а не по центру (2026-08-21): по центру
     заголовок лягав просто на вивіску в кадрі — біле по білому, не читалося */
  align-items:end;
  /* на весь екран, як інші повноекранні секції проєкту:
     смуга на 74vh різала вивіску вгорі кадру — що вища секція, то ближча
     вона до пропорції знімка (4:3) і то менший кроп */
  min-height:100svh;
  padding-bottom:clamp(40px, 9vh, 104px);
  background:var(--green-deep);
}
.cta--cross::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  /* прив'язка до верху, а не до центру: головне в кадрі (вивіска, дах)
     стоїть у верхній третині, зайве — порожня бруківка внизу */
  background:var(--cta-img, none) center top / cover no-repeat;
}
/* екран вужчий за сам знімок (4:3) — телефони, вузькі вікна. Cover тут різав
   би кадр з боків і вивіска втрачала б краї, тому знімок кладемо цілком
   угору смуги на всю ширину (75% ширини = пропорція 1448×1086), а заголовок
   із кнопкою опускаємо під нього. На весь екран смугу тут не тягнемо:
   лишилося б порожнє темне поле нижче тексту */
@media (max-aspect-ratio: 4/3){
  .cta--cross{
    min-height:0;
    align-items:end;
    padding-top:calc(75vw + clamp(20px, 5vw, 32px));
  }
  .cta--cross::before{ background-size:100% auto; background-position:center top; }
}
.cta--cross::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  /* завіса тримає читабельність саме внизу, де тепер лежить текст: угорі
     кадр майже відкритий (там вивіска, її видно), донизу тон густішає.
     Нижня половина мусить бути справді щільною: на широких і низьких вікнах
     кадр масштабується так, що вивіска сама з'їжджає в зону тексту, і біле
     по білому рятує тільки завіса */
  background:linear-gradient(to bottom,
    rgba(17,33,31,.20) 0%, rgba(17,33,31,.28) 34%,
    rgba(17,33,31,.56) 56%, rgba(17,33,31,.74) 78%,
    rgba(17,33,31,.86) 100%);
}
/* друга кнопка — кремова плашка: прозора з тонкою рамкою на знімку не
   читається (та сама причина, що й у .cta--forest над горами) */
.cta--cross .btn--outline{
  background:var(--light); border-color:var(--light); color:var(--green);
  --btn-fill:var(--green);
}
.cta--cross .btn--outline:hover{ border-color:var(--green); color:var(--light); }

/* підпис-заглушка на час, поки знімка немає */
.cta--cross .cta__stub{
  position:absolute; left:50%; bottom:16px; transform:translateX(-50%);
  margin:0; padding:6px 12px;
  font:500 10px/1.5 var(--sans); letter-spacing:.14em; text-transform:uppercase;
  color:rgba(246,242,233,.62); border:1px dashed rgba(246,242,233,.32);
}

.cta__actions{
  display:flex; flex-wrap:wrap; justify-content:center; gap:12px;
  margin-top:clamp(24px, 3vw, 36px);
}

@media (max-width:600px){
  .cta__actions .btn{ width:100%; }
}

/* ------------------------- що поруч ------------------------- */
/* стоїть одразу під картою, тому фон інший, ніж у секції з мапою */
.nearby{ background:var(--sage); }

.nearby__note{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:20px clamp(24px, 3vw, 48px);
  margin-top:clamp(32px, 3.6vw, 48px);
  padding:clamp(22px, 2.4vw, 32px);
  border:1px solid rgba(35,81,76,.16); border-radius:var(--radius);
}
.section .nearby__note p{ margin:0; max-width:64ch; }

@media (max-width:700px){
  .nearby__note{ flex-direction:column; align-items:stretch; }
  .nearby__note .btn{ width:100%; }
}

:root{
  --ic-pin:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
  --ic-mail:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m2 7 10 6 10-6'/%3E%3C/svg%3E");
  --ic-house:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 10.5 12 3.5l8.5 7'/%3E%3Cpath d='M5.5 9.6V20h13V9.6'/%3E%3Cpath d='M10 20v-5h4v5'/%3E%3Cpath d='M16 5.5h2.5v2'/%3E%3C/svg%3E");
  /* 2026-08-21: замість намальованих трикутників — контур гір від Дарʼї
     (оригінал 2172×724 лежить у Kupeli\Фотоooter1-peaks-source.png).
     Тло прозоре, тому файл працює маскою,
     тому колір і далі бере .footer__peaks із --sand. У проєкті лежить
     зменшена копія 420×140 — на 132px ширини вистачає й для 3x */
  --ic-peaks:url("../img/footer-peaks.png");
  /* 2026-08-21 Дарʼя: «ці ромбики всюди заміни на значок з нашого фавікона».
     Монограма «У» з фавікона, обрізана по глифу (assets/img/mark.webp,
     110×128, прозоре тло). Йде картинкою, а не маскою, бо золото на ній
     градієнтне — саме таким Дарʼя його й просила лишити */
  --mark:url("../img/mark.webp");
  --ic-clock:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3.5 2'/%3E%3C/svg%3E");
  --ic-facebook:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M14 8.5V11h3l-.5 3H14v7h-3v-7H8.5v-3H11V8a4 4 0 0 1 4-4h2.5v3H15.5c-.8 0-1.5.2-1.5 1.5Z'/%3E%3C/svg%3E");
  /* значки для сторінок номерів: рядки характеристик (гості, кімнати, ліжко)
     і шапки блоків «Оснащення» та «Умови проживання». Товщина штриха й
     скруглення ті самі, що вище, — інакше вони випадуть із набору */
  --ic-guests:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 20v-1.6a3.4 3.4 0 0 0-3.4-3.4H6.4A3.4 3.4 0 0 0 3 18.4V20'/%3E%3Ccircle cx='9' cy='8' r='3.4'/%3E%3Cpath d='M21 20v-1.6a3.4 3.4 0 0 0-2.6-3.3'/%3E%3Cpath d='M16 4.8a3.4 3.4 0 0 1 0 6.4'/%3E%3C/svg%3E");
  --ic-room:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='3' width='14' height='18' rx='1.4'/%3E%3Cpath d='M15 12h.01'/%3E%3C/svg%3E");
  --ic-bed:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 18v-7.5a1.5 1.5 0 0 1 1.5-1.5h15a1.5 1.5 0 0 1 1.5 1.5V18'/%3E%3Cpath d='M3 15h18'/%3E%3Cpath d='M7 9V7.5A1.5 1.5 0 0 1 8.5 6h7A1.5 1.5 0 0 1 17 7.5V9'/%3E%3C/svg%3E");
  --ic-chair:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12V6.5A1.5 1.5 0 0 1 7.5 5h9A1.5 1.5 0 0 1 18 6.5V12'/%3E%3Crect x='3.5' y='12' width='17' height='5' rx='1.5'/%3E%3Cpath d='M6 17v2.5M18 17v2.5'/%3E%3C/svg%3E");
  --ic-calendar:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='16' rx='1.6'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E");
  /* значок для плиток «Як доїхати». Товщина штриха й скруглення ті самі,
     що вище, — інакше він випаде з набору */
  --ic-car:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 11.5 6.6 7.2A2 2 0 0 1 8.5 6h7a2 2 0 0 1 1.9 1.2L19 11.5'/%3E%3Crect x='2.5' y='11.5' width='19' height='5.5' rx='1.2'/%3E%3Cpath d='M6.5 17v1.5M17.5 17v1.5'/%3E%3Cpath d='M6.2 14.2h.01M17.8 14.2h.01'/%3E%3C/svg%3E");
}

/* ==================== СТОРІНКА «НОМЕРИ» ==================== */

/* --- картка категорії: спільна для каталогу і блоку «інші номери» --- */
.cat__grid{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(22px, 2.6vw, 36px);
}

/* Каталог на rooms.html — у ДВА стовпці (рішення Дарʼї 2026-08-13): категорій
   сім, по три картки виходили дрібними. Сітку по три лишаємо базовій — її ще
   використовує блок «інші номери» на сторінках номерів, де карток шість і по
   три вони складаються рівно у два рядки. Вузькі екрани нижче, у 700px */
.rooms-page .cat__grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
/* у два стовпці картка майже вдвічі ширша, і знімок 4/3 робив її задертою по
   висоті — на два стовпці кадр спокійніший */
.rooms-page .cat__photo{ aspect-ratio:3/2; }

/* Остання картка каталогу — на всю ширину рядка (рішення Дарʼї 2026-08-13):
   категорій сім, і сьома все одно стояла б у ряду сама, а поруч зяяла порожнеча.
   Розкладається лежма: знімок ліворуч, текст праворуч по центру висоти.
   Висоту тримає межа знімка, а не пропорція: знімок тягнеться на всю висоту
   картки (align-items:stretch за замовчуванням), тому порожнього місця під ним
   не буває, як би не виріс текст */
.rooms-page .cat--wide{ grid-column:1 / -1; flex-direction:row; }
.rooms-page .cat--wide .cat__photo{
  flex:0 0 50%;
  aspect-ratio:auto; min-height:clamp(280px, 24vw, 400px);
}
.rooms-page .cat--wide .cat__body{ justify-content:center; }

/* --- апартаменти SPA-комплексу під каталогом (2026-08-17) ---
   Люкс і напівлюкс стоять не в Ужку, а у Волосянці, тож із сітки категорій вони
   пішли. Тут вони як перехресна пропозиція, і блок має читатися саме як «інша
   локація»: відбиває його від каталогу лінія та подвійний відступ, а не заголовок
   сам по собі — сітка тут та сама, .rooms-page .cat__grid у два стовпці */
.rooms-page__spa{
  margin-top:clamp(56px, 6vw, 96px);
  padding-top:clamp(40px, 4.5vw, 72px);
  border-top:1px solid rgba(35,81,76,.16);
}

.cat{
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--glass); border-radius:var(--radius);
  color:var(--ink);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.cat:hover{ transform:translateY(-4px); box-shadow:0 18px 40px rgba(35,81,76,.14); }
.cat:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

.cat__photo{
  position:relative; display:block; overflow:hidden;
  aspect-ratio:4/3; background:var(--sage);
}
.cat__photo img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.cat:hover .cat__photo img{ transform:scale(1.04); }
/* заглушка всередині картки: рамка й скруглення тут зайві */
.cat__photo--stub{ border:0; border-radius:0; }

/* Обкладинка люкса — єдиний вертикальний кадр серед карток каталогу (усі знімки
   апартаментів вертикальні, горизонтального просто немає). У рамці 3:2 центр
   показував би стелю й узголівʼя, тому точка кадрування зсунута вниз, до ліжка.
   Привʼязка до імені файла: карток із цим кадром кілька, на різних сторінках */
.cat__photo img[src$="apart-lyuks-bedroom.webp"]{ object-position:center 62%; }
/* Котеджі показує cottages-forest.webp — горизонтальний кадр 1536×1024, який
   у рамці 3:2 і 4:3 лягає без обрізання. Вертикальний cottage-exterior.webp
   (1085×1450) звідси прибрано 2026-08-16: у горизонтальній рамці від будинку
   лишалися дах і верх вікон, і жодна точка кадрування цього не рятувала —
   кадр просто не влазив по висоті */

.cat__body{ display:flex; flex-direction:column; flex:1; padding:clamp(20px, 2vw, 28px); }

.cat__name{
  margin:0 0 10px;
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.5rem, 2.3vw, 2rem); line-height:1.12;
  color:var(--green);
}
.cat__meta{
  display:block;
  font:500 14px/1.5 var(--sans);
  color:rgba(35,81,76,.65);
}
.cat__anons{ display:block; margin-top:14px; font-size:15px; line-height:1.55; }

.cat__foot{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:10px 18px; margin-top:auto; padding-top:20px;
}
.cat__price{
  font:600 17px/1 var(--sans); letter-spacing:.01em;
  color:var(--green);
}
/* лінії під написом немає (Дарʼя 2026-08-17: «смотрится не очень») */
.cat__more{
  font:500 12px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase;
  color:var(--green);
  transition:color .25s var(--ease);
}
.cat:hover .cat__more{ color:var(--accent-d); }

/* --- матове скло на знімку картки (Дарʼя 2026-08-16) ---
   Ціна й «Детальніше» живуть тільки на цій плашці: у спокої вона стоїть за
   нижнім краєм кадру, на hover виїжджає на фото («сразу ценник убери, пусть
   показывается только при наведении»). Низ тіла картки там, де hover є,
   прибраний зовсім — не порожнім місцем, а з потоку, тож картка нижча й
   нічого не стрибає. Розмиває плашка саме фотографію: на однотонному тлі
   тіла скла не було б видно. Розмітку додає main.js — карток .cat дев'ять
   сторінок, і кожну довелося б правити руками */
.cat__glass{
  position:absolute; left:0; right:0; bottom:0;
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:8px 18px;
  padding:14px clamp(16px, 1.8vw, 24px);
  background:rgba(247,243,234,.38);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
          backdrop-filter:blur(16px) saturate(140%);
  border-top:1px solid rgba(255,255,255,.45);
  box-shadow:0 -12px 32px rgba(17,33,31,.12);
  transform:translateY(101%);
  transition:transform .38s var(--ease);
  pointer-events:none;
}
.cat__glass-price{ font:600 17px/1 var(--sans); letter-spacing:.01em; color:var(--green); }
.cat__glass-more{
  font:500 12px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent-d);
}
/* 101% замість 100% — інакше на дробових масштабах браузера з-під краю
   визирає смужка скла */
.cat:hover .cat__glass,
.cat:focus-visible .cat__glass{ transform:translateY(0); }
/* там, де є hover, ціна лишається тільки на склі */
@media (hover:hover){
  .cat__foot{ display:none; }
}

/* без підтримки backdrop-filter скло стає просто щільнішою плашкою */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .cat__glass{ background:rgba(247,243,234,.9); }
}
/* на тач-екранах hover «залипає» після тапу — там плашки немає зовсім,
   а ціна лишається внизу картки, як і була */
@media (hover:none){
  .cat__glass{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .cat__glass{ transition:opacity .2s linear; transform:none; opacity:0; }
  .cat:hover .cat__glass,
  .cat:focus-visible .cat__glass{ opacity:1; }
}

/* нижній блок каталогу «Що варто знати» (умови + телефон) знято 2026-08-16 —
   ті самі пункти стоять у «Умовах проживання» на сторінках номерів */

.rooms-other{ background:var(--sage); }

/* ==================== СТОРІНКА НОМЕРА ==================== */

.room-page__grid{
  display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,.85fr);
  gap:clamp(28px, 3.4vw, 56px); align-items:start;
}

/* --- галерея: велике фото + стрічка мініатюр --- */
.gal__main{
  margin:0; overflow:hidden;
  aspect-ratio:3/2; border-radius:var(--radius); background:var(--sage);
  /* Стеля висоти (Дарʼя 2026-08-19: «картинка огромная, не влазит в секцию
     по высоте»). Пропорцію рамки скрипт підлаштовує під кадр і затискає в
     0.8–1.8 (див. fitMain у main.js), але для вертикального знімка 0.8 на
     широкій колонці дає висоту БІЛЬШУ за екран: 748px ширини перетворюються
     на 934px висоти при вікні 720px. aspect-ratio лишаємо — саме він тримає
     висоту незмінною, поки гортають стрічку, — а перерости екран не даємо.
     Що кадр при цьому підріже, лікує object-fit:cover і object-position */
  max-height:min(72svh, 760px);
}
.gal__main img{ width:100%; height:100%; object-fit:cover; }

/* Обмін великого фото з мініатюрою — через згасання, а не ривком.
   Клас вішає скрипт на час підміни src (див. main.js, галереї) */
.gal__main img,
.gal__thumb img{ transition:opacity .18s var(--ease); }
.gal__main img.is-fading,
.gal__thumb.is-fading img{ opacity:0; }
@media (prefers-reduced-motion:reduce){
  .gal__main img, .gal__thumb img{ transition:none; }
}

/* --thumb-cols задає сама галерея: скільки мініатюр, стільки й стовпців,
   щоб остання не висла в рядку сама */
.gal__thumbs{
  display:grid; grid-template-columns:repeat(var(--thumb-cols, 4), minmax(0,1fr));
  gap:10px; margin-top:10px;
}
/* --thumb-ratio: галереї, де всі кадри вертикальні (хамам, японська баня),
   ставлять 3/4 — у рамці 4:3 від такого знімка лишалася середня смуга */
.gal__thumb{
  position:relative; margin:0; padding:0; overflow:hidden;
  aspect-ratio:var(--thumb-ratio, 4/3); border-radius:var(--radius); background:var(--sage);
}
.gal__thumb img{ width:100%; height:100%; object-fit:cover; }

/* Порожній слот у стрічці мініатюр: знімка ще немає, але місце під нього
   вже видно (spa.html, ігрова кімната). Це не <button> і не <img>, тому
   ні обробник галереї (шукає [data-gal-src]), ні лайтбокс (шукає <img>)
   на нього не реагують — заглушка нікуди не веде й нічого не ламає.
   Пропорція та сама, що в сусідніх мініатюр */
.gal__stub{ aspect-ratio:var(--thumb-ratio, 4/3); }

/* Точка кадрування для ВЕРТИКАЛЬНИХ знімків у горизонтальних рамках.
   Прив'язка до імені файла, а не до слота: клік міняє фото місцями, тому
   правило має їхати разом зі знімком.
   `banya-bucket` — 1023×1537, у рамці 4/3 «cover» показує лише половину висоти,
   і за замовчуванням це середина: цебро різалося навпіл. 40% ставить його у кадр */
.gal__main img[src$="banya-bucket.webp"],
.gal__thumb img[src$="banya-bucket.webp"]{ object-position:center 40%; }

/* Хамам: рамка галереї зафіксована 4:3 (data-gal-ratio у розмітці), тож від
   вертикального кадру 1086×1448 видно трохи більше за половину висоти. Центр
   показував би підлогу й лежаки, а головне тут — стеля-зорепад і золота ніша,
   тому точка кадрування піднята */
.gal__main img[src$="hamam-main.webp"]{ object-position:center 38%; }

/* Люкс із кухнею: рамка галереї зафіксована 3/2 (data-gal-ratio у розмітці),
   тож від вертикальних кадрів 1086×1448 видно рівно половину висоти. Точку
   кадрування обрано по головному предмету, інакше центр показував би
   порожню стелю або підлогу:
     друга спальня — ліжко стоїть у нижній половині;
     кухня        — гарнітур і стіл нижче середини;
     гардероб     — шафа з вішалкою у верхній половині;
     ванна        — душова й раковина по центру, тому правила не потребує */
.gal__main img[src$="apart-lyuks-bedroom-2.webp"]{ object-position:center 70%; }
.gal__main img[src$="apart-lyuks-kitchen.webp"]{ object-position:center 60%; }
.gal__main img[src$="apart-lyuks-wardrobe.webp"]{ object-position:center 30%; }

/* у відкритих басейнів вода й шезлонги — у нижній половині кадру,
   у мініатюрі 4:3 центр показував би переважно небо й гори */
.gal__main img[src$="pools-open-1.webp"],
.gal__thumb img[src$="pools-open-1.webp"],
.gal__main img[src$="pools-open-2.webp"],
.gal__thumb img[src$="pools-open-2.webp"]{ object-position:center 62%; }
/* мініатюри-кнопки живуть тільки там, де є справжні фото */
button.gal__thumb{ opacity:.68; transition:opacity .3s var(--ease); }
button.gal__thumb:hover{ opacity:1; }
button.gal__thumb:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
/* підпис заглушки має вміститися в мініатюру навіть на телефоні */
.gal__thumb--stub::after{ padding:6px; font-size:9px; letter-spacing:.08em; }

/* --- бічна панель із характеристиками --- */
.spec{
  position:sticky; top:calc(var(--header-h) + 16px);
  padding:clamp(24px, 2.4vw, 32px);
  background:var(--glass); border-radius:var(--radius);
}
/* Ліній-розділювачів між рядками немає (Дарʼя 2026-08-17 прибрала їх по
   всьому сайту). Ритм тримає gap, а не рамки.
   2026-08-19 за референсом Дарʼї перед кожним рядком став значок: гості,
   кімнати, ліжко, розташування, години заїзду. Тому колонок три, а не дві */
.spec__list{ display:grid; gap:14px; margin-top:18px; }
.spec__list li,
.var__list li,
.vars__facts li{
  /* Підпис не може стиснутися вужче за своє найдовше слово: на 1024px
     колонка .78fr давала 94px, а «Розташування» просить 101 — і слово
     виїжджало за колонку. minmax(min-content, .78fr) лишає ту саму
     пропорцію там, де місця вистачає, і не дає підпису різатися там,
     де не вистачає. Колонка значення поступається — вона й так переносить */
  display:grid; grid-template-columns:20px minmax(min-content,.78fr) minmax(0,1.22fr);
  gap:12px; align-items:start;
}
.spec__list li{ font-size:14px; line-height:1.45; }
.spec__list span{ color:rgba(37,40,36,.62); }
.spec__list b{ font-weight:500; color:var(--green); }

/* ---- значки рядків характеристик ----
   Пісочні, а не зелені: значок тут не дія і не посилання, а маркер рядка —
   рідня ромбикам у переліках «Оснащення» нижче. Зелений на цьому місці
   читався б як активний елемент і сперечався б із правилом акценту */
/* ⚠️ Фон живе ТІЛЬКИ в модифікаторах. У рядків без свого значка («Ціна за
   добу») клас стоїть порожній — він тримає колонку сітки. Якщо колір задати
   тут, така комірка стане суцільним пісочним квадратом (спіймано 19.08) */
.spec__ic{
  width:20px; height:20px; flex:none; margin-top:1px;
}
.spec__ic--guests,
.spec__ic--room,
.spec__ic--bed,
.spec__ic--pin,
.spec__ic--clock{ background:var(--sand); }
.spec__ic--guests{
  -webkit-mask:var(--ic-guests) center/contain no-repeat;
          mask:var(--ic-guests) center/contain no-repeat;
}
.spec__ic--room{
  -webkit-mask:var(--ic-room) center/contain no-repeat;
          mask:var(--ic-room) center/contain no-repeat;
}
.spec__ic--bed{
  -webkit-mask:var(--ic-bed) center/contain no-repeat;
          mask:var(--ic-bed) center/contain no-repeat;
}
.spec__ic--pin{
  -webkit-mask:var(--ic-pin) center/contain no-repeat;
          mask:var(--ic-pin) center/contain no-repeat;
}
.spec__ic--clock{
  -webkit-mask:var(--ic-clock) center/contain no-repeat;
          mask:var(--ic-clock) center/contain no-repeat;
}

.section .spec__price{
  margin:24px 0 4px;
  font-family:var(--serif); font-size:clamp(2rem, 3vw, 2.8rem); line-height:1;
  color:var(--green);
}
/* «від» і «грн» — супровід до цифри, а не частина її кегля (референс Дарʼї
   2026-08-19). Курсив у <i> знімаємо: тег узятий за семантику «допоміжне
   слово», а не за нахил */
.spec__price i{
  font:500 14px/1.3 var(--sans); font-style:normal;
  color:rgba(37,40,36,.62);
}
.spec__price b{
  font-family:var(--serif); font-weight:400;
  font-size:.52em; color:var(--green);
}
.spec__price span{
  font:500 14px/1.3 var(--sans);
  color:rgba(37,40,36,.62);
}
.section .spec__note{ margin:0 0 22px; font-size:13px; color:rgba(37,40,36,.62); }
.spec__actions{ display:grid; gap:12px; }

/* По центру, як шапки секцій по всьому сайту (Дарʼя 2026-08-19: «у нас
   большая часть всего посередине»). Ширину лишаємо читабельною, блок
   ставимо посередині колонки, а не розтягуємо */
.room-page__desc{
  margin:clamp(36px, 4vw, 56px) auto 0; max-width:70ch;
  text-align:center;
}
.section .room-page__desc p:last-child{ margin-bottom:0; }

/* Заголовок опису — за референсом Дарʼї 2026-08-19. Надзаголовка «ПРО НОМЕР»
   над ним свідомо немає: капслок-надзаголовки прибрані з усього сайту 10.08,
   і сторінки номерів з нього не випадають */
.room-page__title{
  margin:0 0 16px;
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.6rem, 2.6vw, 2.3rem); line-height:1.15;
  color:var(--green);
}

/* --- оснащення та умови --- */
.amen{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px, 2.4vw, 36px);
  /* лінії над блоком немає: відділяє його повітря, а не рамка */
  margin-top:clamp(48px, 5vw, 76px);
}

/* Обидва переліки стали панелями (референс Дарʼї 2026-08-19). Поверхня —
   те саме матове скло, що в плитках .card-row: заливки в системі немає
   (--glass прозорий), панель тримається розмиттям підкладки й тонким
   світлим краєм, тому водяний знак секції йде крізь неї без «дірок» */
.amen__col{
  padding:clamp(24px, 2.6vw, 36px);
  background:var(--glass);
  border:1px solid rgba(255,255,255,.45);
  box-shadow:0 10px 30px -18px rgba(17,33,31,.10), inset 0 1px 0 rgba(255,255,255,.4);
  -webkit-backdrop-filter:blur(18px) saturate(125%);
          backdrop-filter:blur(18px) saturate(125%);
}

/* значок у квадратній плашці, а не в кружку: --radius у системі 0,
   і круглий медальйон був би єдиним округленням на весь сайт */
.amen__head{ display:flex; align-items:center; gap:14px; margin-bottom:20px; }
.amen__ic{
  width:44px; height:44px; flex:none;
  display:grid; place-items:center;
  background:rgba(150,173,144,.28);
}
.amen__ic::before{
  content:""; width:22px; height:22px; background:var(--green);
}
.amen__ic--chair::before{
  -webkit-mask:var(--ic-chair) center/contain no-repeat;
          mask:var(--ic-chair) center/contain no-repeat;
}
.amen__ic--calendar::before{
  -webkit-mask:var(--ic-calendar) center/contain no-repeat;
          mask:var(--ic-calendar) center/contain no-repeat;
}
.amen__title{
  margin:0;
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.45rem, 2.1vw, 1.85rem); line-height:1.18;
  color:var(--green);
}
.amen__list{ display:grid; gap:12px; font-size:15px; }
.amen__list li{ position:relative; padding-left:22px; line-height:1.5; }
/* маркер-монограма — той самий прийом, що й у списку спа-послуг */
.amen__list li::before{
  content:""; position:absolute; left:2px; top:calc(.75em - 7px);
  width:12px; height:14px;
  background:var(--mark) center/contain no-repeat;
}

/* --- перелік конкретних номерів усередині категорії --- */
.vars{ margin-top:clamp(36px, 4vw, 56px); }
/* Заголовок блоку варіантів — по центру, як шапки секцій по всьому сайту
   (Дарʼя 2026-08-19). Орнамент під ним і так на всю ширину, тож центр
   заголовка ставить обидва елементи на одну вісь */
.vars__title{
  text-align:center;
  margin:0 0 22px;
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.6rem, 2.6vw, 2.3rem); line-height:1.15;
  color:var(--green);
}
.vars__list{ display:grid; gap:10px; }

/* Один варіант розміщення — перелік «мітка → значення» замість таблиці на
   чотири колонки (Дарʼя 2026-08-17: під єдиний рядок шапка виглядала
   порожньою). Розмітка та сама, що в характеристиках номера збоку */
/* Перелік характеристик єдиного варіанта теж стоїть посередині колонки.
   Усередині рядків вирівнювання лишається по сітці «значок — підпис —
   значення»: центрувати сам текст не можна, інакше колонки роз'їдуться */
.vars__facts{ display:grid; max-width:760px; margin-inline:auto; }
.vars__facts{ gap:14px; }
/* сітку задає спільне правило вище — див. коментар у .var__list li */
.vars__facts li{ gap:12px; }
.vars__facts span{ font-size:15px; color:rgba(37,40,36,.72); }
.vars__facts b{ font-weight:500; color:var(--green); }
@media (max-width:600px){
  /* на телефоні значення переходить під підпис, але значок лишається у своїй
     колонці — інакше він стає окремим рядком над текстом */
  .vars__facts li{ grid-template-columns:20px minmax(0,1fr); gap:4px 12px; }
  .vars__facts li b{ grid-column:2; }
}
.vars__row{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,.7fr) minmax(0,1.5fr) minmax(0,.5fr);
  gap:8px 20px; align-items:baseline;
  padding:16px clamp(16px, 1.8vw, 24px);
  background:var(--glass); border-radius:var(--radius);
}
.vars__row--head{
  padding-block:0; background:none;
  font:500 13px/1.4 var(--sans);
  color:rgba(35,81,76,.6);
}
.vars__row--head span{ font-size:inherit; color:inherit; }
.vars__name{ font-weight:500; font-size:15px; color:var(--green); }
.vars__meta{ font-size:13px; color:rgba(37,40,36,.7); }
.vars__note{ font-size:14px; color:rgba(37,40,36,.72); }
.vars__price{
  justify-self:end;
  font:600 16px/1.2 var(--sans); color:var(--green);
}
/* .vars__hint («Ціни вказані за номер без SPA-комплексу…») знято зі сторінок
   номерів 2026-08-16 — той самий текст уже стоїть під ціною в .spec__note */

/* --- варіант із власними знімками ---
   Рішення Дарʼї 2026-08-16: клієнтка прислала фото по КОЖНОМУ корпусу, і рядок
   таблиці цього вже не вміщає — гість має бачити, чим номер в оздоровчому
   комплексі відрізняється від номера в новому готелі. Тому варіант виріс у блок
   із власною галереєю. Обробник `[data-gal]` у main.js слухає кожну галерею
   окремо, тому кілька галерей на сторінці працюють без правок скрипта.
   Заливки немає навмисно: `--light` — той самий крем, що й фон сторінки,
   блок тримається знімком і відступом, як картки `.cat`.
   Розкладка рядками, і сторони ЧЕРГУЮТЬСЯ (Дарʼя 2026-08-16: «справа, потом
   слева, так списком плохо смотрится и места много занимает»). Той самий
   прийом, що й у блоків `.venue` на сторінці відпочинку: парний ряд дзеркалить
   колонки, і сторінка перестає читатися одноманітним стовпцем.
   Знімки — мозаїкою, а не «головний кадр + стрічка мініатюр»: усі кадри
   варіанта видно одразу, клікати нічого не треба, і блок став удвічі нижчим
   (було 600–720 px на варіант, стало 300–380) */
.vars__grid{ display:grid; gap:clamp(40px, 4.6vw, 72px); }
/* ⚠️ align-items лишається `center`. Спроба поставити `stretch` 2026-08-19
   (щоб ціни всіх варіантів сіли на нижню лінію мозаїки) вийшла боком: мозаїка
   розтягується разом із панеллю, її aspect-ratio 3/2 перебивається — плитки
   стають вищими, і кадри ріжуться інакше, ніж задумано. Краще нерівні по
   висоті ряди, ніж поїхале кадрування */
.var{
  display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);
  gap:clamp(24px, 3vw, 52px); align-items:center;
}
.var:nth-child(even){ grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr); }
/* переставляємо ПЕРШУ дитину, а не саму мозаїку: у варіанта без фото замість
   мозаїки стоїть заглушка `.gal__main--stub`, і правило на .var__mosaic її
   не чіпало — у парному ряду вона лишалася ліворуч, у вузькій колонці */
.var:nth-child(even) > :first-child{ order:2; }

/* Мозаїка: перша плитка велика (2×2), решта — квадрати збоку. Квадрат обрізає
   і вертикальний, і горизонтальний кадр однаково на чверть — це передбачувано,
   на відміну від рамки 4:3, де від вертикального знімка лишалася половина.
   Пропорцію тримає САМА мозаїка, а не плитки: якщо ставити aspect-ratio плитці,
   велика (їй потрібен span 2) лишається на auto й тягнеться за знімком —
   вертикальний кадр робив блок на 170 px вищим за сусідній горизонтальний */
.var__mosaic{
  display:grid; gap:8px;
  grid-template-columns:repeat(3, minmax(0,1fr));
  grid-template-rows:repeat(2, minmax(0,1fr));
  aspect-ratio:3/2;
}
.var__mosaic figure{ margin:0; overflow:hidden; background:var(--sage); }
.var__mosaic img{ display:block; width:100%; height:100%; object-fit:cover; }
.var__mosaic--3 figure:first-child{ grid-column:span 2; grid-row:span 2; }
/* aspect-ratio у всіх модифікаторів ОДИН (3:2) — міняється тільки сітка.
   Інакше ряди виходять різної висоти: варіант із чотирьох кадрів у квадратній
   мозаїці був на 250 px вищий за сусідній, і сторінка знову «займала багато
   місця», проти чого й затівалася переробка */
.var__mosaic--2{ grid-template-columns:repeat(2, minmax(0,1fr)); grid-template-rows:1fr; }
.var__mosaic--4{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.var__mosaic--1{ grid-template-columns:1fr; grid-template-rows:1fr; }

/* Опис варіанта — панель поруч із мозаїкою (референс Дарʼї 2026-08-19).
   Поверхня та сама, що в .amen__col: матове скло замість заливки */
.var__body{
  display:flex; flex-direction:column;
  /* поле помірне: панель і так вища за мозаїку через ціну з кнопкою,
     а кожні зайві 10px відступу ростуть удвічі — зверху й знизу */
  padding:clamp(20px, 1.9vw, 26px);
  background:var(--glass);
  border:1px solid rgba(255,255,255,.45);
  box-shadow:0 10px 30px -18px rgba(17,33,31,.10), inset 0 1px 0 rgba(255,255,255,.4);
  -webkit-backdrop-filter:blur(18px) saturate(125%);
          backdrop-filter:blur(18px) saturate(125%);
}
.var__name{
  margin:0 0 8px;
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.25rem, 1.9vw, 1.55rem); line-height:1.16;
  color:var(--green);
}

/* ---- орнамент-розділювач ----
   Рисочка з ромбиком по центру — з референсу Дарʼї. Ромбик той самий, що
   маркерує переліки, тож блок читається як частина набору, а не як нова
   деталь. Це НЕ ті лінії між рядками, що прибрані 17.08: там вони різали
   ритм таблиці, тут — підпис під заголовком */
.orn{ display:flex; align-items:center; gap:14px; }
.orn::before,
.orn::after{ content:""; flex:1; height:1px; background:rgba(35,81,76,.14); }
.orn i{
  width:16px; height:18px; flex:none;
  background:var(--mark) center/contain no-repeat;
}
/* під заголовком блоку варіантів — на всю ширину, під назвою варіанта — вужче */
.vars > .orn{ margin:0 0 clamp(26px, 3vw, 40px); }
.var__body > .orn{ margin:0 0 18px; }
.var__meta{ margin:0 0 6px; font:500 14px/1.5 var(--sans); color:rgba(35,81,76,.65); }
.section .var__note{ margin:0 0 12px; font-size:14px; line-height:1.5; color:rgba(37,40,36,.72); }
/* Ціна стоїть у власній плашці внизу панелі (референс Дарʼї 2026-08-19):
   у ряду з кількох варіантів вона так лягає на одну лінію незалежно від
   довжини назви. Цифра — антиквою, як у ціні номера збоку; акцентного
   кольору тут немає, вага й кегль справляються самі */
.var__pricebox{
  margin-top:auto;
  display:flex; align-items:baseline; gap:8px;
  padding:16px clamp(16px, 1.6vw, 22px);
  background:rgba(150,173,144,.22);
}
.section .var__price{
  margin:0;
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.6rem, 2.2vw, 2.1rem); line-height:1;
  color:var(--green);
}
.var__price b{ font-family:var(--serif); font-weight:400; font-size:.58em; }
.var__price span{ font:500 13px/1.2 var(--sans); color:rgba(37,40,36,.62); }

/* кнопка під плашкою ціни, на всю ширину панелі */
.var__cta{ margin-top:14px; }
.var__cta .btn{ width:100%; }

/* Список характеристик варіанта — така сама двоколонкова сітка «підпис–значення»,
   що й у .spec__list праворуч; заміняє інлайновий рядок «2 гості · 1 кімната · …» */
.var__list{ display:grid; gap:8px; margin:0 0 12px; }
/* сітку задає спільне правило вище (три колонки — значок, підпис, значення).
   Тут лишається тільки кегль: власний grid-template-columns перебивав би те
   правило й повертав дві колонки, а значок займав би місце підпису */
.var__list li{ font-size:14px; line-height:1.45; }
.var__list span{ color:rgba(37,40,36,.62); }
.var__list b{ font-weight:500; color:var(--green); }

@media (max-width:1180px){
  .cat__grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .room-page__grid{ grid-template-columns:1fr; }
  .spec{ position:static; }
  /* вузько для чотирьох колонок: назва, місткість і особливості стають стовпчиком,
     ціна лишається праворуч */
  .vars__row{ grid-template-columns:minmax(0,1fr) auto; }
  .vars__name,
  .vars__meta,
  .vars__note{ grid-column:1; }
  .vars__price{ grid-column:2; grid-row:1 / span 3; align-self:center; }
  .vars__row--head{ display:none; }
}
@media (max-width:900px){
  .amen{ grid-template-columns:1fr; }
  /* знімок і опис поруч тут уже не вміщаються — опис іде під фото.
     Дзеркалення в один стовпець теж знімаємо, інакше в парних рядах опис
     опинявся б над фото, а в непарних під ним */
  .var,
  .var:nth-child(even){ grid-template-columns:1fr; gap:18px; }
  .var:nth-child(even) .var__mosaic{ order:0; }
}
@media (max-width:700px){
  .cat__grid{ grid-template-columns:1fr; }
  /* правило вище має два класи й саме собою цей рядок не перебиває */
  .rooms-page .cat__grid{ grid-template-columns:1fr; }
  /* в один стовпець широкій картці нічого розкладати — стає звичайною */
  .rooms-page .cat--wide{ flex-direction:column; }
  .rooms-page .cat--wide .cat__photo{ flex:none; aspect-ratio:3/2; min-height:0; }
  /* --thumb-cols-sm — свій розклад для телефона: у стрічки з 4 і 8 мініатюр
     він 2, інакше остання знову висла б у рядку сама */
  .gal__thumbs{ grid-template-columns:repeat(var(--thumb-cols-sm, min(var(--thumb-cols, 4), 3)), minmax(0,1fr)); }
  .spec__actions .btn{ width:100%; }
}

/* ==================== ЗБІЛЬШЕННЯ ЗНІМКА ====================
   Дарʼя 2026-08-16: «щоб при наведенні картинки як би вистрибували і
   збільшувались, а при натисканні відкривалась повна версія».
   Ефект живе ТІЛЬКИ там, де клік справді відкриває повний розмір, — окремим
   уточненням: «там де мініатюри, не треба збільшувати, де переходи теж».
   Тому сюди не входять `.gal__thumb` (клік міняє кадр місцями з головним),
   `.cat`/`.panel`/`.ig__cell` (клік веде на сторінку) і гармошка
   `.showcase__strip` (у неї свій рух — панель розсуває сусідів).
   Плитка підводиться й лягає тінню, а знімок усередині наїжджає — рамка
   лишається на місці, тому сітка не стрибає */
.var__mosaic figure,
.gal__main,
.card__ph,
.showcase__hero{
  position:relative;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.var__mosaic figure img,
.gal__main img,
.card__ph img,
.showcase__hero img,
.spa__img{ transition:transform .55s var(--ease), opacity .18s var(--ease); }

/* zoom-in підказує, що знімок відкривається, — інакше про клік ніхто не здогадається */
.var__mosaic figure,
.gal__main,
.card__ph,
.showcase__hero,
.showcase__strip > figure,
.spa__img{ cursor:zoom-in; }

.var__mosaic figure:hover,
.gal__main:hover,
.card__ph:hover,
.showcase__hero:hover{
  z-index:2;
  transform:translateY(-6px);
  box-shadow:0 20px 44px rgba(17,33,31,.24);
}
.var__mosaic figure:hover img,
.gal__main:hover img,
.card__ph:hover img,
.showcase__hero:hover img{ transform:scale(1.06); }

/* клавіатура: те саме підсвічування, що й на hover, плюс видима обводка */
.var__mosaic figure:focus-visible,
.gal__main:focus-visible,
.card__ph:focus-visible,
.showcase__hero:focus-visible,
.showcase__strip > figure:focus-visible,
.spa__img:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

@media (prefers-reduced-motion:reduce){
  .var__mosaic figure,
  .gal__main,
  .card__ph,
  .showcase__hero,
  .var__mosaic figure img,
  .gal__main img,
  .card__ph img,
  .showcase__hero img{ transition:none; }
  .var__mosaic figure:hover,
  .gal__main:hover,
  .card__ph:hover,
  .showcase__hero:hover{ transform:none; }
  .var__mosaic figure:hover img,
  .gal__main:hover img,
  .card__ph:hover img,
  .showcase__hero:hover img{ transform:none; }
}

/* ==================== ПОВНИЙ РОЗМІР ЗНІМКА (лайтбокс) ====================
   Розмітку створює скрипт (main.js), у HTML нічого додавати не треба —
   сторінок 14, і дублювати оверлей у кожній з них не варто */
.lb{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(16px, 4vw, 56px);
  /* тон підвалу (--sage-deep), а не брендовий зелений: на насиченому зеленому
     знімки набували зеленуватого відтінку, а підпис під ними ледве читався.
     Дарʼя 2026-08-16 дала вибір «світлий як тло або темний як підвал» —
     узятий темний: на світлому тлі знімок втрачає контур і губиться.
     Щоб повернути світлий, замінити цей рядок на var(--sand-bg) і перевести
     підпис із кремового на --ink (кнопки вже мають темний варіант нижче) */
  background:rgba(17,33,31,.97);
  opacity:0; visibility:hidden;
  transition:opacity .25s var(--ease), visibility .25s var(--ease);
}
.lb.is-open{ opacity:1; visibility:visible; }
/* сторінка під переглядом не їде: `is-locked` від мобільного меню тут не
   годиться — він оголошений усередині медіазапиту й на десктопі не працює */
body.lb-on{ overflow:hidden; }
.lb__fig{ margin:0; max-width:100%; max-height:100%; display:flex; flex-direction:column; gap:14px; }
.lb__img{
  max-width:100%; max-height:calc(100vh - clamp(120px, 18vw, 190px));
  margin:auto; object-fit:contain;
  opacity:1; transition:opacity .18s var(--ease);
}
.lb__img.is-fading{ opacity:0; }
.lb__cap{
  display:flex; align-items:center; justify-content:center; gap:16px;
  font:500 14px/1.4 var(--sans); color:rgba(246,242,233,.82); text-align:center;
}
/* .6 на цьому тлі давало 4,2:1 — для 14px замало, тому світліше */
.lb__count{ font-variant-numeric:tabular-nums; color:rgba(246,242,233,.75); }

/* кнопки: кремова обводка на темному тлі — зелена заливка тут би зникла */
.lb__btn{
  position:absolute; z-index:2;
  display:flex; align-items:center; justify-content:center;
  width:48px; height:48px;
  color:var(--light); background:rgba(37,40,36,.4);
  /* рамка кнопки — нетекстовий елемент, норма 3:1; на .34 виходило 2,38 */
  border:1px solid rgba(246,242,233,.46);
  transition:background .25s var(--ease), border-color .25s var(--ease);
}
.lb__btn:hover{ background:rgba(37,40,36,.72); border-color:var(--light); }
.lb__btn:focus-visible{ outline:2px solid var(--sand); outline-offset:3px; }
.lb__btn--close{ top:clamp(12px, 2vw, 24px); right:clamp(12px, 2vw, 24px); }
.lb__btn--prev{ left:clamp(8px, 2vw, 28px); top:50%; transform:translateY(-50%); }
.lb__btn--next{ right:clamp(8px, 2vw, 28px); top:50%; transform:translateY(-50%); }
.lb__btn[hidden]{ display:none; }
/* стрілки й хрестик малюємо самим шрифтом, щоб не тягнути іконки */
.lb__btn::before{ content:""; width:14px; height:14px; border:2px solid currentColor; border-width:2px 2px 0 0; }
.lb__btn--prev::before{ transform:rotate(-135deg); margin-left:5px; }
.lb__btn--next::before{ transform:rotate(45deg); margin-right:5px; }
.lb__btn--close::before{
  width:20px; height:2px; border:0; background:currentColor;
  box-shadow:0 0 0 0 currentColor; transform:rotate(45deg);
}
.lb__btn--close::after{ content:""; position:absolute; width:20px; height:2px; background:currentColor; transform:rotate(-45deg); }

@media (max-width:700px){
  /* на телефоні стрілки з'їдають знімок — гортання пальцем, кнопки внизу */
  .lb__btn--prev{ left:8px; }
  .lb__btn--next{ right:8px; }
  .lb__btn{ width:42px; height:42px; }
}
@media (prefers-reduced-motion:reduce){
  .lb, .lb__img{ transition:none; }
}

/* ==================== СТОРІНКА «ПРАВИЛА ПРОЖИВАННЯ» ====================
   Юридичний документ, перенесений дослівно з pravila.pdf клієнта. Головне тут —
   читабельність довгого тексту: колонка вужча за контейнер (65ch), номер пункту
   висить окремим стовпчиком, щоб абзац не «наїжджав» на нього другим рядком */
.legal__doc{ max-width:65ch; }
/* перехід по якорю зупиняється під фіксованою шапкою, інакше заголовок розділу
   ховається за нею. У решті сайту scroll-margin ніде не заданий — якщо якорі
   «Контакти» й «Бронювання» теж почнуть заїжджати під шапку, лікувати так само */
.legal__block{ scroll-margin-top:calc(var(--header-h) + 24px); }
.legal__block + .legal__block{
  margin-top:clamp(48px, 5vw, 76px);
}
.legal__h{
  margin:0 0 22px;
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.45rem, 2.1vw, 1.85rem); line-height:1.18;
  color:var(--green);
}
.legal__h3{
  margin:32px 0 16px;
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.15rem, 1.6vw, 1.35rem); line-height:1.2;
  color:var(--green);
}
.legal__list{ display:grid; gap:14px; }
/* номер окремою колонкою: у списку 1.10–1.12 номери довші, тому не фіксована
   ширина, а auto — колонка сама підлаштується під найдовший номер розділу */
.legal__list > li{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px;
  font-size:15px; line-height:1.6;
}
.legal__num{ font-weight:500; color:var(--green); font-variant-numeric:tabular-nums; }
/* вкладені переліки всередині пункту — ромбик-маркер, як у .amen__list */
.legal__sub,
.legal__plain{ display:grid; gap:8px; margin-top:10px; }
.legal__sub li,
.legal__plain li{ position:relative; padding-left:20px; line-height:1.55; }
.legal__sub li::before,
.legal__plain li::before{
  content:""; position:absolute; left:2px; top:calc(.75em - 6px);
  width:10px; height:12px;
  background:var(--mark) center/contain no-repeat;
}
.legal__plain{ margin:12px 0 20px; font-size:15px; }
.section .legal__lead{ margin:0; font-weight:500; color:var(--green); }
.section .legal__block p{ font-size:15px; line-height:1.6; }
.section .legal__note{
  margin-top:clamp(38px, 4vw, 56px);
  font-size:14px; color:rgba(37,40,36,.72);
}
.legal__note a{ color:var(--green); font-weight:500; }
.legal__note a:hover{ color:var(--accent-d); }

/* ==================== СТОРІНКА «РЕСТОРАН» ==================== */

/* НЕ ВИКОРИСТОВУЄТЬСЯ з 2026-08-13: шапка сторінки стала на весь екран, у ній
   лишився тільки заголовок по центру, тому розкладка «заголовок ліворуч, лінія
   й анонс праворуч» більше нікуди не чіпляється. Правила лишені на випадок,
   якщо схочемо повернути — новим блокам їх не давати */
.page-hero--split .container{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  gap:8px clamp(28px, 5vw, 96px); align-items:end;
}
.page-hero--split .crumbs{ grid-column:1 / -1; }
.page-hero--split .page-hero__title{ margin-bottom:0; }
.page-hero__aside{ padding-bottom:10px; }
.page-hero__line{
  display:block; width:clamp(90px, 12vw, 150px); height:1px;
  margin-bottom:20px; background:rgba(35,81,76,.35);
}

/* --- заклади: велике фото і текст поруч, сторони чергуються --- */
.venues{ display:grid; gap:clamp(56px, 7vw, 120px); }

.venue{
  display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(28px, 4vw, 64px); align-items:center;
}
/* з 2026-08-19 перелік послуг на головній веде на конкретний блок цієї
   сторінки: відступ під фіксовану шапку, інакше назва ховається за нею */
.venue[id]{ scroll-margin-top:calc(var(--header-h) + 24px); }
/* У парних рядах фото переїжджає праворуч — разом із ним міняються місцями
   і частки колонок, інакше знімок опинявся у вужчій половині і секція
   провисала (у басейнів текст короткий, і праворуч лишався дрібний кадр).
   Фото всюди ширше за текст: пропорція та сама, тільки дзеркальна */
.venue:nth-child(even){ grid-template-columns:minmax(0,1fr) minmax(0,1.35fr); }
.venue:nth-child(even) .venue__media{ order:2; }

.venue__name{
  /* відступ під назвою — як у решти заголовків секцій (22px): на 14px він
     стояв надто близько до тексту (Дарʼя 2026-08-17) */
  margin:0 0 22px;
  font-family:var(--serif); font-weight:400;
  font-size:clamp(2rem, 3.4vw, 3rem); line-height:1.1; letter-spacing:0;
  color:var(--green);
}
.section .venue__contact{
  display:flex; flex-wrap:wrap; gap:8px 22px; margin:0 0 22px;
  font:600 16px/1.3 var(--sans);
  color:var(--green);
}
.venue__contact a{ transition:color .25s var(--ease); }
.venue__contact a:hover{ color:var(--green); }

.section .venue__info p{ max-width:56ch; }

.venue__facts{ display:grid; gap:10px; margin-top:24px; font-size:15px; }
.venue__facts li{ position:relative; padding-left:22px; line-height:1.5; }
.venue__facts li::before{
  content:""; position:absolute; left:2px; top:calc(.75em - 7px);
  width:12px; height:14px;
  background:var(--mark) center/contain no-repeat;
}

/* попередження в картці послуги: мусить читатися, але не сперечатися з
   переліком фактів вище — тому дрібніше й з лінією збоку, а не рамкою */
.section .venue__warn{
  margin:22px 0 0; padding-left:14px;
  border-left:2px solid var(--sand);
  font-size:14px; line-height:1.55; color:rgba(37,40,36,.72);
}

.venue__actions{
  display:flex; flex-wrap:wrap; gap:12px;
  margin-top:clamp(24px, 2.6vw, 34px);
}

/* --- фірмові страви --- */
.dishes{ background:var(--sage); }

/* картка страви — колонка, щоб ціна притискалася донизу і в ряду всі
   цінники стояли на одній лінії, хоч би якої довжини були описи (2026-08-20) */
.dish{ display:flex; flex-direction:column; }
.section .dish .price-tag{ margin-top:auto; padding-top:14px; }

/* страв рівно чотири (2026-08-20) — знову рівний ряд у чотири стовпці */
.dishes__grid{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  gap:clamp(20px, 2.4vw, 32px);
}
.dish__ph{ aspect-ratio:4/3; margin-bottom:clamp(16px, 1.8vw, 22px); overflow:hidden; }
/* там, де замість заглушки справжній знімок: figure без .ph лишається з
   браузерним margin, тому обнуляємо його, як у карток розваг */
.dish__ph{ margin-block-start:0; margin-inline:0; }
.dish__ph img{ display:block; width:100%; height:100%; object-fit:cover; }
.dish__name{
  margin:0 0 10px;
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.35rem, 1.9vw, 1.7rem); line-height:1.18;
  color:var(--green);
}
.section .dish p{ margin:0; font-size:15px; }

@media (max-width:1180px){
  .dishes__grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:900px){
  .page-hero--split .container{ grid-template-columns:1fr; }
  .page-hero--split .page-hero__title{ margin-bottom:20px; }
  .page-hero__aside{ padding-bottom:0; }
  .page-hero__line{ display:none; }
  /* у стовпчик фото завжди йде першим, тому чергування вимикаємо.
     Колонки парних рядів скидаємо ОКРЕМИМ рядком: правило вище задане
     селектором `.venue:nth-child(even)`, він важчий за `.venue`, і медіа-
     запит ваги не додає — без цього рядка кожен другий заклад лишався
     у дві колонки аж до 320px, де текст і кнопки вилазили з рамок */
  .venue,
  .venue:nth-child(even){ grid-template-columns:1fr; }
  .venue:nth-child(even) .venue__media{ order:0; }
}
@media (max-width:700px){
  .dishes__grid{ grid-template-columns:1fr; }
  .venue__actions .btn{ width:100%; }
}

/* ==================== СТОРІНКА «ВІДПОЧИНОК» ==================== */

/* чергування тла: вода (тло сайту) → оздоровлення (світла поверхня)
   → активності (.acts, зелений відтінок) → прайс (тло сайту) → темний CTA */
.wellness{ background:var(--light); }

/* --- рядок швидких переходів під шапкою сторінки --- */
.page-jump{ padding-bottom:clamp(24px, 3vw, 40px); }
.page-jump__list{
  display:flex; flex-wrap:wrap; gap:10px 12px;
  padding-top:clamp(20px, 2.4vw, 32px);
}
.page-jump__list a{
  display:block; padding:9px 18px;
  border:1px solid rgba(35,81,76,.22); border-radius:var(--radius);
  font:500 13px/1.2 var(--sans); letter-spacing:.04em;
  color:var(--green);
  transition:color .25s var(--ease), border-color .25s var(--ease), background-color .25s var(--ease);
}
.page-jump__list a:hover{ background:var(--green); border-color:var(--green); color:var(--light); }
.page-jump__list a:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

/* --- ціни всередині блоку послуги: назва ліворуч, сума праворуч --- */
.price-inline{
  display:grid; gap:8px;
  /* лінії над переліком немає — відступу достатньо */
  margin-top:clamp(26px, 2.8vw, 36px);
}
.price-inline li{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
}
.price-inline span{ font-size:15px; color:rgba(37,40,36,.72); }
.price-inline b{
  font:600 16px/1.2 var(--sans); white-space:nowrap;
  color:var(--green);
}

/* --- повний прайс: групи по дві в ряд --- */
.prices__groups{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:clamp(32px, 4vw, 64px) clamp(28px, 3vw, 48px);
  align-items:start;
}
.prices__title{
  margin:0 0 20px;
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.55rem, 2.4vw, 2.2rem); line-height:1.15;
  color:var(--green);
}
.prices__list{ display:grid; gap:8px; }
.prices__row{
  display:grid;
  grid-template-columns:minmax(0,1.6fr) minmax(0,.75fr) minmax(0,.75fr);
  gap:6px 18px; align-items:baseline;
  padding:14px clamp(16px, 1.6vw, 22px);
  background:var(--glass); border-radius:var(--radius);
}
.prices__row--head{
  padding-block:0; background:none;
  font:500 13px/1.4 var(--sans);
  color:rgba(35,81,76,.6);
}
.prices__name{ font-weight:500; font-size:15px; line-height:1.4; color:var(--green); }
.prices__meta{ font-size:13px; color:rgba(37,40,36,.7); }
.prices__price{
  justify-self:end; text-align:right;
  font:600 16px/1.25 var(--sans); color:var(--green);
}
.section .prices__note{
  margin:16px 0 0; font-size:13px; line-height:1.6; color:rgba(37,40,36,.62);
}

@media (max-width:1180px){
  .prices__groups{ grid-template-columns:1fr; }
}
@media (max-width:700px){
  /* вузько для трьох колонок: назва й час стають стовпчиком, ціна лишається праворуч */
  .prices__row{ grid-template-columns:minmax(0,1fr) auto; }
  .prices__name,
  .prices__meta{ grid-column:1; }
  .prices__price{ grid-column:2; grid-row:1 / span 2; align-self:center; }
  .prices__row--head{ display:none; }
}

/* ================== ПРОДАЮЧІ БЛОКИ ГОЛОВНОЇ ================== */

/* --- швидке бронювання: смуга одразу під Hero ---
   Hero лишається на весь екран, панель відкривається після невеликої прокрутки */
.quickbook{
  position:relative; z-index:1;
  padding:clamp(20px, 2.4vw, 30px) 0;
  background:var(--light);
  border-bottom:1px solid rgba(35,81,76,.12);
}

.quickbook__form{
  display:grid; align-items:end;
  grid-template-columns:minmax(0,1.15fr) repeat(2, minmax(0,1fr)) minmax(0,.62fr) minmax(0,1.15fr) auto;
  gap:16px clamp(14px, 1.6vw, 24px);
}

.quickbook__lead{ align-self:center; }
.quickbook__title{
  margin:0 0 4px;
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.3rem, 1.9vw, 1.6rem); line-height:1.15;
  color:var(--green);
}
.section .quickbook__note,
.quickbook__note{ margin:0; font-size:14px; color:rgba(37,40,36,.62); }

.quickbook__field{ margin-bottom:0; }
.quickbook__submit{ white-space:nowrap; }

/* статус відправки займає весь рядок під полями */
.quickbook__status{ grid-column:1 / -1; margin:0; }
.quickbook__status:empty{ display:none; }

/* після успішної відправки лишається тільки підтвердження */
.quickbook__form.is-sent .field,
.quickbook__form.is-sent .quickbook__submit{ display:none; }
.quickbook__form.is-sent .quickbook__status{ margin:0; font-size:17px; }

@media (max-width:1180px){
  .quickbook__form{ grid-template-columns:repeat(4, minmax(0,1fr)); }
  .quickbook__lead{ grid-column:1 / -1; }
  .quickbook__submit{ grid-column:1 / -1; }
}
@media (max-width:600px){
  .quickbook__form{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}

/* --- та сама смуга, але прибита до низу шапки внутрішньої сторінки ---
   На головній панель лежить ПІД Hero: перший екран віддано відео, смугу видно
   після невеликої прокрутки. На сторінці номерів бронювання — головна дія, тому
   та сама смуга стоїть УСЕРЕДИНІ .page-hero і видна одразу (рішення Дарʼї
   2026-08-13). Шапка стає колонкою: заголовок центрується у вільній частині
   екрана, смуга займає низ. Висоту смуги не фіксуємо — низ тримає сам потік,
   тому на вужчих екранах, де форма перебудовується в кілька рядків, заголовок
   просто підтискається вгору й нічого не перекривається */
.page-hero--book{
  flex-direction:column;
  justify-content:center;
  /* напрямок колонковий, тому спільний align-items:flex-end зсунув би
     контейнер убік — тут він тягнеться на всю ширину */
  align-items:stretch;
  padding-bottom:0;
  text-align:left;
}
.page-hero--book > .container{
  flex:1 1 auto;
  /* заголовок притиснутий до низу вільної частини — тієї, що лишилася над
     смугою бронювання (Дарʼя 2026-08-18). Просвіт до смуги той самий
     --hero-bottom, що й на решті сторінок до низу шапки: поле секції тут
     зняте (padding-bottom:0), тому додаємо його повністю сюди */
  display:flex; align-items:flex-end; justify-content:center;
  padding-bottom:var(--hero-bottom);
  width:100%;
  transform:none;
  text-align:center;
}

.quickbook--onhero{
  width:100%;
  color:var(--ink);
  /* межа тепер зверху: під смугою йде вже наступна секція сторінки */
  border-top:1px solid rgba(35,81,76,.12);
  border-bottom:0;
}

/* --- готові сценарії: три пакети з підсумковою ціною --- */
.offers__grid{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(20px, 2.4vw, 32px);
}
.offer{
  display:flex; flex-direction:column;
  padding:clamp(26px, 2.6vw, 36px);
  background:var(--glass); border-radius:var(--radius);
}
.section .offer .eyebrow{ margin-bottom:14px; }
.offer__name{
  margin:0 0 20px;
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.5rem, 2.2vw, 1.95rem); line-height:1.15;
  color:var(--green);
}
/* опис сценарію: один абзац замість переліку пунктів (Дарʼя 2026-08-17).
   Власний margin гасимо — повітря до ціни дає її верхній падинг */
.section .offer__text{ margin:0; font-size:16px; line-height:1.6; }

/* НЕ ВИКОРИСТОВУЄТЬСЯ з 2026-08-17: пункти в картках форматів замінені
   на .offer__text. Правила лишені на випадок повернення */
.offer__list{ display:grid; gap:10px; font-size:16px; }
.offer__list li{ position:relative; padding-left:22px; line-height:1.5; }
.offer__list li::before{
  content:""; position:absolute; left:2px; top:calc(.75em - 7px);
  width:12px; height:14px;
  background:var(--mark) center/contain no-repeat;
}
/* ціну притискаємо донизу, щоб у ряду вона стояла на одній лінії */
.section .offer__price{
  margin:auto 0 20px;
  padding-top:clamp(20px, 2.2vw, 26px);
  font:600 24px/1.2 var(--sans); color:var(--green);
}
.offer__price span{ font-weight:400; font-size:15px; color:rgba(37,40,36,.62); }

/* --- відгуки: секцію зняли з головної 2026-08-17, поки немає доступу до
   профілю в Google (див. коментар на її місці в index.html). Правила лишені
   під повернення — новим блокам їх не давати --- */
.reviews{ background:var(--sage); }

.reviews__grid{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(20px, 2.4vw, 32px);
}
.review{
  display:flex; padding:clamp(24px, 2.6vw, 34px);
  background:var(--glass); border-radius:var(--radius);
}
/* слот-заглушка виглядає як порожнє місце, а не як відгук */
.review.is-placeholder{
  align-items:center; justify-content:center;
  min-height:180px;
  background:none; border:1px dashed rgba(35,81,76,.3);
}
.section .review__slot{
  margin:0; text-align:center;
  font-size:14px; color:rgba(35,81,76,.5);
}
.reviews__foot{ margin-top:clamp(28px, 3vw, 40px); }

/* --- FAQ: закриття заперечень перед заявкою --- */
.faq{ background:var(--light); }

.faq__list{ max-width:900px; margin-inline:auto; }
/* Ліній-розділювачів між питаннями немає (Дарʼя 2026-08-17). Ритм тримає
   тільки падинг самого питання — по 22px зверху й знизу, тобто 44px між
   сусідніми рядками. Компонент один, тому так само на spa.html */
.faq__item{ border:0; }

.faq__q{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:22px 0; cursor:pointer; list-style:none;
  font-family:var(--serif); font-size:clamp(1.15rem, 1.6vw, 1.4rem); line-height:1.3;
  color:var(--green);
  transition:color .25s var(--ease);
}
.faq__q::-webkit-details-marker{ display:none; }
.faq__q:hover{ color:var(--accent-d); }
.faq__q:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

/* плюс, який стає мінусом — без іконної бібліотеки */
.faq__q::after{
  content:""; flex:none;
  width:14px; height:14px;
  background:
    linear-gradient(currentColor, currentColor) center/14px 1px no-repeat,
    linear-gradient(currentColor, currentColor) center/1px 14px no-repeat;
  transition:transform .3s var(--ease);
}
.faq__item[open] .faq__q::after{ transform:rotate(90deg); background-size:14px 1px, 0 0; }

.faq__a{ padding:0 0 24px; max-width:70ch; }
.section .faq__a p{ margin:0; font-size:16px; }

/* --- канали звʼязку у формі --- */
.section .book__channels{
  margin:clamp(24px, 2.6vw, 32px) 0 12px;
  font-size:15px; color:rgba(37,40,36,.7);
}
/* на темній панелі бронювання той самий рядок мусить бути світлим. Стоїть
   саме тут, а не в блоці «БРОНЮВАННЯ»: правило вище за файлом програвало
   цьому за порядком, і напис лишався темним на темному */
.section .book__aside .book__channels{ color:rgba(246,242,233,.7); }
.messengers{ display:flex; flex-wrap:wrap; gap:10px; }
.messenger{
  display:inline-flex; align-items:center; gap:8px;
  height:var(--control-h-sm); padding:0 20px;
  border:1px solid rgba(35,81,76,.28); border-radius:var(--radius);
  font:500 15px/1 var(--sans); color:var(--green);
  transition:border-color .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease);
}
.messenger:hover{ border-color:var(--green); background:var(--green); color:var(--light); }
.messenger:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.messenger__ic{
  width:16px; height:16px; background:currentColor;
  -webkit-mask:var(--ic-phone) center/contain no-repeat;
          mask:var(--ic-phone) center/contain no-repeat;
}

/* --- необовʼязкові поля форми --- */
.book__more{ margin-bottom:18px; }
.book__more-toggle{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 0; cursor:pointer; list-style:none;
  font:500 15px/1.3 var(--sans); color:var(--green);
}
.book__more-toggle::-webkit-details-marker{ display:none; }
.book__more-toggle:hover{ color:var(--accent-d); }
.book__more-toggle:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.book__more[open] .book__more-toggle{ margin-bottom:18px; }

/* --- липка панель дій на телефоні --- */
.sticky-cta{ display:none; }

@media (max-width:900px){
  .offers__grid,
  .reviews__grid{ grid-template-columns:1fr; }

  /* на телефоні головна дія завжди під рукою */
  .sticky-cta{
    position:fixed; left:0; right:0; bottom:0; z-index:5;
    display:flex; gap:10px;
    padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
    background:rgba(246,242,233,.96);
    border-top:1px solid rgba(35,81,76,.14);
    backdrop-filter:blur(6px);
  }
  .sticky-cta .btn{ flex:1 1 auto; }
  .sticky-cta__call{
    display:inline-flex; align-items:center; gap:8px;
    height:var(--control-h); padding:0 20px;
    border:1px solid rgba(35,81,76,.28); border-radius:var(--radius);
    font:500 14px/1 var(--sans); color:var(--green);
  }
  .sticky-cta__ic{
    width:16px; height:16px; background:currentColor;
    -webkit-mask:var(--ic-phone) center/contain no-repeat;
            mask:var(--ic-phone) center/contain no-repeat;
  }
  /* під відкритим меню панель не потрібна */
  body.is-locked .sticky-cta{ display:none; }
  /* щоб панель не перекривала підвал */
  .footer{ padding-bottom:calc(var(--control-h) + 40px); }
}

@media (max-width:600px){
  .sticky-cta__call{ padding:0 16px; }
}

/* ---------------------- доступність руху ---------------------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  /* відблиск при вимкненій анімації просто не потрібен */
  .hero__shine{ display:none; }
}

/* ================== СТОРІНКА SPA-КОМПЛЕКСУ ================== */
/* Другий комплекс під тим самим брендом, тому сторінка зібрана на спільних
   компонентах (.cards, .callout, .prices, .faq). Свій префікс spa2__ узятий,
   бо .spa__* уже зайняті секцією спа-релаксу на головній */

/* чергування тла між секціями: сторінка довга, і без зміни поверхні
   блоки зливаються в одну стрічку */
.spa2__bg-light{ background:var(--light); }
.spa2__bg-sage { background:var(--sage); }

/* ------------------------ шапка сторінки ------------------------ */
/* текст ліворуч, велика заглушка праворуч: одразу видно, що це вода */
.spa2__hero{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.9fr);
  gap:clamp(28px, 4vw, 64px); align-items:center;
}
.spa2__hero-ph{ aspect-ratio:4/3; }
/* анонс комплексу переїхав із шапки в першу секцію сторінки */
.spa2__opening{ padding-bottom:0; }
.spa2__hero-body .page-intro__lead{ margin-top:0; }

/* спільний рядок кнопок для всіх блоків сторінки */
.spa2__actions{
  display:flex; flex-wrap:wrap; gap:12px;
  margin-top:clamp(24px, 2.6vw, 34px);
}
.section .spa2__actions{ margin-bottom:0; }

/* --------------------- вибір зони під картою --------------------- */
/* запасний список під слот карти: працює без JS, тому це звичайні
   посилання-картки, а не залежні від скрипту точки */
.spa2__pick{ transition:transform .3s var(--ease); }
.spa2__pick .card__ph{ transition:border-color .3s var(--ease); }
.spa2__pick:hover{ transform:translateY(-4px); }
.spa2__pick:hover .card__name{ color:var(--accent-d); }
.spa2__pick:focus-visible{ outline:2px solid var(--accent); outline-offset:6px; }

/* мітка «Окремий вхід»: факт, який гості плутають найчастіше,
   тому виділений вагою й лінією, а не кольором */
.section .spa2__pick-tag{
  margin:0 0 10px;
  font:600 14px/1.3 var(--sans); color:var(--green);
}

/* ---------------------- формат відпочинку ---------------------- */
/* це блок вибору, а не перелік, тому картки більші за звичайні */
.spa2__modes{ gap:clamp(24px, 2.8vw, 40px); }
.spa2__modes .card__ph{ aspect-ratio:3/2; }

/* кнопка притискається донизу картки, щоб у ряду всі стояли на одній лінії.
   Селектор із .card — інакше `.card p` перебиває margin-top */
.card .spa2__mode-cta{ margin-top:auto; padding-top:clamp(18px, 2vw, 24px); }
.section .card .spa2__mode-cta{ margin-bottom:0; }

/* два блоки в ряд — для секцій, де об'єктів лише два */
.spa2__cards-two{ grid-template-columns:repeat(2, minmax(0,1fr)); }

/* --------------------- велика секція-об'єкт --------------------- */
/* фото і текст поруч; напрям чергується, щоб довга сторінка не читалася
   як одна колонка. Порядок міняємо тільки на десктопі — у стовпчик
   фото завжди має йти першим */
.spa2__feature{
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:clamp(28px, 4vw, 72px); align-items:center;
}
/* Знімок міняється місцями з текстом — так секції йдуть шахівницею.
   Селектор по ПОЗИЦІЇ, а не по класу: у слоті фото тепер стоїть або
   заглушка .spa2__feature-ph, або галерея .gal, і прив'язка до класу
   мовчки вимикала чергування, коли заглушки замінили на справжні знімки
   (зловлено 2026-08-21) */
.spa2__feature--flip > :first-child{ order:2; }
.spa2__feature-ph{ aspect-ratio:4/3; }
.spa2__feature-body .section__title{ margin-bottom:22px; }
.section .spa2__feature-body p{ max-width:56ch; }

/* перелік фактів об'єкта — той самий знак, що в картках закладів */
.spa2__list{ display:grid; gap:10px; margin-top:24px; font-size:15px; }
.spa2__list li{ position:relative; padding-left:22px; line-height:1.5; }
.spa2__list li::before{
  content:""; position:absolute; left:2px; top:calc(.75em - 7px);
  width:12px; height:14px;
  background:var(--mark) center/contain no-repeat;
}

/* ------------------------- як дістатися ------------------------- */
/* пари «поле — значення»: назви лишаються звичайним регістром,
   капс на сторінці належить надзаголовкам і кнопкам */
.spa2__facts{ display:grid; gap:14px; margin:26px 0 0; }
.spa2__fact{
  display:flex; flex-wrap:wrap; align-items:baseline;
  justify-content:space-between; gap:6px 20px;
}
.spa2__fact-name{ font:500 15px/1.4 var(--sans); color:var(--green); }
.spa2__fact-value{ margin:0; font-size:15px; text-align:right; }
/* На темній секції («Про комплекс і умови відвідування») темно-зелена назва
   зливалася б із тлом — 1,5:1. Беремо світлий на повну, а значення лишається
   приглушеним: так рядок ділиться на назву й відповідь без другого кольору */
.section--dark .spa2__fact-name{ color:var(--light); }

/* ---------------------- невідомі дані ---------------------- */
/* дані власники ще не підтвердили: мітка приглушена, щоб не читалася
   як обіцянка, але лишалася помітною при вичитуванні сторінки */
.spa2__tbd{
  font-size:.92em; color:rgba(37,40,36,.55); white-space:nowrap;
}
.section--dark .spa2__tbd{ color:rgba(246,242,233,.6); }

/* -------------------- прайс без цифр -------------------- */
/* у таблиці лише дві колонки замість трьох: колонки «час» тут немає,
   доки не підтверджено тривалість відвідування */
.spa2__prices .prices__row{
  grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
}

/* ------------------ картки-переходи на темному ------------------ */
/* на .section--dark брендовий зелений у заголовку картки тоне у фоні,
   тому назви світлішають, а наведення підсвічує пісочним */
.spa2__link-card .card__name{ color:var(--light); }
.spa2__link-card p{ color:rgba(246,242,233,.82); }
.spa2__link-card{ transition:transform .3s var(--ease); }
.spa2__link-card:hover{ transform:translateY(-4px); }
.spa2__link-card:hover .card__name{ color:var(--sand); }
.spa2__link-card:focus-visible{ outline:2px solid var(--sand); outline-offset:6px; }

.section--dark .callout{ border-color:rgba(246,242,233,.24); }
.section--dark .callout .card__name{ color:var(--light); }

@media (max-width:1180px){
  .spa2__feature{ gap:clamp(24px, 3vw, 48px); }
}
@media (max-width:900px){
  .spa2__hero{ grid-template-columns:1fr; }
  .spa2__hero-ph{ aspect-ratio:3/2; }

  .spa2__feature{ grid-template-columns:1fr; }
  /* у стовпчик фото завжди першим, тому чергування вимикаємо */
  .spa2__feature--flip > :first-child{ order:0; }
  .spa2__feature-ph{ aspect-ratio:3/2; }
  .section .spa2__feature-body p{ max-width:none; }

  .spa2__cards-two{ grid-template-columns:1fr; }
}
@media (max-width:600px){
  .spa2__actions .btn{ width:100%; }
  .spa2__mode-cta .btn{ width:100%; }
  .spa2__fact{ flex-direction:column; align-items:flex-start; }
  .spa2__fact-value{ text-align:left; }
}

/* ==================== КАРТА SPA-КОМПЛЕКСУ (spa.html) ====================
   Двоє рівнів занурення в одному контейнері: територія → план SPA,
   плюс панель превʼю обʼєкта. Розмітка — фрагмент [data-spa-map],
   логіка — assets/js/spa-map.js.
   Усі кольори — наявні токени; акцент живе тільки на інтерактиві.
   ======================================================================= */

.spamap{ position:relative; }

/* ------------------------- панель навігації ------------------------- */

.spamap__bar{
  display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px;
  margin-bottom:clamp(16px, 2vw, 24px);
}

.spamap__back{
  display:inline-flex; align-items:center;
  min-height:44px; padding:0 18px;
  font:600 12px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase;
  color:var(--green);
  border:1px solid rgba(35,81,76,.24); border-radius:var(--radius);
  transition:border-color .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease);
}
.spamap__back:hover{ border-color:var(--green); background:var(--green); color:var(--light); }
.spamap__back:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.spamap__back[hidden]{ display:none; }

.spamap__crumbs{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px;
  margin:0; padding:0; list-style:none;
  font:500 14px/1.3 var(--sans);
  color:rgba(35,81,76,.6);
}
.spamap__crumb{ display:flex; align-items:center; gap:6px 10px; }
.spamap__crumb + .spamap__crumb::before{ content:"/"; color:rgba(35,81,76,.35); }
.spamap__crumb[hidden]{ display:none; }

.spamap__crumb-btn{
  min-height:44px; padding:0 2px;
  font:inherit; color:inherit;
  transition:color .25s var(--ease);
}
.spamap__crumb-btn:hover{ color:var(--accent); }
.spamap__crumb-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

.spamap__crumb-cur{
  display:inline-flex; align-items:center; min-height:44px;
  color:var(--green);
}

/* --------------------------- розкладка --------------------------- */

.spamap__body{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(280px, 380px);
  gap:clamp(20px, 2.4vw, 36px);
  align-items:start;
}

/* ------------------------- сцена зі схемою ------------------------- */

.spamap__viewport{
  position:relative;
  aspect-ratio:1000/620;
  overflow:hidden;
  border:1px solid rgba(35,81,76,.14); border-radius:var(--radius);
  background:var(--light);
}

/* два рівні лежать один на одному; перемикання — тільки transform+opacity.
   visibility з відкладеною зміною прибирає прихований рівень із Tab-порядку */
.spamap__layer{
  position:absolute; inset:0;
  opacity:0; visibility:hidden;
  transition:opacity .7s var(--ease), transform .7s var(--ease), visibility 0s linear .7s;
}
.spamap__layer.is-active{
  opacity:1; visibility:visible; transform:none;
  transition-delay:0s, 0s, 0s;
}
/* наближення відбувається до будівлі SPA, а не до центру кадру */
.spamap__layer--resort{ transform:scale(1.7); transform-origin:37% 27%; }
.spamap__layer--spa{ transform:scale(.9); transform-origin:50% 50%; }

.spamap__svg,
.spamap__img{ display:block; width:100%; height:100%; }

/* умовна схема: жодних деталей, яких ми не знаємо */
.spamap__svg-ground{ fill:var(--sand-bg); }
.spamap__svg-build { fill:var(--sage);    stroke:rgba(35,81,76,.14); stroke-width:2; }
.spamap__svg-water { fill:var(--sage-leaf); stroke:rgba(35,81,76,.14); stroke-width:2; }
.spamap__svg-soft  { fill:rgba(35,81,76,.06); stroke:rgba(35,81,76,.14); stroke-width:2; }
.spamap__svg-path  { fill:var(--sand); opacity:.55; }
.spamap__svg-park  { fill:rgba(35,81,76,.05); stroke:rgba(35,81,76,.14); stroke-width:2; }
.spamap__svg-door  { fill:var(--green); opacity:.45; }
.spamap__svg-line  { stroke:rgba(35,81,76,.14); stroke-width:2; fill:none; }

/* ---------------------------- хотспоти ---------------------------- */

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

/* --x/--y — центр обʼєкта, --w/--h — його розмір, усе у відсотках
   від підкладки. Зміниться план — зміняться тільки ці числа */
.spamap__spot{
  position:absolute; left:var(--x); top:var(--y);
  transform:translate(-50%,-50%);
  width:var(--w, 44px); height:var(--h, 44px);
  min-width:44px; min-height:44px;
  padding:0;
  border:1px solid transparent; border-radius:var(--radius);
  transition:opacity .25s var(--ease), background-color .25s var(--ease), border-color .25s var(--ease);
}
.spamap__spot:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

.spamap__plate{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  display:block; width:max-content; max-width:180px;
  padding:8px 12px;
  text-align:center;
  background:rgba(246,242,233,.88);
  border:1px solid rgba(35,81,76,.14); border-radius:var(--radius);
  pointer-events:none;
  transition:background-color .25s var(--ease), border-color .25s var(--ease);
}

.spamap__dot{
  display:block; width:9px; height:9px; margin:0 auto 6px;
  border-radius:50%; background:var(--accent);
  transition:transform .25s var(--ease);
}

.spamap__spot-title{
  display:block;
  font:600 11px/1.3 var(--sans); letter-spacing:.1em; text-transform:uppercase;
  color:var(--green);
}

/* короткий опис — додаток до завжди видимої назви, а не єдине джерело */
.spamap__spot-note{
  position:absolute; left:50%; top:calc(100% + 6px);
  transform:translateX(-50%);
  width:max-content; max-width:180px;
  padding:6px 10px;
  font:500 11px/1.35 var(--sans);
  color:var(--light); background:var(--green-deep);
  border-radius:var(--radius);
  opacity:0;
  transition:opacity .25s var(--ease);
}

.spamap__spot.is-current .spamap__plate,
.spamap__spot:focus-visible .spamap__plate{
  background:var(--light); border-color:var(--accent);
}
.spamap__spot:focus-visible .spamap__spot-note,
.spamap__spot.is-current .spamap__spot-note{ opacity:1; }

/* наведення існує лише там, де є миша: на тачі перший дотик одразу відкриває */
@media (hover:hover){
  .spamap__spot:hover{ background:rgba(35,81,76,.1); border-color:var(--accent); }
  .spamap__spot:hover .spamap__plate{ background:var(--light); border-color:var(--accent); }
  .spamap__spot:hover .spamap__dot{ transform:scale(1.35); }
  .spamap__spot:hover .spamap__spot-note{ opacity:1; }

  /* сусіди приглушуються, щоб обраний обʼєкт читався першим */
  .spamap__spots:hover .spamap__spot:not(:hover),
  .spamap__spots:focus-within .spamap__spot:not(:focus-visible){ opacity:.45; }
}

/* ------------------------- превʼю обʼєкта ------------------------- */

.spamap__preview{
  padding:clamp(18px, 2vw, 26px);
  background:var(--glass);
  border:1px solid rgba(35,81,76,.14); border-radius:var(--radius);
}

.spamap__empty{
  margin:0;
  font:500 15px/1.6 var(--sans);
  color:rgba(35,81,76,.6);
}

.spamap__card{ display:none; }
.spamap.is-preview .spamap__card{ display:block; }
.spamap.is-preview .spamap__empty{ display:none; }

.ph.spamap__photo{ aspect-ratio:4/3; width:100%; margin-bottom:18px; }

.spamap__preview-title{
  margin:0 0 12px;
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.5rem, 2.2vw, 2rem); line-height:1.15;
  color:var(--green);
}
.spamap__preview-title:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; }

.spamap .spamap__preview-text{ margin:0 0 22px; font-size:16px; }

.spamap__actions{ display:flex; flex-wrap:wrap; gap:10px; }

/* --------------------- список замість схеми --------------------- */

.spamap__list{ display:none; }
.spamap__list-group{ display:none; }
.spamap__list-group.is-active{ display:grid; gap:10px; }

.spamap__row{
  display:block; width:100%;
  min-height:64px; padding:16px 18px;
  text-align:left;
  background:var(--glass);
  border:1px solid rgba(35,81,76,.14); border-radius:var(--radius);
  transition:border-color .25s var(--ease), background-color .25s var(--ease);
}
.spamap__row:hover,
.spamap__row.is-current{ border-color:var(--accent); }
.spamap__row:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

.spamap__row-title{
  display:block;
  font:600 12px/1.3 var(--sans); letter-spacing:.12em; text-transform:uppercase;
  color:var(--green);
}
.spamap__row-note{
  display:block; margin-top:6px;
  font:400 15px/1.5 var(--sans);
  color:rgba(37,40,36,.72);
}

/* ------------------------------ затемнення ------------------------------ */

.spamap__scrim{ display:none; }

/* ====================== ≤900: превʼю стає нижнім листом ====================== */

@media (max-width:900px){
  .spamap__body{ grid-template-columns:minmax(0,1fr); }

  .spamap__empty{ display:none; }

  .spamap__preview{
    position:fixed; left:0; right:0; bottom:0; z-index:120;
    max-height:86vh; overflow:auto;
    border-radius:var(--radius) var(--radius) 0 0;
    box-shadow:0 -12px 40px rgba(17,33,31,.28);
    transform:translateY(100%); opacity:0; visibility:hidden;
    transition:transform .45s var(--ease), opacity .45s var(--ease), visibility 0s linear .45s;
  }
  .spamap.is-preview .spamap__preview{
    transform:none; opacity:1; visibility:visible;
    transition-delay:0s, 0s, 0s;
  }

  .spamap__scrim{
    display:block;
    position:fixed; inset:0; z-index:110;
    background:rgba(17,33,31,.5);
    opacity:0; visibility:hidden;
    transition:opacity .35s var(--ease), visibility 0s linear .35s;
  }
  .spamap__scrim.is-active{ opacity:1; visibility:visible; transition-delay:0s, 0s; }

  body.spamap__locked{ overflow:hidden; }
}

/* ============ ≤700: замість дрібної схеми — великі рядки-кнопки ============ */

@media (max-width:700px){
  .spamap__viewport{ display:none; }
  .spamap__list{ display:block; }
}

@media (max-width:600px){
  .spamap__actions .btn{ width:100%; }
}

/* ---------------- менше руху: перехід без наближення ---------------- */

@media (prefers-reduced-motion:reduce){
  .spamap__layer,
  .spamap__layer--resort,
  .spamap__layer--spa{ transform:none; }
  .spamap__layer{ transition:opacity .2s linear, visibility 0s linear .2s; }
  .spamap__preview{ transition:opacity .2s linear, visibility 0s linear .2s; }
  .spamap.is-preview .spamap__preview{ transform:none; }
}

/* ==================== ІСТОРІЯ КУРОРТУ (about.html) ==================== */

/* Малюнок лежить просто на тлі секції: папір із файла вирізано в
   прозорість, краї розтушовані в самому знімку. Тому ні рамки, ні
   підкладки, ні тіні тут немає — інакше повернеться той самий прямокутник,
   від якого позбувалися */
.history__scene{
  margin:clamp(28px, 3.4vw, 52px) auto 0;
  max-width:1280px; padding-inline:var(--gutter);
}
.history__scene img{ display:block; width:100%; height:auto; }

/* --- стрічка часу --- */
/* Поки .tline притиснута до екрана, кожна епоха отримує один екран
   вертикального прокручування, а картки лежать СТОПКОЮ — на екрані завжди
   рівно одна, зміна йде переходом нижче. Режим вмикає скрипт класом
   is-pinned на обгортці; без нього (телефон, спокійний режим, зламаний JS)
   лишається звичайна стрічка з нативним горизонтальним гортанням.

   Композиція за референсом derenivska-kupil (Дарʼя прислала запис екрана):
   величезний рік світлою тінню за карткою й нерухомий рядок років унизу
   з підсвіченим поточним */

.tline-wrap{
  position:relative;
  margin-top:clamp(36px, 4vw, 64px);
}

.tline{
  --tl-gap:clamp(24px, 2.6vw, 44px);
  --tl-foot:clamp(10px, 1.6vh, 24px);   /* повітря під карткою до рядка років */
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x proximity; scroll-behavior:smooth;
  scrollbar-width:none;
}
.tline::-webkit-scrollbar{ display:none; }
.tline:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; }

.is-pinned .tline{
  /* шапка фіксована, тому притискаємо стрічку під неї, а не до нуля —
     інакше роки й верх знімків ідуть під меню */
  position:sticky; top:var(--header-h);
  height:calc(100vh - var(--header-h));
  display:flex; flex-direction:column; justify-content:center;
  overflow:hidden;                 /* смуги прокручування тут уже немає */
  scroll-snap-type:none;
}

.tline__track{
  position:relative;
  display:flex; list-style:none; margin:0; padding:0;
}

/* --- притиснутий режим: стопка карток замість ряду ---
   Усі епохи стоять в одній комірці сітки, видно ту, що з .is-on. Через це
   половини картки за краєм екрана не буває взагалі — саме те, з чим не
   впорались ні магніт, ні доводка (див. main.js).

   ⚠️ Зміна епохи — ЧИСТЕ ПРОЯВЛЕННЯ, без жодного зсуву. Був в'їзд збоку
   (translateX 64px) плюс дрейф за рукою — Дарʼя 2026-08-16: «при скролле не
   должно продвигаться явно, а должно потом проявляться». Тому рух звідси
   прибрано весь: стара картка гасне, нова за нею проявляється.
   Проявлення йде з затримкою, майже впритул за згасанням — інакше дві
   картки в один момент напівпрозорі й наклались би одна на одну */
.is-pinned .tline__track{ display:grid; }
.is-pinned .tline__item{
  grid-area:1 / 1; width:100%;
  opacity:0; transition:opacity .26s var(--ease);
  pointer-events:none;
  will-change:opacity;
}
.is-pinned .tline__item.is-on{
  opacity:1; transition:opacity .5s var(--ease) .22s;
  pointer-events:auto;
}


/* Одна епоха — один екран. Ширина потрібна лише в НЕпритиснутому режимі
   (телефон, спокійний режим): там картки стоять рядом і гортаються пальцем.
   У притиснутому вони лежать стопкою в сітці, і flex-basis не діє */
.tline__item{
  position:relative;
  flex:0 0 var(--tl-card, 100vw);
  display:grid; align-items:center;
  grid-template-columns:minmax(0, 1.05fr) minmax(0, 1fr);
  gap:clamp(28px, 4vw, 80px);
  padding:0 max(var(--gutter), calc((100% - var(--container)) / 2)) var(--tl-foot);
  scroll-snap-align:start;
}
/* знімок і текст міняються місцями через один — так стрічка не читається
   як однакові слайди */
.tline__item:nth-of-type(even) .tline__ph{ order:2; }

/* епохи без знімка: сам текст, і той не на всю ширину — решту тримає рік */
.tline__item:not(:has(.tline__ph)){ grid-template-columns:minmax(0, .62fr) minmax(0, 1fr); }
.tline__item:not(:has(.tline__ph)) .tline__name,
.tline__item:not(:has(.tline__ph)) p,
.tline__item:not(:has(.tline__ph)) .tline__list{ grid-column:1; }
.tline__item:nth-of-type(even):not(:has(.tline__ph)){ grid-template-columns:minmax(0, 1fr) minmax(0, .62fr); }
.tline__item:nth-of-type(even):not(:has(.tline__ph)) .tline__name,
.tline__item:nth-of-type(even):not(:has(.tline__ph)) p,
.tline__item:nth-of-type(even):not(:has(.tline__ph)) .tline__list{ grid-column:2; }

/* Текст, перелік і заголовок — один стовпчик поруч зі знімком. Замість
   окремої обгортки використовуємо display:contents у сітці другого рівня */
.tline__text{ display:grid; gap:12px; align-content:center; }

/* --- рік велетенською тінню --- */
/* Стоїть ЗА карткою, унизу: саме так він читається як тло епохи, а не як
   підпис. Слова («Здавна», «Сьогодні») довші за чотири цифри, тому кегль
   узятий такий, щоб і вони лишалися в межах картки */
.tline__ghost{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-58%);
  z-index:0; pointer-events:none; white-space:nowrap;
  font-family:var(--serif); font-weight:400; line-height:.78;
  font-size:clamp(5rem, 15vw, 15rem); letter-spacing:-.02em;
  color:rgba(35,81,76,.07);
  transition:color .6s var(--ease);
}
.tline__item.is-on .tline__ghost{ color:rgba(35,81,76,.13); }

/* контент лежить поверх тіні року */
.tline__ph,
.tline__text{ position:relative; z-index:1; }


/* Кадр показуємо ЦІЛКОМ: тут архівні листівки й панорами, у яких сенс саме
   по краях (підписи будівель, колії, підпис «Üdvözlet Uzsokról»), а рамка
   4/3 з object-fit:cover зрізала їх з боків — Дарʼя 2026-08-15.
   Висота коробки при цьому лишається заданою (а не «по знімку»): кадри
   вантажаться ліниво, і при height:auto до завантаження вони мали б нульову
   висоту — картки б стрибали, а стрічка міряє їхні позиції для підсвітки
   й ходу. Стеля висоти тримає картку в межах екрана разом із роком
   і рядком епох */
.tline__ph{ margin:0; display:flex; align-items:center; justify-content:center; }
/* висота задана саме знімку, а не коробці: кадри вантажаться ліниво, і при
   height:auto до завантаження вони мали б нульову висоту — картки б стрибали,
   а стрічка міряє їхні позиції для підсвітки й ходу */
.tline__ph img{
  display:block; width:auto; max-width:100%;
  height:clamp(280px, 62vh, 620px); object-fit:contain;
}

.tline__name{
  margin:0; font-family:var(--serif); font-weight:400;
  font-size:clamp(1.6rem, 2.6vw, 2.6rem); line-height:1.15; color:var(--green);
}
.tline__item p{ margin:0; max-width:46ch; font-size:16px; line-height:1.65; }

/* перелік у картці — тим самим знаком, що й факти в послугах */
.tline__list{ display:grid; gap:8px; margin:0; padding:0; list-style:none; font-size:15px; }
.tline__list li{ position:relative; padding-left:20px; line-height:1.45; }
.tline__list li::before{
  content:""; position:absolute; left:2px; top:calc(.75em - 6px);
  width:10px; height:12px;
  background:var(--mark) center/contain no-repeat;
}

/* --- нерухомий рядок років --- */
/* Рядок років іде від краю до краю екрана, а не по сітці контейнера:
   так тринадцять епох читаються як справжня шкала, а не як список,
   притиснутий ліворуч. Проміжки роздає space-between */
.tmarks{
  display:none;
  gap:8px; list-style:none;
  margin:clamp(10px, 1.4vh, 20px) 0 0;
  padding:0 clamp(20px, 2.6vw, 56px);
}
.is-pinned .tmarks{ display:flex; flex-wrap:nowrap; justify-content:space-between; }
/* Вага однакова в усіх станів навмисно: жирний активний рік ширший за
   звичайний, і при кожному перемиканні весь рядок перераховувався —
   роки помітно смикалися. Активний виділяємо кольором */
.tmark{
  font-size:clamp(15px, 1.2vw, 19px); font-weight:500; letter-spacing:.04em;
  color:rgba(35,81,76,.34); white-space:nowrap;
  transition:color .35s var(--ease);
}
.tmark.is-now{ color:var(--green); }

/* Епох стало тринадцять (2026-08-17), і на вузькому десктопі рядок років
   перестав уміщатися: при 860px останній рік вилазив за край на 96px.
   Кегль тут задано числом, а не clamp: 1.2vw на 860px дає ті самі 15px,
   тобто нижня межа clamp тримала розмір і рядок не стискався */
@media (max-width:1100px){
  .tmark{ font-size:13px; letter-spacing:.02em; }
  .tmarks{ gap:6px; padding:0 clamp(14px, 2vw, 28px); }
}

/* ⚠️ Тут була друга, CSS-реалізація ходу — анімації на шкалі прокручування
   (animation-timeline:--tline). Знято 2026-08-16.
   Причина перша: анімації оголошувалися з fill:none, а їхній відрізок
   (animation-range) закінчувався раніше, ніж секція відліплювалася. Щойно
   прокрутка виходила за кінець відрізка, CSS переставав застосовувати зсув —
   і стрічка стрибала на ПЕРШУ картку, хоч рядок років показував «Сьогодні».
   Саме це Дарʼя й побачила: «останній скрол перестрибує на перший».
   Причина друга: хід вели одразу два механізми (CSS і розрахунок у main.js),
   і сумісно вони працювали гірше, ніж кожен окремо.
   Тепер джерело руху ОДНЕ — main.js. Повертати CSS-шкалу без фікса fill/range
   не можна */

/* --- Гераклове джерело --- */
.herk__grid{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(28px, 4vw, 72px); align-items:center;
}
.herk__art{ margin:0; }

/* ⚠️ Тут було `.herk__art img{ height:auto }` — від часів, коли в блоці
   лежав один малюнок, без галереї. Правило стоїть у файлі нижче за
   `.gal__main img{ height:100% }` і має ту саму вагу, тому перебивало його:
   великий кадр показувався в натуральних пропорціях, і клік по мініатюрі
   міняв ВИСОТУ блоку — від вертикального знімка до горизонтального майже
   вдвічі. Саме це Дарʼя побачила як «сторінка підстрибує» (2026-08-16).
   Знято; висоту тепер тримає рамка, як в усіх інших галереях сайта.

   Рамка тут вертикальна (3/4), бо всі кадри Геракла вертикальні, а в
   загальній 3/2 від скульптури в повний зріст лишалася б середня смуга.
   Це запасне значення: коли скрипт живий, він міряє рамку по великому
   кадру й ставить її інлайном (у нього нижня межа 0.8 — трохи ширше).
   contain, а не cover: це архівні знімки й листівка — їх не ріжемо,
   вузькі поля по краях ідуть кольором самої секції */
.herk .gal__main{ aspect-ratio:3/4; background:transparent; }
.herk .gal__main img{ object-fit:contain; }
.herk__text .section__title{ margin-bottom:clamp(18px, 2vw, 26px); }
.herk__text p{ max-width:54ch; }
.herk__text p + p{ margin-top:16px; }

@media (max-width:900px){
  .herk__grid{ grid-template-columns:1fr; }
  /* малюнок під текстом: спершу розповідь, потім ілюстрація */
  .herk__art{ order:2; }
}
@media (max-width:900px){
  /* вузький екран: знімок над текстом, картка лишається на всю ширину */
  .tline__item,
  .tline__item:not(:has(.tline__ph)),
  .tline__item:nth-of-type(even):not(:has(.tline__ph)){
    grid-template-columns:minmax(0,1fr);
    align-content:center; gap:clamp(18px, 3vw, 28px);
  }
  .tline__item:nth-of-type(even) .tline__ph{ order:0; }
  .tline__item:not(:has(.tline__ph)) .tline__name,
  .tline__item:not(:has(.tline__ph)) .tline__text,
  .tline__item:nth-of-type(even):not(:has(.tline__ph)) .tline__text{ grid-column:1; }
  .tline__ph img{ height:clamp(150px, 30vh, 300px); }
}
@media (max-width:700px){
  /* на телефоні притискання не вмикаємо: стрічку гортають пальцем */
  .tline{ --tl-foot:10px; }
  .tline__ghost{ font-size:clamp(3.4rem, 18vw, 6rem); }
}

@media (prefers-reduced-motion:reduce){
  /* стрічку часу гортаємо без плавної анімації */
  .tline{ scroll-behavior:auto; }
}


/* ======================= ПОПАП БРОНЮВАННЯ =======================
   Дарʼя 2026-08-17: кнопка «Забронювати» відкриває вікно з формою, а не
   везе сторінку вниз до секції #booking. Розмітку робить main.js — кнопок
   на сайті понад шість десятків на 14 сторінках, і дублювати вікно в кожному
   файлі не варто. Секція #booking лишається як запасний шлях без JS.

   Класи полів беремо ті самі, що у форми в секції (.field, .field__input,
   .book__row, .book__more, .book__status): правила для них уже описані вище,
   і форма у вікні виглядає точно як форма на сторінці. Тут дописані лише ті
   стани, що прив'язані до .book__form і на .bookmodal__form не поширюються */

.bookmodal{
  /* вище за шапку (100) і за перегляд знімка (200) */
  position:fixed; inset:0; z-index:300;
  display:flex; align-items:center; justify-content:center;
  padding:var(--bm-pad);
  --bm-pad:clamp(16px, 4vw, 48px);
}
/* без цього рядка hidden не спрацює: display:flex перебиває його */
.bookmodal[hidden]{ display:none; }

.bookmodal__veil{
  position:absolute; inset:0;
  background:rgba(17,33,31,.72);
  opacity:0; transition:opacity .35s var(--ease);
}
.bookmodal.is-open .bookmodal__veil{ opacity:1; }

/* сторінка під вікном не їде. Клас власний, а не `lb-on` від перегляду фото
   й не `is-locked` від меню: перший знімається при закритті лайтбокса,
   другий оголошений усередині медіазапиту й на десктопі прокрутку не тримає */
body.bm-on{ overflow:hidden; }

.bookmodal__box{
  position:relative; z-index:1;
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1fr);
  /* рядок рівно на висоту коробки: без цього fr-рядок міряється по вмісту,
     переростає max-height і прокрутка дістається нікому */
  grid-template-rows:minmax(0,1fr);
  width:100%; max-width:1080px;
  max-height:calc(100svh - 2 * var(--bm-pad));
  background:var(--sand-bg); border-radius:var(--radius);
  box-shadow:0 30px 80px rgba(17,33,31,.35);
  /* коробка сама не прокручується — прокручується права колонка, інакше
     знімок ліворуч і хрестик їхали б разом із текстом форми */
  overflow:hidden;
  opacity:0; transform:translateY(16px);
  transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.bookmodal.is-open .bookmodal__box{ opacity:1; transform:none; }

/* --- ліва колонка: знімок і контакти --- */
.bookmodal__aside{ position:relative; display:flex; min-height:0; overflow:hidden; }
.bookmodal__shot{
  position:absolute; inset:0;
  /* шлях відносно самого файла стилів (assets/css/) */
  background-image:url('../img/leisure/pool_form.webp');
  background-size:cover; background-position:center;
}
/* завіса на знімку: угорі ледь помітна, донизу щільна — під нею йде текст */
.bookmodal__shot::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(17,33,31,.35) 0%, rgba(17,33,31,.85) 100%);
}
.bookmodal__aside-body{
  position:relative; z-index:1;
  align-self:end; width:100%;
  padding:clamp(24px, 2.4vw, 36px);
  color:var(--light);
}
.bookmodal__aside-title{
  margin:0 0 10px;
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.4rem, 1.8vw, 1.9rem); line-height:1.2;
}
.bookmodal__aside-text{
  margin:0 0 22px; max-width:32ch;
  font-size:15px; line-height:1.6; color:rgba(246,242,233,.82);
}
/* месенджери стоять на темному знімку: зелена рамка й зелений текст на ньому
   зникають, тому кремова обводка. Пісочний — тільки на наведенні, як усюди */
.bookmodal__aside .messenger{ border-color:rgba(246,242,233,.46); color:var(--light); }
.bookmodal__aside .messenger:hover{
  border-color:var(--sand); background:var(--sand); color:var(--green-deep);
}
.bookmodal__aside .messenger:focus-visible{ outline:2px solid var(--sand); outline-offset:3px; }

/* --- права колонка: форма --- */
.bookmodal__main{
  min-height:0; overflow:auto; -webkit-overflow-scrolling:touch;
  padding:clamp(28px, 3vw, 48px);
}
.bookmodal__title{
  margin:0; padding-right:44px;        /* місце під хрестик */
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.6rem, 2.2vw, 2.3rem); line-height:1.15; color:var(--green);
}
/* звідки відкрили вікно — приглушений рядок під заголовком */
.bookmodal__subject{
  margin:12px 0 0;
  font:500 12px/1.4 var(--sans); letter-spacing:.08em; text-transform:uppercase;
  color:var(--green-mid);
}
.bookmodal__subject[hidden]{ display:none; }
.bookmodal__lead{
  margin:14px 0 24px; max-width:46ch;
  font-size:15px; line-height:1.6; color:rgba(37,40,36,.78);
}
.bookmodal__submit{ width:100%; margin-top:8px; }

/* Хрестик стоїть над правою, світлою колонкою — тому темний, а не кремовий.
   Малюємо двома лініями псевдоелементів, як у перегляді знімка.
   Наведення веде на --accent-d: --accent дорівнює тому самому бренд-зеленому,
   що й базовий колір кнопки, і зміни не було б видно взагалі */
.bookmodal__x{
  position:absolute; top:0; right:0; z-index:2;
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; padding:0;
  color:var(--green); background:transparent; border:0; cursor:pointer;
  transition:color .25s var(--ease);
}
.bookmodal__x:hover{ color:var(--accent-d); }
.bookmodal__x:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.bookmodal__x::before,
.bookmodal__x::after{
  content:""; position:absolute; width:18px; height:2px; background:currentColor;
}
.bookmodal__x::before{ transform:rotate(45deg); }
.bookmodal__x::after{ transform:rotate(-45deg); }

/* стани форми: правила вище прив'язані до .book__form і сюди не дістають.
   Після успішної відправки ховаємо і <details> — на сторінці він лишався
   висіти під подякою, у вікні це видно одразу */
.bookmodal__form.is-checked .field__input:invalid{ border-color:var(--accent); }
.bookmodal__form.is-sent .book__row,
.bookmodal__form.is-sent .field,
.bookmodal__form.is-sent .book__more,
.bookmodal__form.is-sent .bookmodal__submit{ display:none; }
.bookmodal__form.is-sent .book__status{ margin:0; font-size:17px; }

@media (max-width:860px){
  /* Колонки в одну. Знімок лишаємо — це єдине, що показує, куди людина їде,
     а контакти під ним потрібні тим, хто форму заповнювати не хоче. Він стає
     низькою смугою зверху, і в ній лишаються тільки назва й месенджери:
     опис на 180px не влазить, а формі місце потрібніше */
  .bookmodal{ --bm-pad:12px; }
  .bookmodal__box{
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto minmax(0,1fr);
    max-height:calc(100svh - 24px);
  }
  .bookmodal__aside{ min-height:180px; }
  .bookmodal__aside-text{ display:none; }
  /* в одну колонку хрестик опиняється не над кремовою формою, а над темним
     знімком — там зелений на зеленому не видно, тому він світлішає */
  .bookmodal__x{ color:var(--light); }
  .bookmodal__x:hover{ color:var(--sand); }
  .bookmodal__x:focus-visible{ outline-color:var(--sand); }
  /* заголовок форми знову на всю ширину: хрестик уже не над ним */
  .bookmodal__title{ padding-right:0; }
}

@media (prefers-reduced-motion:reduce){
  /* у «спокійному» режимі вікно просто зʼявляється */
  .bookmodal__veil,
  .bookmodal__box{ transition:none; transform:none; }
}

/* ==================== ВІКНО З ТЕЛЕФОНОМ ====================

   Маленьке вікно кнопки «Організувати подію» (Дарʼя 2026-08-19). Показується
   ТІЛЬКИ на десктопі: на сенсорному екрані та сама кнопка просто набирає
   номер через tel:. Верстка й поведінка ті самі, що в .bookmodal (завіса,
   коробка, хрестик, Escape, пастка фокуса), але коробка вузька, без форми
   і без знімка: усередині лише номер і кнопка копіювання.
   Прокрутку тримає той самий body.bm-on, що й вікно бронювання */
.callmodal{
  position:fixed; inset:0; z-index:300;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(16px, 4vw, 48px);
}
.callmodal[hidden]{ display:none; }

.callmodal__veil{
  position:absolute; inset:0;
  background:rgba(17,33,31,.72);
  opacity:0; transition:opacity .35s var(--ease);
}
.callmodal.is-open .callmodal__veil{ opacity:1; }

.callmodal__box{
  position:relative; z-index:1;
  width:100%; max-width:420px;
  padding:clamp(28px, 3vw, 40px);
  background:var(--sand-bg); border-radius:var(--radius);
  box-shadow:0 40px 90px rgba(17,33,31,.35);
  opacity:0; transform:translateY(12px);
  transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.callmodal.is-open .callmodal__box{ opacity:1; transform:none; }

.callmodal__x{
  position:absolute; top:0; right:0; z-index:2;
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; padding:0;
  color:var(--green); background:transparent; border:0; cursor:pointer;
  transition:color .25s var(--ease);
}
.callmodal__x:hover{ color:var(--accent-d); }
.callmodal__x:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.callmodal__x::before,
.callmodal__x::after{
  content:""; position:absolute; width:18px; height:2px; background:currentColor;
}
.callmodal__x::before{ transform:rotate(45deg); }
.callmodal__x::after{ transform:rotate(-45deg); }

.callmodal__title{
  margin:0; padding-right:44px;        /* місце під хрестик */
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.5rem, 2vw, 1.9rem); line-height:1.15; color:var(--green);
}
.callmodal__lead{
  margin:12px 0 20px;
  font-size:15px; line-height:1.6; color:rgba(37,40,36,.72);
}
/* номер великим кеглем, як ціна в .spec__price: вагою й розміром, не кольором */
.callmodal__num{
  display:inline-block; margin:0 0 22px;
  font-family:var(--serif); font-size:clamp(1.8rem, 2.6vw, 2.3rem); line-height:1;
  color:var(--green);
  transition:color .25s var(--ease);
}
.callmodal__num:hover,
.callmodal__num:focus-visible{ color:var(--accent-d); }
.callmodal__copy{ width:100%; }
/* підтвердження копіювання читають з екрана, тому воно ще й у aria-live */
.callmodal__note{
  margin:12px 0 0; min-height:1.2em;
  font:500 13px/1.3 var(--sans); color:var(--green-mid);
}

@media (prefers-reduced-motion:reduce){
  .callmodal__veil,
  .callmodal__box{ transition:none; transform:none; }
}

/* ===================== ПОСИЛАННЯ В ТЕКСТІ ===================== */
/* Базове правило a{ color:inherit; text-decoration:none } робить посилання
   всередині абзацу невидимим — до 2026-08-17 таких на сайті не було взагалі,
   усі дії жили в кнопках. Клас лишає акцент на інтерактиві: зелений колір
   плюс підкреслення, наведення глибшає до --accent-d (10,6:1 проти 8,0:1) */
.link{
  color:var(--green);
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px;
  transition:color .25s var(--ease);
}
.link:hover,
.link:focus-visible{ color:var(--accent-d); }

/* Те саме посилання, але без підкреслення (Дарʼя 2026-08-19). Стоїть у списках
   характеристик — «Локація», «Корпус»: там значення й так набране зеленим, а
   підкреслений рядок через усю колонку виглядав важко. Клікабельність показує
   наведення: колір глибшає, як у решти інтерактиву */
.link--plain{ text-decoration:none; }
.link--plain:hover,
.link--plain:focus-visible{ color:var(--accent-d); text-decoration:none; }

/* ========================= КВАСНА ВОДА ========================= */
/* Секція про воду на about.html зібрана з готових компонентів
   (.section__head + .card-rows + .callout). Своїх правил тут три */

/* Низ секції коротший за звичайний --section-pad (Дарʼя 2026-08-19:
   «тут забагато простору»). Останній блок — дві короткі колонки тексту,
   під ними ставав порожній підвал, і разом із верхнім полем «Що поруч»
   виходило 256px ні про що. Ріжемо ТІЛЬКИ низ: верхнє поле наступної
   секції лишається, бо ним дихає її заголовок. Разом просвіт ~168px */
.water{ padding-bottom:clamp(24px, 3vw, 44px); }

/* кадр джерела під шапкою секції: широка смуга, не портрет — інакше він
   розсуває секцію на цілий екран і перебиває стрічку часу над нею.
   Пропорція задана рамці, а не знімку: кадр вертикальніший за 16/7,
   тому cover зрізає йому верх і низ, лишаючи альтанку й потічок */
.water__photo{
  margin:clamp(28px, 3.4vw, 48px) 0 0;
  aspect-ratio:16/7; overflow:hidden;
}
.water__photo img{ width:100%; height:100%; object-fit:cover; display:block; }

/* блок «як застосовували» — дві широкі плашки замість чотирьох вузьких:
   тексти там довші за перелік мінералів і в чверть ширини не влазять.
   ⚠️ Селектор із двох класів (0,2,0) сильніший за .card-rows у медіа-
   запитах (0,1,0), тому однорядковий вигляд на телефоні доводиться
   повторювати з тією ж специфічністю — інакше на 600px лишиться два
   стовпчики. Той самий підступ, що й у .cat__grid */
.card-rows--two{ grid-template-columns:repeat(2, minmax(0,1fr)); }


@media (max-width:700px){
  /* на телефоні 16/7 перетворює кадр на смужку 335×147 — альтанки в ній
     майже не видно. Ближче до квадрата знімок знову читається */
  .water__photo{ aspect-ratio:4/3; }
}
@media (max-width:600px){
  .card-rows--two{ grid-template-columns:1fr; }
}

/* ==================== СТОРІНКА «КОНТАКТИ» ==================== */
/* Сторінка зібрана з готових компонентів (.contacts + .card-rows + .cards +
   .callout + .cta--forest). Свого тут тільки розкладка — нових поверхонь,
   кольорів і тіней контакти не заводять */

/* чотири плитки в ряд — міста в «Як доїхати». Спільний .card-rows на 1180px
   переходить на три стовпці, і четверта плитка лишалася в рядку сама-одна.
   Тут ряд ділиться навпіл: 4 → 2×2 → стовпчик.
   ⚠️ Селектор із двох класів (0,2,0) сильніший за .card-rows у медіа-запитах
   (0,1,0), тому однорядковий вигляд на телефоні доводиться повторювати з тією
   ж вагою — той самий підступ, що й у .card-rows--two вище */
.card-rows--four{ grid-template-columns:repeat(4, minmax(0,1fr)); }

/* дві картки з фото в ряд — «Основний комплекс і SPA». Те саме робить
   .spa2__cards-two на сторінці SPA, але той клас прив'язаний до неї */
.cards--two{ grid-template-columns:repeat(2, minmax(0,1fr)); }

/* значок у плитці стоїть НАД назвою, а не збоку, як у списку контактів:
   у чверті ширини рядок «значок + назва» ламався б навпіл */
.card-row__ic{ margin:0 0 14px; }

/* Лісова смуга на контактах іде БЕЗ абзацу — самі заголовок і кнопка. Спільне
   правило саджає текст під верх смуги (align-items:start), і на решті сторінок
   це правильно: там під заголовком ще абзац, і блок сам добирає висоту. Тут
   над текстом лишалося пів екрана порожнього крему (Дарʼя 2026-08-19 показала
   стрілкою: опустити нижче). Опускаємо на середину смуги — там ще світлий
   туман над далекими хребтами. Нижче не можна: починаються темні ялини,
   і зелений заголовок на них уже не читається.
   Діє тільки від 1200px — саме там текст лягає НА знімок; вужче лишається
   розкладка «текст над смугою», і опускати там нічого */
@media (min-width:1200px){
  .cta--forest--mid{
    align-items:center;
    /* верхнє поле секції тут ні до чого: воно трималося за текст, який стояв
       під верхом смуги. Тепер текст посередині, і ці 128px просто додавали
       порожнього крему між картками комплексів і смугою — разом із полем
       .complexes виходило майже пів екрана ні про що (Дарʼя 19.08:
       «тут очень много места»). Висота секції = висота самого знімка */
    padding-top:0;
  }
}

/* Заголовок секції довгий, а спільна шапка секції тримається в 720px — назва
   лягала в три рядки й рвалася по дефісу: «Оздоровчий та SPA-» / «комплекс».
   Даємо їй ширше поле і забороняємо розрив усередині «SPA-комплекс» на вузьких
   екранах. Ліда під заголовком немає — Дарʼя прибрала його 2026-08-19 */
.complexes .section__head{ max-width:1000px; }
.complexes .section__title .nbr{ white-space:nowrap; }

/* низ секції з двома комплексами коротший за звичайний --section-pad: далі йде
   лісова смуга, а в неї згори ще 192px кремового неба самого знімка. Разом із
   повним полем секції розрив між карткою і заголовком смуги був 448px.
   Та сама причина, що й у .water на about.html */
.complexes{ padding-bottom:clamp(28px, 3.4vw, 52px); }

/* кнопка притискається донизу картки, щоб у ряду всі стояли на одній лінії.
   Селектор із .card — інакше `.card p` перебиває margin-top.
   Нижнє поле обов'язкове: у самої .card падінгів немає взагалі (у решти
   карток на сайті останній рядок — це .price-tag, який стоїть у тексті),
   і без нього кнопка впирається в край картки. Значення те саме, що бокові
   поля тексту, — інакше відступ під кнопкою читається як помилка */
/* нижнє поле тепер дає сама .card (2026-08-19), тут його більше немає —
   інакше під кнопкою набігало подвійне */
.card .card__cta{
  margin-top:auto;
  padding-top:clamp(18px, 2vw, 24px);
}
.section .card .card__cta{ margin-bottom:0; }

@media (max-width:1180px){
  .card-rows--four{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:900px){
  .cards--two{ grid-template-columns:1fr; }
}
@media (max-width:600px){
  .card-rows--four{ grid-template-columns:1fr; }
  .card .card__cta .btn{ width:100%; }
}

/* ==================== ЗГОДА НА КУКИ ==================== */

/* Смуга внизу екрана, а не вікно посеред сторінки: банер нічого не блокує,
   сайтом можна користуватися й не відповівши. Зʼявляється лише тоді, коли
   вибору ще немає (`kupeli-consent` у localStorage порожній) — розмітку
   будує main.js, у HTML її немає.

   Поверх: z-index 150 — вище шапки (100), але нижче перегляду фото (200)
   і попапа бронювання (300). Смуга не має накривати те, що людина відкрила
   навмисно, зате мусить лишатися видимою над липкою шапкою. */
.cookiebar{
  position:fixed; left:0; right:0; bottom:0; z-index:150;
  background:var(--green-deep);
  color:var(--light);
  /* тонка пісочна лінія — той самий хід, що відділяє темні секції */
  border-top:1px solid rgba(220,180,112,.28);
  transform:translateY(100%); opacity:0;
  transition:transform .4s var(--ease), opacity .4s var(--ease);
}
.cookiebar.is-open{ transform:none; opacity:1; }

.cookiebar__inner{
  display:flex; flex-direction:column;
  gap:16px;
  padding:clamp(14px, 1.6vw, 22px) 0;
}

/* верхній рядок: текст ліворуч, дії праворуч */
.cookiebar__head{
  display:flex; align-items:center;
  gap:clamp(16px, 2vw, 40px);
}

.cookiebar__text{
  margin:0; max-width:72ch;
  font:400 14px/1.5 var(--sans);
  color:rgba(246,242,233,.85);   /* 7,4:1 на --green-deep */
}

.cookiebar__actions{
  display:flex; flex-wrap:wrap; gap:12px;
  margin-left:auto;
}

/* Кнопки на майже чорному тлі. Зелена заливка --accent тут тоне (1,4:1),
   тому головна дія пісочна — той самий хід, що в .section--dark.
   ⚠️ Відмова МУСИТЬ бути такою ж помітною, як згода (вимога GDPR: відмовитися
   не важче, ніж погодитись), тому в неї той самий розмір, кегль і місце —
   різниця лише в заливці, і світлий контур дає 9,4:1 проти тла */
.cookiebar .btn--primary{
  background:var(--sand); border-color:var(--sand); color:var(--green);
  --btn-fill:var(--green-deep);
}
.cookiebar .btn--primary:hover{ border-color:var(--green-deep); color:var(--light); }
.cookiebar .btn--outline{
  border-color:rgba(246,242,233,.5); color:var(--light);
  --btn-fill:var(--light);
}
.cookiebar .btn--outline:hover{ border-color:var(--light); color:var(--green-deep); }

/* Кнопка «Налаштування» — третя дія, і навмисно тихіша за дві перші:
   вона нікуди не веде й нічого не вирішує, а лише розгортає панель.
   Робити її такою ж помітною, як «Прийняти всі», не можна з іншої причини —
   вимога рівності стосується пари «погодитись / відмовитись», і третя
   однакова кнопка розмиває саме цю пару */
.cookiebar__more{
  padding:0;
  font:600 12px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase;
  color:rgba(246,242,233,.85);   /* 7,4:1 на --green-deep */
  transition:color .25s var(--ease);
}
.cookiebar__more:hover{ color:var(--sand); }
.cookiebar__more:focus-visible{ outline:2px solid var(--sand); outline-offset:3px; }

.cookiebar__link{
  color:var(--sand);
  text-decoration:underline; text-underline-offset:3px;
  transition:color .25s var(--ease);
}
.cookiebar__link:hover{ color:var(--sand-hi); }

/* ---- панель категорій ----
   Розгортається всередині тієї ж смуги, а не окремим модальним вікном:
   попап бронювання вже займає z-index 300, і другий модал поверх нього
   був би зайвою сутністю. Висота обмежена, бо категорій із часом
   побільшає, а смуга не має з'їдати екран */
.cookiebar__panel{
  max-height:min(46vh, 380px); overflow-y:auto;
  padding-top:18px;
  border-top:1px solid rgba(246,242,233,.16);
}
.cookiebar__panel[hidden]{ display:none; }

.cookiebar__cats{
  display:grid; gap:18px;
  margin:0 0 18px; padding:0;
  list-style:none;
}
@media (min-width:900px){
  .cookiebar__cats{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:28px; }
}

.cookiecat__row{
  display:flex; align-items:center; gap:10px;
  margin-bottom:6px;
  cursor:pointer;
}
/* заблокована категорія не має вдавати, що її можна перемкнути */
.cookiecat__row:has(.cookiecat__box:disabled){ cursor:default; }

/* Свій вигляд чекбокса: рідний малюється системним синім і випадає
   з палітри. Прямі кути — як усюди на сайті */
.cookiecat__box{
  appearance:none; -webkit-appearance:none;
  flex:0 0 auto; width:20px; height:20px; margin:0;
  border:1px solid rgba(246,242,233,.5);
  background:transparent;
  cursor:inherit;
  transition:background .2s var(--ease), border-color .2s var(--ease);
}
.cookiecat__box:checked{ background:var(--sand); border-color:var(--sand); }
/* галочка — дві лінії через псевдоелемент, щоб не тягти окрему іконку */
.cookiecat__box:checked::after{
  content:""; display:block;
  width:5px; height:10px; margin:2px auto 0;
  border:solid var(--green-deep); border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.cookiecat__box:disabled{ opacity:.55; }
.cookiecat__box:focus-visible{ outline:2px solid var(--sand); outline-offset:3px; }

.cookiecat__name{
  font:600 12px/1 var(--sans); letter-spacing:.12em; text-transform:uppercase;
  color:var(--light);
}
.cookiecat__note{
  margin:0; padding-left:30px;
  font:400 13px/1.55 var(--sans);
  color:rgba(246,242,233,.72);   /* 5,8:1 — дрібний текст, тримаємо вище 4,5 */
}

@media (max-width:900px){
  /* До низу екрана вже прибита .sticky-cta (z-index 5). Накривати її смугою
     не можна — це головна дія сторінки, — тому смуга згоди стає РІВНО НАД
     панеллю. Висота панелі рахується з тих самих величин, що її й задають:
     52px кнопки (--control-h) + 10px + 10px полів + 1px лінія зверху */
  .cookiebar{ bottom:calc(var(--control-h) + 21px + env(safe-area-inset-bottom)); }
  /* під відкритим меню смуга не потрібна — так само, як і .sticky-cta */
  body.is-locked .cookiebar{ display:none; }
}

@media (max-width:720px){
  .cookiebar__head{ flex-direction:column; align-items:stretch; gap:14px; }
  .cookiebar__actions{ margin-left:0; }
  .cookiebar__actions .btn{ flex:1 1 auto; }
}

@media (prefers-reduced-motion:reduce){
  .cookiebar{ transition:none; transform:none; opacity:1; }
}

/* ==================================================================
   ЗАГЛУШКА ПІД ФОТО (Дарʼя 2026-08-21)
   Замість штрихованої плашки з підписом у порожніх слотах стоїть єдиний
   кадр zaglushka.webp — на ньому вже написано «Скоро тут буде фото».
   Тому власний підпис `.ph::after` вимкнений: два тексти один на одному
   не читалися. Що саме піде в слот, лишилося в атрибуті data-label
   і в коментарях розмітки — це підказка для нас, не для гостя.
   Блок стоїть у кінці файла навмисно: `.card__ph` вище задає
   `background:var(--sage)` тією ж вагою селектора, і при іншому порядку
   ця заливка стирала б кадр.
   ================================================================== */
.ph{
  /* Заливка — кремовий колір неба з самого кадру (#f9ebdb): краї й поля
     зливаються з ним, а не підсвічують рамку іншим тоном */
  background:url('../img/zaglushka.webp') center center / cover no-repeat #f9ebdb;
}
.ph::after{ content:none; }

/* Вертикальні слоти стрічки котеджів: кадр горизонтальний, і при `cover`
   від напису лишилися б самі краї літер. `contain` показує його цілком,
   а поля зверху й знизу забирає та сама кремова заливка */
.showcase__strip .ph{ background-size:contain; }

/* ==================================================================
   ВУЗЬКІ ЕКРАНИ 320–420 (перевірка Дарʼї 2026-08-21)
   На 320px сторінка їхала вбік на 29px. Два винуватці, обидва —
   мінімальна власна ширина вмісту, яку сітка не могла стиснути.
   ================================================================== */

/* 1. Смуга швидкого бронювання. Chrome малює <input type="date"> з власною
      мінімальною шириною ~180px, і дві такі колонки не влазили в 280px
      вмісту. Нижче 420px ставимо форму в одну колонку: поле отримує всю
      ширину, дата показується повністю разом зі значком календаря */
@media (max-width:420px){
  .quickbook__form{ grid-template-columns:1fr; }
}

/* 2. Нижня панель дій. «Забронювати» + «Подзвонити» у своїх звичайних
      полях просили 336px на 280px доступних, і кнопка дзвінка вилазила
      за правий край. Тиснемо поля й кегль — обидві підписи лишаються */
@media (max-width:400px){
  .sticky-cta{ gap:8px; padding-inline:12px; }
  .sticky-cta .btn,
  .sticky-cta__call{ padding-inline:12px; font-size:14px; white-space:nowrap; }
}

/* 3. Запобіжник на майбутнє: поле форми — елемент сітки, і за
      замовчуванням воно не стискається вужче за власний вміст.
      min-width:0 дозволяє йому триматися своєї колонки */
.field{ min-width:0; }
.field__input{ min-width:0; }

/* 4. Значки месенджерів — 18×18 і по 10px між ними: пальцем у такий
      квадратик не влучити. Розмір САМОГО МАЛЮНКА лишаємо (Дарʼя: «значки,
      а не кнопки»), а посилання під ним розтягуємо до 28×38.
      Малюнок при цьому не росте: маска фіксується на 18×18 і стоїть по
      центру збільшеної рамки, тому на вигляд нічого не змінюється —
      ті самі значки з тим самим просвітом.
      ⚠️ Через ::after цього зробити НЕ вийшло (перевірено 21.08): маска
      на посиланні обрізає вкладені коробки, і розширена зона натискання
      кліки не ловила. Тому росте саме посилання. */
@media (pointer:coarse){
  /* просвіт тепер дають самі рамки значків, тому власний gap прибираємо */
  .chat-ics{ gap:0; margin-left:5px; }
  .chat-ic{
    width:28px; height:38px;
    -webkit-mask-size:18px 18px; mask-size:18px 18px;
  }
}

/* 5. Прайс на сторінці відпочинку. Колонка ціни стояла на `auto`, тобто
      бралася за найдовшим цінником («300 · 400 · 500 грн» — 150px), і на
      320px назві лишалося 80px: не вміщалося навіть одне слово. Прив'язуємо
      ціну до частки — довгий цінник переноситься в два рядки, назва дихає */
@media (max-width:420px){
  .prices__row{ grid-template-columns:minmax(0,1fr) minmax(0,.55fr); padding-inline:14px; }
}

/* 6. Рядки характеристик («значок – підпис – значення»). Три колонки на
      320px давали підпису 76px, і «Розташування» різалося. Нижче 420px
      підпис і значення стають одне під одним праворуч від значка */
@media (max-width:420px){
  .spec__list li,
  .var__list li,
  .vars__facts li{
    grid-template-columns:20px minmax(0,1fr);
    column-gap:10px; row-gap:2px;
  }
  .spec__list li > b,
  .var__list li > b,
  .vars__facts li > b{ grid-column:2; }
}

/* 7. Назви вертикальних панелей («Стандарт плюс, двокімнатний», «Ужанський
      національний парк»). Панель вузька, а українські слова довгі: на
      1024–1280px найдовше слово не вміщалося в рамку й вилазило за неї.
      hyphens:auto переносить його зі знаком переносу там, де браузер знає
      українські правила; break-word — запасний шлях для решти, він
      переносить без дефіса, але за рамку слово вже не виходить */
.panel__name{ overflow-wrap:break-word; hyphens:auto; }