/* ==========================================================================
   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:4px;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}

/* --- Updates (Actueel) ---------------------------------------------------- */
.pb-main .update-section{padding-top:14px}
.pb-main .update-row{display:grid;grid-template-columns:repeat(2,1fr);gap:18px 28px;padding-top:0;padding-right:18px;padding-bottom:0;padding-left:18px}
.pb-main .update-card{display:grid;grid-template-columns:108px 1fr;gap:12px;align-items:center;border-bottom:1px solid #eaded4;padding-bottom:12px}
.pb-main .update-card.outline{border:2px solid var(--accent);box-shadow:inset 0 0 0 1px var(--accent),var(--shadow2);background:#fff;border-radius:var(--r);padding-top:8px;padding-right:8px;padding-bottom:8px;padding-left:8px}
.pb-main .update-card img{width:108px;height:84px;object-fit:cover;border-radius:var(--r)}
.pb-main .update-card.outline img{height:92px}
.pb-main .update-text h3{font-family:Manrope,system-ui,sans-serif;font-size:17px;line-height:1.13;margin-top:5px;margin-right:0;margin-bottom:0;margin-left:0;font-weight:850;color:var(--brown);letter-spacing:-.02em}
.pb-main .update-text p{font-size:12px;line-height:1.35;color:var(--muted);margin-top:4px;margin-right:0;margin-bottom:0;margin-left:0}
/* Eerste (highlight) kaart: bruin label i.p.v. de terracotta outline-variant. */
.pb-main .update-section .update-row .update-card:first-child .label{background:var(--brown);color:#fff;border-color:var(--brown)}

@media (max-width:767px){
  .pb-main .update-row{grid-template-columns:1fr;gap:12px}
}
.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:4px;box-shadow:var(--shadow2);scroll-snap-align:start}
.pb-main .photo-strip img:first-child{margin-left:0}