/* =========================================================
   noumy.ai — блок 7 «Баннер-CTA» (идёт сразу после FAQ)

   Размеры сняты с макета (Figma, секция 48:5558):
     48:5559  «1440»       — десктоп 1440
     48:5643  «1440-1200»  — от 1200 до 1440
     48:5727  «1200-900»   — от 900 до 1200
     48:5811  «900-760»    — от 760 до 900
     48:5895  «760-360»    — мобильный

   ЧТО ЗДЕСЬ ПРОИСХОДИТ
   Тёмная плашка #353535 внутри светлой секции. Слева —
   заголовок и кнопка, справа — HR за столом, который бьётся
   головой об стол, и облачко с репликой над ним. И спрайт,
   и облачко — те же, что в hero-сцене: рисует их
   claude/cta.js вызовами hrdeskSVG() и bubbleFrameSVG()
   из claude/sprites-hr-robot.js и claude/sprites-ui.js.
   Здесь персонаж просто крупнее: в hero модуль спрайта 6px,
   тут 13px на десктопе (в макете 13.17 — округлили до целого,
   иначе pixelated растягивает ряды неравномерно и лесенка
   пикселей начинает «дышать»).

   ГЕОМЕТРИЯ ПЛАШКИ
   Высота плашки в макете фиксированная (421 / 369 / 353), а
   текстовая колонка стоит в ней по центру по вертикали —
   поэтому в CSS не отступы сверху/снизу, а min-height +
   justify-content: center. Проверка: 1440 — (421−128−32−49)/2
   = 106, ровно как в макете; 1200 — (421−192−32−49)/2 = 74,
   тоже ровно. Боковые поля — обычные padding.

   ПЕРСОНАЖ И ОБЛАЧКО
   .cta__art — это ВЕСЬ бокс спрайта, 20×27 модулей, вместе с
   пустыми рядами сверху (у первого кадра голова начинается с
   3-го ряда) и пустыми колонками по краям. В макете фрейм
   «HR 1.1» — это только видимая часть, 19×24 модуля, поэтому
   правый и нижний отступы у бокса и у фрейма совпадают
   (справа бокс кончается ровно там же, снизу — тоже), а
   сверху видимая макушка сама опускается на 3 модуля.

   Облачко в макете на всех десктопных разрешениях стоит
   одинаково относительно персонажа: правый край на 38px
   правее, нижний — на 7px ниже макушки. Отсюда right: -38px
   и bottom: calc(100% - (3 модуля + 7px)) — три модуля это
   как раз пустые ряды над макушкой.
   ========================================================= */

.cta {
  background: var(--bg);
}

.cta__inner {
  max-width: 1440px;
  margin: 0 auto;
  /* сверху 90 — в них помещается облачко, которое торчит над
     плашкой на 42px; снизу 80, поля 40, как у соседних блоков */
  padding: 90px 40px 80px;
}

.cta__card {
  position: relative;      /* система координат для персонажа и облачка */
  display: flex;
  flex-direction: column;
  justify-content: center; /* текстовая колонка по центру по вертикали */
  min-height: 421px;
  padding: 40px;           /* боковые поля из макета; вертикальные — запас */
  background: var(--ink);
  /* облачко торчит выше плашки — обрезать нечем */
  overflow: visible;
}

/* ============================ ТЕКСТ ============================ */

/* Заголовок: Inter Medium 64/1.0, трекинг -2.56px (это -0.04em),
   белый. Ширина ограничена ровно по макету — от неё зависит, где
   встанут переносы: на 1440 две строки, на 1200 три. Значения взяты
   из ширин текстовых слоёв Figma, поэтому переносы совпадают с
   макетом ровно до тех пор, пока стоит Inter; на подменном шрифте
   (пока Inter не догрузился) строк может стать больше — плашка это
   переживёт, у неё min-height, а не height. */
.cta__title {
  margin: 0;
  max-width: 985px;
  font-size: 64px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.04em;
  color: var(--white);
}

/* Между заголовком и кнопкой в макете 32px.

   Снизу 4px — не отступ, а поправка на подложку кнопки. В Figma
   инстанс «btn» 193×49 меряется ВМЕСТЕ с тенью-подложкой (сама
   кнопка 189×45), а в CSS тень за пределами бокса и в высоту не
   входит. Без этих 4px колонка считалась бы на 4px ниже и центр
   уезжал вверх: на 1440 выходило 108/104 вместо ровных 106/106. */
.cta__cta {
  margin-top: 32px;
  margin-bottom: 4px;
}

/* Кнопка — тот же компонент .btn .btn--sm, что в шапке. Меняем
   только цвет рамки и подложки: на #353535 фирменный #353535
   слился бы с фоном, поэтому здесь чистый чёрный. Переменные
   --btn-shadow / --btn-shadow-hover читает сам .btn, так что
   hover и click работают как везде. */
.cta__btn {
  --btn-shadow: 4px 4px 0 #000000;
  --btn-shadow-hover: 6px 6px 0 #000000;
  border-color: #000000;
}

/* задержки появления: сначала заголовок, следом кнопка */
.cta__title.reveal { --d: 60ms; }
.cta__cta.reveal   { --d: 180ms; }

/* ============================ ПЕРСОНАЖ ============================ */

.cta__art {
  position: absolute;
  right: 57px;
  bottom: 39px;
  --u: 13px;               /* размер модуля спрайта (в hero — 6px) */
  width: calc(20 * var(--u));
}

.cta__hr {
  --h: calc(27 * var(--u));  /* высоту читает .ch, ширина — из пропорций */
  --ms: 1.4s;                /* темп цикла «работает → уронил голову» */
  display: block;
  /* В макете на всех разрешениях, кроме мобильного, персонаж отражён:
     монитор слева, человек смотрит влево. В hero он смотрит вправо, так
     что здесь просто зеркалим — отдельного спрайта заводить не надо.

     Второй шаг, translateX, — не косметика. Спрайт 20 модулей шириной,
     но рисунок занимает колонки 2–18: слева пустых две, справа одна.
     Зеркало меняет их местами, и картинка внутри бокса уезжает на модуль
     влево. Сдвиг возвращает её назад, поэтому все отступы бокса (57 / 39,
     хвостик баблика, макушка на третьем модуле) остаются те же, что и без
     зеркала. Порядок важен: translate применяется ДО scale, поэтому на
     экране -1 модуль превращается в +1. */
  transform: scaleX(-1) translateX(calc(-1 * var(--u)));
}

/* ============================ ОБЛАЧКО ============================ */

/* Форму рисует bubbleFrameSVG(false, BUBBLE_HR_COLORS) — тот же
   зелёный баблик HR, что в hero. Координаты внутри него (242×115,
   текст шириной 202 с центром на 41) — из sprites-ui.js, поэтому
   тут они множатся на --bs и больше нигде не дублируются.
   Реплика не меняется: в макете она одна и та же. */

.cta__bubble {
  --bs: 1;                 /* масштаб баблика: 1 в макете, 0.7 на мобильном */
  position: absolute;
  right: -38px;
  bottom: calc(100% - (3 * var(--u) + 7px));
  width: calc(242px * var(--bs));
  height: calc(115px * var(--bs));
  pointer-events: none;
}

.cta__bubble-bg { position: absolute; inset: 0; z-index: 0; }
.cta__bubble-bg svg {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}

.cta__bubble-t {
  position: absolute;
  left: 50%;
  top: calc(41px * var(--bs));
  z-index: 1;
  transform: translate(-50%, -50%);
  width: calc(202px * var(--bs));
  text-align: center;
  font-weight: 500;
  font-size: calc(16px * var(--bs));
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #353535;
}

/* ============================ 1440 → 1200 ============================
   Плашка та же, но текстовая колонка сужается: 985 на 1440 и 699
   на 1200 — между ними тянем линейно, чтобы переносы менялись
   плавно, а не прыжком на границе. 286px разницы на 240px ширины
   окна — отсюда коэффициент 1.1917. */

@media (max-width: 1439px) and (min-width: 1200px) {
  .cta__title {
    max-width: clamp(699px, calc(699px + (100vw - 1200px) * 1.1917), 985px);
  }
}

/* ============================ 1200 → 900 ============================ */

@media (max-width: 1199px) {
  .cta__card { min-height: 369px; }

  .cta__title {
    max-width: 519px;
    font-size: 50px;       /* трекинг -2px — те же -0.04em */
  }

  .cta__art {
    --u: 10px;
    bottom: 53px;
  }
}

/* ============================ 900 → 760 ============================ */

@media (max-width: 899px) {
  .cta__inner { padding: 60px 16px 50px; }

  .cta__card {
    min-height: 353px;
    padding: 24px;
  }

  .cta__art {
    --u: 9px;
    right: 45px;
    bottom: 53px;
  }
}

/* ============================ МОБИЛЬНЫЙ ============================
   Раскладка другая: персонаж переезжает наверх и встаёт по центру,
   под ним заголовок и кнопка. Плашка перестаёт быть фиксированной
   по высоте — её задаёт содержимое (16 + 162 + 16 + 96 + 24 + 49 +
   24 = 387, как в макете).

   Облачко уходит в левый верхний угол и висит уже не над
   персонажем, а над плашкой, поэтому .cta__art здесь становится
   обычным блоком в потоке, и абсолютное позиционирование облачка
   отсчитывается от .cta__card. */

@media (max-width: 759px) {
  .cta__inner { padding: 60px 12px 50px; }

  .cta__card {
    min-height: 0;
    justify-content: flex-start;
    padding: 16px 16px 24px;
  }

  .cta__art {
    position: static;
    order: -1;
    --u: 6px;
    /* Прибит к левому краю, а не по центру. Отрицательное поле — на те
       самые две пустые колонки спрайта: без него видимый край персонажа
       начинался бы на 12px правее заголовка, а так они стоят по одной
       линии. */
    margin: 0 0 16px calc(-2 * var(--u));
  }

  /* на мобильном в макете персонаж НЕ отражён — смотрит вправо */
  .cta__hr { transform: none; }

  .cta__title {
    max-width: none;
    font-size: 32px;       /* трекинг -1.28px — те же -0.04em */
  }

  .cta__cta { margin-top: 24px; }

  .cta__bubble {
    --bs: .7;
    right: auto;
    bottom: auto;
    left: 0;
    top: -36px;
  }
}