/* ============================================================
   ФЕНИКС · Слой 6: адаптив
   Базовые слои свёрстаны от рабочего стола, и часть правил там
   уже есть. Здесь собрано то, что подтверждено замерами реальной
   вёрстки на 320–1024 px, а не подобрано «на глаз».
   Подключается последним — правит поверх остальных слоёв.
   ============================================================ */

/* ------------------------------------------------------------
   Страховки на всех ширинах
   ------------------------------------------------------------ */

/* Русские термины в заголовках длиннее английских: «конфиденциальности»
   на ширине колонки телефона не помещается в строку целиком. Без переноса
   слово распирает грид-колонку, и хвост заголовка срезает overflow: hidden
   у секции.
   Именно anywhere, а не break-word: последний разрешает перенос, но не
   уменьшает min-content-вклад, поэтому колонка грида всё равно растягивалась
   под самое длинное слово. Разрыв включается только когда слово не влезает. */
h1, h2, h3, h4, .h1, .h2, .h3, .h4 { overflow-wrap: anywhere; }

/* Вырез и скруглённые углы: в альбомной ориентации контент иначе
   заезжает под «чёлку». */
@supports (padding: max(0px)) {
  .container {
    padding-left: max(var(--pad-x), env(safe-area-inset-left));
    padding-right: max(var(--pad-x), env(safe-area-inset-right));
  }
}

/* ------------------------------------------------------------
   Этапы сотрудничества — доступность карточек без залипания

   На широком экране дорожку двигает ScrollTrigger. Он отключён
   ниже 900 px и при prefers-reduced-motion, а .process__viewport
   остаётся overflow: hidden — в результате из пяти карточек видна
   одна, а остальные недостижимы. Возвращаем их родной горизонтальной
   прокруткой с примагничиванием: работает пальцем, без JS.
   ------------------------------------------------------------ */

@media (max-width: 899px) {
  .process__track {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .process__track::-webkit-scrollbar { display: none; }
  .process__step {
    width: min(340px, 80vw);
    scroll-snap-align: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .process__track {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .process__track::-webkit-scrollbar { display: none; }
  .process__step { scroll-snap-align: start; }
}

/* ------------------------------------------------------------
   Планшет — 1024 и ниже
   ------------------------------------------------------------ */

@media (max-width: 1024px) {
  /* auto-минимум грид-колонки равен min-content: самое длинное слово
     заголовка растягивало колонку шире экрана и тянуло за собой лид,
     кнопки и цифры. minmax(0, 1fr) это запрещает. */
  .hero__inner,
  .page-hero__grid,
  .page-hero--plate .page-hero__grid,
  .about__grid,
  .services__grid,
  .contact__grid,
  .deck {
    grid-template-columns: minmax(0, 1fr);
  }
  .hero__inner > *,
  .page-hero__grid > *,
  .hero__fact { min-width: 0; }

  /* Полоса-затемнение по краям ленты съедала четверть строки. */
  .marquee::before, .marquee::after { width: 10vw; }
}

/* Шапка на 960 сжимается до 68 px, а отступ страничного героя
   всё ещё считался от 84 px — сверху оставался лишний зазор. */
@media (max-width: 960px) {
  .page-hero { padding-top: calc(68px + var(--s-10)); }
}

/* ------------------------------------------------------------
   Телефон — 768 и ниже
   ------------------------------------------------------------ */

@media (max-width: 768px) {
  /* Пальцу нужно не меньше 44 px. Ссылки в подвале, хлебных крошках
     и списке услуг были 18–28 px высотой. */
  .footer__list { gap: 0; }
  .footer__list a,
  .footer__contacts li > a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .footer__contacts li { line-height: 1.5; }

  .footer__bottom { gap: 0 var(--s-5); }
  .footer__bottom a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  /* при переносе строк прижимать последнюю ссылку вправо незачем */
  .footer__bottom a:last-of-type { margin-left: 0; }

  .crumbs a, .crumbs [aria-current] {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }

  /* Почта в выехавшем меню — строка в 20 px высотой. */
  .nav__aside-mobile a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .services__name { display: block; padding-block: var(--s-2); }

  /* Главный номер на странице контактов — основное целевое действие,
     а зона нажатия была в 30 px по высоте. */
  .ct-primary__phone {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
  }

  /* Точки-переключатели слайдов были 34×3 px — попасть невозможно.
     Видимая черта прежняя, зона нажатия выросла до 44 px. */
  .deck__nav { gap: 0; }
  .deck__dot {
    width: 44px; height: 44px;
    display: grid;
    place-items: center;
    background: none;
    border-radius: 0;
  }
  .deck__dot::before {
    content: '';
    width: 26px; height: 3px;
    border-radius: 2px;
    background: var(--line-hi);
    transition: background-color var(--t-mid) var(--e-out);
  }
  .deck__dot.is-active { background: none; }
  .deck__dot.is-active::before { background: var(--fx-orange); }
}

/* ------------------------------------------------------------
   Телефон — 640 и ниже
   ------------------------------------------------------------ */

@media (max-width: 640px) {
  /* Unbounded — широкая гарнитура, и нижняя граница 2.05rem не давала
     длинным словам поместиться в строку. Шкала привязана к ширине
     экрана: на 320 px даёт ~24 px, на 414 — ~32 px. */
  :root {
    --fs-h1: clamp(1.4rem, calc(8.2vw - 2px), 2.6rem);
    --fs-h2: clamp(1.32rem, calc(6.1vw - 1px), 1.9rem);
  }
  /* Мягкий перенос по слогам вместо разрыва посреди слова. */
  h1, h2, .h1, .h2 { hyphens: auto; }

  /* Слайд презентации на телефоне — главный объект блока.
     Во всю ширину экрана он читается заметно лучше, чем в колонке
     с полями: 375 px против 335. */
  .deck__stage { margin-inline: calc(var(--pad-x) * -1); }
  .deck--stacked .deck__viewer {
    border-radius: 0;
    border-inline: 0;
  }
  .deck__slide img { object-fit: contain; }

  /* .btn на этой ширине тянется во всю строку (components.css).
     «Назад» и «Далее» логично оставить парой в одном ряду. */
  .deck__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-3);
  }
  .deck__actions .btn { width: 100%; padding-inline: var(--s-4); }
  .deck__actions .btn--primary { grid-column: 1 / -1; }
  .deck__counter {
    grid-column: 1 / -1;
    margin-left: 0;
    text-align: center;
  }

  .hero__actions { gap: var(--s-3); }
  .hero__facts { gap: var(--s-5) var(--s-6); }

  /* Кадр 4/3 занимал пол-экрана до того, как пользователь дойдёт
     до списка направлений. */
  .services__stage { aspect-ratio: 3 / 2; }
}

/* ------------------------------------------------------------
   Узкий телефон — 380 и ниже (iPhone SE, Android 360 px)
   ------------------------------------------------------------ */

@media (max-width: 380px) {
  :root { --pad-x: 16px; }
  .process__step { padding: var(--s-6); }
  .card, .cta__card { padding: var(--s-5); }
  .btn { padding-inline: var(--s-5); }
  .process__step-num { font-size: 2.2rem; }
}

/* ------------------------------------------------------------
   Телефон в альбомной ориентации
   Высота экрана 380–420 px: вертикальные отступы секций съедают
   весь экран, до текста приходится доскроллить.
   ------------------------------------------------------------ */

@media (max-height: 460px) and (orientation: landscape) and (max-width: 1024px) {
  .hero { padding-block: 96px var(--s-8); }
  .section { padding-block: var(--s-9); }
  .nav { max-height: calc(100svh - 68px); }
}