/* ============================================================
   Разделы-композиции: раскладка из макета, один в один.

   Каждый раздел – рамка с пропорциями макета (--ar), внутри элементы стоят
   абсолютно, в процентах от рамки, кегли заданы в единицах контейнера.
   На широких экранах это точная копия макета.

   На узких экранах раздел НЕ пересобирается. Он вписывается в экран
   масштабом (js/case-fit.js): пока масштаб не мельче 0.55, блок просто
   уменьшается и остается точно таким же, как в макете. Если по-другому он
   стал бы нечитаемым, включается горизонтальная прокрутка внутри рамки –
   дизайн опять не меняется, просто блок листается.
   ============================================================ */

.map {
  position: relative;
  /* Контейнер для кеглей нужен и самому разделу: сцену получают не все (у
     табличного раздела свои карточки), и без этого cqw считался от страницы –
     кегли вырастали в 1.7 раза. У разделов со сценой ближайшим контейнером
     остается она. */
  container-type: inline-size;
  aspect-ratio: var(--ar, 1432 / 900);
  border-radius: 16px;
  overflow: clip;
  min-width: 0;
}
.map--dark { color: #f4f4f4; }

/* Абсолютны и прямые дети раздела, и дети обертки .map__grid: display: contents
   меняет только раскладку, а селектор `.map > *` до внуков не достает – из-за
   этого табличный раздел на десктопе распирало с 278 до 1101px */
/* Композицию держит сцена .map__stage: карточка раздела растягивается на всю
   ширину колонки, а сцена сохраняет макетную ширину и уменьшается масштабом.
   Абсолютны и дети сцены, и дети .map__grid: display: contents меняет только
   раскладку, а селектор до внуков не достает – табличный раздел распирало. */
.map > *, .map__stage > *, .map__grid > * { position: absolute; margin: 0; }
/* Сцена прижата к ЛЕВОМУ краю карточки – как в «Исследовании». По центру она
   выглядела чужеродно: у широкого блока композиция заполняет карточку и стоит
   слева, а у узкого висела в середине с воздухом с двух сторон. */
.map__stage {
  position: absolute; top: 0; left: 0;
  container-type: inline-size; transform-origin: top left;
}
.map .t { line-height: 1.2; }
/* градиентная заливка текста из макета */
.map .t--grad {
  -webkit-background-clip: text; background-clip: text; color: transparent;
  background-repeat: no-repeat;
}
@media (forced-colors: active) { .map .t--grad { background: none; color: CanvasText; } }
.map .f-hand { font-family: "Neucha", cursive; font-weight: 400; }
.map .f-note { font-family: "Neucha", "Inter", sans-serif; font-weight: 400; }
.map .f-ui { font-family: "Inter", -apple-system, sans-serif; }
/* картинка = рамка макета с кадрированным фоном, поэтому это span */
/* у картинок внутри плашек углы всегда скруглены: в макете радиус 10, а без
   него на темном фоне были видны прямые углы */
.map .m-img { display: block; background-repeat: no-repeat; border-radius: 10px; }
.map .m-vec { display: block; height: auto; }
/* рукописный заголовок в кривых: платный шрифт не нужен */
.map .m-hand { display: block; height: auto; }
.map .m-box { display: block; box-sizing: border-box; }

/* фоновая картинка раздела (карточка со снимком космоса) */
.map--photo { background-size: cover; background-position: center; }

/* ---------- вписывание в узкий экран ---------- */
/* Обертку и масштаб ставит js/case-fit.js: она держит высоту, пока раздел
   уменьшен, иначе под блоком оставался бы пустой провал */
/* clip обязателен: transform не уменьшает layout-ширину, и раздел шириной
   1432px раздувал страницу, хотя визуально был вписан */
/* обертка центрирует уменьшенный раздел: иначе он прижимался влево и справа
   оставалась пустота */
.map-fit { position: relative; overflow: clip; display: flex; justify-content: center; }
/* align-self обязателен: обертка – флекс с заданной высотой, и без него раздел
   растягивался ПО ЕЕ высоте, а потом еще умножался масштабом – блок вылезал
   вниз и наезжал на следующий. Высоту раздела задает только его пропорция. */
/* align-self обязателен: обертка – флекс с заданной высотой, и без него раздел
   растягивался ПО ЕЕ высоте, а потом еще умножался масштабом – блок вылезал
   вниз и наезжал на следующий. Высоту разделу задает только его пропорция. */
/* карточка занимает всю ширину колонки; высоту ей задает js по масштабу сцены */
.map-fit > .map { flex: 1 1 auto; width: 100%; align-self: start; }

/* Линия-разделитель в макете толщиной 0.5px: при уменьшении раздела она
   становится 0.35px и растворяется в фоне – разделители у точек «пропадали».
   Держим ей не меньше пикселя на экране, компенсируя масштаб раздела. */
/* Режим выравнивания кеглей (только узкие экраны, только блок, который в макете
   заметно шире соседа по ряду). Сцена считается в макетных пикселях эталонного
   блока, поэтому кегль берется прямо из макета в пикселях – и совпадает с
   соседом. Текст при этом переносится на больше строк, а блок растет вниз:
   вертикальные сдвиги досчитывает js/case-fit.js. */
/* important обязателен: кегль в единицах контейнера стоит в атрибуте style,
   а инлайновое правило сильнее любого класса */
.map__stage.is-eq .t { font-size: calc(var(--fs-px, 14) * 1px) !important; }
/* В режиме выравнивания блок считается в другой ширине, и ручные переносы из
   макета встают не по месту: строка обрывается на середине и остается пустота.
   Там текст переносится по потоку. */
.map__stage.is-eq .m-br { display: none; }
/* пункт списка на узком экране – блок: так его высоту можно выровнять с
   пунктами соседних колонок (js/case-fit.js) */
.map__stage.is-eq .li { display: block; }
.map__stage.is-eq .li + .li { margin-top: 1em; }
/* Перенос разрешаем не всем: только тем строкам, которым на узком экране не
   хватило места (класс ставит js/case-fit.js). Иначе короткий заголовок вроде
   «Главный вопрос» без нужды ломался на две строки. */
.map__stage.is-eq .t.is-wrap { white-space: normal !important; }
/* метки этапов на узких экранах мельче на 4 кегля – просьба клиента */
.map__stage.is-eq .t.is-stage { font-size: calc((var(--fs-px, 14) - 4) * 1px) !important; }

.m-rule { min-height: calc(1px / var(--k, 1)); }
.m-rule--v { min-width: calc(1px / var(--k, 1)); }
.map-fit.is-scroll {
  overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  border-radius: 16px;
}
/* в режиме прокрутки раздел уменьшен до предела читаемости, а обертка
   прокручивает уже уменьшенную композицию */
.map-fit.is-scroll { overflow-x: auto; overflow-y: clip; }
.map-fit.is-scroll > .map { flex: 0 0 auto; }
.map-fit__hint {
  margin-top: 6px; font-size: 11px; font-weight: 300; line-height: 1.4;
  color: #8a8a8a; font-family: "Inter", sans-serif;
}

/* ---------- табличный раздел: карточки на узких экранах ---------- */
/* Композиция таблицы на телефоне требовала горизонтальной прокрутки, что для
   таблицы неудобно, поэтому здесь единственное исключение: до 1200px раздел
   показывает карточки участников (как блок AUDIENCE на референсе micheledu) */
.map__grid { display: contents; }
.map__cards { display: none; }

@media (max-width: 1199px) {
  .map:has(.map__cards) {
    aspect-ratio: auto !important;
    display: block; padding: clamp(14px, 4vw, 22px) clamp(12px, 3.6vw, 20px);
  }
  .map:has(.map__cards) .map__grid { display: none; }
  /* position: static обязателен: правило .map > * делает детей абсолютными,
     и карточки не давали разделу высоты (он схлопывался в 31px) */
  .map__cards {
    display: block; position: static;
    font-family: "Inter", -apple-system, sans-serif;
  }
  .tc__label {
    margin: 0 0 4px; font-size: 11px; font-weight: 500; letter-spacing: .04em;
    text-transform: uppercase; color: rgba(24, 24, 26, .6);
  }
  .tc { padding: 16px 0 4px; border-top: 1px solid rgba(24, 24, 26, .12); }
  .tc:first-of-type { border-top: 0; }
  .tc__role { margin: 0 0 10px; font-size: 15px; font-weight: 600; line-height: 1.25; }
  .tc__k {
    display: flex; align-items: center; gap: 7px; margin: 12px 0 4px;
    font-size: 10.5px; font-weight: 500; letter-spacing: .05em;
    text-transform: uppercase; color: rgba(24, 24, 26, .55);
  }
  .tc__k img { width: 14px; height: 14px; }
  .tc__v { margin: 0; font-size: 13px; line-height: 1.5; }
  .tc__v + .tc__v { margin-top: 4px; }
}

/* Читаемость на узком экране: кегль поднимается ВНУТРИ композиции.
   Блок вписывается в колонку масштабом, поэтому у широкой полосы текст выходил
   2.6px. Позиции элементов не меняются – меняется только кегль, коэффициент
   --tk ставит js/case-fit.js и ограничивает его наложениями.
   important обязателен: кегль в единицах контейнера стоит в атрибуте style. */
.map__stage.is-big .t { font-size: calc(var(--fs-px, 14) * var(--tk, 1) * 1px) !important; }
/* метки этапов остаются мельче основного текста – просьба клиента */
.map__stage.is-big .t.is-stage { font-size: calc((var(--fs-px, 14) - 4) * var(--tk, 1) * 1px) !important; }
/* Перенос разрешаем только тем строкам, которым не хватило места: без этого
   поднятый в кегле заголовок с nowrap уезжал за правый край блока. */
.map__stage.is-big .t.is-wrap { white-space: normal !important; }