/* ==========================================================================
   Московский лыжный марафон: первый экран, требования, схема трассы, место
   Общие блоки лежат в base.css — здесь только то, чем марафон отличается
   от лыжной недели. Числа перенесены из post-157.css оригинала как есть.
   ========================================================================== */

/* --- Страница ------------------------------------------------------------ */

.page-marathon {
  --page-bg: var(--red-warm);
  /* 62% непрозрачности поверх фотографии героя */
  --hero-overlay: #E9401D9E;
  --back-link-hover: var(--blue);
  /* Белый текст на #E9401D даёт всего 4.0:1, здесь — 6.4:1. См. ski.css */
  --nav-bg: #B32D14;
}

/* Контейнер во всю ширину: боковых полос, как у лыжной недели, здесь нет */

/* --- Шапка: четыре логотипа ---------------------------------------------- */

.page-marathon .page-head__inner {
  padding: 10px 0;
}

/* Доли слотов лежат в base.css: шапки двух страниц совпадают дословно. */

/* --- Первый экран --------------------------------------------------------- */

/* Внутри экрана стоит ещё и кнопка ФОТОБАНК — на лыжной неделе её тут нет */
.page-marathon .hero {
  align-items: center;
  gap: 20px;
  min-height: 82vh;
  margin: 2% 0;
  padding: 10px;
}

/* cover по той же причине, что и на лыжной неделе: при размере по ширине
   фотографии не хватало высоты и снизу зияла полоса фона.
   Отрицательная позиция сдвигает кадр вниз — сверху остаётся полоса чистого
   фона, на ней и лежит заголовок. */
.page-marathon .hero__layer {
  background-image: url("../img/photo/marathon-hero.jpg");
  background-position: 0% -14%;
  background-size: cover;
}

/* Дети сжимаются по содержимому и встают по центру. Поля обнуляем: у марафона
   экран не боксовый, и виджеты лежат прямо в секции с её собственным полем. */
.page-marathon .hero__inner {
  max-width: none;
  align-items: center;
  padding: 0;
}

/* Заголовок набран строчными: прописными он выглядит потому, что в Headline
   строчных кириллических глифов нет. text-transform в оригинале отсутствует. */

/* --- Требования к участникам ---------------------------------------------- */

.page-marathon .requirements {
  margin: 0;
}

/* Лыжник прижат влево, а не по центру, и меряется max-width */
.page-marathon .requirements__col--rules {
  text-align: left;
}

.requirements__pic {
  max-width: 64%;
}

/* --- Схема трассы --------------------------------------------------------- */

.track {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 20px;
  margin: 0 0 2%;
  padding: 0 10px;
}

/* Поле снизу не нужно: в оригинале заголовок и карта лежат в одном
   контейнере, и между ними только промежуток сетки в 20px */
.track__inner {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 10px 0 0;
}

/* Боковые поля даёт сама секция, здесь остаётся только нижнее —
   оно идёт уже после карты */
.track__map {
  padding: 0 0 10px;
}

/* Поля со всех сторон, а не только сверху и снизу: от них зависит база, от
   которой считается max-width картинки — 80% берутся от 1120, а не от 1140. */
.track__map-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 10px;
}

/* В оригинале картинка строчная и центруется выравниванием текста; у нас она
   блочная из base.css, поэтому центруем полями. */
.track__map img {
  max-width: 80%;
  margin-inline: auto;
}

/* --- Место проведения ------------------------------------------------------ */

.page-marathon .places {
  margin-block-start: 0;
}

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

/* Схема открывается в полном размере, но до сих пор ничем этого не показывала.
   Подъём с тенью — единственный отклик, который не трогает саму картинку. */
.track__link {
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.track__link:hover,
.track__link:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(4, 26, 51, 0.28);
}

@media (min-width: 768px) and (max-width: 1024px) {

  /* Логотипы слева, «назад» справа: в оригинале это две разные шапки,
     у нас одна — меняем колонки местами. */
  .page-marathon .page-head__logos { order: 1; }
  .page-marathon .page-head__back  { order: 2; }

  .page-marathon .page-head__inner,
  .track__inner,
  .track__map-inner {
    max-width: 1024px;
  }

  /* фотография прижимается к верху, размер остаётся прежним */
  .page-marathon .hero__layer {
    background-position: 0% 0%;
  }

  /* Десктопные доли ширины в колонке стали бы высотой слота */
  .page-head__slot--dep,
  .page-head__slot--mossport,
  .page-head__slot--loppet,
  .page-head__slot--grom {
    width: auto;
    flex-basis: auto;
  }
}

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

@media (max-width: 767px) {

  .page-marathon .page-head__inner {
    flex-direction: column;
    max-width: 767px;
  }

  .page-marathon .page-head__logos {
    order: 1;
    width: 100%;
    padding: 0 2%;
    column-gap: 5%;
  }

  /* Доли ширины на телефоне лежат в base.css — они общие для двух страниц. */

  .page-marathon .page-head__back {
    order: 2;
    width: 100%;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    margin: 8% 0;
    padding: 0;
  }

  .page-marathon .back-link {
    font-size: 1.3rem;
  }

  .page-marathon .hero {
    margin: 4% 0 0;
  }

  .page-marathon .hero__layer {
    background-position: center center;
    background-size: cover;
  }

  /* кегль фиксируется: общий clamp здесь отключается */
  .page-marathon .hero__text {
    font-size: 1rem;
  }

  .page-marathon .requirements {
    margin: 8% 0 0;
  }

  .page-marathon .requirements__col--rules {
    text-align: center;
  }

  .requirements__pic {
    max-width: 75%;
    margin-inline: auto;
  }

  .track {
    margin: 8% 0 0;
  }

  .track__inner,
  .track__map-inner {
    max-width: 767px;
  }

  .page-marathon .places {
    margin-block-start: 8%;
  }

  /* у марафона появляется и правое поле, на лыжной неделе его нет */
  .page-marathon .place__info {
    padding: 0 2%;
  }
}