/* Mishki Bar, после venue.css. Селекторы только с модификатором или под [data-venue="bar"]:
   venue.css/venue.js общие с med и cafe. */


/* ---- контраст граната ----
   Кремовый на гранате 4.38:1, поэтому подпись кнопки крупная (19px/700). */

[data-venue="bar"] .btn {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: .004em;
  padding: 17px 28px;
}
[data-venue="bar"] .btn--ghost { padding: 16px 27px; }

/* Кнопка в шапке мелкая (13px), поэтому акцентом не заливается: кремовый
   на фоне страницы даёт 13:1, а акцент работает контуром и подсветкой. */
[data-venue="bar"] .masthead__cta .btn {
  font-size: 13px;
  font-weight: 600;
  padding: 12px 20px;
  background: transparent;
  color: var(--b-ink);
  border: 1px solid var(--b-accent-rule, var(--b-rule-strong));
  box-shadow: none;
}



/* ---- 1. hero-сцена ----
   Центральная колонна света — знак, заголовок, кнопки, факты — и под ней
   широкая полоса кадра во всю ширину экрана. Скролл-механики нет. */

.venue-hero--stage { text-align: center; }
.venue-hero--stage > .glow { z-index: 0; }

/* Одна колонка на всех ширинах: разворот 7/5 из venue.css здесь не нужен. */
.venue-hero--stage .venue-hero__in {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  align-content: center;
  min-height: 60vh;
  min-height: 60svh;
  padding-block: clamp(52px, 7vw, 108px) clamp(34px, 4vw, 60px);
}

.venue-hero--stage .venue-hero__text {
  display: grid;
  justify-items: center;
  width: 100%;
  max-width: 62rem;
}
.venue-hero--stage .venue-hero__mark { justify-content: center; }
.venue-hero--stage .venue-hero__mark img { object-position: center; }
.venue-hero--stage .venue-hero__title { max-width: 17ch; margin-inline: auto; }
.venue-hero--stage .venue-hero__lead { margin-inline: auto; }
.venue-hero--stage .venue-hero__cta { justify-content: center; }
.venue-hero--stage .venue-hero__facts { justify-content: center; }

/* Полоса во всю ширину, без полей и радиуса. Подпись внутри держится
   полосы набора, иначе уезжает к краю на широком мониторе. */
.bar-stage { position: relative; z-index: 1; width: min(calc(100% - var(--b-gutter) * 2), var(--b-max)); margin-inline: auto; }
.bar-stage .slot {
  aspect-ratio: 16 / 9;
  border-radius: var(--b-radius-sm);
}
.bar-stage .slot__caption {
  width: 100%;
  max-width: var(--b-max);
  margin-inline: auto;
  text-align: left;
}
@media (max-width: 760px) {
  .bar-stage .slot { aspect-ratio: 4 / 3; }
}

/* Колонтитул уходит под полосу — надзаголовка над h1 нет по построению. */
.venue-hero--stage .venue-hero__runhead {
  padding-top: clamp(18px, 2.4vw, 30px);
  text-align: left;
}


/* ---- 2. суть + факты: строки райдера ----
   Тот же .badge, но строками «ключ → строка» во всю полосу: у бара четыре
   факта, три из них ждут данных заказчика, и сетка карточек сделала бы из
   пропусков витрину. */

.badges--rows { grid-template-columns: minmax(0, 1fr); gap: 0; }
.badges--rows .badge {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s1);
  padding: clamp(18px, 2.2vw, 28px) 0;
  border: 0;
  border-top: 1px solid var(--b-rule);
  border-radius: 0;
  background: none;
}
.badges--rows .badge:last-child { border-bottom: 1px solid var(--b-rule); }
.badges--rows .badge__value { max-width: 56ch; }
@media (min-width: 760px) {
  .badges--rows .badge {
    grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
    gap: var(--s2x);
    align-items: baseline;
  }
}


/* ---- 3. атмосфера: два широких кадра ----
   Сцену и зал вертикальным кропом не показать. */

.bar-rail .slot { aspect-ratio: 16 / 10; }
@media (min-width: 900px) {
  .bar-rail .strip__rail { grid-auto-columns: calc((100% - var(--strip-gap)) / 2); }
}


/* ---- 4. барная карта ----
   Список, а не витрина: у коктейля нет подачи, которую показывают фото,
   а караоке-пакет — вовсе строка условий. Складки идут списком, без панели. */

.bar-card .menu-full { margin-top: 0; }
.bar-card .menu-cat:last-of-type { border-bottom: 0; }
.bar-card .menu-cat:last-of-type .menu-lines { padding-bottom: 0; }


/* ---- 5. особое: караоке ----
   Разворот зеркален ресторанному: графика справа и шире — в этом блоке
   читают расписание. */

@media (min-width: 900px) {
  .special--flip { grid-template-columns: 7fr 5fr; }
  .special--flip .special__art { order: 2; }
  .special--flip .special__body { order: 1; }
}
.special--flip .special__art > svg { width: min(100%, 260px); }


/* ---- печать ----
   Полоса кадра пока пустая: на бумаге это лист тонера, поэтому убираем. */

@media print {
  .bar-stage { display: none; }
  .bar-card { border: 0; padding: 0; background: none; }
  /* Колонна света меряется высотой экрана; на бумаге экрана нет, и 60vh
     превратились бы в пустую верхнюю треть листа. */
  .venue-hero--stage .venue-hero__in { min-height: 0; }
}

/* ---- наведение ----
   Только для мыши: на телефоне :hover после касания залипает. */

@media (hover: hover) and (pointer: fine) {
  [data-venue="bar"] .masthead__cta .btn:hover:not(:disabled) {
    background: var(--b-accent-veil, transparent);
    border-color: var(--b-accent, var(--b-gold));
    color: var(--b-ink);
  }
}