/* Первый экран Главной, 03.11: общий снимок команды — фон на весь экран,
   шапка, адрес, заголовок и кнопка — поверх снимка.
   Заменяет rh-hero-team-20261102.css: тот ставил снимок статично и уводил
   текст под кадр (на 1440 заголовок оказывался ниже первого экрана).
   Шрифты и цвета — токены темы (style-*.css): Oranienbaum, Ubuntu, бирюза. */

.hero.hero--cover {
  --rh-hero-x: max(24px, calc(min(250px, calc(250 / 1440 * 100vw)) - var(--crop) + 24px));
  position: relative;
  isolation: isolate;
  height: 100vh;
  height: 100svh;
  min-height: 620px;
  max-height: 1200px;
  padding: 0;
  display: block;
  overflow: hidden;
  background: #171717;
}

.hero--cover picture {
  position: absolute;
  inset: 0;
  z-index: -2;
}

/* Фокус кадра: люди стоят в полосе 43–80 % высоты снимка. 45 % по вертикали
   оставляет над головами стену под заголовок, под ногами — пол под кнопку. */
.hero--cover .hero__background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
}

.hero--cover .hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgb(23 23 23 / .9) 0%, rgb(23 23 23 / .6) 20%, rgb(23 23 23 / .12) 38%, rgb(23 23 23 / 0) 48%, rgb(23 23 23 / 0) 72%, rgb(23 23 23 / .7) 86%, rgb(23 23 23 / .96) 100%),
    linear-gradient(90deg, rgb(23 23 23 / .45) 0%, rgb(23 23 23 / 0) 38%);
}

.hero--cover .site-address {
  z-index: 1;
  text-shadow: 0 1px 12px rgb(0 0 0 / .5);
}

.hero--cover .hero__content {
  position: absolute;
  top: clamp(112px, 15svh, 210px);
  left: var(--rh-hero-x);
  right: var(--rh-hero-x);
  width: auto;
  max-width: none;
  z-index: 1;
}

.hero--cover .hero__eyebrow {
  margin: 0 0 clamp(12px, 1.4vw, 22px);
  font-size: clamp(12px, .97vw, 15px);
  line-height: 1.6;
  letter-spacing: .12em;
}

.hero--cover .hero__headline {
  max-width: 14em;
  margin: 0;
  font-size: clamp(44px, min(5vw, 9svh), 100px);
  line-height: .98;
  text-shadow: 0 2px 28px rgb(0 0 0 / .35);
}

/* Нижняя полоса над полом: тонкая линия во всю ширину с бирюзовым началом,
   слева подзаголовок, справа кнопка. */
.hero--cover .hero__foot {
  position: absolute;
  left: var(--rh-hero-x);
  right: var(--rh-hero-x);
  bottom: clamp(28px, 5svh, 56px);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding-top: clamp(18px, 1.8vw, 26px);
  border-top: 1px solid rgb(255 255 255 / .16);
}

.hero--cover .hero__foot::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 96px;
  height: 1px;
  background: var(--color-teal-500);
}

.hero--cover .hero__subtext {
  max-width: 34em;
  padding-left: 16px;
  font-size: clamp(15px, 1.2vw, 19px);
  line-height: 1.55;
}

.hero--cover .hero__subtext::before {
  top: 3px;
  bottom: 3px;
  width: 2px;
  border-radius: 0;
}

.hero--cover .hero__button {
  position: relative;
  top: auto;
  left: auto;
  flex: 0 0 auto;
  order: 0;
  width: auto;
  min-width: 260px;
  height: 60px;
  margin: 0;
  padding-inline: 28px;
  font-size: 15px;
  background: rgb(23 23 23 / .35);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.hero--cover .hero__button .btn__arrow {
  width: 14px;
  height: 14px;
}

/* Узкий экран и вертикальный планшет, 09.11: вся команда целиком —
   широкий кадр 1840×1240 (≈ 1,484 : 1) сверху, под шапкой и адресом;
   текст начинается под ногами, на полу кадра. Раньше тут был квадратный
   кадр из середины группы — по краям обрезало человек по шесть. */
@media (max-width: 700px), (max-aspect-ratio: 4/5) {
  .hero.hero--cover {
    --rh-hero-x: calc(var(--mobile-side) + 20px);
    height: auto;
    min-height: 0;
    max-height: none;
    padding: calc(100vw * .674 + 24px - 9vw) var(--rh-hero-x) 40px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  /* Кадр на 24px ниже: адрес справа под шапкой не ложится на головы. */
  .hero--cover picture {
    inset: 24px 0 auto;
    height: calc(100vw * .674);
  }

  .hero--cover .hero__background {
    height: 100%;
    object-position: 50% 50%;
  }

  .hero--cover .hero__scrim {
    inset: 24px 0 auto;
    height: calc(100vw * .674 + 2px);
    background:
      linear-gradient(90deg, rgb(23 23 23 / .6) 0%, rgb(23 23 23 / 0) 3%, rgb(23 23 23 / 0) 97%, rgb(23 23 23 / .6) 100%),
      linear-gradient(180deg, rgb(23 23 23 / .82) 0%, rgb(23 23 23 / .2) 20%, rgb(23 23 23 / 0) 32%, rgb(23 23 23 / 0) 80%, rgb(23 23 23 / .8) 92%, #171717 100%);
  }

  .hero--cover .hero__content,
  .hero--cover .hero__foot {
    position: relative;
    inset: auto;
    width: auto;
  }

  /* Базовый style-*.css на узком экране ставит .hero__content order: 1. */
  .hero--cover .hero__content {
    order: 0;
  }

  .hero--cover .hero__foot {
    order: 1;
  }

  .hero--cover .hero__eyebrow {
    max-width: 30em;
    margin-bottom: 10px;
    font-size: 11px;
    letter-spacing: .09em;
  }

  .hero--cover .hero__headline {
    font-size: clamp(34px, 10.2vw, 44px);
    line-height: 1.04;
  }

  .hero--cover .hero__foot {
    flex-direction: column;
    align-items: stretch;
    gap: 22px;
    margin-top: 22px;
    padding-top: 18px;
  }

  .hero--cover .hero__subtext {
    font-size: 14px;
  }

  .hero--cover .hero__button {
    width: 100%;
    min-width: 0;
    height: 56px;
  }
}

/* Вертикальный планшет (шире 700px): та же схема «кадр сверху, текст под
   ним», но поля текста обычные, а не колонка телефона по центру. */
@media (min-width: 701px) and (max-aspect-ratio: 4/5) {
  .hero.hero--cover {
    --rh-hero-x: max(40px, 6vw);
    padding-bottom: 64px;
  }

  .hero--cover picture,
  .hero--cover .hero__scrim {
    top: 72px;
  }

  .hero.hero--cover {
    padding-top: calc(100vw * .674 + 72px - 4vw);
  }

  .hero--cover .hero__eyebrow {
    font-size: 13px;
  }

  .hero--cover .hero__headline {
    font-size: clamp(44px, 7.4vw, 76px);
  }

  .hero--cover .hero__subtext {
    font-size: 16px;
  }

  .hero--cover .hero__foot {
    flex-direction: row;
    align-items: center;
  }

  .hero--cover .hero__button {
    width: auto;
    min-width: 260px;
  }
}