/* ──────────────────────────────────────────────────────────────
   Ticket picker — Haus Vajbz.  Mobile first; desktop splits into a
   sticky event panel (left) and the ticket list (right).
   The event panel, progress strip and sticky bar are the shared flow
   pieces in hv/flow.css (.fl-*); this file holds the ticket rows.
   Reads only tokens from tokens.css + hv/theme.css.
   ────────────────────────────────────────────────────────────── */

.tp { display: block; }

/* ── Ticket list ─────────────────────────────────────────────── */
.tp-list { margin: 0; padding: 0; list-style: none; }
.tp-list__head { display: flex; align-items: baseline; justify-content: space-between; padding: 1.4rem 0 0.6rem; }
.tp-list__head h2 { font-size: 1.05rem; }

.tp-row { border-bottom: 1px solid var(--line); position: relative; }
.tp-row:first-of-type { border-top: 1px solid var(--line); }
.tp-row::before {                      /* the deck's left vertical rule on the active item */
  content: ''; position: absolute; left: calc(-1 * var(--gutter)); top: 0; bottom: -1px;
  width: 4px; background: var(--red);
  transform: scaleY(0); transform-origin: top; transition: transform var(--dur) var(--ease);
}
.tp-row.is-open::before { transform: scaleY(1); }
.tp-row.is-off { opacity: 0.55; }

.tp-row__head {
  width: 100%; text-align: left; padding: 1rem 0;
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: 'tags tags' 'name price' 'meta meta';
  column-gap: 1rem; row-gap: 0.25rem;
  border: 0; background: transparent; cursor: pointer;
}
.tp-row.is-off .tp-row__head { cursor: default; }
.tp-row__tags { grid-area: tags; display: flex; gap: 0.35rem; flex-wrap: wrap; margin-bottom: 0.15rem; }
.tp-row__tags:empty { display: none; }
.tp-row__name { grid-area: name; font-size: 1.45rem; line-height: 1; }
.tp-row__price { grid-area: price; text-align: right; font-size: 1.05rem; font-variant-numeric: tabular-nums; white-space: nowrap; align-self: baseline; }
.tp-row__price s { display: block; font-weight: 500; font-size: 0.8rem; color: var(--text-muted); text-decoration: line-through; }
.tp-row__meta { grid-area: meta; margin-top: 0.15rem; }
.tp-row__meta:empty { display: none; }

.tp-row__body { display: none; padding: 0 0 1.1rem; }
.tp-row.is-open .tp-row__body { display: block; }
.tp-row__desc { margin: 0 0 1rem; color: var(--text-dim); max-width: 60ch; }
.tp-row__desc p { margin: 0; }
.tp-row__desc p + p { margin-top: 0.4rem; }

/* action slot: stepper + CTAs. Lives inline; on mobile JS moves it into the sticky bar. */
.tp-actions { display: grid; gap: 0.7rem; }
.tp-actions__qty { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.tp-actions__qty .hv-mono { flex: 1; }
.tp-actions__btns { display: grid; gap: 0.6rem; }
.tp-actions__btns form { margin: 0; display: contents; }
.tp-actions__btns.is-pair { grid-template-columns: 1fr 1fr; }
.tp-actions__btns.is-pair .hv-btn { padding-inline: 0.8rem; font-size: 0.85rem; }
.tp-actions__btns.is-pair .hv-btn__amount { margin-left: 0.4rem; }

.tp-note { display: flex; gap: 0.9rem; align-items: center; padding: 1.4rem 0 2rem; color: var(--text-dim); font-size: 0.85rem; }
.tp-note__mark { flex: none; width: 40px; height: 40px; background: var(--red); display: grid; place-items: center; }
.tp-note__mark img { height: 16px; }

.tp-empty { padding: 3rem 0; text-align: center; color: var(--text-dim); }
.tp-flash { margin-top: 1.2rem; }

/* sold-out single: the row opens onto the waitlist form instead of a stepper */
.tp-row.is-soldout .tp-row__name, .tp-row.is-soldout .tp-row__price { color: var(--text-dim); }
.tp-waitlist .waitlist-form { display: grid; gap: 0.6rem; max-width: 420px; }
.tp-waitlist p { margin: 0; color: var(--text-dim); }

/* ── Sticky mobile action bar (base rules: hv/flow.css .fl-bar) ── */
.fl-bar .tp-actions { gap: 0.6rem; }
body.tp-bar-open .tp { padding-bottom: var(--tp-bar-h, 160px); }

/* ── Login modal ─────────────────────────────────────────────── */
.tp-modal { position: fixed; inset: 0; z-index: 60; display: none; align-items: flex-end; justify-content: center; background: rgba(13, 13, 13, 0.7); }
.tp-modal.is-open { display: flex; }
.tp-modal__card { width: 100%; max-width: 440px; background: var(--paper); color: var(--ink); padding: 1.4rem var(--gutter) calc(1.4rem + env(safe-area-inset-bottom)); border-top: 4px solid var(--red); }
.tp-modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.tp-modal__title { font-size: 1.9rem; }
.tp-modal__sub { margin: 0.5rem 0 1.1rem; color: var(--text-dim); font-size: 0.9rem; }
/* form, error block, "or" rule, Google button and foot line: hv/theme.css form primitives */

/* ── Tablet (hero breakpoints live in hv/flow.css) ──────────── */
@media (min-width: 640px) {
  .tp-row__name { font-size: 1.7rem; }
  .tp-modal { align-items: center; padding: 1rem; }
  .tp-modal__card { border: 2px solid var(--ink); border-top-width: 4px; border-top-color: var(--red); }
}

/* ── Desktop: sticky event panel + list, actions inline ──────── */
@media (min-width: 1024px) {
  .tp { display: grid; grid-template-columns: minmax(360px, 5fr) 7fr; gap: 0 clamp(2rem, 5vw, 5rem); align-items: start; }
  .tp-main { padding-top: 1.5rem; }
  .tp-row::before { left: -1.25rem; }
  .tp-row__head { padding: 1.25rem 0; }
  .tp-actions { grid-template-columns: auto 1fr; align-items: center; gap: 1rem; }
  .tp-actions__qty { justify-content: flex-start; }
  .tp-actions__qty .hv-mono { display: none; }
  .tp-actions__btns.is-single { max-width: 360px; justify-self: end; width: 100%; }
  .tp-actions__btns.is-pair { justify-self: end; width: 100%; max-width: 520px; }
  body.tp-bar-open .tp { padding-bottom: 0; }
}