/* ---------------------------------------------------------------------------
 * Blok: Video (Figma 277:6311). Kop en intro op het donkere vlak, daaronder
 * de video op volle wrapperbreedte (1398x789 in het ontwerp, dus 16:9) met
 * radius 25. In de standaardweergave loopt de video over de curve van donker
 * naar licht heen, net als de kaarten in de vacatures-slider.
 * ------------------------------------------------------------------------- */

.blok-video {
	position: relative;
	padding: 91px 0 60px;
}

.blok-video--donker {
	background: var(--c-donkerblauw);
	color: var(--c-wit);
}

.blok-video--donker_curve {
	color: var(--c-wit);
}

/* Donker vlak dat halverwege de video ophoudt; de curve snijdt het lichte
 * vlak eruit, zoals elders op de site (ellips 3999x499 op 1920). */
.blok-video--donker_curve .blok-video__achtergrond {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	/* De video is 789px hoog in het ontwerp en steekt er voor 60% doorheen. */
	bottom: 330px;
	background: var(--c-donkerblauw);
	pointer-events: none;
}

.blok-video--donker_curve .blok-video__achtergrond::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	height: 1.594vw;
	background: var(--c-donkerblauw);
	-webkit-mask-image: radial-gradient(104.14vw 13vw at 50% 13vw, transparent 99.6%, #000 100%);
	mask-image: radial-gradient(104.14vw 13vw at 50% 13vw, transparent 99.6%, #000 100%);
}

/* Kop en intro */

.blok-video__kop {
	position: relative;
	max-width: 1160px; /* 1400 minus 2x120 padding uit het ontwerp */
	margin-inline: auto;
	text-align: center;
}

.blok-video__titel {
	margin: 0 0 15px;
	font-size: 36px;
	line-height: 44px;
	color: var(--c-wit);
}

.blok-video--licht .blok-video__titel {
	color: var(--c-donkerblauw);
}

.blok-video__intro {
	margin: 0;
}

.blok-video__intro p {
	margin: 0;
}

/* De speler */

.blok-video__speler {
	position: relative;
	margin-top: 58px; /* ontwerp: 58px onder de kop */
	aspect-ratio: 1398 / 789;
	border-radius: var(--radius-sectie);
	overflow: hidden;
	background: var(--c-secundair);
	box-shadow: 5px 5px 25px rgb(0 0 0 / 15%);
}

.blok-video__start {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.blok-video__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Afspeelknop: blauwe cirkel met een witte driehoek. */
.blok-video__knop {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 88px;
	height: 88px;
	border-radius: 50%;
	background: var(--c-blauw);
	color: var(--c-wit);
	box-shadow: 0 10px 30px rgb(0 0 0 / 25%);
	transition: scale var(--dur-kort) var(--ease-out), background-color var(--dur-kort) var(--ease-out);
}

.blok-video__knop svg {
	width: 34px;
	height: 34px;
	translate: 2px 0; /* optisch centreren van de driehoek */
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.blok-video__start:hover .blok-video__knop {
		scale: 1.08;
	}
}

.blok-video__start:focus-visible {
	outline: 3px solid var(--c-blauw);
	outline-offset: -3px;
}

.blok-video__frame {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

@media (max-width: 1023px) {
	.blok-video--donker_curve .blok-video__achtergrond {
		bottom: 22vw;
	}
}

@media (max-width: 767px) {
	.blok-video {
		padding: 46px 0 34px;
	}

	.blok-video__titel {
		font-size: 22px;
		line-height: 28px;
		margin-bottom: 10px;
	}

	.blok-video__speler {
		margin-top: 30px;
		border-radius: var(--radius-kaart);
	}

	.blok-video__knop {
		width: 60px;
		height: 60px;
	}

	.blok-video__knop svg {
		width: 24px;
		height: 24px;
	}
}