/* ==========================================================================
   SOTA London - ticket pages (presale.html, gensale.html)

   An ADDITIVE, page-local layer loaded AFTER style-v2.css. Deliberately NOT
   appended to style-v2.css: that stylesheet is shared with the live homepage
   and its ?v= token is load-bearing, so bumping it would invalidate the CSS
   cache for every returning homepage visitor purely to add rules that only
   two sub-pages use.

   Nothing here is a bare re-definition of a v2 selector - it is all new
   selectors plus .ticket, which is scoped by being an extra class on .btn.
   The show facts (date / venue) reuse the .onsale table language unchanged,
   so the two pages read as the same object as the signup panel rather than
   as a different template wearing the same colours.
   ========================================================================== */

/* --------------------------------------------------------------------------
   LIVE EYEBROW
   The signup panel's eyebrow opens with a 26px hairline. On a page whose whole
   point is "this is happening right now" that hair is replaced by a pulsing
   square - the same 7px mark the countdown block uses for its live state, so
   the two pages share one vocabulary for "live".
   -------------------------------------------------------------------------- */
.panel__eyebrow-dot {
  width: 7px;
  height: 7px;
  flex: none;
  background: var(--bone);
  animation: livepulse 2.4s ease-in-out infinite;
}
@keyframes livepulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.32; } }

/* The eyebrow is the status line here, not a quiet label - lift it off --mute. */
.panel__eyebrow--live { color: var(--bone); }

/* --------------------------------------------------------------------------
   TICKET BUTTONS
   Two outlets for one show, so they carry EQUAL weight: same fill, same size,
   stacked in the order the client listed them. Giving one a primary fill and
   the other an outline would invent a hierarchy that does not exist and push
   traffic at whichever outlet happened to be styled louder.
   -------------------------------------------------------------------------- */
.tickets {
  display: grid;
  gap: 12px;
  margin: 0 0 16px;
}

/* .ticket rides on .btn .btn--primary: bone fill, zero radius, gear glyph.
   Only the internals change - a two-line label instead of one. */
.ticket {
  padding: 12px 18px;
  gap: 12px;
  text-align: center;
}

.ticket__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
}

/* Dark-on-bone, so it is set against the button fill rather than the page. */
.ticket__vendor {
  font-family: var(--f-micro);
  font-weight: 900;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(11, 12, 22, 0.60);
}
.ticket:hover .ticket__vendor { color: rgba(11, 12, 22, 0.78); }

.ticket .btn__text {
  font-size: 14.5px;
  line-height: 1.2;
}

/* --------------------------------------------------------------------------
   NOTES
   -------------------------------------------------------------------------- */
.tickets__note {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--haze);
}
.tickets__note + .tickets__note { margin-top: 8px; }
.tickets__note strong { color: var(--mute); font-weight: 600; }

/* --------------------------------------------------------------------------
   RESPONSIVE
   Phone landscape gets the same compression the signup panel gets in
   style-v2.css. These rules must live here rather than in that file's
   landscape block because this stylesheet loads after it - a base rule here
   would otherwise outrank the override there.
   -------------------------------------------------------------------------- */
@media (max-height: 520px) and (orientation: landscape) {
  .tickets { gap: 9px; margin-bottom: 12px; }
  .ticket  { padding: 10px 16px; }
  .ticket .btn__text { font-size: 13.5px; }
  .tickets__note { font-size: 11.5px; }
}