/* catalog.css — владелец: тикет 03. Другие тикеты сюда не пишут.
   Стилі для /katalog/, секції зарубіжних активів на /obmin/ і сторінки
   об'єкта /obiekt/<id>/. Розширює класи .deck-* (tokens.css) і класи T01
   (.wrap, .page-section, .section-head, .stub-page, .contact-grid) —
   нова паралельна система тут не заводиться. Кольори — лише var(--deck-*). */

/* ------------------------------------------------------------
   Фільтри каталогу
   ------------------------------------------------------------ */
.catalog-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--deck-s-4);
  margin-bottom: var(--deck-s-6);
}

.catalog-filter {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.catalog-filter__select {
  font-family: var(--deck-font-body);
  font-size: 14.5px;
  color: var(--deck-text);
  background: var(--deck-surface-2);
  border: 1px solid var(--deck-line-strong);
  border-radius: var(--deck-r-sm);
  padding: 10px 14px;
  min-width: 200px;
  cursor: pointer;
}

.catalog-filter__select:focus {
  outline: none;
  border-color: var(--deck-amber);
}

.catalog-filter__reset {
  align-self: flex-end;
}

/* ------------------------------------------------------------
   Порожні стани — два різних, з різними діями
   ------------------------------------------------------------ */
.catalog-empty {
  padding: var(--deck-s-6);
  background: var(--deck-surface);
  border: 1px solid var(--deck-line);
  border-radius: var(--deck-r-lg);
  text-align: center;
  margin-bottom: var(--deck-s-6);
}

.catalog-empty h2 { font-size: 20px; margin-bottom: var(--deck-s-3); }
.catalog-empty p {
  color: var(--deck-text-2);
  font-size: 15px;
  max-width: 520px;
  margin: 0 auto var(--deck-s-4);
}

.catalog-empty__actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--deck-s-3);
}

/* ------------------------------------------------------------
   Сітка карток об'єктів — спільна для /katalog/ і /obmin/
   ------------------------------------------------------------ */
.catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--deck-s-4);
}

.catalog-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--deck-s-3);
  transition: border-color .2s ease, transform .2s ease;
}
/* Інтерактивна картка: рамка амбер + підйом, за правилом дизайн-системи
   (readme.md → VISUAL FOUNDATIONS → Hover). */
.catalog-card:hover,
.catalog-card:focus-within {
  border-color: var(--deck-amber-line);
  transform: translateY(-3px);
}
@media (prefers-reduced-motion: reduce) {
  .catalog-card { transition: none; }
  .catalog-card:hover, .catalog-card:focus-within { transform: none; }
}

/* Модифікатор картки з обкладинкою (вітрина на головній). База та сама —
   окремого шаблону картки для головної не заводимо. Знімок кладеться в край
   картки, тому верхній падінг знімається, а сама картка підрізає кути. */
.catalog-card--media {
  padding-top: 0;
  overflow: hidden;
}
.catalog-card__photo {
  display: block;
  flex: none;
  height: 168px;
  margin: 0 calc(-1 * var(--deck-s-5));
  background-size: cover;
  background-position: center;
  /* Та сама обробка, що в .photo-card__img на головній: знімок несе
     атмосферу класу активу, а не вдає фотографію конкретного лота. */
  filter: saturate(.5) brightness(.72);
  transition: filter .4s var(--ease-heavy);
}
.catalog-card--media:hover .catalog-card__photo { filter: saturate(.85) brightness(.9); }

.catalog-card h3 {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.catalog-card h3 a {
  color: var(--deck-text);
  text-decoration: none;
}

.catalog-card h3 a:hover { color: var(--deck-amber); }

.catalog-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Позначка «Зразок» лежить абсолютом у правому верхньому куті картки, тому
   ряд пілюль під нею треба вкоротити — інакше довга назва категорії
   («Склади та логістика», «Окремо розташована будівля») заїжджає під неї.
   Сусідній селектор, а не :has(), бо позначка стоїть рівно перед рядом. */
.deck-pill--sample + .catalog-card__badges { padding-right: 84px; }

.catalog-card__location {
  color: var(--deck-text-2);
  font-size: 14px;
}

.catalog-card__meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--deck-s-3);
  margin: 0;
}

.catalog-card__meta dt {
  font-family: var(--deck-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--deck-text-3);
}

.catalog-card__meta dd {
  margin: 4px 0 0;
  font-size: 14.5px;
  color: var(--deck-text);
}

/* Дохідність — та цифра, заради якої інвестор і читає картку: власний ряд
   під площею й ціною, підсвічений акцентом. Ряду немає зовсім, якщо
   cap rate у лоті не заповнений. */
.catalog-card__yield { grid-column: 1 / -1; }
.catalog-card__yield dd { color: var(--deck-amber); font-weight: 600; }

.catalog-card__link {
  margin-top: auto;
  align-self: flex-start;
}

/* Позначка режиму публічності */
.deck-pill--publicity-open { color: var(--deck-lime); border-color: var(--deck-lime-line); background: var(--deck-lime-wash); }
.deck-pill--publicity-teaser { color: var(--deck-red); border-color: var(--deck-red-line); background: var(--deck-red-wash); }

/* Позначка «Зразок» — явна маркування демо-об'єктів у даних і на вітрині */
.deck-pill--sample {
  position: absolute;
  top: var(--deck-s-4);
  right: var(--deck-s-4);
  color: var(--deck-amber);
  border-color: var(--deck-amber-line);
  background: var(--deck-amber-wash);
  border-style: dashed;
}

/* ------------------------------------------------------------
   Сторінка об'єкта
   ------------------------------------------------------------ */

/* --- Hero -------------------------------------------------------------
   Обкладинка на всю ширину зі скримом. Той самий приём, що .hero--cine
   на головній: знімок приглушується фільтром, читаність тексту тримає
   градієнт від фону сторінки, а не суцільне затемнення картинки. */
.obj-hero {
  position: relative;
  overflow: hidden;
  padding: var(--deck-s-7) 0;
  border-bottom: 1px solid var(--hair);
  /* Темні токени герой отримує в site.css (поруч із .hero--cine). Тут —
     два наслідки, без яких вони не працюють:
     1. Власна темна плита. Шість об'єктів-зразків ідуть без обкладинки,
        і без цього рядка їх герой лишився б прозорим: світлий холст
        сторінки під світлим уже текстом.
     2. Явний color через var(). Успадкований від body color — це вже
        обчислений колір поточної теми, а не токен, тому локальна
        підміна --deck-text його не дістає (та сама причина, що в
        коментарі до .hero--cine h1 у site.css). */
  background: var(--deck-bg);
  color: var(--deck-text);
}
/* Шапка липка, але лишається в потоці — разом з hero вона має займати
   рівно екран, той самий приём, що .hero--cine на головній. */
.obj-hero--photo {
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
  display: flex;
  align-items: flex-end;
}
.obj-hero__bg {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover;
  background-position: center 55%;
  transform: scale(1.03);
  /* Легше за перший варіант — фото має лишатись пізнаваним, як на
     референсі, а не гаснути до силуету. */
  filter: saturate(.85) brightness(.92);
}
.obj-hero__bg::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(to top,
      var(--deck-bg) 2%,
      color-mix(in srgb, var(--deck-bg) 56%, transparent) 34%,
      color-mix(in srgb, var(--deck-bg) 14%, transparent) 100%),
    linear-gradient(to right,
      color-mix(in srgb, var(--deck-bg-deep) 46%, transparent) 0%,
      transparent 55%);
}
.obj-hero__inner { position: relative; z-index: 1; width: 100%; }

.obj-hero__badges { display: flex; flex-wrap: wrap; gap: 8px; }
.deck-pill--deal {
  color: var(--deck-amber);
  border-color: var(--deck-amber-line);
  background: var(--deck-amber-wash);
}

.obj-hero__kicker {
  margin-top: var(--deck-s-4);
  font-family: var(--deck-font-mono);
  font-size: 12.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--deck-text-2);
}
.obj-hero h1 {
  margin: var(--deck-s-3) 0 0;
  font-family: var(--deck-font-display);
  font-weight: 800;
  font-size: clamp(30px, 4.6vw, 58px);
  line-height: 1.05;
  letter-spacing: -.03em;
  max-width: 20ch;
  text-wrap: balance;
}
.obj-hero__lead {
  margin-top: var(--deck-s-4);
  max-width: 56ch;
  color: var(--deck-text-2);
  font-size: 16.5px;
}
.obj-hero__lead a { color: var(--deck-amber); }

/* Ключові цифри: одна панель, комірки розділені волосінню. Число —
   моношрифтом, щоб цифри різних об'єктів вирівнювались по розряду. */
.obj-figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  margin: var(--deck-s-6) 0 0;
  background: color-mix(in srgb, var(--deck-surface) 82%, transparent);
  border: 1px solid var(--deck-line);
  border-radius: var(--deck-r-md);
  overflow: hidden;
  backdrop-filter: blur(6px);
}
.obj-figures > div {
  padding: var(--deck-s-4) var(--deck-s-5);
  border-right: 1px solid var(--deck-line);
}
.obj-figures > div:last-child { border-right: 0; }
.obj-figures dt {
  font-family: var(--deck-font-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--deck-text-3);
}
.obj-figures dd {
  margin: 6px 0 0;
  font-family: var(--deck-font-mono);
  font-size: clamp(19px, 2vw, 25px);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--deck-amber);
  font-variant-numeric: tabular-nums;
}
.obj-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--deck-s-3);
  margin-top: var(--deck-s-5);
}

/* Факти (.deck-specs, .deck-rows), картки з бейджем (.deck-badge,
   .deck-card__head) і сітка карток (.deck-card-grid) — перенесено в
   спільну систему, design-system/amber-deck/tokens.css. Тут лишається
   тільки те, що специфічне для сторінки об'єкта. */

/* --- Галерея ----------------------------------------------------------
   Юстована сітка: головний кадр окремим рядом на всю ширину, решта —
   рівними рядами під ним.

   Було жорстке 5×2 з ведучим кадром на 2×2. Така сітка сходилась
   рівно на семи фото (4 комірки під ведучий + 6) і розсипалась на
   будь-якій іншій кількості: на дев'яти останній ряд заповнювався
   на два кадри з трьох, а самі кадри в ньому виходили нижчі за
   верхні, бо неявні ряди беруть висоту за вмістом, а не з
   grid-template-rows.

   Тепер це flex-wrap, де кожен кадр має flex-grow: 1. Ряд завжди
   розтягується на всю ширину — включно з останнім, тому порожнього
   місця праворуч не лишається за будь-якої кількості фото. Висота
   ряду задана, кадр тягнеться по ній через object-fit: cover. */
.obj-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: var(--deck-s-3);
}
.obj-shot {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--deck-r-md);
  border: 1px solid var(--deck-line);
  background: var(--deck-surface);
  cursor: zoom-in;
  /* grow:1 — саме він доганяє останній ряд до повної ширини.
     basis у відсотках задає бажану кількість кадрів у ряду (близько
     чотирьох на десктопі), clamp не дає їм здрібніти на вузькому
     екрані й розпливтись на широкому.

     Наслідок, який видно в даних: один зайвий кадр в останньому ряду
     розтягується на всю ширину і стає більшим за решту. Тому кількість
     дрібних кадрів у media.gallery (усі, крім ведучого) тримаємо кратною
     чотирьом — 8 або 12: тоді ряди повні, а всі кадри однакові. */
  flex: 1 1 clamp(200px, 21%, 300px);
  height: clamp(180px, 23vh, 250px);
}
.obj-shot:focus-visible { outline: 2px solid var(--deck-amber); outline-offset: 2px; }
/* Ведучий кадр — окремий ряд на всю ширину, а не блок 2×2 всередині
   сітки: так він лишається головним, але не диктує решті кількість
   комірок і не лишає по собі дірок. */
.obj-shot--lead {
  flex-basis: 100%;
  height: clamp(300px, 42vh, 460px);
}
.obj-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(.82) brightness(.96);
  /* Зум лишається всередині рамки кадру — сам .obj-shot ріже overflow. */
  transition: transform .5s var(--ease-heavy), filter .4s var(--ease-heavy);
}
.obj-shot:hover img,
.obj-shot:focus-visible img { transform: scale(1.07); filter: saturate(1) brightness(1); }
@media (prefers-reduced-motion: reduce) {
  .obj-shot img { transition: none; }
  .obj-shot:hover img, .obj-shot:focus-visible img { transform: none; }
}
/* Підпис лежить на самому знімку, а не на холсті сторінки, тому темний
   він завжди — і в темній темі, і в світлій. Раніше тут стояли --deck-text
   і --deck-bg-deep, тобто токени поточної теми: у світлій це давало
   темний текст на світлому градієнті поверх фото, і підпис зникав.
   --deck-dark-* оголошені в tokens/colors.css саме як FIXED DARK,
   theme-independent — для таких випадків. */
.obj-shot figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--deck-s-5) var(--deck-s-3) var(--deck-s-2);
  background: linear-gradient(to top,
    color-mix(in srgb, var(--deck-dark-bg-deep) 92%, transparent) 0%,
    color-mix(in srgb, var(--deck-dark-bg-deep) 60%, transparent) 52%,
    transparent 100%);
  font-family: var(--deck-font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--deck-dark-text);
  /* Знімки різні: над світлою стелею або засніженим вікном самого
     градієнта може не вистачити, тінь дає підпису опору на будь-якому. */
  text-shadow: 0 1px 3px rgba(7, 10, 14, .75);
  line-height: 1.4;
}
.obj-shot--lead figcaption { font-size: 13px; padding: var(--deck-s-6) var(--deck-s-4) var(--deck-s-3); }

@media (max-width: 900px) {
  /* Два кадри в ряд: basis рівно під половину за вирахуванням проміжку.
     Останній ряд і тут доганяється grow-ом, тому непарна кількість фото
     не лишає дірки — останній кадр просто йде на всю ширину. */
  .obj-shot {
    flex-basis: calc(50% - var(--deck-s-3));
    height: clamp(150px, 26vw, 210px);
  }
  .obj-shot--lead { flex-basis: 100%; height: clamp(220px, 44vw, 320px); }
}

/* --- Лайтбокс-слайдер ---------------------------------------------------
   Одна розмітка на сторінку; object-gallery.js лише перемикає активний
   слайд і клас is-open. Клавіатура: Esc закриває, ← → гортають. */
.obj-lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--deck-bg-deep) 96%, transparent);
  backdrop-filter: blur(4px);
}
.obj-lightbox[hidden] { display: none; }
.obj-lightbox__frame {
  margin: 0;
  max-width: min(1100px, 88vw);
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  gap: var(--deck-s-3);
}
.obj-lightbox__frame img {
  max-width: 100%;
  max-height: 74vh;
  object-fit: contain;
  border-radius: var(--deck-r-md);
  border: 1px solid var(--deck-line-strong);
  background: var(--deck-bg-deep);
}
.obj-lightbox__frame figcaption {
  text-align: center;
  color: var(--deck-text-2);
  font-size: 14.5px;
}
.obj-lightbox__close,
.obj-lightbox__nav {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--deck-surface-2);
  border: 1px solid var(--deck-line-strong);
  color: var(--deck-text);
  border-radius: var(--deck-r-pill);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.obj-lightbox__close:hover,
.obj-lightbox__nav:hover { background: var(--deck-surface-3); border-color: var(--deck-amber); color: var(--deck-amber); }
.obj-lightbox__close { top: var(--deck-s-5); right: var(--deck-s-5); width: 40px; height: 40px; font-size: 16px; }
.obj-lightbox__nav { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; font-size: 26px; }
.obj-lightbox__nav--prev { left: var(--deck-s-5); }
.obj-lightbox__nav--next { right: var(--deck-s-5); }
.obj-lightbox__count {
  position: absolute;
  bottom: var(--deck-s-5);
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-family: var(--deck-font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--deck-text-3);
}
@media (max-width: 620px) {
  .obj-lightbox__nav { width: 40px; height: 40px; font-size: 22px; }
  .obj-lightbox__nav--prev { left: var(--deck-s-3); }
  .obj-lightbox__nav--next { right: var(--deck-s-3); }
}

/* --- Склад комплексу -------------------------------------------------- */
.obj-buildings {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--deck-s-4);
}
/* П'ять корпусів — окремий випадок. auto-fit ставить у ряд стільки карток,
   скільки влізе по 260px: на широкому екрані це чотири, і п'ята лишається
   сама в другому ряду на всю ширину. Читається як помилка верстки, хоча це
   просто залишок ділення.

   Для п'яти вмикаємо явну сітку на шість колон: два головні корпуси зверху
   по три колони (рівно половина ряду), три менші знизу по дві (рівно
   третина). Шість — найменше число, яке ділиться і на 2, і на 3, тому обидва
   ряди виходять точними без жодного підганяння ширин.

   Умова на :has() тримає правило локальним: об'єкти з іншою кількістю
   корпусів лишаються на auto-fit. Браузер без :has() блок пропустить і теж
   лишиться на auto-fit — тобто на попередній поведінці, а не на зламаній.
   Поріг 900px не на око: .wrap віддає під сітку W-64, гапи забирають 5×16,
   тож колонка виходить (W-144)/6, а картка на дві колони — 2×колонка+гап.
   На 900px це рівно 268px, тобто ще над мінімумом 260px, який auto-fit
   вважає межею читабельності картки. Нижче правило вимикається, і auto-fit
   розкладає ряди сам. */
@media (min-width: 900px) {
  .obj-buildings:has(> .obj-building:nth-child(5):last-child) {
    grid-template-columns: repeat(6, 1fr);
  }
  .obj-buildings:has(> .obj-building:nth-child(5):last-child) > .obj-building:nth-child(-n + 2) {
    grid-column: span 3;
  }
  .obj-buildings:has(> .obj-building:nth-child(5):last-child) > .obj-building:nth-child(n + 3) {
    grid-column: span 2;
  }
}
.obj-building {
  background: var(--deck-surface);
  border: 1px solid var(--deck-line);
  border-radius: var(--deck-r-md);
  padding: var(--deck-s-5);
  display: flex;
  flex-direction: column;
}
.obj-building__head { display: flex; align-items: center; justify-content: space-between; gap: var(--deck-s-3); }
/* Маркер корпусу — .deck-badge зі спільної системи (той самий квадрат,
   що й іконки в «Інфраструктура та земля»). */
.obj-building__category { padding: 4px 12px; font-size: 11px; }
.obj-building__area {
  margin: var(--deck-s-4) 0 0;
  font-family: var(--deck-font-mono);
  font-size: 24px;
  font-weight: 700;
  color: var(--deck-text);
  font-variant-numeric: tabular-nums;
}
/* Опис забирає вільну висоту картки, тому рейка частки і підпис під нею
   стоять на спільній лінії по всьому ряду. Без цього блок із коротшим
   описом піднімав свою смужку вище за сусідні, і ряд розсипався.
   Власні відступи рейки при цьому лишаються — на відміну від
   margin-top:auto, який їх з'їв би. */
.obj-building__label {
  margin: 4px 0 0;
  font-size: 14px;
  color: var(--deck-text-2);
  flex: 1 1 auto;
}
.obj-building__bar {
  margin-top: var(--deck-s-4);
  height: 5px;
  background: var(--deck-surface-3);
  border-radius: var(--deck-r-pill);
  overflow: hidden;
}
.obj-building__bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--deck-amber-deep), var(--deck-amber));
  border-radius: var(--deck-r-pill);
}
.obj-building__share {
  margin-top: 9px;
  font-size: 13px;
  color: var(--deck-text-3);
  font-variant-numeric: tabular-nums;
}

/* --- Підсумок: два окремих блоки, «Разом» і ділянка --------------------
   Раніше це був один суцільний рядок із трьох цифр — розділили на дві
   картки, щоб факт про будівлі («скільки їх разом») не змішувався з
   фактом про землю (де вони стоять і для чого дозволена). */
.obj-buildings__total {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) minmax(0, 2fr);
  gap: var(--deck-s-4);
  margin-top: var(--deck-s-4);
}
.obj-buildings__totalcard {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--deck-s-3);
  padding: var(--deck-s-4) var(--deck-s-5);
  background: color-mix(in srgb, var(--deck-surface) 60%, transparent);
  border: 1px solid var(--deck-line);
  border-radius: var(--deck-r-md);
}
.obj-buildings__stat { display: flex; align-items: baseline; gap: 9px; margin: 0; }
.obj-buildings__stat dt {
  font-family: var(--deck-font-mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--deck-text-3);
  flex: none;
}
.obj-buildings__stat dd {
  margin: 0;
  font-size: 15px;
  color: var(--deck-text);
  font-variant-numeric: tabular-nums;
}
.obj-buildings__stat--main dd {
  font-family: var(--deck-font-mono);
  font-size: 24px;
  font-weight: 700;
  color: var(--deck-amber);
}
.obj-buildings__stat--wide { align-items: flex-start; }
.obj-buildings__stat--wide dd { color: var(--deck-text-2); font-size: 14px; line-height: 1.5; }
@media (max-width: 780px) {
  .obj-buildings__total { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .obj-buildings__stat { flex-direction: column; gap: 4px; }
}

/* --- Кому підходить: ряд тегів із чекмарком-бейджем. Заголовок і лід
   збираються через .section-head (kicker + h2 + p.lead) — той самий
   компонент, що вже підключає fonts.css h2/lead деінде на сайті.
   Трохи більше повітря саме тут (#pridatnist), не чіпаючи .section-head
   глобально — той самий ритм використовують інші секції на всьому сайті. */
#pridatnist .section-head { margin-bottom: var(--deck-s-7); }
#pridatnist .section-head .deck-kicker { margin-bottom: var(--deck-s-4); }
#pridatnist .section-head p.lead { margin-top: var(--deck-s-4); }
.obj-fit { list-style: none; margin: var(--deck-s-5) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--deck-s-4); }
.obj-fit li {
  display: inline-flex;
  align-items: center;
  /* grow: 1 — той самий приём, що в галереї: ряд доганяється до повної
     ширини, тому останній не лишається обрубком з дірою праворуч.
     Ширина за вмістом (basis: auto) вирішує, скільки пунктів стане в
     ряд, а розтягуються вони вже після переносу. Без цього список із
     чотирьох пунктів давав 3 + 1, і четвертий висів сам. */
  flex: 1 1 auto;
  justify-content: center;
  gap: var(--deck-s-3);
  padding: var(--deck-s-4) var(--deck-s-6);
  border: 1px solid var(--deck-line-strong);
  border-radius: var(--deck-r-sm);
  background: var(--deck-surface);
  font-family: var(--deck-font-mono);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--deck-text-2);
}
.obj-fit__check {
  flex: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--deck-amber-line);
  color: var(--deck-amber);
}
.obj-fit__check svg { width: 11px; height: 11px; }

/* --- Розташування: два стовпці (інфо | карта), лише коли карта є --- */
.obj-location__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--deck-s-8);
  align-items: start;
}
@media (max-width: 900px) {
  .obj-location__grid { grid-template-columns: 1fr; gap: var(--deck-s-6); }
  .obj-request__grid { gap: var(--deck-s-6); }
}

/* --- Карта розташування: справжній OSM-embed, перефарбований під холодну
   темну палітру системи (invert-хак — той самий прийом, що фото-фільтри
   .obj-shot/.catalog-card__photo вище: реальний контент приглушений під
   систему, а не показаний "як є"). Ключ Maps API не потрібен. --- */
.obj-map {
  border: 1px solid var(--deck-line);
  border-radius: var(--deck-r-lg);
  overflow: hidden;
  background: var(--deck-surface);
}
/* Жодного filter. Тут стояв invert(92%) hue-rotate(180deg) - він гасив
   растрову схему OSM під темну тему. Для супутникового знімка це негатив:
   зелень стає бузковою, дахи - блакитними. Карту Google не маскуємо під
   своє, а обрамлюємо як цитату з чужого джерела - той самий підхід, що
   в .cx-map на сторінці комплексу: рамка й підпис наші, вміст чужий,
   і межа між ними видима. */
.obj-map iframe {
  display: block;
  width: 100%;
  height: 340px;
  border: 0;
}
/* Підпис і вихід у велику карту - один ряд; на вузькому переносяться. */
.obj-map__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--deck-s-2) var(--deck-s-4);
  padding: var(--deck-s-3) var(--deck-s-4);
  border-top: 1px solid var(--deck-line);
}
.obj-map__caption {
  margin: 0;
  font-family: var(--deck-font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--deck-text-3);
}
.obj-map__out {
  flex: none;
  font-family: var(--deck-font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--deck-amber);
  text-decoration: none;
  white-space: nowrap;
}
.obj-map__out:hover { text-decoration: underline; }

/* --- Запит: ліворуч «як діяти далі», праворуч форма ---------------------
   auto-fit з мінімумом 480px замість фіксованого зламу на 900px, як у
   .obj-location__grid. Причина — всередині картки є власний ряд у два
   стовпці (Email | Телефон): у колонці вужчій за 480px він стискався до
   такої міри, що плейсхолдер e-mail обрізався. Тут поріг задає не ширина
   екрана, а ширина, за якої форма ще ціла: не влазить — колонка одна.
   align-items: start — інакше картка тягнулася б на висоту рейки кроків
   і всередині неї з'явилася б порожнеча. */
.obj-request__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(480px, 1fr));
  gap: var(--deck-s-8);
  align-items: start;
}
/* Стеля ширини картки. У двох стовпцях колонка і так вужча (близько
   596px на сітці 1240), тому правило працює лише там, де стовпець один:
   не дає формі розтягтись на всю смугу. */
.object-request { max-width: 640px; }
.object-request__note {
  margin: 12px 0 var(--deck-s-4);
  color: var(--deck-text-2);
  font-size: 15px;
}

@media (max-width: 900px) {
  .obj-hero--photo { min-height: 56vh; }
  .obj-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .obj-shot--lead { grid-column: span 2; grid-row: auto; }
  .obj-shot--lead img { min-height: 240px; }
}
@media (max-width: 620px) {
  .obj-figures > div { border-right: 0; border-bottom: 1px solid var(--deck-line); }
  .obj-figures > div:last-child { border-bottom: 0; }
  .obj-gallery { grid-template-columns: minmax(0, 1fr); }
  .obj-shot--lead { grid-column: auto; }
  .deck-rows > div { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}

/* ------------------------------------------------------------
   Заголовки-роз'яснення двох каталогів (щоб не плутались)
   ------------------------------------------------------------ */
.catalog-purpose {
  margin-top: var(--deck-s-3);
  max-width: 680px;
}