/* ──────────────────────────────────────────────────────────────
   Purchase flow — Haus Vajbz. The pieces the ticket picker, checkout and
   result share: the red band (Back / Close + the plain white title) that
   opens the page, the 01 / 02 / 03 progress strip and the sticky mobile
   action bar. The picker and checkout show no event photo; the square
   photo panel (.fl-hero) below is kept for the my-tickets event detail
   page (prdouction/ticket_event_detail.html), which still opens with it.
   Load before the page sheet (tickets.css / checkout.css / mytickets.css).
   Reads only tokens from tokens.css + hv/theme.css.
   ────────────────────────────────────────────────────────────── */

/* ── Hero (ticket_event_detail only): a square photo (408px max, centred),
   shown whole (contain on ink, never cropped) with the Back control on it;
   the red band follows it inside the same section. ── */
.fl-hero { position: relative; display: grid; justify-items: center; padding: 1.1rem 0 1.25rem; }
.fl-hero__media { position: relative; width: min(408px, 100%); aspect-ratio: 1; overflow: hidden; background: var(--ink-2); }
.fl-hero__media picture { display: block; width: 100%; height: 100%; }   /* so the img's 100% height resolves (needed for contain) */
.fl-hero__media img { width: 100%; height: 100%; object-fit: contain; 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: 1.05rem;
}
.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 {                       /* Back / Close in the photo's corners (the site bar sits above, no safe-area inset) */
  position: absolute; top: 0; left: 0; right: 0; z-index: 1;
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.75rem;
}
.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; }


/* Red band (first in .tp-main / .co-main): full-bleed on phones/tablets (pulled
   back out of .hv-wrap's gutter); a boxed red panel on desktop. Back / Close
   sit in a row above the title; the title is the plain paper text of the
   surface (no two-tone <em>). */
.fl-band { margin-inline: calc(-1 * var(--gutter)); padding: 1.1rem var(--gutter) 1.25rem; background: var(--bg); color: var(--text); }
.fl-band > .hv-tag { margin-bottom: 0.7rem; }   /* the event type: paper outline on the red band, same on every payment step */
.fl-band__nav { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; margin-bottom: 0.9rem; }
.fl-band__nav--end { justify-content: flex-end; }
.fl-band__title { font-size: clamp(2rem, 9.5vw, 3.4rem); color: var(--text); overflow-wrap: anywhere; }
.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. A completed
   step is a link back (checkout: 01 → the picker); the rest are plain. ── */
.fl-progress {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--line);
}
.fl-progress span, .fl-progress a {
  padding: 0.8rem 0.3rem 0.7rem; border-top: 2px solid var(--line);
  color: var(--text-muted); font-weight: 500; text-align: center; text-decoration: none;
}
.fl-progress a { color: var(--text-dim); transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.fl-progress a:hover { color: var(--text); border-top-color: var(--text); }
.fl-progress span.is-active { border-top-color: var(--red); color: var(--red); font-weight: 600; }

/* ── 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; }
/* Mobile browsers re-show their toolbar when the page scrolls up and move a bottom:0 bar a
   frame late, so the page flashed through the gap. Own layer + the bar's paper carried
   below its edge: the gap is always covered (the event page's .ev-buy does the same, hv/event.css). */
.fl-bar { transform: translateZ(0); backface-visibility: hidden; }
.fl-bar::after {
  content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 100vh;
  background: inherit; pointer-events: none;
}
/* the footer ends the page under the bar: give it the bar's room (checkout.js publishes --co-bar-h; the picker handles its own in tickets.css) */
@media (max-width: 1023.98px) { body:has(.co-bar.is-visible) .hv-foot { padding-bottom: calc(var(--co-bar-h, 96px) + 1rem); } }


/* ── Desktop: the band becomes a boxed red panel at the top of the column
   (the page sheets cap the column width), the bar goes away ─────────── */
@media (min-width: 1024px) {
  .fl-hero { position: sticky; top: calc(var(--nav-h, 60px) + 1.5rem); align-self: start; justify-items: start; padding: 0; }   /* under the site bar (js/hv/nav.js publishes --nav-h) */
  .fl-hero__media { width: 277px; }
  .fl-hero__empty { font-size: 1.8rem; }
  .fl-band { margin-inline: 0; padding: 1.4rem 1.5rem 1.6rem; }
  .fl-band__nav { margin-bottom: 1.1rem; }
  .fl-band + * { margin-top: 0.6rem; }   /* same breath as the event page's band → buy box */
  .fl-band__title { font-size: clamp(2.4rem, 3.6vw, 3.6rem); }
  .fl-bar { display: none !important; }
}