/* Адаптив: масштабирование макета. Подключается ПОСЛЕ всех остальных стилей.
   Обоснование архитектуры и отклонённые варианты — context/adaptive-layout.md.

   Вёрстка перенесена из Figma 1:1 абсолютными px в двух системах координат одновременно:
   контентные секции стоят в контейнере 1398, а шапка и подвал — в координатах страницы
   1920 (.footer__col--help { left: 1655px }, телефоны поддержки доходят до 1824).
   Замер: на 1440 и на 1024 правый край контента остаётся на 1824, то есть при 1024
   обрезается ~800px, и html { overflow-x: clip } молча это скрывает.

   Поэтому между брейкпоинтами страница не перекладывается, а масштабируется целиком.
   Ширина документа остаётся макетной, все абсолютные координаты обеих систем сохраняют
   смысл, обрез исчезает по построению на ЛЮБОЙ ширине, а не только на «круглых».

   zoom, а не transform: scale — zoom пересчитывает layout, поэтому высота документа
   сжимается вместе с содержимым и вертикальный скролл честный (на 1024: 5494 → 2930).
   transform оставил бы исходную высоту и дал паразитный скролл снизу.

   Проверено в Chrome: медиазапросы zoom не искажает (на вьюпорте 1024 при zoom 0.53
   max-width:767px остаётся false), поэтому брейкпоинты секций продолжают работать.
   Единиц vh/vw/dvh в проекте нет, конфликтовать масштабу не с чем. */

:root {
  --design-pc: 1920;   /* ширина макета Figma, десктоп */
  --design-mb: 390;    /* ширина макета Figma, мобильный */
}

/* ===================== ДЕСКТОП: 1200 и шире =====================
   Коэффициент 100vw / 1920. На 1920 равен 1 — попиксельное соответствие макету
   в его нативной ширине сохраняется без изменений.
   Шире 1920 не растягиваем (min(…, 1)): иначе на 2560 кегль вырос бы с 16 до 21px.
   Выше кепа страница остаётся 1920 и центрируется правилом ниже. */
@media (min-width: 1200px) {
  html {
    zoom: min(calc(100vw / var(--design-pc) / 1px), 1);
  }
}

/* Шире макета — центрируем документ.
   Фон подвала при этом обрывается на краю body, и по бокам появляются белые полосы
   (проверено на 2560: подвал занимает 320..2240 при вьюпорте 2560). Поэтому фоновые
   полосы подвала продлеваются до краёв экрана фоном на html: верхняя полоса цвета
   --footer-bg и нижняя плашка --footer-strip, привязанные к низу страницы.
   Высоты берутся из макета: подвал 558, плашка 95 (611:3804). */
@media (min-width: 1921px) {
  body {
    width: calc(var(--design-pc) * 1px);
    margin-inline: auto;
  }

  html {
    background-image:
      linear-gradient(var(--footer-strip), var(--footer-strip)),
      linear-gradient(var(--footer-bg), var(--footer-bg));
    background-repeat: no-repeat, no-repeat;
    background-size: 100% 95px, 100% 558px;
    background-position: bottom left, bottom left;
  }
}
/* ===================== ПЛАНШЕТ: 768…1199 =====================
   Диапазон отдаётся мобильной раскладке: десктопная в масштабе 768/1920 = 0.4
   дала бы кегль 16 × 0.4 = 6.4px — нечитаемо.

   Мобильная раскладка спроектирована под 390. Масштабируем её от базы 390, но
   ограничиваем кеп множителем 1.8: при 100vw / 390 на 1199 получилось бы ×3.07,
   то есть кегль 49px и карточки во весь экран. С кепом 1.8 кегль 28.8px —
   планшетный предел читаемости, дальше страница центрируется. */
@media (min-width: 768px) and (max-width: 1199px) {
  html {
    zoom: min(calc(100vw / var(--design-mb) / 1px), 1.8);
  }

  /* Выше кепа документ уже не заполняет ширину — центрируем его.
     702 = 390 × 1.8: реальная занимаемая ширина при упёршемся масштабе. */
  body {
    width: calc(var(--design-mb) * 1px);
    margin-inline: auto;
  }
}

/* ===================== МОБИЛЬНЫЙ: до 767 =====================
   Уже 390 — сжимаем, шире — растягиваем тем же коэффициентом, поэтому между
   320 и 768 нет ни обреза, ни ступенек. */
@media (max-width: 767px) {
  html {
    zoom: calc(100vw / var(--design-mb) / 1px);
  }
}