/* ==========================================================================
   Главная страница: фон сезона и наложенная на него шапка
   Позиции, кегль и интерлиньяж сняты с макетов и заданы в процентах и vw:
   композиция задумана заодно с фоном и тянется вместе с ним.
   ========================================================================== */

/* Страница — это одна картинка, всё остальное лежит на ней. Раскол под ней
   виден в двух случаях: если картинка не загрузилась (иначе белый текст остался
   бы на белом) и в портретном окне планшета, где кадр 16:9 короче экрана. */
.page-home {
  background-image: linear-gradient(90deg, var(--blue-deep) 50%, var(--red-bright) 50%);
}

/* --- Фон ------------------------------------------------------------------ */

/* Картинка во всю ширину в своей пропорции: видна целиком на любом экране,
   ничего не срезано. Высоту задаёт она же, ниже ляжет остальная главная. */
.bg {
  position: relative;
}

.bg__picture,
.bg__picture img {
  display: block;
  width: 100%;
  height: auto;
}

/* Затемнение под даты. Внизу кадра снег и светлые дуги, по ним белый текст
   не читается, а плашка перекрыла бы рисунок — поэтому тень, сходящая на нет.
   Цвет не чёрный, а тёмно-синий: на красной половине чёрный даёт грязь. */
.bg::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 50%;
  /* Непрозрачность подобрана по замеру: под самой верхней строкой снег даёт
     около 230 по яркости, и белому тексту нужно увести фон ниже 118 —
     это контраст 4.5:1, порог для мелкого шрифта. */
  background-image: linear-gradient(to top,
    rgba(4, 26, 51, 0.84) 0%,
    rgba(4, 26, 51, 0.56) 40%,
    rgba(4, 26, 51, 0) 100%);
  pointer-events: none;
}

/* --- Логотипы ------------------------------------------------------------- */

/* Ширина у каждого своя, снята с макета; высоту знак берёт из собственных
   пропорций, а ряд выравнивается по общей средней линии. Одну высоту всем
   задавать нельзя — знаки разной формы, и они полезут друг на друга. */
.brand__logo {
  position: absolute;
  top: 8%;
  transform: translateY(-50%);
  height: auto;
}

.brand__logo--dep      { left: 13.2%; width: 12.2%; }
.brand__logo--mossport { left: 28.1%; width: 13.3%; }
.brand__logo--grom     { left: 57.8%; width:  9.7%; }
.brand__logo--loppet   { left: 70.9%; width: 10.0%; }

/* --- Названия гонок -------------------------------------------------------- */

/* Название гонки целиком — ссылка на её раздел */
.race {
  position: absolute;
  top: 15.4%;
  font-family: var(--font-brand);
  /* с макета: строка 76px при шаге 104 на ширине 1920 */
  font-size: 5.7vw;
  line-height: 0.95;
  margin: 0;
  color: var(--white);
  text-decoration: none;
  /* поверх затемнения: оно перекрывает низ кадра, а на узком экране
     достаёт и до названий */
  z-index: 1;
}

/* --- Кнопка перехода ------------------------------------------------------- */

/* Это span внутри ссылки, а не своя ссылка: кликается вся область названия,
   кнопка только показывает, что область кликабельна.
   Обводка вместо градиента --btn-gradient: сплошная плашка на афише перекрыла
   бы рисунок и спорила бы с сине-красным расколом фона. */
.race__go {
  display: flex;
  align-items: center;
  /* по содержимому, иначе плашка растянулась бы на всю ширину колонки */
  width: max-content;
  margin-top: 0.7em;
  padding: 0.62em 1.15em;
  border: 0.12em solid rgba(255, 255, 255, 0.85);
  border-radius: 4px;
  /* Подложка тёмная, а не полупрозрачно-белая: под кнопкой снег с яркостью
     около 185, и белая подпись на нём давала 2:1. Тот же цвет и тот же приём,
     что у затемнения под датами, — фон уходит к 100, контраст выше 5:1. */
  background-color: rgba(4, 26, 51, 0.55);
  font-family: var(--font-display);
  /* Доля ширины держит кнопку в масштабе афиши, но на узком экране 1.15vw —
     это 9px, поэтому снизу и сверху стоят пределы в rem. */
  font-size: clamp(0.85rem, 1.15vw, 1.6rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.1rem;
  /* фирменный жест сайта — тот же скос, что у .btn */
  transform-origin: 0 100%;
  transition: transform 0.3s, background-color 0.3s, border-color 0.3s, color 0.3s;
}

/* Правая колонка прижата к своему краю, и скос ведём от него же — иначе
   кнопка уезжает от текста, а не наклоняется под ним. */
.race--marathon .race__go {
  margin-left: auto;
  transform-origin: 100% 100%;
}

.race__arrow {
  display: block;
  width: 0.875em;
  height: 1em;
  margin-left: 0.8em;
  transition: transform 0.3s;
}

/* пропорции из viewBox 448×512 */
.race__arrow svg {
  display: block;
  width: 0.875em;
  height: 1em;
  fill: currentColor;
}

/* Наведение и фокус ловим на всей ссылке: кнопка — только её индикатор */
.race:hover .race__go,
.race:focus-visible .race__go {
  transform: skew(-10deg);
  border-color: var(--white);
  background-color: var(--white);
  color: var(--race-accent);
}

.race:hover .race__arrow,
.race:focus-visible .race__arrow {
  transform: translateX(0.25em);
}

/* Акцент каждой половины: им красится текст кнопки, когда она залита белым.
   Берём цвет своей стороны раскола, чтобы кнопка читалась частью композиции. */
.race--week {
  left: 2.9%;
  width: 33.1%;
  --race-accent: var(--blue-deep);
}

.race--marathon {
  right: 1.9%;
  width: 32.9%;
  text-align: right;
  --race-accent: var(--red-bright);
}

/* Переносы на десктопе и телефоне разные, поэтому каждая строка лежит своим
   span: блочный начинает новую строку, строчные идут подряд. */
.race__line {
  display: inline;
}

/* Блочная строка занимала бы всю ширину блока, и подчёркивание по наведению
   тянулось бы за текстом в пустоту. Ширина по содержимому этого не даёт;
   у правой колонки она же прижимает строку к правому краю. */
.race__line--last,
.race__line--first {
  display: block;
  width: max-content;
  max-width: 100%;
}

.race--marathon .race__line {
  margin-left: auto;
}

/* --- Даты гонок ------------------------------------------------------------ */

/* Даты лежат на картинке, у её нижнего края. Слева лыжная неделя, справа
   марафон — как на сайте. Кегли в vw, чтобы блок жил в одном масштабе с
   рисунком и логотипами над ним. */
.events {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding-bottom: 2.4%;
  /* затемнение — это ::after блока .bg, то есть последний его ребёнок, и без
     этого оно легло бы поверх текста и притушило бы его вместе с картинкой */
  z-index: 1;
}

.events__side {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.events__side--week {
  padding-left: 2.9%;
}

/* Обе колонки прижаты к низу, но у марафона строка одна — без этого отступа
   она встала бы вровень с последней строкой недели, а на сайте она выше. */
.events__side--marathon {
  align-items: flex-end;
  padding-right: 1.9%;
  padding-bottom: 1.1%;
  text-align: right;
}

.event {
  margin: 0.3em 0;
  color: var(--white);
  /* Тонкая тень поверх затемнения: держит буквы на светлых бликах снега,
     где одного градиента впритык хватает. */
  text-shadow: 0 1px 6px rgba(4, 26, 51, 0.5);
  font-family: var(--font-display);
  text-transform: uppercase;
}

/* Число крупное, месяц мелкий — так набрано на сайте */
.event__day {
  font-size: 1.75vw;
}

.event__when {
  margin: 0 0.4em 0 0.3em;
  font-size: 0.98vw;
}

.event__name {
  font-size: 1.75vw;
}

/* Первый экран должен помещаться в окно целиком: даты берут свою высоту,
   картинка — остаток. Пропорции у картинки 16:9, остаток ниже, поэтому верх и
   низ подрезаются. Резать можно: рисунок декоративный, текста и знаков на нём
   нет, а логотипы и названия лежат поверх и держатся за края блока.
   Условие по пропорции, а не по ширине: в узком и высоком окне остаток
   получается портретным, и та же подрезка съела бы картинку с боков. */
@media (min-aspect-ratio: 5/4) {

  /* Именно height, а не min-height: минимум контейнер бы перерос под
     картинку, и сжимать её стало бы нечего. */
  .page-home {
    display: flex;
    flex-direction: column;
    height: 100vh;
  }

  .bg {
    flex: 1 1 auto;
    /* иначе flex-элемент не даст себя сжать ниже высоты картинки */
    min-height: 0;
  }

  .bg__picture,
  .bg__picture img {
    height: 100%;
  }

  /* Кадр смещён вверх: снизу однотонный снег, сверху небо с логотипами —
     терять по краям нечего, а лыжник остаётся целиком. */
  .bg__picture img {
    object-fit: cover;
    object-position: 50% 42%;
  }

  /* Блок стал ниже картинки, и проценты от его высоты прижали бы логотипы к
     самому краю. Здесь отступы сверху — в vw: картинка при подрезке тянется
     по ширине, поэтому доля ширины держит композицию в прежнем масштабе.
     4.5vw и 8.7vw — это те же 8% и 15.4% от кадра 16:9. */
  .brand__logo {
    top: 4.5vw;
  }

  .race {
    top: 8.7vw;
  }
}

/* --- Планшет: 768–1024 ------------------------------------------------------ */

/* В портретном окне планшета кадр 16:9 вдвое короче экрана, и афиша висела бы
   полоской сверху. Тянуть её на всю высоту нельзя: cover срезал бы композицию
   с боков. Поэтому ставим по центру, а раскол сверху и снизу работает рамкой.
   В альбомном окне этого не видно — там действует правило по пропорции выше. */
@media (min-width: 768px) and (max-width: 1024px) {

  .page-home {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
  }
}

/* --- Мобильная раскладка ---------------------------------------------------- */

@media (max-width: 767px) {

  /* Здесь тоже один экран на всю высоту. Картинка вертикальная, 9:16, а окно
     телефона ещё уже — подрезается она с боков, по краям только ёлки.
     dvh, а не vh: в мобильных браузерах vh считается по окну без адресной
     строки, и низ кадра вместе с датами уезжал бы под неё. */
  .page-home {
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
  }

  .bg {
    flex: 1 1 auto;
    min-height: 0;
  }

  .bg__picture,
  .bg__picture img {
    height: 100%;
  }

  .bg__picture img {
    object-fit: cover;
    object-position: 50% 50%;
  }

  /* Картинка вертикальная, строк на ней четыре в столбик — тень выше и
     набирает силу раньше: под верхней строкой здесь светлый склон, и по
     замеру пологий десктопный градиент не дотягивал до порога 4.5:1. */
  .bg::after {
    height: 46%;
    background-image: linear-gradient(to top,
      rgba(4, 26, 51, 0.84) 0%,
      rgba(4, 26, 51, 0.6) 50%,
      rgba(4, 26, 51, 0) 100%);
  }

  /* Логотипы идут одним рядом и мельче */
  .brand__logo {
    top: 6%;
  }

  .brand__logo--dep      { left:  2.0%; width: 22.4%; }
  .brand__logo--mossport { left: 30.0%; width: 25.6%; }
  .brand__logo--grom     { left: 57.8%; width: 17.4%; }
  .brand__logo--loppet   { left: 78.0%; width: 19.4%; }

  /* Здесь каждое название в три строки, поэтому блочные все */
  .race {
    top: 13.8%;
    font-size: 9.9vw;
  }

  .race__line {
    display: block;
  }

  .race--week {
    left: 2.6%;
    width: 52%;
  }

  .race--marathon {
    right: 1.5%;
    width: 41.5%;
  }

  /* Экран узкий, и та же доля ширины дала бы совсем мелкую подпись */
  .race__go {
    margin-top: 0.6em;
    font-size: clamp(0.8rem, 3.2vw, 1.1rem);
  }

  /* Половины становятся строками одна под другой и обе идут от левого края */
  .events {
    grid-template-columns: 1fr;
    padding-bottom: 6%;
  }

  .events__side {
    padding-left: 6%;
    padding-right: 6%;
  }

  .events__side--marathon {
    align-items: flex-start;
    padding-bottom: 0;
    text-align: left;
  }

  /* Кегль и просветы на телефоне свои: строки идут в столбик, все четыре
     подряд, и чем короче колонка, тем меньше картинки под тенью. */
  .event {
    margin: 0.34em 0;
  }

  .event__day,
  .event__name {
    font-size: 4.6vw;
  }

  .event__when {
    font-size: 2.7vw;
  }
}

/* --- Доступность ------------------------------------------------------------ */

/* Системная настройка «меньше движения»: кнопка остаётся, но не наклоняется
   и стрелка не едет — заливка и цвет сообщают то же самое без анимации. */
@media (prefers-reduced-motion: reduce) {
  .race__go,
  .race__arrow {
    transition: none;
  }

  .race:hover .race__go,
  .race:focus-visible .race__go,
  .race:hover .race__arrow,
  .race:focus-visible .race__arrow {
    transform: none;
  }
}