/* ===== Agenda-lichtkrant =====
   De balk met komende events direct onder de hero, op index.html en en.html.
   Staat bewust niet in styles.css: dan zou de cachebust van alle 27 pagina's
   mee omhoog moeten voor een balk die op twee pagina's staat.

   De rij staat stil bij hover, bij focus met het toetsenbord en met de
   pauzeknop rechts. Label en pauzeknop lijnen uit met de kolom van de pagina,
   zodat de balk bij de hero hoort. */
.lichtkrant {
  --lk-bg: var(--taupe);
  --lk-ink: var(--navy-deep);
  --lk-zacht: rgba(15, 29, 48, 0.82);
  --lk-golf: rgba(15, 29, 48, 0.4);
  display: flex;
  align-items: stretch;
  height: 52px;
  background: var(--lk-bg);
  color: var(--lk-ink);
  font-weight: 400;
  scroll-margin-top: 120px;
}
.lichtkrant[hidden] { display: none; }

.lichtkrant-label {
  flex: none;
  display: flex;
  align-items: center;
  padding: 0.2em 0 0 max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
  font-family: var(--font-logo);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1;
}
.lichtkrant-label::after {
  content: "";
  width: 1px;
  height: 18px;
  margin: -0.2em 0 0 20px;
  background: var(--lk-golf);
}

.lichtkrant-venster {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22px, #000 calc(100% - 44px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 22px, #000 calc(100% - 44px), transparent 100%);
}
.lichtkrant-rij {
  display: flex;
  width: max-content;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: lichtkrant-loop var(--lk-duur, 40s) linear infinite;
}
@keyframes lichtkrant-loop { to { transform: translateX(-50%); } }
.lichtkrant-venster:hover .lichtkrant-rij,
.lichtkrant-venster:focus-within .lichtkrant-rij,
.lichtkrant.is-stil .lichtkrant-rij { animation-play-state: paused; }

.lichtkrant-rij li { display: flex; align-items: center; margin: 0; }
/* Het golfje uit het logo als scheiding, ook achter het laatste item, zodat
   de naad van de lus even breed is als elke andere tussenruimte. */
.lichtkrant-rij li::after {
  content: "";
  flex: none;
  width: 22px;
  height: 9px;
  background: var(--lk-golf);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-16 -16 232 92'%3E%3Cpath d='M0 30 C 33 2, 66 2, 100 30 S 166 58, 200 30' fill='none' stroke='%23000' stroke-width='24' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-16 -16 232 92'%3E%3Cpath d='M0 30 C 33 2, 66 2, 100 30 S 166 58, 200 30' fill='none' stroke='%23000' stroke-width='24' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Een event zonder uitlegpagina is geen link maar een span, dus er staat
   nooit een pijl die nergens heen gaat. */
.lk-item {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 100%;
  padding: 0 26px;
  color: var(--lk-ink);
  text-decoration: none;
  white-space: nowrap;
}
a.lk-item:hover { color: var(--lk-ink); }
a.lk-item:hover .lk-titel { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
a.lk-item:hover .lk-pijl { transform: translateX(3px); }
a.lk-item:focus-visible { outline: 2px solid var(--lk-ink); outline-offset: -8px; border-radius: var(--radius-pill); }

.lk-datum {
  font-family: var(--font-logo);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1;
  padding-top: 0.2em;
}
.lk-titel { font-size: 0.92rem; font-weight: 500; line-height: 1; }
.lk-plek { font-size: 0.92rem; line-height: 1; color: var(--lk-zacht); }
.lk-pijl { flex: none; width: 14px; height: 14px; transition: transform 0.25s ease; }

.lichtkrant-knop {
  flex: none;
  display: grid;
  place-items: center;
  width: 52px;
  margin-right: max(0px, calc((100% - var(--container)) / 2 + var(--gutter) - 19px));
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--lk-ink);
  cursor: pointer;
}
.lichtkrant-knop svg { width: 14px; height: 14px; }
.lichtkrant-knop .ik-speel,
.lichtkrant.is-stil .lichtkrant-knop .ik-pauze { display: none; }
.lichtkrant.is-stil .lichtkrant-knop .ik-speel { display: block; }
.lichtkrant-knop:focus-visible { outline: 2px solid var(--lk-ink); outline-offset: -12px; border-radius: 50%; }

/* De regel in de hero met het eerstvolgende event (alleen op de homepage).
   Geen knop, zodat de twee routes erboven hun gewicht houden. */
.hero-agenda {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: 26px;
  color: var(--cream);
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.4;
  text-decoration: none;
}
.hero-agenda[hidden] { display: none; }
.hero-agenda:hover { color: var(--cream); }
.hero-agenda .lk-datum { color: var(--taupe); }
.hero-agenda .ha-tekst { padding-bottom: 2px; border-bottom: 1px solid rgba(181, 168, 152, 0.55); }
.hero-agenda:hover .ha-tekst { border-bottom-color: var(--cream); }
.hero-agenda .lk-pijl { color: var(--taupe); }
.hero-agenda:hover .lk-pijl { transform: translateX(3px); }

@media (max-width: 620px) {
  .lichtkrant { height: 48px; }
  /* Het label kost op een telefoon een derde van de breedte en de datum in
     het item zegt hetzelfde. Weg ermee, dan past er een heel event in beeld. */
  .lichtkrant-label { display: none; }
  .lichtkrant-venster {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 36px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 36px), transparent 100%);
  }
  .lk-item { gap: 9px; padding: 0 18px; }
  .lk-titel, .lk-plek { font-size: 0.86rem; }
  .lichtkrant-knop { width: 44px; }
}

/* De site zet bij "verminder beweging" alle animaties uit. Dan staat de rij
   stil, zonder kopieen, en veeg of scroll je hem zelf opzij. */
@media (prefers-reduced-motion: reduce) {
  .lichtkrant-venster { overflow-x: auto; scrollbar-width: none; -webkit-mask-image: none; mask-image: none; }
  .lichtkrant-venster::-webkit-scrollbar { display: none; }
  .lichtkrant-rij [data-kopie] { display: none; }
  .lichtkrant-knop { display: none; }
}