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

   pb-common.css levert de gedeelde primitives en wordt hier NIET herhaald:
     .section (+ .flush, max-width 1240 / padding-inline 32), .page-intro,
     .section-head, .eyebrow, .h2, .more, .label(.fill/.brown/.green) en .cta.
   Dit bestand bevat alleen wat pb-common niet kent: de uitgelicht-kaarten,
   de filterbalk en de nieuws-grid.

   LET OP — .filter-row/.filter-pill staan ook in pb-shop.css, maar die file
   wordt op deze pagina niet geladen. De pill-stijl is hier bewust identiek
   overgenomen zodat filters op shop én nieuws hetzelfde ogen.
   ========================================================================== */

/* ---------- Intro-accent ---------- */
/* .page-intro komt uit pb-common; alleen de label boven de H1 is nieuw. */
.pb-main .page-intro .label{ margin-bottom:10px }

/* ---------- Gedeelde kaart-link ----------
   Kaarten zijn een div/article met een uitgerekte .card-link erover, NIET een
   <a> om de hele kaart heen: een loop-kaart met tag:a die ook
   {post_terms_nieuwscategorie} bevat levert geneste anchors op en Bricks splitst
   de kaart dan in twee blokken. Zelfde patroon als .product .card-link in
   pb-shop.css. */
.pb-main .pb-nws-lead .card-link,
.pb-main .pb-nws-mini .card-link{
  position:absolute;
  inset:0;
  z-index:3;
  font-size:0;
  line-height:0;
}

/* Bricks rendert {post_terms_*} als link naar het termarchief. Binnen een kaart
   mag die niet met de kaart-link concurreren. */
.pb-main .pb-nws-featured .label a,
.pb-main .pb-nws-grid .label a{
  color:inherit;
  pointer-events:none;
}

/* ==========================================================================
   1. Uitgelicht — grote leadkaart + twee kleine kaarten ernaast
   ========================================================================== */

.pb-main .pb-nws-featured{
  display:grid;
  grid-template-columns:1.55fr 1fr;
  gap:20px;
  align-items:stretch;
}

/* ---------- Leadkaart (fotokaart met overlay, à la .pb-upd-card) ---------- */
.pb-main .pb-nws-lead{
  position:relative;
  display:block;
  min-height:420px;
  overflow:hidden;
  border-radius:var(--r-lg);
  background:var(--brown);
  box-shadow:var(--shadow);
  isolation:isolate;
  transition:transform .28s cubic-bezier(.22,.61,.36,1), box-shadow .28s ease;
}
.pb-main .pb-nws-lead img{
  width:100%;
  height:100%;
  position:absolute;
  inset:0;
  object-fit:cover;
  transition:transform .55s cubic-bezier(.22,.61,.36,1);
}
.pb-main .pb-nws-lead::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(38,27,20,.06) 30%,rgba(38,27,20,.82));
}
.pb-main .pb-nws-lead-copy{
  position:absolute;
  left:22px;
  right:22px;
  bottom:20px;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
}
.pb-main .pb-nws-lead-copy h2{
  font-family:Fraunces,serif;
  font-size:36px;
  line-height:1;
  font-weight:700;
  letter-spacing:-.02em;
  color:#fff;
  margin:0;
  max-width:15em;
  text-shadow:0 2px 14px rgba(0,0,0,.3);
}
.pb-main .pb-nws-lead-copy p{
  font-size:14px;
  line-height:1.5;
  color:rgba(255,255,255,.86);
  margin:0;
  max-width:34em;
}

/* ---------- Kleine kaarten rechts ---------- */
.pb-main .pb-nws-side{
  display:grid;
  grid-template-rows:1fr 1fr;
  gap:20px;
}
.pb-main .pb-nws-mini{
  position:relative;
  display:block;
  min-height:200px;
  overflow:hidden;
  border-radius:var(--r-lg);
  background:var(--brown);
  box-shadow:var(--shadow2);
  isolation:isolate;
  transition:transform .28s cubic-bezier(.22,.61,.36,1), box-shadow .28s ease;
}
.pb-main .pb-nws-mini img{
  width:100%;
  height:100%;
  position:absolute;
  inset:0;
  object-fit:cover;
  transition:transform .55s cubic-bezier(.22,.61,.36,1);
}
.pb-main .pb-nws-mini::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(38,27,20,.04) 34%,rgba(38,27,20,.78));
}
.pb-main .pb-nws-mini-copy{
  position:absolute;
  left:14px;
  right:14px;
  bottom:13px;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
}
.pb-main .pb-nws-mini-copy h3{
  font-family:Manrope,system-ui,sans-serif;
  font-size:17px;
  line-height:1.14;
  font-weight:800;
  letter-spacing:-.02em;
  color:#fff;
  margin:0;
  text-shadow:0 2px 10px rgba(0,0,0,.3);
}

/* ---------- Hover (alleen waar een muis is) ---------- */
@media (hover:hover){
  .pb-main .pb-nws-lead:hover,
  .pb-main .pb-nws-mini:hover{
    transform:translateY(-4px);
    box-shadow:0 20px 38px rgba(77,51,34,.2);
  }
  .pb-main .pb-nws-lead:hover img,
  .pb-main .pb-nws-mini:hover img{ transform:scale(1.05) }
}

/* ==========================================================================
   2. Filterbalk — pills + resultaatteller
   ========================================================================== */

.pb-main .pb-nws-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-bottom:22px;
  padding-bottom:14px;
  border-bottom:1px solid var(--line);
}

/* Identiek aan pb-shop.css (die file laadt hier niet mee) — zie kop. */
.pb-main .filter-row{
  display:flex;
  gap:8px;
  overflow-x:auto;
  scrollbar-width:none;
  padding:0;
}
.pb-main .filter-row::-webkit-scrollbar{ display:none }
.pb-main .filter-pill{
  flex:0 0 auto;
  height:32px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:0 12px;
  background:#efe6de;
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  font-family:Manrope,system-ui,sans-serif;
  font-size:12px;
  color:var(--brown);
  font-weight:800;
  cursor:pointer;
  user-select:none;
  white-space:nowrap;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.pb-main .filter-pill:hover{ border-color:var(--accent); color:var(--accent) }
.pb-main .filter-pill.active{ background:var(--brown); color:#fff; border-color:var(--brown) }
.pb-main .filter-pill.active:hover{ color:#fff }
.pb-main .filter-pill:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }

/* Aantal per categorie, klein bolletje in de pill. */
.pb-main .filter-pill .pill-count{
  font-size:10px;
  font-weight:800;
  opacity:.62;
  font-variant-numeric:tabular-nums;
}

.pb-main .pb-nws-count{
  flex:0 0 auto;
  font-size:12px;
  font-weight:700;
  color:var(--muted);
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

/* ==========================================================================
   3. Nieuws-grid — kaarten
   ========================================================================== */

.pb-main .pb-nws-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:26px 28px;
}

.pb-main .pb-nws-card{
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:0 8px 22px rgba(77,51,34,.08);
  transition:transform .28s cubic-bezier(.22,.61,.36,1), box-shadow .28s ease;
}
.pb-main .pb-nws-card[hidden]{ display:none }

.pb-main .pb-nws-thumb{
  position:relative;
  aspect-ratio:16/10;
  overflow:hidden;
  background:var(--cream);
}
.pb-main .pb-nws-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .55s cubic-bezier(.22,.61,.36,1);
}

.pb-main .pb-nws-body{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  padding:14px 16px 16px;
}

/* De label staat in de body (zodat hij op mobiel gewoon meeloopt met de tekst),
   maar ligt op desktop als pill over de foto. .pb-nws-card is position:relative,
   dus dit positioneert t.o.v. de kaart = linksboven op de thumb. */
.pb-main .pb-nws-body > .label{
  position:absolute;
  top:10px;
  left:10px;
  z-index:2;
}
.pb-main .pb-nws-meta{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#9d8778;
  margin-bottom:7px;
}
/* .meta-extra bundelt scheidingsteken + tweede waarde, zodat die op mobiel in
   één keer weg kan. Zelf ook flex, anders verliest .dot zijn afmetingen. */
.pb-main .pb-nws-meta .meta-extra{
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.pb-main .pb-nws-meta .dot{
  flex:0 0 auto;
  width:3px;
  height:3px;
  border-radius:50%;
  background:currentColor;
  opacity:.6;
}
.pb-main .pb-nws-card h3{
  font-family:Manrope,system-ui,sans-serif;
  font-size:18px;
  line-height:1.16;
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--brown);
  margin:0 0 7px;
}
.pb-main .pb-nws-card p{
  font-size:13px;
  line-height:1.55;
  color:var(--muted);
  margin:0 0 14px;
}
.pb-main .pb-nws-read{
  margin-top:auto;
  align-self:flex-start;
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  font-weight:800;
  color:var(--brown);
  border-bottom:2px solid var(--accent);
  padding-bottom:2px;
  transition:color .2s ease;
}
/* Chevron als tekst i.p.v. een inline-SVG, zodat de Bricks-variant met een
   kale text-basic link exact hetzelfde rendert (zelfde truc als .cta::after
   in pb-common). */
.pb-main .pb-nws-read::after{
  content:'\203A';
  display:inline-block;
  margin-left:2px;
  font-size:16px;
  line-height:0;
  font-weight:900;
  transition:transform .2s ease;
}

/* Hele kaart klikbaar: de link rekt over de kaart, tekst blijft selecteerbaar. */
.pb-main .pb-nws-card{ position:relative }
.pb-main .pb-nws-read::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
}

@media (hover:hover){
  .pb-main .pb-nws-card:hover{
    transform:translateY(-4px);
    box-shadow:0 18px 34px rgba(77,51,34,.16);
    border-color:#d9c4b4;
  }
  .pb-main .pb-nws-card:hover .pb-nws-thumb img{ transform:scale(1.05) }
  .pb-main .pb-nws-card:hover .pb-nws-read{ color:var(--accent) }
  .pb-main .pb-nws-card:hover .pb-nws-read::after{ transform:translateX(3px) }
}
.pb-main .pb-nws-card:focus-within{
  border-color:var(--accent);
  box-shadow:0 0 0 2px rgba(201,122,85,.35), 0 8px 22px rgba(77,51,34,.08);
}

/* ---------- Label-pills binnen nieuws (moderne pill i.p.v. de 8px-variant) --
   pb-common's .label is een klein 8px blokje; op de nieuwskaarten gebruiken we
   de rondere pill uit de nieuwere huisstijl. Bewust alleen hier gescoped. */
.pb-main .pb-nws-featured .label,
.pb-main .pb-nws-grid .label{
  font-size:10px;
  letter-spacing:.06em;
  padding:4px 9px;
  border-radius:var(--r-pill);
  box-shadow:0 4px 10px rgba(38,27,20,.16);
}

/* ==========================================================================
   4. Lege staat + "Meer laden"
   ========================================================================== */

.pb-main .pb-nws-empty{
  display:none;
  padding:44px 18px;
  text-align:center;
  border:1px dashed var(--line);
  border-radius:var(--r-lg);
  background:#fffaf5;
}
.pb-main .pb-nws-empty.is-visible{ display:block }
.pb-main .pb-nws-empty .icon{
  width:30px;
  height:30px;
  color:var(--accent);
  margin:0 auto 10px;
}
.pb-main .pb-nws-empty h3{
  font-family:Fraunces,serif;
  font-size:22px;
  line-height:1.1;
  font-weight:700;
  color:var(--brown);
  margin:0 0 6px;
}
.pb-main .pb-nws-empty p{
  font-size:13px;
  line-height:1.55;
  color:var(--muted);
  margin:0;
}

.pb-main .pb-nws-more-row{
  display:flex;
  justify-content:center;
  margin-top:28px;
}
.pb-main .pb-nws-more-row[hidden]{ display:none }

/* ==========================================================================
   5. Nieuwsbrief-banner (afsluiter)
   ========================================================================== */

.pb-main .pb-nws-banner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  padding:26px 28px;
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:0 9px 22px rgba(77,51,34,.08);
}
.pb-main .pb-nws-banner h3{
  font-family:Fraunces,serif;
  font-size:26px;
  line-height:1.05;
  font-weight:700;
  color:var(--brown);
  margin:8px 0 6px;
}
.pb-main .pb-nws-banner p{
  font-size:13.5px;
  line-height:1.55;
  color:var(--muted);
  margin:0;
  max-width:46em;
}
.pb-main .pb-nws-banner .pb-nws-banner-form{
  flex:0 0 auto;
  display:flex;
  gap:8px;
}
.pb-main .pb-nws-banner input{
  height:44px;
  width:230px;
  padding:0 14px;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:#fffaf5;
  color:var(--dark);
  font:600 13px/1 Manrope,system-ui,sans-serif;
}
.pb-main .pb-nws-banner input::placeholder{ color:#a8968a }
.pb-main .pb-nws-banner input:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:1px;
}

/* ==========================================================================
   RESPONSIVE
   Breakpoints gelijk aan de rest van de build: 1024px (tablet) / 767px (mobiel).
   ========================================================================== */

/* ---------- Tablet ---------- */
@media (max-width:1024px){
  .pb-main .pb-nws-featured{ grid-template-columns:1fr; gap:14px }
  .pb-main .pb-nws-lead{ min-height:300px }
  .pb-main .pb-nws-lead-copy h2{ font-size:28px }
  .pb-main .pb-nws-side{ grid-template-rows:none; grid-template-columns:1fr 1fr }
  .pb-main .pb-nws-mini{ min-height:170px }

  .pb-main .pb-nws-grid{ grid-template-columns:repeat(2,1fr); gap:20px }

  .pb-main .pb-nws-banner{ flex-direction:column; align-items:flex-start; gap:18px }
  .pb-main .pb-nws-banner .pb-nws-banner-form{ width:100% }
  .pb-main .pb-nws-banner input{ flex:1 1 auto; width:auto }
}

/* ---------- Mobiel ---------- */
@media (max-width:767px){
  .pb-main .pb-nws-lead{ min-height:240px; border-radius:var(--r) }
  .pb-main .pb-nws-lead-copy{ left:14px; right:14px; bottom:14px }
  .pb-main .pb-nws-lead-copy h2{ font-size:23px }
  .pb-main .pb-nws-lead-copy p{ display:none }

  .pb-main .pb-nws-side{ grid-template-columns:1fr; gap:10px }
  .pb-main .pb-nws-mini{ min-height:132px; border-radius:var(--r) }
  .pb-main .pb-nws-mini-copy h3{ font-size:15px }

  /* Filterbalk mag over de sectierand heen scrollen, zodat de pills niet
     halverwege afgekapt lijken. Teller onder de pills. */
  .pb-main .pb-nws-toolbar{
    display:block;
    margin-bottom:16px;
    padding-bottom:12px;
  }
  .pb-main .pb-nws-toolbar .filter-row{
    margin-left:-18px;
    margin-right:-18px;
    padding-left:18px;
    padding-right:18px;
  }
  .pb-main .pb-nws-count{ display:block; margin-top:10px }

  .pb-main .pb-nws-grid{ grid-template-columns:1fr; gap:12px }

  /* Kaarten op mobiel = liggend (foto links), gelijk aan .update-card. */
  .pb-main .pb-nws-card{
    flex-direction:row;
    align-items:center;
    gap:12px;
    padding:8px;
    border-radius:var(--r);
  }
  .pb-main .pb-nws-thumb{
    flex:0 0 108px;
    width:108px;
    aspect-ratio:auto;
    height:92px;
    border-radius:var(--r);
  }
  .pb-main .pb-nws-body{ padding:0; min-width:0 }

  /* De thumb is te smal voor een overlay-pill: label loopt hier gewoon mee
     boven de titel (zelfde ritme als .update-text in het prototype). */
  .pb-main .pb-nws-body > .label{
    position:static;
    align-self:flex-start;
    margin-bottom:5px;
    box-shadow:none;
  }
  /* Tweede meta-item ("3 min" / plaats) valt weg; de datum is genoeg. */
  .pb-main .pb-nws-meta .meta-extra{ display:none }
  .pb-main .pb-nws-meta{ margin-bottom:5px }

  .pb-main .pb-nws-card h3{ font-size:16px }
  .pb-main .pb-nws-card p{
    font-size:12px;
    line-height:1.4;
    margin-bottom:0;
    /* Twee regels excerpt, de rest kapt netjes af. */
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .pb-main .pb-nws-read{ display:none }
  /* Kaart blijft klikbaar zonder zichtbare "Lees meer". */
  .pb-main .pb-nws-read::before{ content:"" }

  .pb-main .pb-nws-banner{ padding:18px; border-radius:var(--r) }
  .pb-main .pb-nws-banner h3{ font-size:21px }
  .pb-main .pb-nws-banner .pb-nws-banner-form{ flex-direction:column }
  .pb-main .pb-nws-banner input{ width:100% }
}

/* ---------- Toegankelijkheid ---------- */
@media (prefers-reduced-motion:reduce){
  .pb-main .pb-nws-lead,
  .pb-main .pb-nws-mini,
  .pb-main .pb-nws-card,
  .pb-main .pb-nws-lead img,
  .pb-main .pb-nws-mini img,
  .pb-main .pb-nws-thumb img,
  .pb-main .pb-nws-read::after{
    transition:none;
  }
  .pb-main .pb-nws-lead:hover,
  .pb-main .pb-nws-mini:hover,
  .pb-main .pb-nws-card:hover{ transform:none }
  .pb-main .pb-nws-lead:hover img,
  .pb-main .pb-nws-mini:hover img,
  .pb-main .pb-nws-card:hover .pb-nws-thumb img{ transform:none }
}