/* ============================================================
   RusFoodFest — страница «Routes in Moscow»
   Десктоп: фрейм 1440×2815. Мобилка: фрейм 393×3453.
   ============================================================ */

.rpage {
  /* min-height был фиксированным под одну конкретную конфигурацию
     контента — теперь высота полностью формируется потоком
     (.routes-grid/.rfooter-uzor/.where), лишний хвост фона снизу
     не нужен. */
  position: relative;
  overflow: clip;
}

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

.rhero {
  padding-top: 191px;
}

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

.rhero__uzor img {
  position: absolute;
  width: 515px;
  height: 261px;
  max-width: none;
  top: 388px;
}

.rhero__uzor-left {
  left: calc(50% - 206.5px);
  transform: translateX(-50%) scaleY(-1);
}

.rhero__uzor-right {
  left: calc(50% + 202.5px);
  transform: translateX(-50%) scaleY(-1);
}

.rhero__uzor-mob {
  display: none;
}

.rhero__title {
  display: flex;
  flex-direction: column;
  gap: 28px;
  font-family: var(--font-display);
  font-weight: 350;
  text-transform: uppercase;
  text-align: center;
  color: var(--c-title);
}

.rhero__line1,
.rhero__line2 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 86px;
  line-height: 87px;
  letter-spacing: 2.58px;
  white-space: nowrap;
}

.rhero__line1 {
  position: relative;
  top: 0;
  z-index: 3;
}

.rhero__line2 {
  position: relative;
  top: 0;
  z-index: 1;
}

.rhero__img {
  position: relative;
  top: -100px;
  left: calc(50% - 1.5px);
  transform: translateX(-50%);
  width: 675px;
  height: auto;
  z-index: 2;
  pointer-events: none;
}

.rhero__desc {
  position: absolute;
  left: 50%;
  top: 628px;
  transform: translateX(-50%);
  width: 369px;
  font-size: 14px;
  letter-spacing: 0.42px;
  text-align: center;
  z-index: 3;
}

.rhero .collab {
	top: 191px;
}

/* ---------- Сетка маршрутов ---------- */

.routes-grid {
  /* Раньше position:absolute с фиксированным top — при бо́льшем
     числе маршрутов карточки переносятся на вторую строку (flex-wrap),
     а .rfooter-uzor/.where ниже стояли на фиксированных top и не
     "знали" об этом — наезжали на вторую строку карточек. Переводим
     в поток. .rhero перед этим блоком сам по себе нулевой высоты
     (все его дети — position:absolute), поэтому .routes-grid — по
     факту первый потоковый элемент .rpage: отступ сверху — через
     padding, а не margin (иначе схлопнется с родителем и уедет
     наверх страницы — та же ошибка, что уже была с .cities-mob,
     .hotels-grid и другими). */
  position: relative;
  left: unset;
  top: unset;
  transform: unset;
  margin: 0 auto 60px;
  padding-top: 0;
  width: 1304px;
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 54px;
}

.route-card {
  width: 396px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.route-card__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 408 / 317;
}

.route-card__frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22408%22 height=%22317%22 viewBox=%220 0 408 317%22 preserveAspectRatio=%22none%22%3E%3Cpath fill=%22%23fff%22 d=%22M204.209 6C244.146 6 281.319 15.1111 312.41 30.7773H393.268C397.858 30.7775 401.579 34.4986 401.579 39.0889V148.226C401.857 151.528 401.999 154.859 401.999 158.216C401.999 161.572 401.857 164.903 401.579 168.205V275.5C401.579 280.09 397.858 283.811 393.268 283.812H315.979C284.181 300.603 245.687 310.432 204.209 310.432C162.732 310.432 124.237 300.603 92.4395 283.812H14.3115C9.72129 283.811 6.00018 280.09 6 275.5V39.0889C6.00009 34.4986 9.72123 30.7774 14.3115 30.7773H96.0088C127.1 15.1112 164.272 6.00006 204.209 6Z%22/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22408%22 height=%22317%22 viewBox=%220 0 408 317%22 preserveAspectRatio=%22none%22%3E%3Cpath fill=%22%23fff%22 d=%22M204.209 6C244.146 6 281.319 15.1111 312.41 30.7773H393.268C397.858 30.7775 401.579 34.4986 401.579 39.0889V148.226C401.857 151.528 401.999 154.859 401.999 158.216C401.999 161.572 401.857 164.903 401.579 168.205V275.5C401.579 280.09 397.858 283.811 393.268 283.812H315.979C284.181 300.603 245.687 310.432 204.209 310.432C162.732 310.432 124.237 300.603 92.4395 283.812H14.3115C9.72129 283.811 6.00018 280.09 6 275.5V39.0889C6.00009 34.4986 9.72123 30.7774 14.3115 30.7773H96.0088C127.1 15.1112 164.272 6.00006 204.209 6Z%22/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

/* Готовая фигура обводки от дизайнера (Figma) — толщина и контур
   уже посчитаны там же, где и маска фото, так что достаточно
   наложить друг на друга без доп. bleed/отступов. */
.route-card__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../icons/route-frame-line.svg") center / 100% 100% no-repeat;
  pointer-events: none;
}

.route-card__title {
  margin-top: 38px;
  font-family: var(--font-display);
  font-weight: 350;
  font-size: 32px;
  letter-spacing: 0.96px;
  text-transform: uppercase;
  color: var(--c-blue);
  max-width: 100%; /* «MERCHANT MOSCOW» — 332px, должен остаться в одну строку */
}

.route-card__text {
  margin-top: 24px;
  font-size: 14px;
  letter-spacing: 0.42px;
  line-height: 1.35;
  max-width: 326px;
}

.route-card__meta {
  margin-top: 16px;
  font-style: italic;
  font-weight: 400;
  font-size: 14px;
  white-space: nowrap;
}

.route-card__more {
  margin-top: 38px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 2.08px;
  text-transform: uppercase;
  color: var(--c-blue);
  transition: opacity 0.2s;
}

.route-card:hover .route-card__more {
  opacity: 0.65;
}

/* ---------- Узоры между секциями ---------- */

.rfooter-uzor {
  /* В макете узор заходит под "Where to stay" (декоративно, позади
     заголовка) и выглядывает сверху из-под блока, заходя даже под
     предыдущую секцию — теперь он лежит внутри .where (см. разметку)
     и позиционируется absolute относительно него, а не фиксированным
     top на уровне страницы: положение .where больше не фиксированный
     пиксель, а зависит от количества карточек маршрутов выше. Один и
     тот же элемент используется на обоих брейкпоинтах — размер и
     top переопределены под мобилку в медиа-запросе ниже. */
  position: absolute;
  left: 50%;
  top: -90px;
  transform: translateX(-50%) scaleY(-1);
  width: 515px;
  height: 261px;
  max-width: none;
  pointer-events: none;
  z-index: 0;
}

/* ---------- Where to stay ---------- */

.where {
  /* Внешнее позиционирование — в поток (сразу после узора, а не на
     фиксированном top). Внутри всё ещё карусель "3 отеля рядом" на
     position:absolute (см. .where__title/.hotel/etc ниже) — .where
     остаётся containing block для них (position:relative подходит
     так же, как и absolute), высоту оставляем фиксированной: она не
     завязана на число маршрутов выше, это отдельный, пока не
     проявившийся кейс (не трогаем, чтобы не зацепить лишнее). */
  position: relative;
  left: unset;
  right: unset;
  top: unset;
  margin-top: 60px;
  /* .where__bg вылезает на 24px за нижний край .where (закруглённый
     низ декоративного фона) — его height:calc(100% + 48px) считается
     от высоты .where, поэтому эту "добавку" нельзя компенсировать,
     увеличивая саму height (высота фона вырастет на ту же величину,
     разница останется прежней) — резервируем вылет margin-bottom'ом
     отдельно. .rpage не схлопывает этот margin (overflow != visible
     у него — своя блочная форматирующая контекст), так что высота
     страницы корректно его учтёт. */
  height: 940px;
  margin-bottom: 0;
}

.where__bg {
  position: absolute;
  left: 50%;
  top: -24px;
  transform: translateX(-50%);
  /* 100vw, а не 100% — иначе ширина считается от .where, а не от
     реальной ширины экрана (та же ошибка уже была с .dsection__bg
     и .stop__todo-bg). */
  width: max(1488px, calc(100vw + 48px));
  height: calc(100% + 62px);
  max-width: none;
  pointer-events: none;
}

.where__bg--mob {
  display: none;
}

.where__title {
  position: absolute;
  left: 50%;
  top: 72px;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-weight: 350;
  font-size: 54px;
  letter-spacing: 1.62px;
  text-transform: uppercase;
  text-align: center;
  color: var(--c-title);
  white-space: nowrap;
  z-index: 1;
}

.where__br {
  display: none;
}

.where__list {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* иначе на телефоне жест перехватывает нативный скролл страницы
     раньше, чем JS успеет распознать горизонтальный свайп
     (pointerdown/pointerup в routes.js) */
  touch-action: pan-y;
}

/* Страница карусели: три отеля, видна одна страница */
.hotels-page {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s;
}

.hotels-page.is-active {
  opacity: 1;
  visibility: visible;
}

.hotel {
  position: absolute;
  top: 151px;
  width: 394px;
}

.hotel:nth-child(1) {
  left: calc(50% - 452px);
  transform: translateX(-50%);
}

.hotel:nth-child(2) {
  left: 50%;
  transform: translateX(-50%);
}

.hotel:nth-child(3) {
  left: calc(50% + 452px);
  transform: translateX(-50%);
}

.where__dots {
  position: absolute;
  left: 50%;
  top: 800px;
  transform: translateX(-50%);
  display: flex;
  gap: 16px;
  z-index: 2;
}

/* На десктопе листаются страницы по 3 отеля — если страница всего
   одна (1-3 отеля у города), точки на этом брейкпоинте не нужны
   вовсе (одна точка бесполезна). На мобилке при этом может быть
   несколько отелей, поэтому контейнер не скрываем целиком, только
   на десктопе — .where__dots--no-mobile ниже отвечает за обратный
   случай (мобилка скрыта, десктоп показан). */
.where__dots--no-desktop {
  display: none;
}

.where__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: 50%;
  background: rgba(54, 118, 235, 0.3);
  transition: background 0.2s;
}

/* Точки листают разное на разных брейкпоинтах: на десктопе —
   страницы по 3 отеля, на мобилке — отели внутри первой страницы
   по одному. Раз число страниц и число отелей в первой странице —
   разные числа (напр. 4 отеля = 2 страницы, но 3 отеля в первой),
   часть точек (сверх числа страниц) нужна только мобилке. */
.where__dot--mobile-only {
  display: none;
}

.where__dot.is-active {
  background: var(--c-blue);
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 16px;
  border-radius: 30px;
  background: var(--c-blue);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 2.08px;
  text-transform: uppercase;
  white-space: nowrap;
  transition: opacity 0.2s;
}

.btn:hover {
  opacity: 0.85;
}

.where__btn {
  position: absolute;
  left: 50%;
  top: 850px;
  transform: translateX(-50%);
  z-index: 1;
}

/* ============================================================
   Мобилка (≤767px)
   ============================================================ */

@media (max-width: 767px) {
  /* Хиро */
  .rhero__uzor-left,
  .rhero__uzor-right {
    display: none;
  }

  .rhero__uzor img.rhero__uzor-mob {
    display: block;
    left: 50%;
    top: 356px;
    transform: translateX(-50%);
    width: 373px;
    height: 189px;
  }
  
  .rhero__title {
	gap: 0.8rem;
  }

  .rhero__line1,
  .rhero__line2 {
    font-size: 42px;
    line-height: 42px;
    letter-spacing: 1.26px;
  }

  .rhero__line1 {
    top: 0;
  }

  .rhero__line2 {
    top: 0;
  }

  .rpage .collab {
    top: 286px;
  }

  .rhero__img {
    left: 50%;
    top: 50px;
    width: min(375px, 96vw);
  }

  .rhero__desc {
    top: 540px;
    width: 317px;
	position: relative;
    top: 30px;
    padding-bottom: 30px;
  }

  /* Маршруты: колонка, «Merchant» скрыт как в макете.
     .routes-grid теперь в потоке (см. базовое правило). */
  .routes-grid {
    width: 333px;
	margin-top: 60px;
  }

  .route-card {
    width: 100%;
  }

  .route-card--merchant {
    display: none;
  }

  /* Узоры */
  /* Тот же приём, что и на десктопе: узор лежит внутри .where,
     absolute относительно него, чуть выше начала .where__bg--mob
     (top:-14px) — поэтому виден кусок узора, выглядывающий из-под
     скруглённого верха блока и заходящий даже под предыдущую секцию
     (текстурный фон страницы). Раньше это был отдельный элемент
     .footer-uzor--mid со своим фиксированным top на уровне всей
     страницы — ломался при переменной высоте .routes-grid. */
  .rfooter-uzor {
    width: 373px;
    height: 189px;
    top: -70px;
  }

  /* Where to stay: .where теперь в потоке и на десктопе (см. базовое
     правило) — margin-top оттуда наследуется и сюда, отдельно
     переопределять не нужно. На мобилке высота — auto, а внутри
     (заголовок/карточка/точки/кнопка) уже переведено в поток —
     раньше они стояли на фиксированных top, подобранных под одну
     конкретную длину адреса/описания отеля, и у более длинного
     текста точки/кнопка наезжали на текст. */
  .where {
    height: auto;
    padding-bottom: 80px;
  }

  .where__bg--desk {
    display: none;
  }

  .where__bg--mob {
    display: block;
    position: absolute;
    width: 540px;
    /* Раньше auto (своя пропорция svg) — картинка была подобрана под
       одну конкретную высоту .where (фикс. длина адреса/описания
       отеля). Текст переменной длины, поэтому реальная высота .where
       теперь плавающая — если она больше собственной высоты картинки,
       фон обрывается раньше конца блока и снизу проступает текстура
       фона страницы. Тянем фон на всю высоту .where (та же техника,
       что и у десктопного .where__bg): top:-14px, поэтому высота —
       100% + 14px, чтобы нижний край остался вровень с низом .where. */
    height: calc(100% + 40px);
    top: 0;
  }

  .where__title {
    position: relative;
    top: unset;
    left: unset;
    transform: unset;
    margin: 45px auto 0;
    padding-top: 4.5rem;
    font-size: 42px;
    line-height: 42px;
    letter-spacing: 1.26px;
    white-space: normal;
    width: 319px;
  }

  .where__br {
    display: block;
  }

  .where__list {
    position: relative;
    inset: unset;
    margin-top: 2.1rem;
  }

  /* На мобилке в макете одна тройка отелей и карусель по одному */
  .hotels-page {
    position: static;
    opacity: 1;
    visibility: visible;
  }

  .hotels-page:not(:first-child) {
    display: none;
  }

  /* Карусель отелей: виден один, переключение точками */
  .hotel {
    display: block;
    position: relative;
    top: unset;
    left: 50% !important;
    transform: translateX(-50%);
    width: 328px;
    opacity: 0;
    visibility: hidden;
    height: 0;
    overflow: hidden;
    transition: opacity 0.35s ease, visibility 0.35s;
  }

  .hotel.is-active {
    opacity: 1;
    visibility: visible;
    height: auto;
    overflow: visible;
  }

  .hotel__frame {
    aspect-ratio: 328 / 256;
  }

  .hotel__info {
    margin-top: 33px;
    width: 333px;
    align-self: center;
  }

  .where__dots {
    position: relative;
    top: unset;
    left: unset;
    transform: unset;
    justify-content: center;
    margin: 24px auto 0;
  }

  /* Обратное десктопному .where__dots--no-desktop: контейнер мог
     быть скрыт по умолчанию (0 дочерних точек нужно десктопу), но
     на мобилке отелей в первой странице больше одного — показываем. */
  .where__dots--no-desktop {
    display: flex;
  }

  /* И наоборот: на мобилке — один отель в первой странице, точки
     не нужны, даже если на десктопе несколько страниц. */
  .where__dots--no-mobile {
    display: none;
  }

  .where__dot--mobile-only {
    display: block;
  }

  .where__btn {
    position: relative;
    top: unset;
    left: unset;
    transform: unset;
    display: table;
    margin: 24px auto 0;
  }
}