/* =========================================================
   Kornuiten – Maandagenda
   Poster-hero + archiefgrid + lightbox.
   Mobile-first, gebruikt uitsluitend thema design tokens.
========================================================= */

.kornuiten-maandagenda {
  width: min(1250px, calc(100% - 2 * clamp(20px, 4vw, 48px)));
  margin-inline: auto;

  /* .ls-shortcode-section heeft zelf geen padding — anders plakt de
     agenda tegen de hero erboven en de donkere sectie eronder.
     Zelfde ritme als .section-md uit het thema. */
  padding-top: calc(var(--ls-section-md, 96px) * 1.1);
  padding-bottom: calc(var(--ls-section-md, 96px) * 0.9);
}

/* =========================================================
   Hero
========================================================= */

.kornuiten-maandagenda-hero {
  display: grid;
  gap: clamp(28px, 5vw, 56px);
}

.kornuiten-maandagenda-hero__media {
  min-width: 0;
}

.kornuiten-maandagenda-hero__image {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-elevated);
}

.kornuiten-maandagenda-hero__content {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.kornuiten-maandagenda-hero__title {
  margin: 0 0 16px;
}

.kornuiten-maandagenda__eyebrow {
  margin: 0 0 12px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-secondary);
}

.kornuiten-maandagenda__accent-line {
  display: block;
  width: 40px;
  height: 4px;
  margin-bottom: 20px;
  background-color: var(--color-primary);
}

/* Geen programmatekst: poster gecentreerd/breder, geen halflege kolom */
.kornuiten-maandagenda-hero--no-program .kornuiten-maandagenda-hero__media {
  max-width: 520px;
  margin-inline: auto;
}

.kornuiten-maandagenda-hero--no-program .kornuiten-maandagenda-hero__content {
  align-items: center;
  text-align: center;
}

.kornuiten-maandagenda-hero--no-program .kornuiten-maandagenda__accent-line {
  margin-inline: auto;
}

/* Poster naast het programma pas vanaf 1100px: daar past het programma
   in twee kolommen en komen de hoogtes ongeveer overeen. Daaronder zou
   één smalle kolom tekst veel hoger worden dan de poster, dus stapelen. */
@media (min-width: 1100px) {
  .kornuiten-maandagenda-hero {
    grid-template-columns: 0.85fr 1.15fr;
    align-items: center;
  }

  .kornuiten-maandagenda-hero--no-program,
  .kornuiten-maandagenda-hero--no-image {
    grid-template-columns: 1fr;
  }
}

/* Poster zonder programma mag ook op middelgrote schermen groter */
@media (min-width: 900px) {
  .kornuiten-maandagenda-hero--no-program .kornuiten-maandagenda-hero__media {
    max-width: 620px;
  }
}

/* Gestapeld (onder 1100px): poster gecentreerd, niet over de volle breedte */
@media (max-width: 1099px) {
  .kornuiten-maandagenda-hero__media {
    max-width: 520px;
    margin-inline: auto;
  }
}

/* =========================================================
   Programma (gedeeld tussen hero en lightbox)
========================================================= */

.kornuiten-maandagenda__program p {
  margin: 0 0 14px;
}

.kornuiten-maandagenda__program p:last-child {
  margin-bottom: 0;
}

.kornuiten-maandagenda__week {
  margin: 24px 0 10px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-inverted-muted);
}

.kornuiten-maandagenda__week:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.kornuiten-maandagenda__list {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
}

.kornuiten-maandagenda__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-body);
}

.kornuiten-maandagenda__item:last-child {
  border-bottom: 0;
}

.kornuiten-maandagenda__daydate {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.kornuiten-maandagenda__day {
  font-weight: 700;
  color: var(--color-primary);
}

.kornuiten-maandagenda__date {
  color: var(--color-inverted-muted);
}

.kornuiten-maandagenda__desc {
  color: var(--color-inverted);
}

@media (min-width: 600px) {
  .kornuiten-maandagenda__item {
    display: grid;
    /* Bovengrens zodat een lang bereik ("2/7 t/m zaterdag 4/7") wrapt
       in plaats van de kolom voor álle regels breed te trekken. */
    grid-template-columns: minmax(120px, 170px) 1fr;
    gap: clamp(12px, 2vw, 24px);
    align-items: baseline;
  }
}

/* =========================================================
   Hero-programma in twee kolommen (vanaf 1100px)
   Houdt het programma naast de poster in plaats van eronder
   door te schieten. Onder 1100px zijn de kolommen te smal.
========================================================= */

@media (min-width: 1100px) {

  .kornuiten-maandagenda-hero .kornuiten-maandagenda__program {
    columns: 2;
    column-gap: clamp(24px, 2.5vw, 36px);
    orphans: 2;
    widows: 2;
  }

  /* Een week blijft altijd in één kolom */
  .kornuiten-maandagenda-hero .kornuiten-maandagenda__week-block {
    break-inside: avoid;
    page-break-inside: avoid; /* Safari */
    margin-bottom: 16px;
  }

  .kornuiten-maandagenda-hero .kornuiten-maandagenda__week-block:last-child {
    margin-bottom: 0;
  }

  /* In een smalle kolom past geen dag/omschrijving-grid: stapelen */
  .kornuiten-maandagenda-hero .kornuiten-maandagenda__item {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 7px 0;
    font-size: 15px;
    line-height: 1.45;
  }

  .kornuiten-maandagenda-hero .kornuiten-maandagenda__list {
    margin-bottom: 0;
  }

  .kornuiten-maandagenda-hero .kornuiten-maandagenda__week {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }
}

/* =========================================================
   Archief
========================================================= */

.kornuiten-maandagenda-archive {
  margin-top: var(--ls-section-sm);
}

.kornuiten-maandagenda-archive__title {
  margin: 0 0 clamp(20px, 3vw, 32px);
}

.kornuiten-maandagenda-archive__grid {
  display: grid;
  /* Mobiel: twee posters naast elkaar — anders wordt het archief
     een eindeloze kolom van volledige posters. */
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: clamp(16px, 2vw, 28px);
}

@media (min-width: 600px) {
  .kornuiten-maandagenda-archive__grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }
}

.kornuiten-maandagenda-archive__tile-wrap.is-hidden {
  display: none;
}

.kornuiten-maandagenda-archive__actions {
  display: flex;
  justify-content: center;
  margin-top: clamp(24px, 4vw, 40px);
}

.kornuiten-maandagenda-tile {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
  font: inherit;
  border-radius: var(--radius-md);
}

.kornuiten-maandagenda-tile__media {
  display: block;
}

.kornuiten-maandagenda-tile__image {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  transition:
    box-shadow var(--dur-base) var(--ease-soft),
    transform var(--dur-base) var(--ease-soft);
}

.kornuiten-maandagenda-tile:hover .kornuiten-maandagenda-tile__image {
  transform: translateY(-4px);
  box-shadow: var(--shadow-elevated);
}

.kornuiten-maandagenda-tile__label {
  margin-top: 12px;
  font-family: var(--font-body);
  font-size: clamp(14px, 1.1vw, 16px);
  font-weight: 600;
  color: var(--color-inverted);
}

/* =========================================================
   Lightbox
========================================================= */

.kornuiten-maandagenda-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: var(--z-modal, 1000);
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 40px);
}

.kornuiten-maandagenda-lightbox:not([hidden]) {
  display: flex;
}

.kornuiten-maandagenda-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .6);
}

.kornuiten-maandagenda-lightbox__dialog {
  position: relative;
  z-index: 1;
  width: min(900px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-elevated);
  padding: clamp(24px, 4vw, 48px);
  animation: kornuiten-maandagenda-lightbox-in var(--dur-base) var(--ease-soft);
}

@keyframes kornuiten-maandagenda-lightbox-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.kornuiten-maandagenda-lightbox__close {
  position: absolute;
  top: clamp(12px, 2vw, 20px);
  right: clamp(12px, 2vw, 20px);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--color-surface-alt);
  color: var(--color-inverted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.kornuiten-maandagenda-lightbox__inner {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3vw, 32px);
}

.kornuiten-maandagenda-lightbox__image {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

.kornuiten-maandagenda-lightbox__title {
  margin: 0 0 16px;
}

@media (min-width: 700px) {
  .kornuiten-maandagenda-lightbox__inner {
    flex-direction: row;
    align-items: flex-start;
  }

  .kornuiten-maandagenda-lightbox__image {
    width: 40%;
    flex: 0 0 40%;
  }

  .kornuiten-maandagenda-lightbox__text {
    flex: 1 1 auto;
    min-width: 0;
  }
}

body.kornuiten-maandagenda-lock-scroll {
  overflow: hidden;
}

/* =========================================================
   Reduced motion
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .kornuiten-maandagenda-tile__image,
  .kornuiten-maandagenda-lightbox__dialog {
    transition: none;
    animation: none;
  }
}