/* 112Nederland – Video-blok (v4-functionaliteit, thema-opmaak zoals de partnerblokken .wa112-ext-news) */
.nl-vblock{
  --vb-ink:var(--wa112-home-title,#1a1a1a); --vb-muted:#6e6e6e; --vb-line:var(--wa112-home-border,#e8e6e3);
  --vb-accent:var(--theme-accent,#ba0707);
  width:100%; color:var(--vb-ink); margin:0 0 19px;
  background:var(--wa112-home-surface,#fff); border:1px solid var(--vb-line);
  border-radius:var(--wa112-home-radius,10px); padding:18px 20px 20px; box-sizing:border-box;
}
.nl-vblock *{box-sizing:border-box}
.nl-vblock a{color:inherit;text-decoration:none}
.nl-vblock :focus-visible{outline:2px solid var(--vb-accent);outline-offset:2px}
.nl-vblock__panel{display:block}

/* Kop: zelfde als "Brabant  • VIA 112BRABANT" */
.nl-vblock__head{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px;
  margin:0 0 16px; padding:0 0 10px; border-bottom:3px solid var(--vb-accent);
}
.nl-vblock__heading{margin:0; font-size:clamp(19px,2.4vw,24px); font-weight:800; letter-spacing:.01em; line-height:1.15; color:var(--vb-ink)}
.nl-vblock__heading a:hover{color:var(--vb-accent)}
.nl-vblock__sub{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--vb-accent)}
.nl-vblock__dot{width:8px; height:8px; border-radius:50%; background:var(--vb-accent); flex:none}

.nl-vblock__grid{display:grid; grid-template-columns:minmax(0,1.7fr) minmax(260px,1fr); gap:20px; align-items:start}

/* Voet: outline-knop zoals "Meer van 112Brabant" */
.nl-vblock__foot{display:flex; justify-content:flex-end; margin-top:16px}
.nl-vblock__more{
  display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 18px;
  border:2px solid var(--vb-accent); border-radius:999px; background:#fff;
  color:var(--vb-accent)!important; font-size:14px; font-weight:800;
}
.nl-vblock__more:hover,.nl-vblock__more:focus{background:var(--vb-accent); color:#fff!important}

/* ---- Speler (functioneel uit v4) ---- */
/* ---- Player ---- */
.nl-vplayer{display:flex; flex-direction:column; gap:.7rem; min-width:0}
.nl-vplayer__frame{
  position:relative; aspect-ratio:16/9; border-radius:8px; overflow:hidden;
  background:#000; isolation:isolate;
}
.nl-vplayer__video,.nl-vplayer__poster{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
}
.nl-vplayer__video{z-index:1; background:#000; object-fit:contain}
.nl-vplayer.is-ready .nl-vplayer__poster{opacity:0; pointer-events:none}
.nl-vplayer__poster{z-index:0; transition:opacity .25s}

.nl-vplayer__ad{
  position:absolute; left:.75rem; bottom:3.1rem; z-index:4;
  background:rgba(0,0,0,.65); color:#fff; font-size:.75rem; font-weight:700;
  padding:.3rem .55rem; border-radius:6px; display:none;
}
.nl-vplayer.is-ad .nl-vplayer__ad{display:inline-block}

.nl-vplayer__hint{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:5;
  background:rgba(0,0,0,.7); color:#fff; border:0; border-radius:999px;
  padding:.65rem 1.1rem; font:inherit; font-weight:700; font-size:.9rem;
  display:none; align-items:center; gap:.4rem; cursor:pointer;
}
.nl-vplayer__hint svg{width:16px;height:16px}

/* controls bar */
.nl-vplayer__controls{
  position:absolute; left:0; right:0; bottom:0; z-index:4;
  display:flex; flex-direction:column; gap:.15rem;
  padding:.35rem .65rem .55rem;
  background:linear-gradient(0deg,rgba(0,0,0,.75),rgba(0,0,0,.2) 70%,transparent);
  opacity:0; transition:opacity .2s;
}
.nl-vplayer__frame:hover .nl-vplayer__controls,
.nl-vplayer__frame:focus-within .nl-vplayer__controls,
.nl-vplayer.is-paused .nl-vplayer__controls,
.nl-vplayer.is-ad .nl-vplayer__controls{opacity:1}

.nl-vplayer__progress{
  width:100%; height:4px; margin:0; padding:0; cursor:pointer;
  appearance:none; background:rgba(255,255,255,.3); border-radius:2px; border:0;
}
.nl-vplayer__progress::-webkit-slider-thumb{
  appearance:none; width:12px; height:12px; border-radius:50%; background:var(--vb-accent); border:0;
}
.nl-vplayer__progress::-moz-range-thumb{
  width:12px; height:12px; border-radius:50%; background:var(--vb-accent); border:0;
}

.nl-vplayer__bar{display:flex; align-items:center; justify-content:space-between; gap:.5rem}
.nl-vplayer__left,.nl-vplayer__right{display:flex; align-items:center; gap:.15rem}
.nl-vplayer__btn{
  width:40px; height:40px; border:0; background:transparent; color:#fff;
  display:grid; place-items:center; cursor:pointer; border-radius:8px; padding:0;
}
.nl-vplayer__btn:hover{background:rgba(255,255,255,.12)}
.nl-vplayer__btn svg{width:20px; height:20px}
.nl-vplayer__time{color:#fff; font-size:.78rem; font-weight:600; font-variant-numeric:tabular-nums; padding:0 .35rem}
.nl-vplayer__live{
  display:none; align-items:center; gap:.35rem; color:#fff; font-size:.75rem; font-weight:800;
  letter-spacing:.04em; text-transform:uppercase; padding:0 .4rem;
}
.nl-vplayer.is-live .nl-vplayer__live{display:inline-flex}
.nl-vplayer__live-dot{width:8px; height:8px; border-radius:50%; background:var(--vb-accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--theme-accent, #ba0707) 25%, transparent)}

.nl-vplayer__menu{
  position:absolute; right:.65rem; bottom:3.4rem; z-index:6;
  background:#fff; color:var(--vb-ink); border-radius:10px; min-width:140px;
  box-shadow:0 8px 24px rgba(0,0,0,.2); padding:.35rem; display:none;
}
.nl-vplayer__menu.is-open{display:block}
.nl-vplayer__menu button{
  display:block; width:100%; text-align:left; border:0; background:transparent;
  padding:.55rem .7rem; font:inherit; font-weight:600; font-size:.88rem; cursor:pointer; border-radius:6px;
}
.nl-vplayer__menu button:hover,.nl-vplayer__menu button[aria-checked="true"]{background:var(--vb-panel); color:var(--vb-accent)}


/* Onderschrift = kaarttitel */
.nl-vplayer{gap:10px}
.nl-vplayer__meta{display:flex; flex-direction:column; gap:4px}
.nl-vplayer__heading{margin:0; font-size:clamp(18px,2.2vw,22px); font-weight:800; line-height:1.25; color:var(--vb-ink)}
.nl-vplayer__heading a{color:inherit}
.nl-vplayer__heading a:hover{color:var(--vb-accent)}
.nl-vplayer__when{font-size:12px; font-weight:700; color:var(--vb-muted); font-variant-numeric:tabular-nums}

/* Labels op de speler: zoals "MET VIDEO" op de kaarten */
/* Overlay-labels op speler */
.nl-vplayer__flags{
  position:absolute; left:.75rem; top:.75rem; z-index:4;
  display:flex; gap:.4rem; flex-wrap:wrap; pointer-events:none;
}
.nl-vflag{
  display:inline-flex; align-items:center; gap:.35rem;
  font-size:.7rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  padding:.3rem .6rem; border-radius:999px; line-height:1;
}
.nl-vflag--live,.nl-vflag--breaking{display:none; background:var(--vb-accent); color:#fff}
.nl-vplayer.is-live .nl-vflag--live{display:inline-flex}
.nl-vplayer.is-breaking:not(.is-live) .nl-vflag--breaking{display:inline-flex}
.nl-vflag--live i{
  width:7px;height:7px;border-radius:50%;background:#fff; animation:nlpulse 1.6s infinite;
}
@keyframes nlpulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.7)}70%{box-shadow:0 0 0 6px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
.nl-vflag{border-radius:4px; padding:.38rem .65rem; font-size:.72rem; letter-spacing:.05em; box-shadow:0 2px 10px rgba(0,0,0,.4)}
.nl-vplayer__region{display:inline-flex; background:var(--vb-accent); color:#fff}
.nl-vplayer__region[hidden]{display:none}
.nl-vplayer__ad{top:.75rem; bottom:auto; left:auto; right:.75rem; border-radius:4px}
.nl-vplayer__progress{accent-color:var(--vb-accent);
  background:linear-gradient(var(--vb-accent),var(--vb-accent)) 0/var(--vb-p,0%) 100% no-repeat, rgba(255,255,255,.3)}
.nl-vplayer__menu button:hover,.nl-vplayer__menu button[aria-checked="true"]{background:#f4f4f4}

/* ---- Playlist: zoals de rijen in de partnerblokken ---- */
.nl-vplist{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.nl-vplist__item{margin:0; border-bottom:1px solid var(--vb-line)}
.nl-vplist__item:last-child{border-bottom:0}
.nl-vplist__btn{
  position:relative; display:grid; grid-template-columns:96px minmax(0,1fr); gap:12px; align-items:start;
  width:100%; text-align:left; border:0; border-left:3px solid transparent; border-radius:0;
  background:none; cursor:pointer; padding:10px 8px; font:inherit; color:var(--vb-ink);
  transition:background .15s ease;
}
.nl-vplist__btn.is-active{
  border-left-color:var(--vb-accent);
  background:#f7f7f7; background:color-mix(in srgb, var(--vb-accent) 7%, #fff);
}
.nl-vplist__thumb{position:relative; display:block; width:96px; aspect-ratio:3/2; border-radius:6px; overflow:hidden; background:#eceae7}
.nl-vplist__thumb img{width:100%; height:100%; object-fit:cover; display:block}
.nl-vplist__play{position:absolute; left:5px; bottom:5px; width:20px; height:20px; border-radius:50%; background:var(--vb-accent); color:#fff; display:grid; place-items:center}
.nl-vplist__play svg{width:9px; height:9px; margin-left:1px}
.nl-vplist__dur{position:absolute; right:4px; bottom:4px; font-size:11px; font-weight:700; background:rgba(0,0,0,.72); color:#fff; padding:1px 5px; border-radius:3px; font-variant-numeric:tabular-nums}
.nl-vplist__now{display:none}
.nl-vplist__text{display:flex; flex-direction:column; gap:3px; min-width:0}
.nl-vplist__kicker{display:flex; flex-wrap:wrap; align-items:center; gap:2px 8px; font-size:12px; line-height:1.3}
.nl-vplist__cat{color:var(--vb-accent); font-size:11.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase}
.nl-vplist__time{color:var(--vb-muted); font-weight:700; font-variant-numeric:tabular-nums}
.nl-vplist__kicker .nl-vflag{display:inline-flex; padding:.15rem .4rem; font-size:10px; box-shadow:none; background:var(--vb-accent); color:#fff}
.nl-vplist__item-title{
  color:#1a1a1a; font-size:15px; font-weight:700; line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.nl-vplist__btn.is-active .nl-vplist__item-title,
.nl-vplist__btn:hover .nl-vplist__item-title,
.nl-vplist__btn:focus-visible .nl-vplist__item-title{color:var(--vb-accent)}
/* dunne voortgangslijn onder het actieve item */
.nl-vplist__line{position:absolute; left:0; right:0; bottom:-1px; height:2px; overflow:hidden; background:transparent}
.nl-vplist__line::after{content:""; position:absolute; left:0; top:0; bottom:0; width:0; background:var(--vb-accent); transition:width .25s linear}
.nl-vplist__btn.is-active .nl-vplist__line::after{width:var(--vb-p,0%)}

@media (max-width:991px){
  .nl-vblock__grid{grid-template-columns:1fr; gap:16px}
}
@media (max-width:575px){
  .nl-vblock{padding:14px 14px 16px}
  .nl-vplist__btn{grid-template-columns:88px minmax(0,1fr); padding:10px 8px 10px 0}
  .nl-vplist__btn.is-active{padding-left:8px}
  .nl-vplist__thumb{width:88px}
  .nl-vblock__foot{justify-content:stretch}
  .nl-vblock__more{width:100%; justify-content:center}
  .nl-vplayer__controls{opacity:1}
  .nl-vplayer__flags{left:.5rem; top:.5rem}
  .nl-vplayer__ad{top:.5rem; right:.5rem}
  .nl-vplayer__hint{white-space:nowrap; font-size:.8rem; padding:.5rem .9rem}
  .nl-vplayer__live,[data-action="settings"]{display:none!important}
  .nl-vplayer__btn{width:34px;height:34px}
}
@media (prefers-reduced-motion:reduce){
  .nl-vplayer__controls,.nl-vplayer__poster,.nl-vplist__btn{transition:none!important}
  .nl-vflag--live i{animation:none} .nl-vplist__line::after{transition:none}
}

/* ---- Thema-integratie: Video.js + IMA in het frame ---- */
.nl-vplayer__frame .video-js{position:absolute; inset:0; width:100%!important; height:100%!important; padding:0; z-index:1; background:#000}
.nl-vplayer__frame .video-js .vjs-tech{object-fit:contain}
.nl-vplayer__frame .video-js .vjs-big-play-button,
.nl-vplayer__frame .video-js .vjs-control-bar,
.nl-vplayer__frame .video-js .vjs-loading-spinner,
.nl-vplayer__frame .video-js .vjs-poster{display:none}
.nl-vplayer__frame .video-js .vjs-error-display{display:none}
/* Tijdens de preroll: IMA-UI krijgt voorrang, eigen bediening weg */
.nl-vplayer.is-ad .nl-vplayer__controls,
.nl-vplayer.is-ad .nl-vplayer__hint,
.nl-vplayer.is-ad .nl-vplayer__menu{display:none!important}
.nl-vplayer.is-ad .nl-vplayer__poster{opacity:0}
.nl-vplayer__frame .ima-ad-container{z-index:5}
.nl-vplayer.is-ad .nl-vplayer__ad{z-index:6}
.nl-vplayer__heading a{color:inherit; text-decoration:none}
.nl-vplayer__heading a:hover{color:var(--vb-accent)}

/* Tweak: beeld vult het hele 16:9-kader (geen zwarte balken); IMA-container ongemoeid */
.nl-vblock .nl-vplayer__poster,
.nl-vblock .nl-vplayer__video,
.nl-vblock .video-js .vjs-tech,
.nl-vblock .video-js video.vjs-tech,
.nl-vblock .video-js .vjs-poster img{object-fit:cover!important}
.nl-vblock .video-js .vjs-poster{background-size:cover!important}

/* fix13: lange woorden (bv. "waarschuwingsschoten") niet buiten de kolom laten lopen */
.nl-vblock__grid>*{min-width:0}
.nl-vplist__item-title,.nl-vplayer__heading{overflow-wrap:anywhere;word-break:break-word;-webkit-hyphens:auto;hyphens:auto}

/* fix13: schermbreed Video-blok tussen de feedrijen (na de 1e advertentieplek). Op mobiel (homepage = flex-kolom
   met order) in de volgorde van de HTML houden: feed → Video → vervolg feed (niet naar achteren zoals .home-below-posts). */
.home-template > .home-below-posts.wa112-home-videos-break{margin-top:.25rem}
@media only screen and (max-width:991px){
  .home-template > .home-below-posts.wa112-home-videos-break{order:1}
}