/* ==========================================================================
   Московская лыжная неделя — базовые стили
   Общее для всех страниц: шрифты, палитра, кнопки, разделители, шапка.
   ========================================================================== */

/* --- Шрифты ------------------------------------------------------------- */

@font-face {
  font-family: "Headline";
  src: url("../fonts/headline.woff") format("woff");
  font-style: normal;
  font-weight: normal;
  font-display: swap;
}

@font-face {
  font-family: "Mossport";
  src: url("../fonts/mossport.otf") format("opentype"),
       url("../fonts/mossport.ttf") format("truetype");
  font-style: normal;
  font-weight: normal;
  font-display: swap;
}

@font-face {
  font-family: "Gotham Pro";
  src: url("../fonts/gothampro.ttf") format("truetype");
  font-style: normal;
  font-weight: normal;
  font-display: swap;
}

/* --- Палитра ------------------------------------------------------------ */

:root {
  --blue: #278EEE;
  --blue-deep: #0078C7;
  --blue-muted: #267BCA;
  --red: #E43510;
  --red-bright: #F54124;
  --red-warm: #E9401D;
  --red-dark: #DE3C11;
  --white: #FFFFFF;

  /* Градиент кнопок — из красного в синий, как в оригинале */
  --btn-gradient: linear-gradient(250deg, #E43510 25%, #278EEE 75%);

  --font-display: "Headline", sans-serif;
  --font-body: "Gotham Pro", sans-serif;
  --font-brand: "Mossport", sans-serif;

  /* Синий строк таблицы расписания. Не путать с --blue-muted: тот — фон
     страницы, на котором таблица лежит. */
  --blue-table: #377ECD;

  /* Узор разделителей-ёлочек. Заливку даёт background-color, рисунок —
     маска, поэтому цвет полосы меняется одним свойством. */
  --tree-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='xMidYMid meet' overflow='visible' height='100%25' viewBox='0 0 126 26' fill='black' stroke='none'%3E%3Cpath d='M111.9,18.3v3.4H109v-3.4H111.9z M90.8,18.3v3.4H88v-3.4H90.8z M69.8,18.3v3.4h-2.9v-3.4H69.8z M48.8,18.3v3.4h-2.9v-3.4H48.8z M27.7,18.3v3.4h-2.9v-3.4H27.7z M6.7,18.3v3.4H3.8v-3.4H6.7z M46.4,4l4.3,4.8l-1.8,0l3.5,4.4l-2.2-0.1l3,3.3l-11,0.4l3.6-3.8l-2.9-0.1l3.1-4.2l-1.9,0L46.4,4z M111.4,4l2.4,4.8l-1.8,0l3.5,4.4l-2.5-0.1l3.3,3.3h-11l3.1-3.4l-2.5-0.1l3.1-4.2l-1.9,0L111.4,4z M89.9,4l2.9,4.8l-1.9,0l3.2,4.2l-2.5,0l3.5,3.5l-11-0.4l3-3.1l-2.4,0L88,8.8l-1.9,0L89.9,4z M68.6,4l3,4.4l-1.9,0.1l3.4,4.1l-2.7,0.1l3.8,3.7H63.8l2.9-3.6l-2.9,0.1L67,8.7l-2,0.1L68.6,4z M26.5,4l3,4.4l-1.9,0.1l3.7,4.7l-2.5-0.1l3.3,3.3H21l3.1-3.4l-2.5-0.1l3.2-4.3l-2,0.1L26.5,4z M4.9,4l3.7,4.8l-1.5,0l3.1,4.2L7.6,13l3.4,3.4H0l3-3.3l-2.3,0.1l3.5-4.4l-2.3,0L4.9,4z'/%3E%3C/svg%3E");
}

/* --- Сброс -------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
}

/* Плавный переход к якорям навигации. Объявляем внутри no-preference, а не
   гасим потом в reduce: при включённой настройке свойства просто нет, и
   порядок правил ни на что не влияет. */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  /* Тема оригинала просит браузер красиво балансировать строки: без этого
     длинные абзацы переносятся в других местах. */
  text-wrap: pretty;
  /* Базовая типографика, унаследованная от темы оригинала: почти весь текст
     ниже её переопределяет, но letter-spacing доходит до дат и заголовков. */
  font-family: sans-serif;
  /* Базовый кегль оригинала плавает по ширине экрана: 18.27px на телефоне,
     22px на десктопе. От него считаются em-величины и наследуемый интерлиньяж. */
  font-size: clamp(1.125rem, 1.125rem + ((1vw - 0.2rem) * 0.392), 1.375rem);
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: -0.1px;
  color: #111;
  overflow-x: hidden;
}

img,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

p {
  margin: 0 0 1em;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: inherit;
}

/* --- Кнопка ------------------------------------------------------------- */

.btn {
  display: inline-block;
  width: 100%;
  padding: 3% 1% 3% 6%;
  border: none;
  border-radius: 5px;
  background-image: var(--btn-gradient);
  color: var(--white);
  fill: var(--white);
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.1rem;
  text-align: center;
  text-decoration: none;
  /* Наклон при наведении — фирменный жест оригинала */
  transform-origin: 0 100%;
  transition: transform 0.3s;
}

.btn:hover,
.btn:focus,
.btn:active {
  transform: skew(-10deg);
}

.btn__inner {
  display: flex;
  justify-content: center;
}

.btn__text {
  flex-grow: 1;
  order: 10;
}

.btn__icon {
  display: flex;
  align-items: flex-start;
  flex-grow: 0;
  order: 15;
  /* Бокс глифа Font Awesome в оригинале: шире и выше квадрата в 1em
     за счёт метрик шрифта */
  width: 1.1685em;
  height: 1.072em;
}

.btn__icon svg {
  display: block;
  /* Сам рисунок — ровно 1em по высоте, пропорции из viewBox 576×512 */
  width: 1.125em;
  height: 1em;
  fill: currentColor;
}

/* Кнопка без иконки — в оригинале это размер поменьше, с другим радиусом */
.btn--plain {
  padding: 2%;
  border-radius: 4px;
}

/* --- Проявление секций при прокрутке -------------------------------------- */

/* Оба класса ставит только reveal.js и только тому, что при загрузке лежит
   ниже сгиба. Без скрипта ни одно из этих правил не применяется, и страница
   остаётся обычной — прятать содержимое самим CSS здесь нечем. */
.is-reveal-pending {
  opacity: 0;
  transform: translateY(12px);
}

.is-revealed {
  opacity: 1;
  transform: none;
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

/* Печать не прокручивает, и до подготовленных секций наблюдатель не дойдёт.
   Скрипт открывает их по beforeprint, но правило страхует и его. */
@media print {
  .is-reveal-pending {
    opacity: 1;
    transform: none;
  }
}

/* --- Отклик текстовых ссылок ---------------------------------------------- */

/* У этих ссылок подчёркивание стоит всегда, поэтому наведение показываем
   его толщиной. Цветом нельзя: акцент страницы — красный на синем фоне и
   наоборот, у текстового кегля это около 1.5:1, то есть нечитаемо. */
.doc-card__link,
.place__link,
.map-block__fallback {
  transition: text-decoration-thickness 0.2s ease-in-out,
              text-underline-offset 0.2s ease-in-out;
}

.doc-card__link:hover,
.place__link:hover,
.map-block__fallback:hover {
  text-decoration-thickness: 2px;
  text-underline-offset: 0.16em;
}

/* --- Навигация по разделам ------------------------------------------------ */

/* Липнет панель, а не шапка целиком: шапка с логотипами высокая, а на планшете
   лыжной недели она вообще в полтора экрана — приклеивать её нельзя. */
.page-nav {
  position: sticky;
  top: 0;
  /* выше карт и галереи, но это единственный липкий слой на странице */
  z-index: 30;
  flex-shrink: 0;
  width: 100%;
  background-color: var(--nav-bg);
  transition: box-shadow 0.3s ease-in-out;
}

/* Тень появляется, только когда панель действительно оторвалась от шапки */
.page-nav.is-stuck {
  box-shadow: 0 6px 18px rgba(4, 26, 51, 0.28);
}

.page-nav__list {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 1140px;
  /* высота панели живёт в переменной: от неё же считается отступ якорей */
  min-height: var(--nav-h);
  margin: 0 auto;
  padding: 0 10px;
  column-gap: 2.5rem;
  list-style: none;
}

.page-nav__item {
  display: flex;
}

.page-nav__link {
  position: relative;
  display: flex;
  align-items: center;
  /* минимальная площадь нажатия пальцем */
  min-height: 44px;
  color: var(--white);
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.08rem;
  text-transform: uppercase;
  text-decoration: none;
  transition: opacity 0.2s ease-in-out;
}

.page-nav__link:hover {
  opacity: 0.75;
}

/* Два длинных пункта имеют короткую пару для телефона — там полная строка
   в экран не встаёт. Остальные пункты коротки сами по себе и пары не имеют. */
.page-nav__label--short {
  display: none;
}

/* Обводка фокуса внутрь: на телефоне полоса прокручивается, и вынесенный
   наружу контур срезался бы краем. */
.page-nav__link:focus-visible {
  outline-offset: -2px;
}

/* Подчёркивание активного пункта. Состояние держит aria-current — он же
   озвучивается читалкой, поэтому отдельного класса не нужно. */
.page-nav__link::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 9px;
  left: 0;
  height: 2px;
  background-color: var(--white);
  transform: scaleX(0);
  transition: transform 0.3s ease-in-out;
}

.page-nav__link[aria-current]::after {
  transform: scaleX(1);
}

/* Якоря секций: без этого отступа заголовок уезжает под липкую панель */
.page-body [id] {
  scroll-margin-top: calc(var(--nav-h) + 12px);
}

/* --- Каркас внутренних страниц ------------------------------------------ */

/* Синий (лыжная неделя) или красный (марафон) контейнер во всю страницу.
   Ширину и фон задаёт постраничный файл: у /ski/ контейнер уже экрана. */
.page-body {
  --nav-h: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  padding: 0;
  background-color: var(--page-bg);
}

/* Хвост страницы — пустое место под последним блоком, как .tail на главной,
   но ниже: 6vh против 10vh. */
.page-tail {
  width: 100%;
  padding: 10px;
}

.page-tail__inner {
  max-width: 1140px;
  height: 6vh;
  margin-inline: auto;
}

/* --- Шапка внутренних страниц ------------------------------------------- */

.page-head {
  width: 100%;
  padding: 0 10px;
}

.page-head__inner {
  display: flex;
  max-width: 1140px;
  margin: 0 auto;
  padding: 10px 0;
}

/* В разметке сначала логотипы, потом «назад» — это мобильный порядок.
   На десктопе кнопка уезжает влево одним order, без дубля блока. */
.page-head__back {
  order: -1;
  flex: 0 0 auto;
  width: 20%;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

/* Поля и зазор строки — постранично: у лыжной недели пять логотипов с
   дефолтными отступами, у марафона четыре и своя раскладка. */
.page-head__logos {
  flex: 0 1 auto;
  display: flex;
  align-items: center;
  /* Зазор считается от содержимого строки: четыре знака занимают 85% ряда,
     остальное — воздух между ними. Правило общее: шапки страниц совпадают. */
  justify-content: space-evenly;
  width: 80%;
  padding: 10px;
  column-gap: 15%;
  row-gap: 0;
}

/* Строки нужны только узким экранам; на десктопе они растворяются,
   и все логотипы встают в один ряд с общим зазором. */
.page-head__row {
  display: contents;
}

/* Логотипам не задана ширина: слоты сжимаются flex-ом пропорционально своим
   базисам. Базис тут — не размер файла (у вектора его нет), а доля ряда;
   абсолютные числа роли не играют, флекс смотрит только на их отношение. */
.page-head__slot {
  flex-grow: 0;
  flex-shrink: 1;
  /* без min-width:0 автоматический минимум упрётся в ширину картинки
     и сжатия не случится вовсе */
  min-width: 0;
  display: block;
  text-align: center;
}

.page-head__slot img {
  /* не block: нужна выносная часть строки, как у оригинала */
  display: inline-block;
  vertical-align: middle;
  width: 100%;
  height: auto;
}

/* Пропорции знаков: у SVG нет width/height, только viewBox, и без них браузер
   не знает высоту до загрузки файла — шапка дёргалась бы. Числа взяты из
   viewBox как есть, без округления. */
.page-head__slot--dep      img { aspect-ratio: 146.99 / 45.69; }
.page-head__slot--mossport img { aspect-ratio: 159.11 / 47.45; }
.page-head__slot--grom     img { aspect-ratio: 112.77 / 49.32; }
.page-head__slot--loppet   img { aspect-ratio: 107.07 / 41.21; }

/* Доли ряда сняты с главной, где тот же набор уже сбалансирован: знаки
   выровнены по высоте, ГРОМ на десятую крупнее — у него рисунок компактнее
   и при равной высоте он смотрится мельче остальных.
   Правила общие для обеих страниц: шапки совпадают дословно. */
.page-head__slot--dep      { flex-basis: 1220px; }
.page-head__slot--mossport { flex-basis: 1330px; }
.page-head__slot--grom     { flex-basis:  970px; }
.page-head__slot--loppet   { flex-basis: 1000px; }

/* --- Кнопка «назад» ------------------------------------------------------ */

/* Это не .btn: прозрачная, без радиуса и градиента, меняет только цвет */
.back-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 16px 28px;
  border: none;
  background-color: transparent;
  color: var(--white);
  text-decoration: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.3333;
  letter-spacing: 0.1rem;
  transition: color 0.3s ease-in-out;
}

/* Цвет наведения постраничный: красный на синей странице, синий на красной */
.back-link:hover,
.back-link:focus {
  color: var(--back-link-hover);
}

/* Стрелка отъезжает в сторону перехода — тот же жест, что у кнопки «ПЕРЕЙТИ»
   на главной, только в обратную сторону */
.back-link:hover .back-link__icon,
.back-link:focus-visible .back-link__icon {
  transform: translateX(-3px);
}

.back-link__icon {
  flex: 0 0 auto;
  transition: transform 0.3s ease-in-out;
  /* ширина глифа Font Awesome: 448 из 512 единиц em */
  width: 0.875em;
  height: 1em;
  /* 15px отступа оригинала плюс трекинг строки, которого у SVG нет */
  margin-right: calc(15px + 0.1rem);
  fill: currentColor;
}

.back-link__icon svg {
  display: block;
  width: 100%;
  /* чернила глифа — 422.6 из 512 единиц em, и он стоит выше центра строки */
  height: 0.8254em;
  margin-top: 0.03em;
}

/* --- Первый экран внутренних страниц ------------------------------------- */

/* Класс .hero занят главной, и там он значит другое: экран во всю высоту без
   полей и оверлея. Поэтому весь блок ограничен внутренними страницами. */

/* Фотография лежит отдельным слоем: в оригинале Elementor выносит фон
   в обёртку на 10% больше секции и режет её по краям. */
.page-body .hero {
  position: relative;
  width: 100%;
  margin-top: 2%;
  padding: 0 10px;
  display: flex;
  flex-direction: column;
}

/* Нижний оверлей — виден только там, куда не достаёт фото */
.page-body .hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--hero-overlay);
}

.page-body .hero__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.page-body .hero__layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 110%;
  height: 110%;
  background-repeat: no-repeat;
}

/* Верхний оверлей — тот, что тонирует саму фотографию */
.page-body .hero__layer::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--hero-overlay);
}

.page-body .hero__inner {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  row-gap: 20px;
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 10px 0;
}

.page-body .hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.1rem;
  text-align: center;
  color: var(--white);
}

.page-body .hero__text {
  font-family: var(--font-body);
  font-weight: 700;
  line-height: 1.2em;
  color: var(--white);
  text-shadow: 0 5px 10px #000;
}

/* Оригинал оставляет абзацам браузерные поля сверху и снизу, и из них
   складывается вся вертикаль блока. Сброс из этого файла тут мешает. */
.page-body .hero__text p {
  margin: 1em 0;
}

/* --- Заголовок секции ---------------------------------------------------- */

/* Один и тот же на всех секциях обеих страниц — проверено посимвольно */
.section-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.1rem;
  text-align: center;
  color: var(--white);
}

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

.requirements {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: 20px;
  padding: 10px;
}

.requirements__body {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  width: 80%;
}

.requirements__col {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 50%;
  padding: 10px;
}

.requirements__list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.3;
  color: var(--white);
}

/* Поля соседних пунктов схлопываются в один шаг — так же, как у абзацев
   оригинала, из которых этот список собран. */
.requirements__item {
  margin: 1em 0;
}

.requirements__item::before {
  content: "✓ ";
}

.requirements__lead {
  margin: 1em 0;
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.3;
  color: var(--white);
}

/* Заглушка секции: раздел есть в структуре и в навигации, а содержимого
   сезона ещё нет. Лежит рядом с .section-title — они идут парой.
   Нижнее поле держит ритм: у пустых секций нет содержимого, и без него
   заголовок следующей встаёт вплотную к заглушке предыдущей. */
.section-soon {
  margin: 1.4em 0 3.4em;
  padding: 0 10px;
  font-family: var(--font-body);
  font-weight: 400;
  text-align: center;
  color: var(--white);
}

/* --- Карточка документа --------------------------------------------------- */

.doc-card {
  display: flex;
  align-items: flex-start;
}

/* Проценты ширины не итоговые: текст рядом объявлен width:100%, и флекс
   сжимает обоих. Оставляем ту же механику — сходится на любой ширине. */
.doc-card__icon {
  width: 10%;
  /* без нулевого минимума картинка не сожмётся ниже заданной ширины, и весь
     остаток флекс снимет с текста — в оригинале сжимаются оба */
  min-width: 0;
  margin-right: 1em;
}

.doc-card--passport .doc-card__icon {
  width: 8%;
  margin-right: 1.8em;
}

.doc-card__text {
  width: 100%;
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.3;
  color: var(--white);
}

.doc-card__link {
  text-decoration: underline;
}

/* Тонкая линия с лыжником между карточками */
.doc-divider {
  display: flex;
  align-items: center;
  width: 80%;
  margin: 0 auto;
  padding: 15px 0;
}

.doc-divider::before,
.doc-divider::after {
  content: "";
  flex-grow: 1;
  border-top: 1px solid var(--white);
}

.doc-divider__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin: 0 50px;
  color: var(--white);
}

.doc-divider__icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}

/* --- Разделитель-ёлочки --------------------------------------------------- */

.tree-divider {
  display: flex;
  width: 100%;
  padding-block: 22px;
}

/* Плитка тянется по высоте полосы, ширина идёт за пропорцией 126:26 */
.tree-divider__line {
  display: flex;
  width: 86%;
  min-height: 60px;
  margin-inline: auto;
  background-color: var(--white);
  -webkit-mask-image: var(--tree-pattern);
          mask-image: var(--tree-pattern);
  -webkit-mask-size: auto 100%;
          mask-size: auto 100%;
  -webkit-mask-repeat: repeat-x;
          mask-repeat: repeat-x;
}

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

.places {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-block-start: 2%;
  padding: 0;
}

.place {
  display: flex;
  flex-direction: row;
}

.place__map {
  width: 50%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* До загрузки карты виден серый прямоугольник с внутренней виньеткой —
   ровно то, что показывает оригинал, пока не приедет API. */
/* z-index нужен не для порядка, а чтобы карта создала свой контекст наложения:
   Яндекс раздаёт своим панелям четырёхзначные z-index, и без этого они
   оказываются выше липкой навигации. */
.map-block__canvas {
  position: relative;
  z-index: 0;
  height: 90vh;
  min-height: 300px;
  background-color: #F2F2F2;
  box-shadow: inset 0 0 60px 0 rgba(0, 0, 0, 0.2);
}

/* Ссылка-подстраховка: лежит в разметке изначально и убирается скриптом
   только после того, как карта действительно нарисовалась. */
.map-block__fallback {
  position: absolute;
  inset: auto 0 0;
  padding: 1em;
  font-family: var(--font-body);
  font-weight: 400;
  text-align: center;
  color: #333;
}

.place__info {
  width: 50%;
  display: flex;
  flex-direction: column;
  /* 2% считаются от ширины ряда, а не колонки */
  padding-inline-start: 2%;
}

/* Кегль наследуется от body, а вот вес задать обязательно: там 300 */
.place__address,
.place__subtitle,
.place__routes {
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.2;
  color: var(--white);
}

.place__address,
.place__subtitle,
.place__routes p {
  margin-block: 1em;
}

.place__subtitle {
  font-size: 1em;
  font-weight: 400;
}

/* У «Альфа-Битцы» маршруты лежат одним куском текста без абзацев: переносы
   строк схлопываются в пробелы, и вертикальных полей у блока нет вовсе.
   Обернуть их в <p> — значит добавить 44px, которых в оригинале не было. */

.place__link {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.1em;
}

/* --- Кнопка ФОТОБАНК ------------------------------------------------------ */

/* Тот же .btn, но по содержимому, с полями в пикселях и иконкой слева */
.btn--photo {
  width: auto;
  padding: 20px 40px;
  font-size: 2rem;
}

.btn--photo .btn__icon {
  /* меньше 10 — значит перед текстом; шкала шагом 5 задана в base */
  order: 5;
  /* Бокс глифа округляется от кегля, а в .btn зашиты доли, снятые с кнопки
     главной (41.6px). При здешних 32px они дают лишние 0.3px высоты, и вся
     страница ниже уезжает. Свои доли: 37.6094 × 34 при 32px. */
  width: 1.1753em;
  height: 1.0625em;
  margin-right: 5px;
}

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

/* На внутренних страницах десятки ссылок, а видимого фокуса не было */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 3px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Внутренние страницы: планшет 768–1024 -------------------------------- */

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

  .page-body {
    --nav-h: 52px;
  }

  .page-nav__list {
    column-gap: 1.6rem;
  }

  .page-nav__link {
    font-size: 1rem;
  }


  /* 400vmax — так в оригинале. Похоже на «400 vmax» вместо «40 vh»,
     введённое в редакторе: на 1024×768 это больше 400 000 пикселей.
     Повторяем, чтобы геометрия совпала; снимки снимаются с SKI_FREEZE=1. */
  .map-block__canvas {
    height: 400vmax;
  }
}

/* --- Внутренние страницы: телефон ≤767 ------------------------------------ */

@media (max-width: 767px) {

  .page-body {
    --nav-h: 44px;
  }

  /* Все пункты встают в одну строку: два длинных подменяются короткими,
     кегль и зазоры ужаты. Прокрутка оставлена на случай, если в будущем
     пунктов станет больше или экран окажется совсем узким. */
  .page-nav__list {
    flex-wrap: nowrap;
    column-gap: 0.85rem;
    padding: 0 3vw;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    /* полосу прокрутки прячем: она здесь только мешает */
    scrollbar-width: none;
  }

  .page-nav__list::-webkit-scrollbar {
    display: none;
  }

  .page-nav__link {
    font-size: 0.8rem;
    letter-spacing: 0.04rem;
    white-space: nowrap;
  }

  .page-nav__label--full {
    display: none;
  }

  .page-nav__label--short {
    display: inline;
  }

  /* На телефоне слот тянулся бы по своему базису и увёл бы страницу вбок,
     поэтому доли задаются явно. Сняты с главной, где тот же ряд уже стоит
     на такой же ширине: 22 + 25 + 17 + 19 = 83%, остальные 17% — зазоры. */
  .page-head__slot--dep      { width: 22%; max-width: 22%; }
  .page-head__slot--mossport { width: 25%; max-width: 25%; }
  .page-head__slot--grom     { width: 17%; max-width: 17%; }
  .page-head__slot--loppet   { width: 19%; max-width: 19%; }

  .requirements__body,
  .requirements__col {
    width: 100%;
  }

  /* Иконка уходит на свою строку над текстом */
  .doc-card {
    display: block;
  }

  .doc-card__icon {
    width: 14%;
    margin-right: 0;
    /* в оригинале это спуск строки под строчной картинкой, а не поле */
    margin-bottom: 0.36em;
  }

  .doc-card--passport .doc-card__icon {
    width: 12%;
    margin-right: 0;
  }

  .doc-divider {
    width: 84%;
    padding: 6px 0;
  }

  .doc-divider__icon {
    width: 24px;
    height: 24px;
    margin: 0 20px;
  }

  /* Ряд переносится: карта сверху, текст под ней */
  .place {
    flex-wrap: wrap;
  }

  .place__map,
  .place__info {
    width: 100%;
  }

  .map-block__canvas {
    height: 50vh;
  }
}

/* Доступность: уважаем системную настройку «меньше движения» */
@media (prefers-reduced-motion: reduce) {
  .btn,
  .back-link__icon,
  .doc-card__link,
  .place__link,
  .map-block__fallback,
  .track-maps__link,
  .track__link,
  .page-nav,
  .page-nav__link,
  .page-nav__link::after {
    transition: none;
  }

  .btn:hover,
  .btn:focus,
  .btn:active,
  .back-link:hover .back-link__icon,
  .back-link:focus-visible .back-link__icon,
  .track-maps__link:hover,
  .track-maps__link:focus-visible,
  .track__link:hover,
  .track__link:focus-visible {
    transform: none;
  }

  /* Подчёркивание активного пункта не выезжает, а просто есть */
  .page-nav__link[aria-current]::after {
    transform: scaleX(1);
  }
}