/* REDZ: detailpagina van een nieuwsbericht (sjabloon nieuwsberichten/_item.html).
   Niet ontworpen; afgeleid uit de pagina-kop, de witte tekstkaart (radius 16) en het
   nieuwslijst-item. Elk bericht krijgt dezelfde opmaak, ook als het alleen een flyer
   heeft (lege body), geen beeld (img hidden), lange regels, lijsten of een tabel. */

/* ---------- kop: terug, datum en badges, titel ---------- */
.nieuwsdetail-kop { text-align: left; }
.nieuwsdetail-kop__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 32px; }
.nieuwsdetail-kop__datum { font: 500 12px/1.5 var(--font); text-transform: uppercase; letter-spacing: 0.05em; color: var(--rood); }
.nieuwsdetail-kop__badges { justify-content: flex-start; }
.nieuwsdetail-kop__titel { max-width: 1054px; margin-top: 16px; overflow-wrap: break-word; }
.pagina-kop.nieuwsdetail-kop + .sectie { margin-top: 48px; }

/* ---------- het bericht: tekst links, beeld rechts ---------- */
.nieuwsdetail {
  display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 80px; align-items: start;
  background: var(--wit); border-radius: var(--r-kaart); padding: 64px;
}
.nieuwsdetail__tekst { min-width: 0; max-width: 756px; overflow-wrap: anywhere; }
.nieuwsdetail__beeld { position: sticky; top: 24px; display: flex; justify-content: center; }
.nieuwsdetail__beeldlink { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 100%; color: var(--zwart); text-decoration: none; border-radius: var(--r-kaart); }
/* width:auto wint van het width-attribuut: een klein beeld (300 px) wordt niet opgeblazen, een groot past in de kolom */
.nieuwsdetail__beeld img { width: auto; max-width: 100%; height: auto; max-height: 80vh; object-fit: contain; border-radius: var(--r-kaart); background: var(--grond); }
.nieuwsdetail__vergroot { display: inline-flex; align-items: center; gap: 4px; font: 400 14px/normal var(--font); padding-bottom: 2px;
  background: linear-gradient(var(--rood), var(--rood)) no-repeat 0 100% / 0 2px;
  transition: color var(--duur) var(--ease), background-size var(--duur) var(--ease); }
.nieuwsdetail__vergroot .icoon { width: 16px; height: 16px; }
.nieuwsdetail__beeldlink:hover .nieuwsdetail__vergroot { color: var(--rood); background-size: 100% 2px; }

/* Alleen een beeld (geen tekst): het beeld alleen, gecentreerd en groter. */
.nieuwsdetail:has(> .nieuwsdetail__tekst:empty) { grid-template-columns: minmax(0, 1fr); }
.nieuwsdetail__tekst:empty { display: none; }
.nieuwsdetail:has(> .nieuwsdetail__tekst:empty) .nieuwsdetail__beeld { position: static; }
.nieuwsdetail:has(> .nieuwsdetail__tekst:empty) .nieuwsdetail__beeld img { max-height: none; max-width: min(100%, 596px); }
/* Geen beeld: alleen de tekst, op leesbreedte. */
.nieuwsdetail:has(.nieuwsdetail__beeld img[hidden]) { grid-template-columns: minmax(0, 756px); }
.nieuwsdetail__beeld:has(img[hidden]) { display: none; }
/* Geen tekst en geen beeld: de kaart weg. */
.nieuwsdetail:has(> .nieuwsdetail__tekst:empty):has(.nieuwsdetail__beeld img[hidden]) { display: none; }

/* ---------- rijke tekst uit het CMS: lijsten, links, tabel, beeld, citaat ---------- */
.nieuwsdetail__tekst h2 { font: 600 24px/1.2 var(--font); margin-top: 40px; }
.nieuwsdetail__tekst h3 { font: 600 20px/1.2 var(--font); }
.nieuwsdetail__tekst ul { list-style: disc; }
.nieuwsdetail__tekst li::marker { color: var(--rood); }
.nieuwsdetail__tekst img { height: auto; max-width: 100%; }
.nieuwsdetail__tekst hr { border: 0; border-top: 1px solid var(--lijn-zacht); margin-block: 32px; }
.nieuwsdetail__tekst blockquote { padding-left: 20px; border-left: 2px solid var(--rood); color: var(--zwart); }
.nieuwsdetail__tekst table {
  display: block; width: 100%; max-width: 100%; overflow-x: auto; border-collapse: collapse;
  font-size: 15px; line-height: 1.5; overflow-wrap: normal; -webkit-overflow-scrolling: touch;
}
.nieuwsdetail__tekst th, .nieuwsdetail__tekst td { padding: 10px 16px 10px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--lijn-zacht); }
.nieuwsdetail__tekst th { font: 500 12px/1.5 var(--font); text-transform: uppercase; letter-spacing: 0.05em; color: var(--rood); border-bottom-color: var(--lijn-faq); white-space: nowrap; }

/* ---------- meer nieuws ---------- */
.nieuwsdetail-meer__raster:empty { display: none; }
@media (max-width: 1279px) {
  .nieuwsdetail { grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; padding: 56px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  /* twee kolommen: geen halve rij */
  .nieuwsdetail-meer__raster > :nth-child(3) { display: none; }
}

@media (max-width: 1023px) {
  .nieuwsdetail { grid-template-columns: minmax(0, 1fr); gap: 40px; padding: 48px; }
  .nieuwsdetail:has(.nieuwsdetail__beeld img[hidden]) { grid-template-columns: minmax(0, 1fr); }
  .nieuwsdetail__beeld { position: static; }
  .nieuwsdetail__beeld img { max-height: none; max-width: min(100%, 560px); }
}
@media (max-width: 767px) {
  .nieuwsdetail { padding: 24px; gap: 32px; }
  .nieuwsdetail-kop__meta { margin-top: 24px; }
  .pagina-kop.nieuwsdetail-kop + .sectie { margin-top: 32px; }
}

/* ---------- Bring a friend (veld bring_a_friend, 23-10-2026) ----------
   Het rode icoon in de kaart, onder de tekst. redz.js zet data-vriend="ja" op .nieuwsdetail
   als de schakelaar aan staat. Op desktop blijft het beeld rechts over beide rijen staan. */
.nieuwsdetail__vriend { display: none; }
.nieuwsdetail[data-vriend="ja"] .nieuwsdetail__vriend { display: block; }
.nieuwsdetail__vriend-icoon { display: block; width: 96px; height: auto; }
@media (min-width: 1024px) {
  .nieuwsdetail { row-gap: 32px; }
  .nieuwsdetail:not(:has(> .nieuwsdetail__tekst:empty)):not(:has(.nieuwsdetail__beeld img[hidden])) > .nieuwsdetail__tekst { grid-column: 1; grid-row: 1; }
  .nieuwsdetail:not(:has(> .nieuwsdetail__tekst:empty)):not(:has(.nieuwsdetail__beeld img[hidden])) > .nieuwsdetail__vriend { grid-column: 1; grid-row: 2; }
  .nieuwsdetail:not(:has(> .nieuwsdetail__tekst:empty)):not(:has(.nieuwsdetail__beeld img[hidden])) > .nieuwsdetail__beeld { grid-column: 2; grid-row: 1 / span 2; }
}