/* ==========================================================================
   pb-event-detail.css
   Event detail (event-detail.html) — PAGINA-CONTENT only (geen header/footer).
   Alleen classes die NIET in pb-common.css staan:
     photo-strip · event-line/event-date · update-section/-row/-card/-text.
   (page-hero, eyebrow, h2, section, flush, section-head, more, cta, label
    komen uit pb-common.css — daar hier NIETS voor herschreven.)

   DESKTOP-FIRST: desktop = default (geen media query); alleen de mobiele
   afwijking (update-row → 1 kolom) staat in @media (max-width:767px).
   Link volgorde op de pagina: pb-common.css EERST, daarna pb-event-detail.css.
   ========================================================================== */

/* --- Foto-strip (horizontale scroller, identiek op alle breedtes) --------- */

.pb-main .photo-strip{display:flex;gap:8px;overflow-x:auto;padding-top:0;padding-right:18px;padding-bottom:8px;padding-left:18px;scroll-snap-type:x mandatory}

.pb-main .photo-strip img{min-width:58%;height:155px;object-fit:cover;border-radius:var(--r);box-shadow:var(--shadow2);scroll-snap-align:start}

.pb-main .photo-strip img:first-child{margin-left:0}

/* --- Event-regel (uit components.css `main .event-*`, !important-winnaars;
       geen responsive afwijking) ---------------------------------------- */

.pb-main .event-line{display:grid;grid-template-columns:58px 1fr;gap:11px;background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow2);padding-top:9px;padding-right:9px;padding-bottom:9px;padding-left:9px}

.pb-main .event-date{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 .event-date b{display:block;font-size:18px}

.pb-main .event-date span{display:block;font-size:10px;letter-spacing:.12em;text-transform:uppercase}

.pb-main .event-line h3{font-family:Manrope,system-ui,sans-serif;font-size:16px;line-height:1.15;margin-top:3px;margin-right:0;margin-bottom:4px;margin-left:0;color:var(--brown);font-weight:850}

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

.pb-main .photo-strip{display:flex;gap:8px;overflow-x:auto;padding-top:0;padding-right:18px;padding-bottom:8px;padding-left:18px;scroll-snap-type:x mandatory}

.pb-main .photo-strip img{min-width:58%;height:155px;object-fit:cover;border-radius:var(--r);box-shadow:var(--shadow2);scroll-snap-align:start}

.pb-main .photo-strip img:first-child{margin-left:0}

/* ==========================================================================
   HERSTELBLOK — workshop-/event-detail en gastgezin-detail
   --------------------------------------------------------------------------
   Dit bestand wordt geladen voor singular 'event' én singular 'gastgezin'.
   Twee dingen stonden er dubbel in (de photo-strip staat op regel 15-17 en
   nog eens op 43-45) en de updates hadden nog de oude lijstopmaak met een
   duimnagel van 108px. Dit blok staat onderaan en wint dus van beide.
   ========================================================================== */

/* ---- 1. Fotostrook: op desktop een raster i.p.v. een halve strook -------- */

.pb-main .photo-strip{
  scrollbar-width:none;
  -ms-overflow-style:none;
}

.pb-main .photo-strip::-webkit-scrollbar{display:none}

@media (min-width:1025px){
  .pb-main .photo-strip{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:14px;
    overflow:visible;
  }
  .pb-main .photo-strip img{min-width:0;width:100%;height:340px}
}

/* ---- 3. Het verhaal op een gastgezin-pagina leesbaar houden --------------
   De tekst stond over de volle paginabreedte. Bij ruim 1100px worden regels
   zo lang dat je oog de volgende regel kwijtraakt; ~70 tekens is comfortabel.
   ------------------------------------------------------------------------ */

.single-gastgezin .pb-main .section > p{
  max-width:70ch;
  font-size:15.5px;
  line-height:1.75;
  color:var(--muted);
  margin:0 0 16px;
}

.single-gastgezin .pb-main .section > p strong{color:var(--brown)}

/* Lege alinea's uit de editor lieten gaten van tientallen pixels vallen. */

.single-gastgezin .pb-main .section > p:empty{display:none}

.single-gastgezin .pb-main .section > .h2{margin-bottom:14px}

.single-gastgezin .pb-main .section > .cta{margin-top:10px}

@media (max-width:767px){
  .single-gastgezin .pb-main .section > p{font-size:15px;line-height:1.65}
}

.pb-main .pb-ev-intro p{margin:0}

.pb-main .pb-ev-intro p + p{margin-top:12px}

/* ==========================================================================
   Verder op de agenda — [pb_event_andere]
   --------------------------------------------------------------------------
   De kaarten en het raster eronder komen ongewijzigd uit pb-agenda.css; die
   laadt op deze pagina als extra laag (zie functions.php). Daarom staat hier
   alleen de uitlijning van het blok als geheel: dezelfde 1140px als het
   info-paneel erboven, zodat de twee blokken netjes onder elkaar staan.
   ========================================================================== */

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

/* ---- Lopende tekst ---- */

.pb-main .pb-ev-tekst{max-width:66ch}

.pb-main .pb-ev-tekst p{margin:0 0 14px}

.pb-main .pb-ev-tekst p:last-child{margin-bottom:0}

.pb-main .pb-ev-tekst h2,
.pb-main .pb-ev-tekst h3{
  font-family:Fraunces, Georgia, serif;
  color:var(--brown);
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1.15;
  margin:26px 0 10px;
}

.pb-main .pb-ev-tekst h2{font-size:24px}

.pb-main .pb-ev-tekst h3{font-size:19px}

.pb-main .pb-ev-tekst ul,
.pb-main .pb-ev-tekst ol{margin:0 0 14px;padding-left:20px}

.pb-main .pb-ev-tekst li{margin-bottom:6px}

.pb-main .pb-ev-tekst a{color:var(--accent);text-decoration:underline}