/* ──────────────────────────────────────────────────────────────
   Purchase flow — Haus Vajbz. The pieces the ticket picker, checkout and
   result share: the event panel (photo + red band with the two-tone title),
   the 01 / 02 / 03 progress strip and the sticky mobile action bar.
   Load before the page sheet (tickets.css / checkout.css / result.css).
   Reads only tokens from tokens.css + hv/theme.css.
   ────────────────────────────────────────────────────────────── */

/* ── Hero: photo, then the red band with the two-tone title ── */
.fl-hero {
  position: relative; background: var(--ink);
  /* Full-bleed on phones/tablets: the panel sits inside .hv-wrap's gutter,
     so pull it back out to the screen edges. Desktop grid resets this. */
  margin-inline: calc(-1 * var(--gutter));
}
.fl-hero__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.fl-hero__media img { width: 100%; height: 100%; object-fit: cover; filter: contrast(1.05) saturate(0.95); }
.fl-hero__empty {                      /* no photo: ink field with the wordmark */
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--paper); font-size: clamp(2rem, 12vw, 4rem);
}
.fl-hero__media::after {              /* the deck's grain: subtle, never a gradient wash */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: url("../../images/texture/concrete-grain.f8904e94ae5e.webp") center / 320px repeat; /* explicit path: Chrome resolves var() urls against the using sheet */ opacity: 0.18; mix-blend-mode: multiply;
}
.fl-hero__nav {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; justify-content: space-between; align-items: center;
  padding: calc(var(--gutter) * 0.75) var(--gutter);
  padding-top: calc(var(--gutter) * 0.75 + env(safe-area-inset-top));
}
.fl-hero__nav .hv-icon-btn { border-color: var(--paper); color: var(--paper); background: rgba(13, 13, 13, 0.55); }
.fl-hero__nav .hv-icon-btn:hover { background: var(--paper); color: var(--ink); }
.fl-hero__nav .hv-icon-btn.is-hidden { visibility: hidden; }

.fl-band { padding: 1.1rem var(--gutter) 1.25rem; background: var(--bg); color: var(--text); }
.fl-band__title { font-size: clamp(2rem, 9.5vw, 3.4rem); }
.fl-band__meta { margin-top: 0.7rem; display: flex; flex-wrap: wrap; gap: 0.3rem 0.8rem; color: var(--text-dim); }
.fl-band__meta span + span::before { content: '·'; margin-right: 0.8rem; }

/* ── Progress: TICKET → PAYMENT → GET TICKETS as a ruled strip ── */
.fl-progress {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--line);
}
.fl-progress span {
  padding: 0.8rem 0 0.7rem; border-top: 2px solid var(--line);
  color: var(--text-muted); font-weight: 500;
}
.fl-progress span.is-active { border-top-color: var(--red); color: var(--red); font-weight: 600; }
.fl-progress span + span { padding-left: 0.6rem; }

/* ── Sticky mobile action bar ────────────────────────────────── */
.fl-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: none;
  background: var(--bg); border-top: 2px solid var(--text);
  padding: 0.85rem var(--gutter) calc(0.85rem + env(safe-area-inset-bottom));
}
.fl-bar.is-visible { display: block; }


/* ── Tablet ──────────────────────────────────────────────────── */
@media (min-width: 640px) {
  .fl-hero__media { aspect-ratio: 16 / 9; }
}

/* ── Desktop: the panel sticks on the left, the bar goes away ─── */
@media (min-width: 1024px) {
  .fl-hero { position: sticky; top: 0; align-self: start; margin-inline: 0; }
  .fl-hero__media { aspect-ratio: 4 / 5; }
  .fl-hero__nav { padding: 1.25rem; }
  .fl-band { padding: 1.4rem 1.5rem 1.6rem; }
  .fl-band__title { font-size: clamp(2.4rem, 3.6vw, 3.6rem); }
  .fl-bar { display: none !important; }
}