/* ==========================================================================
   SECTIONS — блоки, які трапляються на сторінці один раз
   ========================================================================== */

/* ---------------------------------------------------------------------------
   HERO
   Склад і тексти — за затвердженим референсом першого екрана.
   Mobile: одна колонка, порядок «контент → CTA → зображення».
   Desktop: дві колонки, зображення виходить у правий край вікна.
   --------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  background-color: var(--color-bg);
}

.hero__inner {
  display: grid;
  gap: var(--space-8);
  padding-block: var(--space-10) var(--space-12);
}

.hero__body > * + * {
  margin-top: var(--space-5);
}

.hero__title {
  color: var(--color-primary-900);
}

.hero__lead {
  max-width: 34rem;
}

.hero__cta {
  margin-top: var(--space-8);
}

.hero__media {
  border-radius: var(--radius-hero);
  overflow: hidden;
}

.hero__img {
  width: 100%;
  height: auto;
}

/* --- Переваги під кнопками --- */
.hero__benefits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5) var(--space-4);
  /* Більше, ніж відступ між абзацами вище: тут межа між закликом до дії
     та переліком переваг, і вона має читатися як межа груп. */
  margin-top: var(--space-10);
  padding: 0;
  list-style: none;
}

.hero-benefit {
  display: grid;
  gap: var(--space-1);
  align-content: start;
}

.hero-benefit__icon {
  color: var(--color-primary-600);
  margin-bottom: var(--space-1);
}

.hero-benefit__title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--color-text-900);
}

.hero-benefit__note {
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  color: var(--color-text-700);
}

/* --- Плашка з ціною --- */
.price-note {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-8);
  padding: var(--space-5) var(--space-6);
  background-color: var(--color-primary-100);
  border-radius: var(--radius-card);
}

.price-note__icon {
  flex: none;
  width: 44px;
  height: 44px;
  padding: 9px;
  border-radius: 50%;
  background-color: var(--color-primary-600);
  color: #fff;
}

.price-note__title {
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  color: var(--color-primary-900);
}

.price-note__text {
  font-size: var(--fs-sm);
  color: var(--color-text-700);
}

@media (min-width: 40rem) {
  .hero__benefits {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-4);
  }

  /* Тонкі роздільники між перевагами — як на референсі */
  .hero-benefit + .hero-benefit {
    padding-left: var(--space-4);
    border-left: 1px solid var(--color-border);
  }
}

@media (min-width: 64rem) {
  .hero__inner {
    /* Текстова колонка трохи ширша за медіа: у неї має без переносу
       вміщатися пара кнопок «Розрахувати вартість» + «Зателефонувати». */
    grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--space-12);
    padding-block: var(--space-16);
    /* Правий відступ контейнера прибираємо: зображення має дійти до краю */
    padding-right: 0;
  }

  .hero__media {
    align-self: stretch;
    border-radius: 0;
    /* Витягуємо медіа за межі центрованого контейнера рівно на ту відстань,
       яка лишається між контейнером і краєм вікна. */
    margin-right: calc(-1 * max(0px, (100vw - var(--container-max)) / 2));
    margin-block: calc(-1 * var(--space-16));
  }

  .hero__img {
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  /* М'який перехід фотографії у білий фон зліва — як на референсі */
  .hero__media::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 22%;
    background: linear-gradient(to right, var(--color-bg) 8%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
  }

  .hero__media {
    position: relative;
  }
}

/* ---------------------------------------------------------------------------
   СМУГА CTA
   Темна за замовчуванням, світлий варіант — модифікатором.
   --------------------------------------------------------------------------- */
.cta-band {
  padding-block: var(--space-12);
  background-color: var(--color-primary-900);
  color: #fff;
  /* На синьому синє кільце фокуса дає 2.18:1 — нижче за обов'язкові 3:1 */
  --color-focus: var(--color-accent-500);
}

.cta-band :is(h2, h3) {
  color: #fff;
}

.cta-band--soft {
  background-color: var(--color-accent-100);
  color: var(--color-text-700);
  --color-focus: var(--color-primary-600);
}

.cta-band--soft :is(h2, h3) {
  color: var(--color-primary-900);
}

.cta-band__inner {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}

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

@media (min-width: 48rem) {
  .cta-band__inner {
    grid-template-columns: 1fr auto;
    gap: var(--space-10);
  }

  .cta-band__actions {
    justify-content: flex-end;
  }
}

/* ---------------------------------------------------------------------------
   КРОКИ ПЕРЕВЕЗЕННЯ
   Номер малює CSS-лічильник — у розмітці його немає, тому скрінрідер
   не читає число двічі (ol сам оголошує позицію пункту).
   --------------------------------------------------------------------------- */
.steps {
  display: grid;
  gap: var(--space-6);
  counter-reset: step;
  padding: 0;
  list-style: none;
}

.step {
  position: relative;
  counter-increment: step;
  padding-left: calc(var(--space-12) + var(--space-2));
  min-height: 48px;
  display: flex;
  align-items: center;
}

.step::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--color-primary-600);
  color: #fff;
  font-size: var(--fs-h4);
  font-weight: var(--fw-extrabold);
  font-variant-numeric: tabular-nums;
}

/* Вертикальна лінія між кружечками */
.step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 23.5px;
  top: 48px;
  width: 2px;
  height: calc(100% + var(--space-6) - 48px);
  background-color: var(--color-border);
}

.step__title {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  color: var(--color-text-900);
}

@media (min-width: 64rem) {
  .steps {
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-6);
  }

  .step {
    display: block;
    padding-left: 0;
    padding-top: calc(48px + var(--space-4));
  }

  /* На широкому екрані лінія горизонтальна */
  .step:not(:last-child)::after {
    left: 48px;
    top: 23px;
    width: calc(100% + var(--space-6) - 48px);
    height: 2px;
  }

  .step__title {
    font-size: var(--fs-body);
  }
}

/* ---------------------------------------------------------------------------
   ВАРТІСТЬ І ЗНИЖКИ
   --------------------------------------------------------------------------- */
.price-panel {
  max-width: 60rem;
  margin-inline: auto;
  text-align: center;
}

.price-panel__title {
  font-size: var(--fs-h3);
  margin-bottom: var(--space-6);
}

.discount-list {
  --grid-gap: var(--space-4);
  padding: 0;
  list-style: none;
}

.discount {
  display: grid;
  gap: var(--space-2);
  align-content: start;
  padding: var(--space-6) var(--space-4);
  background-color: var(--color-accent-100);
  border-radius: var(--radius-card);
}

.discount__value {
  font-size: var(--fs-h2);
  font-weight: var(--fw-extrabold);
  line-height: 1;
  color: var(--color-primary-900);
}

.discount__label {
  font-size: var(--fs-sm);
  color: var(--color-text-700);
}

.price-panel__note {
  margin-top: var(--space-6);
}

/* ---------------------------------------------------------------------------
   КВІЗ
   --------------------------------------------------------------------------- */
.quiz-section {
  background-color: var(--color-bg-cream);
}

.quiz {
  padding: var(--space-6);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-md);
}

@media (min-width: 30rem) {
  .quiz {
    padding: var(--space-8);
  }
}

.quiz__progress {
  margin-bottom: var(--space-6);
}

.quiz__step-label {
  margin-bottom: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--color-primary-700);
}

.quiz__step {
  border: 0;
  padding: 0;
  margin: 0;
}

.quiz__legend {
  /* legend не бере participation у grid/flex батька, тому відступ ставимо тут.
     space-4, а не space-5: на кроці з двома групами питань кожен зайвий
     відступ додає прокрутки на невисоких екранах. */
  margin-bottom: var(--space-4);
  padding: 0;
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--color-text-900);
}

.field--group {
  display: block;
}

.field--group > .field__label {
  display: block;
  margin-bottom: var(--space-2);
}

.quiz__consent {
  margin-top: var(--space-5);
}

.quiz__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-8);
}

.quiz__next,
.quiz__submit {
  flex: 1 1 auto;
}

.quiz__back {
  flex: 0 0 auto;
  color: var(--color-text-700);
  border-color: var(--color-border-strong);
}

.quiz__back:hover {
  color: var(--color-primary-700);
  border-color: var(--color-primary-600);
  background-color: var(--color-primary-100);
}

/* ---------------------------------------------------------------------------
   ОБОВ'ЯЗКОВЕ ПОПЕРЕДЖЕННЯ
   Окремий блок, а не примітка дрібним шрифтом.
   --------------------------------------------------------------------------- */
.disclaimer {
  padding-block: var(--space-8);
  background-color: var(--color-accent-100);
  border-top: 1px solid #ecd9a3;
  border-bottom: 1px solid #ecd9a3;
}

.disclaimer__inner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  max-width: 60rem;
}

.disclaimer__icon {
  flex: none;
  color: var(--color-danger-600);
}

.disclaimer p {
  font-weight: var(--fw-semibold);
  color: var(--color-text-900);
}

.disclaimer a {
  color: var(--color-danger-600);
  font-weight: var(--fw-bold);
}

/* ---------------------------------------------------------------------------
   ПІДВАЛ
   Світлий фон: на темно-синьому напис у логотипі зливається з тлом.
   --------------------------------------------------------------------------- */
.footer {
  padding-top: var(--space-12);
  background-color: var(--color-bg-soft);
  border-top: 1px solid var(--color-border);
}

.footer__inner {
  display: grid;
  gap: var(--space-8);
}

.footer__brand {
  display: grid;
  gap: var(--space-4);
  max-width: 26rem;
}

.footer__logo {
  width: auto;
  height: 44px;
  background: none;
}

.footer__title {
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  margin-bottom: var(--space-4);
}

/* Проміжок між пунктами мінімальний навмисно: висоту дає сама ціль дотику,
   а не відступ між ними — інакше підвал розтягується вдвічі. */
.footer__list {
  display: grid;
  gap: var(--space-1);
}

.footer__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap-target);   /* 44px — вимога ACCESSIBILITY.md */
  color: var(--color-text-700);
  text-decoration: none;
}

.footer__link:hover {
  color: var(--color-primary-700);
  text-decoration: underline;
}

.footer__link .icon {
  color: var(--color-primary-600);
}

.footer__link--phone {
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  color: var(--color-text-900);
}

.footer__note {
  font-size: var(--fs-sm);
  color: var(--color-text-700);
}

.footer__bottom {
  margin-top: var(--space-10);
  padding-block: var(--space-5);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-700);
}

@media (min-width: 48rem) {
  .footer__inner {
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: var(--space-10);
  }
}