/**
 * css/styles.css — ПОВНА ПЕРЕРОБКА 2026-08-18.
 *
 * Попередня версія (картки з тінню, іконка в кожному рядку фактів, теракот
 * на кремовому фоні) відхилена власником: читалась як SaaS-дашборд і як
 * типовий генерований шаблон. Ця версія побудована за живими референсами
 * жанру «single property website» — Primland Residences, Ferrari Estates,
 * Manor at Keswick, 775 Benjamin Way.
 *
 * Три принципи, узяті з референсів:
 *   1. Фото несе довіру. Воно на всю ширину, без рамок і скруглень.
 *   2. Факти живуть прямо на сторінці. Ніяких карток, іконок і тіней —
 *      ієрархія робиться типографікою, а не UI-рамками.
 *   3. Стриманість читається як солідність. Один акцентний колір, багато
 *      повітря, жодних декоративних елементів «для краси».
 *
 * СИГНАТУРА — «шкала відстаней» (.measures). Усе цінне в цьому активі
 * вимірюється відстанню: 400 м до працюючого бізнесу, 4,1 км до міста,
 * 0 м до асфальту. Тому вимір і став структурним елементом сторінки,
 * а не декоративною нумерацією 01/02/03, яка нічого не означала б.
 */

/* ---------- 1. Скидання ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, p, ul, dl, dd, dt, figure { margin: 0; padding: 0; }
ul { list-style: none; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; text-align: inherit; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- 2. Гарнітура (self-host, DESIGN-BRIEF §6) ---------- */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../assets/fonts/golos-text-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../assets/fonts/golos-text-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

/* ---------- 3. Токени ---------- */
:root {
  /* Палітра. Один акцент — синій дорожнього знаку: колір узятий з предмета
     продажу (траса Н-17), а не з палітри «для лендінгів». Другого акцента
     свідомо немає: виміри виділяються розміром і насиченістю, не кольором. */
  --ink: #14181B;          /* майже-чорний, холодний */
  --ink-soft: #5A625E;     /* приглушений текст, 6.2:1 на папері */
  --paper: #F6F5F1;        /* фон сторінки */
  --paper-deep: #ECEAE3;   /* друга поверхня, зебра */
  --rule: #D4D2C9;         /* волосяні лінії */
  --road: #1D4E89;         /* дія: кнопки, посилання */
  --road-dark: #163C6B;
  --road-darker: #102C4F;
  --on-road: #FFFFFF;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-8: 48px;
  --space-10: 64px;
  --space-12: 96px;
  --space-16: 128px;

  --wrap: 1120px;
  --wrap-narrow: 720px;

  --font: 'Golos Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Шкала — навмисно різкий контраст між дрібним підписом і великим числом.
     Це і є типографічна ідея сторінки: підпис шепоче, вимір кричить. */
  --t-micro: 0.6875rem;  /* 11px — трековані підписи великими літерами */
  --t-small: 0.875rem;   /* 14px */
  --t-body: 1.0625rem;   /* 17px */
  --t-lead: 1.25rem;     /* 20px — вступні абзаци */
  --t-h2: clamp(1.75rem, 4vw, 2.5rem);
  --t-h1: clamp(1.75rem, 5.4vw, 3.25rem);
  /* Ціна навмисно більша за h1: див. коментар біля .price-plate */
  --t-price: clamp(2.75rem, 12vw, 4.5rem);
  --t-measure: clamp(3.25rem, 11vw, 6rem);
  --t-market: clamp(2.5rem, 8vw, 4rem);

  --focus: 0 0 0 2px var(--paper), 0 0 0 5px var(--road);
}

/* ---------- 4. База ---------- */
html { font-size: 100%; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* ОБОВ'ЯЗКОВО, не косметика. js/tracking.js ставить маркер scroll_75 як
     position:absolute; top:75%. Без позиціонованого body ці 75% рахуються від
     initial containing block, тобто від висоти ЕКРАНА, а не сторінки — маркер
     опинявся на 633 px замість 5451 і подія стріляла одразу при завантаженні.
     Знайдено локальною перевіркою подій 2026-08-19; без цього рядка метрика
     «дочитав до 75%» показувала б 100% на кожній сесії. */
  position: relative;
}

a:focus-visible,
button:focus-visible {
  outline: none;
  box-shadow: var(--focus);
  border-radius: 2px;
}

/* ---------- 5. Контейнери ---------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--space-5);
}
/* Вузька колонка звужує ТЕКСТ, а не контейнер: лівий край лишається спільним
   для всіх секцій сторінки. Центрований вузький блок посеред лівоорієнтованих
   давав два різні лівих краї — читалось як помилка верстки, не як задум. */
.wrap--narrow > * { max-width: var(--wrap-narrow); }

/* Вертикальний ритм стиснуто 2026-08-19: було 64 px на мобільному і 96 px на
   десктопі, тобто до 192 px порожнечі між сусідніми секціями — власник назвав
   відстані космічними, і за вимірюванням він має рацію. */
.section { padding-block: var(--space-8); }
.section--flush { padding-bottom: 0; }

@media (min-width: 900px) {
  .section { padding-block: 60px; }
}

.section__title {
  font-size: var(--t-h2);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin-bottom: var(--space-5);
}
.section__lead {
  font-size: var(--t-lead);
  line-height: 1.5;
  max-width: 46ch;
  color: var(--ink);
  margin-bottom: var(--space-6);
}
.section__foot {
  margin-top: var(--space-6);
  color: var(--ink-soft);
  font-size: var(--t-small);
  max-width: 60ch;
}
.prose p { max-width: 58ch; }
.prose p + p { margin-top: var(--space-4); }

/* ---------- 6. Перший екран ----------
   ПЕРЕРОБЛЕНО 2026-08-19. Раніше фото було підкладкою під текстом, з важким
   градієнтом. На нашому кадрі світле небо і світлий асфальт: літери поверх
   або тонули, або вимагали затемнення такої сили, що вбивало єдину цінність
   знімка — видно, що дорога справжня, з розміткою і знаками.
   Тепер фото йде цілим у своєму кадрі, текст — на суцільній темній плашці
   під ним. Контраст перестав залежати від того, що саме на фото. */
.hero {
  background: var(--ink);
  color: #fff;
}
.hero__frame {
  width: 100%;
  aspect-ratio: 4 / 3;
  max-height: 54svh;
  overflow: hidden;
  background: var(--ink);
}
.hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}
.hero__panel {
  background: var(--ink);
}
.hero__inner {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding: var(--space-6) var(--space-5) var(--space-8);
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

@media (min-width: 900px) and (max-width: 1023px) {
  .hero__frame { max-height: 42svh; aspect-ratio: 21 / 9; }
  .hero__inner { padding-block: var(--space-6) var(--space-8); }
}

/* Десктоп: фото і текст поруч, не одне під одним.
   Причина — вимірювання: у вертикальній компоновці на 1280×900 ціна йшла
   за згин, а вона має бути видима раніше за все інше. */
@media (min-width: 1024px) {
  .hero {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: stretch;
    min-height: 86svh;
  }
  .hero__frame { max-height: none; height: 100%; aspect-ratio: auto; }
  .hero__panel { display: flex; align-items: center; }
  .hero__inner {
    max-width: 600px;
    margin-inline: 0;
    padding: var(--space-10) var(--space-8);
    gap: var(--space-5);
  }
  .hero__title { max-width: 16ch; }
}
.hero__eyebrow {
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}
.hero__title {
  font-size: var(--t-h1);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.025em;
  text-wrap: balance;
  max-width: 20ch;
}
.hero__lead {
  font-size: var(--t-lead);
  color: rgba(255, 255, 255, 0.85);
  max-width: 42ch;
}

/* Ціна — найбільший елемент першого екрана.
   Була 2–2.75rem тим самим кеглем, що й заголовок, і губилась. Покупець
   порівнює 5–10 оголошень за ціною за сотку: він має зрозуміти «я в ринку
   чи ні» раніше, ніж прочитає бодай слово. */
.price-plate {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.price-plate__sum {
  font-size: var(--t-price);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.92;
  font-variant-numeric: tabular-nums;
}
.price-plate__meta {
  font-size: var(--t-small);
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.66);
}

/* Рядок характеристик — розділювачі крапкою, без «пігулок» */
.hero__spec {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: var(--t-small);
  color: rgba(255, 255, 255, 0.8);
}
.hero__spec li + li::before {
  content: '·';
  margin-right: var(--space-4);
  color: rgba(255, 255, 255, 0.4);
}
.hero .actions { margin-top: var(--space-2); }

/* ---------- 7. Кнопки ---------- */
.actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.actions--lg { margin-top: var(--space-6); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 var(--space-6);
  font-size: var(--t-body);
  font-weight: 700;
  letter-spacing: -0.01em;
  border-radius: 2px;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}
.btn--primary { background: var(--road); color: var(--on-road); }
.btn--primary:hover { background: var(--road-dark); }
.btn--primary:active { background: var(--road-darker); }

.btn--ghost {
  color: var(--ink);
  border: 1px solid var(--rule);
  background: transparent;
}
.btn--ghost:hover { border-color: var(--ink); }

.btn--ghost-light {
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.42);
}
.btn--ghost-light:hover { border-color: #fff; background: rgba(255, 255, 255, 0.08); }

/* Кнопка-привид усередині темного hero */
.hero .btn--ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.42);
}
.hero .btn--ghost:hover { border-color: #fff; background: rgba(255, 255, 255, 0.08); }

/* ---------- 8. Шкала відстаней — сигнатура ---------- */
.measures {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  padding-block: var(--space-6);
}
@media (min-width: 900px) { .measures { padding-block: 52px; } }
.measures__list {
  display: grid;
  gap: var(--space-6);
}
@media (min-width: 860px) {
  .measures__list { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
  .measure + .measure { padding-left: var(--space-6); border-left: 1px solid var(--rule); }
}
.measure { display: flex; flex-direction: column; gap: var(--space-2); }
.measure__value {
  font-size: var(--t-measure);
  font-weight: 700;
  line-height: 0.86;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.measure__unit {
  font-size: 0.32em;
  font-weight: 600;
  letter-spacing: 0;
  margin-left: 0.14em;
  color: var(--ink-soft);
  vertical-align: baseline;
}
.measure__label {
  font-size: var(--t-small);
  line-height: 1.45;
  color: var(--ink-soft);
  max-width: 26ch;
}

/* ---------- 9. Темна смуга ---------- */
.band {
  background: var(--ink);
  color: #fff;
  padding-block: var(--space-8);
}
@media (min-width: 900px) { .band { padding-block: 60px; } }
.band__title {
  font-size: var(--t-h2);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
  text-wrap: balance;
  margin-bottom: var(--space-5);
}
.band__lead {
  font-size: var(--t-lead);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.9);
  max-width: 52ch;
}
.band__note {
  margin-top: var(--space-5);
  font-size: var(--t-small);
  color: rgba(255, 255, 255, 0.6);
}
.band--cta { text-align: left; }

/* ---------- 10. Спеки — без картки, лише волосяні лінії ---------- */
.specs { border-top: 1px solid var(--rule); }
.specs__row {
  display: grid;
  gap: var(--space-1);
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--rule);
}
.specs__row dt {
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.specs__row dd {
  font-size: var(--t-lead);
  font-weight: 700;
  letter-spacing: -0.015em;
}
.specs__price { color: var(--road); }

@media (min-width: 720px) {
  .specs__row {
    grid-template-columns: 240px 1fr;
    align-items: baseline;
    gap: var(--space-6);
  }
}

/* ---------- 11. Фото ----------
   Стилі сітки-плиток (.shots) прибрані 2026-08-19: галерею замінено на
   різнорозмірну сітку, розділ 18. Тут лишається тільки те, що не залежить
   від розкладки, — обрізання карт. Правила про aspect-ratio на самому img
   були прибрані навмисно: вони конфліктували з висотою плитки, заданою
   гріднею, і зображення переставали заповнювати комірку. */

/* Карти — не обрізати межі, заради яких кадр і потрібен */
.gallery__item[data-gallery-index='7'] img,
.gallery__item[data-gallery-index='8'] img {
  object-fit: contain;
  background: var(--paper-deep);
}

/* ---------- 12. Два ринки ---------- */
.markets { display: grid; gap: var(--space-6); }
@media (min-width: 780px) {
  .markets { grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: start; }
}
.market {
  padding-top: var(--space-5);
  border-top: 3px solid var(--rule);
}
.market--ours { border-top-color: var(--road); }
.market__label {
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  min-height: 2.6em;
}
.market__value {
  font-size: var(--t-market);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  margin-top: var(--space-2);
}
.market--ours .market__value { color: var(--road); }
.market__unit {
  margin-top: var(--space-2);
  font-size: var(--t-small);
  color: var(--ink-soft);
}
.market__ours {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--rule);
  font-weight: 700;
  max-width: 34ch;
}

/* ---------- 13. Карта ---------- */
.map {
  margin-bottom: var(--space-5);
  background: var(--paper-deep);
  border: 1px solid var(--rule);
}
.map iframe {
  display: block;
  width: 100%;
  height: 380px;
  border: 0;
}

/* ---------- 14. Підвал ---------- */
.footer {
  padding-block: var(--space-8);
  border-top: 1px solid var(--rule);
  font-size: var(--t-small);
}
.footer__contacts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  font-weight: 700;
}
.footer__contacts a:hover { color: var(--road); }
.footer__legal {
  margin-top: var(--space-4);
  color: var(--ink-soft);
}
.footer__legal a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 15. Липкий CTA (мобільний) ---------- */
.sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  background: rgba(20, 24, 27, 0.96);
  backdrop-filter: blur(8px);
  animation: sticky-in 220ms ease-out;
}
.sticky-cta[hidden] { display: none; }
.sticky-cta__price {
  color: #fff;
  font-weight: 700;
  font-size: var(--t-lead);
  font-variant-numeric: tabular-nums;
}
.sticky-cta .btn { min-height: 46px; padding-inline: var(--space-5); }

/* ---------- 15b. Кругла кнопка звʼязку і меню дій ----------
   Додано 2026-08-19. Раніше в липкій смузі була одна кнопка «Подзвонити»,
   а месенджер і маршрут лишались лише в тексті сторінки — два з трьох
   каналів були на відстані прокрутки. Тепер усі чотири дії за один дотик. */
.cta-fab {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--road);
  color: var(--on-road);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  transition: background-color 160ms ease, transform 160ms ease;
}
.cta-fab:hover { background: var(--road-dark); }
.cta-fab:active { transform: scale(0.95); }

.cta-fab__ico {
  position: absolute;
  width: 24px;
  height: 24px;
  transition: opacity 160ms ease, transform 160ms ease;
}
.cta-fab__ico--close { opacity: 0; transform: rotate(-45deg); }
.cta-fab[aria-expanded='true'] .cta-fab__ico--phone { opacity: 0; transform: rotate(45deg); }
.cta-fab[aria-expanded='true'] .cta-fab__ico--close { opacity: 1; transform: rotate(0); }

/* Меню розкривається вгору від смуги */
.cta-menu {
  position: absolute;
  right: var(--space-4);
  bottom: calc(100% + var(--space-3));
  width: min(320px, calc(100vw - var(--space-8)));
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--rule);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4);
  animation: cta-menu-in 160ms cubic-bezier(0.2, 0, 0.2, 1);
}
.cta-menu[hidden] { display: none; }

@keyframes cta-menu-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.cta-menu__item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 60px;
  padding: var(--space-3) var(--space-4);
  background: var(--paper);
  color: var(--ink);
}
.cta-menu__item:hover { background: var(--paper-deep); }
.cta-menu__item--call { background: var(--road); color: var(--on-road); }
.cta-menu__item--call:hover { background: var(--road-dark); }

.cta-menu__ico { flex: 0 0 auto; width: 22px; height: 22px; }
/* Логотипи месенджерів — у власних кольорах: у цих знаків колір і є половиною
   впізнаваності, монохромний Viber читається як абстрактна фігура.
   Обидва мають контраст >4.5:1 на --paper, перевірено. */
.cta-menu__ico--viber { color: #7360F2; }
.cta-menu__ico--telegram { color: #26A5E4; }
.cta-menu__item span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cta-menu__item b { font-size: var(--t-body); font-weight: 700; letter-spacing: -0.01em; }
.cta-menu__item small { font-size: var(--t-small); opacity: 0.7; }

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

@keyframes sticky-in {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
@media (min-width: 900px) {
  .sticky-cta { display: none !important; }
}

/* ---------- 16. Лайтбокс ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  background: rgba(20, 24, 27, 0.96);
}
.lightbox[hidden] { display: none; }
.lightbox__image { max-width: 100%; max-height: 88vh; object-fit: contain; }
.lightbox__btn {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  font-size: 1.75rem;
  line-height: 1;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
}
.lightbox__btn:hover { background: rgba(255, 255, 255, 0.12); }
.lightbox__close { top: var(--space-5); right: var(--space-5); font-size: 1.25rem; }
.lightbox__prev { left: var(--space-4); }
.lightbox__next { right: var(--space-4); }

/* ---------- 18. Галерея: різнорозмірна сітка ----------
   ПЕРЕРОБЛЕНО 2026-08-19 (друге). Фотоісторія — кожне фото на всю ширину,
   одне під одним — відхилена власником: сторінка виросла до 8 700 px і
   читалась як «фото на всю сторінку».
   Тут уся галерея живе в один-півтора екрана. Розміри плиток різні не для
   краси: великий кадр несе головний аргумент (фронт на трасу), карта
   отримує ширину, бо на маленькій плитці межі не читаються. */
.gallery__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}
.gallery__head .section__title { margin-bottom: 0; }
.gallery__count {
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* Розкладка знята з живого прикладу — сторінка помешкання Airbnb
   (перевірено 2026-08-19): одне велике фото ліворуч, чотири менші сіткою
   праворуч, кнопка «показати всі» в правому нижньому куті. Це найвпізнаваніший
   патерн галереї нерухомості, і він компактний — уся галерея в один екран. */
.bento {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
}

.tile {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--paper-deep);
}
/* Плитки поза сіткою: у DOM лишаються заради лайтбокса, у розкладці — ні.
   Правило стоїть ПІСЛЯ .tile навмисно: інакше display:block його перебиває. */
.tile--off { display: none; }
.tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 420ms cubic-bezier(0.2, 0, 0.2, 1);
}
.tile:hover img { transform: scale(1.03); }

.tile__cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--space-8) var(--space-4) var(--space-3);
  font-size: var(--t-small);
  font-weight: 600;
  line-height: 1.35;
  color: #fff;
  text-align: left;
  background: linear-gradient(to top, rgba(20, 24, 27, 0.88), rgba(20, 24, 27, 0));
}

/* «Усі фото» — біла пігулка в куті останньої плитки, як у прикладі.
   Не окрема кнопка: окрема ламає послідовність лайтбокса, а накладка
   лишає плитку живим фото і відкриває той самий перегляд. */
.tile__all {
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-3);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-size: var(--t-small);
  font-weight: 700;
  color: var(--ink);
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(20, 24, 27, 0.28);
  transition: background-color 180ms ease;
}
.tile:hover .tile__all { background: var(--paper); }

/* Мобільний: головний кадр на всю ширину, під ним сітка 2×2 */
.tile--a { grid-column: span 2; aspect-ratio: 4 / 3; }
.tile--b, .tile--c, .tile--d, .tile--e { aspect-ratio: 1 / 1; }

@media (min-width: 760px) {
  /* Пропорції з прикладу: велике фото — рівно половина ширини й уся висота,
     чотири менші — сітка 2×2 у другій половині. */
  .bento {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    height: clamp(340px, 40vw, 460px);
    gap: 8px;
  }
  .tile { aspect-ratio: auto; }
  .tile--a { grid-column: 1 / 3; grid-row: 1 / 3; }
  .tile--b { grid-column: 3; grid-row: 1; }
  .tile--c { grid-column: 4; grid-row: 1; }
  .tile--d { grid-column: 3; grid-row: 2; }
  .tile--e { grid-column: 4; grid-row: 2; }

  .tile__cap { font-size: var(--t-body); padding: var(--space-10) var(--space-5) var(--space-4); }
}

/* ---------- 19. План у масштабі ----------
   Не фото і не домальовка: перспективний габарит на знімку побудувати
   чесно неможливо — меж ділянки на кадрі не видно. Тому окрема схема,
   підписана як схема. Рішення 2026-08-19, DECISION-LOG. */
.plan {
  margin-top: var(--space-8);
  padding: var(--space-6);
  background: var(--ink);
  color: #fff;
}
.plan__svg { width: 100%; max-width: 460px; height: auto; display: block; }
.plan__cap {
  margin-top: var(--space-5);
  font-size: var(--t-small);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.66);
  max-width: 54ch;
}

.plan__plot { fill: #22282C; stroke: #E8E6DE; stroke-width: 1.2; }
.plan__build { fill: rgba(29, 78, 137, 0.85); stroke: #7EA8DA; stroke-width: 1.2; }
.plan__yard  { fill: rgba(255, 255, 255, 0.08); stroke: rgba(255, 255, 255, 0.5);
               stroke-width: 1.2; stroke-dasharray: 5 3; }
.plan__road  { fill: #3E4348; }
.plan__lane  { stroke: #E8E6DE; stroke-width: 1.2; stroke-dasharray: 9 7; }
.plan__dim   { stroke: rgba(255, 255, 255, 0.55); stroke-width: 1.2; }
.plan__dim--dash { stroke-dasharray: 4 3; }
.plan__scale { stroke: #fff; stroke-width: 1.6; }

.plan__t { font-family: var(--font); font-size: 9px; fill: #fff; }
.plan__t--key   { font-size: 8px; font-weight: 700; letter-spacing: 0.1em; fill: #9FB8D6; }
.plan__t--dim   { font-size: 9px; font-weight: 700; fill: rgba(255, 255, 255, 0.8); }
.plan__t--soft  { font-size: 10px; font-weight: 700; fill: rgba(255, 255, 255, 0.85); }
.plan__t--micro { font-size: 8px; fill: rgba(255, 255, 255, 0.55); }
.plan__t--build { font-size: 8px; font-weight: 700; fill: #fff; }
.plan__t--yard  { font-size: 8px; font-weight: 700; fill: rgba(255, 255, 255, 0.8); }
.plan__t--road  { font-size: 9px; font-weight: 700; fill: rgba(255, 255, 255, 0.7); }

/* ---------- 19b. Опис місця ----------
   Додано 2026-08-19. Тон звірено з живими оголошеннями ринку (OLX, rieltor.ua,
   dom.ria): там стала лексика — «рівна, правильної форми», «фасад виходить на
   дорогу», «обжита вулиця», «зручний доїзд», а комерційні ділянки продають
   через видимість і потік. Ці маркери вплетені в текст, але тон лишається
   власним: жодне з 74 конкурентних оголошень не має живого опису місця,
   тільки перелік характеристик. */
.place { background: var(--paper-deep); }
.place__text p {
  font-size: var(--t-lead);
  line-height: 1.6;
  max-width: 54ch;
}
.place__text p + p { margin-top: var(--space-5); }
.place__last {
  margin-top: var(--space-6) !important;
  padding-top: var(--space-5);
  border-top: 1px solid var(--rule);
  font-weight: 600;
  color: var(--ink);
}

/* ---------- 20. Чесний блок ----------
   Секції не існувало до 2026-08-19. За PRD §6.4 статус землі — найсильніше
   заперечення сегмента, підтверджене живими цитатами (RESEARCH.md §7).
   Питання все одно прозвучить на дзвінку; різниця в тому, хто сказав перший. */
.honest { background: var(--paper-deep); }
.honest__list {
  border-top: 1px solid var(--rule);
}
.honest__list li {
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--rule);
  font-size: var(--t-lead);
  line-height: 1.5;
  max-width: 52ch;
}

/* ---------- 21. Мітка продавця ---------- */
.seller__badge {
  display: inline-block;
  margin-bottom: var(--space-4);
  padding: var(--space-2) var(--space-3);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--road);
  border: 1px solid var(--road);
  border-radius: 2px;
}

/* ---------- 17. Рух ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}