@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
@import "../../resources/scss/vendor/bootstrap/vendor/rfs";

body.error404 {
	.block-hero-basic {
		min-height: auto;
		@include padding-top( rem-calc(100) );
	}
}

.block-hero-basic {
	min-height: rem-calc(300);
	position: relative;
	z-index: 6;
	background-color: $primary;
	@include padding-bottom( rem-calc(100) );
	display: flex;
	flex-direction: column;

	@include bp($md) {
		min-height: rem-calc(600);
	}

	&.has-text-overlay {
		@include padding-bottom( rem-calc(50) );
	}

	&.single-post-hero {
		max-height: rem-calc(700);
	}

	&:before {
		width: 100%;
		height: 100%;
		content: '';
		background: linear-gradient(to top, rgba($primary, 0) 0%, $primary 100%);
		position: absolute;
		top: 0;
		left: 0;
		z-index: 2;
		pointer-events: none;

		@include bp($md) {
			height: 30%;
		}
	}

	&__inner-wrapper {
		position: relative;
		z-index: 5;
		flex-grow: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.block-breadcrumb {
		@include margin-bottom( rem-calc(82) );
		position: relative;
	}

	.container {
		//
	}

	.overlay {
		width: 100%;
		height: 100%;
		position: absolute;
		inset: 0;
		z-index: 2;
		pointer-events: none;
		background-image: url( '/wp-content/themes/british-esports/assets/images/gradients/gradient.svg' );
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;

		@-moz-document url-prefix() {
			opacity: 0.5;
		}
	}

	.heading,
	.content-container {
		color: var( --text-color );
	}

	&__content-col {
		position: relative;
		z-index: 6;
	}

	&__wrapper {
		position: relative;
		z-index: 5;

		.heading {
			&.has-arrow {
				position: relative;

				&:before {
					width: 12vw;
					max-width: 300px;
					height: 1ch;
					content: '';
					display: inline-block;
					margin-right: rem-calc(16);
					background-image: url('/wp-content/themes/british-esports/assets/icons/arrow-right--white.svg');
					background-repeat: no-repeat;
					background-position: calc(80%) center;

					@include bp($md) {
						width: 18vw;
						max-width: 160px;
						height: 1ch;
						margin-right: rem-calc(32);
					}
				}
			}
		}
		.content-container {
			max-width: rem-calc(590);

			&:last-child {
				margin-bottom: 0;
			}
		}
	}

	&__meta-container {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: rem-calc(16 30);
		@include margin-top( rem-calc(54) );
	}

	&__image {
		display: flex;
		flex-direction: column;

		img {
			height: 100%;
			object-fit: cover;
		}
	}

	.text-overlay {
		position: relative;
		z-index: 5;
		margin-top: rem-calc(32);
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-end;

		@include bp($lg) {
			margin-top: 0;
		}

		p {
			margin-bottom: 0;
		}
	}
}