/* ==========================================================================
   Первый экран. Макет: 1520×845, контент прижат к низу.
   ========================================================================== */

.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 52.8125rem;
  height: 100svh;
  max-height: 56.25rem;
  overflow: hidden;
  background: var(--c-spruce);
  color: var(--c-lime);
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: var(--z-bg);
}

/* Кадрирование фотографии — ровно как в макете (узел 1:254):
   зум 114.41% по ширине, сдвиг влево и вверх. object-fit: cover давал другой кадр. */
.hero__bg img {
  position: absolute;
  left: -4.73%;
  top: -10.55%;
  width: 114.41%;
  height: 121.12%;
  max-width: none;
  object-fit: cover;
  will-change: transform;
}

/* Затемнение слева, чтобы текст читался поверх фотографии */
.hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(1, 49, 59, 0.88) 0%,
      rgba(1, 49, 59, 0.74) 30%,
      rgba(1, 49, 59, 0.38) 55%,
      rgba(1, 49, 59, 0) 78%
    ),
    linear-gradient(180deg, rgba(1, 49, 59, 0.55) 0%, rgba(1, 49, 59, 0) 28%);
}

/* Блок текста поднят относительно низа: при высоком окне прежние 54px
   оставляли слишком много воздуха над надзаголовком. */
.hero__inner {
  position: relative;
  z-index: var(--z-content);
  padding-bottom: clamp(3.375rem, 19vh, 11.875rem);
}

.hero__eyebrow { max-width: 41.25rem; }

.hero__title {
  margin-top: 1.875rem;
  margin-left: -0.045em; /* оптическое выравнивание крупного кегля по сетке */
  color: var(--c-lime);
}

.hero__title span {
  display: block;
  overflow: hidden; /* маска для построчного выезда */
}

.hero__title i {
  display: block;
  font-style: normal;
}

.hero__sub {
  max-width: 33.375rem;
  margin-top: 2.5rem;
  color: var(--t-lime-75);
}

@media (max-width: 1024px) {
  .hero { min-height: 40rem; }
}

/* На телефоне текст прижимался к самому низу, и экран открывался пустотой.
   Центрируем блок по вертикали с небольшим смещением вниз. */
@media (max-width: 680px) {
  /* В вертикальной рамке от панорамы остаётся узкий срез: уводим его
     правее, где стоят освещённые колонны, иначе в кадре пустая темнота. */
  /* 68% — то же число, что MOBILE_FOCUS в MediaProcessor: телефон получает срез панорамы,
     вырезанный по этому положению, и менять их можно только вместе. */
  .hero__bg img { object-position: 68% 50%; }

  .hero {
    align-items: center;
    min-height: 35rem;
  }

  .hero__inner {
    padding-top: 4.5rem;
    padding-bottom: 0;
    transform: translateY(6%);
  }

  .hero__title { margin-top: 1.25rem; }
  .hero__sub { margin-top: 1.5rem; }

  /* Текст стоит по центру экрана, поэтому затемнение держим плотным
     именно в середине — иначе надписи ложатся на светлые детали фотографии. */
  .hero__bg::after {
    background: linear-gradient(
      180deg,
      rgba(1, 49, 59, 0.55) 0%,
      rgba(1, 49, 59, 0.74) 32%,
      rgba(1, 49, 59, 0.84) 62%,
      rgba(1, 49, 59, 0.95) 100%
    );
  }
}