/* Правки лендинга поверх собранного бандла — НАШ код, не вывод сборки.
 *
 * Исходников лендинга нет (см. docs/landing.md), а `assets/*.css` — чужая
 * сборка, которую руками не правят: любая правка там неотличима от вывода
 * сборки и потеряется, если лендинг однажды восстановят исходниками. Поэтому
 * наши правки живут отдельным файлом и подключаются в `index.html` после
 * бандла — так видно, что именно мы поменяли, и снимается это одной строкой.
 *
 * Файл отдаётся с `expires 30d` (location ^~ /landing/ в nginx.conf), поэтому
 * подключён с `?v=N`: после правки бампните версию в index.html, иначе месяц
 * будет жить старая копия в браузерах.
 */

/* ── Шапка на планшетах и телефонах ────────────────────────────────────────
 * В бандле правый край строки держит не `.nav__cta`, а `margin-left: auto` у
 * `.nav__links` — и на ≤960px ссылки скрыты вместе с этим прижатием. Отсюда две
 * поломки: на 561–960px кнопка «Начать бесплатно» липнет к логотипу и справа
 * зияет пустая плашка, а на телефоне она вдобавок остаётся единственным гибким
 * элементом строки и сжимается — на 360px подпись ломается на две строки, на
 * ≤334px кнопка вылезает за скруглённую плашку.
 */
@media (max-width: 960px) {
  .nav__cta {
    margin-left: auto;
  }
}

/* Телефоны: места в обрез, поэтому ужимаем отступы и запрещаем перенос подписи
   — кнопка целиком важнее свободного места в строке. */
@media (max-width: 560px) {
  .nav {
    padding: 0 12px;
  }

  .nav__bar {
    gap: 10px;
    padding: 0 10px 0 18px;
  }

  .logo {
    white-space: nowrap;
  }

  .nav__cta {
    flex: none;
  }

  .nav__cta .btn {
    white-space: nowrap;
  }

  .nav__cta .btn--primary {
    padding: 9px 14px;
    font-size: 0.82rem;
  }
}

/* Ниже ~334px даже так не помещается (логотип 124px + кнопка 148px + отступы),
   поэтому на узких экранах — 320px и старые Android — ужимаем ещё раз. */
@media (max-width: 350px) {
  .nav__bar {
    gap: 8px;
    padding: 0 8px 0 14px;
  }

  .logo {
    font-size: 1.05rem;
  }

  .nav__cta .btn--primary {
    padding: 9px 12px;
    font-size: 0.78rem;
  }
}

/* ── Колонки футера на телефоне ────────────────────────────────────────────
 * Сетка `.footer__cols` в бандле жёстко трёхколоночная и на телефоне тоже: на
 * 375px колонке достаётся ~93px. Подписи бандла это переживали впритык
 * («help@pronstor.ai» упирался в край), а ссылки на документы (`footer-links.js`)
 * подписаны их заголовками, и «конфиденциальности» (~143px) не переносится —
 * колонка растягивается и выталкивает соседнюю за экран. Колонок делаем столько,
 * сколько помещается по ширине самого длинного слова: на 375–560px две, на
 * совсем узких — одна. Выше 560px места хватает и бандлу.
 */
@media (max-width: 560px) {
  .footer__cols {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
}

/* ── Кодовое слово кассы в нижней строке футера ────────────────────────────
 * ВРЕМЕННО, на время согласования с Платегой: `footer-links.js` ставит слово
 * вторым span после копирайта в `.footer__bottom`; цвет и кегль наследуются от
 * правила бандла `.footer__bottom span`, здесь только отступ от копирайта.
 * Уйдёт вместе с константой CODEWORD в скрипте.
 */
.footer__codeword {
  margin-left: 16px;
}

/* ── Портреты в финальном CTA ──────────────────────────────────────────────
 * Карточка «Она уже придумала…» в бандле — это заголовок, подпись, кнопка и
 * сноска, и больше ничего: 1072×339 с 72px отступов, из которых текст занимает
 * меньше двух третей по высоте. Со стороны блок читается не как «воздушный
 * баннер», а как недогруженный — будто картинка не приехала.
 *
 * Разметку добавить нечем (исходников лендинга нет, см. docs/landing.md), но
 * фон псевдоэлементам можно дать и отсюда: два портрета встают по краям
 * карточки и растушёвываются к центру, текст остаётся посередине и ужимается
 * боковыми отступами. У карточки уже есть `position:relative` и
 * `overflow:hidden` — портреты сами обрезаются по скруглению.
 *
 * Слева — `cta-portrait.webp`, НАША копия `img/hero.png`: тот в бандле не
 * используется вообще (остался от шапки, которую заменили видео) и весит 1.4 МБ
 * PNG против 38 КБ webp — тащить в CTA гигабайтный неиспользуемый файл только
 * ради фона незачем. Справа — `img/char-yuki.png` из сборки: её уже загрузила
 * секция «Персонажи», поэтому второй портрет странице не стоит ничего.
 */
.finalcta__card {
  padding: 64px 300px;
}

.finalcta__card::before,
.finalcta__card::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 300px;
  /* Абсолютный псевдоэлемент рисуется поверх строк текста (позиционированные
     потомки идут выше потока), поэтому портреты уводим под него явно. */
  z-index: 0;
  pointer-events: none;
}

.finalcta__card::before {
  left: 0;
  background: url("/landing/cta-portrait.webp") 50% 6% / cover no-repeat;
  -webkit-mask-image: linear-gradient(to left, transparent 0%, #000 65%);
  mask-image: linear-gradient(to left, transparent 0%, #000 65%);
}

.finalcta__card::after {
  right: 0;
  background: url("/landing/img/char-yuki.png") 50% 6% / cover no-repeat;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 65%);
  mask-image: linear-gradient(to right, transparent 0%, #000 65%);
}

/* Обратная сторона `z-index: 0` выше: текст поднимаем в свой слой, иначе он
   уедет под портреты. */
.finalcta__card > * {
  position: relative;
  z-index: 1;
}

/* Ниже 1120px карточка перестаёт быть шириной с контейнер и ужимается вместе с
   окном: при прежних 300px на портрет тексту остаётся меньше 400px и заголовок
   рассыпается на четыре строки. Портреты сужаем вместе с ним. */
@media (max-width: 1119px) {
  .finalcta__card {
    padding: 64px 210px;
  }

  .finalcta__card::before,
  .finalcta__card::after {
    width: 210px;
  }
}

/* На 960px бандл везде переходит в одну колонку, и по бокам портретам с текстом
   уже не разойтись: карточке остаётся меньше 700px. Тот же приём разворачиваем
   на 90° — портреты встают парой над текстом.
 *
 * Здесь псевдоэлемент равен самому кадру (161×240 — те же 848/1264, то есть
 * `cover` ничего не режет), а не полосе во всю карточку: полосой портреты
 * разъезжаются по углам с провалом посередине. Гасить теперь надо три стороны,
 * а не одну, поэтому маска — пересечение двух градиентов (`mask-composite`):
 * первый убирает низ, второй — боковые срезы кадра. Где пересечения нет, слои
 * складываются и кадр остаётся прямоугольным — то есть ровно как было. */
@media (max-width: 960px) {
  .finalcta__card {
    padding: 276px 32px 64px;
  }

  .finalcta__card::before,
  .finalcta__card::after {
    top: 0;
    bottom: auto;
    left: 50%;
    right: auto;
    width: 161px;
    height: 240px;
    background-position: 50% 4%;
    -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 100%),
      linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to bottom, #000 58%, transparent 100%),
      linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%);
    mask-composite: intersect;
  }

  .finalcta__card::before {
    margin-left: -163px;
  }

  .finalcta__card::after {
    margin-left: 2px;
  }
}

/* Телефон: пара в 322px не встаёт в карточку 342px впритык к её отступам —
   кадры ужимаем, сохраняя пропорцию (134×200). */
@media (max-width: 560px) {
  .finalcta__card {
    padding: 232px 24px 56px;
  }

  .finalcta__card::before,
  .finalcta__card::after {
    width: 134px;
    height: 200px;
  }

  .finalcta__card::before {
    margin-left: -136px;
  }
}

/* ── Сетка тарифов под их настоящее количество ─────────────────────────────
 * Тарифы на главной приходят из админки (`plans.js`), а сетка бандла жёстко
 * трёхколоночная: четвёртый тариф уезжал бы на вторую строку в треть ширины.
 * Число колонок ставит скрипт в `--plan-cols` (не больше четырёх), он же метит
 * сетку `data-plans` — правила ниже действуют только на перерисованный блок, и
 * если тарифы не пришли, вёрстка бандла остаётся нетронутой.
 *
 * Специфичность у селекторов с атрибутом выше, чем у `.pricing__grid` бандла,
 * поэтому его брейкпоинты приходится повторять здесь — иначе на телефоне
 * осталась бы многоколоночная сетка.
 */
.pricing__grid[data-plans] {
  grid-template-columns: repeat(var(--plan-cols, 3), minmax(0, 1fr));
}

/* Один-два тарифа: колонка на всю ширину растягивает карточку до нечитаемого
   баннера в 1072px. Ширину ограничиваем так же, как бандл делает это на
   телефоне, — блок остаётся карточками, а не полосами. */
.pricing__grid[data-plans='1'] {
  max-width: 380px;
  margin-left: auto;
  margin-right: auto;
}

.pricing__grid[data-plans='2'] {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

/* Четыре колонки в макете 1120px оставляют карточке ~250px: зазор и поля
   ужимаем, цену — на ступеньку, иначе «1 990 ₽» встаёт враспор. */
.pricing__grid[data-plans='4'] {
  gap: 14px;
}

.pricing__grid[data-plans='4'] .plan {
  padding: 28px 20px;
}

.pricing__grid[data-plans='4'] .plan__price b {
  font-size: 1.9rem;
}

/* Планшет: вчетвером в ряд уже не читается — два ряда по два. */
@media (max-width: 1080px) {
  .pricing__grid[data-plans='4'] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Телефон: одна колонка — правило бандла, повторённое под нашу специфичность.
   Идёт после планшетного блока намеренно: селекторы равной силы, и на 900px
   должен побеждать этот. */
@media (max-width: 960px) {
  .pricing__grid[data-plans] {
    grid-template-columns: 1fr;
    max-width: 440px;
    margin-left: auto;
    margin-right: auto;
  }
}