/* =====================================================================
   ОКСИТЕЛЬ — responsive-polish.css
   Точечные фиксы адаптива/анимаций. Подключается на /, /kokteyl/, /salt/,
   /vozduh/ (НЕ на /pay/). Аддитивный слой поверх style.css (его НЕ меняем).
   Тексты не меняет. Без внешних библиотек/шрифтов. Уважает reduced-motion.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Общий паттерн карточек .feature на планшете/мобиле:
      иконка сверху, заголовок и текст под ней, без вылезания текста.
      Десктоп (>1024px) не трогаем — там горизонтальный вид сохраняется.
   --------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .feature {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
  /* иконка сверху, ровный отступ снизу (перебиваем center у trust-card) */
  .feature > .icon-badge,
  .feature > .feature__icon {
    margin: 0 0 12px 0;
  }
  /* текстовый блок занимает всю ширину и переносит длинные слова */
  .feature > div {
    min-width: 0;
    width: 100%;
  }
  .feature__title,
  .feature__text {
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word;
  }
  /* чтобы карточки в grid-4 не были слишком узкими — две колонки */
  .upg-home .grid-4,
  .upg-kokteyl .grid-4,
  .salt .grid-4,
  .vznew .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* На узком мобиле .feature остаётся вертикальной (грид и так в 1 колонку) */
@media (max-width: 560px) {
  .feature { padding: var(--sp-4); }
}

/* ---------------------------------------------------------------------
   1b. Декоративные элементы (мягкие brush/sun/airflow с выносом за край)
       не должны расширять документ по горизонтали — обрезаем по краю
       секции/hero (как уже сделано на /salt/). overflow-x:clip не создаёт
       скролл-контейнер и не трогает вертикаль; визуально ничего не меняет
       (за вьюпортом декор и так скрыт body{overflow-x:hidden}).
   --------------------------------------------------------------------- */
.upg-home .hero,    .upg-home .section,
.upg-kokteyl .hero, .upg-kokteyl .section,
.vznew .vznew-hero, .vznew .section { overflow-x: clip; }

/* ---------------------------------------------------------------------
   2. /salt/ — один аккуратный мягкий коннектор между шагами вместо
      пунктира поверх градиента и без дёрганой анимации.
      (Градиентный sm-route больше не вставляется JS-ом; оставшийся
      steps__track делаем мягкой статичной линией.)
   --------------------------------------------------------------------- */
.salt .steps__track {
  background: linear-gradient(90deg, rgba(52, 182, 230, .30), rgba(124, 194, 67, .30)) !important;
  animation: none !important;
  opacity: .5;
}

/* ---------------------------------------------------------------------
   3. /vozduh/ «Почему это важно» (.kk-scheme): убрать пунктирную линию
      под стрелками — остаётся один чистый коннектор (стрелки).
   --------------------------------------------------------------------- */
.vznew .kk-scheme__arrow::before {
  display: none !important;
}

/* ---------------------------------------------------------------------
   4. /vozduh/ hero на мобиле: динамичные элементы не должны мешать
      читать текст. Приглушаем потоки, прячем плавающие bubbles, текст
      поднимаем по z-index.
   --------------------------------------------------------------------- */
@media (max-width: 760px) {
  .vznew .vznew-hero .vz-airflow { opacity: .18; }
  .vznew .vznew-hero > .bubble { display: none; }
  .vznew .vznew-hero .hero__content { position: relative; z-index: 3; }
}

/* ---------------------------------------------------------------------
   5. prefers-reduced-motion — на всякий случай гасим переходы линий.
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .salt .steps__track { animation: none !important; }
}