/* /////// Voorpagina en tags */

:root {
  /* Layout */
  --ml-maxw: 1300px;
  --ml-gap-x: clamp(18px, 2.3vw, 28px);   /* horizontale ruimte */
  --ml-gap-y: clamp(26px, 3.2vw, 44px);   /* verticale ruimte (groter) */
  --ml-pad-x: clamp(12px, 2vw, 24px);
  --ml-pad-y-top: clamp(6px, 1vw, 12px);
  --ml-pad-y-bottom: clamp(12px, 2vw, 24px);

  /* Kleuren & UI (altijd licht) */
  --ml-page: black;        /* lichtblauwe sectie-achtergrond */
  --ml-radius: 14px;
  --ml-shadow: 0 1px 2px rgba(0,0,0,.05), 0 6px 18px rgba(0,0,0,.08);
  --ml-shadow-hover: 0 2px 6px rgba(0,0,0,.06), 0 10px 24px rgba(0,0,0,.12);
  --ml-accent: #0ea5e9;

  --ml-text: #111827;        /* tekstkleur op kaarten */
  --ml-muted: #6b7280;
  --ml-border: #e5e7eb;
  --ml-surface: #ffffff;     /* kaart-achtergrond */
  --ml-surface-2: #f1f5f9;   /* media-placeholder */
  color-scheme: light;
}

/* Container (lichtblauwe achtergrond) */
.ml-wrap {
  max-width: var(--ml-maxw);
  margin-inline: auto;
  padding: var(--ml-pad-y-top) var(--ml-pad-x) var(--ml-pad-y-bottom);
  background: var(--ml-page);
  color: var(--ml-text);
  border-radius: 18px;
}

/* Grids: meer verticale ruimte dan horizontale */
.ml-grid { display: grid; gap: var(--ml-gap-y) var(--ml-gap-x); }
.ml-row1 { grid-template-columns: 2fr 3fr; align-items: stretch; }
.ml-right4 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  row-gap: calc(var(--ml-gap-y) * .85);
  column-gap: calc(var(--ml-gap-x) * .85);
}
.ml-row4, .ml-row4b { grid-template-columns: repeat(4, 1fr); }
.ml-row3, .ml-row3b, .ml-row3rand { grid-template-columns: repeat(3, 1fr); }

/* Card */
.ml-card {
  display: flex; flex-direction: column;
  background: var(--ml-surface);
  border: 1px solid var(--ml-border);
  border-radius: var(--ml-radius);
  box-shadow: var(--ml-shadow);
  overflow: hidden; /* compatibel en knipt kinderen netjes af */
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  will-change: auto;
}
.ml-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--ml-shadow-hover);
  will-change: transform;
}
.ml-card:focus-within {
  border-color: var(--ml-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ml-accent) 30%, transparent);
}

/* Media + image */
.ml-media {
  display: block;
  width: 100%;
  background: var(--ml-surface-2);
  position: relative;
  border-radius: inherit; /* zorgt voor ronde hoeken als er geen kicker boven zit */
}
.ml-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit; /* erft van .ml-media/.ml-card */
}

/* Titel / caption / excerpt */
.ml-title {
  font-weight: 650; line-height: 1.25;
  font-size: clamp(.98rem, 1.2vw, 1.06rem);
  margin: .65rem .9rem 0 .9rem;
  text-wrap: balance;
}
.ml-title a { color: inherit; text-decoration: none; outline-offset: 3px; }
.ml-title a:hover { text-decoration: underline; text-underline-offset: 2px; }

.ml-caption { color: var(--ml-muted); margin: .6rem .9rem 0 .9rem; font-size: .9rem; line-height: 1.35; }
.ml-caption a { color: inherit; text-decoration: none; }
.ml-caption a:hover { text-decoration: underline; text-underline-offset: 2px; }

.ml-excerpt {
  margin: .45rem .9rem .9rem .9rem;
  color: var(--ml-text);
  line-height: 1.5;
  font-size: .95rem;
}

/* Clamps voor strakke lijnen */
.ml-right4 .ml-caption { min-height: 1.6em; }
.ml-right4 .ml-excerpt {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  min-height: calc(1em * 3.8);
}
.ml-row4 .ml-title, .ml-row4b .ml-title, .ml-row3 .ml-title, .ml-row3b .ml-title, .ml-row3rand .ml-title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: calc(1em * 2.6);
}
.ml-row4 .ml-excerpt, .ml-row4b .ml-excerpt, .ml-row3 .ml-excerpt, .ml-row3b .ml-excerpt, .ml-row3rand .ml-excerpt {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  min-height: calc(1em * 4.0);
}

/* Hero (uitgelicht3): label boven, media vult, rest onder */
.ml-hero { display: grid; grid-template-rows: auto 1fr auto auto; height: 100%; }
.ml-hero .ml-title { font-size: clamp(1.05rem, 1.4vw, 1.18rem); }

/* Kicker/vak boven de afbeelding (uitgelicht*_tekst) — kaartbreed en naadloos */
.ml-kickerbox {
  margin: .75rem 0 0 0;               /* volle kaartbreedte */
  padding: .5rem .75rem;
  background: var(--ml-surface-2, #f1f5f9);
  border: 1px solid var(--ml-border, #e5e7eb);
  border-radius: var(--ml-radius, 14px) var(--ml-radius, 14px) 0 0; /* boven afgerond, onder recht */
  box-shadow: var(--ml-shadow, 0 1px 2px rgba(0,0,0,.05), 0 6px 18px rgba(0,0,0,.08));
  color: var(--ml-text, #111827);
  line-height: 1.35;
  font-size: .95rem;
}

/* Naadloze aansluiting: als kickerbox direct vóór media komt, maak bovenkant afbeelding recht */
.ml-card .ml-kickerbox + .ml-media { border-top-left-radius: 0; border-top-right-radius: 0; }
.ml-card .ml-kickerbox + .ml-media .ml-img { border-top-left-radius: 0; border-top-right-radius: 0; }

/* Specifiek voor de hero: top precies laten aansluiten met rechterkolom */
.ml-row1 .ml-hero .ml-kickerbox { margin-top: 0; }

/* Responsiveness */
@media (max-width: 1024px) {
  .ml-row4, .ml-row4b { grid-template-columns: repeat(2, 1fr); }
  .ml-row3, .ml-row3b, .ml-row3rand { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .ml-row1 { grid-template-columns: 1fr; }
  .ml-right4, .ml-row4, .ml-row4b, .ml-row3, .ml-row3b, .ml-row3rand { grid-template-columns: 1fr; }
  .ml-title { font-size: 1rem; }
}

/* Performance */
@media (prefers-reduced-motion: reduce) {
  .ml-card, .ml-card:hover { transition: none; transform: none; }
}
.ml-media { content-visibility: auto; contain-intrinsic-size: 300px 200px; }

/* Uitgelicht 1+2: desktop 2 kolommen, mobiel stapelen */
.ml-featured2 { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 768px) {
  .ml-featured2 { grid-template-columns: 1fr; }
}
/* Meer ruimte tussen kaarten die onder elkaar staan */
@media (max-width: 1024px) {
  .ml-grid { row-gap: calc(var(--ml-gap-y) * 1.25); }
}

@media (max-width: 768px) {
  /* Alle grids: extra verticale ruimte op mobiel */
  .ml-grid { row-gap: calc(var(--ml-gap-y) * 1.6); }

  /* Rechterblok had verlaagde row-gap; zet die juist ruimer op mobiel */
  .ml-right4 { row-gap: calc(var(--ml-gap-y) * 1.6) !important; }
}


/* Extra ruimte tussen opeenvolgende grid-secties */
.ml-grid + .ml-grid {
  margin-top: calc(var(--ml-gap-y) * 0.45);
}

/* Op mobiel iets royaler */
@media (max-width: 768px) {
  .ml-grid + .ml-grid { margin-top: calc(var(--ml-gap-y) * 1.1); }
}
.ml-error {
    color: red;
    font-weight: bold;
    text-align: center;
    padding: 1rem;
}

.ml-pagination {
    display: flex;
    justify-content: center;
    gap: 0.3rem; /* Kleinere gap voor compactere paginering */
    margin-top: var(--ml-gap-y);
}

.ml-pagination ul {
    list-style: none;
    padding: 0;
    display: inline-flex;
    gap: 0.5rem;
}

.ml-pagination li {
    display: inline-block;
}

.ml-pagination a,
.ml-pagination span {
    padding: 0.5rem 1rem;
    border: 1px solid #ddd;
    border-radius: 0.3rem;
    text-decoration: none;
    color: #333;
}

.ml-pagination a:hover,
.ml-pagination a:focus {
    background: #0073aa;
    color: #fff;
    border-color: #0073aa;
}

.ml-pagination .current {
    background: var(--ml-accent);
    color: white;
    border-color: var(--ml-accent);
}

.ml-pagination a, .ml-pagination span {
    padding: 0.4rem 0.8rem; /* Kleinere padding voor kleinere knoppen */
    border: 1px solid var(--ml-border);
    border-radius: var(--ml-radius);
    background: var(--ml-surface);
    color: var(--ml-text);
    text-decoration: none;
    font-size: 0.85rem; /* Kleinere lettergrootte */
    line-height: 1.2;
}

.ml-hero {
    margin-bottom: 1.5rem;
}

.ml-hero-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 0.5rem;
    padding: 1rem;
}
/* Forceer consistente hoogtes per rij in alle browsers, incl. Chrome */
.ml-grid > .ml-card .ml-media {
  aspect-ratio: var(--ml-ratio, 3 / 2); /* fallback 3:2 */
  display: block;
  width: 100%;
  overflow: hidden;
}

.ml-grid > .ml-card .ml-media .ml-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}