/* ==========================================================================
   WFL — Tickets (tickets.html) · brief §5.4 "KIES JE AVOND."
   Page-scoped: everything lives under body.page-tickets.
   The tickets speak the homepage ticket language (home-tickets.css, client pick E7): #121217 card, colour
   photo, mono kicker, display city, perforated stub with day + stencil date + status chip, notches.
   ========================================================================== */


/* ---- 1. Hero: 21:9 screen ----------------------------------------------------- */
.page-tickets .tickets-hero__screen.has-overlay { aspect-ratio: 4 / 5; }
@media (min-width: 600px) { .page-tickets .tickets-hero__screen.has-overlay { aspect-ratio: 16 / 10; } }
@media (min-width: 1024px) {
  /* the first ticket peeks above the fold */
  .page-tickets .tickets-hero__screen.has-overlay { aspect-ratio: auto; height: min(calc(100svh - var(--header-h) - 150px), 760px); min-height: 520px; }
}
.page-tickets .tickets-hero__screen .screen__fx {
  background: linear-gradient(to top, rgba(7, 7, 10, .88) 0%, rgba(7, 7, 10, .5) 30%, rgba(7, 7, 10, 0) 58%), var(--tekstveilig-links), var(--vignet);
}
.page-tickets .tickets-hero__copy { gap: clamp(10px, 1.4vw, 18px); }

/* ---- 2. Tickets ------------------------------------------------------------------ */
.page-tickets .tickets-list { padding-top: clamp(40px, 7vh, 128px); }
.page-tickets .tickets-list__cards { display: grid; gap: clamp(12px, 1.4vw, 20px); }

/* one ticket — phones: photo, head, the stub as a perforated row, then the rest */
.page-tickets .tk {
  --nt: 10px; --pad: 18px;
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "ph" "hd" "sb" "more";
  border-radius: var(--r-card); background: #121217; box-shadow: inset 0 0 0 1px var(--touw); transition: box-shadow .3s;
  scroll-margin-top: calc(var(--header-h) + 24px);
}
@media (min-width: 1024px) { .page-tickets .tk { scroll-margin-top: calc(var(--header-h) + var(--kassa-h) + 24px); } }
.page-tickets .tk:hover { box-shadow: inset 0 0 0 1px rgba(241, 238, 232, .42); }
.page-tickets .tk--main { background: linear-gradient(180deg, #121217 0%, #121217 60%, #1a0d10 100%); }

.page-tickets .tk__ph { grid-area: ph; position: relative; display: block; overflow: hidden; height: clamp(150px, 42vw, 240px); border-radius: var(--r-card) var(--r-card) 0 0; background: #000; }
.page-tickets .tk__ph .media { position: absolute; inset: 0; width: 100%; height: 100%; }
.page-tickets .tk__ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.page-tickets .tk:hover .tk__ph img { transform: scale(1.04); }

.page-tickets .tk__hd { grid-area: hd; display: grid; gap: 8px; justify-items: start; align-content: start; padding: var(--pad) var(--pad) 16px; min-width: 0; }
.page-tickets .tk__kick { color: var(--rook); font-size: 10.5px; }
.page-tickets .tk--main .tk__kick { color: var(--rood-tekst, #FF4D5E); }
.page-tickets .tk__city { margin-top: 2px; font: 900 clamp(2.5rem, 11vw, 3rem) / .9 var(--font-display); text-transform: uppercase; letter-spacing: -.005em; color: var(--bot); overflow-wrap: anywhere; }
.page-tickets .tk__link { color: inherit; text-decoration: none; }
.page-tickets .tk__link:hover { color: var(--wit); }
.page-tickets .tk__venue { color: var(--bot-80); font-size: 14px; line-height: 1.45; text-wrap: pretty; }
.page-tickets .tk__hd .mededeling { margin-top: 6px; justify-self: stretch; }
.page-tickets .tk__extra { color: var(--bot-80); }

/* the stub: day + stencil date + status chip, behind a dashed perforation with two notches */
.page-tickets .tk__sb {
  grid-area: sb; position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px var(--pad); border-top: 1px dashed rgba(241, 238, 232, .22);
}
.page-tickets .tk__when { display: grid; gap: 4px; }
.page-tickets .tk__day { color: var(--rook); font-size: 10px; }
.page-tickets .tk__date { display: block; font-size: 2.375rem; line-height: .9; color: var(--bot); }
.page-tickets .tk__chip .chip { font-size: 10px; }
.page-tickets .tk__nt { position: absolute; z-index: 2; top: calc(var(--nt) * -1 - .5px); width: var(--nt); height: calc(var(--nt) * 2); background: var(--nacht); border: 1px solid var(--touw); }
.page-tickets .tk__nt--a { left: -1px; border-left: 0; border-radius: 0 var(--nt) var(--nt) 0; }
.page-tickets .tk__nt--b { right: -1px; border-right: 0; border-radius: var(--nt) 0 0 var(--nt); }

.page-tickets .tk__more { grid-area: more; display: grid; gap: 14px; align-content: start; padding: 0 var(--pad) 22px; min-width: 0; }
.page-tickets .tk__block { display: grid; gap: 12px; padding-top: 16px; border-top: 1px solid var(--touw); }
/* phones: the first block sits right under the stub's own line */
.page-tickets .tk__more > :first-child { border-top: 0; padding-top: 4px; }
.page-tickets .tk__rest { color: var(--bot-80); }
.page-tickets .tk__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding-top: 6px; }
.page-tickets .tk__notes { color: var(--rook); }
/* every link, button and chip sits above the ticket's hover surface */
.page-tickets .tk__more a, .page-tickets .tk__more button, .page-tickets .tk__hd a { position: relative; z-index: 1; }

/* ---- tablet + desktop: photo | head over the rest | stub (full-height perforation, notches top and bottom) ---- */
@media (min-width: 768px) {
  .page-tickets .tk {
    --nt: 12px; --pad: clamp(22px, 2.6vw, 40px);
    --ph: clamp(176px, 22vw, 320px); --stub: clamp(168px, 15vw, 220px);
    grid-template-columns: var(--ph) minmax(0, 1fr) var(--stub);
    grid-template-rows: auto 1fr;
    grid-template-areas: "ph hd sb" "ph more sb";
    min-height: clamp(220px, 17.2vw, 248px);
  }
  .page-tickets .tk--main { background: linear-gradient(90deg, #121217 0%, #121217 60%, #1a0d10 100%); }
  .page-tickets .tk__ph { height: auto; border-radius: var(--r-card) 0 0 var(--r-card); }
  .page-tickets .tk__hd { gap: 10px; padding: clamp(22px, 2.4vw, 32px) var(--pad) 18px; }
  .page-tickets .tk__kick { font-size: 11px; }
  .page-tickets .tk__city { margin-top: 4px; font-size: clamp(2.5rem, 4.2vw, 3.75rem); }
  .page-tickets .tk__venue { font-size: 15px; }
  .page-tickets .tk__more { padding: 0 var(--pad) clamp(22px, 2.4vw, 32px); gap: 16px; }
  .page-tickets .tk__more > :first-child { border-top: 1px solid var(--touw); padding-top: 16px; }
  .page-tickets .tk__more > .tk__actions:first-child { border-top: 0; padding-top: 6px; }
  .page-tickets .tk__sb {
    flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 16px;
    padding: clamp(22px, 2.4vw, 32px) clamp(16px, 1.8vw, 26px); border-top: 0; border-left: 1px dashed rgba(241, 238, 232, .22);
  }
  .page-tickets .tk__when { gap: 10px; }
  .page-tickets .tk__day { font-size: 11px; }
  .page-tickets .tk__date { font-size: clamp(2.5rem, 4vw, 3.75rem); }
  .page-tickets .tk__nt { top: auto; left: calc(var(--nt) * -1 - .5px); right: auto; width: calc(var(--nt) * 2); height: var(--nt); border: 1px solid var(--touw); }
  .page-tickets .tk__nt--a { top: -1px; border-top: 0; border-radius: 0 0 var(--nt) var(--nt); }
  .page-tickets .tk__nt--b { bottom: -1px; border-bottom: 0; border-radius: var(--nt) var(--nt) 0 0; }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  .page-tickets .tk__chip .chip { font-size: 9.5px; letter-spacing: .08em; }
}

/* billed bouts: mini NAAMSLOT pairs with 48px circular crops where photos exist */
.page-tickets .tbouts { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.page-tickets .tbout { display: grid; gap: 8px; }
.page-tickets .tbout__bill { color: var(--rook); text-wrap: balance; }
.page-tickets .tbout__badge { color: var(--bot); }
.page-tickets .tbout__pair { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.page-tickets .tbout__pair > .vs { font-size: 1.25rem; color: var(--bot-80); }
.page-tickets .tbout__side { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.page-tickets .tbout__side .naamslot { --ns: 1.625rem; }
.page-tickets .tbout__side .naamslot--end { align-items: flex-start; text-align: left; }
.page-tickets .tbout__side.is-tba .mono { color: var(--rook); padding: 8px 10px; border-radius: var(--r-chip); background: var(--doek); }
.page-tickets .face { position: relative; flex: none; width: 48px; height: 48px; border-radius: 50%; overflow: hidden; background: var(--doek); }
.page-tickets .face::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(241, 238, 232, .25); }
.page-tickets .tbout__side--red .face::after { box-shadow: inset 0 0 0 2px var(--rood); }
.page-tickets .tbout__side--blue .face::after { box-shadow: inset 0 0 0 2px var(--blauw); }
/* head crop: per fighter via photo.face, see .face in components.css */
@media (min-width: 768px) {
  .page-tickets .tbout__side--red .naamslot--end { align-items: flex-end; text-align: right; }
}

/* tickets: tiers + vendor + phases */
.page-tickets .tk__vendor { color: var(--bot); }
.page-tickets .tk__vendor .volgt { color: var(--rook); }
.page-tickets .ttiers { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) {
  .page-tickets .ttiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-tickets .ttiers--odd .ttier:last-child { grid-column: 1 / -1; }
}
@media (min-width: 1200px) {
  .page-tickets .ttiers { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .page-tickets .ttiers--odd .ttier:last-child { grid-column: auto; }
}
.page-tickets .ttier { display: grid; gap: 8px; align-content: start; padding: 14px 16px 16px; border-radius: var(--r-panel); background: var(--doek); box-shadow: inset 0 0 0 1px var(--touw); }
.page-tickets .ttier__name { font: 900 1.375rem / .95 var(--font-display); text-transform: uppercase; color: var(--bot); }
.page-tickets .ttier__price { font-size: 15px; }
.page-tickets .ttier__price .stencil { font-size: 2rem; line-height: .9; }
/* named tiers without prices: one typographic line, "Prijzen volgen" once */
.page-tickets .ttiers-names { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
.page-tickets .ttiers-names__list { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.page-tickets .ttiers-names__item { font: 900 1.375rem / .95 var(--font-display); text-transform: uppercase; color: var(--bot); }
.page-tickets .ttiers-names__sep { color: var(--rook); font-weight: 300; }
.page-tickets .ttiers-names .volgt { font-size: 15px; }
.page-tickets .tphases { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; color: var(--bot-80); }
.page-tickets .tphases li:not(:last-child)::after { content: "→"; margin-left: 10px; color: var(--rook); }

/* the single quiet line for every unknown on a ticket: every item carries its dot in front; the inner row is
   shifted left by one dot slot and the line clips it, so a wrapped line never starts with a stray separator */
.page-tickets .tk__status { color: var(--rook); overflow: clip; }
.page-tickets .tk__block + .tk__status { padding-top: 14px; border-top: 1px solid var(--touw); }
.page-tickets .tk__status-in { display: flex; flex-wrap: wrap; align-items: center; row-gap: 6px; margin-left: -24px; }
.page-tickets .tk__status-i { display: inline-flex; align-items: center; white-space: nowrap; }
.page-tickets .tk__status-i::before { content: ""; flex: none; width: 4px; height: 4px; margin: 0 10px; border-radius: 50%; background: var(--rook); opacity: .6; }

/* ---- 3. Steun je fighter / MVF ------------------------------------------- */
.page-tickets .mvf__grid { display: grid; gap: clamp(32px, 5vw, 80px); align-items: center; }
.page-tickets .mvf__media { width: 100%; max-width: 520px; margin: 0; }
.page-tickets .mvf__media .media, .page-tickets .mvf__media img { width: 100%; height: 100%; object-fit: cover; }
.page-tickets .mvf__copy .section__head { margin-bottom: var(--s-5); }
.page-tickets .mvf__body { color: var(--bot-80); max-width: 52ch; font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); }
.page-tickets .mvf__codes { list-style: none; margin: var(--s-6) 0 0; padding: 0; border-top: 1px solid var(--touw); max-width: 640px; }
.page-tickets .mvf__code { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px 16px; padding: 18px 0; border-bottom: 1px solid var(--touw); }
.page-tickets .mvf__code > :last-child { justify-self: end; }
.page-tickets .mvf__who { min-width: 0; display: inline-flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.page-tickets .mvf__who .naamslot { --ns: 1.875rem; }
@media (max-width: 639.98px) { .page-tickets .mvf__who { display: grid; gap: 6px; justify-items: start; } }
@media (min-width: 1024px) {
  .page-tickets .mvf__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

/* ---- 4. VIP & groepen ---------------------------------------------------- */
.page-tickets .vip__screen .screen__fx { background: linear-gradient(to top, rgba(7, 7, 10, .9) 0%, rgba(7, 7, 10, .55) 34%, rgba(7, 7, 10, .1) 62%), var(--tekstveilig-links), var(--vignet); }
.page-tickets .vip__copy { max-width: 640px; }

/* ---- 5. Vragen (+ the neighbouring questions as links) ------------------- */
.page-tickets .faq-sec__grid { display: grid; gap: var(--s-6); }
.page-tickets .faq-sec__head { display: grid; gap: var(--s-4); align-content: start; }
.page-tickets .faq-sec__head .section__head { margin-bottom: 0; }
.page-tickets .faq-sec__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; justify-items: start; }
@media (min-width: 1024px) {
  .page-tickets .faq-sec__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--s-9); }
  .page-tickets .faq-sec__head { position: sticky; top: calc(var(--header-h) + var(--kassa-h) + 32px); align-self: start; }
}

/* ==========================================================================
   Phones: client pick ronde 8 · 3A (2026-10-17) — a compact hero, bouts as equal rows with a fixed face slot on
   both corners (initial when there is no photo), last names first, the red order button full width and
   "Event & fight card" as a quiet text link
   ========================================================================== */
.page-tickets .face--empty { display: grid; place-items: center; font: 800 20px / 1 var(--font-display); color: var(--rook); }
@media (max-width: 767.98px) {
  .page-tickets .tickets-hero__screen.has-overlay { aspect-ratio: auto; min-height: calc(var(--header-h) + 132px); }
  .page-tickets .tickets-hero__screen .screen__overlay { padding-top: calc(var(--header-h) + 16px); padding-bottom: 14px; }
  .page-tickets .tickets-hero__title { font-size: 44px; }
  .page-tickets .tbout { gap: 6px; }
  .page-tickets .tbout__bill { font-size: 10px; letter-spacing: .1em; color: #C8C5CD; }
  .page-tickets .tbout__pair { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; min-height: 48px; }
  .page-tickets .tbout__side { gap: 8px; }
  .page-tickets .tbout__side--blue { justify-content: flex-end; text-align: right; }
  .page-tickets .tbout__side .face { width: 40px; height: 40px; }
  .page-tickets .tbout__side .naamslot__first { display: none; }
  .page-tickets .tbout__side .naamslot { --ns: clamp(1.1rem, 5.6vw, 1.5rem); }
  .page-tickets .tbout__side .naamslot__last { line-height: .92; overflow-wrap: normal; word-break: keep-all; }
  /* price tiles two by two, so the order button stays close */
  .page-tickets .ttiers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .page-tickets .ttier { padding: 10px 12px; }
  .page-tickets .ttier__name { font-size: 15px; }
  .page-tickets .ttier__price .stencil { font-size: 1.5rem; }
  .page-tickets .ttier__price .small { display: block; font-size: 11px; }
  .page-tickets .tbout__side--blue .naamslot { align-items: flex-end; text-align: right; }
  .page-tickets .tbout__pair > .vs { font-size: 1rem; }
  .page-tickets .tk__actions { display: grid; gap: 12px; }
  .page-tickets .tk__actions > .btn--primary { width: 100%; justify-content: center; --btn-h: 54px; }
  .page-tickets .tk__actions > .btn--text { justify-self: start; color: #C8C5CD; font-weight: 500; }
}

/* Tablet + desktop: the same 3A treatment (client 2026-10-17 "same feedback as mobile") — a compact hero, bouts as
   equal rows with a fixed face slot on both corners (initial without a photo), last names only, the price note
   under the price, a bigger red order button and "Event & fight card" as a quiet text link */
@media (min-width: 768px) {
  .page-tickets .tickets-hero__screen.has-overlay { aspect-ratio: auto; height: auto; min-height: calc(var(--header-h) + 220px); }
  .page-tickets .tickets-hero__screen .screen__overlay { padding-top: calc(var(--header-h) + 32px); padding-bottom: 28px; }
  .page-tickets .tickets-list { padding-top: clamp(32px, 4vh, 56px); }
  .page-tickets .tbout__pair { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; max-width: 400px; min-height: 52px; }
  .page-tickets .tbout__side--blue { justify-content: flex-end; text-align: right; }
  .page-tickets .tbout__side--blue .naamslot { align-items: flex-end; text-align: right; }
  .page-tickets .tbout__side .naamslot__first { display: none; }
  .page-tickets .tbout__side .naamslot__last { line-height: .92; overflow-wrap: normal; word-break: keep-all; }
  .page-tickets .ttier__price .small { display: block; margin-top: 2px; }
  .page-tickets .tk__actions > .btn--primary { --btn-h: 54px; padding-inline: 28px; font-size: 16px; }
  .page-tickets .tk__actions > .btn--text { color: #C8C5CD; font-weight: 500; }
}