/* DQ Videoblok: video met getekende pijl en titel, en de thumbnail "Bekijk de video" in de paginakop. */

/* ---------- Thumbnail in de kaartkop ---------- */
.vc_row.pagina-header-2koloms-row:has(.dq-video-thumb) {
	align-items: center;
}
.dq-video-thumb {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	border-radius: 18px;
	background-size: cover;
	background-position: center;
	box-shadow: 0 10px 25px rgb(0 0 0 / 12%);
	overflow: hidden;
	text-decoration: none !important;
	transition: box-shadow .3s, transform .3s;
}
.dq-video-thumb::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgb(0 0 0 / 35%) 0%, rgb(0 0 0 / 0%) 60%);
}
.dq-video-thumb:hover {
	box-shadow: 0 16px 35px rgb(0 0 0 / 18%);
	transform: translateY(-3px);
}
.dq-video-play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 58px;
	height: 58px;
	margin: -29px 0 0 -29px;
	border-radius: 50%;
	background: rgb(255 255 255 / 92%);
	box-shadow: 0 4px 14px rgb(0 0 0 / 25%);
	transition: transform .3s;
}
.dq-video-play::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -10px 0 0 -6px;
	border-style: solid;
	border-width: 10px 0 10px 17px;
	border-color: transparent transparent transparent #000;
}
.dq-video-thumb:hover .dq-video-play {
	transform: scale(1.08);
}
.dq-video-label {
	position: absolute;
	left: 14px;
	bottom: 14px;
	padding: 8px 14px;
	border-radius: 12px;
	background: var(--dq-kop-accent, #ffc109);
	color: var(--dq-kop-knoptekst, #000);
	font-size: 14px;
	font-weight: 600;
	box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
}

/* Onderschrift onder de thumbnail; de pijl loopt vanaf de tekst over de thumbnail naar de playknop.
 * Alles in procenten van de thumbnail, zodat de punt bij elke breedte net links onder de playknop uitkomt. */
.dq-video-thumb-wrap {
	position: relative;
}
.dq-video-pijl-play {
	position: absolute;
	/* Staart onder de thumbnail boven het onderschrift, punt schuin omhoog richting de playknop */
	left: 31%;
	bottom: -36px;
	width: 40px;
	height: 80px;
	overflow: visible;
	pointer-events: none;
	z-index: 2;
	fill: none;
	stroke: var(--dq-kop-pijl, var(--dq-kop-accent, #ffc109));
	stroke-width: 4;
	stroke-linecap: round;
	stroke-linejoin: round;
	filter: drop-shadow(0 1px 2px rgb(0 0 0 / 35%));
}
.dq-video-onderschrift {
	margin: 42px 0 0 10%;
}
.dq-video-onderschrift .dq-video-titel {
	display: block;
	font-size: 23px;
	white-space: normal;
}

/* ---------- Videoblok ---------- */
.dq-video-blok {
	max-width: 860px;
	margin: 0 auto 40px; /* de productenrij erboven heeft al genoeg ruimte onderaan */
}
.dq-video-kop {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	margin: 0 0 4px 8%;
}
.dq-video-titel {
	font-family: 'Caveat', cursive;
	font-weight: 600;
	font-size: 30px;
	line-height: 1.1;
	color: #222;
	white-space: nowrap;
	transform: rotate(-2deg);
}
.dq-video-pijl {
	flex-shrink: 0;
	width: 46px;
	height: 64px;
	margin-top: 14px;
	fill: none;
	stroke: var(--dq-kaart-accent, #ffc109);
	stroke-width: 4;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.dq-video-frame {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: 18px;
	overflow: hidden;
	background: #000;
	box-shadow: 0 10px 25px rgb(0 0 0 / 12%);
}
.dq-video-frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

@media (max-width: 959px) {
	.vc_row.pagina-header-2koloms-row:has(.dq-video-thumb) > .wpb_column:has(.dq-video-thumb) {
		margin-top: 20px;
	}
	.dq-video-kop {
		margin-left: 0;
	}
	.dq-video-titel {
		font-size: 25px;
		white-space: normal;
	}
	.dq-video-pijl {
		width: 38px;
		height: 52px;
	}
}