/*

Theme Name: Nieuwsgrond

Theme URI: https://nieuwsgrond.nl

Author: Nieuwsgrond

Description: Nederlandstalige nieuwssite in de stijl van NOS en FD. Rustige vormgeving, serif-koppen, warme achtergrond. Gebouwd als presentatielaag voor een AI-gestuurde publicatiepijplijn.

Version: 1.3.11

Requires at least: 6.0

Requires PHP: 7.4

License: GNU General Public License v2 or later

Text Domain: nieuwsgrond

*/

:root {

  /* === KLEUREN — hiermee pas je de hele site in één keer aan ===============

     Tip: verander alleen de kleurcodes hieronder. De rest van de stylesheet

     gebruikt automatisch deze waarden, dus je hoeft verder niets te zoeken. */

  --dg-bg:          #f4ecda; /* Papier-/achtergrondkleur van de hele site (licht beige) */

  --dg-bar:         #f4ecda; /* Achtergrond van de balken boven (header) en onder (footer) */

  --dg-panel:       #ece2cd; /* Vlakken: zijbalk "Laatste nieuws" en het bronnenblok (iets dieper beige) */

  --dg-ink:         #222222; /* Hoofd-tekstkleur (donker) */

  --dg-muted:       #5f5a52; /* Grijze bijtekst: datums en samenvattingen */

  --dg-accent:      #b8632b; /* Accentkleur: categorieën, links en strepen */

  --dg-line:        #e0d5bf; /* Dunne scheidingslijntjes */

  --dg-header-line: #e2d8c4; /* Lijn onder de header en boven de footer */

  --dg-radius:      8px;     /* Ronding van foto's en vlakken (bv. 8px, 0 voor rechte hoeken) */

  /* === LETTERTYPES ======================================================== */

  --serif: "PT Serif", Georgia, serif;                      /* Koppen */

  --sans:  "Poppins", "Helvetica Neue", Arial, sans-serif;  /* Lopende tekst en menu */

}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {

  background: var(--dg-bg);

  color: var(--dg-ink);

  font-family: var(--sans);

  font-size: 17px;

  line-height: 1.6;

}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

a:hover { color: var(--dg-accent); }

.dg-container { max-width: 1360px; margin: 0 auto; padding: 0 32px; }

/* ---------- Header ---------- */

.dg-header {

  position: relative; /* Ankerpunt voor het uitklapmenu op mobiel. */

  background: var(--dg-bar);

  border-bottom: 1px solid var(--dg-header-line);

}

.dg-header-inner {

  display: flex;

  align-items: center;

  gap: 40px;

  min-height: 72px; /* Smallere balk, in de geest van NOS. */

}

.dg-logo {

  font-family: var(--serif);

  font-weight: 700;

  font-size: 36px;

  letter-spacing: -1px;

  line-height: 1;

  color: var(--dg-ink);

}

.dg-logo:hover { color: var(--dg-ink); }

.dg-logo-image .custom-logo-link { display: block; }

.dg-logo-image img.custom-logo {

  max-height: 44px;

  width: auto;

  /* Laat een witte achtergrond in het logobestand wegvallen tegen het beige. */

  mix-blend-mode: multiply;

}

.dg-footer .dg-logo-image img.custom-logo { max-height: 40px; }

.dg-nav { display: flex; align-items: center; gap: 36px; flex: 1; }

.dg-nav ul { display: flex; gap: 36px; list-style: none; }

.dg-nav li { position: relative; }

.dg-nav a,

.dg-nav-right a {

  font-family: var(--sans);

  font-weight: 600;

  font-size: 17px;

  color: var(--dg-ink);

}

.dg-nav a { display: inline-block; position: relative; padding: 6px 0; }

.dg-nav .current-menu-item > a,

.dg-nav .current_page_item > a,

.dg-nav .current-menu-parent > a,

.dg-nav .current-post-ancestor > a,

.dg-nav .current-category-ancestor > a,

.dg-nav a:hover,

.dg-nav-right a:hover { color: var(--dg-accent); }

/* Heldere, licht gloeiende onderrand bij het actieve menu-item (NOS-stijl).

   WordPress zet de "current"-klassen automatisch per pagina of categorie. */

.dg-nav .current-menu-item > a::after,

.dg-nav .current_page_item > a::after,

.dg-nav .current-menu-parent > a::after,

.dg-nav .current-post-ancestor > a::after,

.dg-nav .current-category-ancestor > a::after {

  content: "";

  position: absolute;

  left: 0;

  right: 0;

  bottom: -2px;

  height: 3px;

  border-radius: 3px;

  background: var(--dg-accent);

}

.dg-nav-right { display: flex; align-items: center; gap: 28px; margin-left: auto; }

.dg-searchtoggle { background: none; border: none; cursor: pointer; font: inherit; font-weight: 600; font-size: 17px; color: var(--dg-ink); padding: 8px 0; }

.dg-searchtoggle:hover { color: var(--dg-accent); }

/* Hamburgerknop — alleen zichtbaar op smallere schermen. */

.dg-menutoggle {

  display: none;

  flex-direction: column;

  justify-content: center;

  gap: 5px;

  width: 42px;

  height: 42px;

  padding: 10px;

  background: none;

  border: none;

  cursor: pointer;

}

.dg-menutoggle span {

  display: block;

  height: 2px;

  width: 100%;

  background: var(--dg-ink);

  border-radius: 2px;

  transition: transform .2s ease, opacity .2s ease;

}

.dg-menutoggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }

.dg-menutoggle.open span:nth-child(2) { opacity: 0; }

.dg-menutoggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.dg-searchbar { display: none; background: var(--dg-bar); border-bottom: 1px solid var(--dg-header-line); padding: 18px 0; }

.dg-searchbar.open { display: block; }

.dg-searchbar form { display: flex; gap: 12px; }

.dg-searchbar input[type="search"] {

  flex: 1; font: inherit; padding: 12px 16px;

  border: 1px solid var(--dg-line); border-radius: 4px; background: #fff;

}

.dg-searchbar button {

  font: inherit; font-weight: 600; padding: 12px 28px; cursor: pointer;

  background: var(--dg-ink); color: #fff; border: none; border-radius: 4px;

}

/* ---------- Homepage layout ---------- */

.dg-main { padding: 48px 0 72px; }

.dg-home-grid {

  display: grid;

  grid-template-columns: minmax(0, 1fr) 380px;

  gap: 48px;

  align-items: start;

}

.dg-featured-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 40px;

}

.dg-small-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 32px;

  margin-top: 56px;

}

/* ---------- Cards ---------- */

.dg-card-image { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--dg-panel); border-radius: var(--dg-radius); }

.dg-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }

.dg-card:hover .dg-card-image img { transform: scale(1.02); }

.dg-eyebrow {

  display: inline-block;

  margin-top: 18px;

  font-family: var(--serif);

  font-weight: 700;

  font-size: 17px;

  color: var(--dg-accent);

}

.dg-card-title {

  font-family: var(--serif);

  font-weight: 700;

  line-height: 1.15;

  margin-top: 6px;

}

.dg-card--featured .dg-card-title { font-size: 32px; letter-spacing: -0.5px; }

.dg-card--small .dg-card-title { font-size: 21px; }

.dg-card-excerpt { margin-top: 14px; font-size: 18px; line-height: 1.55; color: var(--dg-ink); }

.dg-card--small .dg-card-excerpt { font-size: 16px; color: var(--dg-muted); }

/* ---------- Sidebar ---------- */

.dg-sidebar {

  background: var(--dg-panel);

  padding: 36px 32px 20px;

  border-radius: var(--dg-radius);

}

.dg-sidebar-title {

  font-family: var(--sans);

  font-weight: 600;

  font-size: 28px;

  /* Streep onder de kop "Laatste nieuws". Dikte/kleur pas je hier aan. */

  padding-bottom: 14px;

  margin-bottom: 8px;

  border-bottom: 2px solid var(--dg-accent);

}

.dg-sidebar-item { padding: 20px 0; border-bottom: 1px solid var(--dg-line); }

.dg-sidebar-item:last-child { border-bottom: none; }

.dg-sidebar-date { font-size: 15px; color: var(--dg-muted); margin-bottom: 6px; }

.dg-sidebar-item a { font-size: 19px; font-weight: 400; line-height: 1.4; }

/* ---------- Thema-blokken onderaan de homepage ---------- */

.dg-theme-section { margin-top: 64px; }

/* De subkop per thema, met een streep eronder. */

.dg-theme-title {

  font-family: var(--serif);

  font-weight: 700;

  font-size: 30px;

  padding-bottom: 12px;

  margin-bottom: 28px;

  border-bottom: 2px solid var(--dg-ink);

}

/* Rij met artikelen binnen een thema-blok (3 kolommen op desktop). */

.dg-theme-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 40px 32px;

}

/* ---------- Section headings (archief / zoeken) ---------- */

.dg-page-header { margin-bottom: 40px; padding-bottom: 20px; border-bottom: 1px solid var(--dg-line); }

.dg-page-header .dg-kicker { font-family: var(--serif); font-weight: 700; color: var(--dg-accent); font-size: 17px; }

.dg-page-header h1 { font-family: var(--serif); font-weight: 700; font-size: 48px; letter-spacing: -0.5px; margin-top: 4px; }

.dg-page-header .dg-description { margin-top: 12px; font-size: 18px; color: var(--dg-muted); max-width: 720px; }

.dg-archive-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 32px; }

/* ---------- Nieuwslijst (NOS-stijl: afbeelding links, tekst rechts) ---------- */

.dg-news-list { max-width: 920px; }

.dg-list-item {

  display: grid;

  grid-template-columns: 260px minmax(0, 1fr);

  gap: 28px;

  padding: 28px 0;

  border-bottom: 1px solid var(--dg-line);

  align-items: start;

}

.dg-list-item:first-child { padding-top: 0; }

.dg-list-image { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--dg-panel); border-radius: var(--dg-radius); }

.dg-list-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }

.dg-list-item:hover .dg-list-image img { transform: scale(1.02); }

.dg-list-image-placeholder { display: block; width: 100%; height: 100%; background: var(--dg-panel); }

.dg-list-meta { font-size: 15px; color: var(--dg-muted); }

.dg-list-title {

  font-family: var(--serif);

  font-weight: 700;

  font-size: 26px;

  line-height: 1.2;

  margin-top: 6px;

}

.dg-list-excerpt { margin-top: 10px; font-size: 16.5px; line-height: 1.55; color: var(--dg-ink); }

@media (max-width: 700px) {

  .dg-list-item { grid-template-columns: 1fr; gap: 14px; }

}

/* ---------- Single artikel ---------- */

.dg-article { max-width: 780px; margin: 0 auto; }

.dg-article .dg-eyebrow { margin-top: 0; }

.dg-article-title {

  font-family: var(--serif);

  font-weight: 700;

  font-size: 52px;

  line-height: 1.1;

  letter-spacing: -1px;

  margin-top: 10px;

}

.dg-article-lead { margin-top: 22px; font-size: 21px; line-height: 1.5; color: var(--dg-ink); font-weight: 400; }

.dg-article-meta {

  display: flex; gap: 16px; align-items: center;

  margin-top: 26px; padding: 14px 0;

  border-top: 1px solid var(--dg-line); border-bottom: 1px solid var(--dg-line);

  font-size: 15px; color: var(--dg-muted);

}

.dg-article-image { margin-bottom: 32px; }

.dg-article-image img { border-radius: var(--dg-radius); width: 100%; aspect-ratio: 2 / 1; object-fit: cover; }

/* Op ruime schermen is de artikelfoto iets breder dan de tekstkolom (NOS-stijl). */

@media (min-width: 1000px) {

  .dg-article-image { width: 920px; margin-left: -70px; }

}

.dg-article-image figcaption { font-size: 14px; color: var(--dg-muted); margin-top: 8px; }

.dg-article-body { margin-top: 36px; font-size: 18.5px; line-height: 1.75; }

.dg-article-body p { margin-bottom: 24px; }

.dg-article-body h2 { font-family: var(--serif); font-size: 30px; line-height: 1.2; margin: 40px 0 16px; }

.dg-article-body h3 { font-family: var(--serif); font-size: 24px; margin: 32px 0 12px; }

.dg-article-body a { color: var(--dg-accent); text-decoration: underline; text-underline-offset: 3px; }

.dg-article-body ul, .dg-article-body ol { margin: 0 0 24px 24px; }

.dg-article-body blockquote {

  border-left: 3px solid var(--dg-accent);

  padding-left: 20px; margin: 32px 0;

  font-family: var(--serif); font-size: 22px; line-height: 1.5;

}

.dg-article-body figure { margin: 32px 0; }

.dg-bronnen {

  margin-top: 48px; padding: 28px 32px;

  background: var(--dg-panel);

  border-radius: var(--dg-radius);

}

.dg-bronnen h2 { font-family: var(--serif); font-size: 22px; margin-bottom: 12px; }

.dg-bronnen ul { list-style: none; }

.dg-bronnen li { padding: 6px 0; font-size: 16px; }

.dg-bronnen a { color: var(--dg-accent); text-decoration: underline; text-underline-offset: 3px; word-break: break-all; }

/* ---------- Statische pagina ---------- */

.dg-page { max-width: 780px; margin: 0 auto; }

.dg-page h1 { font-family: var(--serif); font-size: 48px; letter-spacing: -0.5px; margin-bottom: 28px; }

.dg-page-content { font-size: 18.5px; line-height: 1.75; }

.dg-page-content p { margin-bottom: 24px; }

.dg-page-content h2 { font-family: var(--serif); font-size: 30px; margin: 40px 0 16px; }

/* ---------- Paginering ---------- */

.dg-pagination { margin-top: 56px; display: flex; gap: 8px; font-weight: 600; }

.dg-pagination .page-numbers {

  padding: 10px 18px; border: 1px solid var(--dg-line); background: #fff; border-radius: 4px;

}

.dg-pagination .current { background: var(--dg-ink); color: #fff; border-color: var(--dg-ink); }

/* ---------- Footer ---------- */

.dg-footer {

  margin-top: 40px;

  background: var(--dg-bar);

  border-top: 1px solid var(--dg-header-line);

  padding: 56px 0 40px;

}

.dg-footer-inner { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; justify-content: space-between; }

.dg-footer .dg-logo { font-size: 36px; }

.dg-footer-tagline { margin-top: 12px; max-width: 420px; color: var(--dg-muted); font-size: 15.5px; }

.dg-footer-nav ul { list-style: none; display: flex; gap: 32px; }

.dg-footer-nav a { font-weight: 600; font-size: 16px; }

.dg-footer-bottom { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--dg-header-line); font-size: 14px; color: var(--dg-muted); }

/* ---------- Responsive ---------- */

@media (max-width: 1100px) {

  .dg-home-grid { grid-template-columns: 1fr; }

  .dg-sidebar { margin-top: 56px; }

  /* Iets compactere navigatie zodat alle menu-items op één regel passen. */

  .dg-header-inner { gap: 28px; }

  .dg-nav, .dg-nav ul { gap: 24px; }

  .dg-nav a, .dg-nav-right a, .dg-searchtoggle { font-size: 16px; }

}

/* Tablet en mobiel: compacte header met hamburgermenu, grote kaarten met de

   titel ín de afbeelding (NOS-stijl), kleine kaarten in twee kolommen. */

@media (max-width: 860px) {

  .dg-container { padding: 0 20px; }

  /* --- Header: één nette rij: logo links, Zoeken + hamburger rechts. --- */

  .dg-header-inner { flex-wrap: nowrap; gap: 16px; min-height: 56px; }

  .dg-logo { font-size: 30px; }

  .dg-logo-image img.custom-logo { max-height: 36px; }

  .dg-nav { display: none; }

  .dg-nav.open {

    display: block;

    position: absolute;

    top: 100%;

    left: 0;

    right: 0;

    background: var(--dg-bar);

    border-bottom: 1px solid var(--dg-header-line);

    box-shadow: 0 14px 28px rgba(34, 34, 34, 0.10);

    padding: 4px 20px 12px;

    z-index: 60;

  }

  .dg-nav.open ul { display: block; }

  .dg-nav.open li { border-bottom: 1px solid var(--dg-line); }

  .dg-nav.open li:last-child { border-bottom: none; }

  .dg-nav.open a { display: block; padding: 13px 0; font-size: 18px; }

  /* In het uitklapmenu geen onderrand maar een accentbalkje links. */

  .dg-nav.open .current-menu-item > a::after,

  .dg-nav.open .current_page_item > a::after,

  .dg-nav.open .current-menu-parent > a::after,

  .dg-nav.open .current-post-ancestor > a::after,

  .dg-nav.open .current-category-ancestor > a::after { display: none; }

  .dg-nav.open .current-menu-item > a,

  .dg-nav.open .current_page_item > a,

  .dg-nav.open .current-menu-parent > a,

  .dg-nav.open .current-post-ancestor > a,

  .dg-nav.open .current-category-ancestor > a {

    color: var(--dg-accent);

    box-shadow: inset 3px 0 0 var(--dg-accent);

    padding-left: 12px;

  }

  .dg-nav-right { gap: 6px; }

  .dg-nav-right ul { display: none; } /* Secundair menu verhuist naar de footer op mobiel. */

  .dg-searchtoggle { padding: 8px 10px; }

  .dg-menutoggle { display: inline-flex; }

  /* --- Grids --- */

  .dg-featured-grid { grid-template-columns: 1fr; gap: 28px; }

  .dg-small-grid, .dg-archive-grid, .dg-theme-grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; }

  .dg-main { padding: 28px 0 56px; }

  .dg-small-grid { margin-top: 40px; }

  .dg-theme-section { margin-top: 48px; }

  .dg-sidebar { margin-top: 40px; }

  /* --- Grote kaarten: titel in de afbeelding met donkere gradient. ---

     Alleen wanneer de kaart een afbeelding heeft; anders blijft de titel

     gewoon onder de kop staan. */

  .dg-card--featured:has(.dg-card-image),

  .home .dg-small-grid > .dg-card--small:first-child:has(.dg-card-image) { display: grid; grid-template-columns: 1fr; }

  .dg-card--featured:has(.dg-card-image) > a:not(.dg-eyebrow),

  .home .dg-small-grid > .dg-card--small:first-child:has(.dg-card-image) > a:not(.dg-eyebrow) { grid-area: 1 / 1 / 2 / 2; }

  .dg-card--featured:has(.dg-card-image) .dg-card-image,

  .home .dg-small-grid > .dg-card--small:first-child:has(.dg-card-image) .dg-card-image { aspect-ratio: 16 / 11; }

  .dg-card--featured:has(.dg-card-image) .dg-card-image::after,

  .home .dg-small-grid > .dg-card--small:first-child:has(.dg-card-image) .dg-card-image::after {

    content: "";

    position: absolute;

    inset: 0;

    background: linear-gradient(to top, rgba(22, 17, 10, 0.74) 0%, rgba(22, 17, 10, 0.32) 42%, rgba(22, 17, 10, 0) 65%);

  }

  .dg-card--featured:has(.dg-card-image) .dg-card-title,

  .home .dg-small-grid > .dg-card--small:first-child:has(.dg-card-image) .dg-card-title {

    grid-area: 1 / 1 / 2 / 2;

    align-self: end;

    z-index: 2;

    margin: 0 18px 16px;

    font-size: 27px;

    line-height: 1.2;

    color: #fff;

    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);

    display: -webkit-box;

    -webkit-line-clamp: 4;

    -webkit-box-orient: vertical;

    overflow: hidden;

  }

  .dg-card--featured:has(.dg-card-image) .dg-card-title a,

  .home .dg-small-grid > .dg-card--small:first-child:has(.dg-card-image) .dg-card-title a { color: #fff; }

  .dg-card--featured:has(.dg-card-image) .dg-eyebrow,

  .home .dg-small-grid > .dg-card--small:first-child:has(.dg-card-image) .dg-eyebrow {

    grid-area: 1 / 1 / 2 / 2;

    justify-self: end;

    align-self: start;

    z-index: 2;

    margin: 12px 12px 0 0;

    padding: 4px 10px;

    background: rgba(22, 17, 10, 0.55);

    border-radius: 4px;

    font-family: var(--sans);

    font-weight: 600;

    font-size: 13px;

    color: #fff;

  }

  .dg-card--featured:has(.dg-card-image) .dg-card-excerpt,

  .home .dg-small-grid > .dg-card--small:first-child:has(.dg-card-image) .dg-card-excerpt { grid-area: 2 / 1 / 3 / 2; margin-top: 12px; }

  /* Op de mobiele voorpagina geen samenvattingen onder de kaarten (NOS-stijl). */

  .home .dg-card-excerpt { display: none; }

  .dg-card--featured .dg-card-title { font-size: 32px; }

  .dg-article-title { font-size: 36px; }

  .dg-article-image img { aspect-ratio: 16 / 9; }

  .dg-page-header h1 { font-size: 36px; }

}

/* Telefoon: alles in één kolom, zodat het rustig en leesbaar blijft. */

@media (max-width: 560px) {

  .dg-container { padding: 0 16px; }

  .dg-nav.open { padding: 4px 16px 12px; }

  .dg-small-grid, .dg-archive-grid, .dg-theme-grid { grid-template-columns: 1fr; gap: 28px; }

  .dg-card--small .dg-card-title { font-size: 22px; }

  .dg-theme-title { font-size: 26px; }

  .dg-sidebar { padding: 28px 20px 14px; }

  .dg-card--featured:has(.dg-card-image) .dg-card-title,

  .home .dg-small-grid > .dg-card--small:first-child:has(.dg-card-image) .dg-card-title { font-size: 23px; margin: 0 14px 13px; }

  .dg-article-title { font-size: 32px; }

}

/* ========================================================================== */

/* Mobiele homepage — NOS-hiërarchie                                          */

/* 1 hoofdkaart, 2 rechthoekige kaarten met titel eronder, daarna nieuwslijst */

/* ========================================================================== */

@media (max-width: 700px) {

  /* Laat de kaarten uit de twee bestaande PHP-grids samen in één mobiele

     volgorde lopen, zonder de desktopindeling te veranderen. */

  .home .dg-home-grid > :first-child:not(.dg-sidebar) {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    column-gap: 14px;

    row-gap: 18px;

    min-width: 0;

  }

  .home .dg-featured-grid,

  .home .dg-small-grid {

    display: contents;

    margin-top: 0;

    gap: 0;

  }

  .home .dg-home-grid > :first-child:not(.dg-sidebar) > :not(.dg-featured-grid):not(.dg-small-grid) {

    grid-column: 1 / -1;

    order: 20;

  }

  /* Hoofdkaart. */

  .home .dg-featured-grid > .dg-card:first-child {

    grid-column: 1 / -1;

    order: 1;

    position: relative;

    display: grid !important;

    grid-template-columns: minmax(0, 1fr) !important;

    min-width: 0;

  }

  .home .dg-featured-grid > .dg-card:first-child > a:not(.dg-eyebrow),

  .home .dg-featured-grid > .dg-card:first-child .dg-card-title,

  .home .dg-featured-grid > .dg-card:first-child .dg-eyebrow {

    grid-area: 1 / 1 !important;

  }

  .home .dg-featured-grid > .dg-card:first-child .dg-card-image {

    width: 100%;

    height: auto;

    aspect-ratio: 4 / 3 !important;

  }

  .home .dg-featured-grid > .dg-card:first-child .dg-card-image::after {

    content: "";

    display: block !important;

    position: absolute;

    inset: 0;

    background: linear-gradient(

      to top,

      rgba(17, 14, 10, 0.82) 0%,

      rgba(17, 14, 10, 0.38) 44%,

      rgba(17, 14, 10, 0.02) 72%

    ) !important;

    pointer-events: none;

  }

  .home .dg-featured-grid > .dg-card:first-child .dg-card-title {

    align-self: end;

    z-index: 2;

    margin: 0 18px 18px !important;

    color: #fff !important;

    font-family: var(--serif);

    font-size: clamp(24px, 6.4vw, 28px) !important;

    font-weight: 700;

    line-height: 1.16;

    letter-spacing: -0.25px;

    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45) !important;

    display: -webkit-box;

    -webkit-line-clamp: 4;

    -webkit-box-orient: vertical;

    overflow: hidden;

  }

  .home .dg-featured-grid > .dg-card:first-child .dg-card-title a {

    color: #fff !important;

  }

  /* Kaart 2 en 3: exact dezelfde rechthoekige foto, zwarte titel eronder. */

  .home .dg-featured-grid > .dg-card:nth-child(2) {

    order: 2;

  }

  .home .dg-small-grid > .dg-card:first-child {

    order: 3;

  }

  .home .dg-featured-grid > .dg-card:nth-child(2):has(.dg-card-image),

  .home .dg-small-grid > .dg-card:first-child:has(.dg-card-image) {

    position: relative;

    display: flex !important;

    flex-direction: column !important;

    align-self: start;

    min-width: 0;

    overflow: visible;

  }

  .home .dg-featured-grid > .dg-card:nth-child(2):has(.dg-card-image) > a:not(.dg-eyebrow),

  .home .dg-small-grid > .dg-card:first-child:has(.dg-card-image) > a:not(.dg-eyebrow) {

    display: block !important;

    width: 100%;

    order: 1;

    grid-area: auto !important;

  }

  .home .dg-featured-grid > .dg-card:nth-child(2) .dg-card-image,

  .home .dg-small-grid > .dg-card:first-child .dg-card-image {

    width: 100% !important;

    height: auto !important;

    aspect-ratio: 4 / 3 !important;

    border-radius: var(--dg-radius);

    overflow: hidden;

  }

  .home .dg-featured-grid > .dg-card:nth-child(2) .dg-card-image img,

  .home .dg-small-grid > .dg-card:first-child .dg-card-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

  }

  .home .dg-featured-grid > .dg-card:nth-child(2) .dg-card-image::after,

  .home .dg-small-grid > .dg-card:first-child .dg-card-image::after {

    content: none !important;

    display: none !important;

    background: none !important;

  }

  .home .dg-featured-grid > .dg-card:nth-child(2) .dg-card-title,

  .home .dg-small-grid > .dg-card:first-child .dg-card-title {

    position: static !important;

    order: 2;

    grid-area: auto !important;

    align-self: auto !important;

    z-index: auto !important;

    margin: 9px 0 0 !important;

    color: var(--dg-ink) !important;

    font-family: var(--sans);

    font-size: clamp(15px, 4vw, 17px) !important;

    font-weight: 500;

    line-height: 1.25;

    letter-spacing: 0;

    text-shadow: none !important;

    display: -webkit-box !important;

    -webkit-line-clamp: 4;

    -webkit-box-orient: vertical;

    overflow: hidden;

  }

  .home .dg-featured-grid > .dg-card:nth-child(2) .dg-card-title a,

  .home .dg-small-grid > .dg-card:first-child .dg-card-title a {

    color: var(--dg-ink) !important;

  }

  /* Thema van alle drie de bovenste kaarten linksboven in de afbeelding. */

  .home .dg-featured-grid > .dg-card:nth-child(-n + 2) .dg-eyebrow,

  .home .dg-small-grid > .dg-card:first-child .dg-eyebrow {

    position: absolute !important;

    top: 9px;

    left: 9px;

    right: auto !important;

    bottom: auto !important;

    grid-area: auto !important;

    justify-self: auto !important;

    align-self: auto !important;

    z-index: 4;

    margin: 0 !important;

    padding: 3px 8px;

    border-radius: 4px;

    background: rgba(17, 14, 10, 0.64);

    color: #fff !important;

    font-family: var(--sans);

    font-size: 11px !important;

    font-weight: 600;

    line-height: 1.3;

  }

  .home .dg-card-excerpt {

    display: none !important;

  }

  /* Kaart 4 en verder: compacte horizontale lijst. Foto blijft hoger dan de

     maximaal vier titelregels. */

  .home .dg-small-grid > .dg-card:nth-child(n + 2) {

    grid-column: 1 / -1;

    order: 4;

    display: grid !important;

    grid-template-columns: 116px minmax(0, 1fr) !important;

    grid-template-rows: 100px;

    gap: 13px;

    align-items: center;

    min-width: 0;

    padding: 16px 0;

    border-bottom: 1px solid var(--dg-line);

  }

  .home .dg-small-grid > .dg-card:nth-child(n + 2) > a:not(.dg-eyebrow) {

    grid-column: 1;

    grid-row: 1;

    width: 116px;

    height: 100px;

  }

  .home .dg-small-grid > .dg-card:nth-child(n + 2) .dg-card-image {

    width: 116px !important;

    height: 100px !important;

    aspect-ratio: auto !important;

    border-radius: 7px;

    overflow: hidden;

  }

  .home .dg-small-grid > .dg-card:nth-child(n + 2) .dg-card-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

  }

  .home .dg-small-grid > .dg-card:nth-child(n + 2) .dg-eyebrow {

    display: none !important;

  }

  .home .dg-small-grid > .dg-card:nth-child(n + 2) .dg-card-title {

    grid-column: 2;

    grid-row: 1;

    align-self: center;

    margin: 0 !important;

    color: var(--dg-ink);

    font-family: var(--sans);

    font-size: 15px !important;

    font-weight: 600;

    line-height: 1.22;

    letter-spacing: 0;

    display: -webkit-box !important;

    -webkit-line-clamp: 4;

    -webkit-box-orient: vertical;

    max-height: 73.2px;

    overflow: hidden;

  }

  .dg-main {

    padding-top: 28px;

  }

  .dg-article-title {

    font-size: 32px;

  }

  .dg-article-image img {

    aspect-ratio: 16 / 9;

  }

}

@media (max-width: 390px) {

  .home .dg-home-grid > :first-child:not(.dg-sidebar) {

    column-gap: 11px;

  }

  .home .dg-featured-grid > .dg-card:nth-child(2) .dg-card-title,

  .home .dg-small-grid > .dg-card:first-child .dg-card-title {

    font-size: 14.5px !important;

    line-height: 1.23;

  }

  .home .dg-small-grid > .dg-card:nth-child(n + 2) {

    grid-template-columns: 106px minmax(0, 1fr) !important;

    grid-template-rows: 94px;

    gap: 12px;

  }

  .home .dg-small-grid > .dg-card:nth-child(n + 2) > a:not(.dg-eyebrow),

  .home .dg-small-grid > .dg-card:nth-child(n + 2) .dg-card-image {

    width: 106px !important;

    height: 94px !important;

  }

  .home .dg-small-grid > .dg-card:nth-child(n + 2) .dg-card-title {

    font-size: 14px !important;

    line-height: 1.2;

    max-height: 67.2px;

  }

}

/* ========================================================================== */

/* Mobiele verfijning — extra titelregel, strakkere afstanden en nieuwslijst  */

/* ========================================================================== */

@media (max-width: 700px) {

  /* Maak de horizontale en verticale ruimte rond de bovenste drie kaarten gelijk. */

  .home .dg-home-grid > :first-child:not(.dg-sidebar) {

    column-gap: 14px;

    row-gap: 14px;

  }

  /* Eén extra regel voor langere titels onder kaart twee en drie. */

  .home .dg-featured-grid > .dg-card:nth-child(2) .dg-card-title,

  .home .dg-small-grid > .dg-card:first-child .dg-card-title {

    -webkit-line-clamp: 5;

  }

  /* De eerste horizontale nieuwsregel krijgt niet nogmaals extra bovenruimte. */

  .home .dg-small-grid > .dg-card:nth-child(2) {

    padding-top: 0;

  }

  /* Rechthoekigere lijstfoto en kleinere titel, beide netjes verticaal gecentreerd. */

  .home .dg-small-grid > .dg-card:nth-child(n + 2) {

    grid-template-columns: 132px minmax(0, 1fr) !important;

    grid-template-rows: 88px;

    gap: 16px;

    align-items: center;

  }

  .home .dg-small-grid > .dg-card:nth-child(n + 2) > a:not(.dg-eyebrow),

  .home .dg-small-grid > .dg-card:nth-child(n + 2) .dg-card-image {

    width: 132px !important;

    height: 88px !important;

  }

  .home .dg-small-grid > .dg-card:nth-child(n + 2) .dg-card-title {

    align-self: center;

    font-size: 14px !important;

    line-height: 1.24;

    -webkit-line-clamp: 4;

    max-height: 69.5px;

  }

}

@media (max-width: 390px) {

  .home .dg-home-grid > :first-child:not(.dg-sidebar) {

    column-gap: 11px;

    row-gap: 11px;

  }

  .home .dg-small-grid > .dg-card:nth-child(n + 2) {

    grid-template-columns: 118px minmax(0, 1fr) !important;

    grid-template-rows: 82px;

    gap: 13px;

  }

  .home .dg-small-grid > .dg-card:nth-child(n + 2) > a:not(.dg-eyebrow),

  .home .dg-small-grid > .dg-card:nth-child(n + 2) .dg-card-image {

    width: 118px !important;

    height: 82px !important;

  }

  .home .dg-small-grid > .dg-card:nth-child(n + 2) .dg-card-title {

    font-size: 13.5px !important;

    line-height: 1.22;

    max-height: 65.9px;

  }

}

/* ========================================================================== */

/* Definitieve mobiele uitlijning — lijstitems exact tussen de lijnen          */

/* ========================================================================== */

@media (max-width: 700px) {

  /* Houd alleen tussen de drie hoofdkaarten de gewone 14px gridruimte over.

     Bij de horizontale lijstregels wordt die gridruimte opgeheven, zodat de

     onderste lijn van het ene artikel meteen de bovenste lijn van het volgende

     artikel vormt. */

  .home .dg-small-grid > .dg-card:nth-child(n + 3) {

    margin-top: -14px !important;

  }

  /* Eerste lijstregel: eigen bovenlijn. Alle regels hebben daarna exact

     dezelfde vaste hoogte. Met 88px beeld + 22px boven + 22px onder staat het

     beeld werkelijk in het midden tussen de scheidingslijnen. */

  .home .dg-small-grid > .dg-card:nth-child(2) {

    border-top: 1px solid var(--dg-line);

  }

  .home .dg-small-grid > .dg-card:nth-child(n + 2) {

    box-sizing: border-box;

    height: 133px !important;

    min-height: 133px !important;

    padding: 22px 0 !important;

    margin-bottom: 0 !important;

    align-items: center !important;

    align-content: center !important;

  }

  .home .dg-small-grid > .dg-card:nth-child(n + 2) > a:not(.dg-eyebrow),

  .home .dg-small-grid > .dg-card:nth-child(n + 2) .dg-card-image,

  .home .dg-small-grid > .dg-card:nth-child(n + 2) .dg-card-title {

    align-self: center !important;

    margin-top: 0 !important;

    margin-bottom: 0 !important;

  }

}

@media (max-width: 390px) {

  .home .dg-small-grid > .dg-card:nth-child(n + 3) {

    margin-top: -11px !important;

  }

  /* 82px beeld + 20px boven + 20px onder + de lijn. */

  .home .dg-small-grid > .dg-card:nth-child(n + 2) {

    height: 123px !important;

    min-height: 123px !important;

    padding: 20px 0 !important;

  }

}

/* ========================================================================== */

/* Fotobron rechtsonder in de artikelfoto — compacte NOS-achtige bronbadge   */

/* ========================================================================== */

.dg-article-image {

  position: relative;

}

.dg-article-image figcaption {

  position: absolute;

  right: 10px;

  bottom: 10px;

  z-index: 3;

  max-width: calc(100% - 20px);

  margin: 0;

  padding: 4px 8px;

  overflow: hidden;

  border: 0;

  border-radius: 5px;

  background: rgba(24, 24, 24, 0.76);

  color: #fff;

  font-family: var(--sans);

  font-size: 11px;

  font-weight: 600;

  line-height: 1.2;

  text-align: right;

  text-overflow: ellipsis;

  white-space: nowrap;

  box-shadow: none;

  text-shadow: none;

  backdrop-filter: blur(2px);

  -webkit-backdrop-filter: blur(2px);

}

.dg-article-image figcaption:empty {

  display: none;

}

.dg-article-image figcaption a {

  color: #fff;

  text-decoration: none;

}

@media (max-width: 700px) {

  .dg-article-image figcaption {

    right: 8px;

    bottom: 8px;

    max-width: calc(100% - 16px);

    padding: 4px 7px;

    font-size: 10.5px;

  }

}

/* ========================================================================== */
/* Mobiele zoekbalk — blijft altijd binnen het scherm                         */
/* ========================================================================== */

@media (max-width: 860px) {

  /* Voorkom dat de zoekbalk of een onderliggend formulier breder wordt dan
     de mobiele viewport. */
  .dg-searchbar,
  .dg-searchbar .dg-container,
  .dg-searchbar form,
  .dg-searchbar .search-form {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .dg-searchbar {
    overflow-x: clip;
    padding: 12px 0;
  }

  .dg-searchbar .dg-container {
    padding-left: 16px;
    padding-right: 16px;
  }

  .dg-searchbar form,
  .dg-searchbar .search-form {
    display: flex !important;
    align-items: stretch;
    gap: 8px !important;
    margin: 0 !important;
  }

  /* width: 0 is hier bewust: hierdoor mag Safari het invoervak echt laten
     krimpen en duwt het de knop niet buiten beeld. */
  .dg-searchbar input[type="search"],
  .dg-searchbar .search-field {
    flex: 1 1 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 10px 11px !important;
    font-size: 16px !important;
    line-height: 1.25;
  }

  .dg-searchbar button,
  .dg-searchbar input[type="submit"],
  .dg-searchbar .search-submit {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 88px !important;
    padding: 10px 12px !important;
    font-size: 14px !important;
    line-height: 1.25;
    white-space: nowrap;
  }

}

@media (max-width: 390px) {

  .dg-searchbar .dg-container {
    padding-left: 12px;
    padding-right: 12px;
  }

  .dg-searchbar form,
  .dg-searchbar .search-form {
    gap: 6px !important;
  }

  .dg-searchbar button,
  .dg-searchbar input[type="submit"],
  .dg-searchbar .search-submit {
    max-width: 78px !important;
    padding-left: 9px !important;
    padding-right: 9px !important;
    font-size: 13px !important;
  }

}