/**
 * core/cover/feature
 */

.wp-block-cover.is-style-feature {
	--eh--statistic--spacing: var(--wp--preset--spacing--30);

	padding: 0;
	background-color: var(--feature--color--background);
	border-radius: var(--wp--custom--border--radius--20);
	overflow: hidden;
}


/* Maroon background */
.wp-block-cover.is-style-feature,
.wp-block-cover.is-style-feature:has(.wp-block-cover__background.has-accent-1-background-color) {
	--feature--gradient: linear-gradient(180deg, rgb(0 0 0 / 0%) 51%, var(--wp--preset--color--accent-2) 100%);
	--feature--color--background: var(--wp--preset--color--accent-2);
	--eh--statistic--border--color: var(--wp--preset--color--accent-1);
}

/* Bright red background */
.wp-block-cover.is-style-feature:has(.wp-block-cover__background.has-accent-1-background-color) {
	--feature--gradient: linear-gradient(180deg, rgb(0 0 0 / 0%) 51%, var(--wp--preset--color--accent-1) 100%);
	--feature--color--background: var(--wp--preset--color--accent-1);
	--eh--statistic--border--color: var(--wp--preset--color--accent-2);
}

/* Gradient / Image */
.wp-block-cover.is-style-feature .wp-block-cover__background,
.wp-block-cover.is-style-feature .wp-block-cover__image-background {
	aspect-ratio: 327 / 280;
}

/* Gradient background */
.wp-block-cover.is-style-feature .wp-block-cover__background {
	background-color: transparent !important;
	background-image: var(--feature--gradient);
	opacity: 1;
}

/* Image */
.wp-block-cover.is-style-feature .wp-block-cover__image-background {
	display: block;
	position: relative;
	object-fit: cover;
}


.wp-block-cover.is-style-feature .wp-block-cover__inner-container {
	padding: var(--wp--preset--spacing--30);
	padding-block-start: 0;
}

/* Ensure the start and end blocks take up the full width of the parent container */
.wp-block-cover .wcs-feature__start,
.wp-block-cover .wcs-feature__end,
.wp-block-cover .wcs-feature__start > *,
.wp-block-cover .wcs-feature__end > * {
	inline-size: 100%;
	margin: 0;
}

/* Image / CTA container */
.wp-block-cover .wcs-feature__start {
	display: flex;
	align-items: flex-end;
}

.wp-block-cover .wcs-feature__start :where(.wp-block-heading, p) {
	margin-block: var(--wp--preset--spacing--20);
}

.wp-block-cover.is-style-feature .wp-block-buttons.is-style-stretch {
	margin-block: var(--wp--preset--spacing--30);
}

/* Content container */
.wp-block-cover .wcs-feature__end {
	display: flex;
	flex-direction: column;
	justify-content: stretch;
	gap: var(--eh--statistic--spacing);
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40);
}

.wp-block-cover .wcs-feature__end .wp-block-eh-statistic + .wp-block-eh-statistic {
	padding-block-start: var(--eh--statistic--spacing);
	border-block-start: 1px solid var(--eh--statistic--border--color);
}

@media (width >= 680px) {
	.wp-block-cover.is-style-feature .wp-block-cover__inner-container {
		padding-inline: var(--wp--preset--spacing--60);
	}
}

@media (width >= 1024px) {
	.wp-block-cover.is-style-feature {
		--feature--gradient: linear-gradient(180deg, rgb(0 0 0 / 0%) 51%, #000 100%);
		--eh--statistic--spacing: var(--wp--preset--spacing--40);
	}

	.wp-block-cover.is-style-feature,
	.wp-block-cover.is-style-feature .wp-block-cover__inner-container {
		display: grid;
		grid-template-columns: 64.8% 35.2%;
		justify-content: space-between;
		gap: 0;
	}

	/* Image */
	.wp-block-cover.is-style-feature .wp-block-cover__background,
	.wp-block-cover.is-style-feature .wp-block-cover__image-background {
		position: absolute;
		grid-column: 1 / 2;
	}

	.wp-block-cover.is-style-feature .wp-block-cover__background {
		background: linear-gradient(to bottom, rgb(0 0 0 / 0%), rgb(0 0 0 / 0%) 50%, rgb(0 0 0 / 100%)) !important;
		opacity: 1;
		aspect-ratio: unset;
	}

	/* Content */
	.wp-block-cover.is-style-feature .wp-block-cover__inner-container {
		grid-column: 1 / -1;
		padding: 0;
	}

	.wp-block-cover .wcs-feature__start, .wp-block-cover .wcs-feature__end {
		padding: var(--wp--preset--spacing--60);
	}

	.wp-block-cover .wcs-feature__start {
		grid-column: 1 / 2;
	}

	.wp-block-cover .wcs-feature__end {
		grid-column: 2 / span 1;
		padding-block: var(--wp--preset--spacing--70)
	}

	/* Button spacing */
	.wp-block-cover.is-style-feature .wp-block-buttons.is-style-stretch {
		--buttons--spacing--gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	}
}

@media (width <= 1024px) {
	.wp-block-cover.is-style-feature {
		flex-direction: column;
		padding: 0;
	}

	.wp-block-cover.is-style-feature .has-background-gradient.wp-block-cover__background,
	.wp-block-cover.is-style-feature .wp-block-cover__image-background {
		inset-block-end: auto;
	}
}