/* ==========================================================================
   MIROLINE — первый экран: слайдер во всю ширину окна

   Три слайда лежат стопкой в одной ячейке грида и переключаются
   прозрачностью: так нет горизонтальной прокрутки и не скачет высота.
   ========================================================================== */

.hero {
  position: relative;
  width: 100%;
  min-height: min(38rem, 78vh);
  display: grid;
  overflow: hidden;
}

/* --- Слайд ------------------------------------------------------------------- */

.hero__slide {
  position: relative;
  grid-area: 1 / 1;          /* все слайды в одной ячейке — стопкой */
  display: flex;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 600ms var(--ease), visibility 600ms var(--ease);
}

.hero__slide[data-active] {
  opacity: 1;
  visibility: visible;
}

.hero__bg {
  position: absolute;
  inset: 0;
  background: var(--c-surface);
}

.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  /* увеличение уводит светлые кромки кадра за границу экрана: без него
     правый край фотографии сливается с фоном страницы */
  transform: scale(1.18);
}

/* Затемнение слева: светлый текст на светлой фотографии иначе теряется. */
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      100deg,
      rgba(22, 20, 18, .82) 0%,
      rgba(22, 20, 18, .60) 34%,
      rgba(22, 20, 18, .18) 62%,
      rgba(22, 20, 18, .12) 78%,
      rgba(22, 20, 18, .36) 100%
    );
}

/* --- Текст ------------------------------------------------------------------- */

.hero__inner {
  position: relative;
  z-index: 1;
  padding-block: var(--sp-16);
  color: var(--c-on-dark);
}

.hero__eyebrow { color: var(--c-accent-light); }

.hero__title {
  margin: var(--sp-4) 0 var(--sp-6);
  /* em, а не ch: ширина колонки не должна зависеть от того,
     успел ли загрузиться шрифт — иначе первый экран подпрыгивает */
  max-width: 9.5em;
}

.hero__lead {
  max-width: 26.5em;
  margin-bottom: var(--sp-8);
  color: rgba(244, 241, 237, .88);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

/* --- Факты -------------------------------------------------------------------- */

.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8);
  margin: var(--sp-12) 0 0;
  padding-top: var(--sp-6);
  border-top: 1px solid rgba(244, 241, 237, .24);
}

.hero__fact dt {
  font-family: var(--f-display);
  font-size: 1.75rem;
  font-weight: 300;
  line-height: 1;
  letter-spacing: var(--ls-h2);
}

.hero__fact dd {
  margin: var(--sp-1) 0 0;
  font-size: var(--fs-xs);
  color: rgba(244, 241, 237, .72);
  /* у Golos буквы шире: под 7.5em «размерный ряд» рвался на две строки */
  max-width: 9.5em;
}

/* --- Управление слайдером ------------------------------------------------------- */

.hero__controls {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: var(--sp-8);
  transform: translateX(-50%);
  width: min(var(--container), 100vw - var(--container-pad) * 2);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

.hero__dots {
  display: flex;
  gap: var(--sp-2);
}

/* Точка — не кружок, а отрезок: он лучше читается на фотографии
   и подсказывает, что слайдов немного. */
.hero__dot {
  width: 2.5rem;
  height: .1875rem;
  padding: 0;
  background: rgba(244, 241, 237, .35);
  border-radius: .1875rem;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}

.hero__dot:hover { background: rgba(244, 241, 237, .6); }

.hero__dot[aria-selected="true"] { background: var(--c-on-dark); }

.hero__arrows {
  display: flex;
  gap: var(--sp-2);
  margin-left: auto;
}

.hero__arrow {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  color: var(--c-on-dark);
  background: rgba(22, 20, 18, .35);
  border: 1px solid rgba(244, 241, 237, .3);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}

.hero__arrow:hover {
  background: rgba(22, 20, 18, .6);
  border-color: var(--c-on-dark);
}

/* --- Подгонка под высоту окна -----------------------------------------------

   Слайд занимает ровно остаток окна и кончается его нижней кромкой: верх
   уже занят топ-полосой (2.25rem) и шапкой (5.25rem плюс линия под ней).
   Высота считается по этой константе, а не по --header-h: её пересчитывает
   скрипт при скролле, и первый экран от неё бы дёргался.

   Текста в слайде много, поэтому под низкое окно подстраивается и воздух
   вокруг текста, и кегль заголовка: полный кегль держится, пока окно
   достаточно высокое, а ниже уменьшается втрое быстрее самого окна —
   иначе три строки заголовка съедают весь запас.

   svh, а не vh: на мобильных vh считает окно без выезжающей панели
   браузера, и низ слайда всё равно уходил бы за край. Браузеры без svh
   остаются на прежней вёрстке; телефоны — тоже: там первый экран
   не помещается в любом случае, а привязка кегля к высоте окна дала бы
   скачки при скролле.
   ---------------------------------------------------------------------------- */

@supports (height: 100svh) {
  @media (min-width: 768px) {
    .hero {
      --hero-offset: calc(7.5rem + 1px);
      --hero-pad: clamp(1.5rem, 5svh, 4rem);
      --hero-controls-gap: clamp(.75rem, 2.6svh, 2rem);
      /* не min-height с потолком 38rem: на высоком окне слайд иначе
         обрывается раньше края и снизу остаётся полоса светлого фона */
      min-height: calc(100svh - var(--hero-offset));
    }

    .hero__inner {
      /* снизу всегда остаётся место под точки и стрелки — 2.5rem их высота */
      padding-block: var(--hero-pad)
                     max(var(--hero-pad), calc(2.5rem + var(--hero-controls-gap) + .5rem));
    }

    .hero__title {
      font-size: clamp(2.25rem, calc(15.5svh - 4rem), var(--fs-h1));
      margin: clamp(.5rem, 1.6svh, 1rem) 0 clamp(1rem, 2.6svh, 1.5rem);
    }

    .hero__lead { margin-bottom: clamp(1rem, 3.4svh, 2rem); }

    .hero__facts {
      margin-top: clamp(1.25rem, 4.4svh, 3rem);
      padding-top: clamp(.875rem, 2.4svh, 1.5rem);
    }

    .hero__controls { bottom: var(--hero-controls-gap); }
  }
}

/* --- Адаптив ------------------------------------------------------------------ */

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

  /* вертикальный градиент: на узком экране текст стоит под фотографией */
  .hero__bg::after {
    background: linear-gradient(
      180deg,
      rgba(22, 20, 18, .36) 0%,
      rgba(22, 20, 18, .72) 52%,
      rgba(22, 20, 18, .90) 100%
    );
  }

  .hero__bg img { object-position: center 12%; }

  .hero__inner { padding-block: var(--sp-12) var(--sp-24); }

  .hero__facts {
    gap: var(--sp-6);
    margin-top: var(--sp-8);
  }

  /* стрелки на телефоне лишние — там свайп */
  .hero__arrows { display: none; }

  .hero__controls { bottom: var(--sp-6); }

}

@media (max-width: 479px) {
  .hero__fact dt { font-size: 1.375rem; }
}