/* ==========================================================================
   Galabal Kiwanis Gent Centrum — plat ontwerp
   Ground Control-meetsysteem: 12 flush kolommen, φ-spacing, kop-interlinie k·em + C.
   Huid: nachtblauw (Kiwanis-blauw, verdiept) · goud (Kiwanis-goud) · champagne.
   ========================================================================== */

:root {
  /* blauwe reeks — layout */
  --col: clamp(31.25px, calc(100vw / 12), 133.333px);
  --col-half: calc(var(--col) / 1.618);
  --col-phi: calc(var(--col) * 1.618);
  --col-2: calc(var(--col) * 2);

  /* kleur — afgeleid van het Kiwanis brand-book (blauw + goud) */
  --night: #0C1B3A;        /* Kiwanis-blauw, verdiept tot avondblauw */
  --night-2: #12264B;      /* een tint lichter: panelen op de nacht */
  --blue: #003874;         /* Kiwanis-blauw zoals op de Belux-sites */
  --gold: #C4A46B;         /* Kiwanis-goud, op donker */
  --gold-ink: #86672F;     /* goud als tekst op licht (contrast) */
  --ivory: #F3ECDF;        /* champagne — het papier van de uitnodiging */
  --ivory-2: #EAE0CC;
  --ink: #0C1B3A;
  --ink-muted: #4B5468;
  --ink-faint: #8A8E98;
  --on-night: #F3ECDF;
  --on-night-muted: rgba(243, 236, 223, .68);
  --on-night-faint: rgba(243, 236, 223, .42);
  --line: rgba(12, 27, 58, .14);
  --line-2: rgba(12, 27, 58, .26);
  --line-gold: rgba(196, 164, 107, .38);

  --font-head: "Gala Euro", "Libre Bodoni", "Bodoni 72", Georgia, serif;
  --font-ui: "Jost", "Futura", "Century Gothic", system-ui, sans-serif;

  --t: .28s;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Het €-teken van de Bodoni leest als een C: dat ene teken komt uit een schreefloze letter. */
@font-face { font-family: "Gala Euro"; src: local("Jost"), local("Futura-Medium"), local("Futura"), local("Avenir Next"), local("Helvetica Neue"); unicode-range: U+20AC; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--night);
  color: var(--on-night);
  font: 400 16px/1.618 var(--font-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, ol, ul, figure, blockquote { margin: 0; }
ol, ul { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }

/* ---------- grid ---------- */
.row { display: grid; grid-template-columns: repeat(12, 1fr); max-width: 1600px; margin: 0 auto; }
@media (max-width: 1023px) { .row { column-gap: 21px; } }
@media (max-width: 767px) {
  .row { grid-template-columns: minmax(0, 1fr); column-gap: 0; padding: 0 21px; }
  .row > * { grid-column: 1 / -1 !important; }
}

/* ---------- typografie ---------- */
.d1, .h1, .h2, .h3, .h4 { font-family: var(--font-head); font-weight: 400; line-height: calc(.95em + 4px); letter-spacing: -0.02em; font-optical-sizing: auto; }
.d1 { font-size: clamp(55px, 9vw, 144px); }
.h1 { font-size: clamp(55px, 5.6vw, 89px); }
.h2 { font-size: 55px; }
.h3 { font-size: 34px; letter-spacing: -0.01em; }
.h4 { font-size: 21px; letter-spacing: 0; }
.d1 i, .h1 i, .h2 i, .h3 i { font-style: italic; }
.lead { font-size: 21px; line-height: 1.618; }
.small { font-size: 13px; }
.label { font: 500 11px/2 var(--font-ui); text-transform: uppercase; letter-spacing: .18em; }
.label--13 { font-size: 13px; letter-spacing: .1em; }
.muted { color: var(--on-night-muted); }
.faint { color: var(--on-night-faint); }
.gold { color: var(--gold); }
@media (max-width: 767px) {
  .h2 { font-size: 34px; }
  .h3 { font-size: 21px; }
  .lead { font-size: 16px; }
}

.eur { font-family: var(--font-ui); font-weight: 400; font-style: normal; font-size: .38em; letter-spacing: 0; vertical-align: .9em; margin-right: .12em; }

/* lichte secties */
.licht { background: var(--ivory); color: var(--ink); }
.licht--2 { background: var(--ivory-2); color: var(--ink); }
.licht .muted, .licht--2 .muted { color: var(--ink-muted); }
.licht .faint, .licht--2 .faint { color: var(--ink-faint); }
.licht .gold, .licht--2 .gold { color: var(--gold-ink); }
.blauw { background: var(--blue); color: var(--on-night); }

/* ---------- knoppen & links ---------- */
.knop {
  display: inline-flex; align-items: center; gap: 13px;
  padding: 13px 34px; border: 1px solid var(--gold); border-radius: 999px;
  font: 500 13px/2 var(--font-ui); text-transform: uppercase; letter-spacing: .18em;
  background: var(--gold); color: var(--night); cursor: pointer;
  transition: background var(--t) var(--ease), color var(--t) var(--ease);
}
.knop:hover { background: transparent; color: var(--gold); }
.licht .knop:hover { color: var(--gold-ink); border-color: var(--gold-ink); }
.knop--lijn { background: transparent; color: var(--gold); }
.knop--lijn:hover { background: var(--gold); color: var(--night); }
.lijnlink { border-bottom: 1px solid var(--gold); padding-bottom: 2px; transition: color var(--t) var(--ease); }
.lijnlink:hover { color: var(--gold); }

/* ---------- kopbalk: een programmaregel, geen menubalk ---------- */
.kop { position: absolute; inset: 0 0 auto; z-index: 5; }
.kop .row { height: 89px; align-items: center; }
.kop-logo { grid-column: 2 / 5; }
.kop-logo img { height: 55px; width: auto; }
.kop-mid { grid-column: 5 / 9; text-align: center; color: var(--on-night-faint); }
.kop-rechts { grid-column: 9 / 12; justify-self: end; display: flex; align-items: baseline; gap: 21px; }
.kop-rechts .faint { white-space: nowrap; }
.kop::after { content: ""; position: absolute; left: var(--col); right: var(--col); bottom: 0; height: 1px; background: var(--line-gold); }
@media (max-width: 1023px) { .kop-mid { display: none; } .kop-rechts { grid-column: 7 / 12; } }
@media (max-width: 767px) {
  .kop .row { grid-template-columns: 1fr auto; height: 89px; }
  .kop .row > * { grid-column: auto !important; }
  .kop .row { column-gap: 21px; }
  .kop-logo img { height: auto; width: 152px; max-width: 100%; }
  .kop-rechts .faint { display: none; }
  .kop::after { left: 21px; right: 21px; }
}

/* ---------- de uitnodigingskaart (gedeeld: site, verkoopkaart, socials) ---------- */
.kaart {
  container-type: inline-size;
  position: relative; aspect-ratio: 5 / 7;
  background: var(--ivory); color: var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: 0;
}
.kaart > * { max-width: 72cqw; }
.kaart::before, .kaart::after { content: ""; position: absolute; pointer-events: none; border: 1px solid var(--gold); }
.kaart::before { inset: 4.5cqw; }
.kaart::after { inset: 6cqw; border-color: var(--line-gold); }
.kaart-embleem { width: 14cqw; margin-bottom: 7cqw; }
.kaart-kicker { font: 500 3cqw/1.6 var(--font-ui); letter-spacing: .3em; text-transform: uppercase; color: var(--gold-ink); }
.kaart-naam { font: italic 400 11cqw/1 var(--font-head); margin: 5cqw 0 3cqw; min-height: 11cqw; overflow-wrap: anywhere; transition: opacity .4s var(--ease); }
.kaart-tekst { font: 400 4.2cqw/1.5 var(--font-head); color: var(--ink-muted); }
.kaart-titel { font: 400 13cqw/1 var(--font-head); letter-spacing: -0.02em; margin: 3cqw 0 6cqw; }
.kaart-regel { width: 21cqw; height: 1px; background: var(--gold); margin: 0 auto 5cqw; }
.kaart-meta { font: 500 3cqw/1.8 var(--font-ui); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-muted); }
.kaart-nr { position: absolute; right: 9cqw; top: 8.5cqw; font: 500 2.6cqw/1 var(--font-ui); letter-spacing: .2em; color: var(--gold-ink); }

/* ---------- reveal ---------- */
.reveal { opacity: 0; transform: translateY(21px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal--1 { transition-delay: .1s; } .reveal--2 { transition-delay: .2s; } .reveal--3 { transition-delay: .3s; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ---------- voet ---------- */
.voet { padding: var(--col-phi) 0 55px; border-top: 1px solid var(--line-gold); }
.voet-logo { grid-column: 2 / 5; }
.voet-logo img { height: 55px; width: auto; }
.voet-blok { grid-column: span 2; display: flex; flex-direction: column; gap: 8px; color: var(--on-night-muted); font-size: 13px; }
.voet-blok .label { color: var(--on-night-faint); }
.voet-blok:first-of-type { grid-column: 6 / 8; }
.voet-onder { grid-column: 2 / 12; margin-top: 89px; padding-top: 13px; border-top: 1px solid var(--line-gold); display: flex; justify-content: space-between; gap: 21px; color: var(--on-night-faint); }
@media (max-width: 767px) {
  .voet { padding-top: 89px; }
  .voet .row { row-gap: 34px; }
  .voet-onder { flex-direction: column; margin-top: 21px; }
}

/* ---------- het toegangsticket (gedeeld: inschrijving, drukwerk) ---------- */
.ticket { container-type: inline-size; position: relative; aspect-ratio: 210 / 74; background: var(--night); color: var(--on-night); display: grid; grid-template-columns: 1fr 27%; overflow: hidden; }
.ticket-main { position: relative; padding: 4.5cqw 5cqw; display: flex; flex-direction: column; justify-content: space-between; }
.ticket-main::before { content: ""; position: absolute; inset: 2.2cqw 0 2.2cqw 2.2cqw; border: 1px solid var(--line-gold); border-right: 0; pointer-events: none; }
.ticket-top { display: flex; align-items: center; gap: 2cqw; }
.ticket-top img { width: 4.6cqw; }
.ticket-top span { font: 500 1.35cqw/1 var(--font-ui); letter-spacing: .3em; text-transform: uppercase; color: var(--gold); }
.ticket-naam { font: italic 400 5.6cqw/1.05 var(--font-head); overflow-wrap: anywhere; }
.ticket-titel { font: 400 2.2cqw/1 var(--font-head); color: var(--on-night-muted); margin-top: 1cqw; }
.ticket-meta { display: flex; gap: 4cqw; }
.ticket-meta div { display: flex; flex-direction: column; gap: .6cqw; }
.ticket-meta b { font: 500 1.15cqw/1 var(--font-ui); letter-spacing: .25em; text-transform: uppercase; color: var(--gold); }
.ticket-meta span { font: 400 2.1cqw/1 var(--font-head); font-variant-numeric: lining-nums; }
.ticket-stub { position: relative; border-left: 1px dashed var(--gold); padding: 4.5cqw 3.5cqw; display: flex; flex-direction: column; align-items: center; justify-content: space-between; text-align: center; }
.ticket-stub::before { content: ""; position: absolute; inset: 2.2cqw 2.2cqw 2.2cqw 0; border: 1px solid var(--line-gold); border-left: 0; pointer-events: none; }
.ticket-nr { font: 500 1.3cqw/1 var(--font-ui); letter-spacing: .25em; color: var(--gold); }
.ticket-qr { width: 13cqw; background: var(--ivory); color: var(--night); padding: .6cqw; }
.ticket-stub small { font: 500 1.1cqw/1.5 var(--font-ui); letter-spacing: .22em; text-transform: uppercase; color: var(--on-night-muted); }