/* ============================================================
   CITY VILLA CLUB — редизайн: токени + база
   Етап 1 дизайн-системи. Світла тема, тільки Geometria.
   Еталон кольору — логотип (не старий style.css).
   Цей файл НЕ конфліктує зі style.css підрядника: всі класи
   з префіксом .rd- або всередині .rd-scope.
   ============================================================ */

/* ---------- Шрифти (локальні, ліцензія — на перевірці) ---------- */
@font-face {
  font-family: 'Geometria';
  src: url('../fonts/Geometria.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geometria';
  src: url('../fonts/Geometria-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geometria';
  src: url('../fonts/Geometria-HeavyItalic.woff2') format('woff2');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

/* ---------- Токени ---------- */
:root {
  /* Колір: еталон — логотип */
  --rd-navy:      #1d2e79;   /* «City» і «Club» у знаку */
  --rd-navy-deep: #16225c;   /* hover, глибокі секції */
  --rd-amber:     #f39400;   /* «Villa» у знаку — акцент, дозовано */
  --rd-red:       #e6350f;   /* крапка знака — тільки акція/помилка */
  --rd-ink:       #2c3140;   /* основний текст */
  --rd-muted:     #6a7080;   /* другорядний текст */
  --rd-paper:     #f6f5f1;   /* тло сторінки, off-white */
  --rd-white:     #ffffff;   /* картки, шапка після скролу */
  --rd-hairline:  #e4e2db;   /* лінії-розграфлення */
  --rd-free:      #84b55e;   /* статус «вільно» */
  --rd-sold:      #aab0bd;   /* статус «продано» */

  /* Прозорості поверх фото */
  --rd-scrim: linear-gradient(180deg, rgba(20, 27, 58, .54) 0%, rgba(20, 27, 58, .30) 22%, rgba(20, 27, 58, .46) 52%, rgba(20, 27, 58, .66) 100%);
  --rd-plate: rgba(23, 31, 66, .55);          /* синя плашка з блюром */

  /* Типографіка: одна родина, три голоси */
  --rd-font: 'Geometria', 'Trebuchet MS', sans-serif;
  --rd-fs-hero: clamp(2.35rem, 1.35rem + 4.4vw, 4.6rem);   /* H1 */
  --rd-fs-h2:   clamp(1.8rem, 1.35rem + 2vw, 2.9rem);
  --rd-fs-h3:   clamp(1.3rem, 1.16rem + .7vw, 1.7rem);
  --rd-fs-body: clamp(1rem, .96rem + .2vw, 1.09rem);
  --rd-fs-caps: .8rem;                                      /* eyebrow, підписи */
  --rd-fs-num:  clamp(2rem, 1.4rem + 2.6vw, 3.4rem);        /* великі цифри */

  /* Ритм */
  --rd-section: clamp(4.5rem, 3rem + 6vw, 9rem);
  --rd-gap:     clamp(1.25rem, 1rem + 1.2vw, 2rem);
  --rd-container: 1240px;
  --rd-pad: clamp(1.1rem, .75rem + 1.8vw, 2.5rem);

  /* Форма */
  --rd-statbar-overlap: 72px;   /* наїзд статбара на hero; hero вищий рівно на стільки ж */
  --rd-radius:      14px;    /* картки, поля (пом'якшений спадок 20px) */
  --rd-radius-s:    8px;
  --rd-shadow:      0 1px 2px rgba(29, 46, 121, .06), 0 14px 38px -14px rgba(29, 46, 121, .22);
  --rd-shadow-lift: 0 2px 4px rgba(29, 46, 121, .08), 0 22px 48px -16px rgba(29, 46, 121, .30);

  /* Рух */
  --rd-fast: 180ms;
  --rd-norm: 340ms;
  --rd-ease: cubic-bezier(.22, .8, .3, 1);
}

/* ---------- База (у межах .rd-scope) ---------- */
/* Дефолтний margin: 8px у body давав світлу рамку («бортер») навколо
   повноекранних секцій — hero, navy-блоків, футера. Скидаємо. */
html, body { margin: 0; padding: 0; }

.rd-scope {
  font-family: var(--rd-font);
  font-size: var(--rd-fs-body);
  font-weight: 400;
  line-height: 1.55;
  color: var(--rd-ink);
  background: var(--rd-paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.rd-scope *, .rd-scope *::before, .rd-scope *::after { box-sizing: border-box; }
.rd-scope img { max-width: 100%; height: auto; display: block; }
/* :where() = нульова специфічність, щоб класи компонентів завжди вигравали */
.rd-scope :where(a) { color: var(--rd-navy); text-decoration-color: color-mix(in srgb, var(--rd-navy) 35%, transparent); text-underline-offset: 3px; transition: color var(--rd-fast); }
.rd-scope :where(a:hover) { color: var(--rd-navy-deep); }

/* Заголовки: фірмовий жирний курсив 900.
   padding-right компенсує звисання курсиву, щоб не різало останню літеру. */
.rd-scope h1, .rd-scope h2, .rd-scope h3,
.rd-h1, .rd-h2, .rd-h3 {
  font-family: var(--rd-font);
  font-weight: 900;
  font-style: italic;
  color: var(--rd-navy);
  line-height: 1.08;
  letter-spacing: -.01em;
  margin: 0 0 .55em;
  padding-right: .09em;
  text-wrap: balance;
}
.rd-scope h1, .rd-h1 { font-size: var(--rd-fs-hero); }
.rd-scope h2, .rd-h2 { font-size: var(--rd-fs-h2); }
.rd-scope h3, .rd-h3 { font-size: var(--rd-fs-h3); line-height: 1.18; }
.rd-scope h4, .rd-h4 {
  font-size: var(--rd-fs-caps);
  font-weight: 500;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--rd-muted);
  margin: 0 0 .8em;
}
.rd-scope p { margin: 0 0 1em; }
.rd-lead { font-size: clamp(1.12rem, 1rem + .6vw, 1.35rem); line-height: 1.45; color: var(--rd-ink); }
.rd-muted { color: var(--rd-muted); }

/* Акцент усередині заголовка: амбер-підкреслення, як «10 хвилин» на лендінгу */
.rd-mark {
  background-image: linear-gradient(0deg, color-mix(in srgb, var(--rd-amber) 55%, transparent), color-mix(in srgb, var(--rd-amber) 55%, transparent));
  background-repeat: no-repeat;
  background-size: 100% .16em;
  background-position: 0 92%;
  padding-bottom: .04em;
}

/* ---------- Сигнатура: кутові дужки з логотипа ---------- */
/* Eyebrow секції: ‹ ПРО МІСТЕЧКО › */
.rd-eyebrow {
  display: inline-flex;
  align-items: baseline;
  gap: .6em;
  font-size: var(--rd-fs-caps);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--rd-navy);
  margin-bottom: 1.1rem;
}
/* Кутові дужки ‹ › читались як стрілки «гортайте далі» — замінили на коротку
   фірмову риску амбер+червоний (та сама пара, що в кнопках-«смужках»). */
.rd-eyebrow::before {
  content: '';
  align-self: center;
  width: 1.9em;
  height: 2px;
  flex: none;
  background: linear-gradient(90deg, var(--rd-amber) 0 62%, var(--rd-red) 62% 100%);
}
.rd-eyebrow--light { color: #fff; }

/* Спадкова пара смужок: амбер + червона (бойовий сайт, кнопка «Консультація») */
.rd-rules { position: relative; }
.rd-rules::before, .rd-rules::after {
  content: '';
  position: absolute;
  left: 0;
  height: 2px;
  width: 44px;
}
.rd-rules::before { top: 0;    background: var(--rd-amber); }
.rd-rules::after  { top: 5px;  background: var(--rd-red); width: 28px; }

/* ---------- Розкладка ---------- */
.rd-container { max-width: var(--rd-container); margin-inline: auto; padding-inline: var(--rd-pad); }
.rd-section { padding-block: var(--rd-section); }
.rd-section--tight { padding-block: calc(var(--rd-section) * .55); }
/* коли наступна секція має власний верхній відступ — свій нижній зайвий */
.rd-section--flush-b { padding-block-end: 0; }
.rd-section--navy { background: var(--rd-navy); color: #e8eaf4; }
.rd-section--navy h2, .rd-section--navy h3 { color: #fff; }
.rd-section--white { background: var(--rd-white); }
.rd-grid { display: grid; gap: var(--rd-gap); }
@media (min-width: 900px) {
  .rd-grid--2 { grid-template-columns: 1fr 1fr; }
  .rd-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .rd-grid--sidebar { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
}
.rd-hr { border: 0; height: 1px; background: var(--rd-hairline); margin-block: var(--rd-gap); }

/* ---------- Доступність і рух ---------- */
.rd-scope :focus-visible {
  outline: 2px solid var(--rd-amber);
  outline-offset: 2px;
  border-radius: 4px;
}
.rd-skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--rd-navy); color: #fff; padding: .6em 1em; z-index: 200;
}
.rd-skip:focus { left: 8px; top: 8px; }

/* Reveal при скролі (вмикається JS-класом .is-in) */
.rd-rv { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--rd-ease), transform .6s var(--rd-ease); }
.rd-rv.is-in { opacity: 1; transform: none; }
.rd-rv--d1 { transition-delay: 90ms; }
.rd-rv--d2 { transition-delay: 180ms; }

/* ============================================================
   РІШЕННЯ ВЛАСНИКА (2026-08-23): сайт НЕ глушить рух за системним
   «Зменшити рух» / prefers-reduced-motion. Анімації працюють на всіх
   пристроях, незалежно від налаштувань ОС.
   Раніше тут стояв блок @media (prefers-reduced-motion: reduce) — він
   робив сторінку повністю статичною. НЕ ПОВЕРТАТИ без вказівки власника.
   ============================================================ */