/* ============================================================
   RusFoodFest — общие стили (шрифты, переменные, шапка, декор)
   ============================================================ */

/* ---------- Шрифты ---------- */

/* Заголовочный шрифт макета — Circe Contrast Subhead (Paratype, коммерческая
   лицензия), файлы взяты с frt.gall-studio.com. */
@font-face {
  font-family: "Circe Contrast Subhead";
  src: url("../fonts/circe-contrast_subhead-light.woff2") format("woff2"),
       url("../fonts/circe-contrast_subhead-light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* "Russia Discover" пока не подключён — файла нет в поставке.
   Положить woff2 в fonts/ и раскомментировать, когда понадобится. */
/*
@font-face {
  font-family: "Russia Discover";
  src: url("../fonts/RussiaDiscover-Light.woff2") format("woff2");
  font-weight: 300;
  font-display: swap;
}
*/

@font-face {
  font-family: "Literata";
  src: url("../fonts/Literata-300-latin.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Literata";
  src: url("../fonts/Literata-300-cyrillic.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Literata";
  src: url("../fonts/Literata-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Literata";
  src: url("../fonts/Literata-400-cyrillic.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Literata";
  src: url("../fonts/Literata-600-latin.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Literata";
  src: url("../fonts/Literata-600-cyrillic.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Jost — переменный, метрически ближайший свободный аналог Circe Contrast
   Subhead: ширина строки отличается от оригинала менее чем на 5%, поэтому
   все кегли в вёрстке взяты из макета без подгонки. */
@font-face {
  font-family: "Jost";
  src: url("../fonts/Jost-latin.woff2") format("woff2");
  font-weight: 300 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Jost";
  src: url("../fonts/Jost-cyrillic.woff2") format("woff2");
  font-weight: 300 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* ---------- Переменные ---------- */

:root {
  --c-blue: #3676eb;        /* акцент: надписи, узоры, стрелки */
  --c-title: #007aff;       /* крупные заголовки */
  --c-text: #5c3232;        /* основной текст */
  --c-black: #000;

  --font-display: "Circe Contrast Subhead", "Jost", "Trebuchet MS", sans-serif;
  --font-body: "Literata", Georgia, serif;
  --font-collab: "Russia Discover", "Literata", Georgia, serif;
}

/* ---------- Сброс ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  overflow-x: clip;
}

/* Десктопная сетка фиксирована по 1440: на окнах уже появляется
   горизонтальный скролл вместо обрезки боков */
@media (min-width: 768px) {
  html {
    overflow-x: auto;
  }

  body {
    min-width: 1440px;
  }
}

body {
  min-height: 100vh;
  background-color: #fff;
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--c-text);
  -webkit-font-smoothing: antialiased;
}

/* Льняная текстура поверх белого фона
   (в рендере из Figma 50% прозрачности уже запечены) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: url("../img/bg-texture.webp") center / cover;
  pointer-events: none;
}

img {
  display: block;
  max-width: 100%;
}

button {
  font: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  color: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ---------- 404 ---------- */

.error404 {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px;
}

.error404__code {
  font-family: var(--font-display);
  font-weight: 350;
  font-size: 180px;
  line-height: 1;
  letter-spacing: 5.4px;
  color: var(--c-title);
}

.error404__text {
  margin-top: 24px;
  font-size: 18px;
  letter-spacing: 0.54px;
}

.error404__home {
  margin-top: 40px;
  font-family: var(--font-display);
  font-weight: 350;
  font-size: 16px;
  letter-spacing: 2.08px;
  text-transform: uppercase;
}

.error404__home:hover {
  opacity: 0.65;
}

/* Кап-тримминг как в макете: координаты Figma заданы по верху капители */
.cap-trim {
  text-box: trim-both cap alphabetic;
}

/* ---------- Шапка ---------- */

.header {
  position: absolute;
  inset: 0 0 auto 0;
  height: 105px;
  z-index: 10;
}

.header__bg {
  display: none; /* белая подложка — только на мобилке */
}

/* Переключатель языка */
.lang {
  position: absolute;
  left: 39px;
  top: 44px;
}

.lang__btn {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-display);
  font-weight: 350;
  font-size: 20.77px;
  letter-spacing: 0.62px;
  text-transform: uppercase;
  color: var(--c-blue);
}

.lang__btn img {
  width: 8px;
  height: 4px;
  transition: transform 0.25s;
}

.lang.open .lang__btn img {
  transform: scaleY(-1);
}

.lang__list {
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  list-style: none;
  display: none;
  flex-direction: column;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 0.62px;
  text-transform: uppercase;
  color: var(--c-blue);
}

.lang.open .lang__list {
  display: flex;
}

.lang__list button {
  opacity: 0.55;
  transition: opacity 0.2s;
}

.lang__list button:hover,
.lang__list button[aria-current="true"] {
  opacity: 1;
}

/* Логотип */
.header__logo {
  position: absolute;
  left: 50%;
  top: 24px;
  transform: translateX(-50%);
}

.header__logo img {
  height: 92px;
  width: auto;
}

/* Бургер */
.burger {
  position: absolute;
  right: 24px;
  top: 33px;
  padding: 15px;
  border-radius: 7px;
}

.burger img {
  width: 27.5px;
  height: 12.6px;
}

/* ---------- Выезжающее меню (как на frt.gall-studio.com) ---------- */

body.menu-open {
  overflow: hidden;
}

/* Затемнение контента под меню — как в style_gzhel.css/style_khokhloma.css
   темы frt (body.menu-open:after), которые на /dr/* не подключаются. */
body.menu-open::after {
  content: "";
  position: fixed;
  inset: 0;
  background-color: #000000b3;
  z-index: 100;
}

.main-menu-wrapper {
  position: fixed;
  top: 0;
  right: -393px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 147px;
  width: 0;
  min-height: 100vh;
  max-height: 100vh;
  background-color: #fff;
  padding: 80px 0;
  box-sizing: border-box;
  transition: width 0.3s linear, right 0.3s linear;
  overflow-x: hidden;
  z-index: 101;
}

body.menu-open .main-menu-wrapper {
  right: 0;
  width: 393px;
}

.main-menu-close {
  position: absolute;
  top: 17px;
  right: 22px;
  display: block;
  width: 62px;
  height: 48px;
  padding: 0;
  border: none;
  background: none;
}

.main-menu-wrapper .menu {
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 90px;
}

.main-menu-wrapper .menu a {
  display: block;
  font-family: var(--font-display);
  font-weight: 350;
  font-size: 34.6px;
  line-height: 1;
  text-align: center;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--c-title);
}

/* ---------- «Developed in collaboration with» ---------- */

.collab {
  position: absolute;
  left: calc(50% + 529.5px);
  top: 191px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 33px; /* текст кончается на 229, логотип начинается на 262 */
  width: 213px;
}

.collab__text {
  font-family: var(--font-collab);
  font-weight: 300;
  font-size: 19.8px;
  line-height: 1.2;
  letter-spacing: 0.6px;
  text-align: center;
  color: var(--c-black);
}

.collab__logo {
  width: 205px;
  height: auto;
}

/* ---------- Стрелка «назад» в шапке ---------- */

.header__back {
  position: absolute;
  /* padding — зона клика; координаты уменьшены на него,
     чтобы сама иконка встала в 28,38 как в макете */
  left: 20px;
  top: 30px;
  padding: 8px;
}

.header__back img {
  width: 37px;
  height: 24.3px;
  display: block;
}

/* ---------- Карточка отеля (общая) ---------- */

.hotel__frame {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 411 / 324;
}

.hotel__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=%22411%22 height=%22324%22 viewBox=%22-0.240234 -0.238281 411 324%22 preserveAspectRatio=%22none%22%3E%3Cpath fill=%22%23fff%22 d=%22M205.178 7.76172C244.956 7.76172 281.979 16.9802 312.946 32.8301H391.76C397.283 32.8301 401.76 37.3072 401.76 42.8301V151.654C402.037 154.996 402.178 158.366 402.178 161.762C402.178 165.157 402.037 168.527 401.76 171.868V278.83C401.76 284.353 397.283 288.83 391.76 288.83H316.502C284.831 305.819 246.49 315.762 205.178 315.762C163.866 315.762 125.525 305.819 93.8535 288.83H17.7598C12.2369 288.83 7.75977 284.353 7.75977 278.83V42.8301C7.75977 37.3072 12.2369 32.8301 17.7598 32.8301H97.4092C128.376 16.9802 165.4 7.76172 205.178 7.76172Z%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=%22411%22 height=%22324%22 viewBox=%22-0.240234 -0.238281 411 324%22 preserveAspectRatio=%22none%22%3E%3Cpath fill=%22%23fff%22 d=%22M205.178 7.76172C244.956 7.76172 281.979 16.9802 312.946 32.8301H391.76C397.283 32.8301 401.76 37.3072 401.76 42.8301V151.654C402.037 154.996 402.178 158.366 402.178 161.762C402.178 165.157 402.037 168.527 401.76 171.868V278.83C401.76 284.353 397.283 288.83 391.76 288.83H316.502C284.831 305.819 246.49 315.762 205.178 315.762C163.866 315.762 125.525 305.819 93.8535 288.83H17.7598C12.2369 288.83 7.75977 284.353 7.75977 278.83V42.8301C7.75977 37.3072 12.2369 32.8301 17.7598 32.8301H97.4092C128.376 16.9802 165.4 7.76172 205.178 7.76172Z%22/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

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

.hotel__info {
  margin-top: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hotel__name {
  font-family: var(--font-display);
  font-weight: 350;
  font-size: 24px;
  letter-spacing: 0.72px;
  text-transform: uppercase;
  color: var(--c-blue);
}

.hotel__text {
  margin-top: 27px;
  font-size: 14px;
  letter-spacing: 0.42px;
  line-height: 1.35;
}

.hotel__addr {
  margin-top: 27px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.hotel__addr img {
  width: 14px;
  height: 18px;
}

.hotel__addr span {
  font-size: 12px;
  letter-spacing: 0.36px;
}

/* ---------- Нижний декоративный узор ---------- */

.footer-uzor {
  position: absolute;
  left: 50%;
  bottom: -46px;
  transform: translateX(-50%);
  width: 393px;
  height: 182px;
  overflow: hidden;
  pointer-events: none;
}

.footer-uzor img {
  position: absolute;
  left: 50%;
  bottom: -62px;
  transform: translateX(-50%);
  width: 373px;
  height: 189px;
  max-width: none;
}

/* ---------- Мобильная шапка ---------- */

@media (max-width: 767px) {
  body.menu-open .main-menu-wrapper {
    width: 100%;
  }

  .main-menu-wrapper .menu {
    gap: 60px;
  }

  .main-menu-wrapper .menu a {
    font-size: 28px;
  }

  .collab {
    left: 50%;
    top: 329px;
    gap: 13px; /* текст кончается на 339, логотип начинается на 352 */
    width: auto;
  }

  .collab__text {
    font-size: 14px;
    letter-spacing: 0.42px;
    white-space: nowrap;
  }

  /* на мобилке строка не разбивается */
  .collab__br {
    display: none;
  }

  .collab__logo {
    width: 120px;
  }

  .header__back {
    left: 14px;
    top: 24px;
  }

  .header__back img {
    width: 39.5px;
    height: 26px;
  }

  .header {
    height: 105px;
  }

  .header__bg {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 105px;
    z-index: -1;
  }

  .lang {
    left: 22px;
    top: 30px;
  }

  .lang__btn {
    font-size: 22.26px;
    letter-spacing: 0.67px;
  }

  .header__logo {
    top: 18px;
  }

  .header__logo img {
    height: 55px;
  }

  .burger {
    right: 5px;
    top: 21px;
    padding: 16px;
  }

  .burger img {
    width: 29.5px;
    height: 13.5px;
  }
}