/* KZ-Evenement Info — infoblok met datum, feitenlijst en kaartenknop. */

.kz-evt{--kz-evt-red:#e83f35;--kz-evt-red-dark:#b82a22;--kz-evt-red-darker:#8f1f19;--kz-evt-white:#fff;--kz-evt-black:#111;
  --kz-evt-display:"Roboto Condensed",Impact,"Arial Narrow",sans-serif;--kz-evt-body:"Work Sans",-apple-system,BlinkMacSystemFont,sans-serif;
  box-sizing:border-box;display:flex;flex-direction:column;container-type:inline-size;container-name:kz-evt;max-width:820px;margin:0 auto;background:var(--kz-evt-white);border:2px solid var(--kz-evt-red);border-radius:4px;overflow:hidden;
  font-family:var(--kz-evt-body);color:var(--kz-evt-black);font-size:18px;line-height:1.5;text-align:left}
.kz-evt *,.kz-evt *::before,.kz-evt *::after{box-sizing:border-box}
.kz-evt p{margin:0}
.kz-evt__kop{font-family:var(--kz-evt-display);font-weight:700;text-transform:uppercase;letter-spacing:-0.04em;line-height:.95;transform:scaleX(.8);transform-origin:left center;display:inline-block;margin:0;padding:0}

/* Rode kop met logo */
.kz-evt__top{position:relative;background:var(--kz-evt-red);color:var(--kz-evt-white);display:flex;align-items:center;gap:24px;padding:28px}
.kz-evt__logo{flex:0 0 auto;width:84px;height:auto;display:block;margin:0}
.kz-evt__cat{display:inline-block;background:var(--kz-evt-white);color:var(--kz-evt-red);font-size:20px;padding:.14em .35em .08em;margin-bottom:10px}
.kz-evt .kz-evt__titel{display:block;font-size:56px;color:var(--kz-evt-white);width:125%}

/* Inhoud */
/* Bij gelijke hoogte (naast elkaar) groeit de tekstrij, zodat de knop onderaan staat. */
.kz-evt__body{flex:1 1 auto;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr;align-content:start;gap:28px;padding:28px}
.kz-evt--zonder-datum .kz-evt__body{grid-template-columns:1fr;grid-template-rows:auto 1fr}
.kz-evt__balk{grid-column:1/-1;height:10px;background:var(--kz-evt-red);margin-bottom:-8px}
.kz-evt__datum{text-align:center;width:150px}
.kz-evt__dag{display:block;font-family:var(--kz-evt-display);font-weight:700;text-transform:uppercase;letter-spacing:-0.04em;font-size:22px;color:var(--kz-evt-red);margin-bottom:8px}
/* Datumblok in de vorm van het KZ-Ticket: holle hoeken, geschulpte zijkanten en een witte stippellijn. */
.kz-evt__blok{--r:14px;--s:4px;position:relative;background:var(--kz-evt-red);color:var(--kz-evt-white);padding:16px 0 18px;display:flex;flex-direction:column;align-items:center;
  --hoek:#0000 var(--r),#000 calc(var(--r) + .5px);--schulp:#0000 var(--s),#000 calc(var(--s) + .5px);
  -webkit-mask:radial-gradient(circle at 0 0,var(--hoek)),radial-gradient(circle at 100% 0,var(--hoek)),radial-gradient(circle at 0 100%,var(--hoek)),radial-gradient(circle at 100% 100%,var(--hoek)),
    radial-gradient(circle at 0 50%,var(--schulp)) 0 50%/100% 12px repeat-y,radial-gradient(circle at 100% 50%,var(--schulp)) 0 50%/100% 12px repeat-y;
  -webkit-mask-composite:source-in;
  mask:radial-gradient(circle at 0 0,var(--hoek)),radial-gradient(circle at 100% 0,var(--hoek)),radial-gradient(circle at 0 100%,var(--hoek)),radial-gradient(circle at 100% 100%,var(--hoek)),
    radial-gradient(circle at 0 50%,var(--schulp)) 0 50%/100% 12px repeat-y,radial-gradient(circle at 100% 50%,var(--schulp)) 0 50%/100% 12px repeat-y;
  mask-composite:intersect}
.kz-evt__blok::before,.kz-evt__blok::after{content:"";position:absolute;pointer-events:none;border:0 dashed var(--kz-evt-white)}
.kz-evt__blok::before{top:6px;bottom:6px;left:calc(var(--r) + 4px);right:calc(var(--r) + 4px);border-top-width:2px;border-bottom-width:2px}
.kz-evt__blok::after{top:calc(var(--r) + 4px);bottom:calc(var(--r) + 4px);left:10px;right:10px;border-left-width:2px;border-right-width:2px}
.kz-evt__dd{font-family:var(--kz-evt-display);font-weight:700;letter-spacing:-0.04em;font-size:64px;line-height:1;transform:scaleX(.8)}
.kz-evt__dd--lang{display:none;text-transform:uppercase}
.kz-evt__tijd{font-family:var(--kz-evt-display);font-weight:700;letter-spacing:-0.04em;font-size:20px}
.kz-evt__tekst > *:first-child{margin-top:0}
.kz-evt__tekst p+p{margin-top:12px}
.kz-evt .kz-evt__feiten{list-style:none;margin:18px 0 0;padding:0;border-top:2px solid var(--kz-evt-black)}
.kz-evt__tekst > .kz-evt__feiten:first-child{margin-top:0}
.kz-evt .kz-evt__feiten li{display:flex;gap:16px;margin:0;padding:8px 0;border-bottom:1px solid var(--kz-evt-black);font-size:17px;list-style:none}
.kz-evt .kz-evt__feiten li::before{content:none;display:none}
.kz-evt__feiten b{flex:0 0 76px;font-family:var(--kz-evt-display);font-weight:700;text-transform:uppercase;letter-spacing:-0.04em;color:var(--kz-evt-red);font-size:19px;line-height:1.4}

/* Knop */
.kz-evt__actie{grid-column:1/-1;border-top:2px solid var(--kz-evt-red);padding-top:22px}
.kz-evt .kz-evt__knop{display:block;width:100%;text-align:center;background:var(--kz-evt-red);color:var(--kz-evt-white)!important;text-decoration:none!important;font-family:var(--kz-evt-display);font-weight:700;text-transform:uppercase;letter-spacing:-0.04em;font-size:30px;line-height:1;padding:.22em .5em .16em;border:2px solid var(--kz-evt-red);transition:background .12s ease}
.kz-evt__knop span{display:inline-block;transform:scaleX(.8)}
.kz-evt .kz-evt__knop:hover{background:var(--kz-evt-red-dark);border-color:var(--kz-evt-red-dark)}
.kz-evt .kz-evt__knop:active{background:var(--kz-evt-red-darker)}
.kz-evt .kz-evt__knop:focus-visible{outline:3px solid var(--kz-evt-black);outline-offset:3px}
.kz-evt__knop--uit{opacity:.5;cursor:not-allowed;pointer-events:none}
.kz-evt .kz-evt__knop--binnenkort{background:var(--kz-evt-white);color:var(--kz-evt-red)!important;border-style:dashed;cursor:default;pointer-events:none}
.kz-evt__klein{grid-column:1/-1;font-size:14px;margin-top:-12px}

/* Seizoenskaart: dezelfde opbouw met omgekeerde kleuren — witte kop, rood
   vlak, wit ticket en een witte knop — zodat hij tussen de andere opvalt. */
.kz-evt--seizoen{background:var(--kz-evt-red);color:var(--kz-evt-white)}
.kz-evt--seizoen .kz-evt__top{background:var(--kz-evt-white);color:var(--kz-evt-red)}
.kz-evt--seizoen .kz-evt__cat{background:var(--kz-evt-red);color:var(--kz-evt-white)}
.kz-evt.kz-evt--seizoen .kz-evt__titel{color:var(--kz-evt-red)}
.kz-evt--seizoen .kz-evt__balk{background:var(--kz-evt-white)}
.kz-evt--seizoen .kz-evt__dag{color:var(--kz-evt-white)}
.kz-evt--seizoen .kz-evt__blok{background:var(--kz-evt-white);color:var(--kz-evt-red)}
.kz-evt--seizoen .kz-evt__blok::before,.kz-evt--seizoen .kz-evt__blok::after{border-color:var(--kz-evt-red)}
.kz-evt--seizoen .kz-evt__dd--seizoen{font-size:34px;line-height:1.1;white-space:nowrap}
.kz-evt.kz-evt--seizoen .kz-evt__feiten{border-top-color:var(--kz-evt-white)}
.kz-evt.kz-evt--seizoen .kz-evt__feiten li{border-bottom-color:rgba(255,255,255,.7)}
.kz-evt--seizoen .kz-evt__feiten b{color:var(--kz-evt-white)}
.kz-evt--seizoen .kz-evt__tekst a{color:var(--kz-evt-white)}
.kz-evt--seizoen .kz-evt__actie{border-top-color:var(--kz-evt-white)}
.kz-evt.kz-evt--seizoen .kz-evt__knop{background:var(--kz-evt-white);border-color:var(--kz-evt-white);color:var(--kz-evt-red)!important}
.kz-evt.kz-evt--seizoen .kz-evt__knop:hover{background:#f1e4e3;border-color:#f1e4e3}
.kz-evt.kz-evt--seizoen .kz-evt__knop:active{background:#e6d0ce}
.kz-evt.kz-evt--seizoen .kz-evt__knop:focus-visible{outline-color:var(--kz-evt-white)}
.kz-evt.kz-evt--seizoen .kz-evt__knop--binnenkort{background:transparent;border-color:var(--kz-evt-white);color:var(--kz-evt-white)!important}

/* Reageert op de breedte van het blok zelf, niet van het scherm, zodat twee
   blokken naast elkaar in WPBakery-kolommen ook de smalle opmaak krijgen. */
@container kz-evt (max-width:600px){
  .kz-evt__top{gap:18px;padding:22px 20px}
  .kz-evt__logo{width:64px}
  .kz-evt .kz-evt__titel{font-size:42px}
  .kz-evt__body{gap:20px;padding:20px}
  .kz-evt__datum{width:124px}
  .kz-evt__dd{font-size:52px}
  .kz-evt__tijd{font-size:17px}
  .kz-evt .kz-evt__knop{font-size:24px}
  .kz-evt__klein{text-align:center}
  .kz-evt--seizoen .kz-evt__dd--seizoen{font-size:28px}
}
/* Telefoon: geen logo, en het datumticket over de volle breedte boven de tekst. */
@container kz-evt (max-width:420px){
  .kz-evt__logo{display:none}
  .kz-evt__body{grid-template-columns:1fr;grid-template-rows:auto auto 1fr}
  .kz-evt--zonder-datum .kz-evt__body{grid-template-rows:auto 1fr}
  .kz-evt__datum{width:100%}
  .kz-evt__dd--kort{display:none}
  .kz-evt__dd--lang{display:block}
  .kz-evt__datum--auto .kz-evt__dag{display:none}
  .kz-evt__dd{font-size:64px}
  .kz-evt__tijd{font-size:20px}
  .kz-evt .kz-evt__knop{font-size:20px}
  .kz-evt--seizoen .kz-evt__dd--seizoen{font-size:36px}
}