/* ============================================================
   RusFoodFest — маршрут с route_type = day («The Theatrical Table»)
   Только десктоп (≥768px) — адаптив отдельной задачей.

   Hero, "Other routes" и карточка ресторана (номер + фото + текст)
   переиспользуют уже готовые классы .orhero, .stop__head, .stop__num,
   .stop__photo, .stop__text, .route-card из one-route.css/routes.css —
   геометрия в Figma у них один в один совпадает с этим макетом,
   поэтому здесь только то, чего ещё не было: секции Day/Evening/Night
   и подзаголовок (tagline) у ресторана.
   ============================================================ */

/* ---------- Hero ---------- */

/* У .orhero* в one-route.css вся геометрия — position:absolute с
   пиксельными top/left, подогнанными под single-route.php. На этой
   странице макет проще (без абсолютного позиционирования по пикселям) —
   переводим hero в обычный поток (flex-колонка), переопределяя только
   для .orpage--day, чтобы не задеть обычный шаблон маршрута. Заголовок
   и коллаб-бейдж (дропкап, ширина .orhero__title) при этом теперь те же,
   что у single-route.php — переопределяем только позиционирование. */
.orpage--day .orhero {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: auto;
}

.orpage--day .orhero__media {
  position: relative;
  width: 100%;
  top: unset;
  margin-top: 77px;
}

.orpage--day .orhero__title {
  position: relative;
  margin-bottom: 60px;
  top: unset;
  left: unset;
  transform: unset;
}

.orpage--day .orhero__intro {
  position: relative;
  left: unset;
  top: unset;
  transform: unset;
}

/* ---------- Отступ перед "Other routes" ---------- */

/* Базовый .other-routes{margin-top:0} — на single-route.php отступ перед
   секцией даёт сам .orfooter-uzor (в обычном потоке, со своей высотой).
   На этой странице .orfooter-uzor — position:absolute (декоративный слой
   позади контента, без высоты в потоке), поэтому без этого отступ
   пропадает и "Other routes" прилипает к последней секции. */
.orpage--day .other-routes {
  margin-top: 160px;
}

.orpage--day .orfooter-uzor {
  position: absolute;
  margin-top: 330px;
  left: 50%;
  transform: translateX(-50%) scaleY(-1);
  z-index: -1;
}

.dsections {
  position: relative;
  width: 100%;
  max-width: 1440px;
  margin: 96px auto 0;
  display: flex;
  flex-direction: column;
  gap: 220px;
  z-index: 1;
}

/* ---------- Секция (Day / Evening / Night) ---------- */

.dsection {
  position: relative;
}

.dsection:nth-child(even) {
  padding: 0;
}

/* Белая подложка секции: прямоугольник на всю высоту + эллиптические
   "купола" сверху и снизу (::before/::after). where-bg-desk.svg сюда
   не подходит — у него купол только сверху, снизу ровная линия
   (см. сам path в файле), а здесь по макету нужны оба купола —
   поэтому делаем чистым CSS, без зависимости от конкретного ассета. */
.dsection__bg {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  transform: translateX(-50%);
  width: max(1488px, calc(100vw + 48px));
  max-width: none;
  pointer-events: none;
  z-index: -1;
  /* drop-shadow, а не box-shadow: у box-shadow на прямоугольнике
     и у теней на ::before/::after эллипсах были бы видны стыки
     между тремя фигурами. drop-shadow строит тень по силуэту
     всего составного элемента разом — как и было в исходном
     where-bg-desk.svg (тот же приём: feOffset + feGaussianBlur). */
  filter: drop-shadow(0 10px 12px rgba(41, 58, 70, 0.15));
}

.dsection__bg,
.dsection__bg::before,
.dsection__bg::after {
  background: #fff;
}

.dsection__bg::before,
.dsection__bg::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 1140px;
  max-width: 90%;
  height: 160px;
  transform: translateX(-50%);
  border-radius: 50%;
}

.dsection__bg::before {
  top: -80px;
}

.dsection__bg::after {
  bottom: -80px;
}

.dsection__title {
  position: relative;
  margin: 0 auto 72px;
  padding: 22px 56px;
  width: fit-content;
  border: 1px solid rgba(54, 118, 235, 0.3);
  border-radius: 999px;
  background: #fff;
  font-family: var(--font-display);
  font-weight: 350;
  font-size: 42px;
  letter-spacing: 1.26px;
  text-transform: uppercase;
  text-align: center;
  color: var(--c-blue);
}

/* ---------- Список ресторанов секции ---------- */

.drests {
  display: flex;
  flex-direction: column;
  gap: 72px;
  padding: 0 100px;
}

/* .stop__head/.stop__num/.stop__photo/.stop__text/.stop__title/.stop__desc
   переиспользуются как есть (один в один совпадают в Figma) — здесь
   только подзаголовок ресторана, которого в .stop__text не было. */

/* На этой странице .stop__head — ссылка на страницу ресторана
   (на single-route.php остаётся <article>, туда это не попадает),
   сбрасываем дефолтные стили ссылки браузера. */
.orpage--day .stop__head {
  text-decoration: none;
  color: inherit;
}

.drest__tagline {
  font-family: var(--font-display);
  font-weight: 350;
  font-size: 40px;
  line-height: 100%;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #000000;
}

.orpage--day .stop__text {
  gap: 18px;
}

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

@media (max-width: 767px) {
  .orpage--day .drests {
    padding: 0 30px;
  }

  .orpage--day .dsection__title {
    font-size: 28px;
  }

  .orpage--day .drest__tagline {
    font-size: 30px;
    line-height: normal;
    text-align: center;
  }

  .orpage--day .stop__text {
    margin-top: 30px;
  }

  .orpage--day .dsections {
    gap: 150px;
  }

  .orpage--day .collab__logo--footer {
    width: 205px;
    margin: 100px auto 70px;
  }
}