/* ==========================================================================
   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;
  font-size:46px;
  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 }
  .pb-main .pb-upd-copy h1{ font-size:24px }
}
/* Artikel over de volle breedte op mobiel */
@media (max-width:767px){
  .pb-main .article-clean{ max-width:none }
}