/* ==========================================================================
   University Tour USA 2026 – страница

   Источник: Figma нода 32540:3325 (1920×6761), выгрузка 2026-08-04.
   Значения сняты через get_design_context и get_metadata, не подобраны
   на глаз.

   ЗАМЕРЫ ХИРО (нода 32564:3523, 1920×946):
     фон #2597FF, padding 128 / 96 / 64, высота кадра фиксированная 946
     заголовок  Inter Medium 48 / 1.1 / −3.84px (−8 %), ширина 636
     лид        Inter Regular 24 / 1.4 / −1.2px (−5 %), ширина 730
     плитки     982×174, две пары: между парами 12, внутри пары 20
                фон #EEF3FF, радиус 16, padding 24, gap 12
                таблетка h48, радиус 999, цифра 24 Semi Bold белая
                подпись 20 / 1.3 / −1px по центру
     карта      928×577 в точке 846×255, метки – синие круги 40px
     кольца     слева сверху 781/729/675 (поворот −178.54°, общий центр
                −25.7×−44.7), справа снизу 1197/1117/1035 (поворот 90°,
                общий центр 1558.5×816.5)

   ЗАМЕРЫ КАРТЫ МАРШРУТА (нода 32583:3646, 1920×826):
     надзаголовок → заголовок 40 (высота строки 24 + gap 16)
     заголовок → кнопка 40, кнопка → карта 48
     кнопка 445×57, фон #2597FF, радиус 999, текст 20 Semi Bold белый

   ЗАМЕРЫ ШТАТОВ (нода 32585:3654, 1840×942):
     две колонки 910 + 910, зазор 20
     левая: заголовок, «Выберите штат» 20 / 1.3 прозрачность 60 %,
            плитки 290 шириной, gap 12, полоса 363 высотой (4 ряда)
            плитка: padding 24, радиус 24, обводка #E6E6E6,
            текст 20 Semi Bold; активная – заливка #2597FF
     правая: панель #F2F2F8, padding 24, радиус 16, gap 48
            заголовок штата 36 / 1.0 / −2.88px (−8 %)
            сетка 4 колонки, gap 12; карточка белая, радиус 16,
            padding 24, gap 24; номер – круг 48 #2597FF; название 24 / 1.2

   ЗАМЕРЫ СИНЕЙ ПОЛОСЫ (нода 32576:4295):
     фон #2597FF, padding 128 / 96, gap текста 40
     заголовок 40 / 1.2 / −2.4px (−6 %), ширина 658
     абзац     28 / 1.2 / −1.4px (−5 %), ширина 737
     фото 1431×1069 в точке 670×−250, кольца 1197/1117/1035 с общим
     центром 1401×762.5, 16 плашек с иконками – размеры в шаблоне

   ЗАМЕРЫ «ЧТО ЭТО ДАЕТ» (нода 32583:3644, 1840×495):
     4 карточки 445×375, gap 20, фон #F2F2F8, радиус 16, padding 24
     номер – круг 48 своего цвета, иконка 92
     название 24 / 1.2 / −1.2px, текст 20 / 1.3 / −1px прозрачность 60 %

   ЗАМЕРЫ ГАЛЕРЕИ (нода 32583:3643, 1920×876):
     линия #3A3A3A 10 % на всю ширину 1920
     полоса навигации 407, стрелки 40, подпись 24 / 1.2
     главный кадр 408×644 по центру, радиус 24
     боковые кадры 236×297 / 236×201 / 236×201 / 380×201,
     прозрачность 50 % и обесцвечивание

   ЗАМЕРЫ БЛОКА КОНСУЛЬТАЦИИ (нода 32540:3667, 1920×714):
     фон #2597FF, padding 128 / 96, gap 64
     заголовок 40 / 1.2 / −2.4px, ширина 680
     плашка белая, padding 20, радиус 11.829, иконка 93 радиус 15.5
     текст 18 / 1.2 / −0.54px (−3 %) прозрачность 60 %, ширина 462
     кнопка белая 517×57
     фото 1376×837 в точке 747×61, место под ролик 445×247 в 1435×398
   ========================================================================== */

/*
 * Шапка в макете (32564:3523) стоит НА синем хиро – заливка И КОЛЬЦА
 * уходят под серую плашку. Плоская покраска полосы шапки (как у adm-hero /
 * club-hero) здесь не годится: верхнее левое кольцо в макете пересекает
 * зону шапки, и сплошная заливка обрезала его горизонтальной линией
 * (правка 2026-08-06). Поэтому хиро поднимается под шапку на её
 * фактическую высоту --header-h (замер в main.js), кольца продолжаются
 * за прозрачной шапкой, а координаты декора совпадают с макетом.
 */
.tour-hero {
  margin-top: calc(-1 * var(--header-h));
}

/* --- Ритм страницы -------------------------------------------------------- */
/* Между всеми соседними секциями макета ровно 140px, и столько же до
   подвала – это --section-gap. Отступ вешается на соседа, а не на каждую
   секцию, иначе у стыка двух секций он удваивается. */

.page-tour > section + section { margin-top: var(--section-gap); }
.page-tour { padding-bottom: var(--section-gap); }

/* --- Общее: надзаголовок с точкой и заголовок секции ---------------------- */

.tour-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);      /* 40 от верха надзаголовка до верха заголовка */
}

.tour-head--center {
  align-items: center;
  text-align: center;
}

.tour-head__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);

  font-size: var(--fs-body);
  line-height: 1.2;          /* в макете 1.2, у --lh-body 1.3 */
  font-weight: 500;
  letter-spacing: var(--ls-body);
  color: var(--color-text);
}

.tour-head__dot {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  background: var(--color-brand);
  border-radius: var(--radius-pill);
}

.tour-head__title {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: var(--fw-h2);
  letter-spacing: var(--ls-h2);
  color: var(--color-text);
}

.tour-head__title span { color: var(--color-link); }

/* --- Общее: кнопка -------------------------------------------------------- */
/* Ширины кнопок в макете фиксированные и у каждой своя: 445 и 517. */

.tour-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);

  max-width: 100%;
  min-height: var(--btn-height);
  padding: var(--btn-padding);
  border-radius: var(--radius-pill);

  font-size: var(--fs-btn);
  line-height: var(--lh-btn);
  font-weight: var(--fw-btn);
  letter-spacing: var(--ls-btn);
  text-align: center;
}

.tour-btn--blue  { background: var(--color-brand); color: var(--color-text-invert); }
.tour-btn--white { background: var(--color-bg);    color: var(--color-text); }

/* --- Общее: карта США с метками ------------------------------------------- */
/*
   Рамка карты в макете 928×577, сам рисунок чуть больше и выходит за низ
   рамки (928.59×584.18) – воспроизведено как в макете.
   Координаты меток заданы долей от рамки, поэтому карта масштабируется
   вместе с экраном и метки не разъезжаются.
*/

.tour-map {
  position: relative;
  width: 928px;
  max-width: 100%;
  aspect-ratio: 928 / 577;
  /* Тултипы меток выходят за рамку карты – не обрезаем. */
  overflow: visible;
}

.tour-map__img {
  position: absolute;
  left: -0.03%;
  top: 0;
  width: 100.07%;
  height: 101.24%;
  max-width: none;
}

/*
   Метка + тултип (компонент 32576:3718).
   В покое – круг 40px с пином; при :hover / :focus-visible карточка
   324×89 над пином (gap 12), border #4BA9FF, тень как в макете.
*/
.tour-map__pin {
  position: absolute;
  left: var(--x);
  top: var(--y);
  translate: -50% -50%;
  z-index: 1;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: var(--color-brand);
  border-radius: var(--radius-pill);
  cursor: pointer;
}

.tour-map__pin:hover,
.tour-map__pin:focus-visible {
  z-index: 3;
  outline: none;
}

.tour-map__pin-icon {
  position: relative;
  z-index: 1;
  width: 21px;
  height: 26px;
  pointer-events: none;
}

.tour-map__tip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 12px);
  translate: -50% 8px;
  /* На телефоне тултип не должен быть шире экрана. */
  max-width: min(324px, 82vw);

  display: flex;
  align-items: center;
  gap: var(--space-16);

  width: 324px;
  height: 89px;
  padding: var(--space-24);

  background: var(--color-bg);
  border: 1px solid var(--color-blue-light);
  border-radius: var(--radius-md);
  box-shadow: 0 0 6.8px rgba(37, 151, 255, 0.22);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, visibility 0.18s ease, translate 0.18s ease;
}

.tour-map__pin:hover .tour-map__tip,
.tour-map__pin:focus-visible .tour-map__tip {
  opacity: 1;
  visibility: visible;
  translate: -50% 0;
}

/* Пины у правого края карты (модификатор из шаблона): центрированный
   тултип выходил за карту и экран – прижимаем его правым краем к пину. */
.tour-map__pin--edge .tour-map__tip {
  left: auto;
  right: -10px;
  translate: 0 8px;
}

.tour-map__pin--edge:hover .tour-map__tip,
.tour-map__pin--edge:focus-visible .tour-map__tip {
  translate: 0 0;
}

.tour-map__tip-logo {
  flex: 0 0 auto;
  width: 60px;
  height: 59px;
  object-fit: cover;
}

.tour-map__tip-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  min-width: 0;
  color: var(--color-text);
}

.tour-map__tip-city {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-h3);
  letter-spacing: var(--ls-h3);
}

.tour-map__tip-uni {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  font-weight: var(--fw-small);
  letter-spacing: -0.03em; /* text_18_reg −3 % из макета */
}

/* --- Хиро ----------------------------------------------------------------- */

.tour-hero {
  position: relative;
  overflow: hidden;              /* кольца и карта выходят за секцию */

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;

  min-height: 946px;             /* высота кадра в макете */
  padding: 128px 96px 64px;
  background: var(--color-brand);
}

.tour-hero__inner {
  position: relative;
  z-index: 1;

  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  max-width: 100%;
}

.tour-hero__title {
  max-width: 636px;
  color: var(--color-text-invert);
}

.tour-hero__secondary {
  display: flex;
  flex-direction: column;
  gap: var(--space-48);
}

.tour-hero__lead {
  max-width: 730px;
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  font-weight: var(--fw-lead);
  letter-spacing: var(--ls-lead);
  color: var(--color-text-invert);
}

.tour-hero__stats {
  display: flex;
  gap: var(--space-12);          /* зазор между парами плиток */
  width: 982px;
  max-width: 100%;
  height: 174px;
}

.tour-hero__stats-group {
  display: flex;
  gap: var(--space-20);          /* зазор внутри пары */
  flex: 1 1 0;
  min-width: 0;
}

.tour-hero__stat {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
}

/* Таблетки «35+» и «10» в макете тянутся по содержимому, а «5» – ровно
   48×48. Одна и та же минимальная ширина даёт все три случая. */
.tour-hero__stat .badge { min-width: var(--badge-height); }

.tour-hero__stat-text {
  width: 100%;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-body);
  letter-spacing: var(--ls-body);
  color: var(--color-text);
  text-align: center;
}

.tour-hero__map {
  position: absolute;
  left: 44.063%;                 /* 846 / 1920 */
  top: 255px;
  width: 48.333%;                /* 928 / 1920 */
  z-index: 0;
}

/* Кольца. Все три кольца группы концентричны, поэтому центр задан один раз
   на группе, а кольца отличаются только диаметром. */
.tour-hero__rings {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.tour-hero__rings--tl { --cx: -1.339%;  --cy: -44.7px; }
.tour-hero__rings--r  { --cx: 81.172%;  --cy: 816.5px; }

.tour-hero__ring {
  position: absolute;
  left: var(--cx);
  top: var(--cy);
  translate: -50% -50%;
  max-width: none;
  aspect-ratio: 1;
}

.tour-hero__rings--tl .tour-hero__ring { rotate: -178.54deg; }
.tour-hero__rings--r  .tour-hero__ring { rotate: 90deg; }

.tour-hero__ring--tl-1 { width: 40.677%; }   /* 781 / 1920 */
.tour-hero__ring--tl-2 { width: 37.969%; }   /* 729 / 1920 */
.tour-hero__ring--tl-3 { width: 35.156%; }   /* 675 / 1920 */
.tour-hero__ring--r-1  { width: 62.344%; }   /* 1197 / 1920 */
.tour-hero__ring--r-2  { width: 58.177%; }   /* 1117 / 1920 */
.tour-hero__ring--r-3  { width: 53.906%; }   /* 1035 / 1920 */

/* --- Карта маршрута ------------------------------------------------------- */

/* Заголовок в макете шириной 620 и ломается на две строки – без ограничения
   он встал бы в одну и секция потеряла бы 32px высоты. */
.tour-route .tour-head__title { max-width: 620px; }

/* Тултипы верхних меток выходят над картой – секция не должна резать. */
.tour-route { overflow: visible; }
.tour-route .container { overflow: visible; }

.tour-route__cta {
  display: flex;
  width: 445px;
  margin: 40px auto 0;           /* от заголовка до кнопки в макете 40 */
}

.tour-route__map { margin: var(--space-48) auto 0; }

/* --- Штаты и университеты маршрута ---------------------------------------- */

.tour-states__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));   /* 910 + 20 + 910 */
  gap: var(--space-20);
  align-items: start;
}

.tour-states__col {
  display: flex;
  flex-direction: column;
}

.tour-states__hint {
  margin-top: var(--space-48);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-body);
  letter-spacing: var(--ls-body);
  color: var(--color-text);
  opacity: .6;
}

/*
   Полоса плиток в макете фиксированной высоты 363 на четыре ряда, поэтому
   ряды выше содержимого (81.75 против 72). Воспроизведено через
   align-content: stretch, а не подгонкой высоты плитки.
*/
.tour-states__list {
  margin-top: var(--space-16);
  display: flex;
  flex-wrap: wrap;
  align-content: stretch;
  gap: var(--space-12);
  height: 363px;
}

.tour-state {
  flex: 0 0 290px;
  max-width: 100%;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: var(--space-24);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);

  font-size: var(--fs-btn);
  line-height: var(--lh-btn);
  font-weight: var(--fw-btn);
  letter-spacing: var(--ls-btn);
  color: var(--color-text);
  text-align: center;
}

.tour-state--active {
  background: var(--color-brand);
  border-color: var(--color-brand);
  color: var(--color-text-invert);
}

.tour-states__panel {
  margin-top: var(--space-4);    /* панель в макете на 4px ниже левой колонки */
  display: flex;
  flex-direction: column;
  gap: var(--space-48);

  padding: var(--space-24);
  background: var(--color-bg-soft);
  border-radius: var(--radius-lg);
}

.tour-states__panel-title {
  font-size: var(--fs-h2);
  line-height: 1;                /* в макете leading-none */
  font-weight: var(--fw-h2);
  letter-spacing: var(--ls-h1);  /* −8 %, а не системные −6 % */
  color: var(--color-text);
  text-align: center;
}

.tour-states__cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-12);
}

.tour-univ {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-24);

  padding: var(--space-24);
  background: var(--color-bg);
  border-radius: var(--radius-lg);
}

.tour-univ__num {
  flex: 0 0 auto;
  width: var(--badge-height);
  padding-inline: 0;
}

.tour-univ__name {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-h3);
  letter-spacing: var(--ls-h3);
  color: var(--color-text);
  text-align: center;
}

/* --- Синяя полоса «Почему личное знакомство» ------------------------------ */
/*
   Кадр в макете 479 высотой, но текст в него не помещается и вылезает
   снизу примерно на 80px – так отрисовано в самом макете. Высота здесь
   задаётся содержимым: подгонять её значило бы резать текст.
*/

.tour-why {
  position: relative;
  overflow: hidden;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;

  padding: 128px 96px;
  background: var(--color-brand);
}

.tour-why__inner {
  position: relative;
  z-index: 1;

  display: flex;
  flex-direction: column;
  gap: 40px;
  color: var(--color-text-invert);
}

.tour-why__title {
  max-width: 658px;
  font-size: var(--fs-display);
  line-height: 1.2;              /* в макете 1.2, у --lh-display 1.1 */
  font-weight: var(--fw-display);
  letter-spacing: var(--ls-display);
}

.tour-why__text {
  max-width: 737px;
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  font-weight: var(--fw-h4);
  letter-spacing: var(--ls-h4);
}

.tour-why__decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.tour-why__ring {
  position: absolute;
  left: 72.969%;                 /* общий центр колец 1401 / 1920 */
  top: 762.5px;
  translate: -50% -50%;
  max-width: none;
  aspect-ratio: 1;
}

.tour-why__ring--1 { width: 62.344%; }   /* 1197 / 1920 */
.tour-why__ring--2 { width: 58.177%; }   /* 1117 / 1920 */
.tour-why__ring--3 { width: 53.906%; }   /* 1035 / 1920 */

.tour-why__photo {
  position: absolute;
  left: 34.896%;                 /* 670 / 1920 */
  top: -250px;
  width: 74.531%;                /* 1431 / 1920 */
  max-width: none;
}

/* Плашка с иконкой: размер, радиус и размер иконки приходят из шаблона –
   в макете они у каждой плашки свои. */
.tour-chip {
  position: absolute;
  left: var(--x);
  top: var(--y);

  display: flex;
  align-items: center;
  justify-content: center;

  width: var(--size);
  height: var(--size);
  border-radius: var(--radius);
}

.tour-chip img {
  width: var(--glyph);
  height: var(--glyph);
}

.tour-chip--mint   { background: var(--color-mint); }
.tour-chip--yellow { background: var(--color-yellow); }
.tour-chip--green  { background: var(--color-green); }
.tour-chip--purple { background: var(--color-purple); }
.tour-chip--red    { background: var(--color-red); }
.tour-chip--blue   { background: var(--color-brand); }

/* --- «Что это дает нашим ученикам?» --------------------------------------- */

.tour-benefits__grid {
  margin-top: var(--space-48);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-20);
  align-items: stretch;
}

.tour-benefit {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-24);

  min-height: 375px;
  padding: var(--space-24);
  background: var(--color-bg-soft);
  border-radius: var(--radius-lg);
}

.tour-benefit__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-16);
}

.tour-benefit__num {
  flex: 0 0 auto;
  width: var(--badge-height);
  padding-inline: 0;
}

.tour-benefit__icon {
  flex: 0 0 auto;
  width: 92px;
}

.tour-benefit__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.tour-benefit__title {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-h3);
  letter-spacing: var(--ls-h3);
  color: var(--color-text);
}

.tour-benefit__text {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-body);
  letter-spacing: var(--ls-body);
  color: var(--color-text);
  opacity: .6;
}

/* --- Галерея тура --------------------------------------------------------- */

.tour-gallery__divider {
  margin: var(--space-48) 0 0;
  border: 0;
  border-top: 1px solid var(--color-text);
  opacity: .1;                   /* в макете линия #3A3A3A с прозрачностью 10 % */
}

.tour-gallery__nav {
  width: 407px;
  max-width: 100%;
  margin: var(--space-48) auto 0;
  padding-inline: var(--side-padding);

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
}

.tour-gallery__arrow {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
}

/* Одна и та же стрелка: в макете это «шеврон вверх», повёрнутый в обе
   стороны. */
.tour-gallery__arrow--prev img { rotate: -90deg; }
.tour-gallery__arrow--next img { rotate: 90deg; }

.tour-gallery__caption {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-h3);
  letter-spacing: var(--ls-h3);
  color: var(--color-text);
  text-align: center;
}

.tour-gallery__stage {
  position: relative;
  overflow: hidden;              /* боковые кадры выходят за 1920 на узких экранах */
  height: 644px;
  margin-top: var(--space-24);
}

.tour-gallery__main {
  width: 408px;
  max-width: 100%;
  height: 644px;
  margin-inline: auto;
  border-radius: var(--radius-xl);
  object-fit: cover;
}

/*
   Боковые кадры в макете лежат абсолютно и обесцвечены: чёрный слой в
   режиме mix-blend-mode: color поверх фотографии, сверху прозрачность 50 %.
   В вёрстке это то же самое, но одним фильтром.
*/
.tour-gallery__side {
  position: absolute;
  border-radius: var(--radius-xl);
  object-fit: cover;
  opacity: .5;
  filter: grayscale(1);
}

.tour-gallery__side--a { left:  2.083%; top:   0; width: 236px; height: 297px; }
.tour-gallery__side--b { left: 18.229%; top: 443px; width: 236px; height: 201px; }
.tour-gallery__side--c { left: 66.302%; top:   0; width: 236px; height: 201px; }
.tour-gallery__side--d { left: 78.125%; top: 443px; width: 380px; height: 201px; }

/* --- Блок консультации ---------------------------------------------------- */

.tour-cta {
  position: relative;
  overflow: hidden;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;

  min-height: 714px;             /* высота кадра в макете */
  padding: 128px 96px;
  background: var(--color-brand);
}

.tour-cta__inner {
  position: relative;
  z-index: 1;

  display: flex;
  flex-direction: column;
  gap: var(--space-64);
  max-width: 100%;
}

.tour-cta__subtitle {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-32);
}

.tour-cta__title {
  max-width: 680px;
  font-size: var(--fs-display);
  line-height: 1.2;              /* в макете 1.2, у --lh-display 1.1 */
  font-weight: var(--fw-display);
  letter-spacing: var(--ls-display);
  color: var(--color-text-invert);
}

.tour-cta__note {
  display: flex;
  align-items: center;
  gap: var(--space-24);

  padding: var(--space-20);
  background: var(--color-bg);
  border: 1px solid var(--color-bg-soft);
  border-radius: 11.829px;       /* нестандартный радиус, так в макете */
}

.tour-cta__note-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;

  width: 93px;
  height: 93px;
  background: var(--color-green);
  border-radius: 15.5px;
}

.tour-cta__note-icon img { width: 59px; height: 59px; }

.tour-cta__note-text {
  max-width: 462px;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  font-weight: var(--fw-small);
  letter-spacing: var(--ls-small);
  color: var(--color-text);
  opacity: .6;
}

.tour-cta__btn {
  display: flex;
  width: 517px;
}

.tour-cta__decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.tour-cta__ring {
  position: absolute;
  translate: -50% -50%;
  max-width: none;
  aspect-ratio: 1;
}

.tour-cta__ring--l { left: -8.698%; top: -272px; scale: 1 -1; }
.tour-cta__ring--r { left: 69.792%; top:  692px; rotate: 131.66deg; scale: 1 -1; }

.tour-cta__ring--l1, .tour-cta__ring--r1 { width: 56.771%; }   /* 1090 / 1920 */
.tour-cta__ring--l2, .tour-cta__ring--r2 { width: 53.021%; }   /* 1018 / 1920 */
.tour-cta__ring--l3, .tour-cta__ring--r3 { width: 49.063%; }   /*  942 / 1920 */

.tour-cta__photo {
  position: absolute;
  left: 38.906%;                 /* 747 / 1920 */
  top: 61px;
  width: 71.667%;                /* 1376 / 1920 */
  max-width: none;
}

.tour-cta__video {
  position: absolute;
  left: 74.740%;                 /* 1435 / 1920 */
  top: 398px;
  width: 23.177%;                /*  445 / 1920 */
  height: 247px;
  z-index: 1;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: var(--space-20);
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.tour-cta__video span {
  font-size: 64px;
  line-height: .9;
  font-weight: var(--fw-h2);
  letter-spacing: -0.03em;
  color: var(--color-text);
  opacity: .22;
  text-align: center;
}

/* ==========================================================================
   АДАПТИВ – заглушка, а не решение.
   Мобильного макета этой страницы НЕТ: в Figma один размер, 1920.
   Правила ниже только не дают сеткам разъехаться и убирают горизонтальную
   прокрутку; как раскладка должна выглядеть на узком экране, дизайнером
   не решено.
   ========================================================================== */

@media (max-width: 1700px) {
  /* Две колонки по 910 перестают помещаться – раскладываем в одну. */
  .tour-states__grid  { grid-template-columns: minmax(0, 1fr); }
  .tour-states__list  { height: auto; }
  .tour-states__panel { margin-top: 0; }
}

@media (max-width: 1440px) {
  .tour-hero,
  .tour-why,
  .tour-cta { padding-inline: var(--space-64); }

  .tour-hero { min-height: 0; }
  .tour-cta  { min-height: 0; }
}

@media (max-width: 1200px) {
  .tour-hero__map,
  .tour-hero__rings,
  .tour-why__decor,
  .tour-cta__decor { display: none; }   /* декор рассчитан на холст 1920 */

  .tour-cta__video { position: static; width: 445px; max-width: 100%; margin-top: var(--space-32); }

  .tour-benefits__grid   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tour-states__cards    { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tour-gallery__side--c,
  .tour-gallery__side--d { display: none; }
}

@media (max-width: 900px) {
  .tour-hero,
  .tour-why,
  .tour-cta { padding-block: var(--space-64); padding-inline: var(--side-padding); }

  /* Хиро поднят под шапку на --header-h: верхний отступ 64px прятал
     заголовок ПОД шапкой – ему нужен минимум высота шапки + зазор. */
  .tour-hero { padding-top: calc(var(--header-h) + var(--space-24)); }

  .tour-hero__stats      { flex-direction: column; height: auto; }
  .tour-states__cards    { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tour-gallery__side    { display: none; }
  .tour-gallery__stage   { height: auto; padding-inline: var(--side-padding); }
  .tour-gallery__main    { height: auto; aspect-ratio: 408 / 644; }
}

@media (max-width: 640px) {
  .page-tour > section + section { margin-top: var(--space-64); }
  .page-tour { padding-bottom: var(--space-64); }

  .tour-hero__stats-group { flex-direction: column; }
  .tour-benefits__grid    { grid-template-columns: minmax(0, 1fr); }
  .tour-states__cards     { grid-template-columns: minmax(0, 1fr); }
  .tour-state             { flex: 1 1 100%; }
  .tour-benefit           { min-height: 0; }

  .tour-hero__title       { font-size: 32px; }
  .tour-why__title,
  .tour-cta__title        { font-size: var(--fs-h2); }
  .tour-cta__note         { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   ПРАВКА ПОСЛЕ МОБИЛЬНОЙ СВЕРКИ (2026-08-04)

   Тултипы пинов (.tour-map__tip) – рыба с прозрачностью 0 из макета:
   у крайних правых пинов они вылезали за экран и на 390px давали
   горизонтальную прокрутку +127px. Видимого содержимого не задевает –
   тултипы и так невидимы, обрезаем их по карте.
   ========================================================================== */
.tour-map { overflow: hidden; }