Homepage Hero

@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";

.block-homepage-hero {
	--cta-height-mob: 146px;
	--cta-height: 86px;

	position: relative;
	min-height: 655px;
	height: 100vh;
	overflow: hidden;
	margin-bottom: 1rem;
	margin-top: -60px;
	padding-top: 0;
	max-height: 645px;

	@include bp($sm) {
		padding-top: 60px;
		max-height: 100%;
	}

	@include bp($xl) {
		margin-top: -88px;
		padding-top: 88px;
	}

	&__overlay {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 1;
	}

	&--video {
		iframe,
		video {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			transform: scale(5.5);

			@include bp($md) {
				transform: scale(2.5);
			}

			@include bp($lg) {
				transform: scale(1.5);
			}
		}
	}

	&--search {
		.block-homepage-hero__content {
			p {
				margin-bottom: rem-calc(24);
				@include bp($sm) {
					margin-bottom: rem-calc(32);
				}
			}
		}
	}

	&__image {
		&:before {
			content: "";
			height: 100%;
			width: 100%;
			position: absolute;
			top: 0;
			left: 0;
			background-color: $black;
			opacity: 0.4;
			z-index: 1;

			@include bp($lg) {
				display: none;
			}
		}
	}

	&__wrapper {
		height: 100%;
		display: flex;
		flex-direction: column;
		display: flex;
		flex-direction: column;
		position: relative;
		justify-content: center;
		height: 100%;
		padding-bottom: 150px;
		padding-top: 60px;

		@include bp($sm) {
			padding-bottom: 0;
			padding-top: 0;
		}
	}

	.container {
		width: 100%;
	}

	&__inner {
		position: relative;
		max-width: 600px;
		z-index: 3;

		@include bp($sm) {
			margin-top: calc(-1 * var(--cta-height));
		}
	}

	&__content {
		h1, h2, h3 {
			@include fluid-type(28, 56);
			font-weight: 400;
			color: $white;
			text-transform: uppercase;
			margin-bottom: 1rem;

			@include bp($sm) {
				margin-bottom: rem-calc(24);
			}
		}

		p {
			@include responsive-font($body-default,$body-x-large);
			line-height: 20px;
			font-weight: 400;
			color: $white;
			margin-bottom: 0;

			@include bp($sm) {
				line-height: 32px;
			}
		}
	}

	&__search-submit[type="submit"] {
		display: flex;
		align-items: center;
		width: rem-calc(35);
		height: rem-calc(35);
		background-color: transparent;
		border: none;
		position: absolute;
		left: rem-calc(10);
		top: rem-calc(10);
		border-radius: 50%;
		background-image: url('/wp-content/themes/moore-global/assets/icons/search.svg');
		background-repeat: no-repeat;
		background-position: center;
		background-size: rem-calc(20);
		transition: background-color 0.2s ease-in-out;
		flex-shrink: 0;
		padding: 0;

		@include bp($lg) {
			width: rem-calc(50);
			height: rem-calc(50);
			left: rem-calc(10);
			top: rem-calc(8);
			background-size: rem-calc(24);
		}

		&:hover {
			background-color: $primary-blue;
			border: none;
		}

		&:focus {
			background-color: $primary-blue;
			border: none;
		}
	}

	&__search {
		&-input {
			position: relative;
		}
		input {
			position: relative;
			z-index: 201;
			padding: rem-calc(16 16 16 50);
			width: 100%;
			border: 1px solid $white;
			border-radius: 100px;
			@include responsive-font($body-default,$body-large);
			color: $white;
			background-color: transparent;

			&:focus-visible {
				box-shadow: none;
				outline: none;
			}

			@include bp($lg) {
				padding: rem-calc(20 20 20 70);
				background-position: 22px 22px;
				background-size: 22px;
			}
		}
		/* Remove autofill */
		input:-webkit-autofill,
		input:-webkit-autofill:hover,
		input:-webkit-autofill:focus,
		input:-webkit-autofill:active{
			-webkit-background-clip: text;
			-webkit-text-fill-color: #ffffff;
			box-shadow: 0 0 0 30px transparent inset !important;
		}
	}

	&__search-not-sure {
		@include responsive-font($body-small, $body-default);
		color: $white;
		margin-top: rem-calc(13);

		.text {
			padding-right: rem-calc(20);
			margin-bottom: 12px;
			display: block;

			@include bp($sm) {
				display: inline-block;
				margin-bottom: 0;
			}
		}
	}

	&__search-not-sure-tags {
		display: flex;
		flex-wrap: nowrap;
		white-space: nowrap;
		overflow-x: auto;
		margin: 0 -16px;
		width: calc(100% + 2rem);
		padding-bottom: rem-calc(10);

		@include bp($md) {
			padding-bottom: 0;
			width: 100%;
			margin: 0;
		}

		@include bp($sm) {
			flex-wrap: wrap;
			white-space: normal;
			overflow-x: visible;
			display: inline;
			line-height: 32px;
		}

		.tag:first-of-type {
			margin-left: 1rem;

			@include bp($md) {
				margin-left: 0;
			}
		}
	}

	&__cta {
		position: absolute;
		bottom: 10px;
		left: 0;
		right: 0;
		background: linear-gradient(90deg, rgba(25, 14, 43, 0.5) 0%, rgba(85, 46, 145, 0.5) 100%);
		backdrop-filter: blur(5px);
		padding: 1rem 0;
		z-index: 2;

		&--light-blue {
			background: linear-gradient(90deg, rgba(255, 255, 255, 0.5) 0%, rgba(0, 174, 239, 0.5) 100%);
		}

		.container {
			@include bp($sm) {
				height: var(--cta-height) - 2rem;
			}
			@include bp($md) {
				padding: 0 $container-spacing-mobile;
			}
			@include bp($lg) {
				padding: 0 $container-spacing-desktop;
			}
		}
	}

	&__cta-wrapper {
		display: flex;
		justify-content: space-between;
		flex-direction: column;
		align-items: center;

		@include bp($sm) {
			flex-direction: row;
		}
	}

	&__cta-content {
		text-align: center;
		@include bp($sm) {
			text-align: left;
		}
		p {
			font-size: 18px;
			color: $white;
			margin: 0;
			max-width: 475px;
		}
	}

	&__cta-heading {
		font-size: 24px;
		font-weight: 400;
		margin: 0;
		color: $white;
	}

	&__cta-buttons {
		display: flex;
		gap: rem-calc(16);
		margin-top: 10px;

		@include bp($sm) {
			margin-top: 0;
			align-items: center;
		}

		.btn {
			@include fluid-type(16, 18);
			width: 100%;
			display: inline-block;
			text-align: center;

			@include bp($sm) {
				width: auto;
			}
		}

		.btn--hollow {
			border-color: $white;
			color: $white;

			&:focus {
				color: $white;
			}

			&:before {
				display: none;
			}
		}
	}
}

.translatepress-active {
	.block-homepage-hero {
		margin-top: -90px;

		@include bp($sm) {
			padding-top: 90px;
		}
		@include bp($xl) {
			margin-top: -118px;
			padding-top: 118px;
		}

		&__wrapper {
			padding-top: 90px;

			@include bp($sm) {
				padding-top: 0;
			}
		}
	}
}

class HomepageHero {
	block;

	constructor(block) {
		this.block = block;
		this.init();
	}

	init() {
		/* Swiper Example
		this.swiperElem = this.block.querySelector('.swiper');
		this.swiper = new Swiper(this.swiperElem, {
			pagination: {
				el: '.swiper-pagination',
				clickable: true,
				type: 'custom',
			},
			navigation: {
				nextEl: '.swiper-button-next',
				prevEl: '.swiper-button-prev'
			},
		}); 
		*/
	}
}

document.addEventListener('DOMContentLoaded', () => {
	document.querySelectorAll('.block-homepage-hero').forEach((block) => {
		new HomepageHero(block);
	})
});

{
    "$schema": "https://schemas.wp.org/trunk/block.json",
    "apiVersion": 2,
    "name": "strategiq/homepage-hero",
    "title": "Homepage Hero",
    "description": "Example block to be used as a template",
    "category": "strategiq",
    "icon": "strategiq",
    "acf": {
        "mode": "preview",
        "renderTemplate": "block-homepage-hero.php"
    },
    "supports": {
        "anchor": true,
        "align": false,
        "color": {
            "background": false,
            "text": false,
            "gradients": false
        },
        "spacing": {
            "padding": [
                "top",
                "bottom"
            ],
            "margin": [
                "top",
                "bottom"
            ]
        }
    },
    "example": {
        "attributes": {
            "mode": "preview",
            "data": {
                "heading_type": "h2",
                "heading_text": "Example - Homepage Hero",
                "content": "This is some example content to represent what the content will look like"
            }
        }
    },
    "style": ["file:../../assets/css/homepage-hero/block-homepage-hero.css"],
    "viewScript": ["homepage-hero"]
}