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

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

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

	&: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($lg) {
			height: 30%;
		}
	}

	&.large {
		&:after {
			width: 100%;
			height: 50%;
			content: '';
			background: linear-gradient(180deg, rgba($primary, 0) 0%, $primary 100%);
			position: absolute;
			bottom: 0;
			left: 0;
			z-index: 2;
			pointer-events: none;
		}
	}

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

	.container {

	}

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

	.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;
		}
	}

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

	&__card-col {
		max-width: rem-calc(450);
		position: relative;
		z-index: 5;
		margin-top: rem-calc(48);

		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		@include bp($lg) {
			position: absolute;
			right: 0;
			bottom: 0;
			padding: 0;
		}

		.post-card {
			background-color: #fff;
			flex-grow: 0;

			p {
				color: $primary;
			}
		}
	}

	&__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(100) );

		form {
			width: 100%;
			max-width: rem-calc(300);
			height: rem-calc(60);
			background-color: $white;
			display: flex;
			flex-direction: row;
			padding: 0;
			position: relative;

			@include bp($lg) {
				width: auto;
				max-width: 100%;
			}

			input {
				width: 100%;
				border: none;
				padding: rem-calc(16 40 16 18);
				text-overflow: ellipsis;

				@include bp($lg) {
					width: rfs-fluid-value( rem-calc(408) );
				}
			}

			button {
				width: rem-calc(20);
				height: rem-calc(20);
				flex-shrink: 0;
				margin: 0;
				padding: 0;
				border: none;
				background-color: transparent;

				position: absolute;
				top: 50%;
				right: rem-calc(16);
				transform: translate3d(0,-50%,0);

				background-image: url("data:image/svg+xml,%3Csvg width='23' height='23' viewBox='0 0 23 23' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1.10938 10.398C1.10871 6.00124 4.214 2.2163 8.52616 1.35793C12.8383 0.499566 17.1563 2.80684 18.8394 6.86869C20.5225 10.9305 19.1019 15.6157 15.4464 18.0588C11.7909 20.502 6.91868 20.0226 3.80937 16.914C2.08082 15.186 1.10958 12.8421 1.10938 10.398Z' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M16.8438 16.9141L22.1103 22.1806' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
				background-position: center;
				background-repeat: no-repeat;
				background-size: contain;

				&:hover {
					margin: 0;
					padding: 0;
					border: none;
					background-color: transparent;
				}
			}
		}
	}

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

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

		&.small {
			@include bp($lg) {
				width: 50%;
				max-width: rem-calc(960);
				height: 100%;
				aspect-ratio: 960/540;
				right: 0;
				left: auto;
			}
		}

		&.medium {
			@include bp($lg) {
				width: rem-calc(1280);
				height: 100%;
				aspect-ratio: 1280/853;
				right: 0;
				left: auto;

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

	&__jump-to {
		display: none;

		@include bp($md) {
			width: rem-calc(14);
			height: rem-calc(14);
			position: absolute;
			bottom: 0;
			left: 50%;
			z-index: 5;
			margin-bottom: rem-calc(40);
			transform: translate3d(-50%,0,0);

			background-image: url('/wp-content/themes/british-esports/assets/icons/chevron-down--thin.svg');
			background-repeat: no-repeat;
			background-position: center;
			display: block;
			cursor: pointer;
			border: none;
			outline: none;
			background-color: transparent;
		}

		&:hover {
			transform: scale(2) !important;
			opacity: 0.5 !important;
		}
	}

	&__video {
		width: 100%;
		max-width: rem-calc(1920);
		height: 100%;
		display: block;
		position: absolute;
		top: 0;
		pointer-events: none;

		@include bp($lg) {
			pointer-events: all;
		}

		&.small {
			@include bp($lg) {
				width: rem-calc(960);
				height: rem-calc(540);
				aspect-ratio: 960/540;
				right: 0;
				left: auto;
			}
		}

		&.medium {
			@include bp($lg) {
				width: 75%;
				right: 0;
				left: auto;
			}

			&:before {
				top: 40%;
			}
		}

		&.large {
			&:before {
				@include bp($lg) {
					left: 60%;
				}
			}
		}

		&:hover {
			&:before {
				background-color: $primary;
				background-image: url(/wp-content/themes/british-esports/assets/icons/play--white.svg);
			}
		}

		&:before {
			width: rem-calc(60);
			height: rem-calc(60);
			content: none;
			background-color: $white;
			background-image: url(/wp-content/themes/british-esports/assets/icons/play.svg);
			background-repeat: no-repeat;
			background-position: center;
			background-size: rem-calc(20);
			position: absolute;
			top: 50%;
			left: 50%;
			z-index: 10;
			transform: translate3d(-50%,-50%,0);
			transition: 0.3s var(--ease);
			transition-property: background-color, background-image, opacity;
			animation-name: fade-in;
			animation-duration: 0.3s;
			animation-timing-function: var(--ease);
			animation-delay: 1.5s;
			animation-fill-mode: forwards;
			opacity: 0;

			@include bp($lg) {
				content: '';
			}
		}
	}
}

@keyframes fade-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

class HeroFeaturedCard {
	/**
	 * Create and initialise objects of this class
	 * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/constructor
	 * @param {object} block
	 */
	constructor( block ) {
		this.block = block;

		this.jumpTo = this.block.querySelector( '.js-jump-to' );
		if ( this.jumpTo ) {
			this.jumpTo.addEventListener( 'click', () => {
				let scrollPos = this.block.offsetTop;
				let offsetHeight = this.block.offsetHeight;

				window.scrollTo({
					top: scrollPos + offsetHeight,
					behavior: 'smooth'
				});
			});
		}

		this.init();
	}

	init() {
		//
	}
}

document.querySelectorAll('.block-hero-featured-card').forEach((block) => {
	new HeroFeaturedCard( block );
});