/*
  Верхняя секция страницы каталога (159:4594) — абстрактный светлый фон под
  прозрачным хедером. Обёртка .catalog-top (catalog.css) несёт margin-top
  под хедер и общий цвет фона на всю комбинированную высоту hero+layout —
  здесь, у самого .catalog-hero, НЕТ overflow:hidden и своего фона: секция
  контента (заголовок) по высоте намного короче 872px картинки фона, и с
  overflow:hidden картинка обрезалась бы по границе этой короткой секции,
  так и не успев дофейдить (баг, поймали по фидбеку — фон резко обрывался
  вместо плавного перехода под сайдбар/карточки). Картинка сама физически
  выходит за пределы .catalog-hero и продолжается поверх верхней части
  .catalog-layout — это ожидаемо, .catalog-layout сделан прозрачным именно
  под это (см. catalog.css).
*/
.catalog-hero {
  position: relative;
}

.catalog-hero__bg {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100%;
  max-width: var(--bleed-width);
  transform: translateX(-50%);
  /* inset-[0_0_71.36%_0] от фрейма страницы 1440×3045 в Figma (159:4595) —
     3045×(1-0.7136) = 872px, не произвольное число. */
  height: 872px;
  pointer-events: none;
}

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

/* Стоп-точки фейда — из фактического фила фона в Figma (159:4595). */
.catalog-hero__bg::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) 46.101%, var(--color-solutions-bg) 79.014%);
}

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

.catalog-hero__content {
  position: relative;
  z-index: 1;
  padding: calc(var(--header-height) + 55px) var(--page-gutter) 60px;
  text-align: center;
}

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

/*
  Мобильная адаптация (600px,
  база 390px). Фон — реально другое изображение (picture/source в
  catalog-hero.njk, тот же приём, что hero-home.njk), не кроп десктопного.
  Заголовок здесь ОСТАЁТСЯ плоским цветом (--color-ink) — в отличие от
  героя главной страницы градиента тут нет.
*/
@media (max-width: 599.98px) {
  .catalog-hero__bg {
    top: min(-59px, calc(-59 / 390 * 100vw));
    left: 0;
    width: 100%;
    max-width: none;
    height: min(920px, calc(920 / 390 * 100vw));
    transform: none;
  }

  .catalog-hero__bg::after {
    background-image: linear-gradient(to top, var(--color-solutions-bg) 0%, transparent 18.261%);
  }

  .catalog-hero__content {
    padding: min(140px, calc(140 / 390 * 100vw)) min(30px, calc(30 / 390 * 100vw)) min(28px, calc(28 / 390 * 100vw));
  }

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