/* Agenda "kijkje" (voorstel 15/10/2026). Zelfde taal als de site: papier, inkt-rand, Syne-koppen,
   tagkleur als accent, en de ticket-onderkant van het Praktisch-blok (optie 2, gekozen door Sune 12/10). */
.kijkje {
  --tagc: var(--color-orange); --tagsoft: var(--color-orange-soft);
  position: fixed; z-index: 60; width: 340px; max-width: calc(100vw - 16px);
  background: var(--color-paper); color: var(--color-ink);
  border: 3px solid var(--color-ink); border-radius: var(--radius-md);
  box-shadow: 6px 6px 0 var(--color-ink);
  padding: 14px 16px 12px; cursor: pointer;
  opacity: 0; transform: translateY(6px) scale(.98); pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.kijkje.is-open { opacity: 1; transform: none; pointer-events: auto; }
.kijkje[data-tag="Workshop"], .kijkje[data-tag="Muziek"], .kijkje[data-tag="Kinderen"] { --tagc: var(--color-pink); --tagsoft: var(--color-pink-soft); }
.kijkje[data-tag="Inloop"] { --tagc: var(--color-green); --tagsoft: var(--color-green-soft); }
.kijkje[data-tag="Activiteit"] { --tagc: var(--color-orange); --tagsoft: var(--color-orange-soft); }
.kijkje[data-tag="Eten"] { --tagc: var(--color-orange); --tagsoft: var(--color-orange-soft); }

.kijkje__kop { display: flex; gap: 12px; align-items: flex-start; }
.kijkje__poster { flex: none; width: 64px; height: 80px; object-fit: cover; border: 2px solid var(--color-ink); border-radius: 8px; background: var(--color-paper-2); }
.kijkje__koptekst { min-width: 0; }
.kijkje__tag { display: inline-block; font-size: var(--text-xs); font-weight: var(--weight-med); text-transform: uppercase; letter-spacing: .06em; color: var(--tagc); }
.kijkje[data-tag="Inloop"] .kijkje__tag { color: oklch(0.52 0.13 138); }
.kijkje__titel { display: block; margin-top: 2px; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; line-height: 1.15; text-wrap: balance; }
.kijkje__tekst { margin: 10px 0 0; font-size: var(--text-sm); line-height: 1.45; color: var(--color-ink-soft);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ticket: twee vakken met een stippel-perforatie en een inkeping bovenin */
.kijkje__ticket { position: relative; display: grid; grid-template-columns: 1fr 1fr; margin-top: 12px;
  border: 2px solid var(--color-ink); border-radius: 10px; overflow: hidden; }
.kijkje__ticket > div { padding: 8px 10px; min-width: 0; }
.kijkje__ticket > div + div { background: var(--tagsoft); border-left: 2px dashed var(--color-ink); }
.kijkje__ticket::before { content: ""; position: absolute; left: 50%; top: -7px; width: 12px; height: 12px; margin-left: -6px;
  border-radius: 50%; background: var(--color-paper); border: 2px solid var(--color-ink); }
.kijkje__label { display: block; font-size: var(--text-xs); color: var(--color-ink-soft); }
.kijkje__tijd, .kijkje__prijs { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; line-height: 1.25; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kijkje__prijs.is-lang { white-space: normal; }
.kijkje__prijs.is-lang { font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--weight-med); line-height: 1.3; }

.kijkje__ook { margin-top: 10px; padding-top: 8px; border-top: var(--rule) solid var(--color-line); font-size: var(--text-xs); }
.kijkje__ookrij { display: block; color: inherit; text-decoration: none; border-radius: 6px; padding: 2px 4px; margin-left: -4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.kijkje__ookrij b { font-variant-numeric: tabular-nums; }
a.kijkje__ookrij:hover, a.kijkje__ookrij:focus-visible { background: var(--tagsoft); text-decoration: underline; text-underline-offset: 2px; }
a.kijkje__ookrij::after { content: " →"; opacity: .5; }
.kijkje__cta { display: inline-flex; gap: 6px; margin-top: 10px; font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm); color: var(--color-blue);
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.kijkje:hover .kijkje__cta span { transform: translateX(3px); }
.kijkje__cta span { transition: transform var(--dur-fast) var(--ease-out); }

/* "wat gebeurt er tegelijk": in week/maand de rest zachter, het event + overlap blijven vol */
#eventList.is-kijkje .vev, #eventList.is-kijkje .cal-ev:not(.cal-ev--soft) { transition: opacity var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
#eventList.is-kijkje .vev[data-key]:not(.is-kijkje-hoofd):not(.is-kijkje-mee),
#eventList.is-kijkje .cal-ev[data-key]:not(.is-kijkje-hoofd):not(.is-kijkje-mee) { opacity: .35; }
/* event onder de muis: alleen een effen inktschaduw (sticker), het rooster zelf verschuift NIET.
   Zo blijven alle events in een stapel aanwijsbaar (Nick 15/10); de verstopte open je via "Tegelijk". */
#eventList .vev.is-kijkje-hoofd { box-shadow: 3px 3px 0 var(--color-ink); }
#eventList .cal-ev.is-kijkje-hoofd { box-shadow: 2px 2px 0 var(--color-ink); }

@media (prefers-reduced-motion: reduce) { .kijkje { transition: none; transform: none; } }

/* ---------- MOBIEL: dagstrook (bottom sheet) ---------- */
.dagstrook { position: fixed; inset: 0; z-index: 80; pointer-events: none; }
.dagstrook__achter { position: absolute; inset: 0; background: oklch(0.29 0.006 350 / 0.45); opacity: 0;
  transition: opacity var(--dur-mid) var(--ease-out); }
.dagstrook__vel { position: absolute; left: 0; right: 0; bottom: 0; max-height: 78vh; overflow-y: auto; overscroll-behavior: contain;
  background: var(--color-paper); border-top: 3px solid var(--color-ink); border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: 8px 16px calc(16px + env(safe-area-inset-bottom)); transform: translateY(100%);
  transition: transform var(--dur-mid) var(--ease-out); outline: none; }
.dagstrook.is-open { pointer-events: auto; }
.dagstrook.is-open .dagstrook__achter { opacity: 1; }
.dagstrook.is-open .dagstrook__vel { transform: none; }
html.dagstrook-open, html.dagstrook-open body { overflow: hidden; }
.dagstrook__greep { width: 44px; height: 5px; border-radius: 99px; background: var(--color-line); margin: 2px auto 10px; }
.dagstrook__kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.dagstrook__sub { display: block; font-size: var(--text-xs); font-weight: var(--weight-med); text-transform: uppercase; letter-spacing: .06em; color: var(--color-orange); }
.dagstrook__titel { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; line-height: 1.15; }
.dagstrook__dicht { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--color-ink); background: var(--color-paper); font-size: 1rem; color: var(--color-ink); }
.dagstrook__lijst { display: grid; gap: 10px; }
.dagstrook__regel { --tagc: var(--color-orange); --tagsoft: var(--color-orange-soft);
  display: grid; grid-template-columns: 64px 1fr auto; align-items: stretch; min-height: 64px;
  border: 2px solid var(--color-ink); border-radius: 12px; overflow: hidden; color: var(--color-ink); text-decoration: none; background: var(--color-paper); }
.dagstrook__regel[data-tag="Workshop"], .dagstrook__regel[data-tag="Muziek"], .dagstrook__regel[data-tag="Kinderen"] { --tagc: var(--color-pink); --tagsoft: var(--color-pink-soft); }
.dagstrook__regel[data-tag="Inloop"] { --tagc: var(--color-green); --tagsoft: var(--color-green-soft); }
.dagstrook__regel:active { background: var(--tagsoft); }
.dagstrook__tijd { display: flex; flex-direction: column; justify-content: center; align-items: center; background: var(--tagsoft);
  border-right: 2px dashed var(--color-ink); font-family: var(--font-display); font-weight: 700; font-size: 1rem; font-variant-numeric: tabular-nums; }
.dagstrook__tijd small { font-family: var(--font-body); font-weight: 400; font-size: var(--text-xs); color: var(--color-ink-soft); }
.dagstrook__info { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 8px 10px; min-width: 0; }
.dagstrook__info b { font-family: var(--font-display); font-size: 1rem; line-height: 1.2; }
.dagstrook__info span { font-size: var(--text-xs); color: var(--color-ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dagstrook__pijl { display: flex; align-items: center; padding: 0 14px; font-family: var(--font-display); font-weight: 700; color: var(--color-blue); }
.cal-cell[data-date] { cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .dagstrook__vel, .dagstrook__achter { transition: none; } }