/* ==========================================================================
   Московская лыжная неделя: программа, требования, трассы, расписание, места
   Числа перенесены из Elementor-стилей оригинала (post-126.css) как есть,
   включая проценты — они считаются от ширины родителя и дают ту же геометрию.
   ========================================================================== */

/* Узор разделителя внутри программы. Это другая плитка, не та, что у
   разделителей секций: viewBox 123×26 против 126×26. */
:root {
  --divider-trees: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='xMidYMid meet' overflow='visible' height='100%25' viewBox='0 0 123 26' fill='black' stroke='none'%3E%3Cpath d='M6.4,2l4.2,5.7H7.7v2.7l3.8,5.2l-3.8,0v7.8H4.8v-7.8H0l4.8-5.2V7.7H1.1L6.4,2z M25.6,2L31,7.7h-3.7v2.7l4.8,5.2h-4.8v7.8h-2.8v-7.8l-3.8,0l3.8-5.2V7.7h-2.9L25.6,2z M47.5,2l4.2,5.7h-3.3v2.7l3.8,5.2l-3.8,0l0.4,7.8h-2.8v-7.8H41l4.8-5.2V7.7h-3.7L47.5,2z M66.2,2l5.4,5.7h-3.7v2.7l4.8,5.2h-4.8v7.8H65v-7.8l-3.8,0l3.8-5.2V7.7h-2.9L66.2,2zM87.4,2l4.8,5.7h-2.9v3.1l3.8,4.8l-3.8,0v7.8h-2.8v-7.8h-4.8l4.8-4.8V7.7h-3.7L87.4,2z M107.3,2l5.4,5.7h-3.7v2.7l4.8,5.2h-4.8v7.8H106v-7.8l-3.8,0l3.8-5.2V7.7h-2.9L107.3,2z'/%3E%3C/svg%3E");
}

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

.page-ski {
  --page-bg: var(--blue-muted);
  /* 58% непрозрачности поверх фотографии героя */
  --hero-overlay: #267BCA94;
  --back-link-hover: var(--red);
  /* Панель темнее страницы не для красоты: белый текст на #267BCA даёт 4.4:1,
     а мелкому кеглю нужно 4.5:1. Здесь выходит 7.1:1, и панель заодно
     отделяется от страницы, когда прилипает. */
  --nav-bg: #1B5A94;
}

/* Контейнер уже экрана: справа остаётся белая полоса в 1.575%.
   Блок не центрирован — Elementor гасит боковые поля в ноль. */
.page-ski .page-body {
  width: 98.425%;
}

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

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

.page-ski .hero {
  min-height: 74vh;
}

/* cover, а не «100% auto»: высота блока задана в vh, а при размере по ширине
   высота фотографии от неё не зависит — ниже 1920 снизу оставалась пустая
   полоса до 404 пикселей с резкой кромкой. */
.page-ski .hero__layer {
  background-image: url("../img/photo/ski-week-hero.jpg");
  background-position: 0 8vh;
  background-size: cover;
}

/* --- Программа ------------------------------------------------------------ */

.program {
  /* без явной ширины flex-родитель ужал бы секцию по содержимому */
  width: 100%;
  margin-top: 2%;
  padding-bottom: 2%;
}

.program__inner {
  max-width: 1140px;
  margin-inline: auto;
}

/* Пять рядов оригинала — это пять отдельных строк с одинаковыми колонками
   30/40/30 (проверено во всех пяти). Поэтому одна сетка вместо пяти строк
   и вместо дубля всей секции под десктоп и телефон. */
.program__grid {
  display: grid;
  grid-template-columns: 30% 40% 30%;
  gap: 0;
}

/* Колонка гонки своей коробки не имеет: её части ложатся прямо в клетки
   общей сетки, и ряды трёх гонок выравниваются между собой. */
.program__race { display: contents; }

.program__race--night  > * { grid-column: 1; }
.program__race--kids   > * { grid-column: 2; }
.program__race--russia > * { grid-column: 3; }

.program__date { grid-row: 1; }
.program__name { grid-row: 2; }

.program__date,
.program__name {
  justify-self: center;
  align-self: center;
}

/* Даты — единственное место секции на шрифте тела. Кегль и интерлиньяж
   наследуются от body, поля дают высоту ряда. */
.program__date {
  margin: 1em 0;
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--white);
}

.program__name {
  margin: 1em 0;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: 0.1rem;
  color: var(--white);
}

/* У третьего названия в оригинале свои правила: интерлиньяж равен кеглю,
   поэтому две строки идут вплотную. Только у него. */
.program__name--two-line {
  line-height: 1em;
  text-align: center;
}

.program__divider { display: none; }

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

.page-ski .requirements {
  margin-top: 2%;
}

.requirements__pic {
  width: 60%;
  margin: 0 auto;
}

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

.track-maps {
  display: flex;
  flex-direction: column;
  width: 100%;
  /* 20px — шаг между заголовком и сеткой; у самой сетки зазор нулевой */
  gap: 20px;
  margin-top: 2%;
  padding: 10px;
}

.track-maps__grid {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 0;
  padding: 10px;
}

/* Три колонки по 30%: оставшиеся 10% выравнивание раскидывает по краям */
.track-maps__item {
  display: flex;
  flex-direction: column;
  width: 30%;
  padding: 10px;
  text-align: center;
}

.track-maps__name {
  margin: 1em 0;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.1rem;
  color: var(--white);
}

/* блочная, иначе под картинкой останется спуск строки */
.track-maps__link {
  display: block;
}

/* --- Расписание ----------------------------------------------------------- */

/* Выравнивание по центру здесь не только центрует: из-за него таблица
   ужимается по содержимому, а не растягивается на всю секцию. */
.schedule {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 80%;
  margin-inline: auto;
  padding: 10px;
}

/* Интерлиньяж вдвое меньше кегля — так в оригинале. На телефоне строка
   переносится и две строки налезают друг на друга; повторяем как есть. */
.schedule__subtitle {
  margin: 1em 0;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 400;
  line-height: 0.5em;
  letter-spacing: 0.1rem;
  color: var(--white);
  text-align: center;
}

.schedule__scroll {
  max-width: 100%;
  overflow-x: auto;
}

.schedule__table {
  width: 100%;
  /* у каждой ячейки своя рамка, между соседними выходит полоса в два пикселя */
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--font-body);
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.4;
}

.schedule__cell {
  padding: 0 10px;
  border: 1px solid var(--white);
  vertical-align: middle;
  text-align: center;
  color: var(--white);
  background-color: var(--blue-table);
}

.schedule__cell--head {
  background-color: var(--red-dark);
  font-weight: 700;
  vertical-align: baseline;
}

.schedule__cell--time { font-weight: 700; }

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

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

.track-maps__link:hover,
.track-maps__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-ski .hero__layer {
    /* сдвиг фотографии вниз на этой вилке снимается */
    background-position: 0 0;
  }

  /* Шапка оригинала на этой вилке сломана, и это надо повторить: мобильные
     контейнеры показываются уже с 1024, а раскладку им задали только с 767.
     В промежутке они падают на дефолты — колонка во всю ширину. */
  .page-head {
    padding: 0;
  }

  .page-head__inner,
  .page-head__logos {
    display: contents;
  }

  .page-head__row,
  .page-head__back {
    order: 0;
    width: 100%;
    margin: 0;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .page-head__back {
    display: block;
    text-align: center;
  }

  .page-head__slot {
    /* иначе десктопный flex-basis станет высотой колонки */
    flex-basis: auto;
    width: 100%;
  }

  .page-head__slot img {
    width: auto;
    max-width: 100%;
  }

  /* Шапка здесь встаёт колонкой, и десктопный flex-basis превратился бы в
     высоту слота. Общий сброс .page-head__slot выше по файлу перебивается
     модификаторами из base.css — у них специфичность та же, но объявлены они
     раньше, поэтому гасим их поимённо. */
  .page-head__slot--dep,
  .page-head__slot--mossport,
  .page-head__slot--grom,
  .page-head__slot--loppet {
    flex-basis: auto;
  }

  /* Здесь оригинал сломан, и это воспроизводится намеренно: десктопный блок
     программы прячется уже с 1024, а показанному вместо него мобильному
     раскладку задали только с 767. В промежутке шесть детей — три колонки
     и три разделителя — делят строку в долях 3:10, колонки схлопываются
     до 7.7%, и текст с кнопкой вылезают за их края. */
  .program__grid {
    display: flex;
    flex-direction: row;
  }

  .program__race {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 7.6923%;
    flex-shrink: 0;
  }

  .program__divider {
    display: flex;
    align-items: center;
    width: 25.641%;
    flex-shrink: 0;
  }

  .program__date,
  .program__name {
    width: 100%;
    margin: 1em 0;
    text-align: start;
  }

  /* у мобильного блока своя типографика: интерлиньяж наследуемый, без центра */
  .program__name--two-line {
    line-height: 1.4;
    text-align: start;
  }

}

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

@media (max-width: 767px) {

  .page-ski .page-body {
    width: 100%;
  }

  .page-head {
    padding: 0;
  }

  .page-head__inner,
  .page-head__logos {
    display: contents;
  }

  /* Ряд один: второго, с «Москвой» и ГРОМом, больше нет.
     Проценты вертикальных полей считаются от ширины контейнера. */
  .page-head__row {
    order: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    width: 100%;
    margin: 2% 0 0;
    padding: 0;
    /* 83% ширины занимают сами знаки, на три зазора остаётся 17% */
    column-gap: 5%;
    row-gap: 0;
  }

  .page-head__slot {
    flex: 0 0 auto;
    flex-basis: auto;
  }

  .page-head__back {
    order: 0;
    /* иначе выравнивание корня утащит кнопку в середину */
    align-self: flex-start;
    display: block;
    width: 40vw;
    margin: 8% 0;
    padding: 0;
    text-align: center;
  }

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

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

  .page-ski .hero__layer {
    background-position: 58% 0;
    background-size: cover;
  }

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

  .program {
    margin-top: 4%;
  }

  .program__inner {
    max-width: none;
  }

  .program__grid {
    display: flex;
    flex-direction: column;
    gap: 3em 0;
  }

  .program__race {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
  }

  /* Текст отбит от края полем каждого блока, а не полем контейнера. Ширина
     именно auto: при 100% блок вылезал бы за экран ровно на величину поля. */
  .program__date,
  .program__name {
    width: auto;
    max-width: 100%;
    margin: 1em 0 1em 12%;
    text-align: start;
  }

  .program__date { line-height: 1em; }

  /* интерлиньяж вдвое меньше кегля: буквы вылезают из строки сверху и снизу,
     так оригинал ужимает вертикаль */
  .program__name {
    line-height: 0.5em;
    letter-spacing: 0.1rem;
  }

  .program__name--two-line {
    line-height: 0.9em;
    text-align: start;
  }

  .program__divider {
    display: flex;
    align-items: center;
    width: 100%;
    height: 20px;
    margin: 0;
    padding: 2px 0;
    border: 0;
  }

  .program__divider::before {
    content: "";
    display: block;
    width: 82%;
    min-height: 16px;
    margin-inline: auto;
    background-color: var(--white);
    -webkit-mask-image: var(--divider-trees);
            mask-image: var(--divider-trees);
    -webkit-mask-size: auto 100%;
            mask-size: auto 100%;
    -webkit-mask-repeat: repeat-x;
            mask-repeat: repeat-x;
  }

  .page-ski .requirements {
    margin-top: 4%;
  }

  .track-maps {
    margin-top: 4%;
  }

  .track-maps__grid {
    flex-direction: column;
  }

  .track-maps__item {
    width: 100%;
  }

  .schedule {
    width: 100%;
  }

  /* Ёлочки на телефоне ужимаются только здесь: на марафоне остаются 86% */
  .tree-divider__line {
    width: 75%;
  }

  .places {
    margin-block-start: 4%;
  }
}