/* Посадочная «Аудит интеграций и рассылок» (макет Димы, Figma 2142:1223:
   десктоп 1600 + мобилка 440). Каркас — crm-launch.css (заголовки, карточки,
   кнопки, кейсы, процесс, FAQ, модалка) и ops.css (проблемы, темный блок,
   CTA, баннер). Здесь только свое: хиро-картинка, «Что вы получите»
   с мокапами, воронка в баннере и отступы этого макета.

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

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

/* В макете строка «Проведем аудит CRM-коммуникаций —» занимает 1007px;
   шрифт на сайте чуть шире фигмовского, поэтому запас. */
.audit-hero__title {
  max-width: 1100px;
}

/* Экспорт из Figma: чек-лист с лупой (2229:916) поверх ромбовидного
   паттерна (2142:1297), кадр 640×440 по центру страницы — паттерн
   растворяется к краям, сам документ начинается в 12px от верха кадра. */
.audit-hero__img {
  width: 640px;
  max-width: 100%;
  height: auto;
  margin-top: 24px;
}

/* ==================== КОГДА НЕОБХОДИМ АУДИТ ==================== */

/* От низа документа до заголовка — те же ~160, что в макете от кнопки. */
.audit-problems {
  padding: 136px 0 160px;
}

/* Две карточки по 692 в первом ряду и три по 456 во втором — наоборот,
   чем на «Развитии», и карточки белые. */
.audit-problems__grid> :nth-child(-n+2) {
  grid-column: span 3;
}

.audit-problems__grid> :nth-child(n+3) {
  grid-column: span 2;
}

.audit .ops-problem {
  background: #fff;
}

/* ==================== КЕЙСЫ ==================== */

.audit-results__sub {
  margin-top: 16px;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.35;
  text-align: center;
  color: #fff;
}

/* В макете заголовок плашки шире колонки 751 из crm-launch.css — на сайте
   шрифт еще шире, и без этого он переносится на вторую строку. */
.audit-cta .crm-cta__text {
  flex: 1;
  max-width: none;
}

/* ==================== ЧТО ПРОВЕРЯЕМ ==================== */

.audit-check {
  padding: 212px 0 85px;
}

.audit-step .crm-step__body {
  gap: 8px;
}

.audit-step .crm-step__title {
  font-size: 20px;
}

/* ==================== ЧТО ВЫ ПОЛУЧИТЕ ==================== */

.audit-get {
  padding: 85px 0 0;
}

/* Слева большая карточка 530×519, справа сетка 2×2 из карточек 411×247.
   В DOM порядок мобильного макета, на десктопе карточки расставлены явно. */
.audit-get__grid {
  display: grid;
  grid-template-columns: 530fr 411fr 411fr;
  grid-template-rows: 247px 247px;
  gap: 24px;
  margin-top: var(--crm-head-gap);
}

.audit-get__card--report {
  grid-area: 1 / 1 / 3 / 2;
}

.audit-get__card--matrix {
  grid-area: 1 / 2;
}

.audit-get__card--plan {
  grid-area: 1 / 3;
}

.audit-get__card--fixes {
  grid-area: 2 / 2;
}

.audit-get__card--growth {
  grid-area: 2 / 3;
}

/* clip-path делает карточку границей для backdrop-filter стекла внутри:
   без нее размытие у нижнего края захватывает светлый фон страницы
   за карточкой и рисует светлую полосу. */
.audit-get__card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-radius: var(--crm-radius);
  overflow: hidden;
  clip-path: inset(0 round var(--crm-radius));
  background: #000;
}

/* Подложка как в макете: черный кадр, текстура на 84% (отражена по
   горизонтали) и оранжевый градиент в режиме color. */
.audit-get__bg {
  position: absolute;
  left: 0;
  top: -121px;
  width: 411px;
  height: 430px;
  overflow: hidden;
  isolation: isolate;
  background: #000;
}

.audit-get__bg img {
  position: absolute;
  left: 0;
  top: 98px;
  width: 550px;
  height: 742px;
  max-width: none;
  object-fit: cover;
  opacity: .84;
  transform: scaleX(-1);
}

.audit-get__bg::after {
  content: "";
  position: absolute;
  left: -680px;
  top: -947px;
  width: 1602px;
  height: 2076px;
  background: var(--crm-gradient);
  mix-blend-mode: color;
}

.audit-get__card--report .audit-get__bg {
  top: 0;
  width: 530px;
  height: 540px;
}

.audit-get__card--report .audit-get__bg img {
  left: -98px;
  top: -320px;
  width: 747px;
  height: 1008px;
}

.audit-get__card--report .audit-get__bg::after {
  top: -962px;
}

.audit-get__title {
  position: relative;
  padding: 24px 24px 0;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.15;
  color: #fff;
}

/* «Список быстрых исправлений» на сайте шире колонки на доли пикселя
   (шрифт шире фигмовского) и падал на вторую строку. */
.audit-get__card--fixes .audit-get__title {
  white-space: nowrap;
}

/* ---------- Мокапы ---------- */

/* Внутренний слой держит координаты макета в px; на мобилке он
   масштабируется (--k — масштаб из мобильного макета, --fit — подгонка
   под ширину карточки из audit.js). */
.audit-mock {
  --k: 1;
  --fit: 1;
  --tx: 0px;
  --ty: 0px;
  --h: 171px;
  position: relative;
  flex: none;
  height: calc(var(--h) * var(--fit));
  margin-top: 24px;
  overflow: hidden;
}

.audit-get__card--report .audit-mock {
  --h: 415px;
}

.audit-mock__in {
  position: absolute;
  left: 0;
  top: 0;
  width: 411px;
  height: 171px;
  transform-origin: 0 0;
  transform: scale(var(--fit)) translate(var(--tx), var(--ty)) scale(var(--k));
}

.audit-get__card--report .audit-mock__in {
  width: 530px;
  height: 415px;
}

.audit-mock__panel {
  position: absolute;
  width: 354px;
  height: 448px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 24px;
  background: rgba(16, 8, 0, .24);
  -webkit-backdrop-filter: blur(5.575px);
  backdrop-filter: blur(5.575px);
}

.audit-mock__shade {
  position: absolute;
  background: rgba(5, 2, 0, .7);
  filter: blur(14.975px);
}

.audit-chip {
  position: absolute;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 24px;
  background: rgba(255, 255, 255, .06);
  -webkit-backdrop-filter: blur(2.3px);
  backdrop-filter: blur(2.3px);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.15;
  color: #fff;
}

.audit-chip--col {
  flex-direction: column;
}

/* Карточка «на подходе»: размыта целиком. Фоновое размытие под ней
   не делаем — под filter оно все равно не видно. Все blur здесь — половина
   значения из Figma: ее радиус размытия вдвое больше CSS-шного, в браузере
   с теми же числами мылит заметно сильнее (как и на «Развитии»). */
.audit-chip--fade {
  filter: blur(.8px);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.audit-chip__lead {
  font-weight: 500;
}

.audit-chip__note {
  font-size: 12px;
  opacity: .5;
}

.audit-tag,
.audit-num {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: 24px;
  line-height: 1.15;
  white-space: nowrap;
}

.audit-tag {
  font-size: 12px;
}

.audit-tag--red {
  background: rgba(255, 81, 81, .5);
}

.audit-tag--green {
  background: rgba(81, 255, 93, .5);
}

.audit-tag--blue {
  background: rgba(81, 162, 255, .5);
}

.audit-tag--hot {
  background: #CC5433;
}

.audit-tag--sand {
  background: #D7C184;
}

.audit-num {
  border: 1px solid rgba(255, 255, 255, .15);
}

.audit-chip--fade .audit-num {
  border-color: #7B511D;
}

/* Отчет: подложка-«лист» и три карточки проблема → решение → польза. */
.audit-get__card--report .audit-mock__panel {
  left: 88px;
  top: 24px;
}

.audit-get__card--report .audit-chip {
  left: 34px;
  width: 461px;
  padding: 24px;
}

.audit-get__card--report .audit-chip:nth-of-type(2) {
  top: 54px;
}

.audit-get__card--report .audit-chip:nth-of-type(3) {
  top: 192px;
}

.audit-get__card--report .audit-chip:nth-of-type(4) {
  top: 330px;
  filter: blur(.775px);
  opacity: .7;
}

.audit-get__card--report .audit-chip--fade p {
  line-height: 1.26;
}

/* Матрица: «важно» и размытое «второстепенно», правый край в тени. */
.audit-get__card--matrix .audit-chip {
  top: 16px;
  width: 199px;
  padding: 24px 16px;
}

.audit-get__card--matrix .audit-chip:nth-of-type(1) {
  left: 24px;
}

.audit-get__card--matrix .audit-chip:nth-of-type(2) {
  left: 239px;
  background: linear-gradient(123.41deg, rgba(255, 255, 255, .06) 14.956%, rgba(153, 153, 153, .06) 64.23%);
}

.audit-get__card--matrix .audit-mock__shade {
  left: 339px;
  top: 3px;
  width: 144px;
  height: 233px;
}

/* План: нумерованные строки, третья уходит в размытие. */
.audit-get__card--plan .audit-chip {
  left: 24px;
  width: 362px;
  padding: 16px;
}

.audit-get__card--plan .audit-chip p {
  flex: 1;
  min-width: 0;
}

.audit-get__card--plan .audit-chip:nth-of-type(1) {
  top: 0;
}

.audit-get__card--plan .audit-chip:nth-of-type(2) {
  top: 76px;
}

.audit-get__card--plan .audit-chip:nth-of-type(3) {
  top: 152px;
  padding: 16px 24px;
  opacity: .63;
}

/* Быстрые исправления: «лист» с чек-листом. */
.audit-get__card--fixes .audit-mock__panel {
  left: 29px;
  top: 0;
}

.audit-checks {
  position: absolute;
  left: 51px;
  top: 26px;
  width: 310.083px;
  display: flex;
  flex-direction: column;
  gap: 16.267px;
}

.audit-checks li {
  display: flex;
  align-items: flex-start;
  gap: 8.133px;
  font-size: 14.233px;
  line-height: 1.15;
  color: #fff;
}

.audit-checks li::before {
  content: "";
  flex: none;
  width: 24.4px;
  height: 24.4px;
  background: url(/assets/services/audit/icons/verify.svg) center/100% 100% no-repeat;
}

/* Точки роста: две карточки, вторая размыта, справа тень. */
.audit-get__card--growth .audit-chip {
  top: 0;
  width: 199px;
  padding: 16px;
}

.audit-get__card--growth .audit-chip:nth-of-type(1) {
  left: 24px;
}

.audit-get__card--growth .audit-chip:nth-of-type(2) {
  left: 239px;
}

.audit-get__card--growth .audit-mock__shade {
  left: 336px;
  top: -18px;
  width: 193px;
  height: 251px;
  filter: blur(12.85px);
}

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

/* Воронка 411×420 вылезает над карточкой на 60px. */
.audit-banner {
  padding-top: 182px;
}

.audit-banner .ops-banner__body {
  gap: 36px;
  max-width: 851px;
  padding: 56px 50px;
}

.audit-banner__img {
  width: 411px;
  top: -60px;
  right: 109px;
}

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

@media (max-width: 1400px) {
  .audit-banner .ops-banner__body {
    max-width: calc(100% - 400px);
  }

  .audit-banner__img {
    width: 360px;
    top: -50px;
    right: 40px;
  }
}

/* Справа уже не помещаются две колонки по 411 — отчет встает на всю
   ширину, мокапы центруются, подложка тянется за карточкой. */
@media (max-width: 1300px) {
  .audit-get__grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 519px 247px 247px;
  }

  .audit-get__card--report {
    grid-area: 1 / 1 / 2 / 3;
  }

  .audit-get__card--matrix {
    grid-area: 2 / 1;
  }

  .audit-get__card--plan {
    grid-area: 2 / 2;
  }

  .audit-get__card--fixes {
    grid-area: 3 / 1;
  }

  .audit-get__card--growth {
    grid-area: 3 / 2;
  }

  .audit-get__bg,
  .audit-get__card--report .audit-get__bg {
    width: 100%;
  }

  .audit-get__bg img {
    width: max(550px, 100%);
    height: auto;
    aspect-ratio: 550 / 742;
  }

  .audit-get__card--report .audit-get__bg img {
    left: 0;
    width: max(747px, 100%);
    aspect-ratio: 747 / 1008;
  }

  /* Оранжевый слой в режиме color должен накрывать всю растянутую
     подложку, иначе справа проступает исходная голубая текстура. */
  .audit-get__bg::after,
  .audit-get__card--report .audit-get__bg::after {
    left: 0;
    width: 100%;
  }

  .audit-get__card--report .audit-mock__in {
    left: calc(50% - 265px);
  }
}

@media (max-width: 1100px) {
  .audit-problems {
    padding: 110px 0 140px;
  }

  .audit-problems__grid> :nth-child(n) {
    grid-column: span 1;
  }

  .audit-problems__grid> :last-child {
    grid-column: span 2;
  }

  .audit-check {
    padding: 140px 0 70px;
  }

  .audit-get {
    padding-top: 70px;
  }

  .audit-banner {
    padding-top: 150px;
  }

  .audit-banner .ops-banner__body {
    max-width: 60%;
  }

  .audit-banner__img {
    width: 320px;
    top: -40px;
    right: 24px;
  }
}

@media (max-width: 860px) {
  .audit-get__grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }

  .audit-get__grid> .audit-get__card {
    grid-area: auto;
  }

  .audit-get__card--report {
    height: 519px;
  }

  .audit-get__card:not(.audit-get__card--report) {
    height: 247px;
  }

  .audit-banner {
    padding-top: 120px;
  }

  /* Воронка 280px поднята на 60 — текст начинается под ней. */
  .audit-banner .ops-banner__body {
    max-width: none;
    padding: 244px 24px 30px;
  }

  .audit-banner__img {
    width: 280px;
    top: -60px;
    right: 50%;
    transform: translateX(50%);
  }
}

@media (max-width: 640px) {
  /* В мобильном макете заголовок шире колонки — 436 из 440. */
  .audit-hero__title {
    margin-inline: -20px;
  }

  .audit-hero__img {
    width: 350px;
    margin-top: 16px;
  }

  .audit-problems {
    padding: 60px 0 100px;
  }

  .audit-problems__grid> :last-child {
    grid-column: span 1;
  }

  .audit-results__sub {
    font-size: 16px;
  }

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

  .audit-check {
    padding: 100px 0 50px;
  }

  .audit-check .crm-h2--left {
    text-align: center;
  }

  .audit-get {
    padding-top: 50px;
  }

  /* Карточки мобильного макета 392 в ширину: заголовок 18, подложка
   одна на всех (кадр 392×390), мокапы ужаты своим масштабом. */
  .audit-get__card--report,
  .audit-get__card:not(.audit-get__card--report) {
    height: auto;
  }

  .audit-get__title {
    font-size: 18px;
  }

  .audit-get__bg,
  .audit-get__card--report .audit-get__bg {
    top: 0;
    width: 100%;
    height: 390px;
  }

  .audit-get__bg img,
  .audit-get__card--report .audit-get__bg img {
    left: -161.7px;
    top: -469.39px;
    width: 1012.529px;
    height: 1366.914px;
    aspect-ratio: auto;
  }

  .audit-get__bg::after,
  .audit-get__card--report .audit-get__bg::after {
    left: -950.98px;
    top: -1339.79px;
    width: 2171.932px;
    height: 2814.563px;
  }

  .audit-get__card--report .audit-mock {
    --h: 300px;
    --k: .7396;
    --ty: -7px;
  }

  .audit-get__card--report .audit-mock__in {
    left: 0;
  }

  .audit-get__card--matrix .audit-chip {
    top: 26px;
  }

  .audit-get__card--matrix .audit-mock__shade {
    left: 329px;
  }

  .audit-get__card--fixes .audit-mock {
    --k: .926;
    --tx: 5.15px;
  }

  .audit-get__card--fixes .audit-checks {
    top: 32.4px;
  }

  .audit-get__card--plan .audit-mock {
    --k: .954;
  }

  .audit-get__card--growth .audit-mock {
    --k: .947;
    --ty: 4.04px;
  }

  /* Воронка над карточкой: 203×207, по центру, вылезает на 94px. */
  .audit-banner {
    padding-top: 199px;
  }

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

  .audit-banner__img {
    width: 202.56px;
    top: -94px;
  }
}