/**
 * Custom – Page Hero Block
 */

.basic-page-hero {
	align-items: center;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	display: flex;
	justify-content: flex-start;
	position: relative;

	&:not(.has-featured-image) {
		background-color: var(--wp--preset--color--green);
		background-image: url(../images/backgrounds/nodes-green.svg);
	}

	&.has-featured-image {
		min-height: 500px;

		&::before {
			background: rgba(0, 0, 0, 0.5);
			content: '';
			height: 100%;
			left: 0;
			position: absolute;
			top: 0;
			width: 100%;

			@media screen and (min-width: 1200px) {
				background: linear-gradient(90deg, rgba(0,0,0,0.5) 45%, rgba(0,0,0,0) 75%);
			}
		}
	}
}

.basic-page-hero__content {
	margin-inline: auto;
	max-width: var(--wp--style--global--wide-size);
	padding-block: var(--wp--preset--spacing--70);
	padding-left: var(--wp--style--root--padding-left);
	padding-right: var(--wp--style--root--padding-right);
	position: relative;
	width: 100%;
	z-index: 1;

	h1 {
		margin-block: 0;
		max-width: 800px;

		.has-featured-image & {
			color: var(--wp--preset--color--white);
		}
	}
}