/* ==========================================================================
   Patty Bakker — /agenda-overzicht/
   ==========================================================================
   Alleen wat specifiek is voor deze pagina. De kaarten zelf staan in
   pb-event-tegels.css, dat hier als aparte laag bijgeladen wordt.
   ========================================================================== */

/* ==========================================================================
   pb-agenda.css
   Agenda-overzicht: event-list / event-item / date-box / event-copy.
   Laad samen met pb-common.css (die eerst).

   HERSCHREVEN — wat er mis was:
   Elke regel stond twee keer in dit bestand. De eerste versie zette
   `.event-list` op `grid-template-columns:repeat(3,1fr)`, de tweede zette
   alleen `display:grid;gap:9px` zonder kolommen. Omdat die tweede later staat,
   won hij — en viel de hele agenda op desktop terug naar één smalle kolom.
   Dat las als "er mist css", terwijl het bestand gewoon geladen werd.
   ========================================================================== */

.pb-main .event-list{
  display:grid;
  gap:14px 20px;
  /* auto-fit i.p.v. een vast aantal: klopt bij drie events én bij tien. */
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
}

.pb-main .event-item{
  display:grid;
  grid-template-columns:58px 1fr;
  gap:11px;
  align-items:start;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:var(--shadow2);
  padding:9px;
  text-decoration:none;
  transition:transform .28s cubic-bezier(.22,.61,.36,1), box-shadow .28s ease;
}

.pb-main .date-box{
  min-height:58px;
  background:var(--brown);
  color:#fff;
  display:grid;
  place-items:center;
  text-align:center;
  border-radius:var(--r);
  font-weight:850;
  line-height:1;
}

.pb-main .date-box span{display:block;font-size:18px}

.pb-main .date-box small{font-size:10px;letter-spacing:.12em;text-transform:uppercase}

.pb-main .event-copy h3{
  font-family:Fraunces,Georgia,serif;
  font-size:17px;
  line-height:1.15;
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--brown);
  margin:3px 0 4px;
}

.pb-main .event-copy p{
  font-size:12.5px;
  line-height:1.4;
  color:var(--muted);
  margin:0;
}

/* Lege alinea's uit de editor lieten gaten in de kaart vallen. */

.pb-main .event-copy p:empty{display:none}

.pb-main .event-list.home-like{display:grid;gap:8px;padding:0 20px}

@media (hover:hover){
  .pb-main .event-item:hover{
    transform:translateY(-4px);
    box-shadow:0 18px 34px rgba(77,51,34,.16);
  }
}

@media (max-width:767px){
  .pb-main .event-list{grid-template-columns:1fr;gap:9px}
}

@media (prefers-reduced-motion:reduce){
  .pb-main .event-item{transition:none}
}

/* Geen streep onder de hero.
   pb-common.css geeft .page-hero een border-bottom, en dat is precies zo'n
   doorgetrokken lijn tussen secties die hier niet gewenst is. De achtergrond
   van de hero (een lichte gradient) markeert de overgang al genoeg.

   Bewust alleen op deze pagina: .page-hero is een gedeeld onderdeel, dus die
   regel uit pb-common.css halen raakt de hele site. */

.pb-main .page-hero{border-bottom:0}