/* ═══════════════════════════════════════════════════════════════════════════
   GOODWOODHOME — БАЗОВІ КОМПОНЕНТИ БРЕНДУ
   Мінімальний набір правил поверх design-tokens.css.

   ЩО ЦЕ І ЧОГО ТУТ НЕМАЄ
   ======================
   Це НЕ заміна site.css і не редизайн. Це словник, яким писатиметься редизайн:
   кнопка, посилання, картка, поле, чип, іконка, логотип, сітка секції. Усе інше
   (герой, меню, калькулятор, галереї) лишається де було й працює як раніше.

   БЕЗПЕКА ПІДКЛЮЧЕННЯ
   ===================
   Кожен клас має префікс .gwh-. У site.css і landing-base.css класів із таким
   префіксом немає, тому підключення цього файла не може нічого зачепити:
   поки в розмітці не з'явиться .gwh-*, сторінка виглядає точно так само.
   Це дозволяє переносити сайт на систему по одній секції за раз.

   ЖОДЕН КОМПОНЕНТ НИЖЧЕ НЕ ЗНАЄ ПРО КОЛІР
   =======================================
   Усі вони читають лише семантику (--gwh-text, --gwh-accent, --gwh-border …),
   яку задає поверхня-контейнер. Тому та сама .gwh-btn правильна і на темній
   лісовій секції, і на світлій паперовій — без модифікаторів і без дублювання.

   Живий довідник: /brand/
   ═══════════════════════════════════════════════════════════════════════════ */


/* ───────────────────────────────────────────────────────────────────────────
   РОЗКЛАДКА СЕКЦІЇ
   ─────────────────────────────────────────────────────────────────────────── */

/* Вертикальний ритм + бічні поля одним класом. Обидва плинні, тому окремі
   медіа-запити на відступи секцій більше не потрібні. */
.gwh-section{
  padding-block:var(--gwh-section-y);
  padding-inline:var(--gwh-gutter);
}
.gwh-section--tight{padding-block:var(--gwh-section-y-sm);}

.gwh-container{
  max-width:var(--gwh-container);
  margin-inline:auto;
}
/* Для довгого тексту: вужча колонка тримає рядок у межах ~75 знаків.
   Без цього абзац на 27" розтягується на всю ширину й перестає читатись. */
.gwh-container--narrow{max-width:var(--gwh-container-narrow);}


/* ───────────────────────────────────────────────────────────────────────────
   ТИПОГРАФІКА
   Шість ролей. Якщо для тексту не знаходиться роль — це привід перевірити
   ієрархію сторінки, а не додавати сьомий розмір.
   ─────────────────────────────────────────────────────────────────────────── */

/* ГЕРОЙ — один на сторінку. Серіф у великому кеглі й є носієм «преміальності»:
   у ньому видно рисунок літери, чого гротеск на такому розмірі не дає. */
.gwh-hero-title{
  font-family:var(--gwh-font-display);
  font-size:var(--gwh-text-hero);
  font-weight:var(--gwh-weight-regular);
  line-height:var(--gwh-leading-tight);
  letter-spacing:var(--gwh-tracking-tighter);
  color:var(--gwh-text);
}
/* Курсивом виділяємо ОДНЕ слово в заголовку — і воно ж бере золото.
   Два акценти в одному рядку вбивають ефект, тому правило саме таке. */
.gwh-hero-title em{font-style:italic;color:var(--gwh-accent);}

.gwh-display{
  font-family:var(--gwh-font-display);
  font-size:var(--gwh-text-display);
  font-weight:var(--gwh-weight-regular);
  line-height:var(--gwh-leading-tight);
  letter-spacing:var(--gwh-tracking-tight);
  color:var(--gwh-text);
}

/* ЗАГОЛОВОК СЕКЦІЇ */
.gwh-h2{
  font-family:var(--gwh-font-display);
  font-size:var(--gwh-text-h2);
  font-weight:var(--gwh-weight-regular);
  line-height:var(--gwh-leading-snug);
  letter-spacing:var(--gwh-tracking-tight);
  color:var(--gwh-text);
}
/* Заголовок картки й підрозділу — уже гротеск: на цьому кеглі серіф починає
   конкурувати із заголовком секції замість того, щоб йому підпорядковуватись. */
.gwh-h3{
  font-family:var(--gwh-font-body);
  font-size:var(--gwh-text-h3);
  font-weight:var(--gwh-weight-medium);
  line-height:var(--gwh-leading-snug);
  color:var(--gwh-text);
}
.gwh-h4{
  font-family:var(--gwh-font-body);
  font-size:var(--gwh-text-h4);
  font-weight:var(--gwh-weight-medium);
  line-height:var(--gwh-leading-normal);
  color:var(--gwh-text);
}

/* НАДЗАГОЛОВОК — прямий цитат із логотипа: великі літери, широкий трекінг,
   золото, коротка риска зліва. Це найупізнаваніший елемент системи, тому він
   ставиться над заголовком секції й ніде більше. */
.gwh-eyebrow{
  display:flex;align-items:center;gap:var(--gwh-space-3);
  font-family:var(--gwh-font-brand);
  font-size:var(--gwh-text-2xs);
  font-weight:var(--gwh-weight-semibold);
  letter-spacing:var(--gwh-tracking-brand);
  text-transform:uppercase;
  color:var(--gwh-accent);
  margin-bottom:var(--gwh-space-4);
}
.gwh-eyebrow::before{
  content:'';
  width:28px;height:var(--gwh-rule-accent);
  background:currentColor;
  flex-shrink:0;
}

/* ВСТУПНИЙ АБЗАЦ — світліша насиченість і збільшений інтерліньяж роблять
   його «повітряним» відносно основного тексту, без збільшення кегля. */
.gwh-lead{
  font-size:var(--gwh-text-lead);
  font-weight:var(--gwh-weight-light);
  line-height:var(--gwh-leading-relaxed);
  color:var(--gwh-text-secondary);
  max-width:60ch;
}
.gwh-body{
  font-size:var(--gwh-text-body);
  line-height:var(--gwh-leading-relaxed);
  color:var(--gwh-text-secondary);
  max-width:70ch;
}
/* ПІДПИС / МЕТАДАНІ — площі, терміни, «12 м²», підписи під фото. */
.gwh-caption{
  font-family:var(--gwh-font-brand);
  font-size:var(--gwh-text-xs);
  letter-spacing:var(--gwh-tracking-wider);
  text-transform:uppercase;
  color:var(--gwh-text-muted);
}


/* ───────────────────────────────────────────────────────────────────────────
   КНОПКИ
   Три рівні, і в кожної секції має бути рівно ОДНА первинна. Коли первинних
   дві, користувач не обирає — він зупиняється.
   ─────────────────────────────────────────────────────────────────────────── */

.gwh-btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:var(--gwh-space-2);
  padding:15px var(--gwh-space-6);
  border:var(--gwh-border-hairline) solid transparent;
  border-radius:var(--gwh-radius-sm);
  font-family:var(--gwh-font-brand);
  font-size:var(--gwh-text-sm);
  font-weight:var(--gwh-weight-semibold);
  letter-spacing:var(--gwh-tracking-wide);
  text-decoration:none;
  cursor:pointer;
  transition:background var(--gwh-duration-base) var(--gwh-ease),
             border-color var(--gwh-duration-base) var(--gwh-ease),
             color var(--gwh-duration-base) var(--gwh-ease);
}
/* Кільце фокуса — окремо від hover і завжди видиме: це єдиний орієнтир
   для клавіатури. offset потрібен, щоб кільце не зливалося з межею кнопки. */
.gwh-btn:focus-visible,
.gwh-link:focus-visible,
.gwh-input:focus-visible,
.gwh-chip:focus-visible{
  outline:2px solid var(--gwh-focus-ring);
  outline-offset:2px;
}

/* ПЕРВИННА. Заливка приходить від поверхні: на темній секції вона золота,
   на світлій — зелена. Одна й та сама кнопка, і на обох фонах вона однаково
   помітна. Саме заради цього семантика й прив'язана до поверхні. */
.gwh-btn--primary{
  background:var(--gwh-accent-fill);
  color:var(--gwh-on-accent);
}
.gwh-btn--primary:hover{background:var(--gwh-accent-fill-hover);}

/* ВТОРИННА — лише контур. Тримає ту саму вагу в макеті, але не бореться
   за увагу з первинною. */
.gwh-btn--secondary{
  background:transparent;
  color:var(--gwh-text);
  border-color:var(--gwh-border-strong);
}
.gwh-btn--secondary:hover{
  border-color:var(--gwh-text);
  background:var(--gwh-alpha-ink-04);
}

/* ТРЕТИННА — текст зі стрілкою. Для «дізнатись більше» всередині карток. */
.gwh-btn--ghost{
  background:transparent;
  color:var(--gwh-accent);
  padding-inline:0;
}
.gwh-btn--ghost:hover{color:var(--gwh-accent-strong);}

.gwh-btn--sm{padding:10px var(--gwh-space-4);font-size:var(--gwh-text-xs);}
.gwh-btn--lg{padding:18px var(--gwh-space-7);}
.gwh-btn--block{display:flex;width:100%;}

.gwh-btn[disabled],.gwh-btn[aria-disabled='true']{
  opacity:0.45;cursor:not-allowed;pointer-events:none;
}


/* ───────────────────────────────────────────────────────────────────────────
   ПОСИЛАННЯ
   ─────────────────────────────────────────────────────────────────────────── */

/* Підкреслення росте з нуля при наведенні. Це дешевий, але точний жест:
   він читається як «лінія проводиться зараз», а не як мигання кольору. */
.gwh-link{
  color:var(--gwh-accent);
  text-decoration:none;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% var(--gwh-border-hairline);
  background-position:0 100%;
  background-repeat:no-repeat;
  transition:background-size var(--gwh-duration-base) var(--gwh-ease),
             color var(--gwh-duration-fast) var(--gwh-ease);
}
.gwh-link:hover{background-size:100% var(--gwh-border-hairline);}

/* Посилання ВСЕРЕДИНІ абзацу — інша задача: його треба бачити одразу, не
   наводячи. Тому підкреслення постійне, а зникає воно навпаки, при наведенні. */
.gwh-link--inline{
  color:var(--gwh-text);
  background-size:100% var(--gwh-border-hairline);
  text-underline-offset:0.2em;
}
.gwh-link--inline:hover{color:var(--gwh-accent);background-size:0% var(--gwh-border-hairline);}

/* Посилання-стрілка. Стрілка зсувається на 4px — рівно стільки, щоб рух
   помітили, і замало, щоб він відволікав. */
.gwh-link--arrow{display:inline-flex;align-items:center;gap:var(--gwh-space-2);}
.gwh-link--arrow .gwh-icon{transition:transform var(--gwh-duration-base) var(--gwh-ease);}
.gwh-link--arrow:hover .gwh-icon{transform:translateX(4px);}


/* ───────────────────────────────────────────────────────────────────────────
   КАРТКИ
   ─────────────────────────────────────────────────────────────────────────── */

/* Картка тримається на МЕЖІ, а не на тіні. Тінь на теплому паперовому фоні
   завжди трохи брудна; тонка лінія лишає секцію плоскою й спокійною —
   саме тим «архітектурним кресленням», з якого росте знак. */
.gwh-card{
  display:flex;flex-direction:column;
  background:var(--gwh-surface-raised);
  border:var(--gwh-border-hairline) solid var(--gwh-border);
  border-radius:var(--gwh-radius-md);
  overflow:hidden;
  transition:border-color var(--gwh-duration-base) var(--gwh-ease),
             transform var(--gwh-duration-base) var(--gwh-ease);
}
.gwh-card__media{
  aspect-ratio:4/3;
  overflow:hidden;
  background:var(--gwh-surface-sunken);
}
.gwh-card__media img{width:100%;height:100%;object-fit:cover;
  transition:transform var(--gwh-duration-slow) var(--gwh-ease);}
.gwh-card__body{
  display:flex;flex-direction:column;gap:var(--gwh-space-3);
  padding:var(--gwh-space-5);
}
/* Ціна/площа притискаються до низу картки, щоб у ряді карток вони стояли на
   одній лінії навіть при заголовках різної довжини. */
.gwh-card__footer{
  margin-top:auto;
  padding-top:var(--gwh-space-4);
  border-top:var(--gwh-border-hairline) solid var(--gwh-border);
}

/* Клікабельна картка. Підйом рівно на 2px: більший зсув на великій картці
   з фото читається як стрибок. */
.gwh-card--link:hover{
  border-color:var(--gwh-border-accent);
  transform:translateY(-2px);
}
.gwh-card--link:hover .gwh-card__media img{transform:scale(1.03);}

/* Виділена картка (обраний тариф, рекомендована модель) — золота межа
   замість заливки: вона позначає вибір, не змінюючи ритму ряду. */
.gwh-card--featured{
  border-color:var(--gwh-accent);
  border-width:var(--gwh-border-thick);
}


/* ───────────────────────────────────────────────────────────────────────────
   ПОЛЯ ВВОДУ
   ─────────────────────────────────────────────────────────────────────────── */

.gwh-field{display:flex;flex-direction:column;gap:var(--gwh-space-2);}
.gwh-label{
  font-family:var(--gwh-font-brand);
  font-size:var(--gwh-text-xs);
  font-weight:var(--gwh-weight-medium);
  letter-spacing:var(--gwh-tracking-wider);
  text-transform:uppercase;
  color:var(--gwh-text-muted);
}
.gwh-input,.gwh-textarea,.gwh-select{
  width:100%;
  padding:14px var(--gwh-space-4);
  background:var(--gwh-field-bg);
  border:var(--gwh-border-hairline) solid var(--gwh-border-strong);
  border-radius:var(--gwh-radius-sm);
  font-family:var(--gwh-font-body);
  font-size:var(--gwh-text-body); /* 16px — менше вмикає автозум у Safari на iOS */
  color:var(--gwh-text);
  transition:border-color var(--gwh-duration-base) var(--gwh-ease);
}
.gwh-input::placeholder,.gwh-textarea::placeholder{color:var(--gwh-text-muted);}
.gwh-input:hover,.gwh-textarea:hover{border-color:var(--gwh-text-muted);}
.gwh-textarea{min-height:120px;resize:vertical;line-height:var(--gwh-leading-normal);}

/* Помилка позначена і кольором, і текстом. Сам колір носієм повідомлення бути
   не може: приблизно кожен дванадцятий чоловік його не розрізнить. */
.gwh-input[aria-invalid='true'],.gwh-textarea[aria-invalid='true']{
  border-color:var(--gwh-danger);
}
.gwh-field__error{
  font-size:var(--gwh-text-xs);
  color:var(--gwh-danger);
}
.gwh-field__hint{
  font-size:var(--gwh-text-xs);
  color:var(--gwh-text-muted);
}


/* ───────────────────────────────────────────────────────────────────────────
   ЧИПИ І БЕЙДЖІ
   ─────────────────────────────────────────────────────────────────────────── */

/* ЧИП — інтерактивний фільтр. Єдине місце в системі зі скругленням pill:
   овал тут не декор, а сигнал «мене можна натиснути й перемкнути». */
.gwh-chip{
  display:inline-flex;align-items:center;gap:var(--gwh-space-2);
  padding:7px var(--gwh-space-4);
  background:transparent;
  border:var(--gwh-border-hairline) solid var(--gwh-border-strong);
  border-radius:var(--gwh-radius-pill);
  font-family:var(--gwh-font-brand);
  font-size:var(--gwh-text-xs);
  letter-spacing:var(--gwh-tracking-wide);
  color:var(--gwh-text-secondary);
  cursor:pointer;
  transition:background var(--gwh-duration-fast) var(--gwh-ease),
             border-color var(--gwh-duration-fast) var(--gwh-ease),
             color var(--gwh-duration-fast) var(--gwh-ease);
}
.gwh-chip:hover{border-color:var(--gwh-text);color:var(--gwh-text);}
.gwh-chip[aria-pressed='true'],.gwh-chip--active{
  background:var(--gwh-accent-fill);
  border-color:var(--gwh-accent-fill);
  color:var(--gwh-on-accent);
}

/* БЕЙДЖ — статичний ярлик («ХІТ», «NEW», «-15%»). Не натискається, тому
   кут прямий: округлість тут збрехала б про інтерактивність. */
.gwh-badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px var(--gwh-space-2);
  border-radius:var(--gwh-radius-sm);
  background:var(--gwh-alpha-gold-16);
  color:var(--gwh-accent);
  font-family:var(--gwh-font-brand);
  font-size:var(--gwh-text-2xs);
  font-weight:var(--gwh-weight-semibold);
  letter-spacing:var(--gwh-tracking-wider);
  text-transform:uppercase;
}
.gwh-badge--solid{background:var(--gwh-accent-fill);color:var(--gwh-on-accent);}
.gwh-badge--success{background:transparent;color:var(--gwh-success);
  box-shadow:inset 0 0 0 1px currentColor;}
.gwh-badge--danger{background:transparent;color:var(--gwh-danger);
  box-shadow:inset 0 0 0 1px currentColor;}


/* ───────────────────────────────────────────────────────────────────────────
   ІКОНКИ
   ─────────────────────────────────────────────────────────────────────────── */

/* Той самий підхід через mask-image, що вже працює в site.css: колір іконки
   успадковується від currentColor, тому одна іконка правильна на будь-якій
   поверхні. Тут лише розміри — набір масок лишається в site.css, дублювати
   тридцять правил заради префікса не варто. */
.gwh-icon{
  display:inline-block;flex-shrink:0;
  width:1em;height:1em;
  background-color:currentColor;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
}
.gwh-icon--sm{width:14px;height:14px;}
.gwh-icon--md{width:20px;height:20px;}
.gwh-icon--lg{width:28px;height:28px;}

/* Іконка в рамці — для переліку переваг. Квадрат зі скругленням 2px повторює
   геометрію карток і тримає ряд іконок на одній сітці. */
.gwh-icon-frame{
  display:inline-flex;align-items:center;justify-content:center;
  width:52px;height:52px;
  border:var(--gwh-border-hairline) solid var(--gwh-border-accent);
  border-radius:var(--gwh-radius-sm);
  color:var(--gwh-accent);
}

/* Штрихова вага іконок. Логотип намальований тонкою рівною лінією, тому
   заливні (solid) піктограми поруч із ним виглядають чужими. Для власних
   SVG у /assets/icons/ тримаємо stroke-width 1.5 на сітці 24px. */


/* ───────────────────────────────────────────────────────────────────────────
   ЛОГОТИП
   Правила винесені в CSS, щоб їх не можна було «забути» — розмітка сама
   не дасть поставити знак замалим або впритул до сусіда.
   ─────────────────────────────────────────────────────────────────────────── */

/* Охоронне поле рахується від висоти самого знака (--gwh-logo-clearspace),
   а не фіксованими пікселями: інакше логотип на 200px і на 40px матимуть
   однаковий відступ, і в одному з двох випадків він буде неправильним. */
.gwh-logo{
  display:inline-block;
  padding:calc(var(--gwh-logo-h,40px) * var(--gwh-logo-clearspace));
  line-height:0;
}
.gwh-logo img{height:var(--gwh-logo-h,40px);width:auto;}

/* Повний знак зі словом — мінімум 120px завширшки. Нижче цього «NATURE
   CABINS» перетворюється на сірий пунктир. */
.gwh-logo--full img{min-width:var(--gwh-logo-min-full);}
/* Сама арка без напису — мінімум 24px. Нижче зникають вікно й ялина, і знак
   стає безликою крапкою. */
.gwh-logo--mark img{min-width:var(--gwh-logo-min-mark);}

/* На вузькій шапці охоронне поле з'їдає висоту, якої і так мало —
   там дозволено половину норми. Це єдиний виняток. */
.gwh-logo--compact{padding:calc(var(--gwh-logo-h,32px) * 0.25);}

/* Логотип НІКОЛИ не лягає прямо на фото: у знака тонка лінія, і на
   строкатому знімку вона просто зникає. Якщо іншого виходу немає —
   тільки з цією підкладкою. */
.gwh-logo--on-media{
  background:var(--gwh-alpha-ink-88);
  border-radius:var(--gwh-radius-sm);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}


/* ───────────────────────────────────────────────────────────────────────────
   РОЗДІЛЮВАЧІ
   ─────────────────────────────────────────────────────────────────────────── */

.gwh-rule{border:0;height:var(--gwh-border-hairline);background:var(--gwh-border);}
/* Коротка золота риска — той самий елемент, що під написом NATURE CABINS
   у логотипі. Ставиться між великими блоками як пауза. */
.gwh-rule--accent{
  width:48px;height:var(--gwh-rule-accent);
  background:var(--gwh-accent);
}


/* ───────────────────────────────────────────────────────────────────────────
   ДОСТУПНІСТЬ
   ─────────────────────────────────────────────────────────────────────────── */

/* Анімації вимикаються, а не просто пришвидшуються: для частини людей рух на
   екрані викликає нудоту, і 0.01ms тут — стандартний спосіб зупинити його,
   не ламаючи скриптів, які чекають на transitionend. */
@media(prefers-reduced-motion:reduce){
  .gwh-btn,.gwh-link,.gwh-card,.gwh-card__media img,.gwh-chip,
  .gwh-input,.gwh-textarea,.gwh-link--arrow .gwh-icon{
    transition-duration:0.01ms !important;
  }
  .gwh-card--link:hover{transform:none;}
}