/* ==========================================================================
   RESPONSIVE — наскрізні правила, що залежать від ширини екрана
   Тут лежить те, що стосується сторінки загалом. Медіазапити окремих
   компонентів навмисно лишені поруч із самими компонентами.

   Точки зламу проєкту (дублюють --bp-* із variables.css — у @media
   змінні підставити не можна, тож змінювати треба в обох місцях):
     30rem  = 480px   ряд кнопок замість стовпчика
     37.5rem= 600px   картки у дві колонки
     40rem  = 640px   переваги Hero у чотири колонки
     48rem  = 768px   підвал у три колонки, смуга CTA у два стовпці
     64rem  = 1024px  desktop: меню-рядок, Hero у дві колонки, кроки в ряд
     80rem  = 1280px  максимальна ширина контейнера вже досягнута
   ========================================================================== */

/* ---------------------------------------------------------------------------
   ВУЗЬКІ ЕКРАНИ (до 1024px)
   --------------------------------------------------------------------------- */
@media (max-width: 63.999rem) {
  /* Липка панель CTA існує лише тут */
  .sticky-cta {
    display: block;
  }

  /* Коли відкрите меню, панель має піти: вона перекриває кнопки drawer
     і плутає фокус (FRONTEND_SPEC.md). */
  .is-drawer-open .sticky-cta {
    transform: translateY(100%);
  }
}

/* ---------------------------------------------------------------------------
   ШИРОКІ ЕКРАНИ (від 1024px)
   --------------------------------------------------------------------------- */
@media (min-width: 64rem) {
  :root {
    /* Переозначуємо саму змінну, а не висоту хедера окремим правилом:
       від неї залежить scroll-padding-top, і зсув якорів має мінятися разом. */
    --header-height: var(--header-height-lg);
  }

  /* Липка панель CTA — мобільний елемент, на desktop її немає зовсім */
  .sticky-cta {
    display: none;
  }

  /* Місце під панель у підвалі теж більше не потрібне */
  .page--has-sticky-cta .page__footer {
    padding-bottom: 0;
  }
}

/* ---------------------------------------------------------------------------
   ДУЖЕ ВУЗЬКІ ЕКРАНИ (320–360px)
   Мінімальна підтримувана ширина — 320px без горизонтальної прокрутки.
   --------------------------------------------------------------------------- */
@media (max-width: 22.5rem) {
  /* Довгий номер телефону в кнопці — головна причина виїзду за 320px */
  .sticky-cta__btn {
    font-size: var(--fs-xs);
    padding-inline: var(--space-2);
    gap: var(--space-1);
  }

  .btn {
    padding-inline: var(--space-4);
  }

  .btn--lg {
    padding-inline: var(--space-5);
    font-size: var(--fs-body);
  }

  /* Переваг Hero тут навмисно немає. Перевірено на 320px: у колонці 136px
     найдовше слово «супроводжуючого» займає 122px і на два рядки не рветься,
     тож базові дві колонки працюють і без окремого правила. */

  .quiz,
  .panel {
    padding: var(--space-5);
  }

  .faq__trigger {
    padding-inline: var(--space-4);
  }

  .faq__panel {
    padding-inline: var(--space-4);
  }
}

/* ---------------------------------------------------------------------------
   ЛАНДШАФТНА ОРІЄНТАЦІЯ НА НИЗЬКОМУ ЕКРАНІ
   Висувне меню має прокручуватись, а не обрізати нижні пункти.
   --------------------------------------------------------------------------- */
@media (max-width: 63.999rem) and (max-height: 30rem) {
  .nav {
    padding-top: calc(var(--header-height) + var(--space-4));
  }

  .nav__list {
    gap: 0;
  }

  .nav__link {
    min-height: 40px;
  }
}

/* ---------------------------------------------------------------------------
   ЗУМ 200% ТА ДУЖЕ ВЕЛИКИЙ ШРИФТ
   При збільшенні сторінка стає вузькою у px-еквіваленті, тож окремих
   правил не треба — усе тримається на rem і clamp(). Виняток один:
   липка панель з'їдає надто багато висоти.
   --------------------------------------------------------------------------- */
@media (max-height: 26rem) {
  .sticky-cta {
    display: none;
  }
}

/* ---------------------------------------------------------------------------
   ПРИСТРОЇ БЕЗ ТОЧНОГО ВКАЗІВНИКА
   Ефекти наведення на сенсорному екрані «залипають» після дотику.
   --------------------------------------------------------------------------- */
@media (hover: none) {
  .card:hover {
    border-color: var(--color-border);
    box-shadow: none;
    transform: none;
  }

  .btn--primary:hover:not([disabled]) {
    background-color: var(--color-accent-500);
    box-shadow: var(--shadow-sm);
  }
}