/* ============================================================
   RusFoodFest — страница «Where to stay in Moscow» (все отели)
   Десктоп: фрейм 1440×1730. Мобилка: фрейм 393×2574.
   ============================================================ */

.hpage {
  /* Высота не фиксируется числом — отелей у города может быть
     любое количество, высота формируется потоком (сетка отелей
     ниже уже в потоке, а не position:absolute). */
  position: relative;
  overflow: clip;
}

/* ---------- Узорная лента за заголовком ---------- */

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

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

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

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

.hpage__uzor-mob {
  display: none;
}

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

.hpage__title {
  /* h1 без position — значит реально в потоке, перед .hotels-grid
     (абсолютны только дочерние span). У h1 по умолчанию есть свой
     browser margin, который тоже может схлопнуться с родителем —
     обнуляем на всякий случай, весь текст всё равно позиционируется
     через .hpage__line1/2 абсолютно, этот margin никак не используется. */
  margin: 0;
  font-family: var(--font-display);
  font-weight: 350;
  text-transform: uppercase;
  text-align: center;
  color: var(--c-title);
}

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

.hpage__line1 {
  top: 191px;
}

.hpage__line2 {
  top: 279px;
}

/* ---------- Сетка отелей ---------- */

.hotels-grid {
  /* .hotels-grid — первый элемент в потоке внутри .hpage (всё,
     что перед ним, — position:absolute). Поэтому отступ сверху —
     через padding, а не margin: margin-top у первого потокового
     ребёнка может схлопнуться с родителем и вытолкнуть контент
     за пределы .hpage (та же ошибка, что уже была с .cities-mob
     и .stop__todo-cards). Центрирование — margin auto по бокам,
     туда margin применять безопасно. */
  position: relative;
  margin: 0 auto;
  padding-top: 459px;
  width: 1305px;
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 56px;
  z-index: 1;
}

.hpage .hotel {
  /* Базовый .hotel (routes.css) сделан под карусель "Where to stay"
     на странице города — там position:absolute с top/left под ровно
     3 слота (nth-child). Здесь карточек может быть любое количество
     и раскладка обычная flex-сетка, поэтому сбрасываем абсолютное
     позиционирование обратно в поток. */
  position: static;
  top: auto;
  left: auto;
  transform: none;
  width: 395px;
  /* .hotel — теперь ссылка на страницу отеля, сбрасываем дефолтные
     стили браузера для <a> */
  display: block;
  text-decoration: none;
  color: inherit;
}

/* ---------- Нижний узор ---------- */

.hfooter-uzor {
  /* В потоке, сразу после сетки — а не по фиксированному пикселю,
     рассчитанному под конкретное число отелей. */
  position: relative;
  display: block;
  margin: 40px auto 0;
  transform: scaleY(-1);
  width: 515px;
  height: 261px;
  max-width: none;
  pointer-events: none;
}

.footer-uzor--hotels {
  display: none; /* только мобилка */
}

/* ============================================================
   Страница отеля (/hotel/{slug}/)
   Hero переиспользует .spage--rest .shero* из stop.css (тот же
   flow-based hero, что у канонической страницы ресторана) —
   здесь только то, чего там не было: адрес и кнопка сайта отеля,
   плюс отдельная секция-галерея под hero.
   ============================================================ */

.spage--hotel .shero__intro {
  margin-bottom: 48px;
}

.spage--hotel .collab {
  left: calc(50% + 600px);
}

.hhero__address {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 40px;
}

.hhero__address img {
  width: 20px;
  height: 26px;
}

.hhero__address-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hhero__address-text em {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 16px;
  color: var(--c-text);
}

.hhero__address-text > span {
  font-size: 18px;
  letter-spacing: 0.54px;
  text-transform: uppercase;
  color: var(--c-text);
}

.hhero__visit {
  margin-top: 8px;
}

/* ---------- Галерея номеров ---------- */

.hgallery {
  position: relative;
  width: 1228px;
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
}

.hgallery__frame {
  position: relative;
  width: 749.79px;
  max-width: 100%;
  aspect-ratio: 749.79 / 421;
  /* иначе на телефоне жест перехватывает нативный скролл страницы
     раньше, чем JS успеет распознать горизонтальный свайп */
  touch-action: pan-y;
}

.hgallery__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.3s;
  /* Маска подобрана специально под пропорцию этого фрейма
     (749.79 / 421) — вырез фото под ресторан/маршрут (505/395)
     был спроектирован под другую, более квадратную пропорцию и
     при сильном растяжении раздувал белую кайму сверху/снизу. */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22766%22 height=%22437%22 viewBox=%220 0 766 437%22 preserveAspectRatio=%22none%22%3E%3Cpath fill=%22%23fff%22 d=%22M383.055 7.75977C466.202 7.75978 543.02 22.991 605.161 48.7598H746.762C752.285 48.7598 756.762 53.2369 756.762 58.7598V204.461C757.287 209.023 757.555 213.624 757.555 218.26C757.555 222.896 757.287 227.496 756.762 232.058V376.76C756.762 382.283 752.285 386.76 746.762 386.76H607.552C544.996 413.134 467.272 428.76 383.055 428.76C298.838 428.76 221.114 413.134 158.558 386.76H17.7617C12.2389 386.76 7.76172 382.283 7.76172 376.76V58.7598C7.76172 53.2369 12.2389 48.7598 17.7617 48.7598H160.948C223.089 22.9911 299.907 7.75977 383.055 7.75977Z%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=%22766%22 height=%22437%22 viewBox=%220 0 766 437%22 preserveAspectRatio=%22none%22%3E%3Cpath fill=%22%23fff%22 d=%22M383.055 7.75977C466.202 7.75978 543.02 22.991 605.161 48.7598H746.762C752.285 48.7598 756.762 53.2369 756.762 58.7598V204.461C757.287 209.023 757.555 213.624 757.555 218.26C757.555 222.896 757.287 227.496 756.762 232.058V376.76C756.762 382.283 752.285 386.76 746.762 386.76H607.552C544.996 413.134 467.272 428.76 383.055 428.76C298.838 428.76 221.114 413.134 158.558 386.76H17.7617C12.2389 386.76 7.76172 382.283 7.76172 376.76V58.7598C7.76172 53.2369 12.2389 48.7598 17.7617 48.7598H160.948C223.089 22.9911 299.907 7.75977 383.055 7.75977Z%22/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

.hgallery__photo.is-active {
  opacity: 1;
}

.hgallery__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../icons/hgallery-frame-line.svg") center / 100% 100% no-repeat;
  pointer-events: none;
}

.hgallery__arrow {
  flex: none;
  padding: 10px;
}

.hgallery__arrow img {
  /* Новая иконка 74×28 (пропорция 37:14) — шире прежней, высоту
     оставляем как было, ширину пересчитываем под реальную пропорцию,
     иначе картинка сплющится по горизонтали. */
  width: 58.14px;
  height: 22px;
}

.hgallery__dots {
  position: absolute;
  left: 50%;
  bottom: -40px;
  transform: translateX(-50%);
  display: flex;
  gap: 16px;
}

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

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

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

@media (max-width: 767px) {
  /* Hero — тот же перевод в поток, что и на десктопе (.spage--rest),
     только для .spage--hotel: на этой странице, в отличие от
     канонической страницы ресторана, есть ещё адрес и кнопка сайта,
     под которые в старой абсолютной раскладке нет места. */
  .spage--hotel .shero {
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 60px;
  }

  .spage--hotel .shero__media {
    position: relative;
    top: unset;
    width: 100%;
    margin-bottom: 30px;
  }

  .spage--hotel .shero__title {
    position: relative;
    top: unset;
    left: unset;
    transform: unset;
    width: auto;
    margin-bottom: 12px;
  }

  .spage--hotel .collab {
    position: relative;
    top: unset;
    left: unset;
    transform: unset;
    margin-bottom: 24px;
  }

  .spage--hotel .hhero__address {
    width: 317px;
    margin-bottom: 24px;
  }

  .hhero__address-text > span {
    line-height: 18px;
  }

  .spage--hotel .shero__intro {
    position: relative;
    top: unset;
    left: unset;
    transform: unset;
    width: 317px;
    margin-top: 0;
  }

  .spage--hotel .hhero__visit {
    margin-top: 32px;
  }

  /* .shero__uzor остаётся position:absolute на своём обычном месте
     (z-index:1) — из-за перевода hero в поток он теперь визуально
     перекрывает адрес. Адрес — flex-item, z-index на нём работает
     и без position:relative; поднимаем его выше узора. */
  .spage--hotel .hhero__address {
    position: relative;
    z-index: 2;
  }

  .hgallery {
    width: 100%;
    padding: 0 24px;
    gap: 16px;
  }

  /* На мобильном нет стрелок — листание только точками */
  .hgallery__arrow {
    display: none;
  }

  /* На мобильном фрейм не тянется на всю ширину — пропорция уже,
     близкая к квадратной, как у карточки маршрута/ресторана, а не
     широкая десктопная (749.79/421). Маска/обводка тоже нужны под
     эту пропорцию, иначе снова раздутая белая кайма. */
  .hgallery__frame {
    width: 327.83px;
    max-width: 100%;
    aspect-ratio: 327.83 / 256;
  }

  .hgallery__photo {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22502%22 height=%22395%22 viewBox=%22205 4 502 395%22 preserveAspectRatio=%22none%22%3E%3Cpath fill=%22%23fff%22 d=%22M455.967 12C504.923 12.0001 550.49 23.345 588.603 42.8525H687.903C693.426 42.8525 697.903 47.3297 697.903 52.8525V189.094C698.244 193.205 698.418 197.352 698.418 201.53C698.418 205.709 698.244 209.856 697.903 213.967V347.917C697.903 353.44 693.426 357.916 687.903 357.916H592.975C553.996 378.824 506.81 391.061 455.967 391.062C405.123 391.062 357.936 378.824 318.958 357.916H223C217.477 357.916 213 353.439 213 347.916V52.8525C213 47.3297 217.477 42.8525 223 42.8525H323.33C361.443 23.3449 407.01 12 455.967 12Z%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=%22502%22 height=%22395%22 viewBox=%22205 4 502 395%22 preserveAspectRatio=%22none%22%3E%3Cpath fill=%22%23fff%22 d=%22M455.967 12C504.923 12.0001 550.49 23.345 588.603 42.8525H687.903C693.426 42.8525 697.903 47.3297 697.903 52.8525V189.094C698.244 193.205 698.418 197.352 698.418 201.53C698.418 205.709 698.244 209.856 697.903 213.967V347.917C697.903 353.44 693.426 357.916 687.903 357.916H592.975C553.996 378.824 506.81 391.061 455.967 391.062C405.123 391.062 357.936 378.824 318.958 357.916H223C217.477 357.916 213 353.439 213 347.916V52.8525C213 47.3297 217.477 42.8525 223 42.8525H323.33C361.443 23.3449 407.01 12 455.967 12Z%22/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  }

  .hgallery__frame::after {
    background: url("../icons/stop-frame-line.svg") center / 100% 100% no-repeat;
  }

  .hgallery__dots {
    bottom: -32px;
  }

  .hpage__uzor-left,
  .hpage__uzor-right {
    display: none;
  }

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

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

  .hpage__line1 {
    top: 192px;
  }

  .hpage__line2 {
    top: 235px;
  }

  .hpage .collab {
    top: 286px;
  }

  /* Колонка отелей: показываем все, сколько бы их ни было у города */
  .hotels-grid {
    padding-top: 427px;
    width: 333px;
    gap: 64px;
  }

  /* Мобильное правило .hotel из routes.css (карусель "Where to stay")
     ставит opacity:0/visibility:hidden по умолчанию (видимость даёт
     JS через .is-active) и left:50% !important — здесь простой
     список без карусели, сбрасываем оба свойства обратно, left —
     тоже с !important, иначе не перебить. */
  .hpage .hotel {
    width: 100%;
    left: auto !important;
    opacity: 1;
    visibility: visible;
    transition: none;
    /* базовый мобильный .hotel (routes.css) для карусели "Where to
       stay" схлопывает неактивные карточки в height:0 — здесь все
       карточки видны одновременно (обычная сетка, без .is-active),
       возвращаем высоту. */
    height: auto;
    overflow: visible;
  }

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

  .hpage .hotel__info {
    margin-top: 33px;
  }

  .hfooter-uzor {
    display: none;
  }

  .footer-uzor--hotels {
    display: block;
    position: relative;
    bottom: auto;
    margin-top: 40px;
    width: 100%;
  }
}