/* =============================================================
   layout-normalize.css
   Подключается ПОСЛЕДНИМ — после main.css и site-overrides.css.

   Назначение: убрать разнобой отступов, выровнять блоки по одной
   сетке и починить адаптивную вёрстку. Ни один текст, ни один
   цвет и ни одна регуляторная формулировка здесь не меняются —
   только геометрия.

   Файл намеренно один и подключается одной строкой в __root.tsx,
   чтобы правку можно было полностью откатить, убрав эту строку.
   ============================================================= */


/* -------------------------------------------------------------
   1. КОРНЕВОЙ РАЗМЕР ШРИФТА — главная причина проблем

   Было в main.css:
     html                { font-size: 1.1721611722vw }
     @media <=1024px     { font-size: 1.125rem  = 18px }
     @media <=769px      { font-size: 0.625rem  = 10px }

   Почти вся вёрстка задана в rem, поэтому размер корневого шрифта
   умножает все отступы и кегли. Получалась немонотонная кривая:

     375px -> 10px     768px -> 10px    1024px -> 18px
    1280px -> 15px    1366px -> 16px    1920px -> 22.5px
    2560px -> 30px

   То есть на мобильном основной текст был 10px, на планшете
   подскакивал до 18px, между 1024 и 1366 снова уменьшался,
   а на большом мониторе всё раздувалось в 1.4–1.9 раза —
   отсюда и «много пустого места».

   Ниже — плавная монотонная кривая с границами 16…19px.
   ------------------------------------------------------------- */
html {
  font-size: clamp(16px, 0.35vw + 13.2px, 19px) !important;
  -webkit-text-size-adjust: 100%;   /* iOS не раздувает текст при повороте */
  text-size-adjust: 100%;
}
/* Перебиваем оба старых media-правила той же логикой */
@media (width <= 63.99875rem) {
  html { font-size: clamp(16px, 0.35vw + 13.2px, 19px) !important; }
}
@media (width <= 48.06125rem) {
  html { font-size: 16px !important; }
}


/* -------------------------------------------------------------
   2. ЕДИНЫЙ КОНТЕЙНЕР — причина того, что блоки «стоят не ровно»

   Было две разные ширины:
     .ds-container  max-width: 1180px            (9 секций)
     .container     max-width: 89.3772893773vw   (шапка, hero, футер)

   Расхождение краёв: 41px на 1366, 107px на 1440,
   536px на 1920, 1108px на 2560. Поэтому шапка, первый экран
   и футер не совпадали по краям с остальными секциями.
   ------------------------------------------------------------- */
.container,
.ds-container,
.hero__container,
.header__container,
.hero__trust-strip-inner,
.symptoms__inner,
.footer__inner {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: clamp(16px, 3vw, 32px);
}


/* -------------------------------------------------------------
   3. ЕДИНЫЙ ВЕРТИКАЛЬНЫЙ РИТМ

   В site-overrides.css отступ секции задан дважды и сам себе
   противоречит (строки 920 и 1208). Плюс он в rem, поэтому
   разъезжался вместе с корневым шрифтом: 40px на мобильном
   и 154px на 2560px.

   Здесь — одна формула в px: монотонно 40 -> 88px.
   ------------------------------------------------------------- */
.ds-section,
.symptoms,
.faq-section {
  padding-block: clamp(40px, 5.2vw, 88px);
}
.hero.hero--refined {
  padding-top: clamp(28px, 3.6vw, 64px);
  padding-bottom: clamp(32px, 4vw, 72px);
}
/* Отступ под заголовком секции — тоже одна величина */
.ds-head {
  margin-bottom: clamp(24px, 3vw, 48px);
}


/* -------------------------------------------------------------
   4. СЕТКИ: одинаковый зазор, элементы не выдавливают друг друга
   ------------------------------------------------------------- */
.ds-grid {
  gap: clamp(16px, 2vw, 28px);
}
.ds-split,
.ds-usage-split {
  gap: clamp(24px, 3.2vw, 48px);
}
/* min-width:0 обязателен: без него длинное слово или картинка
   растягивает колонку и ломает всю строку сетки */
.ds-grid > *,
.ds-split > *,
.ds-usage-split > *,
.benefits-grid > *,
.symptoms__grid > * {
  min-width: 0;
}
/* Карточки в ряду — одной высоты, содержимое сверху */
.ds-grid > .ds-card,
.ds-grid > .ds-step,
.benefits-grid > .ds-card {
  height: 100%;
}


/* -------------------------------------------------------------
   5. ТОЧКИ ПЕРЕЛОМА

   В проекте их 37, причём семь штук стоят вокруг 768px
   (48rem, 48.06125rem, 48.0613rem, 47.9375rem, 767.98px,
   768px, 768.98px) и пять вокруг 1024px. На промежуточных
   ширинах одновременно частично применялись противоречащие
   наборы правил — отсюда «на одном экране хорошо, на другом
   поехало».

   Ниже — три точки, которые говорят последнее слово:
   1024 (планшет-ландшафт), 900 (планшет), 640 (телефон).
   ------------------------------------------------------------- */
@media (max-width: 1024px) {
  .ds-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ds-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .benefits-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .ds-split,
  .ds-usage-split { grid-template-columns: minmax(0, 1fr); }
  .benefits-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Ничто не выходит за пределы экрана */
  .container,
  .ds-container,
  .hero__container,
  .header__container,
  .symptoms__inner,
  .footer__inner { max-width: 100%; }

  /* Медиа-блоки перестают держать жёсткую пропорцию,
     иначе на узком экране появляются огромные пустые поля */
  .ds-media,
  .ds-usage-media,
  .about-product { aspect-ratio: auto; }
}

@media (max-width: 640px) {
  .ds-grid-2,
  .ds-grid-3,
  .ds-grid-4,
  .benefits-grid,
  .symptoms__grid { grid-template-columns: minmax(0, 1fr); }

  /* Кнопки на всю ширину — иначе они «плавают» по центру */
  .ds-btn,
  .hero__cta .ds-btn,
  .symptoms__hint-cta { width: 100%; }

  .hero__bottom-row,
  .hero__trust-chips,
  .symptoms__hint-actions { flex-wrap: wrap; }
}


/* -------------------------------------------------------------
   6. ГОРИЗОНТАЛЬНЫЙ СКРОЛЛ

   В main.css у .footer и .header__nav стоит width: 100vw.
   100vw не учитывает полосу прокрутки, поэтому страница
   становится шире окна и появляется горизонтальный скролл.
   ------------------------------------------------------------- */
.footer,
.header__nav {
  width: 100%;
  max-width: 100%;
}
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}
img,
svg,
video,
canvas,
iframe {
  max-width: 100%;
  height: auto;
}
/* Длинные слова и ссылки не растягивают блоки */
body {
  overflow-wrap: break-word;
}


/* -------------------------------------------------------------
   7. ЧИТАЕМОСТЬ И УДОБСТВО НА ТЕЛЕФОНЕ

   Основной текст был 10px на всех экранах до 769px — следствие
   пункта 1. Фиксируем нижнюю границу явно, чтобы это не зависело
   от корневого шрифта.
   ------------------------------------------------------------- */
.ds-lead,
.hero__lede,
.symptoms__description,
.ds-card__text,
.ds-step__text,
.how-step__text,
.faq-item__a {
  font-size: clamp(16px, 1.05vw, 18px);
  line-height: 1.65;
}
.ds-title,
.symptoms__title {
  font-size: clamp(28px, 4.4vw, 60px);
  line-height: 1.1;
}
.hero__subtitle {
  font-size: clamp(30px, 5vw, 64px);
  line-height: 1.08;
}
.ds-card__title,
.ds-step__title,
.how-step__title,
.faq-item__q {
  font-size: clamp(17px, 1.25vw, 20px);
  line-height: 1.35;
}
.footer,
.footer__reg-info,
.text-notes {
  font-size: clamp(13px, 0.85vw, 15px);
  line-height: 1.7;
}
.ds-eyebrow,
.hero__eyebrow,
.symptoms__eyebrow {
  font-size: clamp(12px, 0.85vw, 14px);
}

/* Зоны нажатия не меньше 44px — требование к мобильным интерфейсам */
@media (max-width: 900px) {
  .ds-btn,
  .header__buy,
  .header__burger,
  .hero__buy,
  .hero__more,
  .symptoms__item,
  .faq-item__q,
  .scroll-buy-bar__label,
  .footer__privacy-policy a {
    min-height: 44px;
  }
  .symptoms__item,
  .faq-item__q {
    display: flex;
    align-items: center;
  }
}

/* Липкая шапка не должна съедать пол-экрана на телефоне */
@media (max-width: 640px) {
  .header { padding-block: 8px; }
  html { scroll-padding-top: 64px; }
  section[id] { scroll-margin-top: 64px; }
}


/* -------------------------------------------------------------
   8. ОЧЕНЬ БОЛЬШИЕ ЭКРАНЫ

   Контейнер уже ограничен 1180px, поэтому дополнительно
   ограничиваем только декоративные элементы первого экрана,
   которые раньше масштабировались от vw без предела.
   ------------------------------------------------------------- */
@media (min-width: 1600px) {
  .hero__stage,
  .hero__stage-ring { max-width: 620px; margin-inline: auto; }
  .hero__product-img { max-width: 520px; margin-inline: auto; }
}


/* -------------------------------------------------------------
   9. ПЕЧАТЬ И ДОСТУПНОСТЬ
   ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}