/**
 * core/cover - Hero
 */

.wp-block-cover.is-style-hero {
	--wp--custom--color--background: var(--wp--preset--color--contrast);
	--cover--overlap--height: 0px;
	--cover--internal--height: calc(100% - var(--cover--overlap--height));
	--cover--spacing--padding--block: var(--wp--custom--spacing--section);

	/* Image */
	--image--blend-mode: overlay;
	--image--opacity: 0.5;

	/* Overlay */
	--overlay--background: var(--wp--custom--color--background);
	--overlay--foreground: none;

	/* Energy wave */
	--energy-wave--background--image: url(../../../assets/images/backgrounds/hero-energy-wave-01.webp);
	--energy-wave--background--position: center top;
	--energy-wave--background--size: auto 363px;
	--energy-wave--opacity: 0.2;
	--energy-wave--z-index: 2;

	padding: calc(var(--wp--custom--head--dimensions--height) + var(--cover--spacing--padding--block)) var(--wp--style--root--padding-left) var(--cover--spacing--padding--block) var(--wp--style--root--padding-right);
	background: var(--wp--custom--color--background);

	&:has(.yoast-breadcrumbs) {
		--cover--spacing--padding--block: var(--wp--preset--spacing--resp-60-90);
	}
}


/* --- Background image --- */
.wp-block-cover.is-style-hero :where(.wp-block-cover__image-background, .wp-block-cover__video-background) {
	opacity: var(--image--opacity);
	mix-blend-mode: var(--image--blend-mode);
	z-index: 1;
}

/* Limit height of background image when last child is media-text or embed */
.wp-block-cover.is-style-hero:has(.wp-block-cover__overlap:last-child) :is(.wp-block-cover__image-background, .wp-block-cover__background,.wp-block-cover__video-background) {
	block-size: var(--cover--internal--height);
	max-block-size: var(--cover--internal--height);
}


/* --- Overlay --- */

/* Background: Blue to orange gradient */
.wp-block-cover.is-style-hero::after {
	display: block;
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	block-size: var(--cover--internal--height);
	inline-size: 100%;
	background-image: var(--overlay--background);
	content: '';
	opacity: 0.6;
	mix-blend-mode: hard-light;
	z-index: 2;
}

.wp-block-cover.is-style-hero .wp-block-cover__background {
	block-size: var(--cover--internal--height);
	background-color: transparent !important;
	opacity: 1 !important;
	z-index: 3;
}

.wp-block-cover.is-style-hero .wp-block-cover__background::before,
.wp-block-cover.is-style-hero .wp-block-cover__background::after {
	display: block;
	position: absolute;
	inset-inline-start: 0;
	inline-size: 100%;
	content: '';
}

/* Middle: Energy wave */
.wp-block-cover.is-style-hero .wp-block-cover__background::before {
	inset-block-end: 0;
	block-size: var(--cover--internal--height);
	background-image: var(--energy-wave--background--image);
	background-position: var(--energy-wave--background--position);
	background-repeat: no-repeat;
	background-size: var(--energy-wave--background--size);
	opacity: var(--energy-wave--opacity);
	z-index: var(--energy-wave--z-index);
}

/* Foreground: Top gradient */
.wp-block-cover.is-style-hero .wp-block-cover__background::after {
	inset-block-start: 0;
	block-size: calc(var(--cover--internal--height) / 2);
	background-image: var(--overlay--foreground);
	z-index: 3;
}


/* --- Content --- */
.wp-block-cover.is-style-hero .wp-block-cover__inner-container {
	max-inline-size: var(--wp--style--global--wide-size);
	z-index: 4;
}

.wp-block-cover.is-style-hero .wp-block-cover__inner-container h1 .is-small-caps {
	margin-block-end: var(--wp--preset--spacing--20);
	color: currentColor;
	font-size: var(--wp--custom--heading--small--font-size);
	font-weight: var(--wp--custom--heading--small--font-weight);
	line-height: var(--wp--custom--heading--small--line-height);
	text-transform: none;
}

/* --- Spacing of siblings --- */
/* When the next sibling is a full width container with background color, remove its top margin */
.wp-block-cover.is-style-hero.alignfull:has(+ .alignfull.has-background, + [class*='is-style-section']) {
	margin-block-end: 0;
}

/* When the next sibling is a full width container, add a bottom margin */
.wp-block-cover.alignfull.is-style-hero + :where(.alignfull, [class*='is-style-section']),
.wp-block-template-part:has(> .wp-block-cover.is-style-hero) + :where(.alignfull, [class*='is-style-section']) {
	margin-block-start: var(--wp--custom--spacing--section);
}

/* When the next sibling is a full width container with background color, remove its top margin */
.wp-block-cover.alignfull.is-style-hero + :where(.alignfull.has-background, [class*='is-style-section']),
.wp-block-template-part:has(> .wp-block-cover.is-style-hero) + :where(.alignfull.has-background, [class*='is-style-section']) {
	margin-block-start: 0;
}


/* --- Overlap --- */
/* Hero with overlap */
.wp-block-cover.is-style-hero:has(.wp-block-cover__overlap) {
	--overlap--flag--offset: var(--wp--preset--spacing--20);
	--overlap--offset: 0px;
	--overlap--spacing--margin-inline: calc(var(--wp--style--root--padding-left) * -1);

	padding-block-end: 0;

	.wp-block-cover__background::before {
		block-size: 100%;
	}
}

.wp-block-cover.is-style-hero:has(.wp-block-cover__overlap .is-style-flag) {
	--overlap--offset: 50px;
}

/* Overlap container */
.wp-block-cover__overlap.wp-block-group.wp-block-group {
	position: relative;
	max-inline-size: 100%;
	margin-block-start: calc(var(--wp--preset--spacing--90) + var(--overlap--offset)) !important;
	z-index: 5;
}

.wp-block-cover__overlap.wp-block-group.wp-block-group:has(.wp-block-embed) {
	max-inline-size: var(--wp--style--global--content-size);
}

.wp-block-cover__overlap.wp-block-group > .is-style-flag {
	position: absolute;
	inset-block-end: anchor(top);
	inset-inline-start: calc(anchor(left) + var(--overlap--flag--offset));
	position-anchor: --promo;
}

.wp-block-cover__overlap.wp-block-group > :nth-child(2) {
	anchor-name: --promo;
	margin-inline: var(--overlap--spacing--margin-inline) !important;
	padding: 0;
}

/* White background to create "overlap" effect */
.wp-block-cover__overlap.wp-block-group:last-child::before {
	display: block;
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: 0;
	block-size: 50%;
	inline-size: 100vw;
	margin: 0 calc(50% - 50vw);
	background-color: var(--wp--preset--color--base);
	content: '';
	z-index: -2 !important;
}

/* Disables reusable block wrapper when there is an overlap */
.wp-block-cover.is-style-hero .wp-block.is-reusable:has(> .wp-block-cover__overlap.wp-block-group) {
	display: contents;
}


/* Disables forced aspect ratio on embeds in cover blocks */
.wp-embed-responsive .wp-block-cover.is-style-hero .wp-block-embed .wp-block-embed__wrapper::before {
	padding-block-start: 0 !important;
}

/* --- Team member hero --- */
.wp-block-cover.is-style-hero-team-member {
	--cover--photo--aspect-ratio: 392 / 445;
	--cover--spacing--padding--block-end: var(--wp--preset--spacing--60);

	margin-block-end: 0;
	padding-block-end: var(--cover--spacing--padding--block-end);
}

.wp-block-cover.is-style-hero-team-member .wp-block-post-featured-image {
	block-size: auto;
	inline-size: 100%;
	aspect-ratio: var(--cover--photo--aspect-ratio);
}

/* --- Hero columns --- */
.wp-block-columns.ceba-hero__columns {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--60);
}

/* Opacity helpers */
.wp-block-cover.is-style-hero:has(.has-background-dim-100) {
	--image--opacity: 0;
}

.wp-block-cover.is-style-hero:has(.has-background-dim-90) {
	--image--opacity: 0.1;
}

.wp-block-cover.is-style-hero:has(.has-background-dim-80) {
	--image--opacity: 0.2;
}

.wp-block-cover.is-style-hero:has(.has-background-dim-70) {
	--image--opacity: 0.3;
}

.wp-block-cover.is-style-hero:has(.has-background-dim-60) {
	--image--opacity: 0.4;
}

.wp-block-cover.is-style-hero:has(.has-background-dim-50) {
	--image--opacity: 0.5;
}

.wp-block-cover.is-style-hero:has(.has-background-dim-40) {
	--image--opacity: 0.6;
}

.wp-block-cover.is-style-hero:has(.has-background-dim-30) {
	--image--opacity: 0.7;
}

.wp-block-cover.is-style-hero:has(.has-background-dim-20) {
	--image--opacity: 0.8;
}

.wp-block-cover.is-style-hero:has(.has-background-dim-10) {
	--image--opacity: 0.9;
}

.wp-block-cover.is-style-hero:has(.has-background-dim-0) {
	--image--opacity: 1;
	--image--blend-mode: none;
	--energy-wave--background--image: url(../../../assets/images/backgrounds/hero-energy-wave-02.webp);
	--energy-wave--background--position: center top;
	--overlay--background: linear-gradient(106deg, var(--wp--preset--color--contrast) 34.62%, rgb(255 112 56 / 80%) 100%);
	--overlay--foreground: linear-gradient(180deg, var(--wp--preset--color--contrast) 0%, rgb(17 42 86 / 0%) 100%);
	--overlay--opacity: 0.3;

	&:has(.wp-block-cover__overlap) {
		--cover--internal--height: calc(100% - var(--cover--overlap--height));

		/* Add top padding to the inner container when there is an overlap */
		.wp-block-cover__inner-container {
			padding-block-start: var(--wp--preset--spacing--150);
		}
	}
}

/* Video hero */
.wp-block-cover.is-style-hero:has(.has-background-dim-0):has(.wp-block-cover__video-background) {
	--energy-wave--background--image: url(../../../assets/images/backgrounds/hero-energy-wave-03.webp);
	--energy-wave--background--position: center bottom;
	--energy-wave--opacity: 0.5;
	--energy-wave--z-index: 4;


	.wp-block-cover__background::before {
		block-size: 100%;
	}
}

@media (width >= 600px) {
	.wp-block-cover.is-style-hero {
		--wp--style--global--content-size: 840px;
		--cover--inner--spacing--margin--inline: 0;
		--cover--min-block-size: 666px;
		--energy-wave--background--size: auto 726px;
		--energy-wave--background--position: center bottom;

		min-block-size: var(--cover--min-block-size) !important;
	}

	.wp-block-cover.is-style-hero .wp-block-cover__inner-container {
		inline-size: 100%;

		> * {
			margin-inline: var(--cover--inner--spacing--margin--inline) !important;
		}
	}

	/* --- Team member hero --- */
	.wp-block-cover.is-style-hero-team-member,
	.wp-block-cover.is-style-hero:has(.wp-block-cover__overlap .wp-block-embed) {
		--wp--style--global--content-size: 1272px;
		--cover--inner--spacing--margin--inline: auto;
		--cover--min-block-size: 0;
	}

	/* Video hero */
	.wp-block-cover.is-style-hero:has(.has-background-dim-0):has(.wp-block-cover__video-background) {
		--energy-wave--background--size: auto 985px;
	}
}

@media (width >= 1024px) {
	/* Hero with overlap */
	.wp-block-cover.is-style-hero:has(.wp-block-cover__overlap) {
		--cover--internal--height: calc(100% - (var(--cover--overlap--height) / 2));
	}

	.wp-block-cover__overlap.wp-block-group {
		--overlap--flag--offset: 0px;
		--overlap--spacing--margin-inline: auto;
	}

	.wp-block-cover__overlap.wp-block-group > :nth-child(2) {
		margin-inline: auto;
	}

	.wp-block-cover.is-style-hero.is-style-hero-tall .wp-block-separator[class*='is-style-momentum-bar'] {
		block-size: 24px;
	}

	.wp-block-cover.is-style-hero:has(.has-background-dim-0):has(.wp-block-cover__overlap) {
		--cover--internal--height: calc(100% - (var(--cover--overlap--height) / 2));
	}

	/* --- Tall hero --- */
	.wp-block-cover.is-style-hero.is-style-hero-tall {
		--overlap--offset: var(--wp--preset--spacing--120);
	}

	/* --- Team member hero --- */
	.wp-block-cover.is-style-hero-team-member {
		overflow: visible !important;
	}

	.wp-block-cover.is-style-hero-team-member .wp-block-post-featured-image {
		margin-block-end: calc(-50% - var(--cover--spacing--padding--block-end)) !important;
	}

	/* --- Hero columns --- */
	.wp-block-columns.ceba-hero__columns {
		grid-template-columns: repeat(12, 1fr);

		& > .wp-block-column:nth-child(1) {
			grid-column: 1 / 9;
		}

		& > .wp-block-column:nth-child(2) {
			grid-column: 9 / 13;
			text-align: end;
		}
	}
}

@media (width >= 1920px) {
	.wp-block-cover.is-style-hero {
		--energy-wave--background--size: 100% 726px;
	}

	.wp-block-cover.is-style-hero:has(.has-background-dim-0):has(.wp-block-cover__video-background) {
		--energy-wave--background--size: 100% 985px;
	}
}

/* Mobile only */
@media (width < 768px) {
	.wp-block-cover.is-style-hero .wp-block-embed:last-child {
		--embed--aspect-ratio: 10.46 / 16;
	}

	.wp-block-cover.is-style-hero .wp-block-embed:last-child lite-youtube {
		--play-button--size: 96px 96px;
	}
}