Hero

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

.block-hero {
	background-color: $navy;
	color: $white;
	padding-top: rem-calc(80);
	padding-bottom: rem-calc(64);
	min-height: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	flex-direction: column;
	position: relative;

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

	@include bp($lg) {
		padding-top: rem-calc(64);
	}

	.heading {
		color: $white;
		font-weight: 700;
		@include fluid-type(40, 64);

		.single-post &,
		.single-news & {
			@include fluid-type(32, 56);
		}
	}

	&__details {
		margin-top: rem-calc(30);
	}

	&__background {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: $navy;
		background-image: url('#{$asset-path}/images/jagged-lines.svg');
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;

		.single-team & {
			&:after {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background-color: rgba($navy, 0.7);
				display: block;

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

	&__container {
		width: 100%;
		margin-bottom: rem-calc(64);
		position: relative;
		z-index: 99;

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

	&__video-link {
		color: $darkBlue;
		text-decoration: none;
		font-size: rem-calc(18);
		position: relative;
		display: flex;
		align-items: center;
		transition: all 0.3s ease-out;
		padding-top: rem-calc(24);

		@include bp($md) {
			color: $white;
			padding-top: 0;
		}

		&:hover {
			&:before {
				transform: scale(1.1);
				background-color: $lightBlue;
			}
		}

		&:before {
			content: '';
			width: rem-calc(50);
			height: rem-calc(50);
			background-color: $lightBlue;
			border-radius: 50%;
			margin-right: rem-calc(16);
			background-image: url('#{$asset-path}/icons/icon-play.svg');
			background-size: 16px;
			background-repeat: no-repeat;
			background-position: center;
			transition: all 0.3s ease-out;

			@include bp($md) {
				background-color: $white;
			}
		}
	}

	&__featured-link {
		background-color: $white;
		display: flex;
		padding: rem-calc(24 24 24 15);
		text-decoration: none;
		color: $darkBlue;
		@include fluid-type(18, 20);
		position: relative;
		align-items: center;
		transition: all 0.3s ease-out;

		.single-team & {
			background-color: $navy;
			color: $white;
		}

		&:hover {
			&:before {
				transform: scale(1.1);
			}
		}

		@include bp($md) {
			padding: rem-calc(24);
		}

		&:before {
			content: '';
			width: rem-calc(50);
			height: rem-calc(50);
			display: inline-block;
			border-radius: 50%;
			background-color: $orange;
			margin-right: rem-calc(16);
			background-image: url('#{$asset-path}/icons/icon-full-arrow-right-navy.svg');
			background-position: center;
			background-repeat: no-repeat;
			background-size: 40%;
			transition: all 0.3s ease-out;

			.single-service &,
			.single-sector &, {
				background-image: url('#{$asset-path}/icons/icon-full-arrow-right-navy.svg');
			}
		}

		// &:after {
		// 	content: '';
		// 	position: absolute;
		// 	left: 100%;
		// 	top: 0;
		// 	bottom: 0;
		// 	background-color: $white;
		// 	width: rem-calc(1000);
		// }
	}

	&__header {
		display: flex;
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: 99;
	}

	&__footer {
		display: flex;
		width: 100%;
		position: relative;
		left: auto;
		right: auto;
		bottom: auto;
		background-color: $white;
		z-index: 99;

		@include bp($md) {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: transparent;
		}
	}

	&__sub-heading {
		@include fluid-type(24, 32);
		margin-bottom: rem-calc(20);

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

		.single-service &,
		.single-sector & {
			@include fluid-type(18, 22);
		}

		.orange {
			background-color: $orange;
			margin-bottom: 2.1rem;

			&:hover {
				box-shadow: inset 18em 0 0 0 #3185B2;
				color: #fff;
			}
		}
	}

	&__content {
		@include fluid-type(18, 20);

		p {
			@include fluid-type(18, 20);

			&:last-of-type{
				margin-bottom: 0;
			}
		}
	}

	&--extra-small {
		min-height: 0;

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

	&--small {
		min-height: 0;

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

		.heading {
			@include fluid-type(32, 52);
		}
	}

	&--medium {
		min-height: 0;

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

	&--large {
		min-height: 0;

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

	&--with-featured-link {
		padding-bottom: 0;

		@include bp($md) {
			padding-bottom: rem-calc(64);
		}
	}

	&--gradient-overlay {
		picture {
			&:after {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background: rgb(26,47,60);
				background: linear-gradient(270deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.9) 75%);

				.single-service &,
				.single-sector &,
				.single-post &,
				 {
					background: rgb(26,47,60);
					background: linear-gradient(270deg, rgba($navy,0) 0%, rgba($navy,0.9) 75%);
				}

				.single-team & {
					opacity: 0.8;
				}
			}
		}
	}

	&--tint-overlay {
		&:after {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: rgba($navy, 0.85);
		}
	}
}

.single-team {
	.block-hero__background {
		background-image: none;
		background-color: $navy;

		picture {
			width: 100%;
			padding-right: rem-calc(15);
			padding-left: rem-calc(15);
			margin-right: auto;
			margin-left: auto;
			position: relative;

			@media only screen and (min-width: 576px) {
				max-width: rem-calc(540);
			}

			@media only screen and (min-width: 768px) {
				max-width: rem-calc(720);
			}

			@media only screen and (min-width: 992px) {
				max-width: rem-calc(960);
			}

			@media only screen and (min-width: 1200px) {
				max-width: rem-calc(1200);
			}

			&:before {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				bottom: 0;
				width: 50%;
				z-index: 9;
				background: rgb(0,44,91);
				background: linear-gradient(90deg, rgba(0,44,91,1) 45%, rgba(0,44,91,0) 100%);
			}

			&:after {
				content: '';
				position: absolute;
				top: 0;
				right: 0;
				left: auto;
				bottom: 0;
				width: 25%;
				z-index: 9;
				background: rgb(0,44,91);
				background: linear-gradient(270deg, rgba(0,44,91,1) 10%, rgba(0,44,91,0) 100%);
				opacity: 1;
			}
		}
	}
}

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

// 	/**
// 	 * Example function to run class logic
// 	 * Can access `this.block`
// 	 */
// 	init() {
// 		this.blocks.forEach((block) => {
// 			console.log("🚀 ~ file: Example.js ~ line 20 ~ Example ~ init ~ this.block", block);
// 		});
// 	}
// }

// new Example();