/* KNRM: YouTube/Vimeo in overlay-slider (zie builder/overlay-slider_item override en js/slider-video.js) */
/* Video vult de slide altijd (zoals object-fit: cover), ook als de slide hoger is dan 16:9
   (op mobiel). Anders zet YouTube er zwarte balken boven en onder. De iframe wordt daarom
   gecentreerd en zo groot gemaakt dat hij de slide vult; wat uitsteekt valt weg. */
.el-item:has(> iframe.tm-slider-iframe) { width: 100%; cursor: pointer; position: relative; overflow: hidden; min-height: 200px; }
/* Minimaal 16:9 hoog, de slider mag de slide hoger maken */
.el-item:has(> iframe.tm-slider-iframe)::before { content: ""; display: block; width: 100%; aspect-ratio: 16 / 9; }
iframe.tm-slider-iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    /* Breedte en hoogte zet js/slider-video.js (cover); dit is de terugval */
    width: 100%;
    height: 100%;
    max-width: none;
    transform: translate(-50%, -50%);
    border: 0;
    pointer-events: none;
}

/* Achtergrondvideo: niet klikbaar, overlays laten de klik door naar de slide */
.el-item:has(> iframe.tm-slider-iframe) .uk-position-cover,
.el-item:has(> iframe.tm-slider-iframe) [class*="uk-position-"]:not(a) { pointer-events: none; }
.el-item:has(> iframe.tm-slider-iframe) a { pointer-events: auto; }

/* Thumbnail over de speler tot de video echt speelt (verbergt YouTube-titelbalk en knoppen) */
.tm-slider-poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    transition: opacity .6s ease;
}
/* !important: custom.css zet in .donatieslider3.variant de afbeeldingen van zijslides op opacity .5,
   waardoor de YouTube-titelbalk door de thumbnail heen schijnt */
.tm-slider-video-item > .tm-slider-poster { opacity: 1 !important; }
.tm-slider-video-item.tm-video-playing > .tm-slider-poster { opacity: 0 !important; }

/* Donkere laag andersom: inactieve video-slides gedimd, de actieve (spelende) slide helder */
.el-item:has(> iframe.tm-slider-iframe) > .uk-overlay-primary.uk-transition-fade { opacity: 1 !important; transition: opacity .4s ease; }
.uk-transition-active.uk-active .el-item:has(> iframe.tm-slider-iframe) > .uk-overlay-primary.uk-transition-fade { opacity: 0 !important; }