/* background color */

body.pageintro-bg-blue header,
body.pageintro-bg-blue div.wp-block-group:has(h1),
body.pageintro-bg-blue .merel-page-intro {
	background-color: var(--wp--preset--color--lichtblauw);
}

body.pageintro-bg-pink header,
body.pageintro-bg-pink div.wp-block-group:has(h1),
body.pageintro-bg-pink .merel-page-intro {
	background-color: var(--wp--preset--color--roze);
}

body.pageintro-bg-yellow header,
body.pageintro-bg-yellow div.wp-block-group:has(h1),
body.pageintro-bg-yellow .merel-page-intro {
	background-color: var(--wp--preset--color--lichtgeel);
}

/* make part of backgroundcolor behind image white */
body.has-pageintro-bg {
	--noncolorpercentage: 440px;
}

@media screen and (max-width: 1024px) {
	body.has-pageintro-bg {
		--noncolorpercentage: 260px;
	}
}

@media screen and (max-width: 860px) {
	body.has-pageintro-bg {
		--noncolorpercentage: 180px;
	}
}

body.has-pageintro-bg .merel-page-intro.has-image {
	background-image: linear-gradient(transparent calc(100% - var(--noncolorpercentage)), white calc(100% - var(--noncolorpercentage)) 100%);
}

body.has-pageintro-bg .merel-page-intro:not(.has-image) p {
	padding-bottom: 4em;
}

/* no margins to keep background consistent */
body.has-pageintro-bg div.wp-block-group:has(h1),
body.has-pageintro-bg .merel-page-intro p {
	margin-block-start: 0;
	margin-top: 0;
}

.merel-page-intro {
	margin-bottom: 4rem;
}

/* intro text */
.merel-page-intro p:first-child {
	font-family: var(--wp--preset--font-family--fira-sans-medium);
	font-size: 20px;
}

/* full size image */
body.has-pageintro-bg .merel-page-intro figure {
	/* overflow: hidden; */
	margin: 0 auto;
	max-width: var(--wp--style--global--wide-size);
}

/* cut corners */
body.has-pageintro-bg .merel-page-intro figure img {
	clip-path: polygon(
		0% 0%,
		calc(100% - var(--merel-imagecorner-size)) 0%,
		100% var(--merel-imagecorner-size),
		100% 100%,
		var(--merel-imagecorner-size) 100%,
		0% calc(100% - var(--merel-imagecorner-size))
	);
}

@media screen and (max-width: 1000px) {
	body.has-pageintro-bg .merel-page-intro .fullsize-image, body.has-pageintro-bg .merel-page-intro {
		overflow: hidden;
	}

	body.has-pageintro-bg .merel-page-intro .fullsize-image, body.has-pageintro-bg .merel-page-intro figure {
		margin-left: -15vw !important;
		margin-right: -15vw !important;
		max-width: 130vw !important;
		padding: 0;
		width: 130vw;
	}

	body.has-pageintro-bg .merel-page-intro figure img {
		clip-path: none;
	}
}

/* quote on image */
div.merel-page-intro {
	position: relative;
}

div.merel-page-intro figcaption {
	background-image: url('../../assets/images/blackbird/beak-closed-right-figcaption.svg');
	background-repeat: no-repeat;
	background-position: left center;
	background-color: var(--wp--preset--color--lichtblauw);
	background-size: contain;
	border-radius: 0;
	bottom: var(--merel-imagecorner-size);
	color: var(--wp--preset--color--oranje);
	font-family: var(--wp--preset--font-family--fira-sans);
	font-style: italic;
	font-size: 24px;
	font-weight: 600;
	letter-spacing: .3px;
	margin: 0 0 0 -42px;
	max-width: var(--wp--style--global--wide-size);
	padding: 12px 32px 12px 64px;
	position: absolute;
}

@media screen and (max-width: 1000px) {
	div.merel-page-intro figure {
		margin: 0 auto 6rem !important;
		position: relative;
	}

	div.merel-page-intro figcaption {
		background-color: transparent;
		background-image: none;
		display: inline-block;
		font-size: 20px;
		height: 100px;
		left: 20vw;
		position: absolute;
		top: 100%;
	}
}

.merel-page-intro .wp-element-button {
	margin-bottom: 1rem;
	width: initial !important;
}

/* arrow */
.merel-arrow {
	display: block;
	width: 38px;
	margin: 1rem auto;
	transform: scale(-1, 1);
}

@media screen and (max-width: 600px) {
	.merel-arrow {
		transform: scale(-.7,1);
	}
}