/* ============================================================
   RusFoodFest — карточка точки маршрута
   savva.html    (ресторан)      десктоп 1440×1926, мобилка 393×2210
   zaryadye.html (не-ресторан)   десктоп 1440×2139, мобилка 393×1972
   ============================================================ */

.spage {
  position: relative;
  overflow: clip;
}

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

.shero {
  position: relative;
  height: 1089px; /* до начала контентного блока */
}

.spage--nonrest .shero {
  height: 1310px;
}

.shero__white {
  position: absolute;
  inset: 0 0 auto 0;
  height: 301px;
  background: #fff;
}

.shero__media {
  position: absolute;
  left: 0;
  right: 0;
  top: 77px;
  height: 640px;
  z-index: 2;
  pointer-events: none;
}

.shero__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-width: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%221440%22 height=%22640%22 viewBox=%220 0 1440 640%22 preserveAspectRatio=%22none%22%3E%3Cpath fill=%22%23fff%22 d=%22M1317.67 0 C1328.38 0.000135836 1337.07 8.68546 1337.07 19.3994 L1337.07 34.0508 L1401.2 34.0508 C1422.63 34.051 1440 51.4222 1440 72.8506 L1440 495.918 C1440 517.346 1422.63 534.718 1401.2 534.718 L1337.07 534.718 L1337.07 549.369 C1337.07 560.083 1328.38 568.769 1317.67 568.77 L1039.7 568.77 C953.297 613.182 842.031 639.911 720.613 639.911 C599.196 639.911 487.93 613.182 401.523 568.77 L122.33 568.77 C111.616 568.77 102.93 560.083 102.93 549.369 L102.93 534.718 L38.7998 534.718 C17.3713 534.718 0 517.346 0 495.918 L0 72.8506 C0 51.4221 17.3713 34.0508 38.7998 34.0508 L102.93 34.0508 L102.93 19.3994 C102.93 8.68552 111.615 0.000247898 122.329 0 L500.832 0 C562.553 40.6785 638.496 64.6699 720.614 64.6699 C802.733 64.6699 878.676 40.6784 940.396 0 L1317.67 0 Z%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=%221440%22 height=%22640%22 viewBox=%220 0 1440 640%22 preserveAspectRatio=%22none%22%3E%3Cpath fill=%22%23fff%22 d=%22M1317.67 0 C1328.38 0.000135836 1337.07 8.68546 1337.07 19.3994 L1337.07 34.0508 L1401.2 34.0508 C1422.63 34.051 1440 51.4222 1440 72.8506 L1440 495.918 C1440 517.346 1422.63 534.718 1401.2 534.718 L1337.07 534.718 L1337.07 549.369 C1337.07 560.083 1328.38 568.769 1317.67 568.77 L1039.7 568.77 C953.297 613.182 842.031 639.911 720.613 639.911 C599.196 639.911 487.93 613.182 401.523 568.77 L122.33 568.77 C111.616 568.77 102.93 560.083 102.93 549.369 L102.93 534.718 L38.7998 534.718 C17.3713 534.718 0 517.346 0 495.918 L0 72.8506 C0 51.4221 17.3713 34.0508 38.7998 34.0508 L102.93 34.0508 L102.93 19.3994 C102.93 8.68552 111.615 0.000247898 122.329 0 L500.832 0 C562.553 40.6785 638.496 64.6699 720.614 64.6699 C802.733 64.6699 878.676 40.6784 940.396 0 L1317.67 0 Z%22/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

/* Белая кайма 8px по контуру — обводка OUTSIDE, как в макете */
.shero__media::after {
  content: "";
  position: absolute;
  left: -8px;
  top: -8px;
  width: calc(100% + 16px);
  height: calc(100% + 16px);
  background: url("../icons/hero-line-desk.svg") center / 100% 100% no-repeat;
}

.shero__uzor {
  position: absolute;
  left: 50%;
  top: 618px;
  transform: translateX(-50%) scaleY(-1);
  width: 515px;
  height: 261px;
  max-width: none;
  z-index: 1;
  pointer-events: none;
}

.shero__title {
  position: absolute;
  left: 50%;
  top: 770px;
  transform: translateX(-50%);
  width: 900px;
  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);
  z-index: 3;
}

.spage .collab {
  top: 767px;
}

/* Строка «duration / cost» — только у не-ресторанной точки */
.facts {
  position: absolute;
  left: calc(50% - 244px);
  top: 1002px;
  display: flex;
  z-index: 3;
}

.facts__col {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 233px;
}

.facts__col + .facts__col {
  width: 269px;
  padding-left: 98px;
  border-left: 1px solid rgba(92, 50, 50, 0.2);
}

.facts__label {
  font-style: italic;
  font-weight: 400;
  font-size: 21px;
  line-height: 21px;
}

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

/* Вводный абзац с буквицей */
.shero__intro {
  position: absolute;
  left: 50%;
  top: 891px;
  transform: translateX(-50%);
  width: 751px;
  font-size: 14px;
  letter-spacing: 0.42px;
  line-height: 1.4;
  z-index: 3;
}

.spage--nonrest .shero__intro {
  top: 1112px;
}

.shero__dropcap {
  float: left;
  font-family: var(--font-display);
  font-weight: 350;
  font-size: 70.4px;
  line-height: 56px;
  letter-spacing: 2.11px;
  margin-right: 10px;
  color: var(--c-title);
}

/* ---------- Контентный блок ---------- */

.sbody {
  position: relative;
  height: 567px;
}

.spage--nonrest .sbody {
  height: 547px;
}

/* «What to order» — карусель блюд */
.order__title {
  position: absolute;
  left: calc(50% - 267px);
  top: 31px;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-weight: 350;
  font-size: 34px;
  line-height: 45px;
  letter-spacing: 1.02px;
  text-transform: uppercase;
  text-align: center;
  color: var(--c-title);
  white-space: nowrap;
}

.order__plate {
  position: absolute;
  left: calc(50% - 426px);
  top: 86px;
  width: 317px;
  height: 390px;
}

.order__uzor {
  position: absolute;
  left: 50%;
  top: -37px;
  transform: translateX(-50%);
  width: 683px;
  height: 346px;
  max-width: none;
  pointer-events: none;
}

.dish {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s;
}

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

.dish__photo {
  width: 294px;
  height: 294px;
  object-fit: cover;
  filter: drop-shadow(10px 9px 20px rgba(41, 58, 70, 0.25));
}

.dish figcaption {
  display: contents;
}

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

.dish__desc {
  margin-top: 24px;
  font-size: 14px;
  letter-spacing: 0.42px;
  line-height: 1.4;
}

/* Пагинация карусели */
.dots {
  position: absolute;
  left: calc(50% - 267px);
  top: 550px;
  transform: translateX(-50%);
  display: flex;
  gap: 16px;
}

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

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

/* Панель «details» / «practical info» */
.panel {
  position: absolute;
  left: calc(50% + 267px);
  top: 0;
  transform: translateX(-50%);
  width: 492px;
  min-height: 547px;
  padding: 100px 83px 40px 92px;
}

.spage--nonrest .panel {
  left: 50%;
  padding-top: 70px;
}

.panel__bg {
  position: absolute;
  left: -24px;
  right: -24px;
  top: -14px;
  bottom: -34px;
  width: auto;
  height: auto;
  max-width: none;
  z-index: -1;
  pointer-events: none;
}

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

.panel__list {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 317px;
}

.panel__row {
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: 14px;
  letter-spacing: 0.42px;
  line-height: 1.35;
}

.panel__row + .panel__row {
  padding-top: 16px;
  border-top: 1px solid rgba(92, 50, 50, 0.2);
}

.panel__row dt {
  font-weight: 600;
}

/* ---------- Навигация «предыдущая / следующая точка» ---------- */

.snav {
  position: relative;
  height: 270px;
  margin-top: 60px;
}

.spage--nonrest .snav {
  height: 282px;
}

.snav__uzor {
  position: absolute;
  left: 50%;
  top: 111px;
  transform: translateX(-50%) scaleY(-1);
  width: 515px;
  height: 261px;
  max-width: none;
  pointer-events: none;
}

.snav__link {
  position: absolute;
  top: 88px;
  display: flex;
  align-items: center;
  gap: 20px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: 0.72px;
  text-transform: uppercase;
  color: var(--c-blue);
  transition: opacity 0.2s;
}

.spage--nonrest .snav__link {
  top: 108px;
}

.snav__link:hover {
  opacity: 0.7;
}

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

.snav__link--prev {
  left: calc(50% - 350px);
}

.snav__link--prev img {
  transform: rotate(90deg);
  margin: 0 -7px;
}

.snav__link--next {
  right: calc(50% - 350px);
  text-align: right;
}

.snav__link--next img {
  transform: rotate(90deg) scaleY(-1);
  margin: 0 -7px;
}

/* ============================================================
   Каноническая страница ресторана (/restaurant/{slug}/) — hero
   в обычном потоке (flex-колонка), а не position:absolute.
   .shero* переиспользуется и на single-object.php (.spage--nonrest),
   поэтому переопределяем только через .spage--rest.
   ============================================================ */

.spage--rest .shero {
  display: flex;
  flex-direction: column;
  height: auto;
  align-items: center;
  margin-bottom: 60px;
}

.spage--rest .shero__media {
  position: relative;
  margin-top: 77px;
  top: unset;
  width: 100%;
  margin-bottom: 52px;
}

.spage--rest .shero__title {
  position: relative;
  transform: unset;
  left: unset;
  top: 0;
  margin-bottom: 60px;
}

.spage--rest .shero__intro {
  position: relative;
  top: unset;
  left: unset;
  transform: unset;
}

/* Если у ресторана нет prev/next — .snav (шаблон) не рендерится
   совсем, а без него странице не хватает отступа снизу от hero. */
.spage--rest:not(:has(.snav)) .shero {
  margin-bottom: 270px;
}

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

@media (max-width: 767px) {
  .shero {
    height: 999px;
  }

  .spage--nonrest .shero {
    height: 1269px;
  }

  .shero__white {
    height: 105px;
  }

  .shero__media {
    top: 81px;
    height: auto;
    aspect-ratio: 414 / 391;
  }

  .shero__photo {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22414%22 height=%22391%22 viewBox=%220 0 414 391%22 preserveAspectRatio=%22none%22%3E%3Cpath fill=%22%23fff%22 d=%22M375.2 0 C396.629 0 414 17.3713 414 38.7998 L414 299.2 C414 320.629 396.629 338 375.2 338 L354 338 L354 338.601 C354 349.314 345.314 358 334.601 358 L285.498 358 C262.334 378.832 235.685 390.693 207.329 390.693 C178.974 390.693 152.325 378.832 129.16 358 L79.3994 358 C68.6855 358 60.0002 349.314 60 338.601 L60 338 L38.7998 338 C17.3714 338 8.88385e-05 320.629 0 299.2 L0 38.7998 C0 17.3713 17.3713 0 38.7998 0 L375.2 0 Z%22/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22414%22 height=%22391%22 viewBox=%220 0 414 391%22 preserveAspectRatio=%22none%22%3E%3Cpath fill=%22%23fff%22 d=%22M375.2 0 C396.629 0 414 17.3713 414 38.7998 L414 299.2 C414 320.629 396.629 338 375.2 338 L354 338 L354 338.601 C354 349.314 345.314 358 334.601 358 L285.498 358 C262.334 378.832 235.685 390.693 207.329 390.693 C178.974 390.693 152.325 378.832 129.16 358 L79.3994 358 C68.6855 358 60.0002 349.314 60 338.601 L60 338 L38.7998 338 C17.3714 338 8.88385e-05 320.629 0 299.2 L0 38.7998 C0 17.3713 17.3713 0 38.7998 0 L375.2 0 Z%22/%3E%3C/svg%3E");
  }

  .shero__media::after {
    background-image: url("../icons/hero-line-mob.svg");
  }

  .shero__uzor {
    top: 565px;
    transform: translateX(-50%);
    width: 373px;
    height: 189px;
  }

  .shero__title {
    top: 519px;
    width: 317px;
    font-size: 42px;
    line-height: 39px;
    letter-spacing: 1.26px;
  }

  .spage .collab {
    top: 530px;
    z-index: 1;
  }

  .spage--nonrest .collab {
    top: 622px;
  }

  .facts {
    left: 50%;
    top: 725px;
    transform: translateX(-50%);
    gap: 0;
    width: 317px;
  }

  .facts__col {
    width: 50%;
    gap: 12px;
  }

  .facts__label {
    font-size: 16px;
    line-height: 16px;
  }

  .facts__value {
    font-size: 18px;
    white-space: nowrap;
  }

  .facts__col + .facts__col {
    padding-left: 24px;
  }

  .shero__intro {
    top: 680px;
    width: 317px;
    margin-top: 26px;
  }

  .spage--nonrest .shero__intro {
    top: 806px;
  }

  .shero__dropcap {
    font-size: 44px;
    line-height: 36px;
    letter-spacing: 1.3px;
  }

  .shero__intro-rest {
    display: block;
  }

  /* Контент — в поток */
  .sbody,
  .spage--nonrest .sbody {
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 0;
  }

  .order {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 317px;
  }

  .order__title {
    position: static;
    transform: none;
    font-size: 34px;
  }

  .order__plate {
    position: relative;
    left: auto;
    top: auto;
    margin-top: 30px;
  }

  .order__uzor {
    width: 500px;
    height: 253px;
    top: -20px;
  }

  .dots {
    position: static;
    transform: none;
    margin-top: 70px;
  }

  /* Панель шире экрана, как в макете */
  .panel,
  .spage--nonrest .panel {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    width: 492px;
    max-width: none;
    min-height: 0;
    margin-top: 95px; /* белая подложка начинается на 1544, как в макете */
    padding: 60px 88px 60px 88px;
  }

  .spage--nonrest .panel {
    margin-top: 14px; /* у не-ресторанной точки — на 1269 */
  }

  .panel__list {
    width: 100%;
    margin-top: 30px; /* первая строка списка в макете на 1665 */
  }

  /* Навигация. В мобильных макетах низ страниц разный: у ресторанной
     точки — только стрелки, у не-ресторанной — стрелки и узор в самом низу. */
  .snav {
    height: 191px;
    margin-top: 45px;
  }

  .spage--nonrest .snav {
    height: 231px;
    overflow: hidden;
  }

  .spage--rest .snav__uzor {
    display: none;
  }

  /* Узор — как в подвале разводящей: видна верхняя часть ленты */
  .spage--nonrest .snav__uzor {
    top: auto;
    bottom: -62px;
    width: 373px;
    height: 189px;
    transform: translateX(-50%);
  }

  .snav__link {
    top: 61px;
    gap: 10px;
    font-size: 16px;
    letter-spacing: 0.48px;
  }

  .spage--nonrest .snav__link {
    top: 24px;
  }

  .snav__link img {
    width: 56px;
    height: 49px;
  }

  .snav__link--prev {
    left: 22px;
  }

  .snav__link--prev img {
    margin: 0 -4px;
  }

  .snav__link--next {
    right: 22px;
  }

  .snav__link--next img {
    margin: 0 -4px;
  }
}