/* ===========================================================================
   CTA Warehouse — Полноширинный блок с предложением подключить склад
   Узел Figma: 289:5414
   =========================================================================== */

.cta-warehouse {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 36px;
  /* В макете плашка 1926x479 лежит на x:-3 холста 1920 — выпуск по 3px с обеих
     сторон (его прячет overflow-x:hidden на body). Центрируем отрицательным
     margin: auto при переполнении обнуляется, блок прижимается влево и правое
     скругление уезжает за экран. */
  width: calc(100% + 6px);
  height: 479px;
  max-width: 1926px;
  margin-inline: max(calc((100% - 1926px) / 2), -3px);
  padding: 48px 134px;
  box-sizing: border-box;
  background-color: #292824;
  border: 1px solid rgba(255, 255, 255, 0.30);
  border-radius: var(--radius-l);
  overflow: hidden;
  color: var(--text-constant-light);
  /* Эффект glass (размытие) */
  backdrop-filter: blur(10px);
}

/* --- Фоновое изображение -------------------------------------------------- */

.cta-warehouse__bg {
  /* В макете подложка — прямоугольник 1992x1149 на позиции (-29, -665)
     относительно секции 1926x479; секция его обрезает. Проценты от секции,
     чтобы пропорция держалась на любой ширине.
     Путь относительный: абсолютный /assets/... ломается при открытии file://  */
  /* Figma отдаёт фон этого узла уже обрезанным по секции (экспорт 1920x479),
     поэтому смещение не нужно — просто растягиваем на всю секцию. */
  position: absolute;
  inset: 0;
  background-image: url('../../img/cta-warehouse-bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  pointer-events: none;
}

/* --- Контент (flex контейнер) -------------------------------------------- */

.cta-warehouse__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-m);
  max-width: 1084px;
  width: 100%;
}

/* --- Badge на тёмной подложке -------------------------------------------- */

.cta-warehouse .badge--on-dark {
  background-color: rgba(255, 255, 255, 0.10);
  border-radius: var(--radius-xxxs);
  padding: var(--space-xxs);
  backdrop-filter: blur(10px);
}

/* --- Заголовок H2 --------------------------------------------------------- */
.cta-warehouse__title {
  color: var(--text-constant-light);
  text-align: center;
  /* В макете: 64px/1.10 w500 */
  font-size: 64px;
  line-height: 1.1;
  font-weight: var(--weight-500);
  letter-spacing: -0.01em;
  width: 1084px;
}

/* --- Лид (дополнительный текст) ------------------------------------------- */
.cta-warehouse__lead {
  color: var(--text-constant-light);
  text-align: center;
  /* В макете: 24px/1.50 w400 */
  font-size: 24px;
  line-height: 1.5;
  font-weight: var(--weight-400);
  letter-spacing: 0;
  width: 1054px;
}

/* --- Кнопка (btn--xl с иконкой) ------------------------------------------- */

.cta-warehouse__btn {
  position: relative;
  z-index: 1;
  width: 345px;
  height: 61px;
  gap: var(--space-xxxs);
  flex: 0 0 auto; /* кнопка — flex-ребёнок колонки: при переполнении не сжимать */
}

.cta-warehouse__btn-icon {
  /* Та же outline-стрелка 24x24 из макета, отражать не нужно. */
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

/* --- Адаптив: 1440px ------------------------------------------------------- */

@media (max-width: 1440px) {
  .cta-warehouse {
    width: 100%;
    margin-inline: 0; /* на узких экранах — целиком в кадре, оба угла видны */
    height: auto;
    /* Пропорция как ориентир, но контенту разрешаем раздвинуть плашку:
       при жёстком aspect-ratio на 1366 высота падала до 340 и текст
       с кнопкой не влезали. */
    min-height: min(479px, calc(100vw * 479 / 1926));
    padding-block: 48px;
  }

  .cta-warehouse__title {
    width: 90%;
    font-size: clamp(48px, 5vw, 64px);
  }

  .cta-warehouse__lead {
    width: 90%;
    font-size: clamp(18px, 1.5vw, 24px);
  }
}

/* --- Адаптив: 1024px ------------------------------------------------------- */



/* --- Адаптив: 768px -------------------------------------------------------- */



/* --- Адаптив: 480px -------------------------------------------------------- */



/* ============================================================================
   Планшет (≤1024) — узел 518:3224: во всю ширину без выпуска, r20,
   паддинги 48/40, заголовок 40, лид 16; кнопка как на десктопе (345x61).
   ============================================================================ */

@media (max-width: 1199px) {
  .cta-warehouse {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    height: 403px;
    border-radius: 20px;
    padding: 48px 40px;
    gap: 36px;
  }

  .cta-warehouse__content {
    gap: 16px;
    max-width: 688px;
  }

  .cta-warehouse__title {
    font-size: 40px;
    line-height: 1.1;
  }

  .cta-warehouse__lead {
    font-size: 16px;
    line-height: 1.5;
  }
}

/* === Адаптив: мобайл (≤767px) ================================================
   Узлы: m-cta-warehouse (главная), m-kt-cta (контакты) оба 375x426
   - высота 426px
   - паддинги 48/24
   - контент gap 16px, max-width 327px
   - заголовок 32px/1.1 w500
   - лид 14px/1.5 w400
   - кнопка 240x44
   ========================================================================== */

@media (max-width: 767px) {
  .cta-warehouse {
    height: 426px;
    padding: 48px 24px;
  }

  .cta-warehouse__content {
    max-width: 327px;
  }

  .cta-warehouse .badge { font-size: 12px; }

  .cta-warehouse__title {
    width: 100%; /* 90% из блока ≤1440 рвало строку раньше макета */
    font-size: 32px;
    line-height: 1.1;
    letter-spacing: -0.01em;
  }

  /* Жёсткий перенос после «МПГО» — из десктопного макета */
  .cta-warehouse__title br { display: none; }

  .cta-warehouse__lead {
    width: 100%;
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: 0;
  }

  .cta-warehouse__btn {
    width: 240px;
    height: 44px;
    min-height: 0;
    padding: 8px 24px;
    border-radius: var(--radius-s);
    font-size: 14px;
    font-weight: var(--weight-400);
    letter-spacing: 0.01em;
  }
}

/* Внутреннее поле полноширинной секции не меньше бокового поля страницы */
@media (min-width: 1200px) and (max-width: 1919px) {
  .cta-warehouse {
    padding-inline: max(var(--page-gutter), 40px);
  }
}