/*
  Герой главной страницы. margin-top отрицательный на высоту хедера —
  так фон героя уходит под прозрачный хедер (см. header.css), а
  hero__content возвращает контенту отступ той же величины через padding-top.
*/
.hero {
  position: relative;
  overflow: hidden;
  min-height: var(--hero-height);
  margin-top: calc(-1 * var(--header-height));
  background: var(--color-surface-muted);
}

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

.hero__media img {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  /* Кадр фото сам по себе выше нужного — сверху много пустой студийной
     подложки. Растягиваем img за пределы контейнера и прижимаем к низу,
     чтобы обрезать именно этот пустой верх и поднять оборудование выше. */
  height: 114%;
  object-fit: cover;
}

/* Плавный переход фото в фон следующего блока — без него виден жёсткий стык.
   inset:0 (не bottom+height, как раньше) — чтобы в этом же слое поместился
   ещё и боковой фейд к --color-page-bg на широких экранах (--bleed-width).
   Вертикальные стоп-точки пересчитаны в % от полной высоты --hero-height
   (958px), чтобы визуально остаться тем же фейдом на 260px снизу. */
.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, transparent 72.86%, var(--color-solutions-bg) 96.74%);
  pointer-events: none;
}

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

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

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

.hero__title-main {
  color: var(--color-ink);
}

.hero__title-accent {
  color: var(--color-accent);
}

.hero__subtitle {
  margin: 15px auto 0;
  max-width: 471px;
  font-size: var(--fs-hero-subtitle);
  line-height: var(--lh-hero-subtitle);
  font-weight: var(--fw-regular);
  color: var(--color-ink);
}

/* Плавающая стеклянная плашка доверия (4 пункта) поверх нижнего края фото.
   repeat(4, ...) — осознанно фиксированное число, не под repeater: в
   home.json → trustBar заголовки заданы массивом titleLines с вручную
   расставленными переносами под ровно 4 колонки (см. память проекта).
   Если это станет открытым repeater-полем в админке — сетку нужно будет
   пересматривать вместе с данными. */
.trust-bar {
  position: absolute;
  left: 0;
  right: 0;
  max-width: var(--content-width);
  margin-inline: auto;
  bottom: 0;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  min-height: var(--hero-trust-bar-height);
  padding: 24px 20px;
  list-style: none;
  border-radius: var(--radius-trust-bar);
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(54px);
  -webkit-backdrop-filter: blur(54px);
}

.trust-bar__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* flex-start, не center: иконка и первая строка заголовка должны быть
     на одном уровне во всех колонках независимо от того, в 1 или 2 строки
     переносится заголовок в конкретной колонке (см. min-height на title) */
  justify-content: flex-start;
  padding: 0 20px;
  text-align: center;
}

.trust-bar__item + .trust-bar__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 150px;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.1);
}

.trust-bar__icon {
  display: inline-flex;
  margin-bottom: 10px;
}

.trust-bar__title {
  margin: 0 0 6px;
  font-size: var(--fs-trust-title);
  line-height: var(--lh-trust-title);
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
}

.trust-bar__text {
  margin: 0;
  max-width: 220px;
  font-size: var(--fs-trust-text);
  line-height: var(--lh-trust-text);
  font-weight: var(--fw-regular);
  color: var(--color-ink);
  opacity: 0.5;
}

/*
  Мобильная адаптация (600px, база
  390px). Герой на мобильном — другое фото (не кроп десктопного, см. picture
  в hero-home.njk), поэтому весь трюк с растяжением img до 114%/подгонкой
  под десктопный кадр здесь не нужен — новое фото уже скомпоновано под
  вертикальный мобильный кадр, просто cover+object-position:bottom.

  .hero больше не тянется под хедер через отрицательный margin-top: на
  мобильном хедер-капсула — position:fixed (см. header.css), не занимает
  место в потоке, поэтому подтягивать герой вверх под него не нужно —
  Figma-координаты (top:-59px у фото, top:140px у заголовка и т.д.) уже
  отсчитаны от истинного верха страницы.
*/
@media (max-width: 599.98px) {
  .hero {
    margin-top: 0;
    min-height: min(1430px, calc(1430 / 390 * 100vw));
    background: var(--color-page-bg);
  }

  .hero__media {
    top: min(-59px, calc(-59 / 390 * 100vw));
    bottom: auto;
    left: 0;
    width: 100%;
    max-width: none;
    height: min(920px, calc(920 / 390 * 100vw));
    transform: none;
  }

  .hero__media img {
    position: static;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: bottom;
  }

  .hero__media::after {
    background-image: linear-gradient(
      180deg,
      #e3e1e7 13.418%,
      rgba(227, 225, 231, 0) 35.837%,
      rgba(227, 225, 231, 0) 74.157%,
      var(--color-solutions-bg) 100%
    );
  }

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

  .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));
  }

  /* Исключение: на десктопе заголовок героя — плоский цвет, на мобильном —
     тот же градиентный приём, что у .heading-gradient (не навешиваем класс
     в разметку — сломало бы десктоп, дублируем свойства только здесь). */
  .hero__title-main {
    --heading-gradient-angle: 96.5deg;
    background: linear-gradient(
      var(--heading-gradient-angle),
      var(--color-heading-dark) 0%,
      var(--color-heading-mid) 40%,
      var(--color-heading-dark) 85%
    );
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
  }

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

  /* Trust-bar: та же карточка-паттерн (иконка+заголовок+текст), что на
     десктопе — просто список в 1 колонку вместо grid(4), с горизонтальными
     разделителями вместо вертикальных. Внутренняя структура .trust-bar__item
     не меняется (см. trust-bar__item ниже), поэтому CSS достаточно для
     полной перекомпоновки без правки njk. */
  .trust-bar {
    top: min(685px, calc(685 / 390 * 100vw));
    bottom: auto;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    max-width: none;
    width: min(370px, calc(370 / 390 * 100vw));
    display: block;
    min-height: auto;
    padding: 0;
    border-radius: min(30px, calc(30 / 390 * 100vw));
    backdrop-filter: blur(min(54px, calc(54 / 390 * 100vw)));
    -webkit-backdrop-filter: blur(min(54px, calc(54 / 390 * 100vw)));
  }

  .trust-bar__item {
    padding: min(40px, calc(40 / 390 * 100vw)) min(30px, calc(30 / 390 * 100vw));
  }

  .trust-bar__item + .trust-bar__item {
    padding-top: min(31px, calc(31 / 390 * 100vw));
  }

  /* Переехало из снесённого @media (max-width:960px) (правки 2026-08-05,
     п.18, этап 2) БЕЗ изменения смысла: там это правило действовало и на
     телефоне (390 < 960), то есть разделителей между пунктами на мобильной
     сейчас нет — так и принято заказчиком. Правило ниже задаёт им
     горизонтальную ориентацию и из-за этого display:none не работает; это
     расхождение с мобильным макетом существует с самой адаптации и здесь
     осознанно не трогается — этап 2 обязан сохранить мобильный рендер
     байт в байт. Разбирать — отдельной задачей. */
  .trust-bar__item::before {
    display: none;
  }

  .trust-bar__item + .trust-bar__item::before {
    left: min(30px, calc(30 / 390 * 100vw));
    right: min(30px, calc(30 / 390 * 100vw));
    top: 0;
    width: auto;
    height: 1px;
    transform: none;
  }

  .trust-bar__icon {
    margin-bottom: min(10px, calc(10 / 390 * 100vw));
  }

  .trust-bar__icon .icon {
    width: min(30px, calc(30 / 390 * 100vw));
    height: min(30px, calc(30 / 390 * 100vw));
  }

  .trust-bar__title {
    margin: 0 0 8px;
    font-size: min(16px, calc(16 / 390 * 100vw));
    line-height: min(21px, calc(21 / 390 * 100vw));
  }

  .trust-bar__title-break {
    display: none;
  }

  .trust-bar__text {
    max-width: min(292px, calc(292 / 390 * 100vw));
    font-size: min(13px, calc(13 / 390 * 100vw));
    line-height: min(20px, calc(20 / 390 * 100vw));
  }
}