/* ============================================================
   RusFoodFest — разводящая страница (выбор города)
   Десктоп: фрейм 1440×948, элементы позиционируются от центра.
   Мобилка: фрейм 393×1601.
   ============================================================ */

.hero {
  position: relative;
  min-height: 948px;
  overflow: clip;
}

/* ---------- Узорная лента за каруселью ---------- */

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

.hero__uzor img {
  position: absolute;
  width: 742px;
  height: 375px;
  max-width: none;
}

.hero__uzor .uzor-center {
  left: 50%;
  top: 301px;
  transform: translateX(-50%) scaleY(-1);
}

.hero__uzor .uzor-left {
  left: calc(50% - 695.5px);
  top: 391px;
  transform: translateX(-50%);
}

.hero__uzor .uzor-right {
  left: calc(50% + 700.5px);
  top: 391px;
  transform: translateX(-50%);
}

/* ---------- Заголовок ---------- */

.hero__title {
  position: absolute;
  left: 50%;
  top: 191px;
  transform: translateX(-50%);
  width: 815px;
  font-family: var(--font-display);
  font-weight: 350;
  font-size: 86px;
  line-height: 87px;
  letter-spacing: 2.58px;
  text-transform: uppercase;
  text-align: center;
  color: var(--c-title);
}

.hero__title br {
  display: none; /* перенос строки — только на мобилке */
}

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

.hero__desc {
  position: absolute;
  left: calc(50% + 1px);
  top: 705px;
  transform: translateX(-50%);
  width: 370px;
  font-size: 14px;
  letter-spacing: 0.42px;
  text-align: center;
}

/* Стрелка-приглашение к скроллу — только мобилка */
.scroll-hint {
  display: none;
}

/* ---------- Карусель городов (десктоп) ---------- */

.cities__track {
  position: absolute;
  inset: 0;
}

.slide {
  position: absolute;
  transform: translateX(-50%);
  transition: left 0.55s ease, top 0.55s ease, width 0.55s ease, opacity 0.45s ease;
  cursor: pointer;
}

.slide.no-transition,
.slide.no-transition .figcaption {
  transition: none;
}

.slide img {
  width: 100%;
  height: auto;
}

.slide .figcaption {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 350;
  font-size: 34px;
  letter-spacing: 1.02px;
  line-height: 1;
  text-transform: uppercase;
  text-align: center;
  color: var(--c-blue);
  /* top анимируется той же кривой, что движение слайда,
     иначе подпись «прыгает» между слотами */
  transition: opacity 0.45s ease, top 0.55s ease;
}

/* Позиции слотов карусели */
.slide.pos-0 {
  left: 50%;
  top: 367px;
  width: 377px;
  z-index: 2;
}

.slide.pos-0 .figcaption {
  top: 234px;
}

.slide.pos--1 {
  left: calc(50% - 420px);
  top: 445px;
  width: 262.5px;
}

.slide.pos-1 {
  left: calc(50% + 385px);
  top: 445px;
  width: 262.5px;
}

.slide.pos--1 .figcaption,
.slide.pos-1 .figcaption {
  top: 174px;
}

.slide.pos--2 {
  left: calc(50% - 765px);
  top: 567px;
  width: 262.5px;
}

.slide.pos-2 {
  left: calc(50% + 762px);
  top: 567px;
  width: 262.5px;
}

.slide.pos--2 .figcaption,
.slide.pos-2 .figcaption {
  top: 174px;
  opacity: 0;
}

/* Крайние скрытые слоты: здесь происходит незаметная подмена города */
.slide.pos--3 {
  left: calc(50% - 1110px);
  top: 689px;
  width: 262.5px;
  opacity: 0;
  pointer-events: none;
}

.slide.pos-3 {
  left: calc(50% + 1107px);
  top: 689px;
  width: 262.5px;
  opacity: 0;
  pointer-events: none;
}

.slide.pos--3 .figcaption,
.slide.pos-3 .figcaption {
  top: 174px;
  opacity: 0;
}

/* ---------- Стрелки карусели ---------- */

.cities__arrow {
  position: absolute;
  top: 693px;
  width: 84px;
  height: 98px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  transition: opacity 0.2s;
}

.cities__arrow:hover {
  opacity: 0.7;
}

.cities__arrow--prev {
  left: calc(50% - 307.5px);
  transform: translateX(-50%);
}

.cities__arrow--next {
  left: calc(50% + 307.5px);
  transform: translateX(-50%);
}

.cities__arrow img {
  width: 98px;
  height: 85px;
  max-width: none;
  flex: none;
}

.cities__arrow--prev img {
  transform: rotate(90deg);
}

.cities__arrow--next img {
  transform: rotate(90deg) scaleY(-1);
}

/* ---------- Мобильный список городов ---------- */

.cities-mob {
  display: none;
}

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

@media (max-width: 767px) {
  .hero {
    /* Высота считается от контента (карточки городов + футер-узор),
       а не задаётся числом под конкретное количество городов. */
    min-height: auto;
  }

  /* Узор — одна лента за заголовком */
  .hero__uzor img {
    width: 373px;
    height: 189px;
  }

  .hero__uzor .uzor-center {
    top: 140px;
    transform: translateX(-50%);
  }

  .hero__uzor .uzor-left,
  .hero__uzor .uzor-right {
    display: none;
  }

  .hero__title {
    top: 193px;
    width: min(385px, 98vw);
    font-size: 42px;
    line-height: 1;
    letter-spacing: 1.26px;
  }

  .hero__title br {
    display: block;
  }

  .hero__desc {
    left: 50%;
    top: 433px;
    width: 317px;
  }

  .scroll-hint {
    display: block;
    position: absolute;
    left: 50%;
    top: 570px;
    transform: translateX(-50%);
    pointer-events: none;
  }

  .scroll-hint img {
    width: 52.5px;
    height: 45.6px;
  }

  /* Карусель прячем, показываем статичную колонку */
  .cities {
    display: none;
  }

  .cities-mob {
    /* Обычный поток вместо абсолютных координат под конкретные города —
       карточки сами укладываются друг под другом в любом количестве. */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 70px;

    /* Отступ под заголовок/описание/scroll-hint,
       которые остаются position:absolute и не зависят от числа городов.
       Именно padding, а не margin: .cities-mob — первый элемент в потоке
       внутри .hero (всё, что перед ним, — position:absolute), поэтому
       top-margin здесь может схлопнуться с margin родителя и вытолкнуть
       пустое место вверх, за пределы .hero — вплоть до <body>. */
    padding-top: 658px;
  }

  .cities-mob .city {
    /* position:relative — точка отсчёта для .city__caption внутри карточки. */
	position: relative;
	width: 256px;
    display: flex;
	flex-direction: column;
	align-items: center;
  }

  .cities-mob .city img {
    width: 100%;
    height: auto;
  }

  .cities-mob .city .city__caption {
    position: relative;
    top: -4px;
    width: 232px;
    font-family: var(--font-display);
    font-weight: 350;
    font-size: 34px;
    line-height: 33px;
    letter-spacing: 1.02px;
    text-transform: uppercase;
    text-align: center;
    color: var(--c-blue);
  }

  .footer-uzor {
    /* Возвращаем в поток, чтобы всегда идти сразу за последней карточкой,
       а не по фиксированной координате, рассчитанной под 3 города. */
    position: relative;
    bottom: auto;
    top: auto;
    margin-top: 40px;
    width: 100%;
  }
}