/* ============================================================
   mt-tickets.css - the ticket call to action on the public
   makingtracks.uk pages: the amber button in the home hero, the
   "Get your tickets" panel beside the event card, and the
   furniture of the /tickets/ page.
   Loaded AFTER mt.css by: index.html, /events/, /tickets/.

   COLOUR RULE (same one as .ev-cta in mt.css): never the GO green.
   On these pages green means CREW booking, and tickets must not
   read as the same offer. Departure-board amber (--cis) on the
   dark surfaces, the brand red .ev-cta on the light ones.

   A ticket is the one memorable thing here: the panel is a dark
   departure-board ticket with a dashed tear-off line and two
   punched notches, so it sits with the hero board above it.
   Everything else stays plain.
   ============================================================ */

/* ---------------- hero button (home) ---------------- */
/* its own full-width row: the big message first, the two usual buttons under it */
.btn.tix{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  flex:1 1 100%; padding:15px 24px; font-size:17px;
  background:var(--cis); color:#1c1814;
  box-shadow:0 10px 24px -10px rgba(255,164,28,.6);
}
.btn.tix:hover{ background:#ffb64a; color:#1c1814; }
.tix-ico{ width:19px; height:19px; flex:none; }

/* ---------------- ticket panel (home, beside the event card) ---------------- */
.tix-panel{
  position:relative; display:flex; flex-direction:column; justify-content:space-between;
  background:var(--board); color:#e8edf2; border-radius:12px; overflow:hidden;
  box-shadow:0 12px 30px -22px rgba(28,24,20,.55);
}
.tix-main{ padding:22px 24px 20px; }
.tix-kicker{
  margin:0 0 8px; font-family:'Big Shoulders'; font-weight:600; font-size:14px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--cis);
}
.tix-title{
  margin:0 0 16px; font-family:'Big Shoulders'; font-weight:800; text-transform:uppercase;
  font-size:clamp(34px,4.6vw,50px); line-height:.95; color:#fff;
}
.tix-title span{ display:block; }
.tix-when{
  display:inline-block; margin:0 0 12px; padding:8px 14px;
  font-family:'Doto'; font-weight:900; font-size:clamp(16px,2.3vw,21px); letter-spacing:.03em;
  color:var(--cis); background:#0a0d10; border:1px solid var(--board-line); border-radius:8px;
}
.tix-addr{ margin:0; color:var(--board-dim); font-size:13px; line-height:1.5; }
.tix-stub{
  position:relative; display:flex; flex-direction:column; gap:10px;
  padding:20px 24px 22px; border-top:2px dashed #39424d;
}
/* the punched notches where the stub tears off: paper-coloured circles
   centred on the card edge at the dashed line (the card clips the outer half) */
.tix-stub::before, .tix-stub::after{
  content:""; position:absolute; top:-11px; width:20px; height:20px;
  border-radius:50%; background:var(--paper);
}
.tix-stub::before{ left:-11px; }
.tix-stub::after{ right:-11px; }
.tix-btn{
  display:flex; align-items:center; justify-content:center; gap:10px;
  background:var(--cis); color:#1c1814; text-decoration:none; text-align:center;
  font-weight:800; font-size:19px; line-height:1.2; padding:15px 22px; border-radius:10px;
  box-shadow:0 12px 26px -12px rgba(255,164,28,.7);
}
.tix-btn:hover, .tix-btn:focus-visible{ background:#ffb64a; color:#1c1814; }
.tix-btn .tix-ico{ width:22px; height:22px; }
.tix-fine{ margin:0; text-align:center; font-size:12.5px; color:var(--board-dim); }
/* one column: the ticket is the big message, so it leads the section */
@media(max-width:840px){ .ev-grid .tix-panel{ order:-1; } }

/* ---------------- /tickets/ page ---------------- */
.tix-dates{ display:block; color:#fff; font-weight:700; }
.tix-dates:empty{ display:none; }
.tix-lead{ margin:0 0 16px; color:var(--muted); font-size:14.5px; max-width:70ch; }
.tix-shop{
  position:relative; min-height:360px; margin:0 0 14px;
  background:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden;
  box-shadow:0 12px 30px -22px rgba(28,24,20,.4);
}
.tix-shop beyonk-shop{ display:block; }
.tix-loading, .tix-closed{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  padding:56px 20px; text-align:center; color:var(--muted); font-size:14.5px;
}
.tix-loading{ position:absolute; inset:0; background:#fff; z-index:1; }
.tix-shop.is-ready .tix-loading{ display:none; }
.tix-closed b{ color:var(--ink); font-size:17px; }
.tix-alt{ margin:0; text-align:center; font-size:13.5px; color:var(--muted); }