/* ============================================================
   ПОЛОСА ПРИЗЫВА ПЕРЕД ФУТЕРОМ

   Референс — enermetall.ru: цветной прямоугольник во всю ширину
   перед подвалом, крупный белый заголовок слева, кнопки справа.
   Замер их блока: фон #06b6d4, радиус 20px, поля 56px, сетка
   на две колонки 723 / 517, заголовок 32px белым, кнопка белая
   с тёмным текстом и радиусом 8px.

   Что у нас иначе и почему:

   * Цвет — токен `--accent-1`, а не бирюзовый из референса. Поэтому
     на страницах полоса голубая, а на 1С жёлтая: она часть темы
     страницы, а не отдельное пятно. Захотите ровно синий везде —
     заменить `var(--accent-1)` на `#1c78ba` в одном месте ниже.
   * Радиус и поля — наши токены, чтобы полоса не выбивалась
     из остальных карточек сайта.
   * Кнопка одна, вторая ссылка — телефон. Две одинаковые кнопки
     рядом, как в референсе, заставляют выбирать между тем же самым.

   Белое на акценте: контраст 4.68 у голубого и 4.67 у жёлтого —
   норма 4.5 выдержана и для обычного текста, не только для заголовка.
   ============================================================ */
.cta{
  /* Отступ сверху свой, снизу нулевой: дальше идёт футер, и полоса
     должна стоять к нему вплотную, как в референсе. */
  padding:clamp(40px, 4vw, 72px) 0 0;
}

.cta__box{
  position:relative;
  overflow:hidden;
  /* Своя система наложения: без неё mix-blend-mode у картинки смешался бы
     не с полосой, а со всем, что лежит под ней на странице. */
  isolation:isolate;
  display:grid;
  grid-template-columns:minmax(0, 1.4fr) minmax(0, .6fr);
  gap:clamp(24px, 3vw, 56px);
  align-items:center;
  padding:clamp(28px, 3.2vw, 56px);
  border-radius:var(--r-card);
  /* Перелив вместо плоской заливки: светлее в левом верхнем углу,
     темнее к правому нижнему. Сделан прозрачными слоями поверх акцента,
     а не парой цветов, — тогда он работает на любом акценте, и жёлтая
     полоса 1С получает тот же перелив без отдельного правила. */
  background:
    linear-gradient(118deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 46%),
    linear-gradient(118deg, rgba(0,0,0,0) 52%, rgba(0,0,0,.22) 100%),
    var(--accent-1);
  color:#fff;
}

/* Картинка фона: монохромный рельеф вдоль нижней кромки.
   Режим screen осветляет полосу там, где на картинке светлое, и ничего
   не делает там, где чёрное, — поэтому чёрный фон картинки исчезает сам,
   вырезать его не нужно (а вырезать его и нельзя, см. ДИЗАЙН-СИСТЕМУ).
   По той же причине картинка не спорит с цветом: она не приносит своего,
   а только осветляет то, что уже есть. */
.cta__bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:bottom center;
  mix-blend-mode:screen;
  /* .38, а не .55: на .55 светлые грани рельефа заходили под абзац
     и текст читался хуже. Проверено кадром 03.09.2026. */
  opacity:.38;
  pointer-events:none;
  z-index:0;
}

/* Щит под текстом. Рельеф стоит вдоль всей нижней кромки, а текст живёт
   слева — там картинку надо приглушить сильнее, чем справа, где только
   кнопки. Заливка тем же акцентом через --accent-rgb, поэтому щит
   не приносит своего цвета и работает на жёлтой полосе 1С тоже. */
.cta__box::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,
    rgba(var(--accent-rgb), .92) 0%,
    rgba(var(--accent-rgb), .55) 34%,
    rgba(var(--accent-rgb), 0) 62%);
  pointer-events:none;
  z-index:1;
}

/* Текст и кнопки — выше фона и щита. */
.cta__text,
.cta__actions{ position:relative; z-index:2; }

.cta__title{
  margin:0;
  font-family:var(--font-display);
  font-weight:640;
  font-size:clamp(22px, 2.1vw, 34px);
  line-height:1.15;
  letter-spacing:-.01em;
}

.cta__lead{
  margin:clamp(10px, 1vw, 16px) 0 0;
  max-width:62ch;
  font-size:clamp(14px, 1.05vw, 17px);
  line-height:1.6;
  /* Не чистый белый: подзаголовок должен уступать заголовку,
     а на цветном фоне это делается прозрачностью, а не серым. */
  color:rgba(255, 255, 255, .88);
}

.cta__actions{
  display:grid;
  gap:clamp(10px, 1vw, 16px);
  justify-items:stretch;
}

/* Кнопка белая с тёмным текстом — единственная на сайте в таком виде.
   Это и правильно: на цветной полосе наша обычная заливка акцентом
   слилась бы с фоном, а контурная потерялась бы. */
.cta__btn{
  background:#fff;
  color:var(--fg);
  border:0;
  justify-content:center;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.cta__btn:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(0, 0, 0, .18);
}

.cta__phone{
  display:block;
  text-align:center;
  padding:.7em 1em;
  border:1px solid rgba(255, 255, 255, .45);
  border-radius:var(--r-inner);
  font-size:clamp(14px, 1.05vw, 17px);
  font-weight:600;
  color:#fff;
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.cta__phone:hover{
  border-color:#fff;
  background:rgba(255, 255, 255, .1);
}

@media (max-width: 860px){
  /* В одну колонку кнопки уходят под текст: рядом с ним на узком
     экране им остаётся полоска в два слова. */
  .cta__box{ grid-template-columns:1fr; }
}

@media (prefers-reduced-motion: reduce){
  .cta__btn{ transition:none; }
  .cta__btn:hover{ transform:none; }
}