/**
 * Ondersteunende CSS voor video-preview.js.
 *
 * Iframe wordt hier bewust OVERGROOT gemaakt en gecentreerd (de
 * gebruikelijke techniek voor een "vullende" achtergrondvideo, want een
 * iframe kent geen object-fit zoals een <img>/<video> dat wel heeft —
 * zonder deze truc toont de YouTube-speler het beeld netjes gecentreerd
 * ín de opgegeven afmetingen, met zwarte balken erbij zodra de
 * beeldverhouding niet exact overeenkomt).
 *
 * Uitgerekend op basis van de bekende, VASTE bloklengte van 800px
 * (`.ptrn-video`/`.js-video-preview`'s eigen hoogte):
 * - min-width: 800px × 16/9 ≈ 1422px (iets naar boven afgerond) — dekt
 *   de volledige breedte tot die grens, voor die vaste hoogte
 * - min-height: 56.25vw (= 9/16 van de volledige viewportbreedte) —
 *   dekt de hoogte ook op zeer brede/alignfull-schermen, waar de
 *   berekende min-width niet meer voldoende zou zijn
 *
 * LET OP: deze exacte pixel-waarde (1425px) klopt specifiek bij een
 * vaste bloklengte van 800px — verandert die bloklengte ooit, dan moet
 * deze waarde opnieuw berekend worden (nieuwe hoogte × 16 / 9).
 */
.js-video-preview {
	position: relative;
	overflow: hidden;
}

.js-video-preview-frame {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	min-width: 1425px;
	min-height: 56.25vw;
	transform: translate(-50%, -50%);
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.js-video-preview-frame.is-visible {
	opacity: 1;
}

/* Label + koptekst + gradient-overlay tijdens de preview — zelfde
   overgangsduur als de iframe zelf (0.3s), zodat alles gelijk aanvoelt.
   !important is hier nodig voor de overlay: Kadence zet daar vaak een
   EIGEN, inline opacity-waarde op (bv. style="opacity:0.3") — die wint
   normaal van een gewone CSS-regel, dus zonder !important zou onze
   verberg-class genegeerd worden. */
.js-video-preview .wp-block-carmel-core-label,
.js-video-preview .wp-block-heading,
.js-video-preview .kt-row-layout-overlay {
	transition: opacity 0.3s ease;
}

.js-video-preview .js-video-preview-hidden {
	opacity: 0 !important;
}