/* Посадочная «Программа лояльности «под ключ»» (макет Димы, Figma 2249:277:
   десктоп 1600 + мобилка 440). Каркас — crm-launch.css (заголовки, карточки,
   кнопки, кейсы, шаги, FAQ, модалка) и ops.css (проблемы «2 + 3», CTA-плашка,
   темный блок, карточки с текстурой, баннер). Здесь только свое: картинки,
   кадр подложки под карточки 450px, шаги в ряд, руки в баннере и отступы
   этого макета: между блоками 160, после шагов до баннера 120.

   Правила, которые переопределяют ops.css, продублированы в его
   брейкпоинтах: специфичность одна, и без этого правило отсюда перебивало
   бы мобильные значения ops.css. */

/* ==================== ХИРО ==================== */

/* «Увеличим повторные покупки» в макете 1007px; шрифт на сайте чуть шире
   фигмовского, поэтому запас, как на «Аудите». */
.loyal-hero__title {
  max-width: 1100px;
}

/* Подзаголовок в макете 788px в две строки; с длинным тире и шрифтом сайта
   в 800 из crm-launch.css первая строка не помещалась. */
.loyal-hero__sub {
  max-width: 900px;
}

/* Экспорт из Figma: монеты (2257:1052) поверх ромбовидного паттерна
   (2249:550), кадр 680×400 — паттерн растворяется к краям, большая монета
   начинается в 27px от верха кадра. */
.loyal-hero__pic {
  display: block;
  max-width: 100%;
}

.loyal-hero__img {
  display: block;
  width: 680px;
  max-width: 100%;
  height: auto;
  margin-top: 32px;
}

/* ==================== КОГДА НУЖНА ПРОГРАММА ==================== */

/* Под монетами в кадре еще ~110px паттерна — от монет до заголовка ~160. */
.loyal-problems {
  padding-top: 50px;
}

/* Плашка 1400×195: текст 50 от левого края, кнопка 410 в 60 от правого.
   Заголовок в макете 782px — шире колонки 751 из crm-launch.css. */
.loyal-cta {
  padding: 37px 60px 37px 50px;
}

.loyal-cta .crm-cta__text {
  flex: 1;
  max-width: none;
}

.loyal-cta .crm-cta__title {
  color: #fff;
}

/* ==================== ЧТО ПРОДУМАЕМ И НАСТРОИМ ==================== */

.loyal-think__grid {
  grid-template-columns: repeat(3, 1fr);
}

/* Подложка из макета под карточку 450: кадр 451×574, сдвинутый на 193
   вверх, текстура отражена по горизонтали, градиент в режиме color. */
.loyal-think .ops-month__bg {
  top: -192.95px;
  width: 451px;
  height: 574.307px;
}

.loyal-think .ops-month__bg img {
  left: .25px;
  top: -189.47px;
  width: 733.629px;
  height: 990.399px;
  transform: scaleX(-1);
}

.loyal-think .ops-month__bg::after {
  left: -907.34px;
  top: -1054.11px;
  width: 2137.58px;
  height: 2770.047px;
}

/* ==================== КАК ПРОХОДИТ ЗАПУСК ==================== */

/* Снизу без паддинга: от шагов до баннера отбивает сам баннер. */
.loyal-steps {
  padding-bottom: 0;
}

.loyal-steps__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.loyal-steps__sub {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.35;
  color: #000;
}

.loyal-steps__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: var(--crm-head-gap);
}

.loyal-steps .crm-step__body {
  gap: 8px;
}

.loyal-steps .crm-step__title {
  font-size: 20px;
}

/* ==================== БАННЕР ==================== */

.loyal-banner {
  padding-top: calc(var(--crm-sec-pad) + 40px);
}

/* Карточка 1400×328: заголовок на три строки (переносы в разметке),
   кнопка в 198 от верха. */
.loyal-banner .ops-banner__card {
  min-height: 328px;
}

.loyal-banner .ops-banner__body {
  gap: 31px;
}

/* Руки 472×456: в 32px от верха карточки и в 162 от правого края, свисают
   ниже карточки на 160 — ровно до заголовка FAQ. Ширина задается одной
   переменной, от нее же считается размытие свечения. */
.loyal-banner__art {
  --art-w: 472.49px;
  position: absolute;
  top: 32px;
  right: 162px;
  width: var(--art-w);
  aspect-ratio: 472.49 / 455.895;
  pointer-events: none;
}

.loyal-banner__art img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
}

/* Эллипс 252×228 #FA9114 на 10%, размытие 44.29 при ширине 472. */
.loyal-banner__glow {
  position: absolute;
  z-index: 1;
  left: 29.12%;
  top: 20.5%;
  width: 53.41%;
  height: 50.11%;
  border-radius: 50%;
  background: rgba(250, 145, 20, .1);
  filter: blur(calc(var(--art-w) * .09374));
  mix-blend-mode: plus-lighter;
}

/* ==================== АДАПТИВ ==================== */

@media (max-width: 1400px) {
  .loyal-banner__art {
    --art-w: 420px;
    right: 40px;
  }
}

@media (max-width: 1100px) {
  .loyal-steps__list {
    grid-template-columns: repeat(2, 1fr);
  }

  .loyal-banner__art {
    --art-w: 340px;
    right: 24px;
    top: 40px;
  }
}

/* Руки встают над карточкой, как в мобильном макете: заходят на нее
   на 47% своей высоты, текст начинается сразу под ними. */
@media (max-width: 860px) {
  .loyal-banner {
    padding-top: calc(var(--crm-sec-pad) + 155px);
  }

  .loyal-banner .ops-banner__body {
    gap: 24px;
    padding-top: 150px;
  }

  .loyal-cta {
    padding: 30px 24px;
  }

  .loyal-banner__art {
    --art-w: 300px;
    top: -155px;
    right: 50%;
    transform: translateX(50%);
  }
}

@media (max-width: 640px) {

  /* В мобильном макете заголовок шире колонки — 436 из 440, и шрифт сайта
     шире фигмовского: в 36px «программы лояльности» не влезает в строку. */
  .loyal-hero__title {
    margin-inline: -20px;
    font-size: 34px;
  }

  /* Мобильная картинка во всю ширину экрана, монеты в 32px от верха кадра. */
  .loyal-hero__pic {
    max-width: none;
    width: calc(100% + var(--gutter) * 2);
    margin-inline: calc(var(--gutter) * -1);
  }

  .loyal-hero__img {
    width: 100%;
    margin-top: 8px;
  }

  .loyal-problems {
    padding-top: 30px;
  }

  /* Мобильный макет: от карточек до плашки 40, внутри плашки 24. */
  .loyal-cta {
    margin-top: 40px;
    gap: 24px;
  }

  /* Мобильный макет: карточки 190×228 в две колонки, подложка как у первой
     карточки «Развития» (кадр 338×430). */
  .loyal-think__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .loyal-think .ops-month__bg {
    top: -121px;
    width: 338px;
    height: 430.412px;
  }

  .loyal-think .ops-month__bg img {
    left: 0;
    top: -142px;
    width: 550px;
    height: 742px;
  }

  .loyal-think .ops-month__bg::after {
    left: -680px;
    top: -790px;
    width: 1602px;
    height: 2076px;
  }

  .loyal-steps__head {
    gap: 10px;
  }

  .loyal-steps__sub {
    font-size: 14px;
  }

  .loyal-steps__list {
    grid-template-columns: 1fr;
  }

  /* Руки 253×244 по центру, вылезают над карточкой на 130px; от шагов
     до рук 100. */
  .loyal-banner {
    padding-top: 230px;
  }

  .loyal-banner .ops-banner__body {
    padding: 129px 24px 30px;
  }

  .loyal-banner__art {
    --art-w: 252.77px;
    top: -130px;
  }
}