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

  min-height/высота плашки-фич — числа из Figma (159:5268 фон 640px высотой,
  159:5280 плашка-фич 545..665px) в сумме дают ровно 665px общей высоты
  секции — не совпадение, а способ разметки: плашка-фич наезжает на
  нижние 30px фона (там, где он уже почти дофейдил в --color-solutions-bg).
*/
.service-hero {
  position: relative;
  overflow: hidden;
  min-height: 665px;
  margin-top: calc(-1 * var(--header-height));
  background: var(--color-solutions-bg);
}

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

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

.service-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 left, rgba(245, 245, 248, 0) 34.571%, var(--color-solutions-bg) 100%),
    linear-gradient(to bottom, rgba(245, 245, 248, 0) 80%, var(--color-solutions-bg) 100%);
}

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

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

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

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

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

.service-hero__features {
  display: flex;
  align-items: stretch;
  max-width: var(--content-width);
  min-height: 120px;
  margin: 110px auto 0;
  padding: 20px;
  list-style: none;
  border-radius: var(--radius-trust-bar);
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(54.45px);
  -webkit-backdrop-filter: blur(54.45px);
}

.service-hero__feature {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 20px;
  text-align: center;
}

.service-hero__feature-icon svg {
  display: block;
  width: 30px;
  height: 30px;
}

.service-hero__feature-title {
  font-size: var(--fs-trust-title);
  line-height: var(--lh-trust-title);
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
  white-space: nowrap;
}

.service-hero__feature-divider {
  flex-shrink: 0;
  width: 1px;
  background: rgba(0, 0, 0, 0.1);
}

/*
  Мобильная адаптация (600px,
  база 390px). Структурно другое поведение, чем на десктопе и чем у героя
  главной страницы: фото — НЕ фон под текстом, а отдельная полоса НИЖЕ
  текста, с наездом на кнопку сверху и наездом плашки-фич снизу. Хедер на
  мобильном — position:fixed (см. header.css), не занимает места в потоке,
  поэтому margin-top:0, никакого поджатия под хедер не нужно.

  Визуальный порядок media→content→features в DOM не совпадает с нужным
  content→media→features — вместо правки njk используем flex column + order
  на секции (медиа и фичи выходят из position:absolute в обычный поток).
*/
@media (max-width: 599.98px) {
  .service-hero {
    display: flex;
    flex-direction: column;
    overflow: visible;
    min-height: auto;
    margin-top: 0;
  }

  .service-hero__media {
    position: relative;
    top: auto;
    left: 0;
    order: 2;
    width: 100%;
    max-width: none;
    height: min(357px, calc(357 / 390 * 100vw));
    /* Отрицательное значение — max(), не min() (поправка формулы для
       отрицательных чисел):
       иначе на широких телефонах (390-600px) наезд на кнопку рос бы вместо
       того, чтобы оставаться зафиксированным. */
    margin-top: max(-32px, calc(-32 / 390 * 100vw));
    transform: none;
  }

  /* Окно кадра прижато к ПРАВОМУ краю исходника: контейнер 390×357, cover
     масштабирует фото по высоте (357/852) до 774px ширины — в кадр влезает
     ровно половина. При 73% слева попадал пустой пол, а кейс и правая
     секция машины срезались рамкой; в макете кадр стоит у правого края.
     95%, а не 100%: вплотную к краю выступающая слева часть машины уже не
     помещалась в кадр — 5% сдвигают контент вправо на 19px. Ниже 90%
     начинает срезаться правая секция машины, безопасный предел — 92%.
     Вертикаль (50%) ни на что не влияет — 357px это и есть высота
     вписанного фото, обрезать по вертикали нечего. */
  .service-hero__media img {
    object-position: 95% 50%;
  }

  .service-hero__media::after {
    background-image: linear-gradient(
      180deg,
      var(--color-solutions-bg) 0%,
      transparent 25%,
      transparent 75%,
      var(--color-solutions-bg) 100%
    );
  }

  .service-hero__content {
    order: 1;
    z-index: 2;
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding: min(110px, calc(110 / 390 * 100vw)) min(30px, calc(30 / 390 * 100vw)) 0;
  }

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

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

  .service-hero .btn {
    margin-top: min(30px, calc(30 / 390 * 100vw));
    padding: 0 min(43px, calc(43 / 390 * 100vw));
  }

  .service-hero__features {
    order: 3;
    position: relative;
    z-index: 1;
    display: block;
    max-width: none;
    width: min(370px, calc(370 / 390 * 100vw));
    min-height: auto;
    /* Отрицательное значение — max(), не min() (см. комментарий у
       .service-hero__media выше). */
    margin: max(-47px, calc(-47 / 390 * 100vw)) auto 0;
    padding: 0;
    border-radius: min(30px, calc(30 / 390 * 100vw));
    background: rgba(255, 255, 255, 0.7);
  }

  /* Иконка над текстом, всё по центру — как в базовом (не-мобильном)
     правиле выше (159:5268 использует ту же вертикальную раскладку, что и
     мобильный узел 226:5732: icon top-center 30×30, gap:10px, заголовок
     центрирован под ним). Прошлая мобильная адаптация ошибочно переключила
     раскладку на horizontal row/left-align — здесь просто не переопределяем
     flex-direction/justify-content/text-align, оставляя базовые column/
     center/center. */
  .service-hero__feature {
    gap: min(10px, calc(10 / 390 * 100vw));
    padding: min(40px, calc(40 / 390 * 100vw)) min(30px, calc(30 / 390 * 100vw));
  }

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

  .service-hero__feature-title {
    font-size: min(16px, calc(16 / 390 * 100vw));
    line-height: min(21px, calc(21 / 390 * 100vw));
    white-space: normal;
  }

  /* Горизонтальный разделитель вместо вертикального — тот же элемент
     (span, уже есть в разметке service-hero.njk между пунктами), просто
     другая ориентация. */
  .service-hero__feature-divider {
    display: block;
    flex-shrink: 0;
    width: min(310px, calc(310 / 390 * 100vw));
    height: 1px;
    margin-inline: auto;
    background: rgba(0, 0, 0, 0.1);
  }
}