/* ==========================================================================
   Patty Bakker — de eventkaart (wanneer / waar / wat, tijden, aanmeldknop)
   ==========================================================================
   Hoort bij [pb_event_info] uit inc/pb-events.php.

   Deze kaart stond eerst in pb-event-detail.css, maar hij wordt op twee
   pagina's gebruikt: rechts op de event-detailpagina, en rechts naast het
   formulier op /aanmelden/ (daar met knop="0", want daar is een knop naar
   de aanmeldpagina zinloos). Die twee pagina's laden verschillende
   stylesheets, dus staat de kaart nu op zichzelf en wordt hij op beide
   plekken bijgeladen — beter dan hem op twee plekken onderhouden.

   De breedte van de kaart wordt NIET hier bepaald: op de detailpagina doet
   .pb-ev-top-zij dat, op de aanmeldpagina .pb-aanmeld-top-zij.
   ========================================================================== */

.pb-main .pb-ev-info{
  width:min(1140px, 100%);
  max-width:1140px;
  margin:0 auto;
  padding:clamp(22px, 3vw, 30px);
  border:1px solid var(--line);
  border-radius:var(--img-radius-lg, 18px);
  background:#f6eee7;
}

/* ---- Wanneer / waar / wat ---- */

/* Geen scheidingslijnen in deze kaart.

   Er stond een border-bottom onder .pb-ev-feiten. Omdat het tijdenblok een
   tweede .pb-ev-feiten is, gaf dat twee strepen: een boven "Tijden" en een
   boven de knop. Blokken worden hier gescheiden met ruimte, niet met lijnen -
   dezelfde afspraak als tussen de secties op de pagina's. De padding die er
   eerst was om de streep lucht te geven blijft staan; die is nu de scheiding.

   Met de rand weg kan ook de :last-child-uitzondering weg (die bestond alleen
   om een streep naar niets te voorkomen, bijvoorbeeld bij een BBQ zonder
   dagdelen op de aanmeldpagina). */
.pb-main .pb-ev-feiten{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:18px 28px;
  padding-bottom:20px;
}
.pb-main .pb-ev-feiten:last-child{padding-bottom:0}

.pb-main .pb-ev-feit{display:grid;gap:4px;min-width:0}
.pb-main .pb-ev-feit-label{
  color:var(--accent);
  font-family:Manrope, system-ui, sans-serif;
  font-size:11px;
  font-weight:900;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.pb-main .pb-ev-feit strong{
  color:var(--brown);
  font-family:Fraunces, Georgia, serif;
  font-size:19px;
  font-weight:700;
  line-height:1.2;
  letter-spacing:-.02em;
}

/* ---- Tijden ---- */

.pb-main .pb-ev-kop{
  margin:20px 0 10px;
  color:var(--accent);
  font-family:Manrope, system-ui, sans-serif;
  font-size:11px;
  font-weight:900;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.pb-main .pb-ev-slots{list-style:none;margin:0;padding:0;display:grid;gap:8px}

.pb-main .pb-ev-slot{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:var(--img-radius, 14px);
  background:var(--paper, #fffaf5);
}

.pb-main .pb-ev-slot-naam{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:8px;
  color:var(--brown);
  font-family:Manrope, system-ui, sans-serif;
  font-size:15px;
  font-weight:850;
}
.pb-main .pb-ev-slot-tijd{
  color:var(--muted);
  font-size:13.5px;
  font-weight:700;
}

/* ---- Aanmelden ---- */

.pb-main .pb-ev-actie{margin-top:22px}
.pb-main .pb-ev-hint{
  margin:10px 0 0;
  color:var(--muted);
  font-size:12.5px;
  line-height:1.5;
}
.pb-main .pb-ev-melding{
  margin:0;
  color:var(--muted);
  font-size:14.5px;
  line-height:1.65;
}
.pb-main .pb-ev-melding a{color:var(--accent);font-weight:800}

@media (max-width:767px){
  .pb-main .pb-ev-info{padding:18px}
  .pb-main .pb-ev-feiten{grid-template-columns:1fr;gap:14px}
  .pb-main .pb-ev-feit strong{font-size:17px}
  /* Volle breedte: de knop is hier de hele reden dat je op de pagina bent. */
  .pb-main .pb-ev-actie .cta{width:100%}
}

/* Tijdregel bij een hele-dag-event.
   Zie pb_ev_aanmeldvorm() in inc/pb-events.php: bij een wandeling of BBQ kies
   je geen dagdeel, dus staat de tijd als gewoon gegeven bij de feiten in
   plaats van als keuzelijst. Dit blok staat los onder de andere feiten, dus
   het heeft alleen wat ruimte erboven nodig. */
.pb-main .pb-ev-feiten-tijd{
  /* Geen eigen ruimte erboven: de padding onder .pb-ev-feiten hierboven is al
     de scheiding tussen de feiten en de tijden. */
  padding-top: 0;
}

/* ==========================================================================
   Plekken per dagdeel
   ==========================================================================
   Zie pb_ev_bezet() in inc/pb-events.php. Deze meldingen waren er eerder uit
   omdat ze uit een handmatig bijgehouden getal kwamen en dus niet klopten. Nu
   worden de aanmeldingen echt geteld, en verschijnt er alleen iets als er ook
   iets te zeggen valt: "Vol", of vanaf de laatste drie plekken een aantal.
   ========================================================================== */
.pb-main .pb-ev-slot-vol{
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #b4452f;
  background: #fbece2;
  border-radius: var(--r-pill, 999px);
  padding: 3px 10px;
  white-space: nowrap;
}
.pb-main .pb-ev-slot-over{
  /* Zelfde pil als de oude .pb-ev-plekken had, zodat dit niet als een nieuw
     soort element aanvoelt naast de "Vol"-pil ernaast. */
  flex: 0 0 auto;
  padding: 3px 10px;
  border-radius: var(--r-pill, 999px);
  background: rgba(207, 123, 83, .14);
  color: var(--accent);
  font-family: Manrope, system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 850;
  white-space: nowrap;
}

/* Een vol dagdeel blijft leesbaar maar duidelijk niet meer beschikbaar.
   Niet met opacity op de hele regel: dan wordt de "Vol"-melding zelf ook vaag,
   en juist die moet opvallen. */
.pb-main .pb-ev-slot.is-vol .pb-ev-slot-naam{ color: var(--muted) }
.pb-main .pb-ev-slot.is-vol .pb-ev-slot-tijd{ opacity: .7 }

.pb-main .pb-ev-melding-vol{ color: #b4452f }