/* ==========================================================================
   Patty Bakker — event-tegels (de agendakaarten)
   ==========================================================================
   De kaart, het raster eromheen en de blokkoppen. Hoort bij de shortcodes
   [pb_agenda_overzicht] en [pb_event_andere] uit inc/pb-events.php.

   Stond eerst in pb-agenda.css, maar wordt inmiddels op drie plekken
   gebruikt: /agenda-overzicht/, onderaan een event-detailpagina en op
   /workshops/. Die pagina's laden verschillende paginabestanden.

   Los bestand omdat pb-agenda.css ook de OUDE loop-opmaak bevat
   (.event-item, .event-list, .date-box) en die op zeven punten afwijkt van
   dezelfde selectors in pb-workshops.css. Dat hele bestand bijladen zou de
   loop op /workshops/ dus herstylen; alleen de tegels meenemen niet.
   ========================================================================== */

/* ==========================================================================
   Agenda per categorie — [pb_agenda_overzicht]
   Hoort bij inc/pb-events.php.
   ========================================================================== */

.pb-main .pb-ev-agenda{
  width:min(1140px, 100%);
  max-width:1140px;
  margin:0 auto;
}

/* ---- Groepen ---- */

.pb-main .pb-ev-groep{
  /* Ruimte boven het anker, anders schuift de kop onder de vaste header. */
  scroll-margin-top:88px;
}

.pb-main .pb-ev-groep + .pb-ev-groep{margin-top:clamp(40px, 5vw, 64px)}

/* De kop was een losse h2. Nu staat er een regel onder die uitlegt voor wie
   het blok bedoeld is - dat is precies het onderscheid dat de twee blokken
   maken, en zonder die regel moet de bezoeker het uit de events afleiden.

   Geen streep eronder: die scheidt de kop juist van de kaarten die erbij
   horen. Witruimte doet het werk - ruim boven het blok, krap eronder, zodat
   de kop bij zijn eigen kaarten hoort. */

.pb-main .pb-ev-groep-kop{
  margin:0 0 20px;
}

.pb-main .pb-ev-groep-kop h2{
  margin:0;
  color:var(--brown);
  font-family:Fraunces, Georgia, serif;
  font-size:clamp(24px, 2.6vw, 32px);
  font-weight:700;
  line-height:1.1;
  letter-spacing:-.03em;
}

.pb-main .pb-ev-groep-kop p{
  margin:6px 0 0;
  max-width:56ch;
  color:var(--muted);
  font-size:14px;
  line-height:1.55;
}

.pb-main .pb-ev-lijst{
  display:grid;
  /* auto-FILL, niet auto-fit. auto-fit klapt de lege kolommen weg, waardoor
     een categorie met een enkel event een kaart van de volle 1140px kreeg -
     tien keer zo groot als diezelfde kaart in een rijtje van drie. auto-fill
     laat de lege kolommen staan, dus een losse kaart houdt gewoon de maat
     die hij naast anderen ook zou hebben.

     300px i.p.v. 280px zodat er op 1140px precies drie kolommen passen
     (3 x 300 + 2 x 14 = 928, vier zou 1242 vragen) en niet vier smalle.

     min() erbij als vangnet: onder ~330px viewport zou de track 300px blijven
     eisen terwijl er minder ruimte is, en dan loopt het raster buiten beeld. */
  grid-template-columns:repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap:14px;
}

/* ---- Kaart ---- */

.pb-main .pb-ev-kaart{
  position:relative;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--img-radius-lg, 18px);
  background:var(--paper, #fffaf5);
  text-decoration:none;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.pb-main .pb-ev-kaart.is-vol{opacity:.72}

.pb-main .pb-ev-kaart-foto{
  display:block;
  width:100%;
  aspect-ratio:16 / 10;
  object-fit:cover;
}

/* De datum als vlag over de foto — een datum onder de titel verdwijnt te
   makkelijk in de tekst. */

.pb-main .pb-ev-kaart .pb-ev-datum{
  position:absolute;
  top:12px;
  left:12px;
  z-index:2;
  display:grid;
  place-items:center;
  min-width:52px;
  padding:7px 9px;
  border-radius:12px;
  background:var(--brown);
  color:#fff;
  line-height:1;
  box-shadow:0 6px 16px rgba(38, 27, 20, .28);
}

.pb-main .pb-ev-kaart .pb-ev-datum b{font-size:19px;font-weight:900}

.pb-main .pb-ev-kaart .pb-ev-datum small{
  font-size:10px;
  letter-spacing:.1em;
  text-transform:uppercase;
  opacity:.85;
}

.pb-main .pb-ev-kaart-copy{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  padding:16px 18px 18px;
}

.pb-main .pb-ev-kaart-copy strong{
  color:var(--brown);
  font-family:Fraunces, Georgia, serif;
  font-size:20px;
  font-weight:700;
  line-height:1.14;
  letter-spacing:-.02em;
}

.pb-main .pb-ev-kaart-tijden{
  margin-top:6px;
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
}

.pb-main .pb-ev-kaart-link{
  margin-top:auto;
  padding-top:14px;
  color:var(--brown);
  font-family:Manrope, system-ui, sans-serif;
  font-size:12.5px;
  font-weight:850;
}

@media (hover:hover){
  .pb-main .pb-ev-kaart:hover{
    transform:translateY(-4px);
    box-shadow:0 18px 34px rgba(77, 51, 34, .16);
    border-color:var(--accent);
  }
  .pb-main .pb-ev-kaart:hover .pb-ev-kaart-link{color:var(--accent)}
}

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

/* De categorie op de kaart. Stond eerst als kop boven een eigen blokje; nu de
   agenda in twee blokken is verdeeld hoort hij hier, zodat je binnen "Voor
   onze gastgezinnen" een BBQ van een wandeling kunt onderscheiden. */

.pb-main .pb-ev-kaart-soort{
  display:block;
  margin-bottom:5px;
  color:var(--accent);
  font-family:Manrope, system-ui, sans-serif;
  font-size:10px;
  font-weight:900;
  letter-spacing:.13em;
  text-transform:uppercase;
}

/* Kaart zonder uitgelichte afbeelding.
   De datumvlag ligt normaal over de foto (position:absolute). Is er geen foto,
   dan viel hij boven op de titel. Dan laten we hem gewoon meelopen in de
   kaart, met dezelfde ruimte eromheen als de rest van de tekst. */

.pb-main .pb-ev-kaart.is-zonder-foto .pb-ev-datum{
  position:static;
  /* De kaart is een flexbox, geen grid: justify-self doet daar niets en de
     vlag rekte over de volle kaartbreedte. align-self is de flex-variant. */
  align-self:flex-start;
  justify-self:start;
  margin:14px 14px 0;
  box-shadow:none;
}

.pb-main .pb-ev-kaart.is-zonder-foto .pb-ev-kaart-copy{padding-top:10px}

/* Terug naar de hele agenda, onder een gefilterd blok. Geen knop: dit is een
   uitweg, geen actie die je wilt aanmoedigen. */

.pb-main .pb-ev-terug{
  margin:26px 0 0;
  font-family:Manrope, system-ui, sans-serif;
  font-size:14px;
}

.pb-main .pb-ev-terug a{
  color:var(--brown);
  font-weight:800;
  text-decoration:none;
  border-bottom:2px solid var(--accent);
  padding-bottom:2px;
}

.pb-main .pb-ev-terug a:hover{color:var(--accent)}