/* ============================================================================
   CTA «Остались вопросы?» — стили блока .cta-block2
   ----------------------------------------------------------------------------
   Перенесено из шаблона deka-doors.ru. Метрики (размеры, отступы, брейкпоинты,
   порядок правил) взяты из исходника 1:1, цвета перекрашены в палитру ЦМЗД —
   тем же приёмом, что уже применён в product-card.css для карточки товара.

   ВАЖНО про цвета. В исходнике и надзаголовок («Консультация»), и кнопка
   красились одним и тем же брендовым красным (переменная --thm-base исходника). Поэтому
   здесь они оба идут через --cta-red (#d73240), а не через акцентный жёлтый:
   жёлтый надзаголовок 16px на светло-сером фоне был бы не виден.

   Цветовая карта (слева — роль цвета в исходнике, справа — переменная ЦМЗД):
     брендовый красный источника (--thm-base)  ->  --cta-red     #d73240
     почти-чёрный источника (--thm-black)      ->  --cta-dark    #2d3e50
     светло-серый фон                          ->  --cta-light   #f6f6f6 (без изменений)
   Жёлтый акцент исходника в этом блоке не встречается — в источнике и надзаголовок,
   и кнопка одного брендового красного, а фон hover'а — почти-чёрный.
   Точные значения исходника — в DEKA-DESIGN-PORT.md: в этом файле их нет
   намеренно, иначе тест «нет чужих цветов» (поиск подстроки) падает на
   комментарии. Так же сделано в product-card.css.

   Почему всё под префиксом .cta-block2: в исходном шаблоне классы .btn-one,
   .sec-title, .sub-title, .sup-title глобальные, и в cmzd они пересеклись бы
   с Bootstrap/Битриксом. Здесь все правила вложены в .cta-block2, поэтому
   блок не может сломать шапку, футер или сетку каталога.

   Компонент: src/components/CtaConsult.astro, подключён в BaseLayout (на всех
   страницах, как в исходном шаблоне).
   ========================================================================== */

.cta-block2 {
  /* Палитра ЦМЗД. Те же значения, что в product-card.css (--pd-*). */
  --cta-dark:   #2d3e50;
  --cta-red:    #d73240;
  --cta-light:  #f6f6f6;

  background: url(/bitrix/templates/doors/assets/img/bg-zavod.webp) var(--cta-light) center top;
  /* НИЖНИЙ ОТСТУП — не из исходника, а из вёрстки этого сайта. В шаблоне блок
     был последней секцией перед подвалом, поэтому нижнего отступа не имел. В cmzd
     сразу за ним идёт секция с карточкой контактов (`.footer-cont-wrap`), которая
     по своей вёрстке поднята на половину собственной высоты
     (`transform: translateY(-50%)`, `z-index: 99`) и заходит на предыдущую секцию
     на 92–103px. Без отступа карточка накрывала последнюю строку блока — телефон
     (замер: 23–25px в диапазоне 768–991px). 120px резервируют место, поверх
     которого карточка и рассчитана «плавать». */
  padding: 70px 0 120px;
  position: relative;
  z-index: 11;
}

.cta-block2__content {
  display: flex;
  justify-content: space-between;
  min-height: 450px;
  position: relative;
  color: var(--cta-dark);
}

.cta-block2 .cta-style1__title {
  position: relative;
  display: block;
}

.cta-block2__info .sec-title {
  position: relative;
  display: block;
  margin-top: -5px;
  padding-bottom: 0;
  z-index: 2;
}

.cta-block2__info .sec-title .sub-title {
  position: relative;
  display: block;
  padding-bottom: 10px;
}

.cta-block2__info .sec-title .sub-title h6 {
  color: var(--cta-red);
  font-size: 16px;
  line-height: 21px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0;
}

.cta-block2__info .sec-title h2 {
  color: var(--cta-dark);
  font-size: 40px;
  line-height: 50px;
  font-weight: 700;
  /* Конфликт каскада с самим сайтом, а не с источником: в ЦМЗД есть глобальное
     правило `h2 { text-transform: uppercase; letter-spacing: 4px }` (style.css),
     и блок молча наследовал КАПС с разрядкой. В источнике заголовок — обычным
     регистром без трекинга; сайт сам так же сбрасывает капс у контентных
     заголовков (`.text-block h2 { text-transform: none }`). Аудит этого не видел:
     он мерил цвета и геометрию, но не типографику. */
  text-transform: none;
  letter-spacing: normal;
  margin: 0;
}

.cta-block2__info .sup-title {
  font-size: 30px;
  font-weight: 500;
  color: var(--cta-dark);
  padding-top: 20px;
  /* В источнике вся страница наследует `body { line-height: 28px }`, поэтому и
     надзаголовок, и абзац имеют абсолютный межстрочный 28px. У нас база другая,
     и без этих двух строк блок «дышит» иначе (замер: абзац 24.7px против 28px). */
  line-height: 28px;
}

.cta-block2 .cta-style1__block-txt {
  padding-top: 30px;
  max-width: 700px;
  width: 100%;
  font-size: 18px;
  line-height: 28px;
}

.cta-block2 .cta-style1__btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 50px;
  line-height: 0;
  margin-top: 50px;
}

/* Кнопка источника была красной с белым текстом (--thm-base), с красным
   свечением под ней — обе величины перекрашены в брендовый красный ЦМЗД. */
.cta-block2 .cta-style1__btn .btn-one {
  position: relative;
  display: inline-block;
  border-radius: 12px;
  border: none;
  padding: 0 35px;
  line-height: 56px;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  text-decoration: none;
  text-transform: none;
  background: var(--cta-red);
  overflow: hidden;
  transition: all 0.3s ease-in-out 0.1s;
  box-shadow: 0 15px 50px rgb(215 50 64 / 30%);
}

.cta-block2 .cta-style1__btn .btn-one::before {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
  border-radius: 12px;
  background-color: var(--cta-dark);
  transition: all 0.4s;
  transform: scale(0.5, 1);
}

.cta-block2 .cta-style1__btn .btn-one:hover::before {
  opacity: 1;
  transform: scale(1, 1);
}

.cta-block2 .cta-style1__btn .btn-one .txt {
  position: relative;
  z-index: 1;
}

.cta-block2 .cta-style1__btn .btn-one:hover,
.cta-block2 .cta-style1__btn .btn-one:focus {
  color: #fff;
}

.cta-block2 .cta-style1__block-contact {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cta-block2 .cta-style1__block-contact .pds {
  font-size: 16px;
  color: var(--cta-dark);
  padding-bottom: 2px;
}

.cta-block2 .cta-style1__block-contact .phone {
  display: inline-block;
  color: var(--cta-dark);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
}

.cta-block2__img {
  position: relative;
  bottom: 0;
  flex-shrink: 0;
}

.cta-block2__img img {
  display: block;
  /* В исходнике здесь стояло `max-width: max-content`. Для картинки, файл которой
     ещё не загружен, max-content = 0, а `loading="lazy"` + фигура ниже первого
     экрана — обычное дело: блок «худел» до нуля и персонаж пропадал (замерено
     768–991px, где ширину задаёт медиазапрос). От ширины «не дать сжаться»
     защищает `.cta-block2__img { flex-shrink: 0 }`, а место под картинку
     резервируют атрибуты width/height в разметке — поэтому ограничение снято. */
  max-width: none;
  height: auto;
  /* Фигура выдвинута вверх за границу блока — как в исходном шаблоне. */
  margin-top: -110px;
}

/* --------------------------------------------------------------- ≤1100px */
@media (max-width: 1100px) {
  .cta-block2 .cta-style1__btn .btn-one {
    padding: 0 25px;
    font-size: 17px;
  }

  .cta-block2 .cta-style1__block-contact .phone {
    font-size: 26px;
    white-space: nowrap;
  }

  .cta-block2 .cta-style1__block-contact .pds {
    font-size: 15px;
  }

  .cta-block2 .cta-style1__btn {
    gap: 30px;
  }

  .cta-block2__info .sup-title {
    font-size: 25px;
  }
}

/* ---------------------------------------------------------------- ≤991px */
@media (max-width: 991px) {
  .cta-block2__content {
    align-items: flex-end;
    min-height: auto;
  }

  .cta-block2__info {
    padding-bottom: 80px;
  }

  .cta-block2__info .sup-title {
    font-size: 24px;
    padding-top: 10px;
  }

  .cta-block2 .cta-style1__block-txt {
    padding-top: 20px;
    font-size: 16px;
  }

  .cta-block2 .cta-style1__btn {
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
  }

  .cta-block2__img img {
    margin-top: -110px;
    /* Высота задана и атрибутом width/height в разметке (защита от сдвига
       вёрстки). Без `height:auto` фигуру сплющит при смене ширины. */
    width: 300px;
    height: auto;
  }

  .cta-block2 {
    padding: 40px 0 120px;
  }
}

/* ---------------------------------------------------------------- ≤767px */
@media (max-width: 767px) {
  /* Карточка контактов на телефоне ниже (элементы в столбик) и поднята на 20%
     (`responsive.css`), поэтому перекрытие меньше — 74px. */
  .cta-block2 {
    padding-bottom: 90px;
    /* Текстура цеха — 66 КБ, а на телефоне это едва различимая подложка. Убираем
       её из загрузки, оставляем ровный светлый фон сайта. */
    background-image: none;
  }

  /* В исходнике персонаж скрыт с 767px, а не с 630px: до этой правки фигура
     оставалась видимой на планшетах и налезала на текст. */
  .cta-block2__img {
    display: none;
  }

  .cta-block2__info {
    padding-bottom: 50px;
    text-align: center;
  }

  .cta-block2 .cta-style1__btn {
    margin-top: 30px;
    align-items: center;
  }

  .cta-block2__info .sec-title h2 {
    font-size: 30px;
    line-height: 40px;
  }
}

/* ---------------------------------------------------------------- ≤530px */
@media (max-width: 530px) {
  .cta-block2__info .sec-title h2 {
    font-size: 26px;
  }
}

/* ---------------------------------------------------------------- ≤450px */
@media (max-width: 450px) {
  .cta-block2__info .sec-title h2 {
    font-size: 26px;
    line-height: 1.3;
  }
}