/**
 * Component: Video
 */

.bw-video__frame {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: var(--bw-radius-lg);
	overflow: hidden;
	background: var(--bw-midnight);
	box-shadow: var(--bw-shadow);
}

.bw-video__player,
.bw-video__poster,
.bw-video__frame iframe {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 0;
	display: block;
}

.bw-video__frame .bw-placeholder {
	height: 100%;
	border-radius: 0;
}

.bw-video__frame--embed .bw-placeholder__label {
	display: none;
}

/* Klik-om-te-laden: tot dat moment gaat er niets naar de videodienst. */
.bw-video__play {
	position: absolute;
	inset: 0;
	display: grid;
	place-content: center;
	justify-items: center;
	gap: var(--bw-space-2xs);
	width: 100%;
	border: 0;
	background: rgba(25, 48, 91, 0.45);
	color: var(--bw-oat);
	cursor: pointer;
	transition: background-color var(--bw-duration) var(--bw-ease);
}

.bw-video__play:hover {
	background: rgba(25, 48, 91, 0.62);
}

.bw-video__play-icon {
	display: grid;
	place-items: center;
	width: 4.5rem;
	height: 4.5rem;
	border-radius: var(--bw-radius-pill);
	background: var(--bw-caramel-surface);
	color: var(--bw-midnight);
	transition: transform var(--bw-duration) var(--bw-ease);
}

.bw-video__play-icon .bw-icon {
	width: 2rem;
	height: 2rem;
	fill: currentColor;
	margin-inline-start: 3px;
}

.bw-video__play:hover .bw-video__play-icon {
	transform: scale(1.06);
}

.bw-video__play-label {
	font-family: var(--bw-font-heading);
	font-size: var(--bw-text-sm);
	letter-spacing: var(--bw-tracking-caps);
	text-transform: uppercase;
}

.bw-video__notice {
	position: absolute;
	inset-block-end: 0;
	inset-inline: 0;
	margin: 0;
	padding: var(--bw-space-2xs) var(--bw-space-sm);
	background: rgba(25, 48, 91, 0.86);
	color: rgba(235, 232, 219, 0.92);
	font-size: var(--bw-text-xs);
	text-align: center;
}

.bw-video__transcript {
	margin-block-start: var(--bw-space-md);
	border-block-start: 1px solid var(--bw-surface-border, var(--bw-border));
	padding-block-start: var(--bw-space-sm);
}

.bw-video__transcript summary {
	cursor: pointer;
	font-family: var(--bw-font-heading);
	font-size: var(--bw-text-sm);
	letter-spacing: var(--bw-tracking-caps);
	text-transform: uppercase;
	color: var(--bw-accent-text, var(--bw-caramel-ink));
}

.bw-video__transcript[open] summary {
	margin-block-end: var(--bw-space-sm);
}