/* ============================================================
   ВоДворе · styles.css — общие стили всех страниц
   Вынесены 1:1 из <style> одностраничника (index.html).
   Облик не менялся; единственные добавки — text-decoration: none
   у элементов, которые из кнопок стали ссылками (помечены).
============================================================ */

:root {
  /* масштаб: 1u = 1px макета (ширина макета 2547px) — НЕ МЕНЯТЬ */
  --u: calc(100vw / 2547);
  --bg: #200D05;
  --cream: #FAE6D1;
  --brown: #593120;
}

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

html { background: var(--bg); }

body {
  background: var(--bg);
  font-family: "Cascadia Mono", ui-monospace, monospace;
  color: var(--cream);
  min-height: 100vh;
  overflow-x: hidden;
}

img { display: block; }

a { color: var(--cream); }
a:hover { text-decoration-thickness: 2px; }

/* Шапка и выезжающее меню разделов на страницы НЕ подключаются:
   на их местах технические заглушки [ HEADER ] / [ FOOTER ].
   Шаблон шапки (разметка + стили + поведение) — в header.html. */

/* ---------- Герой ---------- */
.hero {
  position: relative;
  height: calc(951 * var(--u));
  min-height: 280px;
  overflow: hidden;
}
.hero img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 32%;
}

/* ---------- Сетка карточек ---------- */
.grid-wrap {
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: center;
  margin-top: calc(-158 * var(--u)); /* наезд первого ряда на герой — так в макете */
  padding-bottom: calc(300 * var(--u));
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, calc(467 * var(--u)));
  gap: calc(35 * var(--u)) calc(43 * var(--u));
}

/* ---------- Карточка ---------- */
.card {
  position: relative;
  width: calc(467 * var(--u));
  height: calc(701 * var(--u));
  overflow: hidden;
  background: var(--cream);
}

/* карточка категории */
.card--category {
  cursor: pointer; border: 0; padding: 0; font-family: inherit;
  text-decoration: none; /* плитка теперь ссылка */
}

.card--category .card__photo {
  position: absolute; inset: 0;
}
.card--category .card__photo img {
  width: 100%; height: 100%; object-fit: cover;
}
.card--category .card__photo::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.2);
}

.card__lettering {
  position: absolute;
  bottom: 0;
  left: 50%;
  /* svg экспортирован из слоя, повёрнутого на 180° — разворачиваем обратно. НЕ МЕНЯТЬ */
  transform: translateX(-50%) rotate(180deg);
  height: calc(240 * var(--u));
  width: auto;
  z-index: 2;
  pointer-events: none;
}

/* фолбэк: текстовый заголовок категории, если у неё нет рисованного SVG
   (titleSvg: null в menu-data.js). Сейчас не используется — пригодится новым категориям */
.card__lettering--text {
  position: absolute;
  bottom: calc(84 * var(--u));
  left: 0; right: 0;
  text-align: center;
  font-weight: 600;
  font-size: max(calc(64 * var(--u)), 20px);
  letter-spacing: 0.02em;
  color: var(--brown);
  z-index: 2;
  pointer-events: none;
}

.card--category { transition: transform .35s ease; }
.card--category:hover { transform: translateY(calc(-12 * var(--u))); }

/* карточка блюда: раскрытие «сквозь фото» — тихий crossfade, ТОЛЬКО opacity,
   никаких transform/rotate/scale. Раскрытием управляет класс .is-open:
   на hover-устройствах его ставит site.js по осознанному наведению
   (не от скролла), на таче — по тапу, с клавиатуры — Enter/Space.
   Карточка наследует у .card кремовый фон и overflow: hidden */
.dish:focus-visible {
  outline: 1px solid rgba(250, 230, 209, 0.35);
  outline-offset: -1px;
}

/* базовый слой: фото + кремовая плашка с названием (без фото — сплошная кремовая).
   При раскрытии слой НЕ гаснет целиком — растворяется только фото (см. ниже),
   поэтому название вообще не участвует в анимации и не мерцает */
.dish__front {
  position: absolute; inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--cream);
}
.dish__front .dish__photo {
  height: calc(529 * var(--u)); /* пропорции фото 467×529 — не менять */
  overflow: hidden;
  flex: none;
  /* сворачивание (возврат фото): короче раскрытия, мягкая кривая без «щелчка» */
  transition: opacity 0.55s cubic-bezier(0.45, 0.05, 0.25, 1);
}
.dish__front .dish__photo img {
  width: 100%; height: 100%; object-fit: cover;
}
.dish__front .dish__caption {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(10 * var(--u)) calc(40 * var(--u));
}
.dish__front--nophoto .dish__caption { flex: 1; }

.dish__name {
  font-weight: 600;
  font-size: max(calc(30 * var(--u)), 13px);
  line-height: 1.25;
  color: var(--brown);
  text-align: center;
  white-space: pre-line;
}

/* подсказки на карточке блюда — только тач-устройства (hover: none):
   «подробнее» — правый нижний угол кремовой плашки в покое,
   «посмотреть фото»/«свернуть» — симметрично внизу деталей.
   Не кнопки, а визуальный намёк — тап-зона вся карточка */
.dish__hint {
  position: absolute;
  right: 12px;
  bottom: 9px;
  z-index: 2;
  display: none;
  align-items: center;
  gap: 5px;
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--brown);
  opacity: 0.65;
  pointer-events: none;
}
.dish__hint svg { display: block; }
.dish__front .dish__hint { transition: opacity 0.55s cubic-bezier(0.45, 0.05, 0.25, 1); }
@media (hover: none) {
  .dish__hint { display: flex; }
}

/* детали: описание, цена, название — поверх карточки на непрозрачной кремовой
   подложке; в покое полностью скрыты и не перехватывают клики/фокус */
.dish__details {
  position: absolute; inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(140 * var(--u));
  padding: calc(40 * var(--u));
  /* название всегда показывает лицевой слой (он не гаснет) —
     низ резервируем под него: описание и цена центрируются в зоне фото */
  padding-bottom: calc(212 * var(--u));
  background: transparent; /* подложка не нужна: гаснет само фото, под ним кремовый слой */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.55s cubic-bezier(0.45, 0.05, 0.25, 1);
}

/* копия названия в деталях скрыта: название показывает лицевой слой,
   оно не участвует в кроссфейде — не смещается и не мерцает */
.dish__details > .dish__name { display: none; }

/* карточка без фото: название (лицевой слой) по центру всей карточки —
   описание уходит вверх, цена вниз, центр остаётся названию */
.dish__front--nophoto ~ .dish__details {
  justify-content: space-between;
  gap: 0;
  padding: calc(90 * var(--u)) calc(40 * var(--u));
}
/* содержимое деталей — свой слой opacity для внутреннего каскада;
   в покое скрыто вместе с подложкой, при сворачивании гаснет одним слоем с ней */
.dish__details > * {
  opacity: 0;
  transition: opacity 0.55s cubic-bezier(0.45, 0.05, 0.25, 1);
  transition-delay: 0s;
}

/* раскрытие: неторопливый crossfade (~760ms) той же мягкой кривой.
   Каскад: кремовая подложка проявляется первой, текст проступает на ней
   с задержкой 140ms, строка цены — ещё +60ms; длительности подобраны так,
   что все слои завершаются вместе (~840ms). Это transition, не keyframes —
   быстрый увод/тап корректно разворачивается из любой промежуточной точки */
.dish.is-open .dish__front .dish__photo {
  opacity: 0;
  transition-duration: 0.76s;
}
.dish.is-open .dish__front .dish__hint { opacity: 0; }
.dish.is-open .dish__details {
  opacity: 1;
  transition-duration: 0.76s;
}
.dish.is-open .dish__details > * {
  opacity: 1;
  transition-duration: 0.7s;
  transition-delay: 0.14s;
}
.dish.is-open .dish__details > .dish__pricerow {
  transition-duration: 0.64s;
  transition-delay: 0.2s;
}

/* десктоп (мышь): раскрытие и сворачивание в 4 раза быстрее —
   все длительности и задержки крossфейда делятся на 4, каскад сохраняется */
@media (hover: hover) {
  .dish__front .dish__photo,
  .dish__front .dish__hint,
  .dish__details,
  .dish__details > * { transition-duration: 0.14s; }
  .dish.is-open .dish__front .dish__photo,
  .dish.is-open .dish__details { transition-duration: 0.19s; }
  .dish.is-open .dish__details > * {
    transition-duration: 0.175s;
    transition-delay: 0.035s;
  }
  .dish.is-open .dish__details > .dish__pricerow {
    transition-duration: 0.16s;
    transition-delay: 0.05s;
  }
}

/* мгновенное переключение без переходов */
@media (prefers-reduced-motion: reduce) {
  .dish__front .dish__photo,
  .dish__front .dish__hint,
  .dish__details,
  .dish__details > * { transition: none; }
}

.dish__desc {
  font-size: max(calc(20 * var(--u)), 11px);
  line-height: 1.24;
  color: var(--brown);
  text-align: center;
  max-width: calc(373 * var(--u));
}

.dish__pricerow {
  display: flex;
  align-items: center;
  gap: calc(17 * var(--u));
  width: calc(389 * var(--u));
  max-width: 100%;
}
.dish__priceline {
  flex: 1;
  height: calc(55 * var(--u));
  min-height: 10px;
}
.dish__priceline img { width: 100%; height: 100%; }
.dish__price {
  font-weight: 600;
  font-size: max(calc(30 * var(--u)), 13px);
  color: var(--brown);
  white-space: nowrap;
}

/* заглавная карточка раздела */
.card--title { cursor: default; }

/* пустой раздел */
.empty-note {
  grid-column: 2 / 4;
  align-self: center;
  font-size: max(calc(30 * var(--u)), 14px);
  color: var(--cream);
  opacity: .6;
}

/* ---------- Появление карточек (деликатно) ----------
   ТОЛЬКО opacity 0→1 + подъём translateY(10px→0) на самой карточке (.card).
   Никаких rotate/scale. После завершения site.js снимает классы и inline-задержку —
   карточка возвращается в нейтральное состояние (hover-подъём и раскрытие
   деталей не конфликтуют: раскрытие — только opacity на слоях внутри). */
@media (prefers-reduced-motion: no-preference) {
  html.anim .grid > .anim-item {
    opacity: 0;
    transform: translateY(10px); /* только fade + лёгкий подъём */
  }
  html.anim .grid > .anim-item.is-in {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
}
/* появление мобильной ленты (≤560px): каскад не нужен — лента появляется
   мягко целиком (opacity + лёгкий подъём на самом контейнере), чтобы не
   мигало при горизонтальном скролле. Классы ставит и снимает site.js */
@media (prefers-reduced-motion: no-preference) {
  html.anim .grid.anim-strip {
    opacity: 0;
    transform: translateY(10px);
  }
  html.anim .grid.anim-strip.is-in {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
}
@media print {
  .grid, .grid > * { opacity: 1 !important; transform: none !important; }
}

/* ---------- Точки-индикатор мобильной ленты ----------
   Видны только вместе с лентой (≤560px); site.js строит их и переключает
   is-active по скроллу. 1px-обводка --cream, активная — залитая.
   Без стрелок и цифр */
.grid-dots { display: none; }

/* ---------- Адаптив ---------- */
@media (max-width: 1000px) {
  :root { --u: calc(100vw / 1080); }
  .grid {
    grid-template-columns: repeat(2, calc(467 * var(--u)));
    gap: calc(44 * var(--u)) calc(43 * var(--u));
  }
  .hero { height: calc(640 * var(--u)); }
  .dish__name { font-size: max(calc(30 * var(--u)), 15px); }
  .dish__desc { font-size: max(calc(20 * var(--u)), 13px); }
  .dish__price { font-size: max(calc(30 * var(--u)), 15px); }
  .empty-note { grid-column: auto; }
}

@media (max-width: 560px) {
  :root { --u: calc(100vw / 560); }


  /* ---- горизонтальная лента карточек (нативный scroll-snap) ----
     Карточка остаётся 467u (≈83vw — в норме 80–86vw), пропорции 467×701
     не искажаются: масштаб идёт через существующую систему --u.
     Боковые отступы 46.5u центрируют слайд, у краёв экрана виден срез
     соседних карточек. Вертикальные padding/margin взаимно компенсируются —
     запас, чтобы контейнер прокрутки ничего не подрезал по вертикали */
  .grid-wrap { display: flow-root; padding-bottom: 72px; } /* flow-root: margin-top ленты не схлопывается с -158u обёртки */
  .grid {
    display: flex;
    gap: calc(18 * var(--u));
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    padding-inline: calc(46.5 * var(--u));
    scroll-padding-inline: calc(46.5 * var(--u));
    padding-block: calc(56 * var(--u));
    margin-block: calc(-56 * var(--u));
    -webkit-overflow-scrolling: touch; /* плавный кинетический скролл (старые iOS) */
    overscroll-behavior-x: contain;
    scrollbar-width: none; /* полоса скрыта; колёсико и клавиатура работают */
  }
  .grid::-webkit-scrollbar { display: none; }
  .grid:focus-visible {
    outline: 1px solid rgba(250, 230, 209, 0.35);
    outline-offset: -1px;
  }
  .grid > * { flex: none; scroll-snap-align: center; }
  .empty-note { width: calc(467 * var(--u)); }

  /* точки под лентой */
  .grid-dots {
    display: flex;
    justify-content: center;
    gap: 9px;
    margin-top: 26px;
  }
  .grid-dots__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    border: 1px solid var(--cream);
    background: transparent;
    opacity: 0.55;
    transition: background-color 0.35s ease, opacity 0.35s ease;
  }
  .grid-dots__dot.is-active { background: var(--cream); opacity: 1; }
  .hero { height: calc(430 * var(--u)); min-height: 220px; }
  .dish__name { font-size: 17px; }
  .dish__desc { font-size: 14px; max-width: none; }
  .dish__price { font-size: 16px; }
  .dish__front .dish__caption { padding: 12px 18px; }
  .dish__details { gap: calc(120 * var(--u)); padding: 26px 22px; }
  .card__lettering--text { font-size: 22px; }
  .empty-note { font-size: 14px; }
}

/* без плавных подъездов — скролл обычный */
@media (prefers-reduced-motion: reduce) {
  .grid { scroll-behavior: auto; }
  .grid-dots__dot { transition: none; }
}