/* ==========================================================================
   ticket.css — the printed memento itself.
   All sizes are in mm or em so the preview and the print output are identical.
   The root .ticket font-size drives every other measurement.
   ========================================================================== */

.ticket {
  --t-w: 190mm;
  --t-h: 74mm;
  /* NB: the spine renders ~28mm, not 25mm. The crest (9em) plus its padding
     gives the column a min-content width larger than this basis, and a flex
     item won't shrink below that. The look is intentional as-is — just don't
     trust --spine-w as a measurement. Shrink .ticket__crest to reclaim it. */
  --spine-w: 25mm;
  --stub-w: 41mm;

  --green: #14472e;
  --gold: #b8912f;
  --gold-light: #d6b45c;
  --red: #b5252c;
  --cream: #f6f3ea;
  --ink: #1d2a22;

  --home: var(--green);
  --away: var(--red);

  position: relative;
  display: flex;
  box-sizing: border-box;
  width: var(--t-w);
  height: var(--t-h);
  overflow: hidden;
  font-size: 2.55mm; /* master scale — everything below is em */
  font-family: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  color: var(--ink);
  background: var(--cream);
  border-radius: 1.2mm;
}

.ticket * { box-sizing: border-box; }

/* The artwork is deliberately built from plain divs: a heading tag inside the
   ticket would pick up the host page's typography and blow the layout apart.
   Keep it that way, and neutralise any stray margins from a host stylesheet. */
.ticket :is(h1, h2, h3, h4, p, ol, ul, figure) { margin: 0; padding: 0; }

/* --- guilloche / security-paper texture (pure CSS, no assets) ------------- */
.ticket__paper {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(45deg, rgba(20, 71, 46, 0.055) 0 0.18mm, transparent 0.18mm 1.1mm),
    repeating-linear-gradient(-45deg, rgba(20, 71, 46, 0.055) 0 0.18mm, transparent 0.18mm 1.1mm),
    repeating-radial-gradient(circle at 62% 50%, rgba(20, 71, 46, 0.05) 0 0.2mm, transparent 0.2mm 2.4mm),
    var(--cream);
  pointer-events: none;
}

/* ==========================  LEFT SPINE  ================================= */
.ticket__spine {
  position: relative;
  z-index: 2;
  flex: 0 0 var(--spine-w);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 2.2em 1em 2em;
  color: var(--spine-ink, var(--gold-light));
  background: var(--home);
}

/* the sweeping gold/colour curve where the spine meets the body */
.ticket__spine::after {
  content: "";
  position: absolute;
  top: -6%;
  right: -3.4mm;
  width: 7mm;
  height: 112%;
  background: linear-gradient(100deg, var(--home) 0 42%, var(--gold) 42% 62%, var(--gold-light) 62% 78%, transparent 78%);
  border-radius: 0 60% 60% 0 / 0 50% 50% 0;
}

.ticket__crest { display: block; width: 9em; height: 9em; }
.ticket__spine-mark {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 700;
  font-size: 1.5em;
  letter-spacing: 0.08em;
  line-height: 1;
  text-align: center;
}
.ticket__spine-sub {
  margin-top: 0.5em;
  font-size: 0.72em;
  letter-spacing: 0.16em;
  text-align: center;
  opacity: 0.85;
}
/* Iridescent foil seal, echoing the security sticker on a real ticket.
   Toned to gold / green / silver so it sits with the ticket's palette rather
   than fighting it, with the football pictogram struck into the centre. */
.ticket__foil {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 7.5em;
  height: 7.5em;
  border-radius: 50%;
  color: var(--green);
  background:
    conic-gradient(from 200deg,
      #e7dcbc, #cddfd2, #f1e8d4, #d7e2e6, #e9dfc2, #c9dccd, #e7dcbc),
    #e4e0d2;
  box-shadow:
    inset 0 0 0 0.14em rgba(255, 255, 255, .6),
    inset 0 0 0.5em rgba(20, 71, 46, .18);
}

/* The traced figure fills ~88% of its own viewBox height, so 72% here lands the
   pictogram at roughly two-thirds of the seal's diameter. */
.ticket__foil-mark {
  width: 72%;
  height: 72%;
  opacity: .85;
}

.ticket__price {
  font-size: 1.15em;
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.25;
  text-align: center;
  color: #ffffff; /* fixed white, not the spine ink */
}

/* ==========================  MAIN BODY  ================================== */
.ticket__main {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: 1.9em 2.4em 1.2em 3.6em;
  text-align: center;
}

/* Mirrored colour sweep meeting the perforation, echoing the spine. */
.ticket__main::after {
  content: "";
  position: absolute;
  right: -1mm;
  bottom: -12%;
  width: 8mm;
  height: 88%;
  background: linear-gradient(78deg, transparent 0 22%, var(--away) 22% 52%, var(--home) 52% 100%);
  border-radius: 60% 0 0 60% / 50% 0 0 50%;
}

.ticket__year {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9em;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.8em;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.06em;
  line-height: 1;
}
.ticket__year::before,
.ticket__year::after {
  content: "";
  width: 2.2em;
  height: 0.06em;
  background: var(--gold);
}

.ticket__competition {
  margin-top: 0.3em;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.7em;
  font-weight: 700;
  line-height: 1.06;
  color: var(--green);
  letter-spacing: 0.005em;
  text-transform: uppercase;
  text-wrap: balance; /* stops "FINAL" falling to a line on its own */
}

.ticket__flourish {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7em;
  margin: 0.35em 0 0.15em;
  color: var(--gold);
}
.ticket__flourish::before,
.ticket__flourish::after {
  content: "";
  flex: 1;
  height: 0.055em;
  background: var(--gold);
}
.ticket__flourish svg { width: 3.6em; height: 1.5em; }

.ticket__teams {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.42em;
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 700;
  font-size: 3.5em;
  line-height: 1.02;
  letter-spacing: 0.005em;
  white-space: nowrap;
}
.ticket__team--home { color: var(--home); }
.ticket__team--away { color: var(--away); }
.ticket__vs {
  font-size: 0.56em;
  color: var(--gold);
  letter-spacing: 0.04em;
}

.ticket__venue {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9em;
  margin-top: 0.1em;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.5em;
  font-weight: 700;
  color: var(--green);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ticket__venue::before,
.ticket__venue::after {
  content: "";
  width: 2.4em;
  height: 0.05em;
  background: var(--gold);
}

/* --- the data grid ------------------------------------------------------- */
.ticket__grid {
  display: flex;
  margin-top: auto;
  border-top: 0.09em solid var(--gold);
  border-bottom: 0.09em solid var(--gold);
}
.ticket__grid--secondary { border-top: none; }

.ticket__cell {
  flex: 1 1 0;
  padding: 0.32em 0.4em 0.36em;
  border-left: 0.06em solid var(--gold);
}
.ticket__cell:first-child { border-left: none; }
.ticket__cell--wide { flex: 1.5 1 0; }

.ticket__label {
  font-size: 1.02em;
  letter-spacing: 0.09em;
  color: var(--ink);
  line-height: 1.1;
}
/* One size for every printed value, long or short. Long strings wrap inside
   their cell rather than being shrunk to fit. */
.ticket__value {
  margin-top: 0.06em;
  font-size: 1.3em;
  font-weight: 500;
  letter-spacing: 0.03em;
  line-height: 1.1;
}

/* --- footer -------------------------------------------------------------- */
.ticket__foot {
  display: flex;
  align-items: flex-start;
  gap: 1.6em;
  margin-top: 0.4em;
  text-align: left;
}
.ticket__serial {
  font-family: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  font-size: 1.85em;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--red);
  line-height: 1;
}
.ticket__terms {
  font-size: 0.92em;
  letter-spacing: 0.05em;
  line-height: 1.25;
  color: var(--ink);
  opacity: 0.9;
}
/* ==========================  RIGHT STUB  ================================= */
.ticket__perf {
  position: relative;
  z-index: 3;
  flex: 0 0 0;
  border-left: 0.35mm dashed rgba(29, 42, 34, 0.55);
}

.ticket__stub {
  position: relative;
  z-index: 2;
  flex: 0 0 var(--stub-w);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.6em 1.3em 1.2em;
  text-align: center;
  overflow: hidden;
}

.ticket__stub-year {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.9em;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.05em;
  line-height: 1;
}
.ticket__stub-comp {
  margin-top: 0.3em;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1em;
  font-weight: 700;
  line-height: 1.15;
  color: var(--green);
  text-transform: uppercase;
}
.ticket__stub-teams {
  margin-top: 0.35em;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.45em;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
}
.ticket__stub-teams .ticket__vs { font-size: 0.66em; }
.ticket__stub-venue {
  margin-top: 0.45em;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.05em;
  font-weight: 700;
  line-height: 1.2;
  color: var(--green);
  text-transform: uppercase;
}
.ticket__stub-rule {
  width: 100%;
  height: 0.06em;
  margin: 0.7em 0 0.6em;
  background: var(--gold);
}
/* No font-size here: it would scale the nested label/value and put the stub's
   section out of step with its Row and Seat. */
.ticket__stub-section {
  letter-spacing: 0.08em;
  line-height: 1.25;
  text-align: left;
  align-self: stretch;
}
.ticket__stub-seat {
  display: flex;
  gap: 1.8em;
  margin-top: 0.5em;
  align-self: flex-start;
  text-align: left;
}

.ticket__codes {
  display: flex;
  align-items: flex-end;
  gap: 0.6em;
  margin-top: auto;
  width: 100%;
}
.ticket__qr { width: 6em; height: 6em; flex: 0 0 auto; }
.ticket__barcode-wrap {
  display: flex;
  align-items: flex-end;
  gap: 0.25em;
  margin-left: auto;
}
.ticket__barcode { height: 7em; width: 5em; }
.ticket__barcode-num {
  font-size: 0.7em;
  letter-spacing: 0.12em;
  writing-mode: vertical-rl;
  line-height: 1;
}
.ticket__stub-serial {
  align-self: flex-start;
  margin-top: 0.5em;
  font-size: 1.35em;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--red);
  line-height: 1;
}

/* ==========================  PREVIEW SCALING  ============================ */
/* The stage holds a full-size .ticket and scales it down to fit on screen.
   Print bypasses this entirely so output is always true size. */
/* ==========================  PRINT BLEED  ================================
   Commercial trimming drifts by about +/-1mm. Without bleed, any drift leaves
   a white sliver where the green spine should run off the edge.

   .ticket--bleed prints the card 3mm oversize on every side. The trim guide
   moves 3mm INSIDE the sheet, so the cut lands within the printed area and the
   colour runs off cleanly. Crucially the *trimmed* result must be identical to
   the unbleed card: the spine still finishes 25mm from the cut edge, so its
   column grows by exactly the bleed and its inner padding grows to match.
   ======================================================================== */
.ticket--bleed {
  --bleed: 3mm;
  width: calc(var(--t-w) + var(--bleed) * 2);
  height: calc(var(--t-h) + var(--bleed) * 2);
  border-radius: 0;              /* a guillotine can't cut rounded corners */
}

/* Each column absorbs the bleed on the side that reaches a trimmed edge, and
   pads its content back in by the same amount so nothing moves after cutting. */
.ticket--bleed .ticket__spine {
  flex-basis: calc(var(--spine-w) + var(--bleed));
  padding: calc(2.2em + var(--bleed)) 1em calc(2em + var(--bleed)) calc(1em + var(--bleed));
}
.ticket--bleed .ticket__stub {
  flex-basis: calc(var(--stub-w) + var(--bleed));
  padding: calc(1.6em + var(--bleed)) calc(1.3em + var(--bleed)) calc(1.2em + var(--bleed)) 1.3em;
}
.ticket--bleed .ticket__main {
  padding-top: calc(1.9em + var(--bleed));
  padding-bottom: calc(1.2em + var(--bleed));
}

.ticket-stage {
  position: relative;
  width: 100%;
  overflow: hidden;
}
/* Absolute so the full-size ticket can never widen its own container — if it
   did, the stage would measure the inflated width and settle at scale 1. */
.ticket-stage .ticket {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: top left;
  box-shadow: 0 2mm 6mm rgba(0, 0, 0, 0.22);
}