/* =====================================================================
   Ресторан «Сакля» (restaurant.html, глава IV) — только то, чего нет в base.css.
   Ритм: вечер — открытие главы на --night с крупной петлёй огня (единственная
   тёмная секция и авторский момент страницы) → узкая колонка текста со сноской
   на поле → разворот кухни, как в кулинарной книге → «Забронировать стол».
   Пара — coffee.css: та же книга, но утро, бумага и другой ритм.
   ===================================================================== */

/* ---------- IV. Открытие главы вечером ---------- */
/* Шапка над главой (header: 'over', [data-hero] — весь .r-open) не прозрачная, а цвета ночи:
   заголовок и лид уходят под неё при прокрутке и не должны просвечивать */
.hdr--over:not(.is-solid) { background: var(--night); }
/* .evening даёт цвета ночи (номер главы, подписи, фокус); здесь — отступы открытия главы */
.r-open {
  margin-top: calc(-1 * var(--header-h) - 1px);   /* вечер начинается под прозрачной шапкой (header: 'over') */
  padding-block: calc(var(--header-h) + clamp(44px, 1.25rem + 4vw, 104px)) clamp(64px, 2rem + 4.5vw, 128px);
}
.r-open .opener__title { max-width: none; }
.r-open .opener__sub { color: var(--night-ink); }
.r-open__lead { grid-column: 2 / span 6; }
.r-open__act { grid-column: 9 / span 4; align-self: start; margin-top: clamp(24px, 1rem + 1.6vw, 44px); }
.r-open .opener__media { margin-top: clamp(40px, 1.5rem + 3vw, 80px); }

.r-open__act .v-menu { margin-top: var(--s-5); }

/* ---------- Текст главы и сноска на поле ---------- */
.r-text__prose { grid-column: 2 / span 6; font-size: var(--fs-lead); line-height: 1.55; }
.r-text__prose p { max-width: 30em; }
.r-text .fn-ref { margin-left: 1px; font-size: .6em; }       /* знак сноски в тексте, а не в заголовке */
.r-text__note { grid-column: 9 / span 3; align-self: start; margin-top: .55em; }

/* ---------- Разворот: кухня и зал ----------
   Три пары, как развороты кулинарной книги: крупный кадр на одной «странице», меньший — на другой.
   Крупный кадр по очереди слева, справа, слева; в разметке он всегда первый (на телефоне идёт первым). */
.r-row { align-items: start; }
.r-row + .r-row { margin-top: clamp(72px, 2rem + 6vw, 160px); }
.r-plate { min-width: 0; grid-row: 1; }
.r-row--1 > .r-plate:nth-child(1) { grid-column: 1 / span 6; }
.r-row--1 > .r-plate:nth-child(2) { grid-column: 9 / span 4; align-self: end; }   /* подписи — на одной линии */
.r-row--2 > .r-plate:nth-child(1) { grid-column: 6 / span 7; }
.r-row--2 > .r-plate:nth-child(2) { grid-column: 1 / span 4; }
.r-row--3 > .r-plate:nth-child(1) { grid-column: 1 / span 7; align-self: end; }
.r-row--3 > .r-plate:nth-child(2) { grid-column: 9 / span 4; }
.r-plate .caption { max-width: 30em; }

/* ---------- Забронировать стол ---------- */
.r-book .g { align-items: end; }
.r-book__media { grid-column: 1 / span 5; }
.r-book__text { grid-column: 7 / span 6; padding-bottom: clamp(0px, 3vw, 48px); }
.r-book__text .h2 { margin-bottom: var(--s-5); }
.r-book__text .lead a { color: var(--ink); }
.r-book__text .lead a:hover { color: var(--terracotta); }
.r-book__actions { margin-top: var(--s-6); }

/* ---------- Адаптив ---------- */
@media (max-width: 1100px) {
  .r-open__act { grid-column: 8 / span 5; }
  .r-text__note { grid-column: 9 / span 4; }
}
@media (max-width: 900px) {
  .r-open__lead, .r-open__act, .r-text__prose, .r-text__note,
  .r-book__media, .r-book__text { grid-column: 1 / -1; }
  .r-open__act { margin-top: var(--s-6); }
  .r-text__note { margin-top: var(--s-6); }
  .r-row > .r-plate:nth-child(n) { grid-column: 1 / -1; grid-row: auto; margin-top: 0; align-self: start; }
  .r-row > .r-plate + .r-plate { margin-top: var(--s-7); }
  .r-row + .r-row { margin-top: var(--s-8); }
  /* на узком экране меньшие кадры сдвинуты лесенкой: сначала к правому краю, потом к левому */
  .r-plate--inset { width: 74%; justify-self: end; }
  .r-plate--narrow { width: 74%; }
  .r-book__media { max-width: 520px; }
  .r-book__text { margin-top: var(--s-7); padding-bottom: 0; }
}
@media (max-width: 640px) {
  .r-open__act .btn { width: 100%; }
  .r-open .vframe { aspect-ratio: 4 / 3; }       /* кадр 16:9 на телефоне — крупнее, по бокам срезается */
  .r-plate--inset, .r-plate--narrow { width: 82%; }
}