/* ============================================================
   complexes.css — розділ «Обмін»: сторінки комплексів.

   Власність цього файлу — тільки розділ /obmin/. Класи мають
   префікс .cx-, щоб не зіткнутися з .catalog-* і .obj-*.

   Тема вмикається обгорткою .coast[data-theme="coast"] всередині
   <main>, а не на <html>: з 2026-08-20 світла тема стоїть у
   розмітці base.njk за замовчуванням, і розділ переозначує токени
   каскадом незалежно від вибору відвідувача. Шапка і футер
   лишаються в темі відвідувача — розділ врізається між ними.

   ------------------------------------------------------------
   ПРО ПОДАЧУ (тікет 02, Рішення §5). Це не стилі складського
   каталогу з іншими кольорами — це інша мова:

   1. Фотографія йде в повному кольорі. Ані filter, ані скриму:
      сонце, вода й пісок — єдине, заради чого людина сюди
      дивиться, і саме їх попередня версія сторінки вимикала.
   2. Текст героя лежить ПІД знімком, на піску. На світлому
      холсті текст поверх фото вимагає затемнення, а затемнення —
      рівно той індустріальний прийом, який просили прибрати.
   3. Арка на верхніх кутах — єдиний новий прийом теми і тільки
      на фотографії: ніколи на картці, кнопці чи таблиці, і не
      більше однієї групи на екран. Логотип самого комплексу —
      арка над хвилею, тож прийом для об'єкта рідний.
   4. Ритм сторінки тримають смуги піску й теплого off-white,
      що чергуються самі, а не рамки й темні плити.
   5. Моноширинний шрифт — лише на числах (.cx-num). Мітки,
      підписи й навігація — Golos.
   6. Ані ghost-цифр, ані kicker'ів «/ NN», ані терміналів: це
      підпис основного сайту, і на курорті вона читається як
      каталог складів (R01, R02).

   Кольори — лише var(--deck-*)/var(--coast-*), той самий принцип,
   що в catalog.css. Напівпрозорі заливки беруться через
   color-mix(), а не переписуються rgba-літералом — так вони не
   розійдуться з токеном, якщо тему коригуватимуть пізніше.
   ============================================================ */

.coast{
  background: var(--deck-bg);
  color: var(--deck-text);
}

/* ---------- Спільне ---------- */

/* Моноширинний — тільки тут, і тільки навколо числа. Табличні
   цифри, щоб ряди фактів не «дихали» при зміні значень. */
.cx-num{
  font-family: var(--deck-font-mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  /* Розряди тисяч розділені нерозривним пробілом (U+00A0). У пропорційному
     шрифті це тонка щілина, у моноширинному — повна ширина цифри, і «£118 950»
     розпадається на два числа. Підтягуємо саме цю щілину: .cx-num обгортає
     тільки число, тож інших пробілів усередині нього немає. */
  word-spacing: -0.24em;
}

/* Тиха мітка секції замість kicker'а «/ NN — тема». Golos, а не
   моноширинний: моно лишається за числами. */
.cx-label{
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--deck-amber);
}

/* Повітря між смугами — частина подачі: курорт читається паузами, а не
   щільністю рядків. На широкому екрані пауза більша. */
.cx-section{ padding: var(--deck-s-8) 0; }
@media (min-width: 900px){
  .cx-section{ padding: var(--deck-s-9) 0; }
}

/* Ритм сторінки тримають дві смуги — пісок і теплий off-white, без ліній
   і темних плит. Чергування рахує CSS, а не розмітка: склад секцій
   залежить від даних (без реєстру юнітів секція «Юніти» не рендериться),
   і жорстко проставлений клас дав би дві однакові смуги поспіль. Липка
   <nav> між секціями в лік nth-of-type не йде — рахуються лише <section>. */
.coast > section{ --cx-card: var(--deck-surface); }
.coast > section:nth-of-type(even){
  background: var(--deck-surface);
  /* Картка завжди протилежного тону до своєї смуги — інакше на off-white
     смузі off-white картка зникає, і від неї лишається сама рамка. Тон
     задає смуга, а картки просто беруть --cx-card: жодна з них не знає,
     на якій смузі опинилася, і не ламається, коли склад секцій змінився. */
  --cx-card: var(--deck-bg);
}

/* Заявка — окрема, трохи глибша смуга незалежно від чергування: це
   остання дія на сторінці, і картка форми має лежати на власному тлі,
   а не зливатися з попередньою секцією. */
.coast #zayavka{ background: var(--deck-surface-2); --cx-card: var(--deck-surface); }

/* Картка-поверхня розділу — одна ідіома на три блоки: «Що на території»
   (.cx-panel), «Оренда і управління» (.cx-manage) і картка форми заявки
   (.cx-form-card). Тло бере --cx-card, тому картка завжди лишається
   протилежного тону до своєї смуги — правило чергування вище працює на всі
   три однаково. Оголошено тут один раз: три незалежні копії тих самих п'яти
   властивостей розходилися б поодинці. Локальні правила кожного блоку
   лишають собі рівно те, чим він відрізняється, — відступ згори й
   максимальну ширину. Мобільний паддінг перевизначається такою самою
   групою внизу файлу. */
.cx-panel,
.cx-manage,
.cx-form-card{
  padding: var(--deck-s-6);
  background: var(--cx-card);
  border: 1px solid var(--deck-line);
  border-radius: var(--deck-r-lg);
  box-shadow: var(--deck-shadow-card);
}

.cx-head{ max-width: 760px; }
.cx-head .cx-label{ display: block; margin-bottom: var(--deck-s-3); }
.cx-head h2{
  font-family: var(--deck-font-display);
  font-weight: 600;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--deck-text);
}
.cx-lead{
  margin-top: var(--deck-s-4);
  font-size: 17px;
  line-height: 1.65;
  color: var(--deck-text-2);
}

/* ---------- Фотографія ---------- */
.cx-shot{ margin: 0; position: relative; }
.cx-shot__img{
  display: block;
  width: 100%;
  object-fit: cover;
}

/* Арка. Верхні кути — радіус теми, нижні — звичайні. min() тримає
   арку пропорційною на вузькому екрані: 180px на телефоні з'їли б
   половину кадру, а окремий брейкпоінт заради цього не потрібен. */
.cx-arch{
  border-radius:
    min(var(--coast-arch), 26vw) min(var(--coast-arch), 26vw)
    var(--deck-r-lg) var(--deck-r-lg);
}

/* Підпис «візуалізація» (C05) — маленька плашка в кутку знімка, а
   не затемнення поверх нього. Golos: це слово, а не число. */
.cx-shot__kind{
  position: absolute;
  right: var(--deck-s-4);
  bottom: var(--deck-s-4);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--deck-text-2);
  background: color-mix(in srgb, var(--deck-surface) 86%, transparent);
  backdrop-filter: blur(8px);
  border-radius: var(--deck-r-pill);
  padding: 6px 14px;
}

.cx-shot__caption{
  margin-top: var(--deck-s-2);
  font-size: 13px;
  line-height: 1.5;
  color: var(--deck-text-3);
}

/* ---------- Герой ---------- */
/* Фотополоса ~62vh на всю ширину, під нею — крихта, H1, лід, факти
   й кнопки на піску. Ніякої мінімальної висоти в героя: висоту
   задає сам знімок, а текст під ним іде природним потоком. */
.cx-hero{ padding: var(--deck-s-5) 0 var(--deck-s-8); }

/* ---------- Слайдер героя ---------- */
/* Смуга кадрів під аркою. Механіка — рідний горизонтальний скрол зі
   scroll-snap: без JS вона гортається пальцем, колесом і клавішами,
   а стрілки з крапками лише додаються зверху. Тому слайдер не має
   «вимкненого» стану, у якому видно всі кадри поспіль. */
.cx-slider{ position: relative; margin-bottom: var(--deck-s-7); }

.cx-slider__track{
  display: flex;
  overflow-x: auto;
  /* Явно, а не за замовчуванням: при overflow-x: auto вертикаль сама
     обчислюється в auto, і кадр на піксель вищий за смугу дав би другу
     смугу гортання — вертикальну. */
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  /* Смугу гортання ховаємо: кадри й так підказують себе крапками. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.cx-slider__track::-webkit-scrollbar{ display: none; }
.cx-slider__track:focus-visible{ outline: 2px solid var(--deck-amber); outline-offset: 4px; }

.cx-slide{
  position: relative;
  margin: 0;
  flex: 0 0 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.cx-slide__img{
  display: block;
  width: 100%;
  height: clamp(320px, 62vh, 720px);
  object-fit: cover;
  object-position: center;
}
/* Перший кадр — постер комплексу: він цікавий нижньою третиною
   (басейн, корпуси, пальми), угорі небо. Вікно кадрування зсунуте
   вниз саме для нього; решті кадрів (види згори, лагуна) центр
   підходить краще. */
.cx-slide:first-child .cx-slide__img{ object-position: 50% 62%; }

/* Стрілка — та сама плашка, що в підпису «візуалізація»: поверхня теми
   крізь блюр, а не затемнення кадру. */
.cx-slider__nav{
  position: absolute;
  z-index: 2;
  background: color-mix(in srgb, var(--deck-surface) 86%, transparent);
  backdrop-filter: blur(8px);
  border-radius: var(--deck-r-pill);
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid var(--deck-line);
  color: var(--deck-text);
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.cx-slider__nav:hover{ background: var(--deck-surface); border-color: var(--deck-amber); }
.cx-slider__nav:focus-visible{ outline: 2px solid var(--deck-amber); outline-offset: 3px; }
.cx-slider__nav--prev{ left: var(--deck-s-5); }
.cx-slider__nav--next{ right: var(--deck-s-5); }

/* Позицію в стрічці показує лінія по нижньому краю кадру, а не плашка
   з крапками: плашка висіла над фотографією окремим предметом, лінія
   лягає в саму рамку. Радіус повторює нижні кути арки, тому смуга не
   вилазить за кадр. */
.cx-slider__progress{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  height: 3px;
  background: color-mix(in srgb, var(--deck-surface) 55%, transparent);
  border-radius: 0 0 var(--deck-r-lg) var(--deck-r-lg);
  overflow: hidden;
}
.cx-slider__bar{
  display: block;
  height: 100%;
  width: calc(100% / var(--cx-slides, 1));
  background: var(--deck-amber);
  /* Сегмент їде трансформом, а не зсувом left чи зміною ширини: обидві —
     властивості розкладки, і переобчислювати їх щокадру на скролі коштує
     плавності. Переходу теж немає: смугу веде сам скрол, тож на свайпі
     вона йде за пальцем, а на клацанні по стрілці — разом із плавним
     доїздом смуги кадрів. */
  transform: translateX(0);
}

@media (prefers-reduced-motion: reduce){
  .cx-slider__track{ scroll-behavior: auto; }
}

.cx-crumbs{
  font-size: 13.5px;
  color: var(--deck-text-3);
  margin-bottom: var(--deck-s-4);
}
.cx-crumbs a{
  color: var(--deck-text-2);
  text-decoration: none;
  border-bottom: 1px solid var(--deck-line-strong);
}
.cx-crumbs a:hover{ color: var(--deck-amber); border-bottom-color: var(--deck-amber-line); }

/* Знак комплексу підкладкою праворуч у героєві. Маска + фон із токена,
   тому колір тон-у-тон і кориться темі; z-index: 0 і власний stacking
   context тримають його позаду тексту. */
.cx-hero__inner{ position: relative; isolation: isolate; }
.cx-hero__mark{
  position: absolute;
  right: 0;
  top: var(--deck-s-4);
  bottom: var(--deck-s-4);
  /* Вужче, ніж просилося на око: на 1440px знак у 420px заходив під
     четверту плитку фактів і її край читався як бруд на підкладці.
     Число не з голови — воно виміряне: .cx-facts мають max-width 940px,
     праворуч від них у контейнері лишається близько 270px, і знак має в
     них уміститися. 260px лишають плиткам чисте поле із запасом. */
  width: min(26%, 260px);
  z-index: 0;
  pointer-events: none;
  /* Трохи темніше за холст (--deck-bg): один щабель до --deck-surface-3,
     і напівпрозоро — тон-у-тон, не перекриває фон. */
  background: var(--deck-surface-3);
  opacity: 0.8;
  -webkit-mask: url("/assets/img/casa-del-mare-mark.png") right center / contain no-repeat;
  mask: url("/assets/img/casa-del-mare-mark.png") right center / contain no-repeat;
}
.cx-hero__inner > :not(.cx-hero__mark){ position: relative; z-index: 1; }
/* Знак живе тільки там, де для нього є вільне поле. Нижче 1260px ряд
   плиток фактів займає всю ширину контейнера, і знак неминуче лізе під
   останню плитку — а декор, який бруднить дані, краще прибрати зовсім,
   ніж тулити в залишок місця. */
@media (max-width: 1259px){
  .cx-hero__mark{ display: none; }
}

.cx-hero__title{
  font-family: var(--deck-font-display);
  font-weight: 600;
  font-size: clamp(40px, 6vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--deck-text);
}

.cx-hero__lead{
  margin-top: var(--deck-s-4);
  max-width: 62ch;
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.6;
  color: var(--deck-text-2);
}

/* Факти героя — широкі плитки: кожен показник у власній рамці на поверхні,
   рівно два рядки — значення (число з одиницею одним рядком) і підпис під
   ним. column-reverse тримає <dt>Підпис</dt><dd>Значення</dd> у
   семантичному порядку, а показує значення згори. */
.cx-facts{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--deck-s-4);
  margin: var(--deck-s-6) 0 0;
  max-width: 940px;
}
.cx-facts > div{
  display: flex;
  flex-direction: column-reverse;
  gap: var(--deck-s-2);
  background: var(--deck-surface);
  border: 1px solid var(--deck-line);
  border-radius: var(--deck-r-md);
  padding: var(--deck-s-5) var(--deck-s-6);
}
.cx-facts dt{
  font-size: 12.5px;
  color: var(--deck-text-3);
}
/* Значення — один рядок: число з одиницею («34 юнітів», «45–100 м²»)
   не переноситься, інакше плитка стає в три рядки й вибивається з ряду. */
.cx-facts dd{
  font-size: 15px;
  color: var(--deck-text);
  white-space: nowrap;
}
.cx-facts dd .cx-num{
  font-size: 30px;
  font-weight: 600;
  line-height: 1;
}

.cx-hero__cta{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--deck-s-3) var(--deck-s-5);
  margin-top: var(--deck-s-6);
}
/* ---------- Фіксоване меню комплексу ---------- */
/* position: fixed — смуга завжди під шапкою сайту (--header-h), а не
   прилипає лише після героя. complex-config.js ховає її, поки герой у
   кадрі, і виводить, щойно його прокручено. Без JS смуга просто завжди
   зверху (як reveal: контент видимий, поки скрипт не виконався).

   top: 0 приклеює смугу до верхнього краю в'юпорта; z-index вищий за
   .site-header (100), тож на сторінках комплексу смуга сідає поверх
   загальної шапки, поки герой прокручено. Щойно герой у кадрі —
   complex-config.js ставить .is-hidden, і смуга їде вгору за екран,
   відкриваючи звичайну шапку. Тло щільне (94%), бо смуга лежить
   поверх контенту. */
.cx-sticky{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 101;
  background: color-mix(in srgb, var(--deck-surface) 94%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--deck-line);
  box-shadow: var(--deck-shadow-card);
  transition: transform .25s ease;
}
.cx-sticky.is-hidden{ transform: translateY(-100%); }

.cx-sticky__inner{
  display: flex;
  align-items: center;
  gap: var(--deck-s-5);
  /* Тільки вертикаль: горизонтальний відступ лишається від .wrap
     (0 --deck-s-6), інакше смуга стоїть на 32px ширша за решту сторінки
     й назва з кнопкою вибиваються з контентної сітки. */
  padding-top: 10px;
  padding-bottom: 10px;
}
.cx-sticky__title{
  font-weight: 600;
  color: var(--deck-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.cx-sticky__links{
  display: flex;
  flex-wrap: wrap;
  gap: var(--deck-s-3) var(--deck-s-5);
  list-style: none;
  margin: 0 auto 0 0;
  padding: 0;
}
.cx-sticky__links a{
  font-size: 14px;
  color: var(--deck-text-2);
  text-decoration: none;
  /* Палець, а не курсор: сам напис має 17px у висоту, поле добирає решту
     до 44. Вертикальний ритм смуги від цього не міняється — вона й так
     вища за 44px через кнопку. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.cx-sticky__links a:hover{ color: var(--deck-amber); }
/* Поточний розділ. Підкреслення, а не заливка: смуга вузька, і плашка в
   ній читалася б як друга кнопка поряд зі справжньою. */
.cx-sticky__links a.is-current{
  color: var(--deck-text);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--deck-amber);
}

/* Якірний перехід не має ховати заголовок секції під смугою меню.
   Смуга тепер приклеєна до top: 0 і важить ~66px; 100px — це висота
   смуги із запасом. Фіксоване число, не JS-вимір у рантаймі. */
.coast #mistse, .coast #zhyttia, .coast #planuvannia,
.coast #interyery, .coast #yunity, .coast #umovy, .coast #zayavka{
  scroll-margin-top: 100px;
}

/* ---------- Місце ---------- */
/* Карта району. Коли зʼявиться place.map.embed — тут стоятиме <iframe>
   у .cx-map; поки що .cx-map--placeholder: пунктирна рамка й приглушений
   знак, без кольору дії — карти ще немає, тиснути нема на що (та сама
   мова, що в .cx-soon на /obmin/). */
.cx-map{
  margin: var(--deck-s-7) 0 0;
  border: 1px solid var(--deck-line);
  border-radius: var(--deck-r-lg);
  overflow: hidden;
  box-shadow: var(--deck-shadow-card);
}
/* Смуга-підпис над картою. Вона й робить карту цитатою: до неї все на
   сторінці намальоване в темі, після неї — чужа графіка Google. Межа
   названа, а не замаскована. */
.cx-map__bar{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--deck-s-2) var(--deck-s-4);
  padding: 11px var(--deck-s-5);
  background: var(--deck-surface-2);
  border-bottom: 1px solid var(--deck-line);
}
.cx-map__where{
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--deck-text-3);
}
.cx-map__out{ font-size: 13px; color: var(--deck-amber); }
.cx-map__frame{ display: block; width: 100%; height: 380px; border: 0; }
.cx-map--placeholder{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--deck-s-2);
  min-height: 300px;
  padding: var(--deck-s-7) var(--deck-s-5);
  text-align: center;
  border-style: dashed;
  border-color: var(--deck-line-strong);
  box-shadow: none;
  background:
    repeating-linear-gradient(
      45deg,
      color-mix(in srgb, var(--deck-surface-2) 60%, transparent) 0 12px,
      transparent 12px 24px
    ),
    var(--cx-card);
}
.cx-map__pin{ width: 40px; height: 40px; color: var(--deck-text-3); }
.cx-map__title{
  font-family: var(--deck-font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--deck-text-2);
}
.cx-map__hint{ font-size: 13.5px; color: var(--deck-text-3); }

.cx-distances{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--deck-s-4);
  list-style: none;
  margin: var(--deck-s-7) 0 0;
  padding: 0;
}
.cx-distances li{
  background: var(--cx-card);
  border: 1px solid var(--deck-line);
  border-radius: var(--deck-r-md);
  box-shadow: var(--deck-shadow-card);
  padding: var(--deck-s-4) var(--deck-s-5);
}
.cx-distances__label{
  display: block;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--deck-text-3);
}
.cx-distances__value{
  display: block;
  margin-top: 6px;
  font-size: 18px;
  color: var(--deck-text);
}

/* ---------- Життя в комплексі ---------- */
/* Вид згори — один кадр на всю ширину смуги. Пропорція ширша за
   галерейні 16:9: знімок панорамний, і в квадратнішому вікні від нього
   лишилася б середина без країв ділянки, тобто без того самого масштабу,
   заради якого він тут стоїть. Арки немає — арка на сторінці одна, у
   героя, і повторена вдруге вона перестає бути прийомом. */
.cx-aerial{ margin-top: var(--deck-s-7); }
.cx-aerial .cx-shot__img{
  aspect-ratio: 21 / 9;
  border-radius: var(--deck-r-lg);
}

/* Картка блоку «Що на території». Поверхню бере зі спільного правила вгорі
   файлу — та сама мова, що в .cx-distances li з секції «Місце». До цього
   масштаб і перелік інфраструктури лежали двома списками просто на смузі —
   одразу після фотографій вони зливалися в одне полотно без жодного акценту,
   тоді як сусідня секція ті самі за жанром факти вже прибирала в картки. */
.cx-panel{ margin-top: var(--deck-s-6); }
.cx-panel > .cx-label{ display: block; margin-bottom: var(--deck-s-5); }

/* Сітка, а не flex-рядок: числа стають у стовпці однакової ширини, і ряд
   читається як шкала, а не як три склеєні написи. На вузькому екрані
   auto-fit сам зводить її в один стовпець. */
.cx-scale{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--deck-s-5);
  list-style: none;
  margin: 0;
  padding: 0;
}
.cx-scale li{ display: flex; flex-direction: column; gap: 4px; }
/* Акцент масштабом, а не кольором: янтар лишається кольором дії, тож число
   виділяється кеглем і вагою. На 32px воно важило рівно стільки ж, скільки
   заголовок секції поруч, і в ряду не читалося як число. */
.cx-scale .cx-num{
  font-size: clamp(34px, 4vw, 46px);
  font-weight: 600;
  line-height: 1;
  color: var(--deck-text);
}
.cx-scale li span:last-child{
  font-size: 13.5px;
  letter-spacing: 0.04em;
  color: var(--deck-text-3);
}

.cx-amenities{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--deck-s-3) var(--deck-s-5);
  list-style: none;
  margin: 0;
  padding: 0;
}
.cx-amenities li{
  position: relative;
  padding-left: 26px;
  color: var(--deck-text-2);
}
.cx-amenities li::before{
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 600;
  color: var(--deck-amber);
}

.cx-note{
  margin-top: var(--deck-s-7);
  padding-left: var(--deck-s-4);
  border-left: 2px solid var(--deck-amber-line);
  max-width: 72ch;
  color: var(--deck-text-2);
  line-height: 1.65;
}
.cx-note b{ color: var(--deck-text); font-weight: 600; }
/* Застереження, прив'язане до списку просто над ним, а не окремий блок. */
.cx-note--tight{ margin-top: var(--deck-s-5); }

/* ---------- Планування — конфігуратор ---------- */
/* Секція — конфігуратор: ліворуч рейка форматів, праворуч панель обраного
   (план на білому, площі, ціна, кнопки), під нею — вільні юніти цього
   формату з фільтром за стороною (M1 / M2). Перемикання й фільтр —
   complex-config.js; без JS усі панелі й рядки лишаються видимими, секція
   деградує до переліку форматів (той самий принцип, що в reveal).
   Панель це та сама <article class="cx-layout"> з модифікатором --wide на
   непарній останній — цим тримається живий тест сітки в build.test.js. */
.cx-cfg{ margin-top: var(--deck-s-7); }
@media (min-width: 980px){
  .cx-cfg{
    display: grid;
    grid-template-columns: 288px 1fr;
    gap: var(--deck-s-6);
    align-items: start;
  }
}

/* Рейка форматів. Активна вкладка — піднята картка з янтарною межею
   (не суцільний янтар: янтар лишається кольором дії — кнопок). */
.cx-cfg__rail-label{ display: block; margin-bottom: var(--deck-s-4); }
.cx-cfg__tabs{ display: flex; flex-direction: column; gap: var(--deck-s-2); }
.cx-cfg__tab{
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  font-family: var(--deck-font-body);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--deck-r-md);
  padding: var(--deck-s-3) var(--deck-s-4);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.cx-cfg__tab:hover{ background: var(--cx-card); color: var(--deck-text); }
.cx-cfg__tab.is-active{
  background: var(--cx-card);
  border-color: var(--deck-amber-line);
  box-shadow: var(--deck-shadow-card);
}
.cx-cfg__tab-name{
  font-family: var(--deck-font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--deck-text);
}
.cx-cfg__tab-meta{ font-size: 12.5px; line-height: 1.4; color: var(--deck-text-3); }

.cx-layout{
  display: block;
  background: var(--cx-card);
  border: 1px solid var(--deck-line);
  border-radius: var(--deck-r-lg);
  box-shadow: var(--deck-shadow-card);
  overflow: hidden;
}
/* Базово панель видима (без JS усі — одна під одною); JS ставить hidden
   тим, що не активні. Селектор із [hidden] обов'язковий: специфічність
   вища за .cx-layout, інакше display переб'є браузерний [hidden]. */
.cx-cfg__panel + .cx-cfg__panel{ margin-top: var(--deck-s-5); }
.cx-cfg__panel[hidden]{ display: none; }
/* Модифікатор --wide на панелі нічого не важить — лишається тільки заради
   живого тесту сітки в build.test.js. */
.cx-cfg__panel.cx-layout--wide{ grid-column: auto; }

.cx-cfg__main{ display: flex; flex-direction: column; }
@media (min-width: 720px){
  .cx-cfg__main{ flex-direction: row; align-items: stretch; }
  .cx-cfg__main .cx-layout__plan{ flex: 1 1 52%; display: grid; place-items: center; min-width: 0; }
  .cx-cfg__main .cx-layout__plan img{ max-height: 420px; object-fit: contain; }
  .cx-cfg__spec{ flex: 1 1 48%; }
}

/* Підкладка під план — чистий білий (--coast-plan-ground): план це
   креслення, а не фото, і на піщаному тлі тонка лінія мутніє. Рішення
   оператора 2026-08-30. */
.cx-layout__plan{ margin: 0; padding: var(--deck-s-6); background: var(--coast-plan-ground); }
.cx-layout__plan img{ width: 100%; height: auto; }

.cx-cfg__spec{
  display: flex;
  flex-direction: column;
  gap: var(--deck-s-3);
  padding: var(--deck-s-6);
}
.cx-cfg__spec h3{
  font-family: var(--deck-font-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--deck-text);
}
.cx-cfg__price{ font-size: 15px; color: var(--deck-text-2); }
.cx-cfg__price .cx-num{ font-size: 24px; font-weight: 600; color: var(--deck-text); }
.cx-cfg__dl{ margin: var(--deck-s-2) 0 0; border-top: 1px solid var(--deck-line); }
.cx-cfg__dl > div{
  display: flex;
  justify-content: space-between;
  gap: var(--deck-s-4);
  padding: 9px 0;
  border-bottom: 1px solid var(--deck-line);
}
.cx-cfg__dl dt{ font-size: 13.5px; color: var(--deck-text-3); }
.cx-cfg__dl dd{ font-size: 14px; color: var(--deck-text); }
.cx-cfg__spec .cx-layout__about{ font-size: 14.5px; line-height: 1.6; color: var(--deck-text-2); }
.cx-cfg__cta{ display: flex; flex-wrap: wrap; gap: var(--deck-s-3); margin-top: var(--deck-s-2); }

/* Список вільних юнітів обраного формату. Прокрутка всередині свого
   контейнера, як у решти таблиць розділу (R32i.2). */
.cx-cfg__units{
  padding: var(--deck-s-5) var(--deck-s-6) var(--deck-s-6);
  border-top: 1px solid var(--deck-line);
}
.cx-cfg__units-head{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--deck-s-3);
  margin-bottom: var(--deck-s-3);
}
.cx-cfg__units-head .cx-label{ display: block; }
.cx-cfg__filter{ display: flex; align-items: center; gap: var(--deck-s-2); }
/* Мітка осі вибору. Без неї три чипси з кодами не кажуть, за чим фільтр:
   «Усі / M1 / M2» саме по собі не питання, на яке можна відповісти. */
.cx-cfg__filter-label{
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--deck-text-3);
  margin-right: var(--deck-s-1);
}
.cx-cfg__chip{
  font-family: var(--deck-font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--deck-text-2);
  background: var(--cx-card);
  border: 1px solid var(--deck-line-strong);
  border-radius: var(--deck-r-pill);
  /* 44px у висоту — палець, а не курсор. Кегль лишається 13px, зростає
     тільки поле навколо напису. */
  min-height: 44px;
  padding: 7px 18px;
  cursor: pointer;
}
.cx-cfg__chip:hover{ border-color: var(--deck-amber-line); color: var(--deck-text); }
.cx-cfg__chip.is-active{
  background: var(--deck-amber);
  border-color: var(--deck-amber);
  color: var(--deck-on-amber);
}
.cx-cfg__ulist{
  overflow-x: auto;
  border: 1px solid var(--deck-line);
  border-radius: var(--deck-r-md);
}
.cx-cfg__ulist--c2{ --cx-ucols: 1.4fr 1.3fr; --cx-umin: 0; }
.cx-cfg__ulist--c3{ --cx-ucols: 1.4fr 1fr 1.3fr; --cx-umin: 0; }
.cx-cfg__ulist--c4{ --cx-ucols: 1.4fr 0.9fr 1fr 1.3fr; --cx-umin: 380px; }
/* Колонок буває від двох до п'яти: шаблон друкує «Сторона», «Поверх» і
   «Площа» лише тоді, коли в них справді різні значення. Пропорції й
   мінімальна ширина йдуть за кількістю — інакше на трьох колонках лишалася б
   смуга гортання, якої нема чого гортати. */
.cx-cfg__urow{
  display: grid;
  grid-template-columns: var(--cx-ucols, 1.4fr 0.8fr 0.7fr 1fr 1.3fr);
  gap: var(--deck-s-4);
  align-items: center;
  min-width: var(--cx-umin, 480px);
  padding: 10px var(--deck-s-4);
  border-bottom: 1px solid var(--deck-line);
  font-size: 14px;
  color: var(--deck-text-2);
}
.cx-cfg__urow[hidden]{ display: none; }
.cx-cfg__urow:last-child{ border-bottom: none; }
.cx-cfg__urow--head{
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--deck-text-3);
  background: color-mix(in srgb, var(--deck-surface-2) 50%, transparent);
}
.cx-cfg__empty{ margin-top: var(--deck-s-3); font-size: 13.5px; color: var(--deck-text-3); }
.cx-cfg__empty[hidden]{ display: none; }

/* ---------- Інтер'єри шоуруму ---------- */
/* Єдина фотосітка сторінки: кадри території пішли в слайдер героя, і
   правило, що колись обслуговувало обидві, лишилось тут одне — разом
   із плиткою .cx-shot--tile і широким кадром .cx-shot--wide.

   Перший кадр — на всю ширину сітки, далі по два: погляд іде від
   загального плану до деталей, а не по дев'яти однакових плитках.
   Останній кадр теж на всю ширину, коли інакше в ряду лишається
   дірка (шаблон рахує це на loop.last).

   Відступ згори менший за звичний деск-7: між заголовком і сіткою
   стоїть застереження про шоурум, і зайвий крок відірвав би кадри від
   тексту, який їх пояснює. Фільтрів немає й тут — знімок іде як знятий. */
.cx-interiors{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--deck-s-5);
  margin-top: var(--deck-s-6);
}
.cx-shot--wide{ grid-column: 1 / -1; }
.cx-shot--tile .cx-shot__img{
  aspect-ratio: 4 / 3;
  border-radius: var(--deck-r-lg);
}
.cx-shot--wide .cx-shot__img{ aspect-ratio: 16 / 9; }

/* ---------- Умови ---------- */
/* Стан передачі — окремим рядком і найбільшим кеглем блоку:
   «з ремонтом, без меблів» покупець має прочитати до угоди, а не
   вирахувати з того, що меблі стоять у списку доплат. */
.cx-callout{
  margin-top: var(--deck-s-7);
  padding: var(--deck-s-5) var(--deck-s-6);
  background: var(--deck-amber-wash);
  border: 1px solid var(--deck-amber-line);
  border-radius: var(--deck-r-lg);
  max-width: 72ch;
}
.cx-callout__headline{
  font-family: var(--deck-font-display);
  font-size: 21px;
  font-weight: 600;
  color: var(--deck-text);
}
.cx-callout__text{ margin-top: var(--deck-s-2); color: var(--deck-text-2); line-height: 1.65; }

.cx-included{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--deck-s-6);
  margin-top: var(--deck-s-7);
}
.cx-included ul{
  display: grid;
  gap: 6px;
  margin: var(--deck-s-3) 0 0;
  padding-left: 20px;
  color: var(--deck-text-2);
}

/* Поверхня — зі спільного правила вгорі файлу; тут лишається тільки те, чим
   цей блок відрізняється: більший відступ згори (він завершує «Умови») і
   ширина в 80 знаків, бо всередині суцільний текст, а не список. */
.cx-manage{
  margin-top: var(--deck-s-7);
  max-width: 80ch;
}
.cx-manage .cx-label{ display: block; margin-bottom: var(--deck-s-3); }
.cx-manage__text{ margin-top: var(--deck-s-3); color: var(--deck-text-2); line-height: 1.65; }
.cx-manage__terms{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--deck-s-3) var(--deck-s-5);
  margin-top: var(--deck-s-5);
  padding-top: var(--deck-s-4);
  border-top: 1px solid var(--deck-line);
}
.cx-manage__terms span{ color: var(--deck-text-3); }
.cx-manage__terms b{ color: var(--deck-text); font-weight: 600; }

/* ---------- Заявка ---------- */
/* Мобільний — стовпчик у порядку розмітки: заголовок, форма, кроки.
   Десктоп (нижче) розкладає areas: кроки стають у ліву колонку під
   заголовком і заповнюють простір поруч із високою формою. */
.cx-apply{ display: grid; gap: var(--deck-s-7); align-items: start; }

/* Кроки після заявки. Крок 0 залитий янтарем — його вже зроблено.
   Тонка сполучна лінія веде око згори вниз. Ані ghost-цифр, ані
   kicker'ів: номер — маленький кружок, а не тло. */
.cx-steps{ list-style: none; margin: 0; padding: 0; display: grid; gap: var(--deck-s-5); }
.cx-step{
  position: relative;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: var(--deck-s-4);
  align-items: start;
}
.cx-step:not(:last-child)::before{
  content: "";
  position: absolute;
  left: 16px;
  top: 40px;
  bottom: calc(var(--deck-s-5) * -1);
  width: 2px;
  background: var(--deck-line);
}
.cx-step__n{
  position: relative;
  z-index: 1;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--deck-amber-line);
  border-radius: var(--deck-r-pill);
  background: var(--cx-card);
  font-family: var(--deck-font-mono);
  font-size: 14px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--deck-amber);
}
.cx-step:first-child .cx-step__n{
  background: var(--deck-amber);
  border-color: var(--deck-amber);
  color: var(--deck-on-amber);
}
.cx-step__body h3{
  font-family: var(--deck-font-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--deck-text);
}
.cx-step__body p{
  margin-top: 4px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--deck-text-2);
}
/* Форма спільна для всього сайту (forms.css), і мітки полів та тексти
   помилок там моноширинні. На цій сторінці моно лишається за числами —
   тому в межах .coast вони повертаються в Golos. Правка навмисно тут, а
   не у forms.css: той файл — мова форм усього сайту, і вона не міняється
   через один розділ. */
.coast .lead-field__label,
.coast .lead-field__error{ font-family: var(--deck-font-body); }

/* Картка форми — та сама поверхня, що в .cx-panel і .cx-manage, і власного
   правила їй більше не потрібно: вона нічим від них не відрізняється. Живе
   в спільному правилі вгорі файлу. */
@media (min-width: 900px){
  /* Заголовок — зверху ліворуч, кроки — під ним (заповнюють простір, який
     раніше пустував), форма — праворуч на всю висоту обох рядків. */
  .cx-apply{
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: "head form" "steps form";
    column-gap: var(--deck-s-8);
    row-gap: var(--deck-s-6);
  }
  .cx-apply > .cx-head{ grid-area: head; }
  .cx-apply > .cx-steps{ grid-area: steps; }
  .cx-apply > .cx-form-card{ grid-area: form; align-self: start; }
}

/* ============================================================
   Сторінка розділу /obmin/ — не сторінка комплексу.

   Це сторінка основного сайта: у неї своя шапка секцій, kicker'и
   «/ 01», «/ 02» і темний герой, і тема Coast сюди не приходить.
   Тому класи нижче беруть звичайні токени сайта, а не --cx-card,
   який задають смуги .coast. Спільного з блоками вище в них рівно
   одне — фотографія йде в повному кольорі.
   ============================================================ */

/* Герой сторінки. Загальне правило .hero--cine .hero-bg (site.css)
   накладає saturate(.5) brightness(.7): фото там — фонова текстура
   під світлим текстом, і для складів це працює. Тут під фільтром
   гасне рівно те, заради чого знімок і стоїть, — Середземне море
   на заході (R04, R13).

   Правка страничная навмисно: глобальне правило лишається мовою
   решти сайта, а розділ знімає фільтр із себе сам. `none` — єдине
   значення filter, дозволене в цьому файлі: воно фільтр прибирає,
   а не накладає, і тест у build.test.js стежить саме за цим. */
.cx-obmin-hero .hero-bg{ filter: none; }

/* ---------- Каталог комплексів ---------- */
/* Опублікованих комплексів наразі один, і картка побудована під це:
   на широкому екрані вона розкладається знімком і текстом поруч, а
   не стискається в плитку каталогу. Сітка — grid у стовпчик: другий
   опублікований комплекс стане другою такою ж карткою під першою,
   без окремої гілки в розмітці. */
.cx-catalog{ display: grid; gap: var(--deck-s-6); }

.cx-complex{
  display: grid;
  background: var(--deck-surface);
  border: 1px solid var(--deck-line);
  border-radius: var(--deck-r-lg);
  box-shadow: var(--deck-shadow-card);
  overflow: hidden;
  transition: border-color .2s ease;
}
.cx-complex:hover,
.cx-complex:focus-within{ border-color: var(--deck-amber-line); }
@media (prefers-reduced-motion: reduce){
  .cx-complex{ transition: none; }
}

/* 860px, а не 900: розкладка «фото | текст» тримається, поки на текст
   лишається хоча б ~380px — вужче заголовок починає ламатися на три
   рядки, і знімок з'їдає картку. */
@media (min-width: 860px){
  .cx-complex{ grid-template-columns: 1.1fr 1fr; align-items: stretch; }
}

.cx-complex__img{
  height: 100%;
  min-height: 280px;
  /* Кадр цікавий нижньою частиною — басейн і корпуси, угорі небо. */
  object-position: 50% 62%;
}

.cx-complex__body{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--deck-s-3);
  padding: var(--deck-s-6);
}
.cx-complex__place{
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--deck-text-3);
}
.cx-complex__title{
  font-family: var(--deck-font-display);
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.cx-complex__title a{ color: var(--deck-text); text-decoration: none; }
.cx-complex__title a:hover{ color: var(--deck-amber); }
.cx-complex__summary{
  font-size: 16px;
  line-height: 1.6;
  color: var(--deck-text-2);
  max-width: 46ch;
}
.cx-complex__facts{
  display: flex;
  flex-wrap: wrap;
  gap: var(--deck-s-3) var(--deck-s-6);
  margin: 0;
}
.cx-complex__facts dt{
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--deck-text-3);
}
.cx-complex__facts dd{ margin: 4px 0 0; font-size: 18px; color: var(--deck-text); }
/* Кнопка притиснута до низу картки, щоб на широкому екрані вона стояла
   на одній лінії з нижнім краєм знімка, а не висіла посеред тексту. */
.cx-complex__link{ margin-top: auto; }

/* ---------- Заглушка «готуємо» ---------- */
/* Ані посилання, ані ціни, ані числа юнітів: про ці комплекси відомо
   лише назва й країна, і саме стільки картка й показує (R08, R08.1).
   Штрихова рамка й приглушений текст кажуть «ще не готово» без
   кольору — янтар лишається кольором дії, а тут діяти нема чого. */
.cx-soon{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: var(--deck-s-4);
  list-style: none;
  margin: var(--deck-s-5) 0 0;
  padding: 0;
}
.cx-soon__item{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: var(--deck-s-5);
  background: color-mix(in srgb, var(--deck-surface) 55%, transparent);
  border: 1px dashed var(--deck-line-strong);
  border-radius: var(--deck-r-md);
}
.cx-soon__country{
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--deck-text-3);
}
.cx-soon__title{
  font-family: var(--deck-font-display);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--deck-text-2);
}
.cx-soon__mark{
  margin-top: 2px;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--deck-text-3);
  background: color-mix(in srgb, var(--deck-text-3) 14%, transparent);
  border-radius: var(--deck-r-pill);
  padding: 4px 12px;
}

/* ---------- Мобільний ---------- */
@media (max-width: 900px){
  .cx-interiors{ grid-template-columns: 1fr; }
  .cx-shot--tile .cx-shot__img{ aspect-ratio: 16 / 10; }
  /* 21:9 на вузькому екрані — смужка у 180px заввишки: у ній не
     розібрати ані корпусів, ані рельєфу. */
  .cx-aerial .cx-shot__img{ aspect-ratio: 16 / 10; }
  .cx-map__frame{ height: 280px; }
  .cx-map--placeholder{ min-height: 240px; padding: var(--deck-s-6) var(--deck-s-4); }
}

@media (max-width: 720px){
  /* Знімок героя показується цілим, а не вирізом із середини: на
     390px смуга у 62vh залишила б від кадру вузьку стрічку, у якій
     не впізнати ані басейну, ані корпусів (R36i). Пропорція 16:10
     майже збігається з рідними 1920×1168 — кадрування зникає. */
  .cx-slide__img,
  .cx-slide:first-child .cx-slide__img{
    height: auto;
    aspect-ratio: 16 / 10;
    object-position: center;
  }
  /* Стрілки на телефоні зайві — смуга гортається пальцем. Лінія прогресу
     лишається: вона нічого не займає й підказує, що кадрів більше. */
  .cx-slider__nav{ display: none; }
  /* Вертикаль першого екрана стиснута свідомо: на 390×844 під фото мають
     поміститися крихта, H1, лід, ряд фактів і обидві кнопки — критерій
     R36i «кнопки в першому екрані». Кожен зайвий відступ тут коштує
     кнопки, тому їх тут менше, ніж на десктопі. */
  .cx-slider{ margin-bottom: var(--deck-s-5); }
  .cx-hero{ padding: var(--deck-s-3) 0 var(--deck-s-7); }
  .cx-section{ padding: var(--deck-s-7) 0; }
  .cx-facts{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: var(--deck-s-5);
    max-width: none;
  }
  /* На вузькому екрані значення може перенестись — краще третій рядок,
     ніж обрізане число. */
  .cx-facts dd{ white-space: normal; }
  .cx-facts dd .cx-num{ font-size: 26px; }
  .cx-hero__cta{ margin-top: var(--deck-s-5); }
  .cx-sticky__links{ display: none; }
  .cx-sticky__title{ margin-right: auto; }
  .cx-panel, .cx-manage, .cx-form-card{ padding: var(--deck-s-5); }
  /* Картка комплексу на /obmin/: на 390px знімок іде смугою над текстом,
     а не тягне картку вбік. Висота фіксується пропорцією, щоб кадр не
     перетворився на стрічку. */
  .cx-complex__img{ height: auto; min-height: 0; aspect-ratio: 16 / 10; }
  .cx-complex__body{ padding: var(--deck-s-5); }
}