/* Gijsens — eventblok op de contactpagina.
   Alles hangt onder .gij-ev zodat de themastijl er niet doorheen lekt.

   Tokens komen van de site zelf, niet van de landingspagina: die draait
   op Arial met een eigen oranje, hier is het Muli met het sitepalet.
   Dezelfde waarden als .gjs-oz gebruikt.

   Vorm: een agenda-lijst, geen kaartenrek. Rijen gescheiden door een
   haarlijn, de datum als typografisch anker links, en geen enkel
   volgekleurd vlak. Op een contactpagina is dit navigatie, geen
   landingspagina die moet schreeuwen. */
.gij-ev{
  --or:#FF7F00;        /* fel oranje, alleen voor de hoverlijn */
  --or-tx:#A8521F;     /* oranje voor tekst, haalt contrast op wit */
  --dk:#000000;
  --gr:#6B6B6B;
  --zand:#E8E3DE;
  --ln:rgba(0,0,0,.10);
  font-family:muli,"Helvetica Neue",Helvetica,Arial,sans-serif;
  color:var(--dk);
  line-height:1.6;
  text-align:left;     /* de sectie eromheen centreert */
  -webkit-font-smoothing:antialiased;
}
.gij-ev *,.gij-ev *::before,.gij-ev *::after{box-sizing:border-box}
.gij-ev p{margin:0}
.gij-ev h2,.gij-ev h3{margin:0;font-weight:700;letter-spacing:-.02em;line-height:1.15}

/* kop */
.gij-ev__eyebrow{font-size:13px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--or-tx);margin:0 0 14px}
.gij-ev__h2{font-size:clamp(26px,3.2vw,34px);margin:0 0 12px}
.gij-ev__lead{font-size:17px;line-height:1.62;color:var(--gr);max-width:58ch;text-wrap:balance}
.gij-ev__lead br{display:none}

/* filter — tekstuele tabs, geen knoppenrij */
.gij-ev__filter{display:flex;flex-wrap:wrap;gap:26px;margin:30px 0 4px;border-bottom:1px solid var(--ln)}
.gij-ev__tab{background:none;border:0;padding:0 0 12px;margin:0;cursor:pointer;
  font:600 15px/1.4 inherit;color:var(--gr);position:relative;
  transition:color .18s cubic-bezier(.4,0,.2,1)}
.gij-ev__tab::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--or);
  transform:scaleX(0);transform-origin:left;transition:transform .22s cubic-bezier(.4,0,.2,1)}
.gij-ev__tab:hover{color:var(--dk)}
.gij-ev__tab:focus-visible{outline:2px solid var(--dk);outline-offset:4px;border-radius:2px}
.gij-ev__tab[aria-pressed="true"]{color:var(--dk)}
.gij-ev__tab[aria-pressed="true"]::after{transform:scaleX(1)}

/* lijst */
.gij-ev__list{margin:0;padding:0;list-style:none}
.gij-ev__item{display:grid;grid-template-columns:64px minmax(0,1fr) auto;column-gap:28px;align-items:center;
  padding:26px 16px;margin:0 -16px;border-bottom:1px solid var(--ln);border-radius:3px;
  transition:background-color .2s cubic-bezier(.4,0,.2,1)}
.gij-ev__item:hover{background:rgba(232,227,222,.42)}

/* datum als typografisch anker, niet als vlak */
.gij-ev__date{text-align:center}
.gij-ev__day{font-size:32px;font-weight:700;letter-spacing:-.03em;line-height:1;color:var(--dk)}
.gij-ev__mon{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gr);margin-top:5px}

/* inhoud */
.gij-ev__body{min-width:0}
.gij-ev__kind{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gr);margin:0 0 5px}
.gij-ev__item--demo .gij-ev__kind{color:var(--or-tx)}
.gij-ev__title{font-size:18px;margin:0 0 4px}
.gij-ev__meta{font-size:15px;color:var(--gr)}
/* Alleen tonen als er iets te melden valt. "Plaatsen beschikbaar" op
   elke avond is ruis; schaarste en wachtlijst zijn dat niet. */
.gij-ev__avail{font-size:14px;font-weight:700;margin-top:7px}
.gij-ev__avail--low{color:#B3452A}
.gij-ev__avail--full{color:var(--gr)}

/* acties — tekstlinks, met de agenda ernaast achter een scheidingsstreep */
.gij-ev__actions{display:flex;align-items:center;gap:16px;white-space:nowrap}
.gij-ev__cta{font-size:15px;font-weight:700;color:var(--or-tx);text-decoration:none;
  display:inline-flex;align-items:center;gap:7px}
.gij-ev__cta span{display:inline-block;transition:transform .22s cubic-bezier(.4,0,.2,1)}
.gij-ev__cta:hover{color:var(--or-tx);text-decoration:underline;text-underline-offset:4px}
.gij-ev__cta:hover span{transform:translateX(3px)}
.gij-ev__cta:focus-visible{outline:2px solid var(--dk);outline-offset:4px;border-radius:2px}
.gij-ev__ics{font-size:14px;color:var(--gr);text-decoration:none;padding-left:16px;border-left:1px solid var(--ln)}
.gij-ev__ics:hover{color:var(--dk);text-decoration:underline;text-underline-offset:4px}
.gij-ev__ics:focus-visible{outline:2px solid var(--dk);outline-offset:4px;border-radius:2px}

/* statusberichten */
.gij-ev__msg{font-size:15px;color:var(--gr);padding:26px 0}
.gij-ev__msg:empty{padding:0}
.gij-ev__meta-foot{font-size:14px;color:var(--gr);margin-top:26px}
.gij-ev__meta-foot a{color:var(--or-tx);text-decoration:none}
.gij-ev__meta-foot a:hover{text-decoration:underline;text-underline-offset:3px}

/* rijen komen binnen met een korte stagger, niet als een blok */
.gij-ev__item{animation:gij-ev-in .38s cubic-bezier(.4,0,.2,1) both}
.gij-ev__item:nth-child(1){animation-delay:.02s}
.gij-ev__item:nth-child(2){animation-delay:.06s}
.gij-ev__item:nth-child(3){animation-delay:.10s}
.gij-ev__item:nth-child(4){animation-delay:.14s}
.gij-ev__item:nth-child(5){animation-delay:.18s}
.gij-ev__item:nth-child(6){animation-delay:.22s}
@keyframes gij-ev-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

@media (max-width:720px){
  .gij-ev__item{grid-template-columns:52px minmax(0,1fr);column-gap:18px;row-gap:14px;padding:22px 12px;margin:0 -12px}
  .gij-ev__actions{grid-column:2;justify-content:flex-start}
  .gij-ev__day{font-size:26px}
  .gij-ev__filter{gap:20px}
  .gij-ev__lead{font-size:16px}
}

@media (prefers-reduced-motion:reduce){
  .gij-ev__item{animation:none}
  .gij-ev__tab,.gij-ev__tab::after,.gij-ev__cta span,.gij-ev__item{transition:none}
}