/* ============================================================
   TANTE ZUS - zus-events.css
   De agenda (events.html) en de publieke horecaavond (horecaavond.html)
   in de nieuwe stijl. Leunt op zus.css (tokens, koppen, knoppen,
   lijsten, header en voet); hier staat alleen wat daar niet in zit.
   Letters: Tante Zus Display (alleen grote koppen), Mona Sans (titels,
   recht), Barlow (tekst en labels). Geen handschrift.
   ============================================================ */

/* ---------- iconen uit de sprite ---------- */
.ikoon { width: 1.5em; height: 1.5em; fill: currentColor; flex: none; display: inline-block; vertical-align: middle; }

/* ============================================================
   EVENTS: de agenda
   De pagina is de agenda-sectie van de homepage, maar dan het
   hele scherm: kop links, intro rechts, filters, kaarten.
   ============================================================ */
.agenda--pagina { padding-bottom: calc(3rem + 1px); }
.agenda--pagina .agenda__binnen { max-width: 1180px; gap: 2.5rem; }

.ev-kop { display: grid; gap: 1.75rem; align-items: end; position: relative; }
.ev-kop .label { display: inline-flex; align-items: center; gap: .55rem; margin: 0 0 1.1rem; }
.ev-kop .label .ikoon { width: 1.9em; height: 1.9em; }
.agenda--pagina .ev-kop h1 { color: var(--oranje); font-size: clamp(3.2rem, 7vw, 6.6rem); }
.ev-kop__rechts { display: grid; gap: 1.25rem; max-width: 36ch; }
.ev-kop__intro { font-size: 1.2rem; line-height: 1.45; color: rgba(255, 248, 239, .88); }
.ev-kop__regel { font-family: var(--nav); font-weight: 700; font-size: 1.1rem; color: var(--wit); }
.ev-ikonen { display: flex; gap: 1.1rem; color: var(--oranje); }
.ev-ikonen .ikoon { width: 44px; height: 44px; }
@media (min-width: 900px) {
  .ev-kop { grid-template-columns: 1fr auto; }
  .ev-kop__rechts { justify-items: start; padding-bottom: .6rem; }
}

/* ---------- filters ---------- */
.ev-filters { display: flex; flex-wrap: wrap; gap: .75rem; }
.ev-filter {
  font: inherit;
  font-family: var(--nav);
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--wit);
  background: transparent;
  border: 2px solid var(--wit);
  border-radius: 0;
  padding: .8rem 1.4rem;
  min-height: 48px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  transition: background-color .15s, border-color .15s, color .15s;
}
.ev-filter .ikoon { width: 1.35em; height: 1.35em; }
.ev-filter:hover { border-color: var(--oranje); }
.ev-filter[aria-pressed="true"] { background: var(--oranje); border-color: var(--oranje); color: var(--wit); }
.ev-filter:focus-visible { outline: 3px solid var(--wit); outline-offset: 3px; }

/* ---------- het rooster van kaarten ---------- */
.ev-grid { display: grid; gap: 1.75rem; align-items: stretch; }
/* Zolang data/events.json nog onderweg is, is het rooster leeg en stond de
   kermisband eronder al in beeld; daarna schoof hij een paar schermen omlaag
   (CLS 0,293 op /events, gemeten 05-11-2026). Een scherm hoogte vrijhouden
   houdt alles daaronder buiten beeld tot de kaarten er zijn. De klasse
   verdwijnt vanzelf: het tekenen zet className opnieuw. */
.ev-grid--laden { min-height: 100vh; min-height: 100svh; }
@media (min-width: 700px) {
  .ev-grid--2 { grid-template-columns: 1.5fr 1fr; }
  .ev-grid--3 { grid-template-columns: 1.5fr 1fr 1fr; }
  .ev-grid--veel { grid-template-columns: repeat(2, 1fr); }
  .ev-grid--veel .ev-card--foto { grid-column: span 2; }
}
@media (min-width: 1000px) {
  .ev-grid--veel { grid-template-columns: repeat(3, 1fr); }
}

.ev-card { cursor: pointer; position: relative; display: flex; flex-direction: column; min-height: 0; text-decoration: none; }
.ev-card:focus-visible { outline: 3px solid var(--oranje); outline-offset: 5px; }
.ev-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.ev-card .dag__datum { position: static; display: inline-flex; align-items: center; gap: .4rem; }
.ev-card .dag__datum .ikoon { width: 1.25em; height: 1.25em; }
.ev-card__tag {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--nav); font-weight: 700; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase;
}
.ev-card__tag .ikoon { width: 1.7em; height: 1.7em; }
.ev-card__sold-out {
  font-family: var(--nav); font-weight: 700; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase;
  background: var(--oranje); color: var(--wit); padding: .3rem .7rem; border-radius: 0;
}
.ev-card__desc { font-size: 1.05rem; line-height: 1.45; }
.ev-card__footer { margin-top: auto; padding-top: .9rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; }
.ev-card__price { font-family: var(--nav); font-weight: 700; font-size: 1.1rem; }
.ev-card .dag__knop { margin-top: 0; align-self: auto; }
/* een echte ticketknop is een gevulde pil; "bekijk event" blijft omlijnd */
.ev-card .knop--oranje, .ev-card .knop--bruin { padding: .6rem 1.1rem; min-height: 44px; font-size: 1rem; }
.ev-card .knop--oranje { color: var(--wit); }
.ev-card .knop--bruin { color: var(--wit); }
.ev-card--oranje .knop--bruin { --vul: var(--wit); }
.ev-card--oranje .knop--bruin:hover { color: var(--bruin); }

/* 1: grote foto, titel erover, tekst eronder op nachtzwart */
.ev-card--foto { border: 3px solid var(--wit); background: var(--nacht); background-image: var(--vlak-bruin); color: var(--wit); }
.ev-card__foto { position: relative; display: block; overflow: hidden; }
.ev-card__foto img { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; display: block; filter: saturate(1.1) contrast(1.05) sepia(.06); transition: scale .8s cubic-bezier(.16, 1, .3, 1); }
.ev-card:hover .ev-card__foto img { scale: 1.04; }
.ev-card__foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20, 10, 4, .88), rgba(20, 10, 4, 0) 62%); pointer-events: none; }
.ev-card__foto .dag__datum { position: absolute; z-index: 2; top: .9rem; left: .9rem; }
.ev-card__foto .dag__titel { position: absolute; z-index: 2; left: 1.1rem; right: 1.1rem; bottom: 1rem; font-size: clamp(2.2rem, 4.2vw, 3.8rem); line-height: .92; color: var(--wit); }
.ev-card--foto .ev-card__body { padding: 1.1rem 1.25rem 1.3rem; display: grid; gap: .8rem; align-content: start; flex: 1; }
.ev-card--foto .ev-card__tag { color: var(--oranje); }
.ev-card--foto .ev-card__desc { color: rgba(255, 248, 239, .85); }
.ev-card--foto .ev-card__footer { border-top: 1px solid rgba(255, 248, 239, .18); }
.ev-grid--1 .ev-card__foto img { aspect-ratio: 16 / 8; }
@media (max-width: 699px) { .ev-card__foto img { aspect-ratio: 4 / 3.4; } }

/* 2 en 3: gekleurd vlak, titel boven, foto eronder */
.ev-card--vlak { padding: 1.1rem 1.1rem 1.25rem; gap: .9rem; }
.ev-card--oranje { background: var(--oranje); background-image: var(--vlak-oranje); color: var(--bruin); }
.ev-card--creme { background: var(--creme); background-image: var(--vlak-papier); color: var(--bruin); }
.ev-card--vlak .dag__datum { background: var(--bruin); color: var(--wit); }
.ev-card--vlak .dag__titel { font-size: clamp(1.9rem, 2.9vw, 2.7rem); }
.ev-card--vlak .ev-card__tag { color: var(--bruin); }
.ev-card--creme .ev-card__tag { color: var(--oranje-diep); }
.ev-card--vlak img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; clip-path: polygon(0 3%, 100% 0, 100% 100%, 0 97%); }
.ev-card--vlak .ev-card__footer { border-top: 1px solid rgba(23, 18, 14, .22); }
.ev-card--vlak:hover .knop:not(.knop--oranje):not(.knop--bruin) { color: var(--wit); border-color: var(--bruin); }

/* kaarten komen na elkaar binnen; zonder animatie staan ze er gewoon */
html.anim .ev-card { opacity: 0; translate: 0 48px; transition: opacity .6s ease, translate .8s cubic-bezier(.2, .8, .2, 1); }
html.anim .ev-card.is-in { opacity: 1; translate: 0 0; }
html.anim .ev-card.is-in:nth-child(2) { transition-delay: .1s; }
html.anim .ev-card.is-in:nth-child(3) { transition-delay: .2s; }

/* ---------- lege staat ---------- */
.events-empty {
  grid-column: 1 / -1;
  display: grid;
  gap: .9rem 2rem;
  justify-items: start;
  padding: 2.25rem clamp(1.25rem, 4vw, 3rem) 2.5rem;
  border: 2px dashed rgba(255, 248, 239, .4);
  color: var(--wit);
}
.events-empty__ikoon { fill: currentColor; width: 72px; height: 72px; color: var(--oranje); }
.events-empty__title { font-family: "Zus Kop", "Arial Black", sans-serif; font-weight: 900; font-stretch: 88%; text-transform: uppercase; letter-spacing: -.01em; line-height: .95; font-size: clamp(2.4rem, 5vw, 3.8rem); color: var(--oranje); }
.events-empty__text { max-width: 46ch; font-size: 1.2rem; }
@media (min-width: 800px) {
  .events-empty { grid-template-columns: auto 1fr; align-items: center; }
  .events-empty__ikoon { grid-row: 1 / span 3; width: 110px; height: 110px; }
}

/* ---------- partner: de kermis, een rechte oranje band ---------- */
.ev-partner {
  background: var(--oranje);
  background-image: var(--vlak-oranje);
  color: var(--bruin);
  padding: 2.5rem var(--rand);
  position: relative;
  z-index: 3;
  margin-top: -1px;
}
.ev-partner__binnen { max-width: 1180px; margin: 0 auto; display: grid; gap: 1.5rem; align-items: center; }
.ev-partner__kop { display: flex; align-items: center; gap: 1.25rem; }
.ev-partner__kop .ikoon { width: 64px; height: 64px; color: var(--bruin); }
.ev-partner .label { color: var(--bruin); margin: 0 0 .3rem; }
.ev-partner__titel { font-family: "Zus Kop", "Arial Black", sans-serif; font-weight: 900; font-stretch: 88%; text-transform: uppercase; letter-spacing: -.015em; line-height: .95; font-size: clamp(1.9rem, 4.4vw, 3.4rem); color: var(--bruin); }
.ev-partner__titel em { display: block; font-style: normal; color: var(--wit); font-size: .62em; letter-spacing: -.005em; margin-top: .2rem; }
.ev-partner__sub { margin-top: .9rem; max-width: 52ch; font-size: 1.15rem; font-weight: 500; }
.ev-partner__sub a { color: var(--bruin); text-decoration-color: rgba(23, 18, 14, .5); text-underline-offset: 3px; }
@media (min-width: 800px) { .ev-partner__binnen { grid-template-columns: 1fr auto; gap: 3rem; } }

/* ---------- social: foto's links, tekst rechts, op groen ---------- */
.ev-social {
  background: var(--groen);
  background-image: var(--vlak-groen);
  color: var(--wit);
  padding: 4rem var(--rand) 5rem;
}
.ev-social__binnen { max-width: var(--breed); margin: 0 auto; display: grid; gap: 3.5rem; align-items: center; }
.ev-social .collage { max-width: 640px; }
.ev-social__tekst .kop-smal { color: var(--wit); }
.ev-social__body { max-width: 40ch; margin: 1.5rem 0 1.75rem; font-size: 1.2rem; color: rgba(255, 248, 239, .9); }
.ev-social__handle { text-transform: none; }
.ev-social__handle small { letter-spacing: .14em; }
@media (min-width: 861px) {
  .ev-social__binnen { grid-template-columns: 1.15fr 1fr; gap: 4rem; padding: 1rem 0; }
  .ev-social__tekst { justify-self: end; }
}

/* ---------- de modal met alle info van een event ---------- */
.ev-modal {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
@media (min-width: 700px) { .ev-modal { align-items: center; padding: 1.5rem; } }
.ev-modal.is-open { opacity: 1; visibility: visible; }
.ev-modal__backdrop { position: absolute; inset: 0; background: rgba(12, 8, 5, .82); }
.ev-modal__panel {
  position: relative; z-index: 1;
  width: 100%; max-width: 640px;
  max-height: 92svh; overflow-y: auto;
  background: var(--nacht);
  background-image: var(--vlak-bruin);
  color: var(--wit);
  border: 3px solid var(--wit);
  transform: translateY(40px) rotate(-.6deg);
  transition: transform .4s cubic-bezier(.34, 1.3, .64, 1);
}
.ev-modal.is-open .ev-modal__panel { transform: translateY(0) rotate(0); }
.ev-modal__img-wrap { position: relative; aspect-ratio: 16 / 9; }
.ev-modal__img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(1.1) contrast(1.05) sepia(.06); }
.ev-modal__img-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(22, 17, 13, .85), rgba(22, 17, 13, 0) 55%); }
.ev-modal__close {
  position: absolute; top: .9rem; right: .9rem;
  width: 48px; height: 48px;
  border-radius: 0; border: 0;
  background: var(--oranje); color: var(--wit);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 2;
  transition: background-color .15s;
}
.ev-modal__close svg { width: 20px; height: 20px; }
.ev-modal__close:hover { background: var(--oranje-diep); }
.ev-modal__close:focus-visible { outline: 3px solid var(--wit); outline-offset: 3px; }
.ev-modal__body { padding: 1.5rem 1.6rem 2rem; }
.ev-modal__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .9rem; margin-bottom: .9rem; }
.ev-modal__date { display: inline-flex; align-items: center; gap: .4rem; background: var(--wit); color: var(--bruin); font-family: var(--nav); font-weight: 700; font-size: 1rem; padding: .3rem .85rem; border-radius: 0; }
.ev-modal__date .ikoon { width: 1.25em; height: 1.25em; }
.ev-modal__tagwrap { display: inline-flex; align-items: center; gap: .4rem; color: var(--oranje); font-family: var(--nav); font-weight: 700; font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; }
.ev-modal__tagwrap .ikoon { width: 1.8em; height: 1.8em; }
.ev-modal__title { font-family: "Zus Kop", "Arial Black", sans-serif; font-weight: 900; font-stretch: 88%; text-transform: uppercase; letter-spacing: -.015em; line-height: .95; font-size: clamp(2rem, 6vw, 3rem); margin-bottom: 1rem; }
.ev-modal__desc { font-size: 1.1rem; line-height: 1.55; color: rgba(255, 248, 239, .88); margin-bottom: 1.5rem; }
.ev-modal__footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1.25rem; border-top: 1px solid rgba(255, 248, 239, .2); }
.ev-modal__price { font-family: var(--nav); font-weight: 700; font-size: 1.2rem; }
.ev-modal__ticket-btn { display: none; }

/* ============================================================
   HORECAAVOND: de live-stand (boules-live.css) in de nieuwe stijl
   boules-live.css leunt op de oude variabelen van style.css. Die
   staan hier opnieuw, maar met de nieuwe kleuren en letters, zodat
   de hele live-stand meekleurt zonder dat die code verandert.
   ============================================================ */
:root {
  --orange: #E8541E;
  --orange-dark: #C4461A;
  --cream: #F6E9D8;
  --off-white: #FBF2E6;
  --brown: #17120E;
  --text-dark: #F6E9D8;
  --font-serif: "Zus Kop", "Arial Black", sans-serif;
  --font-sans: "Zus Tekst", system-ui, sans-serif;
  --font-accent: "Zus Tekst", system-ui, sans-serif;
  --space-xs: .5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
}
.zus-horeca #main-content { background: var(--papier); background-image: var(--vlak-papier); }

/* kop: nachtzwart met schuine bovenkant, zoals de agenda */
.zus-horeca .bl-kop {
  background: var(--nacht);
  background-image: var(--vlak-bruin);
  color: var(--wit);
  clip-path: polygon(0 0, 100% var(--schuin), 100% 100%, 0 100%);
  padding: calc(var(--schuin) + 2rem) var(--zijkant) 3rem;
}
.zus-horeca .bl-kop::after { display: none; }
.zus-horeca .bl-kop__inner { max-width: none; margin: 0; }
.zus-horeca .bl-kop__terug { font-family: var(--nav); font-weight: 700; font-size: .95rem; letter-spacing: .12em; color: var(--wit); text-decoration: none; margin-bottom: .75rem; }
.zus-horeca .bl-kop__terug:hover { color: var(--oranje); }
.zus-horeca .bl-kop__titel {
  font-family: var(--kop);
  font-weight: 900;
  font-size: clamp(3rem, 10vw, 7.5rem);
  line-height: .86;
  letter-spacing: -.01em;
  word-spacing: .04em;
  -webkit-text-stroke: .015em currentColor;
  color: var(--wit);
  transform: rotate(-1.75deg);
  transform-origin: left bottom;
  width: fit-content;
  max-width: 100%;
}
.zus-horeca .bl-kop__titel em { font-family: var(--kop); font-style: normal; font-weight: 900; font-size: .8em; color: var(--oranje); letter-spacing: -.01em; }
.zus-horeca .bl-kop__avond { font-family: var(--nav); font-weight: 700; font-size: clamp(1.2rem, 2.8vw, 1.6rem); color: var(--wit); margin-top: 1.4rem; }
.zus-horeca .bl-kop__avond + .bl-kop__avond { margin-top: .3rem; display: flex; align-items: center; gap: .55rem; color: var(--oranje); }
.zus-horeca .bl-kop__avond .ikoon { width: 1.6em; height: 1.6em; }
.zus-horeca .bl-kop__vers { color: rgba(255, 248, 239, .9); font-size: 1rem; }
.zus-horeca .bl-kop__versbelofte { color: rgba(255, 248, 239, .82); }
.zus-horeca .bl-pil { color: var(--wit); font-family: var(--nav); font-weight: 700; background: rgba(255, 248, 239, .14); }
.zus-horeca .bl-pil--live { background: var(--bl-accent-diep); }
.bl-kop__deco { position: absolute; z-index: 1; right: var(--zijkant); top: calc(var(--schuin) + 2.5rem); width: clamp(84px, 16vw, 190px); height: auto; color: var(--oranje); transform: rotate(8deg); pointer-events: none; }
@media (max-width: 640px) { .bl-kop__deco { top: auto; bottom: 1.5rem; opacity: .9; width: 84px; } }

/* sectiekoppen: de grote letter, recht boven de tekst */
.zus-horeca .bl-sectie--creme { background: var(--creme); background-image: var(--vlak-papier); }
.zus-horeca .bl-sectie--zacht { background: var(--papier); background-image: var(--vlak-papier); }
.zus-horeca .bl-sectie__kop { font-family: var(--kop); font-weight: 900; letter-spacing: -.01em; -webkit-text-stroke: .012em currentColor; transform: rotate(-1deg); transform-origin: left bottom; width: fit-content; max-width: 100%; margin-bottom: .6rem; }
.zus-horeca .bl-erepodium { background: var(--nacht); background-image: var(--vlak-bruin); }

/* de kleine cursieve zinnetjes waren Cormorant; Barlow heeft geen italic */
.zus-horeca .bl-baan__tegen, .zus-horeca .bl-podium__punten, .zus-horeca .bl-schemastrook__bij,
.zus-horeca .bl-blokrij__status--gespeeld, .zus-horeca .bl-blokpartij__nog, .zus-horeca .bl-blokbeurt__nogniet { font-style: normal; font-weight: 600; }
.zus-horeca .bl-baan { border-top-color: var(--oranje); }

/* de voet van de horecaavond heeft geen openingstijden maar de avond zelf */
.voet__avond { list-style: none; }

/* De knoppen die boules-live.js maakt (.btn .btn--primary) leunden op
   style.css; hier als pil in de nieuwe stijl */
.zus-horeca .btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--nav); font-weight: 700; font-size: 1.1rem; line-height: 1; text-decoration: none;
  padding: .9rem 1.6rem; min-height: 48px; border-radius: 0; border: 2px solid transparent; cursor: pointer;
  transition: background-color .15s, color .15s;
}
.zus-horeca .btn--primary, .zus-horeca #main-content .btn--primary { background: var(--bl-accent-diep); border-color: var(--bl-accent-diep); color: var(--wit); box-shadow: none; text-transform: none; letter-spacing: 0; }
.zus-horeca .btn--primary:hover, .zus-horeca #main-content .btn--primary:hover { background: var(--bruin); border-color: var(--bruin); transform: none; box-shadow: none; }
/* de afscheurrand van de voet staat onder crème, niet onder groen */
.zus-horeca .voet::before {
  background:
    linear-gradient(135deg, var(--creme) 50%, transparent 50%) 0 0 / 34px 20px repeat-x,
    linear-gradient(225deg, var(--creme) 50%, transparent 50%) 0 0 / 34px 20px repeat-x;
}

/* live-stand: rechte labels in plaats van pillen (alleen op deze pagina; het grote scherm houdt zijn eigen stijl).
   De kleine statusstipjes blijven rond: dat is een lampje, geen knop. */
.bl-pil, .bl-tabel__merk, .bl-partij__bezig, .bl-blokrij__status--bezig, .bl-blokrij__los, .bl-blokrij__jij, .bl-blokbeurt__namen .bl-naam { border-radius: 0; }