/* EIWA · bar page (bar.html, js/pages/bar.js, js/ui/bar-list.js, js/ui/age-gate.js).
   Builds on menu.css (page grid, rail, .menu-sec headings): a printed bar card — names left with the price on their
   baseline at the right, the composition or region under them, a group's volume once by its title, hairline rows.
   The one pink is the page's 酒 (no floating «Заказ» here: alcohol is not delivered). */

/* ---------- page head: 酒 Бар, the card's own line, the delivery note ---------- */
.bar-head {
  grid-column: 1 / -1;
  display: grid; gap: .875rem; justify-items: start;
  padding-block: clamp(1.75rem, 3vw, 2.5rem) clamp(2rem, 4vw, 3.5rem);
}
.bar-head__title {
  display: flex; align-items: baseline; gap: .4em;
  font-size: clamp(2.75rem, 5.4vw, 5rem);
  font-weight: 300;
  line-height: 1;
}
.bar-head__title:focus { outline: none; }
.bar-head__jp { font-size: .42em; letter-spacing: 0; }
.bar-head__intro { max-width: 24em; font-size: clamp(1.25rem, 1.9vw, 1.75rem); font-weight: 300; line-height: 1.3; }
.bar-head__note { font-size: .9375rem; color: var(--mute); }

/* until «Да, мне есть 18» only the head shows, softly out of focus under the gate */
.js .page--bar.is-gated .bar-head { filter: blur(.375rem); opacity: .55; }
.js .page--bar.is-gated .bar-content { min-height: 60vh; min-height: 60svh; } /* the gate sits over the page, not the footer */
@media (prefers-reduced-motion: no-preference) {
  .bar-head { transition: filter var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out); }
}
.bar-nojs { padding: 1rem 1.125rem; border-left: 1px solid var(--ink); background: rgba(255, 255, 255, .6); }

/* ---------- the card ---------- */
/* the air under the card is the page's (main), not the card's: the sticky rail beside it is held inside its grid
   row, so with the padding in the row the rail outlived the card by that much and, scrolled to the bottom, its last
   link and underline hung just under the fixed header over empty paper (QA 2026-10-08, 1440). Now the rail leaves
   with the card's last row. */
.bar-content { padding-bottom: 0; }
.page--bar main { padding-bottom: calc(clamp(1.5rem, 4vw, 3rem) + clamp(2rem, 5vw, 5rem)); }
/* phones and tablets: the first section title keeps its air under the sticky strip, and a jump from the strip lands
   with the same gap (client, 2026-10-07: «Отступ лучше поправить») */
@media (max-width: 1023px) {
  .bar-content { padding-top: 1.75rem; }
  .page--bar .menu-sec { scroll-margin-top: calc(var(--strip-h) + 1.75rem); }
}
/* the groups flow in two columns where there is room, like the printed card */
.bar-sec__groups { columns: 2 22rem; column-gap: clamp(2rem, 4.4vw, 4.5rem); }
.bar-group { break-inside: avoid; padding-bottom: clamp(2rem, 3vw, 2.5rem); }
/* the title carries the group's one line, across the full width — never split at a column gap (client, 2026-10-07:
   «Здесь есть разделение линии, а выше не было»); the rows' lines sit between rows. At its right, above the price
   column: the group's one price (cocktails) or its one volume (sake · 40 мл; draft beer · 330 мл · 500 мл) */
.bar-group__title {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--line);
  font-size: .9375rem; font-weight: 600; line-height: 1.3;
  color: var(--ink);
}
.bar-group__price { font-weight: 400; font-variant-numeric: tabular-nums; }
.bar-group__vol { display: flex; gap: .75rem; font-weight: 400; color: var(--mute); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bar-group__list { margin: 0; padding: 0; }
.bar-group__list > .bar-item:first-child { border-top: 0; }

/* a line: the name, its price on the same baseline at the right, the composition / region under the name */
.bar-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: 'name price' 'note .';
  align-items: baseline;
  column-gap: 1.25rem;
  padding: .6875rem 0 .75rem;
  border-top: 1px solid var(--line);
}
.bar-item > p { margin: 0; }
.bar-item__name { grid-area: name; min-width: 0; font-size: 1.0625rem; line-height: 1.35; }
.bar-item__note { grid-area: note; margin-top: .1875rem !important; font-size: .9375rem; line-height: 1.4; color: var(--ink-2); }
.bar-item__price {
  grid-area: price;
  display: flex; align-items: baseline; justify-content: flex-end; gap: .75rem;
  font-size: 1.0625rem; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.bar-price { text-align: right; }
/* a volume of its own (a line in a mixed group: «750 мл  4 900 ₽») sits muted before its price */
.bar-item__vol { margin-right: .5rem; font-size: .875rem; color: var(--mute); }
/* several volumes (draft beer): a price per column, each column as wide as the next, under its volume in the title */
.bar-group__vol--multi .bar-price, .bar-item__price--multi .bar-price { min-width: 4.25rem; }

/* glasses, then bottles (the wines): a quiet label over each run — «бокал … 125 мл», «бутылка … 750 мл» */
.bar-run {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  margin: 0; padding: .875rem 0 .125rem;
  border-top: 1px solid var(--line);
  font-size: .9375rem; line-height: 1.3; color: var(--mute);
}
.bar-group__title + .bar-run { border-top: 0; padding-top: .75rem; }
.bar-run__vol { font-variant-numeric: tabular-nums; }

/* names only (classic cocktails at one price): two short columns where there is room. No column gap — the left
   cell keeps the air as its own padding — so each row's line runs unbroken across both, like the one-column groups */
@media (min-width: 768px) {
  .bar-group__list--plain { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 0; }
  .bar-group__list--plain > .bar-item:nth-child(odd) { padding-right: 1.5rem; }
  .bar-group__list--plain > .bar-item:nth-child(2) { border-top: 0; }
  .bar-group__list--plain > .bar-item:nth-child(odd):last-child { margin-right: 1.5rem; padding-right: 0; } /* alone in its row: the line stops at its column */
}

/* a long group (≥ 6 lines, js/ui/bar-list.js isWideGroup) — «Авторские коктейли» and the like: where the section
   has its two columns, the group spans both and lays its own lines in two columns on the same grid (row by row, so
   the hairlines meet across), instead of one narrow column with the right half empty */
.bar-sec__groups { container-type: inline-size; }
@media (min-width: 1024px) {
  @container (min-width: 46rem) {
    .bar-group--wide { column-span: all; }
    /* the right column starts where the section's second column does (its gap = --bar-gap), but the gap is the left
       cell's padding, so the row lines run unbroken */
    .bar-group--wide .bar-group__list {
      --bar-gap: clamp(2rem, 4.4vw, 4.5rem);
      display: grid; grid-template-columns: calc((100% - var(--bar-gap)) / 2 + var(--bar-gap)) minmax(0, 1fr);
      column-gap: 0;
    }
    .bar-group--wide .bar-group__list > .bar-item:nth-child(odd) { padding-right: var(--bar-gap); }
    .bar-group--wide .bar-group__list > .bar-item:nth-child(2) { border-top: 0; }
    .bar-group--wide .bar-group__list > .bar-item:nth-child(odd):last-child { margin-right: var(--bar-gap); padding-right: 0; }
  }
}

.bar-sec__note {
  max-width: 30em;
  margin-top: .25rem;
  padding-left: 1rem;
  border-left: 1px solid var(--line-strong);
  font-size: 1rem; line-height: 1.45;
  color: var(--ink-2);
}

/* phones: one column everywhere, like a printed card held in the hand (references: Bar Kumiko, Lambic) — the name
   (17 px) with its price on the same baseline, the composition under both in muted 14 px, more air between groups */
@media (max-width: 767px) {
  .bar-sec__groups { columns: auto; }
  .bar-group { padding-bottom: 2.25rem; }
  /* the group's name reads as a heading, not a tiny label: 18 px, the case as written (its volume / price stay small caps) */
  .bar-group__title > span:first-child { font-variant: normal; letter-spacing: .005em; font-size: 1.125rem; }
  .bar-group__title { padding-bottom: .5rem; font-size: .9375rem; }
  .bar-item { grid-template-areas: 'name price' 'note note'; column-gap: 1rem; padding: .75rem 0 .8125rem; }
  .bar-item__note { font-size: .875rem; line-height: 1.45; }
  .bar-group__vol, .bar-item__price { gap: .5rem; }
  .bar-group__vol--multi .bar-price, .bar-item__price--multi .bar-price { min-width: 4rem; }
}

/* ---------- 18+ gate (a centred kalka window, js/ui/age-gate.js) ---------- */
.age-gate .panel__sheet { width: min(28rem, calc(100vw - 2 * var(--gutter))); }
.age-gate .panel__koi { display: none; }
.age-gate__body { padding-top: 1.5rem; }
.age-gate__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }
.age-gate__yes { min-height: 3.25rem; padding-inline: 1.75rem; }
.age-gate__no { font-size: 1rem; }
.age-gate__legal { margin-top: 1.75rem; font-size: .8125rem; line-height: 1.4; color: var(--mute); }