/*
  Герой «Контакты» (159:5449). Тот же приём, что у hero.css/service-hero.css:
  margin-top отрицательный на высоту хедера — фон уходит под прозрачный
  хедер, контенту компенсирующий padding-top. Контент выключен по левому
  краю (padding-left:75), как в service-hero — не центрирован.

  Высота 719px — из Figma (159:5450, фон героя). В отличие от
  service-hero/hero — фейд фото не сбоку/снизу узкой полосой, а
  вертикальный градиент на всю высоту секции (66.203% → 100%, оба числа
  сверены по макету).
*/
.contacts-hero {
  position: relative;
  overflow: hidden;
  min-height: 719px;
  margin-top: calc(-1 * var(--header-height));
  background: var(--color-solutions-bg);
}

.contacts-hero__media {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100%;
  max-width: var(--bleed-width);
  transform: translateX(-50%);
}

.contacts-hero__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.contacts-hero__media::after {
  --side-fade: transparent; /* боковой фейд не нужен, пока фото не шире экрана (--bleed-width ещё не кэпает) */
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--side-fade), transparent 16%, transparent 84%, var(--side-fade)),
    linear-gradient(to bottom, rgba(245, 245, 248, 0) 66.203%, var(--color-solutions-bg) 100%);
}

/* Число 1700px = значение --bleed-width. В media query нельзя подставить var(),
   поэтому хардкод — если --bleed-width когда-нибудь изменится, поменять и тут. */
@media (min-width: 1700px) {
  .contacts-hero__media::after {
    --side-fade: var(--color-page-bg);
  }
}

.contacts-hero__content {
  position: relative;
  z-index: 1;
  width: min(var(--content-width), 100% - 2 * var(--page-gutter));
  margin-inline: auto;
  padding: calc(var(--header-height) + 52px) 0 0;
}

.contacts-hero__title {
  margin: 12px 0 0;
  max-width: 755px;
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: var(--fw-extrabold);
  text-transform: uppercase;
  color: var(--color-ink);
}

.contacts-hero__subtitle {
  margin: 15px 0 0;
  max-width: 387px;
  font-size: var(--fs-hero-subtitle);
  line-height: var(--lh-hero-subtitle);
  color: var(--color-ink);
}

.contacts-hero .btn {
  margin-top: 30px;
}

/*
  Мобильная адаптация (600px,
  база 390px). Хедер на мобильном — position:fixed, не в потоке (см.
  header.css) — приём margin-top на -header-height и компенсирующий
  padding-top здесь не нужен, Figma-координаты уже отсчитаны от истинного
  верха страницы.

  .contacts-hero__media перестаёт быть full-bleed фоном секции и
  становится декоративной плашкой с фиксированными top/right/width/height
  (bleed за оба края экрана, виден только узкий центр — так в макете), поэтому
  все её десктопные позиционирующие свойства (left/bottom/transform/
  max-width) сброшены.

  min-height секции = min(746px,...) — полная нижняя граница декоративного
  фото (top:363+height:383), чтобы двусторонний фейд успевал дойти до
  сплошного --color-solutions-bg (тот же цвет, что и фон .contacts-info
  ниже) до конца секции — без наезда карточки реквизитов на фото, как на
  десктопе: в моб. Figma точная глубина захода карточки не задана, а фон
  уже сплошной задолго до конца этой высоты, так что видимого шва не будет
  и без наезда (см. contacts-info.css → мобильный блок, margin-top:0).
*/
@media (max-width: 599.98px) {
  .contacts-hero {
    min-height: min(746px, calc(746 / 390 * 100vw));
    margin-top: 0;
  }

  .contacts-hero__media {
    top: min(363px, calc(363 / 390 * 100vw));
    right: max(-39px, calc(-39 / 390 * 100vw));
    left: auto;
    bottom: auto;
    width: min(767px, calc(767 / 390 * 100vw));
    height: min(383px, calc(383 / 390 * 100vw));
    max-width: none;
    transform: none;
  }

  .contacts-hero__media::after {
    background-image: linear-gradient(
      to bottom,
      var(--color-solutions-bg) 0%,
      transparent 15.374%,
      transparent 79.647%,
      var(--color-solutions-bg) 100%
    );
  }

  .contacts-hero__content {
    width: min(330px, calc(330 / 390 * 100vw));
    margin-inline: auto;
    /* 110px — то же значение, что и padding-top контента у service-hero/
       product-hero на мобильном (общий отступ под плавающую pill-капсулу
       хедера на всех страницах, не число, специфичное для этой страницы). */
    padding: min(110px, calc(110 / 390 * 100vw)) 0 0;
  }

  .contacts-hero__title {
    max-width: none;
    font-size: min(32px, calc(32 / 390 * 100vw));
    line-height: min(46px, calc(46 / 390 * 100vw));
  }

  .contacts-hero__subtitle {
    max-width: none;
    font-size: min(13px, calc(13 / 390 * 100vw));
    line-height: min(23px, calc(23 / 390 * 100vw));
  }

  /* Кнопка — тот же padding:0 30px, что на десктопе: сырой Figma
     auto-layout неоднозначен между 30/40, и отдельный override без
     визуальной сверки заводить не за чем. */
}