/* ==== A365 HOME (frontpage-specifiek) =================================
   Alles wat exclusief is voor de voorpagina: hero/mini/rail, badges,
   ad-wrappers, duo/more, mobile separators, sponsored, etc.
   ==================================================================== */

/* rail sticky helper */
.rail-sticky { position:relative; }
.rail-sticky .ad--skyscraper { position:sticky; }

/* ===== Meer 1 & 2: desktop lager dan breed ===== */
@media (min-width:768px){ .more-line > .hero-card .hero-media{ height:auto; aspect-ratio:16/10; } }
@media (min-width:768px){ @supports not (aspect-ratio:1 / 1){ .more-line > .hero-card .hero-media{ height:330px; } } }
/* kleinere headline desktop */
@media (min-width:768px){ .more-line > .hero-card .hero-title{ font-size:clamp(1.1rem,0.9rem + 0.7vw,1.5rem); } }



/* ======= Meer 1 & 2 — desktop anti-jitter ======= */
@media (min-width:768px){
  .more-line > .hero-card{ --overscan:2px; }
  .more-line > .hero-card .hero-media{
    position:relative; overflow:hidden; border-radius:var(--radius);
    height:auto; aspect-ratio:16/10; contain:paint;
  }
  .more-line > .hero-card .hero-media img{
    position:absolute; inset:calc(var(--overscan)*-1);
    width:calc(100% + var(--overscan)*2); height:calc(100% + var(--overscan)*2);
    max-width:none; object-fit:cover; object-position:50% 50%;
    transform:translateZ(0) scale(1)!important; transition:transform .30s ease;
    backface-visibility:hidden; will-change:transform; border-radius:0!important;
  }
  .more-line > .hero-card:hover .hero-media img{ transform:translateZ(0) scale(var(--zoom))!important; }
  .more-line > .hero-card.has-grad::before{ inset:calc(var(--overscan)*-1); border-radius:inherit; }
}
@media (min-width:768px){
  @supports not (aspect-ratio:1 / 1){
    .more-line > .hero-card .hero-media{ height:300px; }
  }
}

/* =========================
   Frontpage — hero/mini/rail
   ========================= */
.section{ padding:0; background:transparent; border:0; }
.section--left{ grid-column:1; }
@media (min-width:768px){ .section--left{ grid-column:1/2; } }

.hero-line{ display:grid; gap:var(--gap); grid-template-columns:1fr; }
@media (min-width:768px){
  .hero-line{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .hero-line>article:first-child{ grid-column:span 2; }
  .hero-line>article:nth-child(2){ grid-column:span 1; }
}

.link-block{ display:block; color:inherit; text-decoration:none; }
.link-block:hover .title{ text-decoration:underline; text-decoration-color:currentColor; text-underline-offset:4px; text-decoration-thickness:1px; }

.hero-card{ position:relative; border:0; border-radius:var(--radius); overflow:hidden; background:transparent; }
.hero-media{ position:relative; height:var(--hero-h); overflow:hidden; border-radius:var(--radius); }

.hero-card.has-grad::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,.45) 85%, rgba(0,0,0,.7) 100%); z-index:1; border-radius:inherit;
}
.hero-overlay{ position:absolute; left:12px; right:12px; bottom:12px; z-index:2; }

.hero-title{ margin:0 0 6px; color:#fff; font-weight:650; line-height:1.1; text-shadow:0 2px 8px rgba(0,0,0,.6); font-size:clamp(1.25rem,1rem + 1vw,2.1rem); }
.hero-line>:nth-child(2) .hero-title{ font-size:clamp(1.05rem,.9rem + .7vw,1.45rem); }
.hero-meta{ margin:0; font-size:.85rem; color:#e5e7eb; opacity:.95; display:flex; gap:6px; }
.hero-meta .time, .hero-meta .replies{ text-decoration:none!important; }

/* Image system (jitter-vrij) */
.hero-media, .mini .media{ position:relative; overflow:hidden; border-radius:var(--radius); isolation:isolate; background:color-mix(in srgb,var(--bg) 94%, #000); }
.hero-media img, .mini .media img{
  position:absolute; inset:calc(var(--overscan)*-1);
  width:calc(100% + var(--overscan)*2); height:calc(100% + var(--overscan)*2);
  max-width:none; object-fit:cover; object-position:50% 50%;
  transform-origin:50% 50%; transform:none; transition:transform .35s ease; backface-visibility:hidden; border-radius:0!important;
}
.hero-card:hover .hero-media img, .mini:hover .media img{ transform:scale(var(--zoom)); will-change:transform; }
@media (prefers-reduced-motion:reduce){
  .hero-media img, .mini .media img{ transition:none; }
  .hero-card:hover .hero-media img, .mini:hover .media img{ transform:none; }
}

/* minis / grids */
.hero-follow{ display:grid; gap:var(--gap); grid-template-columns:1fr; margin-top:var(--gap); }
@media (min-width:768px){ .hero-follow{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.mini{ background:transparent; border:0; }
.mini .media{ height:var(--hero-h); }
.mini .title{ margin:.5rem 0 .25rem; font-weight:700; font-size:clamp(1.10rem,.9rem + .4vw,1.05rem); line-height:1.2; padding:0  4px 4px;transition: color .18s ease, text-decoration-color .18s ease; }
.mini .meta{ font-size:.85rem; color:var(--muted); }
.mini .meta .time{ text-decoration:none!important; padding:0 0 4px 4px; }
@media (min-width:768px){ .mini .media{ height:auto; aspect-ratio:16/9; } }

/* Rail */
aside.rail{ display:block; width:auto; grid-column:1; margin-top:var(--gap); }
@media (min-width:768px){ aside.rail{ grid-column:2; align-self:start; margin-top:0; } }

.rail .latest{
  margin-bottom:var(--col-gap-desktop);
  padding:16px 0  0;
  border:0px solid var(--border)!important;border-top:0px solid var(--muted)!important;
  border-radius:var(--radius);
  background:color-mix(in srgb,var(--bg),white 6%);
 
}
@media (max-width:767.98px){
.rail .latest{
  margin-bottom:var(--col-gap-desktop);
  padding:16px 0  0;
  border:0px solid var(--border)!important;border-top:0px solid var(--muted)!important;
  border-radius:var(--radius);
  background:var(--bg)!important;}

.rail .latest a{
  display:block; color:inherit; text-decoration:none;
  padding:12px 12px 8px 0px!important; margin-top:0;
  border-bottom:1px solid var(--border); line-height:1.25rem;border-left:0px solid var(--border);
}

.rail .latest-title{ margin:-12px 0 16px 0!important; padding-left:8px!important; font-size:1.15rem;line-height:1; font-weight:750; width:100%!important;border-bottom:0px solid var(--border)!important;border-left: 6px solid var(--muted)!important;letter-spacing: 0.5px; }
.rail .latest-title span{ display:inline-block; padding:1px 8px 1px 0!important; margin-bottom:-1px; color:var(--text);text-transform: uppercase; border-radius:0 var(--radius) 0 0; }
	
}


.rail .latest-title{ margin:-8px 0 16px 0; padding-left:11px; font-size:1.15rem;line-height:1.1; font-weight:750; width:100%!important;border-bottom:0px solid var(--border)!important;border-left: 6px solid var(--brand);letter-spacing: 0.5px; }
.rail .latest-title span{ display:inline-block; padding:0px 8px 2px 0; margin-bottom:-1px; color:var(--text);text-transform: uppercase; border-radius:0 var(--radius) 0 0; }

.rail .latest-list{ list-style:none; margin:0; padding:0; }
.rail .latest-list li+li{ margin-top:0; padding-top:0; }
.rail .latest a{
  display:block; color:inherit; text-decoration:none;
  padding:12px 12px 8px 4px; margin-top:0;
  border-bottom:1px solid var(--border); line-height:1.25rem;border-left:0px solid var(--border);
}

.rail .latest li:first-child a{ margin-bottom:0; padding-top:12px;border-top:1px solid var(--border); }
.rail .latest li:last-child a{ border-bottom:none!important; padding-bottom:8px; }
.rail .latest a:hover .t{ color:var(--brand); text-decoration:underline; text-decoration-color:currentColor; text-underline-offset:4px; text-decoration-thickness:1px;}


.rail .latest time.tm{
  display:inline-flex; align-items:center; gap:6px; font-weight:500;
  color:var(--muted); font-size:.85rem; margin-top:4px; padding-bottom:4px;
}
.rail .latest time.tm::after{ content:""; inline-size:6px; block-size:6px; margin-top:3px; border-radius:50%; background:var(--brand,var(--muted)); }
.rail .latest .cat-label{ text-transform:uppercase; letter-spacing:.02em; font-weight:400; color:var(--muted); margin-left:5px; font-size:.75rem; }

.rail .latest time.tm[data-cat="Voorpagina"]{ --cat-color:#185aa6; }
.rail .latest time.tm[data-cat="Binnenland"]{ --cat-color:#f4511e; }
.rail .latest time.tm[data-cat="Buitenland"]{ --cat-color:#185aa6; }
.rail .latest time.tm[data-cat="Regionaal"]{ --cat-color:#fb8c00; }
.rail .latest time.tm[data-cat="Sport"]{ --cat-color:#43a047; }
.rail .latest time.tm[data-cat="Politiek"]{ --cat-color:#3949ab; }
.rail .latest time.tm[data-cat="Economie"]{ --cat-color:#00897b; }
.rail .latest time.tm[data-cat="Tech"]{ --cat-color:#00acc1; }
.rail .latest time.tm[data-cat="Wetenschap"]{ --cat-color:#6d4c41; }
.rail .latest time.tm[data-cat="Amusement"]{ --cat-color:#e53935; }
.rail .latest time.tm[data-cat="Kunst en Cultuur"]{ --cat-color:#7b1fa2; }
.rail .latest time.tm[data-cat="Opmerkelijk"]{ --cat-color:#c0ca33; }
.rail .latest time.tm[data-cat="Weer"]{ --cat-color:#0288d1; }
.rail .latest .t{ display:block; font-size:1.04rem; line-height:1.35rem; font-weight:400;transition: color .18s ease, text-decoration-color .18s ease; }

/* Ads in rail */
.rail .ad,
.rail .ad:last-child{
  width:100%; max-width:300px; min-height:250px; height:auto;
  display:grid; place-items:center; /*background:var(--border);*/ border:0; border-radius:var(--radius);
  margin-bottom:var(--col-gap-desktop);
}
.rail .ad:last-child{ margin-top:32px; }
.rail .ad--skyscraper{ margin-bottom:0!important; }

/* mobiel rail tweaks */
@media (max-width:767.98px){
  aside.rail .ad{ margin:auto!important; }
  .rail .latest .t{ font-size:.95rem; font-weight:500; padding-right:8px!important; }
  .rail .latest{ margin: 32px 0px 32px; padding-top:8px; border-left:none;  }
  .rail .latest-title{ margin-top:8px; }
  .rail .latest-title span{ padding:0px 8px 0px 0px; }
  .rail .latest a:hover .t{ color:var(--text); }
  .rail .latest time.tm::after{ margin-top:0; }

  .mini .title{ margin:.5rem 0 .25rem; font-weight:700; font-size:clamp(1.10rem,.9rem + .4vw,1.20rem); line-height:1.2; padding:0; }
  .mini .meta .time{ padding:0; }

  .rail .ad:last-child{ margin-top:32px!important; }

  li .nav-btn{ padding:4px 10px!important; font-weight:500; font-size:.9rem;  }
}


/* In-article ads centreren + nette spacing */
.article-body .ad--inarticle {
  display: block;
  margin: 24px auto;      /* horizontaal centreren */
  line-height: 0;         /* geen extra witruimte rond iframe */
  clear: both;            /* niet naast floated afbeeldingen vallen */
}

/* Optioneel: iframe zelf ook blok en gecentreerd */
.article-body .ad--inarticle iframe {
  display: block;
  margin: 0 auto;
}

/* AD-WRAPPER (variant 1) */
.ad-wrapper{
  display:flex; justify-content:center; align-items:center;
  max-width:948px; margin:calc(var(--gap)/1.0) auto !important;
  padding:1px 0; background:rgba(0,0,0,0)!important; border-radius:var(--radius);
  color:#C0C0C0; font-weight:500;
}
.ad-wrapper .ad{
  display:flex; justify-content:center; align-items:center;
  width:100%; max-width:336px; min-height:280px; border:0; border-radius:var(--radius);
}
@media (min-width:768px){ .ad-wrapper .ad{ max-width:728px; min-height:90px; } }
.ad-wrapper .ad > img, .ad-wrapper .ad > iframe, .ad-wrapper .ad > ins{ display:block; margin:0 auto; max-width:100%; border:0; }
.hero-body{ padding:4px; }

/* MOBIEL: hero1 full-bleed + row-cards */
@media (max-width:767.98px){
  :root{ --container-mt:-8px; }
  .ad-wrapper{ margin:calc(var(--gap)/0.75) auto -4px auto!important; }
  .hero-line > .hero-card:first-child{
    width:100vw!important; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); border-radius:0;margin-bottom:4px!important;
  }
 .more-line > .hero-card:first-child{
    width:100vw!important; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); border-radius:0;margin-bottom:3px!important;
  }
  .hero-line > .hero-card:first-child .hero-media{ aspect-ratio:4/3; height:auto; border-radius:0; }
  .hero-line > .hero-card:first-child.has-grad::before{ border-radius:0; }
  .hero-line > .hero-card.has-grad:not(:first-child)::before{ display:none!important; }
  .hero-body{ padding:0; }

  .row-card{
    display:grid!important; grid-template-columns:minmax(80px,100px) 1fr!important;
    column-gap:10px!important; row-gap:0!important; align-items:stretch!important;
  }
  .row-card .hero-media, .row-card .media{
    grid-column:1!important; min-width:80px; max-width:100px; width:100%!important;
    aspect-ratio:4/3!important; height:auto!important; overflow:hidden; border-radius:var(--radius);
  }
  .row-card .hero-overlay, .row-card .hero-body{
    position:static!important; grid-column:2!important; display:flex!important; flex-direction:column!important; justify-content:center!important; min-width:0;
  }
  .row-card .hero-title, .row-card .title{
    margin:0 0 2px!important; line-height:1.25!important; font-weight:500!important;
    font-size:clamp(.93rem,.72rem + .6vw,.90rem)!important; color:var(--text)!important; text-shadow:none!important;
  }
  .row-card .hero-meta, .row-card .meta{
    display:flex!important; align-items:center!important; gap:6px!important; margin:0!important; line-height:1.2!important; font-size:.82rem!important; color:var(--muted)!important;
  }
  .row-card .hero-meta .time, .row-card .hero-meta .replies{ text-decoration:none!important; }
}

/* Desktop jitter-fix minis */
@media (min-width:768px){
  :root{ --overscan:2px; }
  .mini .media{ position:relative; overflow:hidden; border-radius:var(--radius); }
  .mini .media img{
    position:absolute; inset:calc(var(--overscan)*-1);
    width:calc(100% + var(--overscan)*2); height:calc(100% + var(--overscan)*2);
    max-width:none; object-fit:cover; object-position:50% 50%;
    transform:translateZ(0) scale(1)!important; transition:transform .30s ease; will-change:transform; border-radius:0!important;
  }
  .mini:hover .media img{ transform:translateZ(0) scale(var(--zoom))!important; }
}

/* HOTFIX desktop hero + rail */
@media (min-width:768px){
  .hero-card{ --overscan:1px; }
  .hero-card.has-grad::before{ inset:calc(var(--overscan)*-1); }
  .rail .latest{
    margin: var(--col-gap-desktop) 0; padding:8px  0 4px;
    border:1px solid var(--border); border-radius:var(--radius); background:color-mix(in srgb,var(--bg),white 6%);
    border-top:none; border-right:none; border-left:none;
  }
}

/* ADVERTENTIE onder Hero 3–5 (variant 2) */
.ad-wrapper{
  display:flex; justify-content:center; align-items:center; max-width:948px;
  margin:calc(var(--gap)/2) auto; padding:1px 0; background:#F7F7F7; border-radius:var(--radius);
  color:#C0C0C0; font-weight:500;
}
.ad{ display:flex; justify-content:center; align-items:center; width:100%; max-width:728px; min-height:90px; border:0; border-radius:var(--radius); }
.ad.ad-rect{ max-width:336px; min-height:280px; }

/* twee heldkaarten 50/50 */
.hero-line--half{ display:grid; gap:var(--gap); grid-template-columns:1fr; }
@media (min-width:768px){ .hero-line--half{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.section #s-more + .hero-line--half{ margin-top:var(--gap); }

/* mobiel separators ritme */
@media (max-width:767.98px){
  :root{ --mob-sep:var(--border); --mob-sep-w:1px; --mob-card-gap:2px; --mob-gap-adjust-top:1.6; --mob-gap-adjust-bottom:1.65; --mob-gap-adjust-mb:-16px; }
  .hero-line, .hero-follow{ gap:var(--mob-card-gap); }
  .hero-line > .hero-card:first-child{ margin-bottom:var(--mob-card-gap); }
  .hero-line > .hero-card:nth-child(2){
    padding-top:calc(var(--gap)/var(--mob-gap-adjust-top));
    padding-bottom:calc(var(--gap)/var(--mob-gap-adjust-bottom));
    border-bottom:var(--mob-sep-w) solid var(--mob-sep);
    margin-bottom:var(--mob-gap-adjust-mb);
  }
  .hero-follow > .mini{
    padding-top:calc(var(--gap)/1.8);
    padding-bottom:calc(var(--gap)/1.8);
    border-bottom:var(--mob-sep-w) solid var(--mob-sep);
    margin-bottom:var(--mob-card-gap);
  }
  *{ -webkit-tap-highlight-color:transparent; }
  /*html, body, *{ user-select:none; -webkit-user-select:none; -ms-user-select:none; -webkit-touch-callout:none; }*/

  .hero-line--half{ gap:var(--mob-card-gap); }
  .hero-line--half > .hero-card{
    padding-top:calc(var(--gap)/2); padding-bottom:calc(var(--gap)/2);
    border-bottom:var(--mob-sep-w) solid var(--mob-sep); margin-bottom:var(--mob-card-gap);
  }
  .hero-follow--more{ gap:var(--mob-card-gap); }
  .hero-follow--more > .mini{
    padding-top:calc(var(--gap)/2); padding-bottom:calc(var(--gap)/2);
    border-bottom:var(--mob-sep-w) solid var(--mob-sep); margin-bottom:var(--mob-card-gap);
  }
}

/* DUO-blok */
.duo-line{ display:grid; gap:var(--gap); grid-template-columns:1fr; }
@media (min-width:768px){
  .duo-line{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .duo-line > .hero-card{ grid-column:auto!important; }
}
@media (max-width:767.98px){
  .duo-line > .hero-card{
    width:auto!important; margin:0!important; border-radius:var(--radius);
    padding-top:calc(var(--gap)/2); padding-bottom:calc(var(--gap)/2);
    border-bottom:var(--mob-sep-w) solid var(--mob-sep); margin-bottom:var(--mob-card-gap);
  }
  .duo-line > .hero-card.has-grad::before{ display:none!important; }
  .duo-line > .hero-card .link-block{
    display:grid!important; grid-template-columns:minmax(80px,100px) 1fr!important;
    column-gap:12px!important; row-gap:0!important; align-items:stretch!important;
  }
  .duo-line > .hero-card .hero-media{
    grid-column:1!important; min-width:80px; max-width:100px; width:100%!important; aspect-ratio:4/3!important;
    height:auto!important; overflow:hidden; border-radius:var(--radius);
  }
  .duo-line > .hero-card .hero-overlay{
    position:static!important; grid-column:2!important; display:flex!important; flex-direction:column!important; justify-content:center!important; min-width:0;
  }
  .duo-line > .hero-card .hero-title{
    margin:0 0 2px!important; line-height:1.25!important; font-weight:700!important;
    font-size:clamp(.75rem,.72rem + .6vw,.90rem)!important; color:var(--text)!important; text-shadow:none!important;
  }
  .duo-line > .hero-card .hero-meta{
    display:flex!important; align-items:center!important; gap:6px!important; margin:0!important; line-height:1.2!important; font-size:.82rem!important; color:var(--muted)!important;
  }
}

/* MORE blokken */
.more-line{ display:grid; gap:var(--gap); grid-template-columns:1fr; }
@media (min-width:768px){ .more-line{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.more-follow{ display:grid; gap:var(--gap); grid-template-columns:1fr; margin-top:var(--gap); }
@media (min-width:768px){ .more-follow{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

@media (max-width:767.98px){
  .more-line > .hero-card:first-child{
    width:100vw!important; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); border-radius:0;margin-bottom:var(--mob-card-gap);
  }
  .more-line > .hero-card:first-child .hero-media{ aspect-ratio:4/3; height:auto; border-radius:0; }
  .more-line > .hero-card:first-child.has-grad::before{ border-radius:0; display:block!important; }

  .more-line > .hero-card:nth-child(2) .link-block{
    display:grid!important; grid-template-columns:minmax(80px,100px) 1fr!important;
    column-gap:12px!important; row-gap:0!important; align-items:stretch!important;
  }
  .more-line > .hero-card:nth-child(2) .hero-media{
    grid-column:1!important; min-width:80px; max-width:100%; width:100%!important;
    aspect-ratio:4/3!important; height:auto!important; overflow:hidden; border-radius:var(--radius);
  }
  .more-line > .hero-card:nth-child(2) .hero-overlay{
    position:static!important; grid-column:2!important; display:flex!important; flex-direction:column!important; justify-content:center!important; min-width:0;
  }
  .more-line > .hero-card:nth-child(2).has-grad::before{ display:none!important; }

  .more-line{ gap:var(--mob-card-gap); }
  .more-line > .hero-card:nth-child(2){
    padding-top:calc(var(--gap)/2); padding-bottom:calc(var(--gap)/2);
    border-bottom:var(--mob-sep-w) solid var(--mob-sep); margin-bottom:var(--mob-card-gap);
  }
  .more-follow{ gap:var(--mob-card-gap); }
  .more-follow > .mini{
    padding-top:calc(var(--gap)/2); padding-bottom:calc(var(--gap)/2);
    border-bottom:var(--mob-sep-w) solid var(--mob-sep); margin-bottom:var(--mob-card-gap);
  }

  .more-line > .hero-card:nth-child(2) .hero-title{
    margin:0 0 2px!important; line-height:1.25!important; font-weight:600!important;
    font-size:clamp(.93rem,.72rem + .6vw,.90rem)!important; color:var(--text)!important; text-shadow:none!important;
  }
  .more-line > .hero-card:nth-child(2) .hero-meta{ margin:0!important; line-height:1.2!important; font-size:.82rem!important; color:var(--muted)!important; }
  .more-line > .hero-card:nth-child(2) .hero-meta :is(.time,.replies){ text-decoration:none!important; }
  .more-line > .hero-card:last-child{ margin-bottom:calc(var(--gap)*-1)!important; }
}

/* Volledige card klikbaar + borders onder minis (desktop) */
@media (min-width:768px){
  .hero-card, .mini{ height:100%; }
  .hero-card > .link-block, .mini > .link-block{ display:block; height:100%!important;padding-bottom: 0!important; }
  .hero-follow > .mini:nth-child(-n+9) > .link-block,
  .more-follow  > .mini:nth-child(-n+9) > .link-block{
    border-bottom:1px solid var(--border);border-radius:0;
    padding-bottom:calc(var(--gap)/4)!important; margin-bottom:calc(var(--gap)/6);
  }
}

/* Sponsored minis */
.mini.sponsored--blue{ background:var(--spons-blue); border: 1px solid var(--spons-blue-border); }
.mini.sponsored--pink{ background:var(--spons-pink);border: 1px solid var(--spons-pink-border); }
.mini.sponsored--blue, .mini.sponsored--pink{ border-radius:var(--radius); overflow:hidden; }
@media (min-width:768px){ .mini.sponsored--blue, .mini.sponsored--pink{ padding:0; } }


/* Sponsorlabels */
.sponsor-label{
  display:block; margin-bottom:-4px; font-size:.85rem; letter-spacing:.05em; text-transform:normal; color:#d32f2f;
}
@media (max-width:767.98px){
  .sponsor-label{ margin-bottom:2px; margin-top:0; font-size:.80rem; }
}
.sponsor-label--content, .sponsor-label--link{ color:var(--muted);font-weight:400!important;font-size:0.80rem; }
.sponsor-label--content.live{ color:var(--brand-3);font-weight:700!important;letter-spacing: 0.25px;font-size:0.80rem;line-height:1.1rem;text-transform: uppercase; }

/* Rail sticky ad top + hoverkleuren */
@media (min-width:768px){
  aside.rail .ad--skyscraper{ position:sticky; top:calc(var(--header-h,56px) + 84px); }
	.sponsor-label{ padding:0 0 0 4px!important; font-weight:500;}
	

  html[data-theme="dark"] .rail .latest a:hover .t{ color:var(--muted)!important; }
  html:not([data-theme]) .rail .latest a:hover .t,
  html[data-theme="light"] .rail .latest a:hover .t{ color:var(--brand)!important; }

  html[data-theme="dark"] .hero-follow > .mini a:hover .title,
  html[data-theme="dark"] .more-follow > .mini a:hover .title{ color:var(--muted)!important; }
  html:not([data-theme]) .hero-follow > .mini a:hover .title,
  html:not([data-theme]) .more-follow > .mini a:hover .title,
  html[data-theme="light"] .hero-follow > .mini a:hover .title,
  html[data-theme="light"] .more-follow > .mini a:hover .title{ color:var(--brand)!important; }
}

@media (min-width: 768px){
  /* minis (hero-follow + more-follow) */
  .hero-follow > .mini > .link-block:hover .title,
  .more-follow > .mini > .link-block:hover .title { color: var(--brand) !important; }

  /* extra hero/meer-kaarten ná de eerste 2 (veilig, n+3) */
  .hero-line > .hero-card:nth-child(n+3) > .link-block:hover .hero-title,
  .more-line > .hero-card:nth-child(n+3) > .link-block:hover .hero-title { color: var(--brand) !important; }
}

/* Thema-aanpassing voor rail titel in dark */
html[data-theme="dark"] .rail .latest-title span { color:#fff; }

/* ===== Desktop-only teaser onder minis (kop onder afbeelding) ===== */
.mini .hero-body .intro{ display:none; }

@media (min-width:1024px){
  .mini .hero-body .intro{
    display: -webkit-box;
    -webkit-line-clamp: 5;          /* aantal regels (pas aan voor je test) */
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 2px 4px 0;              /* uitlijnen met titel/meta */
    color: var(--text);
    font-size: .91rem;
    line-height: 1.4;
  }
  /* Iets lucht boven de intro */
  .mini .hero-body .meta{ margin-bottom: 2px; }
}

/* Zelfde look voor alle settings-knoppen */
.menu-box .theme-group .theme-btn,
.menu-box .theme-group .text-zoom,
.menu-box .theme-group .teaser-toggle{
  appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:8px 12px;
  min-width:44px;
  min-height:38px;
  border:1px solid var(--muted);
  border-radius:3px;
  background:var(--bg);
  color:inherit;
  font:inherit;
  line-height:1;
  transition:border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

/* Hover/focus */
.menu-box .theme-group :is(.theme-btn,.text-zoom,.teaser-toggle):hover{
  border-color: color-mix(in srgb, var(--brand-3) 60%, var(--muted));
}
.menu-box .theme-group :is(.theme-btn,.text-zoom,.teaser-toggle):focus-visible{
  outline:2px solid var(--brand);
  outline-offset:2px;
}

/* Geselecteerd (rode rand) */
.menu-box .theme-group .theme-btn[aria-pressed="true"],
.menu-box .theme-group .text-zoom[aria-pressed="true"],
.menu-box .theme-group .teaser-toggle[aria-pressed="true"]{
  border:2px solid var(--brand-3);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--brand-3) 18%, transparent);
}
@media (min-width:1024px){
  html[data-teasers="off"] .mini .hero-body .intro{
    display:none !important;
  }
}
/* ==== Mobile: extra verticale ruimte voor minis (Hero + Meer) ==== */
@media (max-width:767.98px){
  :root{
    /* pas deze waardes naar smaak aan */
    --mini-pad-mobile: 10px;    /* top/bottom padding */
  }

  /* minis in hero-follow en more-follow */
  .hero-follow > .mini,
  .more-follow  > .mini{
    padding-top: var(--mini-pad-mobile) !important;
    padding-bottom: var(--mini-pad-mobile) !important;
  }

  /* optioneel: gesponsorde minis dezelfde padding geven */
  .mini.sponsored--blue,
  .mini.sponsored--pink{
    padding-top: var(--mini-pad-mobile) !important;
    padding-bottom: calc(var(--mini-pad-mobile) + 2px)!important;border: none;
  }
}
/* ==== Mobile: padding fix voor 2e hero- en more-kaart ==== */
@media (max-width:767.98px){
  /* Gebruik dezelfde variabele als voor de minis */
  :root{
    --mini-pad-mobile: 10px;  /* laat staan of pas aan zoals gewenst */
  }

  /* 2e kaart in hero-line (mobiel heeft speciale layout) */
  .hero-line > .hero-card:nth-child(2){
    padding-top: var(--mini-pad-mobile) !important;
    padding-bottom: calc(var(--mini-pad-mobile) + 4px) !important;
    border-bottom: var(--mob-sep-w) solid var(--mob-sep) !important;
    margin-bottom: -12px!important; /* neutraliseert oude -16px */
  }

  /* 2e kaart in more-line idem */
  .more-line > .hero-card:nth-child(2){
    padding-top: var(--mini-pad-mobile) !important;
    padding-bottom: calc(var(--mini-pad-mobile) + 4px) !important;
    border-bottom: var(--mob-sep-w) solid var(--mob-sep) !important;
    margin-bottom: -12px!important;
  }
}

/* ==== HERO jitter fix (desktop) ==== */
@media (min-width:768px){
  /* iets meer “bleed” zodat scale niet ‘snijdt’ aan de randen */
  .hero-card{ --overscan: 3px; }

  /* zorg dat overlay dezelfde inset gebruikt */
  .hero-card.has-grad::before{ inset: calc(var(--overscan)*-1); border-radius: inherit; }

  /* forceer stabiele compositing voor hero images */
  .hero-media{ contain: paint; }
  .hero-media img{
    transform: translateZ(0) scale(1);         /* baseline transform */
    will-change: transform;                    /* statisch: geen toggling meer nodig */
    backface-visibility: hidden;
  }
  .hero-card:hover .hero-media img{
    transform: translateZ(0) scale(var(--zoom));
  }
}



/* DESKTOP: full-width hero-band bovenaan met twee gelijke kolommen */
@media (min-width:768px){
  /* hero-band pakt beide gridkolommen van .page-grid */
  .hero-band{ grid-column:1 / -1; }

  /* binnen de band: niet 2+1, maar 1+1 */
  .hero-band .hero-line{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:var(--gap);
  }

  /* neutraliseer de oude span-regels voor de eerste 2 items */
  .hero-band .hero-line > article:first-child,
  .hero-band .hero-line > article:nth-child(2){
    grid-column:auto;
  }

  /* beide heroes zelfde titelmaat */
  .hero-band .hero-title{
    font-size:clamp(1.20rem,1rem + 1vw,1.90rem)!important;
  }
}


@media (min-width:768px){
  .hero-band{ margin-bottom: calc(var(--gap) * -1); } /* trekt de volgende rij 24px omhoog */
  .section--left{ padding-top:0 !important; margin-top:0 !important; }
}


@media (min-width:768px){
  /* twee gelijke kolommen in de band (je had dit al, voor de zekerheid erbij) */
  .hero-band .hero-line{ grid-template-columns:repeat(2,minmax(0,1fr)); }

  /* maak de tweede hero-titel net zo groot als de eerste */
  .hero-band .hero-line > .hero-card:nth-child(2) .hero-title{
    font-size:clamp(1.25rem,1rem + 1vw,2.1rem);
  }
}

/* === MOBILE: fix ruimte tussen Hero 2 en eerste mini === */
@media (max-width:767.98px){
  /* mini-grid mag geen extra marge boven krijgen — cancel globale margin-top: var(--gap) */
  .section.section--left .hero-follow{ margin-top: calc(var(--gap) * -1) !important; }

  /* Hero 2 laten “ritmen” als een mini (geen extra marge-hacks) */
  .hero-line > .hero-card:nth-child(2){
    padding-top: var(--mini-pad-mobile,10px) !important;
    padding-bottom: var(--mini-pad-mobile,10px) !important;
    border-bottom: var(--mob-sep-w,1px) solid var(--mob-sep,var(--border)) !important;
    margin: 0 !important; /* overschrijft oude -16px */
  }

  /* zekerheid: voorkom verborgen spacing van de rij zelf */
  .hero-line{ margin-bottom:0 !important; }
}

/* ==== MOBIEL: afbeelding rechts, tekst links (hero & minis) ======= */
@media (max-width: 767.98px){

  /* 1) Algemene helper voor row-cards: kolommen omdraaien */
  .row-card{
    grid-template-columns: 1fr minmax(80px,100px) !important;
  }
  .row-card .hero-media,
  .row-card .media{
    grid-column: 2 !important; /* afbeelding rechts */
  }
  .row-card .hero-overlay,
  .row-card .hero-body{
    grid-column: 1 !important; /* tekst links */
    justify-content: center !important;
  }

  /* 2) DUO-lijn cards → flip */
  .duo-line > .hero-card .link-block{
    grid-template-columns: 1fr minmax(80px,100px) !important;
  }
  .duo-line > .hero-card .hero-media{
    grid-column: 2 !important;
  }
  .duo-line > .hero-card .hero-overlay{
    grid-column: 1 !important;
  }

  /* 3) MORE-lijn: tweede kaart (de ‘rij-kaart’) → flip */
  .more-line > .hero-card:nth-child(2) .link-block{
    grid-template-columns: 1fr minmax(80px,100px) !important;
  }
  .more-line > .hero-card:nth-child(2) .hero-media{
    grid-column: 2 !important;
  }
  .more-line > .hero-card:nth-child(2) .hero-overlay{
    grid-column: 1 !important;
  }

  /* 4) Minis in hero-follow & more-follow → raster + flip */
  .hero-follow > .mini > .link-block,
  .more-follow  > .mini > .link-block{
    display: grid !important;
    grid-template-columns: 1fr minmax(80px,100px) !important;
    column-gap: 12px !important;
    align-items: center !important;
  }
  .hero-follow > .mini .media,
  .more-follow  > .mini .media{
    grid-column: 2 !important;           /* afbeelding rechts */
    aspect-ratio: 4/3 !important;
    height: auto !important;
    min-width: 80px !important;
    max-width: 100px !important;
  }
  .hero-follow > .mini :is(.title, .meta),
  .more-follow  > .mini :is(.title, .meta){
    grid-column: 1 !important;           /* titel/meta links */
  }

  /* Optioneel: gradient uit bij kleine right-side thumbs */
  .duo-line > .hero-card.has-grad::before,
  .more-line > .hero-card:nth-child(2).has-grad::before{
    display: none !important;
  }
}

/* ==== MOBIEL FIX: headline niet onder maar links naast de afbeelding ==== */
@media (max-width: 767.98px){
  /* row-card varianten (hero 2 / andere rij-cards) */
  .row-card .hero-media,
  .row-card .media{
    grid-column: 2 !important;
    grid-row: 1 !important;       /* ← forceer dezelfde rij */
  }
  .row-card .hero-overlay,
  .row-card .hero-body{
    grid-column: 1 !important;
    grid-row: 1 !important;       /* ← forceer dezelfde rij */
  }

  /* DUO-lijn */
  .duo-line > .hero-card .hero-media{
    grid-column: 2 !important;
    grid-row: 1 !important;
  }
  .duo-line > .hero-card .hero-overlay{
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  /* MORE-lijn: tweede kaart (rij-kaart) */
  .more-line > .hero-card:nth-child(2) .hero-media{
    grid-column: 2 !important;
    grid-row: 1 !important;
  }
  .more-line > .hero-card:nth-child(2) .hero-overlay{
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  /* (optioneel, als je elders nog auto-plaats gaten ziet) */
  /* .row-card, .duo-line > .hero-card .link-block, .more-line > .hero-card:nth-child(2) .link-block{ grid-auto-flow: dense !important; } */
}

/* ==== MOBIEL: sponsored minis full-bleed achtergrond (100vw) ===== */
@media (max-width: 767.98px){
  /* Zet eigen bg uit en laat pseudo bg buiten het element doorlopen */
  .mini.sponsored--blue,
  .mini.sponsored--pink{
    position: relative;
    background: transparent !important;   /* overschrijft eerdere bg */
    overflow: visible !important;         /* fix: niet afknippen */
    z-index: 0;                           /* nieuwe stacking context */
    isolation: isolate;                    /* houdt z-indexen netjes bij elkaar */
	margin-top:-4.5px!important;
  }

  .mini.sponsored--blue::before,
  .mini.sponsored--pink::before{
    content: "";
    position: absolute;
    top: 0;                             /* klein overschot tegen randjes */
    bottom: 0;
    left: 50%;
    width: 100vw;                          /* full-bleed */
    transform: translateX(-50%);           /* centreer onder de mini */
    z-index: -1;                           /* achter de content van de mini */
    pointer-events: none;
  }

  .mini.sponsored--blue::before { background: var(--spons-blue); }
  .mini.sponsored--pink::before { background: var(--spons-pink); }

  /* Optioneel: rechte randen voor het full-bleed vlak (voorkomt ‘hapje’ van radius) */
  .mini.sponsored--blue,
  .mini.sponsored--pink{
    border-radius: 0 !important;padding-right: 0!important;padding-bottom:12px!important;
  }
}

/*  probeer */

@media (max-width: 767.98px){
  /* één centrale waarde – pas naar smaak aan */
  :root{ --mini-pad-mobile: 10px; }
	
.hero-follow > .mini,
  .more-follow  > .mini{
    padding-top: calc(var(--mini-pad-mobile) + 0px) !important;
    padding-bottom: calc(var(--mini-pad-mobile) + 3px) !important;
  }
}

/* ==== MOBIEL: aparte styling voor HERO 1 en MEER 1 (alleen titels) ==== */
@media (max-width: 767.98px){
  /* Handige variabelen – pas aan naar smaak */
  :root{
    /* HERO 1 */
    --hero1-title-size-m: clamp(1.12rem, 0.50rem + 3.8vw, 1.37rem);
    --hero1-title-lh-m:   1.15;
    --hero1-title-w-m:    700;
    --hero1-title-shadow: 0 2px 4px rgba(0,0,0,.60);
    --hero1-title-gap:    2px;      /* marge onder titel */
    --hero1-overlay-bot:  12px;     /* afstand tot onderkant beeld */

    /* MEER 1 (eerste kaart in .more-line) */
    --meer1-title-size-m: clamp(1.12rem, 0.50rem + 3.8vw, 1.37rem);
    --meer1-title-lh-m:   1.15;
    --meer1-title-w-m:    700;
    --meer1-title-shadow: 0 2px 4px rgba(0,0,0,.60);
    --meer1-title-gap:    2px;
    --meer1-overlay-bot:  10px;
  }

  /* === HERO 1 === */
  .hero-line > .hero-card:first-child .hero-title{
    font-size:   var(--hero1-title-size-m) !important;
    line-height: var(--hero1-title-lh-m)   !important;
    font-weight: var(--hero1-title-w-m)    !important;
    margin-bottom: var(--hero1-title-gap)  !important;
    text-shadow: var(--hero1-title-shadow) !important;
  }
  .hero-line > .hero-card:first-child .hero-overlay{
    left:16px; right:14px; bottom: var(--hero1-overlay-bot) !important;
  }

  /* === MEER 1 === */
  .more-line > .hero-card:first-child .hero-title{
    font-size:   var(--meer1-title-size-m) !important;
    line-height: var(--meer1-title-lh-m)   !important;
    font-weight: var(--meer1-title-w-m)    !important;
    margin-bottom: var(--meer1-title-gap)  !important;
    text-shadow: var(--meer1-title-shadow) !important;
  }
  .more-line > .hero-card:first-child .hero-overlay{
    left:16px; right:14px; bottom: var(--meer1-overlay-bot) !important;
  }
  
}

/* === MOBIEL: Alleen Hero 2 in de hero-band (padding/border/lay-out) === */
@media (max-width: 767.98px){

  /* De container van Hero 2 */
  .hero-band .hero-line > .hero-card:nth-child(2){
    margin: 0 0 4px 0!important;
    padding: 9px 0 12px 0 !important; /* pas aan naar smaak */
    border-bottom: var(--mob-sep-w,1px) solid var(--mob-sep,var(--border)) !important;
  }

  /* Row-layout: tekst links, afbeelding rechts */
  .hero-band .hero-line > .hero-card:nth-child(2) .link-block{
    display: grid !important;
    grid-template-columns: 1fr minmax(80px,100px) !important;
    column-gap: 12px !important;
    align-items: center !important;
  }

  /* Afbeelding naar rechts */
  .hero-band .hero-line > .hero-card:nth-child(2) .hero-media{
    grid-column: 2 !important;
    aspect-ratio: 4 / 3 !important;
    height: auto !important;
  }

  /* Tekst links en NIET absoluut gepositioneerd */
  .hero-band .hero-line > .hero-card:nth-child(2) .hero-overlay{
    position: static !important;
    grid-column: 1 !important;
  }

  /* Geen gradient over de kleine right-side thumb */
  .hero-band .hero-line > .hero-card:nth-child(2).has-grad::before{
    display: none !important;
  }
}

@media (max-width:767.98px){
  .mini.sponsored--blue, .mini.sponsored--pink{ padding:12px 0 14px 0!important; }
  .mini.sponsored--blue + .mini.sponsored--blue,
  .mini.sponsored--blue + .mini.sponsored--pink,
  .mini.sponsored--pink + .mini.sponsored--blue,
  .mini.sponsored--pink + .mini.sponsored--pink{ margin-top:2px; }
}

/* === Meest bekeken — grote rangnummers rechts (1..5), geen layout-impact === */
.latest[aria-label="Meest bekeken"]{
  /* Tweak hier */
  --rank-fs-m: 2.9rem;   /* mobiel font-size */
  --rank-fs-d: 2.9rem;   /* desktop font-size */
  --rank-opacity: .15;   /* transparantie van het cijfer */
  --rank-color: var(--muted); /* basis kleur (opacity bepaalt de tint) */
  --rank-color-hover: var(--text); /* basis kleur (opacity bepaalt de tint) */
}

.latest[aria-label="Meest bekeken"] .latest-list{ counter-reset: rank; }
.latest[aria-label="Meest bekeken"] .latest-list > li{ counter-increment: rank; }

/* Anchor vormt de overlay-‘stage’; tekst ligt erboven */
.latest[aria-label="Meest bekeken"] .latest-list > li > a{
  position: relative;                     /* nodig voor absolute ::after */
}
.latest[aria-label="Meest bekeken"] .latest-list > li > a .t,
.latest[aria-label="Meest bekeken"] .latest-list > li > a .meta{
  position: relative;
  z-index: 1;                             /* tekst boven het rangcijfer */
}

/* Het rangcijfer als onderliggende overlay; schuift layout NIET op */
.latest[aria-label="Meest bekeken"] .latest-list > li > a::after{
  content: counter(rank);
  position: absolute;
  top: 50%;
  right: 12px;                            /* zelfde gutter als jouw rail */
  transform: translateY(-50%);
  z-index: 0;                             /* onder de tekst */
  pointer-events: none;

  font-weight: 800;
  font-size: var(--rank-fs-m);            /* mobiel-maat */
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;

  color: var(--rank-color);
  opacity: var(--rank-opacity);           /* subtiel onder de content */
}

/* Desktopmaat */
@media (min-width: 768px){
  .latest[aria-label="Meest bekeken"] .latest-list > li > a::after{
    font-size: var(--rank-fs-d);
  }
}

/* Alleen 1..5 tonen */
.latest[aria-label="Meest bekeken"] .latest-list > li:nth-child(n+6) > a::after{
  content: none;
}

@media (hover:hover){
  .latest.is-ranked .latest-list > li > a:hover::after{
    color: var(--rank-color-hover);
  }
}

/* =================f========================================
   NET BINNEN — dot op linkerrand + dashed line ter hoogte van tijd
   Werkt zonder HTML-wijzigingen. Alleen voor aria-label="Net binnen".
   Tweakbaar via de CSS-variabelen hieronder.
   ========================================================= */
.rail .latest[aria-label="Net binnen"]{
  /* Afstemmen op jouw padding/border van .rail .latest a */
  --nb-left-pad: 14px;         /* linkerkant padding van de anchor */
  --nb-border-w: 0px;          /* border-dikte van .latest (meestal 1px) */

  /* Stijl van de decoratie */
  --nb-dot-size: 0px;
  --nb-dot-color: var(--muted);
  --nb-dash-width: 0px;
  --nb-dash-color: var(--muted);
  position: relative;
}

/* Zorg dat de metadata de “ankerlaag” is voor de pseudo’s */
.rail .latest[aria-label="Net binnen"] .latest-list .meta{
  position: relative;
  z-index: 1;                  /* tekst boven de stippellijn */
}

/* Zorg dat de metadata de “ankerlaag” is voor de pseudo’s */
.rail .latest[aria-label="Net binnen"] .latest-list .meta .tm{
  color:var(--muted); font-weight:400;        /* tekst boven de stippellijn */
}

/* Zorg dat de metadata de “ankerlaag” is voor de pseudo’s */
.rail .latest[aria-label="Meest bekeken"] .latest-list .meta .tm{
  color:var(--muted); font-weight:400;        /* tekst boven de stippellijn */
}



/* DASHED LINE vanaf de dot (net binnen de border) over het hele item */
.rail .latest[aria-label="Net binnen"] .latest-list .meta::after{
  content: "";margin-top:1px!important;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: calc(-1.105 * var(--nb-left-pad));    /* start ná de border voor optisch nette aansluiting */
  right: 0;                                /* tot aan de rechterkant van het item */
  border-top: var(--nb-dash-width) dotted var(--nb-dash-color)!important;
  z-index: -1!important;
  pointer-events: none;width:13px;
}

@media (max-width:767.98px){

/* DOT op de linkerrand, verticaal gecentreerd op de meta (tijd) */
.rail .latest[aria-label="Net binnen"] .latest-list .meta::before{
  content: "";
  position: absolute;
  top: 50%;
  left: calc(-1.192 * (var(--nb-left-pad) + var(--nb-border-w))); /* exact op de linkerrand */
  transform: translateY(-50%);
  width: var(--nb-dot-size);
  height: var(--nb-dot-size);
  border-radius: 999px;
  /*background: var(--bg);border: 1px solid var(--muted);*/
  pointer-events: none;margin-top:0px!important;
}

/* DASHED LINE vanaf de dot (net binnen de border) over het hele item */
.rail .latest[aria-label="Net binnen"] .latest-list .meta::after{
  content: "";margin-top:0px!important;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: calc(-1.105 * var(--nb-left-pad));    /* start ná de border voor optisch nette aansluiting */
  right: 0;                                /* tot aan de rechterkant van het item */
  border-top: var(--nb-dash-width) dotted var(--nb-dash-color)!important;
  z-index: -1!important;
  pointer-events: none;width:14px;
}
	
}

/* (Optioneel) iets subtieler op hover zodat tekst domineert */
.rail .latest[aria-label="Net binnen"] .latest-list a:hover .meta::after{
  opacity: 1;
}
/* ==== CTA onder 'latest' blokken (Net binnen / Meest bekeken) =================
   - Volledige-breedte knop onder de lijst
   - Variabelen voor spacing/hoogte/radius/kleuren
   - Donkermodus-vriendelijk via CSS-variabelen
   ============================================================================ */

/* TIP: beperk list-item anchors zodat de CTA niet geraakt wordt door algemene regels */
.rail .latest-list > li > a{
  /* laat hier je bestaande list-link styles staan (padding, border, etc.) */
}

/* Defaults – per blok is overschrijven mogelijk via CSS-variabelen op .latest */
.rail .latest{
  --cta-pad: 4px;                             /* ruimte rondom de knop */
  --cta-h: 40px;                              /* knophoogte */
  --cta-radius: var(--radius);

  /* Light-mode basis */
  --cta-bg: color-mix(in srgb, var(--bg) 98%, var(--brand, #0059b2) 2%);
  --cta-bg-hover: color-mix(in srgb, var(--bg) 94%, var(--brand, #0059b2) 6%);
  --cta-text: var(--brand);                   /* tekstkleur in light-mode */
  --cta-border: color-mix(in srgb, var(--border, #e5e9f1) 80%, var(--text, #0b1320) 20%);
}

/* Footer-wrapper onder de lijst (zorgt voor ruimte rondom de knop) */
.rail .latest-footer{
  padding: var(--cta-pad);
  padding-bottom: 4px;  /* iets compacter boven de knop; pas aan naar smaak */
  border-bottom: 1px var(--border) solid;
}

/* Volledige breedte knop — echt horizontaal/verticaal gecentreerd */
.rail .latest-footer .latest-cta{
  /* neutraliseer evt. brede .rail .latest a { … } regels */
  padding: 0 0 2px 0!important;

  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem!important;
  inline-size: 100%;
  block-size: var(--cta-h);
  box-sizing: border-box;
  border-radius: var(--cta-radius);

  background: var(--bg);   /* via var */
  color: var(--cta-text);      /* via var */
  border: 0px solid var(--cta-border);
  text-decoration: none;

  /* typografie */
  text-transform: uppercase;
  font-weight: 750;
  letter-spacing: .03em;
  line-height: 1;      /* geen verticale drift */
  text-align: center;

  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background .2s ease, border-color .2s ease, transform .04s ease;
}

/* Hover/active/focus states */
.rail .latest-footer .latest-cta:hover{
  background: var(--bg);
  text-decoration: underline;
}
.rail .latest-footer .latest-cta:active{
  transform: scale(1);
}

/* Zorg dat de laatste list-item rand netjes blijft, geen “gat” vóór de CTA */
.rail .latest-list > li:last-child > a{
  border-bottom: 1px solid var(--border) !important;
}

/* Mobiel iets compacter */
@media (max-width: 767.98px){
  .rail .latest{
    --cta-pad: 4px;
    --cta-h: 40px;
  }

  .rail .latest-footer{
    /* padding: var(--cta-pad); */
    padding-bottom: 4px;
  }

  .rail .latest-footer .latest-cta{
    padding: 0!important;
  }
}

/* ==== CTA-knop: hoekje achter de linktekst ==================================
   - Geen HTML-wijzigingen nodig
   - Hoekje volgt tekstkleur (currentColor → var(--cta-text))
   - Afstand en grootte instelbaar via variabelen
   ========================================================================== */

/* Vars voor het hoekje (kun je per .latest overschrijven) */
.rail .latest{
  --angle-gap: 16px;          /* afstand tussen tekst en hoekje */
  --angle-size: 0.5em;        /* grootte van het hoekje, schaalt met font-size */
  --angle-stroke: 2px;        /* lijndikte van het hoekje */
  --angle-nudge-y: 0.08em;    /* mini vertical nudge t.o.v. tekstbaseline */
}

/* Hoekje direct achter de linktekst van de CTA */
.rail .latest-footer .latest-cta::after{
  content: "";
  display: inline-block;
  flex: 0 0 auto;

  width: var(--angle-size);
  height: var(--angle-size);
  margin-left: var(--angle-gap);
  margin-top: -1px;

  /* twee lijntjes die samen een “>” vormen */
  border-right: var(--angle-stroke) solid currentColor;
  border-top:   var(--angle-stroke) solid currentColor;

  /* lichte finetune zodat het optisch exact op teksthoogte zit */
  transform: rotate(45deg) translateY(var(--angle-nudge-y));
  transform-origin: center;

  pointer-events: none; /* hele knop blijft klikbaar */
}

/* (optioneel) subtiele hover-nudge zonder layout shift */
.rail .latest-footer .latest-cta:hover::after{
  transform: rotate(45deg) translateY(var(--angle-nudge-y)) translateX(0px);
}

/* ==== THEMA: dark / auto → CTA-tekst wit in darkmode ======================= */

/* Jouw bestaande regels voor de live-dot: */
html[data-theme="dark"]{
  --live-dot-color: var(--muted);
}
html[data-theme="auto"]{
  --live-dot-color: var(--brand-3);
}
@media (prefers-color-scheme: dark){
  html[data-theme="auto"]{
    --live-dot-color: var(--muted);
  }
}

/* Zelfde patroon voor de CTA-tekstkleur */
html[data-theme="dark"] .rail .latest{
  --cta-text: #fff;                  /* in darkmode: tekst (en hoekje) wit */
}

/* AUTO: light = brand, dark = wit */
html[data-theme="auto"] .rail .latest{
  --cta-text: var(--brand);          /* standaard (als systeem light is) */
}
@media (prefers-color-scheme: dark){
  html[data-theme="auto"] .rail .latest{
    --cta-text: #fff;                /* als systeem dark is */
  }
}


/* ===== LIVE BLOG dot (thema-bewust) =================================== */
/* Basis-variabelen */
:root{
  --live-dot-size: 8px;
  --live-dot-gap:  8px;                   /* afstand tussen dot en tekst */
  --live-dot-color: var(--brand-3);        /* LIGHT/DEFAULT = rood */
}

/* DARK: dot grijs */
html[data-theme="dark"]{
  --live-dot-color: var(--muted);
}
/* AUTO: volg systeem */
html[data-theme="auto"]{
  --live-dot-color: var(--brand-3);
}
@media (prefers-color-scheme: dark){
  html[data-theme="auto"]{
  --live-dot-color: var(--muted);
  }
}

/* Label zelf */
.sponsor-label--content.live{
  position: relative;
  display: inline-block;align-content: center!important;
  padding-left: calc(var(--live-dot-gap) + var(--live-dot-size))!important;
}

/* Vaste dot (gevuld) */
.sponsor-label--content.live::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:var(--live-dot-size);
  height:var(--live-dot-size);
  transform:translateY(-50%);
  border-radius:50%;
  background:var(--live-dot-color);
  pointer-events:none;
}

/* Pulsende “radar” ring */
.sponsor-label--content.live::after{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:var(--live-dot-size);
  height:var(--live-dot-size);
  transform:translateY(-50%);
  border-radius:50%;
  border:2px solid var(--live-dot-color);
  opacity:.7;
  animation: a365-live-pulse 1.6s ease-out infinite;
  pointer-events:none;
}

@keyframes a365-live-pulse{
  0%   { transform:translateY(-50%) scale(1);   opacity:.55; }
  70%  { transform:translateY(-50%) scale(2.2); opacity:0;   }
  100% { transform:translateY(-50%) scale(2.2); opacity:0;   }
}

/* Respecteer “verminder animatie” */
@media (prefers-reduced-motion: reduce){
  .sponsor-label--content.live::after{ animation:none; opacity:.55; }
}


@media (max-width: 767.98px){
.more-news {display:inline-block;text-transform: uppercase;color:var(--text);border-left: 6px solid var(--muted)!important;padding:2px 0 0 8px!important; font-weight:900!important;width:92%;margin-left:0px;font-size:1.05rem;line-height:1.1!important;letter-spacing: .3px;}
	}

.more-news {display:inline-block;text-transform: uppercase;color:var(--text);border-left: 6px solid var(--brand);padding:0px 0 0px 11px; font-weight:750;margin-bottom:16px;margin-top:4px;font-size:1.15rem;line-height:1.1;}

.flag-container {display:inline-flex;align-items:stretch;white-space:nowrap;border-radius: var(--radius);}

.flag-icon-live {display:flex;background: var(--grey);!important;color:var(--text);line-height:1;align-items:center!important;
  justify-content:center!important;width:20px;font-size:1.0rem;padding: 0 1px 2px 1px!important;border-radius: var(--radius) 0 0 var(--radius);box-shadow:  inset 0 0 0 1px var(--brand-3);}

.flag-icon-video {display:flex;background: var(--grey);color:var(--black);line-height:1;align-items:center!important;
  justify-content:center!important;width:20px;font-size:0.8rem;padding: 2px 1px 1px 2px!important;border-radius: var(--radius) 0 0 var(--radius);box-shadow:  inset 0 0 0 1px #333;}

.flag-icon-bundle {display:flex;background: var(--grey);color:var(--black);line-height:1;align-items:center!important;
  justify-content:center!important;width:20px;font-size:0.8rem;padding: 2px 1px 1px 2px!important;border-radius: var(--radius) 0 0 var(--radius);box-shadow:  inset 0 0 0 1px var(--brand);}


.flag-red-hero-1 {font-size:0.78rem;display:flex;left:16;bottom:0;background: var(--brand-3);color:var(--white);border-radius:var(--radius);padding: 0 8px 0 6px;text-transform:uppercase;font-weight:800;border-radius: 0 calc(var(--radius) * 5) calc(var(--radius) * 5) 0;}


.flag-blue-hero-1 {font-size:0.78rem;display:flex;left:16;bottom:0;background: var(--brand);color:var(--white);border-radius:var(--radius);padding: 0 8px 0 6px;text-transform:uppercase;font-weight:800;border-radius: 0 calc(var(--radius) * 5) calc(var(--radius) * 5) 0;}

.flag-black-hero-1 {font-size:0.78rem;display:flex;left:16;bottom:0;background: #333;color:var(--white);border-radius:var(--radius);padding: 0 6px;text-transform:uppercase;font-weight:800;border-radius: 0 calc(var(--radius) * 5) calc(var(--radius) * 5) 0;}


@media (max-width: 599.98px){

.flag-container {display:inline-flex;align-items:stretch;white-space:nowrap;border-radius: var(--radius);margin-bottom: 6px;}

.flag-icon-live {display:flex;background: var(--grey);!important;color:var(--text);line-height:1;align-items:center!important;
  justify-content:center!important;width:18px;font-size:0.8rem;padding: 0 1px 1px 1px!important;border-radius: var(--radius) 0 0 var(--radius);}

.flag-icon-video {display:flex;background: var(--grey);color:var(--black);line-height:1;align-items:center!important;
  justify-content:center!important;width:18px;font-size:0.65rem;padding: 2px 1px 1px 2px!important;border-radius: var(--radius) 0 0 var(--radius);}

.flag-icon-bundle {display:flex;background: var(--grey);color:var(--brand-2);line-height:1;align-items:center!important;
  justify-content:center!important;width:18px;font-size:0.60rem;padding: 2px 1px 1px 2px!important;border-radius: var(--radius) 0 0 var(--radius);}

.flag-red-hero-1 {font-size:0.65rem;display:flex;left:16;bottom:0;background: var(--brand-3);color:var(--white);border-radius:var(--radius);padding: 1px 9px 0 5px;text-transform:uppercase;font-weight:850;border-radius: 0 calc(var(--radius) * 5) calc(var(--radius) * 5) 0;}


.flag-blue-hero-1 {font-size:0.65rem;display:flex;left:16;bottom:0;background: var(--brand);color:var(--white);border-radius:var(--radius);padding: 1px 9px 0 5px;text-transform:uppercase;font-weight:850;border-radius: 0 calc(var(--radius) * 5) calc(var(--radius) * 5) 0;}

.flag-black-hero-1 {font-size:0.65rem;display:flex;left:16;bottom:0;background: #333;color:var(--white);border-radius:var(--radius);padding: 0 6px;text-transform:uppercase;font-weight:850;border-radius: 0 calc(var(--radius) * 5) calc(var(--radius) * 5) 0;}
	
	}

/* === MOBIEL: Hero 2 en More 2 full-width (100%, geen 100vw) + titel/meta onder beeld === */
@media (max-width: 767.98px){

  /* HERO 2 in de hero-band */
  .hero-band .hero-line > .hero-card:nth-child(2){
    width:100% !important;
    margin: var(--mob-card-gap,8px) 0 6px 0 !important;
    padding:8px 0 10px 0 !important;
    border-bottom: var(--mob-sep-w,2px) solid var(--mob-sep,var(--border)) !important;border-radius:0!important;
  }

  .hero-band .hero-line > .hero-card:nth-child(2) .link-block{
    display:block !important;             /* breekt row-card grid */
  }

  .hero-band .hero-line > .hero-card:nth-child(2) .hero-media{
    position:relative;
    display:block;
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    height:auto !important;
    aspect-ratio:16/9 !important;
    border-radius:var(--radius);
  }

  .hero-band .hero-line > .hero-card:nth-child(2) .hero-overlay{
    position:static !important;           /* onder de afbeelding */
    padding:6px 2px  0 0 !important;
  }

  .hero-band .hero-line > .hero-card:nth-child(2) .hero-title{
    margin:3px 0 3px !important;
    color:var(--text) !important;         /* zwarte kop */
    text-shadow:none !important;
    font-size:clamp(1.0rem,0.95rem + 1vw,1.2rem) !important;
    font-weight:500 !important;line-height:1.25!important;
  }

  .hero-band .hero-line > .hero-card:nth-child(2) .hero-meta{
    margin:0 !important;
    color:var(--muted) !important;        /* tijd onder de kop */
    font-size:.85rem !important;
    line-height:1.3 !important;
  }

  .hero-band .hero-line > .hero-card:nth-child(2) .hero-meta .time{
    text-decoration:none !important;
  }

  .hero-band .hero-line > .hero-card:nth-child(2).has-grad::before{
    display:none !important;              /* geen gradient-overlay op kleine kaart */
  }

  /* MORE 2 in álle .more-line blokken */
  .more-line > .hero-card:nth-child(2){
    width:100% !important;
    margin: var(--mob-card-gap,8px)  0 -10px 0 !important;
    padding:9px 0 10px 0 !important;
    border-bottom: var(--mob-sep-w,2px) solid var(--mob-sep,var(--border)) !important;border-radius:0!important;
  }

  .more-line > .hero-card:nth-child(2) .link-block{
    display:block !important;             /* geen rij-layout meer */
  }

  .more-line > .hero-card:nth-child(2) .hero-media{
    position:relative;
    display:block;
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    height:auto !important;
    aspect-ratio:16/9 !important;
    border-radius:var(--radius);
  }

  .more-line > .hero-card:nth-child(2) .hero-overlay{
    position:static !important;
    padding:6px 2px  0 0 !important;
  }

  .more-line > .hero-card:nth-child(2) .hero-title{
    margin:3px 0 3px !important;
    color:var(--text) !important;         /* zwarte kop */
    text-shadow:none !important;
    font-size:clamp(1.0rem,0.95rem + 1vw,1.2rem) !important;
    font-weight:500 !important;line-height:1.25!important;
  }

  .more-line > .hero-card:nth-child(2) .hero-meta{
    margin:0 !important;
    color:var(--muted) !important;        /* tijd onder de kop */
    font-size:.85rem !important;
    line-height:1.3 !important;
  }

  .more-line > .hero-card:nth-child(2) .hero-meta .time{
    text-decoration:none !important;
  }

  .more-line > .hero-card:nth-child(2).has-grad::before{
    display:none !important;
  }
}