/* Точки-переключатели нужны только там, где карусель, — на телефоне.
   Правила их вида лежат в мобильных блоках ниже, а без этой строки на
   ПК они оставались display:block и торчали тремя квадратиками
   (владелец 29.08). */
.ns-how__pager, .ease-pager { display: none; }

/* ── Вторая тестовая сборка. Подключается ТОЛЬКО на /test2 ────────────
   Основной сайт и /test этот файл не грузят. */

/* Подзаголовок под крупной строкой первого экрана — чтобы место под
   заголовком не пустовало. Разметку добавляет NovaHero.jsx под флагом
   VITE_NOVA_T2, здесь только вид. */
.nova__sub {
  /* Крупная строка заканчивается отрицательным отступом (-16px у
     .nova__line), поэтому «на глаз» между ней и подзаголовком остаётся
     меньше, чем написано. Берём с запасом (владелец 29.08). */
  margin: 40px 0 0;
  max-width: 560px;
  font-size: 17px;
  line-height: 26px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.86);
}

/* ── только ПК ─────────────────────────────────────────────────────── */
@media (min-width: 761px) {
  /* Рукописная стрелка снова на месте, но ниже: под ней теперь не только
     заголовок, но и подзаголовок, а показывать она должна на опущенный
     поиск. Смещаем её вниз трансформом — инлайновые left/top ставит
     система подгонки перетаскиванием (владелец 29.08). */
  .nova__arrow-wrap { transform: translate(-18px, 162px) !important; }

  /* Заголовок и подзаголовок сдвинуты чуть влево (владелец 29.08).
     Двигаем отступом, а не transform: у строк заголовка свои инлайновые
     трансформы от системы подгонки перетаскиванием — они бы перебили. */
  .nova__title,
  .nova__sub { margin-left: -18px; }

  /* точка отсчёта для абсолютной строки про путешественников */
  .nova__wrap { position: relative; }
  .nova__copy { position: static !important; }

  /* Строка поиска — во всю ширину первого экрана. Из потока НЕ вынимаем
     (абсолют цеплялся то за колонку, то за герой и уезжал на заголовок):
     оставляем на месте, но задаём ширину контейнера — она просто вылезает
     из своей 664-пиксельной колонки вправо, под карусель. Инлайновые
     left/top от системы подгонки перетаскиванием перебиваем. */
  .nova__search-wrap {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    width: min(1208px, calc(100vw - 32px));
    max-width: none;
    margin-top: 136px;
  }

  /* Здания поднимаем, чтобы их вершины встали примерно на уровень начала
     заголовка и чтобы они не пересекались с растянутой строкой поиска. */
  /* -58, а не -44: сетка центрирует колонку по вертикали, и опущенный
     поиск сделал левую колонку выше — карусель от этого сама поехала вниз.
     Компенсируем разницу здесь. */
  .nova__stage-inner { transform: translateY(-58px); }

  /* Подпись страны и точки остаются на своём месте под зданиями — их
     поднимать нельзя, они налезали на карусель. Освобождает место для них
     опущенный поиск ниже (владелец 29.08). */

  /* Колонка с текстом и карусель разъезжаются в стороны: вплотную блок
     выглядел скомканным. */
  /* Ширину левой колонки НЕ трогаем: 664px подобраны под то, чтобы
     «Вы только приземлились?» легло ровно в две строки — на 620px оно
     распадалось на три и весь экран уезжал вниз. Разводим только зазором. */
  .nova__grid { gap: 60px; }

  /* Строка про путешественников — по центру под поиском. В обычной
     раскладке она абсолютом прижата к левой колонке, но поиск теперь во
     всю ширину, и подпись висела сбоку от него (владелец 29.08). */
  .nova__facts {
    /* Оставляем абсолютом, но считаем от .nova__wrap, а не от левой
       колонки: тогда строка ложится по центру всего экрана, ровно под
       растянутым поиском. В потоке она вылезала за нижнюю кромку героя. */
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: 25px;
    width: auto !important;
    max-width: none !important;
    justify-content: center;
  }
}

/* ── только телефон ────────────────────────────────────────────────── */
@media (max-width: 620px) {
  /* На телефоне первый экран разложен через order, и подзаголовок без своего
     значения уезжал ВЫШЕ заголовка. Ставим тот же order, что у заголовка —
     внутри одного значения порядок берётся из разметки, а там подзаголовок
     идёт следом. */
  .nova__sub {
    order: 1;
    margin: 18px 0 0;
    text-align: center;
    font-size: 15px;
    line-height: 22px;
  }

  /* Название проекта в шапке чуть крупнее: на 17px оно сливалось с
     остальным мелким текстом. Логотип не трогаем — его высота задана в
     пикселях (.nova__logo { height: 32px }) и от кегля не зависит. */
  .nova__brand { font-size: 18.5px; }
}

@media (min-width: 761px) {
  /* Меню шапки по центру, а не у правого края. Центрируем абсолютом от
     .nova__bar-in: тогда положение не зависит от ширины логотипа слева и
     кнопок справа, и меню стоит ровно посередине (владелец 29.08). */
  .nova__bar-in { position: relative; }
  .nova__nav {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin-left: 0;
  }
  /* Раньше вправо всё толкал margin-left: auto у самого меню. Меню ушло из
     потока — значит толкать теперь должен блок с переключателями, иначе он
     прилипает к логотипу (владелец 29.08). */
  .nova__auth { margin-left: auto; }

  /* При прокрутке в плавающей панели должны остаться только лупа и
     «Перейти в бота» — переключатель языка оттуда убираем. */
  .nova__actions .nova__pick--float { display: none !important; }
}

/* ── «Как это работает» каруселью, только телефон ─────────────────── */
@media (max-width: 620px) {
  /* Соседние карточки торчат за края экрана — это задумка, но без подрезки
     они растягивали страницу до 583px при экране 390. Режем по секции:
     overflow: clip не создаёт полосу прокрутки. */
  .ns-sec--how {
    overflow-x: hidden;
    overflow-x: clip;
  }

  /* Карусель собрана СЕТКОЙ, все три карточки лежат в одной ячейке.
     Так строка сама принимает высоту самой высокой карточки, а не прыгает
     вслед за активной: измерено 302 / 340 / 335 px — секция дёргалась при
     каждом переключении, отсюда и «первая карточка меньше», и рывок.
     Заодно ушла смена position с absolute на relative, то есть на
     переключении больше нет пересчёта вёрстки — двигаются только transform
     и opacity (владелец 29.08). */
  .ns-how--carousel {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    overflow: visible !important;
    scroll-snap-type: none !important;
    padding-inline: 0 !important;
    margin-inline: 0 !important;
    touch-action: pan-y;
  }
  .ns-how--carousel .ns-how__item {
    grid-row: 1;
    grid-column: 1;
    width: 84% !important;
    justify-self: center;
    flex: none !important;
    scroll-snap-align: none !important;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.35s ease;
    will-change: transform, opacity;
  }
  .ns-how--carousel .ns-how__item--active {
    z-index: 2;
    opacity: 1;
    transform: none;
    /* Прозрачность у активной НЕ анимируем: пока она плавно набирала
       непрозрачность, соседняя карточка просвечивала сквозь неё во время
       переезда (владелец 29.08). Едет только transform. */
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .ns-how--carousel .ns-how__item--next,
  .ns-how--carousel .ns-how__item--prev {
    z-index: 1;
    /* было 0.16 — по такой бледной карточке не понять, что её можно
       переключить (владелец 29.08) */
    opacity: 0.4;
    cursor: pointer;
  }
  /* ±100%, а не ±52%. При 52% соседняя карточка сдвигалась лишь на пол-своей
     ширины и большей частью пряталась ЗА активной: слева выглядывал её ЛЕВЫЙ
     край вместо правого, справа — правый вместо левого (владелец 29.08).
     Сдвиг на всю ширину ставит соседей вплотную сбоку: слева видно правую
     кромку предыдущей карточки, справа — левую кромку следующей, как и
     положено карусели. */
  .ns-how--carousel .ns-how__item--next { transform: translateX(100%) scale(0.94); }
  .ns-how--carousel .ns-how__item--prev { transform: translateX(-100%) scale(0.94); }

  /* Внутренности карточки выравниваем по ширине. Карточка — flex-колонка с
     align-items: center, поэтому дети не растягиваются, а ужимаются до своего
     содержимого: заголовок первой карточки занимал 232px против 248 и 241 у
     соседних, а иллюстрация во всех трёх упиралась в max-width: 220px и не
     доходила до краёв. Плита при этом почти сливается с фоном, так что глаз
     мерит карточку по содержимому — первая и казалась уже (владелец 29.08,
     разбор фоновыми агентами). */
  .ns-how--carousel .ns-how__title,
  .ns-how--carousel .ns-how__txt {
    width: 100%;
    max-width: none;
  }
  .ns-how--carousel .ns-how__pic { max-width: 100%; }

  /* точки под каруселью — как у карусели направлений, только тёмные */
  .ns-how__pager { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 20px; }
  .ns-how__dot {
    width: 7px; height: 7px; padding: 0; border: 0; border-radius: 999px;
    background: rgba(39, 41, 48, 0.22); cursor: pointer;
    transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1), background 0.25s ease;
  }
  .ns-how__dot--on { width: 26px; background: var(--blue); }

  /* номера шагов — фирменным синим */
  .ns-how--carousel .ns-how__num { color: var(--blue); }
}

/* ── тени вместо пустых белых плит ────────────────────────────────────
   Приём снят с novaesim.app: карточки там тоже белые на белом, но не
   выглядят пустыми — их отделяют мягкая тень, тонкая рамка и внутренний
   светлый кант сверху (.ease-card в landing.css). Переносим на наши
   карточки шагов и «Мгновенного подключения» (владелец 29.08). */
.ns-how__item,
.ns-stack__card {
  background: #fff;
  border: 1px solid rgba(13, 24, 72, 0.10);
  box-shadow: 0 10px 30px rgba(13, 24, 72, 0.07),
              inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
@media (hover: hover) {
  .ns-how__item:hover,
  .ns-stack__card:hover {
    box-shadow: 0 20px 44px rgba(13, 24, 72, 0.13);
    border-color: rgba(13, 24, 72, 0.14);
  }
}

/* ── «Лёгкость» на телефоне — той же каруселью, что «Как это работает» ──
   Сетка в одну ячейку, активная по центру, соседние выглядывают по краям
   приглушёнными, список закольцован (владелец 29.08). */
@media (max-width: 620px) {
  .ease-section { overflow-x: hidden; overflow-x: clip; }
  .ease-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    max-width: none !important;
    touch-action: pan-y;
  }
  .ease-grid .ease-card {
    grid-row: 1;
    grid-column: 1;
    width: 84%;
    justify-self: center;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
    will-change: transform, opacity;
  }
  /* Селекторы через .ease-grid — иначе правило ниже по специфичности, чем
     общее .ease-grid .ease-card, и прозрачность всё равно анимировалась:
     в момент переезда активная была на 0.56, предыдущая на 0.84, и сквозь
     полупрозрачную карточку просвечивала соседняя вместе со своей
     анимацией (владелец 29.08). */
  .ease-grid .ease-card--active {
    z-index: 2;
    opacity: 1;
    transform: none;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .ease-grid .ease-card--next,
  .ease-grid .ease-card--prev { z-index: 1; opacity: 0.4; cursor: pointer; }
  .ease-grid .ease-card--next { transform: translateX(100%) scale(0.94); }
  .ease-grid .ease-card--prev { transform: translateX(-100%) scale(0.94); }

  .ease-pager { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 20px; }
}