/* ==========================================================================
   wsc-agenda — opmaak van de agendarijen en de detailpagina.
   Alles via de tokens uit wsc-core, zodat een thema de module meekleurt
   zonder dat hier iets aangepast hoeft te worden.
   ========================================================================== */

.wsc-agenda__groep + .wsc-agenda__groep { margin-top: 28px; }

.wsc-theme .wsc-agenda__maand {
  font-family: var(--wsc-font-head);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--wsc-ink-3);
  margin: 0 0 10px;
}

/* De rij: datum, titel, plaats, vlag, actie. De middelste kolom krimpt, de rest
   houdt zijn maat.
   
   Let op de laatste kolom: die stond op auto, en omdat elke rij zijn eigen
   raster is werd die per rij anders. Een rij zonder ticketknop kreeg daar nul
   breedte, waardoor de vlag en de plaats naar rechts opschoven en de kolommen
   niet meer onder elkaar stonden. Een vaste maat lost dat op, breed genoeg voor
   het langste label ("Sold out"). */
.wsc-gigrij {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) 190px 34px 92px;
  align-items: center;
  gap: 16px;
  padding: 12px 8px;
  border-bottom: 1px solid var(--wsc-line);
  transition: background .15s ease;
}
.wsc-gigrij:hover { background: var(--wsc-accent-bg); }

.wsc-gigrij__datum {
  font-family: var(--wsc-font-head);
  font-weight: 700;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.wsc-theme .wsc-gigrij__titel {
  font-family: var(--wsc-font-head);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-wrap: pretty;
  text-decoration: none;
  color: inherit;
  display: flex;
  align-items: center;
  min-height: 44px;
}
.wsc-theme a.wsc-gigrij__titel:hover { text-decoration: underline; text-underline-offset: 4px; }

.wsc-gigrij__plaats {
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--wsc-ink-2);
}
.wsc-gigrij__vlag { font-size: 20px; line-height: 1; }
/* Rechts uitgelijnd, zodat de labels onder elkaar op dezelfde rand eindigen
   en een lege cel geen gat maakt dat opvalt. */
.wsc-gigrij__actie { display: flex; justify-content: flex-end; }

.wsc-theme .wsc-gigrij__tix {
  font-family: var(--wsc-font-head);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 4px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.wsc-theme .wsc-gigrij__tix:hover { text-decoration-thickness: 3px; }
.wsc-theme .wsc-gigrij__tix--uit { text-decoration: none; opacity: .7; cursor: default; }

.wsc-agenda__meer { margin-top: 26px; }

/* Lege staat: geen lege lijst maar een uitnodiging. */
.wsc-agenda__leeg {
  text-align: center;
  padding: clamp(24px, 5vw, 44px) 18px;
  border: 1px solid var(--wsc-line-2);
}
.wsc-theme .wsc-agenda__leeg-kop {
  font-family: var(--wsc-font-head);
  font-weight: 700;
  font-size: 22px;
  margin: 0 0 8px;
}
.wsc-agenda__leeg .wsc-btn { margin-top: 14px; }

/* Alleen voor schermlezers — de landnaam achter de vlagemoji. */
.wsc-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------- Detailpagina ------------------------------------------------ */
.wsc-theme .wsc-agenda__terug { margin: 0 0 22px; font-size: 14px; }
.wsc-gig__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 52px);
  align-items: start;
}
.wsc-theme .wsc-gig__plaats {
  font-family: var(--wsc-font-head);
  font-weight: 700;
  font-size: 20px;
  margin: 0 0 18px;
}
.wsc-gig__acties { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 26px; }
.wsc-theme .wsc-gig__p { max-width: 62ch; margin: 0 0 14px; }
.wsc-theme .wsc-gig__kop {
  font-family: var(--wsc-font-head);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: 28px 0 12px;
}
.wsc-gig__lineup { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.wsc-gig__galerij {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}
/* height:auto is hier geen overbodige regel. De WebP-laag van seo_signaal
   zet width en height als attribuut op elke <img>. Zo'n hoogte-attribuut
   telt als presentational hint en wint van aspect-ratio, waardoor het
   beeld zijn volle bronhoogte aanneemt: een foto van 1600x1200 werd in een
   kolom van 177 px een strook van 1200 px hoog. */
.wsc-gig__galerij img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; display: block; }

/* De foto's in de galerij zitten in een knop, zodat klikken ze vergroot en de
   toetsenbordgebruiker er ook bij kan. Een knop brengt zijn eigen rand,
   achtergrond en padding mee; die halen we hier weg. */
.wsc-gig__foto {
  display: block; width: 100%; padding: 0; border: 0;
  background: none; cursor: zoom-in; line-height: 0;
}
.wsc-gig__foto:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }


.wsc-gig__header { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; display: block; margin-bottom: 18px; }
.wsc-gig__feiten {
  margin: 0;
  display: grid;
  gap: 14px;
  border: 1px solid var(--wsc-line-2);
  padding: 18px;
}
.wsc-gig__feiten dt {
  font-family: var(--wsc-font-head);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--wsc-ink-3);
  margin-bottom: 4px;
}
.wsc-theme .wsc-gig__feiten dd { margin: 0; font-size: 16px; }

@media (max-width: 820px) {
  /* Op mobiel valt de plaats onder de titel; datum en ticketknop blijven op
     één regel staan, want daar scant een bezoeker op. */
.wsc-gigrij { grid-template-columns: 62px minmax(0, 1fr) 92px; row-gap: 4px; }
.wsc-gigrij__plaats { grid-column: 2 / 4; }
.wsc-gig__grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Kop met beeld erachter. Alleen actief als er een beeld is ingesteld; zonder
   beeld blijft de kop de gewone band. De hoogte groeit met de viewport maar
   blijft begrensd, zodat de eerste gigs niet onder de vouw verdwijnen.
   -------------------------------------------------------------------------- */
.wsc-agenda-kop { position: relative; overflow: hidden; }

.wsc-agenda-kop__beeld {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
}

.wsc-agenda-kop__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.45) 60%, rgba(0,0,0,.7) 100%);
}

.wsc-agenda-kop__inhoud {
  position: relative;
  min-height: clamp(280px, 34vw, 440px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}