/* ══════════════════════════════════════════════════════
   PUBLICO — адаптив. Все брейкпоинты собраны здесь.
   ══════════════════════════════════════════════════════ */

/* ═══ ПЛАНШЕТ ═══ */
@media (max-width: 1024px) {

  /* карточки блюд с четырёх в ряд уходят в два: при трёх
     колонках подпись «сёмга / креветки / индейка / колбаски»
     ломалась на четыре строки и рвала ритм сетки */
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards--special { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card--wide { grid-column: span 2; }

  /* галерея: рамка из вертикальных фото по краям + прижатых квадратов
     в центре нужна для широкого экрана — на планшете просто стопкой,
     сверху вниз, в порядке разметки (лево → центр → право) */
  .grid { flex-wrap: wrap; }
  .grid__col, .grid__center { flex-basis: 100%; }

  /* вертикальные кадры встают парами, а не друг под другом: во всю
     ширину экрана 3:4 разрастался до 470px против 171px у квадратов
     по соседству — ритм рвался, а галерея занимала три экрана скролла.
     Парами все ряды становятся двухчастными и сопоставимыми по высоте */
  .grid__col { flex-direction: row; }
  .grid__col .ph { flex: 1 1 0; min-width: 0; }

  .about__grid { grid-template-columns: 1fr; }
  .places { grid-template-columns: 1fr; }

  /* прайс в одну колонку: на 1024 две колонки давали
     строку меньше 30 символов, и названия вроде
     «Эспрессо-тоник классический / гранат» переносились */
  .price { grid-template-columns: 1fr; gap: 0; }
}


/* ═══ ГОРИЗОНТАЛЬНЫЙ ГЕРОЙ УХОДИТ В КОЛОНКУ ═══ */
@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    min-height: 0;
    align-items: start;
  }
  /* фото после текста, но перед метаданными */
  .hero__media { order: 2; }
  .ticket { max-width: 320px; }
  .hero__meta { order: 3; }
}


/* ═══ ТЕЛЕФОН ═══ */
@media (max-width: 720px) {

  /* навигация уезжает в выпадающую панель под шапкой.
     display:none вместо transform: свёрнутое меню не должно
     ловить фокус с клавиатуры и попадать в поиск по странице */
  .burger { display: flex; }
  .hdr__tel { display: none; }

  .hdr__nav {
    display: none;
    position: absolute; inset: var(--hdr-h) 0 auto 0;
    flex-direction: column; gap: 0;
    background: var(--cream); color: var(--ink);
    padding: 8px var(--pad) 20px;
    border-bottom: 1px solid rgba(26,21,18,.12);
  }
  .hdr__nav.is-open { display: flex; animation: navIn .35s var(--ease); }
  @keyframes navIn {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: none; }
  }
  .hdr__nav a { padding: 13px 0; border-bottom: 1px solid rgba(26,21,18,.1); font-size: 16px; }
  .hdr__nav a::after { content: none; }

  /* пока панель открыта, шапка обязана быть кремовой,
     иначе белый логотип ложится на белое выпадающее меню */
  .hdr.is-open { background: var(--cream); color: var(--ink); }

  .hero { padding-top: calc(var(--hdr-h) + 34px); }
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn { text-align: center; }
  .hero__meta { flex-direction: column; gap: 6px; }

  /* на телефоне карточки блюд идут в две колонки, а не в одну:
     фото 1:1 во всю ширину экрана раздувает секцию меню до десятка
     экранов прокрутки */
  .cards, .cards--special { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card--wide { grid-column: span 2; }
  .card--wide .ph { aspect-ratio: 1 / 1; }
  .bottles { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* дата события встаёт над текстом: колонка 120px
     съедала половину ширины экрана.
     .ev:has(.ev__ph) дублируем намеренно: в sections.css у карточки с
     фото селектор специфичнее (0,2,0 против 0,1,0), а медиазапрос
     специфичность не поднимает — без этого трёхколоночная сетка
     переживала мобильный брейкпоинт и раскатывала текст по слову в строку */
  .ev, .ev:has(.ev__ph) { grid-template-columns: 1fr; gap: 16px; }
  /* пропорция вместо фиксированных 160px: афиша каппинга снята 3:4,
     и в полосе 1.94:1 от неё оставалась средняя треть с обрезанным
     заголовком. 4:3 — компромисс между афишей и квадратным кадром
     второго события, карточка при этом не разрастается на пол-экрана */
  .ev__ph { width: 100%; height: auto; aspect-ratio: 4 / 3; }
  .ev__date {
    display: flex; align-items: baseline; gap: 10px;
    text-align: left; border-right: 0; padding-right: 0;
    padding-bottom: 12px; border-bottom: 1px solid var(--hair);
  }
  .ev__date b { font-size: 32px; }

  .place dl { grid-template-columns: 1fr; gap: 4px 0; }
  .place dt { padding-top: 10px; }

  .tabs { gap: 6px; }
  .tab { padding: 9px 16px; font-size: 13px; }
}


/* ═══ УЗКИЙ ТЕЛЕФОН ═══ */
@media (max-width: 400px) {
  .price li { flex-wrap: wrap; gap: 4px; }
  .price li b { width: 100%; }
}