/* Кафе «Мишки», после venue.css. --b-accent ставит venue.js, --b-accent-2 — скрипт внизу mishki-cafe.html. */

/* Объявляем и на потомках: подстановка var() случается там, где объявлено
   (та же причина, что в venue.css). */
.b-cafe, .b-cafe * {
  --b-honey-ink: color-mix(in oklab, var(--b-accent-2, var(--honey-500)) 86%, var(--text-on-dark));
  --b-honey-rule: color-mix(in oklab, var(--b-accent-2, var(--honey-500)) 40%, transparent);
}


/* ---- 1. hero: осевая витрина ----
   Круглый знак кафе по центру, под ним заголовок, кнопки и факты, и только
   потом широкий кадр во всю полосу. Ось строится вокруг круглого бейджа. */

.cafe-hero__in {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: var(--s2x);
}
.cafe-hero__text {
  display: grid;
  justify-items: center;
  text-align: center;
  width: min(100%, 960px);
  margin-inline: auto;
}
.cafe-hero__mark { justify-content: center; min-height: 0; }
.cafe-hero__in { padding-top: clamp(32px, 4vw, 56px); }
.cafe-hero__mark img.is-tall {
  height: clamp(88px, 10vw, 136px);
  object-position: center;
}
.cafe-hero__title { max-width: 20ch; text-wrap: balance; }
.cafe-hero__title .accent-word { white-space: nowrap; }
.cafe-hero__lead { max-width: 46ch; }
.cafe-hero__facts { justify-content: center; }
.cafe-hero__cta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(100%, 640px); gap: var(--s1); }
.cafe-hero__cta > .btn { width: 100%; justify-content: center; }
.cafe-hero__cta > .venue-hero__events { grid-column: 1 / -1; justify-self: center; width: auto; min-height: 44px; padding: 8px 12px; border: 0; border-radius: 0; box-shadow: none; background: transparent; text-decoration: underline; text-underline-offset: 5px; }
@media (max-width: 560px) {
  .cafe-hero__cta { grid-template-columns: minmax(0, 1fr); }
}

/* Кадр во всю полосу — панорама зала, а не вертикальный портрет ресторана. */
.cafe-hero__media .slot { aspect-ratio: 21 / 8; }
@media (max-width: 899px) {
  .cafe-hero__media .slot { aspect-ratio: 4 / 3; }
}
@media (max-width: 560px) {
  .cafe-hero__media .slot { aspect-ratio: 1 / 1; }
}


/* ---- 2. суть + факты ----
   Первый бейдж — единственный настоящий факт кафе, идёт во всю полосу
   в две колонки. Три запрошенных у заказчика стоят под ним равными долями
   и читаются как пропуски. */

.cafe-badges { grid-template-columns: minmax(0, 1fr); }

@media (min-width: 860px) {
  .cafe-badges { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cafe-badges > .badge:first-child {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-content: center;
    gap: var(--s2);
    padding-block: clamp(22px, 2.6vw, 32px);
  }
  .cafe-badges > .badge:first-child .badge__value { font-size: var(--fs-body); color: var(--b-ink-2); }
}


/* Галерея с одинаковыми кадрами. */

.cafe-mosaic { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
.cafe-mosaic .slot {
  aspect-ratio: 4 / 3;
  height: auto;
  min-height: 0;
  padding: 0;
  border: 0;
  margin: 0;
}
.cafe-mosaic .slot__pic { position: absolute; inset: 0; }
.cafe-mosaic .slot__pic img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.cafe-mosaic > :nth-child(3) img { object-position: center 38%; }

@media (max-width: 619px) { .cafe-mosaic { grid-template-columns: minmax(0, 1fr); gap: var(--s1); } }


/* ---- 4. меню — главный экран страницы ----
   Сетка и карточка — из venue.css (.menu-grid, .dish); здесь только фильтр,
   липкая полоса пилюль и медовая цена. */

/* venue.js гасит карточку атрибутом hidden, но .dish объявлен display:
   grid и перебивает его. Без этой строки пилюли переключаются, ничего
   не пряча. */
.menu-grid .dish[hidden] { display: none; }

/* Липкая только от 900px: на телефоне полоса съедает тот самый экран,
   ради которого сюда пришли. */
.cafe-filters { position: relative; z-index: 3; margin-bottom: var(--s2); }
.cafe-filters .menu-filters { margin-bottom: 0; }

@media (min-width: 900px) {
  .cafe-filters {
    position: sticky;
    top: var(--b-head, 68px);
    padding-block: clamp(14px, 1.6vw, 20px);
    background: var(--b-ground);
    border-bottom: 1px solid var(--b-rule);
  }
  /* Хвост-растушёвка: карточки уходят под полосу, а не обрубаются об неё. */
  .cafe-filters::after {
    content: "";
    position: absolute; left: 0; right: 0; top: 100%;
    height: 18px;
    background: linear-gradient(to bottom, var(--b-ground), transparent);
    pointer-events: none;
  }
}

/* Пилюля-плейсхолдер — это запрос заказчику, а не рубрика: капитель и
   разрядка на нём читались бы как оформленная категория. */
.chip--filter.ph { letter-spacing: 0; text-transform: none; }
.chip--filter:focus-visible { outline-offset: 3px; }

/* Цена — медовым, категория — карамелью: два акцента кафе разведены по
   ролям, а не смешаны в одном столбце. */
.b-cafe .dish__price { color: var(--b-honey-ink, var(--b-gold)); border-top-color: var(--b-honey-rule, var(--b-rule)); }
.b-cafe .dish__price.ph { color: var(--b-ink-3); border-top-color: var(--b-rule); }
.dish__group.ph { font-family: var(--b-text); letter-spacing: 0; text-transform: none; }

/* Карточка меню на 390: слот занимает пол-экрана, если оставить 4:3. */
@media (max-width: 560px) {
  .dish__media .slot { aspect-ratio: 16 / 9; }
}

/* Пустая категория: CSS показывает её сам, когда в сетке не осталось
   видимых карточек. Скрипту остаётся только текст. */
.cafe-menu__empty { display: none; }
.menu-grid:not(:has(> .dish:not([hidden]))) + .cafe-menu__empty {
  display: block;
  padding-block: var(--s2x);
  border-block: 1px dashed var(--b-honey-rule, var(--b-rule));
  text-align: center;
}


/* ---- 5. особое: разворот зеркален ресторанному -------------------------- */

@media (min-width: 900px) {
  .cafe-special { grid-template-columns: 7fr 5fr; }
  .cafe-special .special__art { order: 2; }
  .cafe-special .special__body { order: 1; }
}
/* Гирлянда и свечи рисуются медовым, торт — карамелью: линия одна, но
   праздничная её часть светлее. */
.cafe-special__art > svg { color: var(--b-accent, var(--b-gold)); }
.cafe-special__art > svg .draw-path:nth-child(-n+4) { stroke: var(--b-accent-2, var(--honey-500)); }


/* ---- 6. бронь: разворот зеркален ресторанному --------------------------- */

@media (min-width: 900px) {
  .cafe-visit { grid-template-columns: 7fr 5fr; }
  .cafe-visit > .facts { order: 2; }
  .cafe-visit > .visit__col { order: 1; }
}


/* ---- печать ----
   Печатают с включённым фильтром — скрытые карточки возвращаются; сама
   полоса фильтров уходит вместе со своим местом. */

@media print {
  .cafe-filters { display: none; }
  .menu-grid .dish[hidden] { display: grid; }
  .menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cafe-mosaic > :first-child { grid-column: auto; grid-row: auto; }
}