/* ──────────────────────────────────────────────────────────────
   Browse events — Haus Vajbz. Mobile first: a 2-column grid of stacked cards
   (photo over copy, 32px gap) — 188px photos on the 440 canvas; 4 columns from
   1024 (282px photos on the 1320 canvas). Sections sit --section-gap apart.
   Tokens only (tokens.css + hv/theme.css): square, flat, rules not boxes.
   Spec: plan/hausvajbz/06_checkout_result_events.md
   ────────────────────────────────────────────────────────────── */

.br { padding-block: var(--section-gap); }

/* ── Head: mono strip, red headline over a 2px rule ─────────── */
.br-head { padding-bottom: 0.9rem; border-bottom: 2px solid var(--text); }
.br-head__kicker { margin: 0 0 0.9rem; display: flex; justify-content: space-between; gap: 1rem; }
.br-title { font-size: clamp(2.6rem, 13vw, 5.6rem); color: var(--red); }
.br-title em { color: var(--ink); }

/* ── Filter pills ───────────────────────────────────────────── */
.br-filters { padding-top: var(--section-gap); }
.br-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.br-pill { display: inline-flex; align-items: stretch; }
.br-pill__btn {
  border: 0; cursor: pointer; padding: 0.7em 0.9em 0.62em; font-size: 0.72rem;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.br-pill__btn:hover, .br-pill__btn:focus-visible, .br-pill__btn[aria-expanded='true'] { background: var(--red); color: var(--paper); box-shadow: inset 0 0 0 1.5px var(--red); outline: none; }
.br-pill.is-active .br-pill__btn { background: var(--red); color: var(--paper); box-shadow: inset 0 0 0 1.5px var(--red); }
/* .br-pill > : outranks the theme's `a { color: inherit }` reset, which otherwise
   painted this × ink-on-deep-red */
.br-pill > .br-pill__x {
  display: inline-flex; align-items: center; justify-content: center; min-width: 2.2em;
  background: var(--red-deep); color: var(--paper); text-decoration: none;
  font-family: var(--font-mono); font-size: 0.85rem; line-height: 1;
  transition: background var(--dur) var(--ease);
}
.br-pill__x:hover { background: var(--ink); }

/* category row: wraps at every width, so no pill is ever clipped at the phone edge */
.br-cats { margin-top: 0.5rem; padding-bottom: 0.9rem; border-bottom: 1px solid var(--line); }
.br-cats__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.br-cat { text-decoration: none; padding: 0.7em 0.9em 0.62em; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.br-cat:hover, .br-cat:focus-visible { background: var(--red); color: var(--paper); box-shadow: inset 0 0 0 1.5px var(--red); outline: none; }
.br-cat[aria-current='true'] { color: var(--paper); box-shadow: none; }
.br-cat[aria-current='true']:hover { background: var(--red-deep); }

.br-error { margin: 0.7rem 0 0; padding: 0.55rem 0.8rem; background: var(--red); color: var(--paper); }

/* ── Result line + grid ──────────────────────────────────────── */
.br-count { margin: var(--section-gap) 0 1.2rem; }
/* the .hvc base (theme.css) stacks photo over copy; the photo fills the
   column (square via aspect-ratio), so 2 columns → 188px on a 440 phone and
   4 columns → 282px on a 1320 desktop */
.br-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.br-grid .hvc__name { font-size: 0.95rem; color: var(--ink); }
.br-grid .hvc__meta span { display: block; }                 /* narrow card: date and venue on their own lines, no dangling · */
.br-grid .hvc__meta span + span::before { content: none; }
.br-sub { margin: var(--section-gap) 0 1.2rem; font-size: clamp(1.6rem, 7vw, 2.6rem); color: var(--red); }
.br-empty .hv-mono { text-decoration: none; white-space: nowrap; }
.br-empty .hv-mono:hover { color: var(--red); }

/* ── Sheet: bottom sheet on phones, centered square panel from 768 ── */
.br-sheet { position: fixed; inset: 0; z-index: 70; display: flex; align-items: flex-end; justify-content: center; }
.br-sheet__backdrop { position: absolute; inset: 0; background: var(--ink); opacity: 0.7; }
.br-sheet__panel {
  position: relative; width: 100%; max-width: 440px; max-height: 85vh; overflow-y: auto;
  background: var(--paper); color: var(--ink);
  padding: 1.2rem var(--gutter) calc(1.2rem + env(safe-area-inset-bottom));
  border-top: 4px solid var(--red);
}
.br-sheet__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 0.8rem; }
.br-sheet__title { font-size: 1.9rem; color: var(--red); }
.br-sheet__list label { display: flex; align-items: center; gap: 0.75rem; flex: 1; cursor: pointer; font-family: var(--font-sub); font-weight: 600; font-size: 1.05rem; }
.br-sheet__list input {                       /* same square as .hv-check, inline here to keep the list ruled */
  appearance: none; -webkit-appearance: none; margin: 0; flex: none;
  width: 20px; height: 20px; border: 2px solid var(--line-strong); background: var(--surface);
  display: grid; place-items: center; cursor: pointer;
}
.br-sheet__list input::before { content: ''; width: 8px; height: 8px; background: var(--paper); transform: scale(0); transition: transform var(--dur) var(--ease); }
.br-sheet__list input:checked { background: var(--red); border-color: var(--red); }
.br-sheet__list input:checked::before { transform: scale(1); }
.br-sheet__list input:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.br-sheet__fields { display: grid; gap: 0.9rem; }
.br-field { display: grid; gap: 0.4rem; }
.br-field .hv-input { color-scheme: light; }
.br-sheet__hint { margin: 0.6rem 0 0; }
.br-sheet__foot { display: grid; grid-template-columns: 1fr 1.6fr; gap: 0.6rem; margin-top: 1.2rem; }
body.br-sheet-open { overflow: hidden; }

/* ── ≥480: sheet fields side by side ─────────────────────────── */
@media (min-width: 480px) {
  .br-sheet__fields { grid-template-columns: 1fr 1fr; }
}

/* ── ≥768: sheet becomes a centered panel ────────────────────── */
@media (min-width: 768px) {
  .br-grid .hvc__name { font-size: 1.1rem; }
  .br-sheet { align-items: center; padding: 1rem; }
  .br-sheet__panel { border: 2px solid var(--ink); border-top: 4px solid var(--red); padding: 1.4rem 1.5rem; }
}

/* ── ≥1024: four cards per row ───────────────────────────────── */
@media (min-width: 1024px) {
  .br-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .br-grid .hvc__name { font-size: 1.2rem; }
  .br-grid .hvc__price { font-size: 1.1rem; }
}

@media (min-width: 1100px) {
  .br-title { font-size: 5.6rem; }
}