/* ============================================================
   MHITR HALLOWEEN — ticket pages (presale.html / gensale.html)
   Loaded AFTER style.css + lineup.css. Deliberately a separate
   file so lineup.html stays byte-stable ahead of its cutover.

   These pages are the same artwork and palette as lineup.html
   (body keeps class="page-lineup"), minus the signup form: the
   panel is just message + ticket button.
   ============================================================ */

/* ---------- ticket button ----------
   The engine's .btn-ticket styles target <button>; as an <a> it also
   needs text-decoration/text-align. "Click Here For Tickets" is 22
   uppercase Anton chars with letter-spacing and WILL wrap to two
   lines on a 320px phone, so shrink the type before it can wrap
   rather than letting it break (gotcha 26). */
.btn-ticket--link {
  text-decoration: none;
  text-align: center;
  color: #fff;
}
.btn-ticket--link .btn__face {
  white-space: nowrap;
  font-size: clamp(.78rem, 3.6vw, 1.2rem);
  letter-spacing: clamp(.03em, .4vw, .06em);
}
.btn-ticket--link:hover { color: #fff; }

/* placeholder state — while href is still REPLACE_ME_TICKET_URL the
   button is visibly "armed but not wired", so a parked page can never
   be mistaken for a live one during review */
.btn-ticket--link[href^="REPLACE_ME"] {
  filter: grayscale(.55) brightness(.82);
  cursor: not-allowed;
}
.btn-ticket--link[href^="REPLACE_ME"]::after {
  content: "Ticket link not set yet";
  display: block;
  padding: 0 0 11px;
  font-family: var(--body);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #ffd7c9;
}

/* ---------- supporting note under the button ---------- */
.ticket-note {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--haze);
  text-align: center;
}
.ticket-note strong { color: var(--cream); font-weight: 600; }

/* ---------- the ticket panel runs shorter than the signup panel,
   so give it a little more breathing room ---------- */
body.page-lineup .panel__idle .panel__lede:last-of-type { margin-bottom: 24px; }

@media (min-width: 768px) and (min-aspect-ratio: 7/10) {
  body.page-lineup .panel__inner { padding: clamp(30px, 3.4vw, 44px); }
}