@charset "UTF-8";
/* Первый экран внутренней страницы: фото + заголовок Line. Высота 300 / 500 / 480.
   Sticky: следующая секция наезжает на него на 46 / 92 / 16 (её отрицательный отступ) и уезжает поверх —
   поэтому у заголовка снизу запас на наезд + 14 / 22 / 24 по макету.
   Поля — gutter (на xl 28, в макете 24): заголовок по одной линии с логотипом шапки и сеткой.
   Фото крупнее блока — кадр задают переменные (API блока): --page-hero-image-width (ширина от блока),
   --page-hero-image-x / -y (сдвиг translate). Значения по умолчанию (fallback в var()) — кадр «Тренеров»
   (ширина 666 / 1236 / 1572 при экране 390 / 768 / 1440); своя страница задаёт их миксом — от порядка
   подключения CSS это не зависит. Фото не ниже блока (min-height + cover) — на узких экранах без просвета.
   --tall — высота 480 / 520 / 560, отступ заголовка 60 (следующая панель наезжает на 24 / 28 / 32).
   --large — высота 680 / 620 / 560, заголовок H1 вместо Line («Академия»), снизу 48 / 46 / 60
   (в них уходит наезд следующего блока 24 / 24 / 32).
   --static — без закрепления (следующий блок наезжает обычным потоком).
   --white — белый заголовок (по умолчанию зелёный).
   --dim — затемнение фото 20% (::after поверх фото, под заголовком).
   __stories — кружки историй справа от заголовка, только с md (на телефоне страница выводит их в панели).
   __body — заголовок и необязательная карточка записи (booking-tile): телефон — столбиком через 32,
   с md — в ряд, карточка справа по нижнему краю. */
.page-hero {
  position: sticky;
  top: 0;
  display: flex;
  align-items: flex-end;
  height: 18.75rem;
  padding-bottom: 3.75rem;
  overflow: hidden;
  background-color: var(--color-gray);
  padding-inline: 0.875rem;
}
@media (min-width: 768px) {
  .page-hero {
    padding-inline: 1.375rem;
  }
}
@media (min-width: 1280px) {
  .page-hero {
    padding-inline: 1.75rem;
  }
}
@media (min-width: 768px) {
  .page-hero {
    height: 31.25rem;
    padding-bottom: 7.125rem;
  }
}
@media (min-width: 1280px) {
  .page-hero {
    height: 30rem;
    padding-bottom: 2.5rem;
  }
}
.page-hero--tall {
  height: 30rem;
  padding-bottom: 3.75rem;
}
@media (min-width: 768px) {
  .page-hero--tall {
    height: 32.5rem;
  }
}
@media (min-width: 1280px) {
  .page-hero--tall {
    height: 35rem;
  }
}
.page-hero--large {
  height: 42.5rem;
  padding-bottom: 3rem;
}
@media (min-width: 768px) {
  .page-hero--large {
    height: 38.75rem;
    padding-bottom: 2.875rem;
  }
}
@media (min-width: 1280px) {
  .page-hero--large {
    height: 35rem;
    padding-bottom: 3.75rem;
  }
}
.page-hero--static {
  position: relative;
}
.page-hero__image {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--page-hero-image-width, 170.8%);
  max-width: none;
  height: auto;
  min-height: 100%;
  object-fit: cover;
  transform: translate(var(--page-hero-image-x, -50%), var(--page-hero-image-y, -16.7%));
}
@media (min-width: 768px) {
  .page-hero__image {
    width: var(--page-hero-image-width, 161%);
    transform: translate(var(--page-hero-image-x, -50%), var(--page-hero-image-y, -25%));
  }
}
@media (min-width: 1280px) {
  .page-hero__image {
    width: var(--page-hero-image-width, 109.2%);
    transform: translate(var(--page-hero-image-x, -50%), var(--page-hero-image-y, -22%));
  }
}
.page-hero--dim::after {
  position: absolute;
  inset: 0;
  background-color: var(--color-black-20);
  content: "";
}
.page-hero__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2rem;
}
@media (min-width: 768px) {
  .page-hero__body {
    flex-direction: row;
    gap: 0.5rem;
    align-items: flex-end;
    justify-content: space-between;
  }
}
.page-hero__title {
  font-family: var(--font-heading);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 5rem;
  line-height: 0.85;
}
@media (min-width: 768px) {
  .page-hero__title {
    font-size: 8.5rem;
  }
}
@media (min-width: 1280px) {
  .page-hero__title {
    font-size: 12.5rem;
  }
}
.page-hero__title {
  color: var(--color-green);
}
.page-hero__stories {
  --stories-display: none;
}
@media (min-width: 768px) {
  .page-hero__stories {
    --stories-display: flex;
  }
}
.page-hero--large .page-hero__title {
  font-family: var(--font-heading);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 4rem;
  line-height: 0.85;
}
@media (min-width: 768px) {
  .page-hero--large .page-hero__title {
    font-size: 5.5rem;
    line-height: 0.86;
  }
}
@media (min-width: 1280px) {
  .page-hero--large .page-hero__title {
    font-size: 7.5rem;
    line-height: 0.85;
  }
}
.page-hero--white .page-hero__title {
  color: var(--color-white);
}