/* ==========================================================================
   Patty Bakker — de nieuwskaart
   ==========================================================================
   De kaart en het raster van /nieuws-overzicht/. Staat nu ook onderaan een
   nieuwsbericht ("Lees ook"), zodat een bezoeker daar dezelfde kaarten ziet
   als op het overzicht.
   ========================================================================== */

/* 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;
}

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

/* Zelfde ritme als de agendategels op /agenda-overzicht/, zodat de twee
   overzichtspagina's als één familie lezen:

     - auto-fill i.p.v. repeat(3,1fr): bij een gefilterde selectie van één of
       twee berichten houden de kaarten hun maat in plaats van uit te rekken,
       en op smallere schermen valt het raster vanzelf terug naar twee of een.
     - gap 14px i.p.v. 26/28: de agenda houdt 14 aan.

   min() als vangnet, zodat een track nooit meer breedte eist dan er is. */

.pb-main .pb-nws-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap:14px;
}

.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:Fraunces, Georgia, 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);
}

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

/* ---------- Tablet ---------- */

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

/* ---------- Mobiel ---------- */

@media (max-width:767px){
  .pb-main .pb-nws-grid{ grid-template-columns:1fr; gap:12px }
  .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 }
  .pb-main .pb-nws-body > .label{
    position:static;
    align-self:flex-start;
    margin-bottom:5px;
    box-shadow:none;
  }
  .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{
    /* NIET display:none. De hele kaart is klikbaar via .pb-nws-read::before
       (position:absolute; inset:0 t.o.v. de kaart), en een element met
       display:none rendert geen pseudo-element - dan is er op de telefoon
       dus niets aanklikbaars.

       De link blijft wel in de stroom staan, alleen zonder maat: het ::before
       doet het werk, dus hoe groot de link zelf is maakt niet uit. Hem
       absoluut positioneren werkte niet - dan rekte hij wel in de breedte
       maar bleef de hoogte 0. */
    font-size:0;
    line-height:0;
    height:0;
    min-height:0;
    margin:0;
    padding:0;
    border:0;
    overflow:hidden;
  }
  .pb-main .pb-nws-read::after{content:none}
  .pb-main .pb-nws-read::before{ content:"" }
}

/* ---------- 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 }
}

/* "Lees meer" is een tekstlink, geen knop.
   pb-common.css groepeert .pb-nws-read met .cta / .hero-btn / .light-btn en
   geeft die groep border-radius:var(--btn-radius) en min-height:var(--btn-height).
   Daardoor werd de link 46px hoog met een afgeronde onderrand, en zag het
   streepje eronder er anders uit dan bij .more elders op de site. */
.pb-main .pb-nws-read{
  min-height:0;
  border-radius:0;
  height:auto;
  padding:0 0 2px;
}

/* Melding als een categoriepagina (/tips/, /media/) nog leeg is. Hoort bij
   [pb_nieuws_lijst]; staat hier omdat dit bestand overal laadt waar de
   nieuwskaarten staan. */
.pb-main .pb-nws-leeg{
  max-width:60ch;
  margin:0;
  color:var(--muted);
  font:600 16px/1.6 Manrope, system-ui, sans-serif;
}