/* ==========================================================================
   LAYOUT — контейнер, секції, сітки
   Mobile First: базові правила — для вузького екрана, розширення тільки
   через min-width. Тут живуть медіазапити самої сітки; переклад окремих
   блоків (хедер → бургер, hero в одну колонку, липкий CTA) — у responsive.css.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   КОНТЕЙНЕР
   Бічні поля враховують виріз екрана в альбомній орієнтації.
   --------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: calc(var(--container-pad) + var(--safe-left))
                  calc(var(--container-pad) + var(--safe-right));
}

/* Для суцільного тексту: privacy, 404, довгі відповіді FAQ */
.container--narrow {
  max-width: var(--container-narrow);
}

/* ---------------------------------------------------------------------------
   СЕКЦІЇ
   --------------------------------------------------------------------------- */
.section {
  padding-block: var(--space-section);
}

/* Секція одразу під hero не потребує повного відступу згори */
.section--tight {
  padding-block: calc(var(--space-section) * 0.7);
}

.section--soft {
  background-color: var(--color-bg-soft);
}

.section--cream {
  background-color: var(--color-bg-cream);
}

.section--primary {
  background-color: var(--color-primary-900);
  color: #fff;
  /* На синьому тлі синє кільце фокуса дає 2.18:1 — це нижче за обов'язкові
     3:1 для нетекстових елементів. Переозначуємо на акцент: 7.00:1. */
  --color-focus: var(--color-accent-500);
  --color-border: rgba(255, 255, 255, 0.24);
  --color-link: #fff;
  --color-link-hover: var(--color-accent-500);
}

.section--primary :is(h1, h2, h3, h4) {
  color: #fff;
}

/* Приглушений текст на синьому: чистий text-500 тут нечитабельний */
.section--primary :is(.lead, .text-note, .text-muted) {
  color: rgba(255, 255, 255, 0.82);
}

/* Шапка секції: eyebrow + H2 + вступний абзац */
.section__head {
  margin-bottom: var(--space-block);
  max-width: 56rem;
}

.section__head > * + * {
  margin-top: var(--space-3);
}

/* Центрована шапка — для CTA-смуг і фінального блоку */
.section__head--center {
  margin-inline: auto;
  text-align: center;
}

/* ---------------------------------------------------------------------------
   СІТКИ
   Одна колонка на вузькому екрані, далі розширення. Картки в межах ряду
   однакової висоти — за це відповідає stretch за замовчуванням у grid.
   --------------------------------------------------------------------------- */
.grid {
  display: grid;
  gap: var(--grid-gap);
}

.grid--2,
.grid--3,
.grid--4 {
  grid-template-columns: 1fr;
}

/* ≥ 600px — дві колонки */
@media (min-width: 37.5rem) {
  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ≥ 1024px — цільова кількість колонок */
@media (min-width: 64rem) {
  .grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Непарна остання картка в сітці з двох колонок розтягується на всю ширину,
   щоб під рядом не зависала порожнеча. Вимикається на трьох колонках. */
@media (min-width: 37.5rem) and (max-width: 63.999rem) {
  .grid--fill-last > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

/* ---------------------------------------------------------------------------
   ДВОКОЛОНКОВИЙ РОЗКЛАД
   Hero, «Наш автомобіль», фінальний CTA з квізом.
   На вузькому екрані — одна колонка, порядок задає .split__media { order }.
   --------------------------------------------------------------------------- */
.split {
  display: grid;
  gap: var(--space-block);
  align-items: center;
}

@media (min-width: 64rem) {
  .split {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
  }

  /* Текст ширший за медіа — hero і блок про автомобіль */
  .split--text-wide {
    grid-template-columns: 1.05fr 0.95fr;
  }

  /* Медіа зліва без зміни порядку в DOM: розмітка лишається читабельною
     для скрінрідера, місцями елементи міняє тільки сітка. */
  .split--media-first > .split__media {
    grid-column: 1;
    grid-row: 1;
  }

  .split--media-first > .split__body {
    grid-column: 2;
    grid-row: 1;
  }
}

/* ---------------------------------------------------------------------------
   ВЕРТИКАЛЬНИЙ СТЕК
   Керований відступ між дітьми без margin на самих компонентах.
   --------------------------------------------------------------------------- */
.stack > * + * {
  margin-top: var(--space-4);
}

.stack--sm > * + * {
  margin-top: var(--space-2);
}

.stack--lg > * + * {
  margin-top: var(--space-6);
}

.stack--xl > * + * {
  margin-top: var(--space-8);
}

/* ---------------------------------------------------------------------------
   ГОРИЗОНТАЛЬНИЙ РЯД
   Пара кнопок, логотип із текстом, іконка з підписом.
   На вузькому екрані переноситься, а не виштовхує сторінку вбік.
   --------------------------------------------------------------------------- */
.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.cluster--between {
  justify-content: space-between;
}

.cluster--center {
  justify-content: center;
}

/* Група CTA: на вузькому екрані кнопки на всю ширину одна під одною */
.cta-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.cta-group > * {
  width: 100%;
}

@media (min-width: 30rem) {
  .cta-group {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }

  .cta-group > * {
    width: auto;
  }
}

/* ---------------------------------------------------------------------------
   КАРКАС СТОРІНКИ
   Підвал притиснутий донизу навіть на коротких сторінках (404, thank-you).
   --------------------------------------------------------------------------- */
.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  /* Динамічна висота: враховує панелі мобільних браузерів, що ховаються */
  min-height: 100dvh;
}

.page__main {
  flex: 1 0 auto;
}

.page__footer {
  flex-shrink: 0;
}

/* Місце під липкий мобільний CTA, щоб він не накривав кінець підвалу.
   Вимикається разом із самою панеллю в responsive.css. */
.page--has-sticky-cta .page__footer {
  padding-bottom: calc(var(--space-16) + var(--safe-bottom));
}

/* ---------------------------------------------------------------------------
   СПІВВІДНОШЕННЯ СТОРІН
   Резервує місце під зображення до завантаження — прибирає стрибок макета.
   --------------------------------------------------------------------------- */
.ratio-3-2 {
  aspect-ratio: 3 / 2;
}

.ratio-4-3 {
  aspect-ratio: 4 / 3;
}

.ratio-16-9 {
  aspect-ratio: 16 / 9;
}

:is(.ratio-3-2, .ratio-4-3, .ratio-16-9) > :is(img, svg, video) {
  width: 100%;
  height: 100%;
  object-fit: cover;
}