/* ==========================================================================
   pb-update-detail.css
   Patty Bakker — PAGINA-SPECIFIEK: "Uitgelicht / update-detail" (update-detail.html).
   Laad NA pb-common.css. Alle regels zijn onder .pb-main gescoped.
   Desktop-first: de basis = desktop; mobiele/tablet-afwijkingen onderaan in @media.

   pb-common.css levert de gedeelde primitives en wordt hier NIET herhaald:
     .section (+ .flush, marges/breedte), .label(.fill) en .cta.
   Dit bestand bevat alleen classes die pb-common niet kent (hero-card, artikel,
   quote en de swipe-galerij). De hero-classes zijn bewust pagina-eigen
   (pb-upd-*) zodat ze niet botsen met de .hero/.hero-card van pb-index.css.
   ========================================================================== */

/* ---------- Hero (beeld-kaart met overlay) ---------- */
.pb-main .pb-upd-hero{
  padding:12px 14px 10px;
  background:linear-gradient(180deg,#fbf6f1,#fffaf5);
}
.pb-main .pb-upd-card{
  position:relative;
  height:400px;
  overflow:hidden;
  border-radius:var(--r);
  background:var(--brown);
  box-shadow:var(--shadow);
}
.pb-main .pb-upd-card img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.pb-main .pb-upd-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(38,27,20,.08),rgba(38,27,20,.78));
}
.pb-main .pb-upd-copy{
  position:absolute;
  left:13px;
  right:13px;
  bottom:13px;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.pb-main .pb-upd-row{
  display:flex;
  align-items:center;
  margin-bottom:8px;
}
.pb-main .pb-upd-copy h1{
  font-family:Fraunces,serif;
  line-height:.98;
  font-weight:700;
  letter-spacing:-.02em;
  color:#fff;
  max-width:700px;
  margin:0 0 10px;
}
.pb-main .pb-upd-copy p{ display:none }  /* verborgen, net als in het prototype */

/* ---------- Artikel (schone leestekst) ---------- */
.pb-main .article-clean{
  max-width:760px;
  margin-left:0;
  margin-right:auto;
  padding:18px;
}
.pb-main .article-clean p{
  color:#65564d;
  font-size:15px;
  line-height:1.68;
  margin:0 0 14px;
}
.pb-main .article-quote{
  font-family:Fraunces,serif;
  font-size:24px;
  line-height:1.2;
  font-weight:400;
  color:var(--brown);
  border-left:3px solid var(--accent);
  padding-left:12px;
  margin:20px 0;
}
.pb-main .section h2{
  font-family:Fraunces,serif;
  font-size:28px;
  line-height:1;
  font-weight:700;
  color:var(--brown);
  margin:22px 0 10px;
}

/* ---------- Swipe-galerij ---------- */
.pb-main .gallery-swipe{
  display:flex;
  gap:10px;
  overflow-x:auto;
  padding:0 18px 10px;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
}
.pb-main .gallery-swipe::-webkit-scrollbar{ display:none }
.pb-main .gallery-swipe img{
  flex:0 0 190px;
  min-width:72%;
  height:180px;
  object-fit:cover;
  border-radius:var(--r);
  scroll-snap-align:start;
}

/* ============================ RESPONSIVE ============================ */
/* Hero-kaart kleiner onder desktop (prototype schakelt om op 1025px) */
@media (max-width:1024px){
  .pb-main .pb-upd-card{ height:188px }
}
/* Artikel over de volle breedte op mobiel */
@media (max-width:767px){
  .pb-main .article-clean{ max-width:none }
}

/* ==========================================================================
   HERSTELBLOK — nieuws-detail
   ========================================================================== */

/* Losse alinea's en tussenkoppen stonden elk in een eigen sectie op volle
   breedte. Dezelfde leesbreedte als .article-clean hierboven, zodat het één
   doorlopend artikel wordt in plaats van losse blokken. */
.pb-main .section.flush > p,
.pb-main .section.flush > h2,
.pb-main .section.flush > h3,
.pb-main .section.flush > ul,
.pb-main .section.flush > ol{
  max-width:70ch;
  margin-left:auto;
  margin-right:auto;
}
.pb-main .section.flush > p{
  font-size:16px;
  line-height:1.75;
  color:var(--muted);
  margin-top:0;
  margin-bottom:16px;
}
.pb-main .section.flush > p:empty{display:none}
.pb-main .section.flush > h2{
  font-family:Fraunces,serif;
  color:var(--brown);
  font-size:24px;
  line-height:1.2;
  margin:26px auto 10px;
}

/* De fotogalerij: op desktop een raster in plaats van een strook die je
   moet vegen zonder dat iets dat aangeeft. */
.pb-main .gallery-swipe{scrollbar-width:none;-ms-overflow-style:none}
.pb-main .gallery-swipe::-webkit-scrollbar{display:none}

@media (min-width:1025px){
  .pb-main .gallery-swipe{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:14px;
    overflow:visible;
  }
  .pb-main .gallery-swipe img{min-width:0;width:100%;height:260px;object-fit:cover}
}

/* ==========================================================================
   HERSTELBLOK — nieuwsbericht in de lijn van de rest van de site
   --------------------------------------------------------------------------
   Wat er niet klopte:

   1. De hero stond op `padding:12px 14px 10px`. De rest van de site gebruikt
      --pb-edge (32px en meer op brede schermen), dus dit artikel liep als
      enige pagina bijna tot de rand. En de beeldkaart had ronding var(--r) =
      4px, terwijl kaarten elders 18px zijn.

   2. Het artikel had geen ritme: kop, alinea, tussenkop en galerij stonden
      elk in een eigen sectie zonder onderling verband, waardoor het als losse
      blokken las in plaats van als één stuk.

   Dit blok staat onderaan en wint dus van het bovenstaande.
   ========================================================================== */

/* ---- Hero ------------------------------------------------------------- */

.pb-main .pb-upd-hero{
  padding:clamp(18px, 2.5vw, 34px) var(--pb-edge) clamp(14px, 2vw, 24px);
  background:var(--paper, #fffaf5);
}

.pb-main .pb-upd-card{
  width:min(1140px, 100%);
  max-width:1140px;
  margin:0 auto;
  height:clamp(320px, 42vw, 480px);
  border-radius:var(--img-radius-lg, 18px);
}

.pb-main .pb-upd-copy{
  left:clamp(18px, 3vw, 34px);
  right:clamp(18px, 3vw, 34px);
  bottom:clamp(18px, 3vw, 30px);
}

.pb-main .pb-upd-copy h1{
  line-height:1;
  letter-spacing:-.035em;
}

/* ---- Het artikel ------------------------------------------------------ */

/* Zelfde valkuil als op de ras-pagina: .section is al op 1240px begrensd en
   gecentreerd, dus --pb-edge als padding telt dubbel en loopt op bij bredere
   schermen. Breedte-beperking eraf, dan is --pb-edge de enige inspringing. */
.pb-main .pb-upd-hero ~ .section,
.pb-main .pb-upd-hero ~ .section.flush{
  width:100%;
  max-width:none;
  margin-left:0;
  margin-right:0;
  padding-left:var(--pb-edge);
  padding-right:var(--pb-edge);
}

/* Losse secties met alleen tekst dicht op elkaar, zodat het één artikel
   wordt in plaats van vier blokken met elk hun eigen luchtlaag. */
.pb-main .pb-upd-hero ~ .section.flush{
  padding-top:0;
  padding-bottom:0;
}
.pb-main .pb-upd-hero ~ .section.flush:first-of-type{
  padding-top:clamp(24px, 3vw, 38px);
}

.pb-main .pb-upd-hero ~ .section.flush > h2{
  /* Tussenkop krijgt lucht erboven, niet eronder: hij hoort bij wat volgt. */
  margin:clamp(28px, 3.5vw, 44px) auto 14px;
}

/* ---- Galerij --------------------------------------------------------- */

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

/* ---- Afsluitende knop ------------------------------------------------ */

.pb-main .pb-upd-hero ~ .section:last-child{
  padding-top:clamp(30px, 4vw, 48px);
  padding-bottom:clamp(44px, 5.5vw, 72px);
}
.pb-main .pb-upd-hero ~ .section:last-child > .cta{
  display:inline-flex;
  margin-left:auto;
  margin-right:auto;
}

/* Een artikel dat eindigt met één losse knop voelt afgebroken. Een lijn
   erboven markeert het einde van het verhaal. */
.pb-main .pb-upd-hero ~ .section:last-child{
  border-top:1px solid var(--line);
  margin-top:clamp(24px, 3vw, 40px);
}

@media (max-width:767px){
  .pb-main .pb-upd-card{height:clamp(240px, 60vw, 320px)}
}

/* ==========================================================================
   Nieuwsbericht — nieuwe opzet
   --------------------------------------------------------------------------
   Volgt de event-detailpagina: brede banner, tekst links, meelopende kaart
   rechts, verwante berichten onderaan. De indeling zelf staat in
   pb-detail-layout.css, de kaart rechts in pb-event-kaart.css en de kaarten
   onderaan in pb-nieuws-kaart.css. Hier alleen wat eigen is aan een bericht.

   Wat verdween: de kop "Meer foto's" met vier vaste Unsplash-foto's. Die
   stonden op elk bericht hetzelfde en kwamen nergens vandaan. Extra beeld
   komt nu uit de ACF-velden media_type / media_afbeelding / media_video.
   ========================================================================== */

/* De titel stond eerst als overlay op de foto; nu staat hij links in de
   tekstkolom, met dezelfde maat als op een event. */
.pb-main .pb-ev-top-copy h1{
  font-family:Fraunces, Georgia, serif;
  line-height:.98;
  letter-spacing:-.02em;
  color:var(--brown);
  margin:6px 0 12px;
}

/* ---- De tekst ---- */

.pb-main .pb-upd-tekst{max-width:66ch}
.pb-main .pb-upd-tekst p{
  margin:0 0 14px;
  font-size:17px;
  line-height:1.75;
  color:var(--dark);
}
.pb-main .pb-upd-tekst p:last-child{margin-bottom:0}
.pb-main .pb-upd-tekst a{color:var(--accent);text-decoration:underline}

/* ---- Extra beeld of video ---- */

.pb-main .pb-upd-media{margin-top:24px}
.pb-main .pb-upd-media-img{
  display:block;
  width:100%;
  height:auto;
  border-radius:var(--img-radius-lg, 16px);
}

/* Een oembed levert een iframe met eigen afmetingen; die dwingen we in een
   16:9-kader zodat hij niet buiten de kolom valt. */
.pb-main .pb-upd-media-video{
  position:relative;
  aspect-ratio:16 / 9;
  overflow:hidden;
  border-radius:var(--img-radius-lg, 16px);
  background:var(--cream);
}
.pb-main .pb-upd-media-video iframe,
.pb-main .pb-upd-media-video video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}

/* ---- Meer nieuws ---- */

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