/* Map background: same layer twice, multiplied, so the faint lines read clearly. */
.custom-content.bg-white {
	background-image:
		url("../../assets/images/custom-content-bg-pattern-white.jpg"),
		url("../../assets/images/custom-content-bg-pattern-white.jpg");
	background-position: right bottom, right bottom;
	background-repeat: no-repeat, no-repeat;
	background-size: auto 100%, auto 100%;
	background-color: #fff;
	background-blend-mode: multiply;
}

.custom-content.bg-brand-dark-blue {
	background-image: url("../../assets/images/custom-content-bg-pattern.jpg");
	background-position: left bottom;
	background-repeat: no-repeat;
	background-size: 75% auto;
}
@media all and (min-width: 768px) {
	.custom-content.bg-brand-dark-blue {
		background-size: 55% auto;
	}
}
@media all and (min-width: 1024px) {
	.custom-content.bg-brand-dark-blue {
		background-size: auto 75%;
	}
}

/* Full width: the text container lies over the image column, so let clicks through to the video controls. */
.custom-content .container-bg ~ .container {
	pointer-events: none;
}
.custom-content .container-bg ~ .container .content {
	pointer-events: auto;
}

/* YouTube embed: 16:9 box, or the full height of the media column in full width. */
.custom-content .video-embed {
	aspect-ratio: 16 / 9;
}
.custom-content .video-embed iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}
@media all and (min-width: 1024px) {
	/* Half the width at 16:9, so the player fits without black bars; less padding lets the text fit that height. */
	.custom-content.has-youtube {
		min-height: 28.125vw;
	}
	.custom-content.has-youtube .content {
		padding-top: 2.5rem;
		padding-bottom: 2.5rem;
	}
	/* If the text still makes the section taller, keep the player 16:9 and centred on the blue background. */
	.custom-content .container-bg .video-embed {
		aspect-ratio: auto;
		height: 100%;
		display: flex;
		align-items: center;
		container-type: size;
	}
	.custom-content .container-bg .video-embed iframe {
		width: min(100cqw, 177.78cqh);
		height: min(100cqh, 56.25cqw);
		margin: 0 auto;
	}
}