/* ============================================================
   CON LA POSTA — herontwerp-laag (v2)
   Doel: minder 'AI-template', meer convention. Foto's leidend,
   accenten spaarzaam, functionele event-labels, variatie in cards.
   Deze laag STAAT NA de basisstijl en verfijnt die gericht.
   ============================================================ */

:root{
  --ink:#120826;            /* iets diepere, neutralere basis */
  --panel:#1b1030;          /* neutraal content-vlak (niet gekleurd) */
  --panel-2:#241640;
  --hair:rgba(255,255,255,.09);
  --paper:#f3eef8;          /* lichte content-kleur */
}

/* ---- foto's minder weggestopt: lichtere hero-overlay, foto prominenter ---- */
.hero-photo-bg{opacity:.5 !important}
.hero::before{background:linear-gradient(180deg,rgba(18,8,38,.55) 0%,rgba(18,8,38,.35) 42%,rgba(18,8,38,.92) 100%) !important}
.hero-blob{opacity:.28 !important}
.b2{opacity:.18 !important}

/* ---- accentwoord-patroon uitschakelen: em in koppen niet meer roze ---- */
.page-hero h1 em,.sec-title em,.feat-text h2 em,.story-quote em{color:inherit;font-style:normal}

/* ---- eyebrows subtieler / functioneler ---- */
.sec-eyebrow{letter-spacing:.14em;color:var(--cream-dim);font-weight:600}
.sec-eyebrow::before{background:var(--cyan);width:22px}

/* ---- ticket/programma-label: functioneel, mono, spaarzaam ---- */
.evt-label{display:inline-flex;align-items:center;gap:8px;font-family:'Space Grotesk',monospace;
  font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cyan-2);border:1px solid var(--hair);border-radius:2px;padding:5px 10px;background:rgba(255,255,255,.03)}
.evt-label.data{color:var(--gold);border-color:rgba(255,210,63,.3);background:rgba(255,210,63,.05)}
.evt-label.mag{color:var(--magenta-2);border-color:rgba(255,45,149,.3);background:rgba(255,45,149,.05)}

/* ---- HERO: datum als toegangspas-strip i.p.v. losse marketingtekst ---- */
.hero-pass{display:inline-flex;flex-wrap:wrap;align-items:stretch;gap:0;margin:26px auto 0;
  border:1px solid var(--hair);border-radius:4px;overflow:hidden;background:rgba(18,8,38,.5);backdrop-filter:blur(4px)}
.hero-pass .cell{padding:12px 18px;border-right:1px solid var(--hair);text-align:left}
.hero-pass .cell:last-child{border-right:none}
.hero-pass .k{display:block;font-family:'Space Grotesk',monospace;font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--cream-dim);margin-bottom:3px}
.hero-pass .v{font-family:'Space Grotesk';font-size:15px;font-weight:700;color:var(--paper);white-space:nowrap}
.hero-pass .v.gold{color:var(--gold)}
.hero-pass .cell.act{background:var(--magenta);display:flex;align-items:center}
.hero-pass .cell.act a{font-family:'Space Grotesk';font-weight:700;font-size:14px;letter-spacing:.04em;text-transform:uppercase;color:#fff;display:inline-flex;align-items:center;gap:8px}

/* ---- neutralere content-panelen: niet elk vlak gekleurd ---- */
.info,.card,.price-card{background:var(--panel)}
.info:hover{border-color:var(--hair)}
.card:hover{border-color:var(--hair)}

/* card-variatie: niet overal dezelfde hover-lift. rustiger. */
.card{transition:border-color .2s}
.card:hover{transform:none;border-color:rgba(34,224,214,.4)}
.info{transition:border-color .2s}
.info:hover{transform:none}

/* ---- CTA-band: minder egale neon-gradient, rustiger ---- */
.cta-band{background:var(--panel-2);border:1px solid var(--hair);color:var(--paper)}
.cta-band::before{display:none}
.cta-band .btn-cyan{background:var(--magenta);color:#fff}

/* ---- foto-overlay in world-tiles lichter: foto leidend ---- */
.world::after{background:linear-gradient(to top,rgba(18,8,38,.9) 6%,rgba(18,8,38,.15) 65%) !important}
.world-num{color:var(--gold)}

/* ---- TCG showcase-strip (nieuw) ---- */
.tcg-strip{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.tcg-strip .chip{font-family:'Space Grotesk',monospace;font-size:13px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--paper);border:1px solid var(--hair);border-radius:2px;padding:9px 14px;background:rgba(255,255,255,.03)}
.tcg-strip .chip.on{background:var(--magenta);border-color:var(--magenta);color:#fff}

/* action-row voor tcg: KOPEN/VERKOPEN/RUILEN/SPELEN als programma-strip */
.action-row{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--hair);border:1px solid var(--hair);border-radius:4px;overflow:hidden;margin:0 0 8px}
.action-row .act-cell{background:var(--ink);padding:20px 16px;text-align:center}
.action-row .act-cell .n{font-family:'Space Grotesk',monospace;font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--gold);display:block;margin-bottom:8px}
.action-row .act-cell .w{font-family:'Archivo Black';font-size:20px;color:var(--paper);line-height:1}
@media(max-width:620px){.action-row{grid-template-columns:repeat(2,1fr)}}

/* tcg-feature met echte foto naast concrete tekst */
.tcg-feature{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;margin-bottom:20px}
.tcg-feature.rev{grid-template-columns:.9fr 1.1fr}
.tcg-feature.rev .tcg-photo{order:-1}
.tcg-photo{border-radius:8px;overflow:hidden;border:1px solid var(--hair)}
.tcg-photo img{width:100%;height:100%;object-fit:cover;display:block}
.tcg-copy h3{font-size:clamp(22px,3vw,32px);color:var(--paper);margin-bottom:12px}
.tcg-copy p{font-family:'Space Grotesk';font-size:16px;color:var(--cream-dim);margin-bottom:14px}
@media(max-width:760px){.tcg-feature,.tcg-feature.rev{grid-template-columns:1fr;gap:20px}.tcg-feature.rev .tcg-photo{order:0}}

/* ---- perforatie-randje (toegangspas-detail), heel subtiel, alleen waar ingezet ---- */
.perf{position:relative}
.perf::before{content:'';position:absolute;left:0;right:0;top:-1px;height:2px;
  background-image:radial-gradient(circle,var(--hair) 1px,transparent 1.4px);background-size:9px 2px}

/* ---- mobiel: hero compacter zodat data/tickets snel zichtbaar ---- */
@media(max-width:520px){
  .hero{padding:40px 0 54px}
  .hero-pass{width:100%}
  .hero-pass .cell{flex:1 1 40%}
  .hero-pass .cell.act{flex:1 1 100%;justify-content:center;padding:14px}
}