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

.block-case-study-hero {
	--text-color: #{$black};

	@include bp($xl) {
		--text-color: #{$white};
	}

	overflow: hidden;
	margin-left: rem-calc(-8);
	margin-right: rem-calc(-8);
	padding-left: rem-calc(8);
	padding-right: rem-calc(8);

	&__breadcrumbs {
		position: relative;
		z-index: 2;
		width: 100%;
	}

	.rank-math-breadcrumb {
		padding-top: 0;
		// padding-left: clamp(rem-calc(20), 2vw, rem-calc(30));
		width: 100%;

		@include bp($xl) {
			width: 40%;
		}

		.separator {
			padding-left: clamp(rem-calc(10), 2vw, rem-calc(14));
			padding-right: clamp(rem-calc(10), 2vw, rem-calc(14));
		}

		a {
			text-underline-offset: rem-calc(2);
		}

		p {
			font-size: clamp(rem-calc(14), 2vw, rem-calc(16));
			margin-bottom: 0;
			width: 100%;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
		}
	}

	&__logo {
		width: rem-calc(96);
		height: rem-calc(96);
		background-color: $white;
		display: block;
		margin: 0 auto;
		border-radius: rem-calc(8);
		margin-bottom: rem-calc(30);
		display: flex;
		justify-content: center;
		align-items: center;
		overflow: hidden;

		picture {
			display: flex;
		}

		@include bp($xl) {
			margin-bottom: rem-calc(50);
		}
	}

	&__item {
		width: 100%;
		aspect-ratio: auto;
		background-color: $black;
		position: relative;
		overflow: hidden;
		display: flex;
		align-items: flex-end;
		justify-content: flex-start;
		flex-direction: column;
		background-color: $grey-primary;
		height: 100%;
		display: flex;
		flex-direction: column;

		@include bp($xl) {
			background-color: $black;
			max-height: 100dvh;
			// flex-direction: row;
			padding: rem-calc(8);
			min-height: calc(100vw * 9 / 16);
			// justify-content: flex-end;
			align-items: center;
		}

		.btn--hollow {
			@include bp($xl) {
				--arrow: url("data:image/svg+xml,%3Csvg width='19' height='10' viewBox='0 0 19 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.695312 4.33333C0.327123 4.33333 0.0286458 4.63181 0.0286458 5C0.0286458 5.36819 0.327123 5.66667 0.695312 5.66667V5V4.33333ZM18.1667 5.4714C18.4271 5.21105 18.4271 4.78895 18.1667 4.5286L13.9241 0.285954C13.6637 0.0256052 13.2416 0.0256052 12.9813 0.285954C12.7209 0.546304 12.7209 0.968414 12.9813 1.22876L16.7525 5L12.9813 8.77124C12.7209 9.03159 12.7209 9.4537 12.9813 9.71405C13.2416 9.97439 13.6637 9.97439 13.9241 9.71405L18.1667 5.4714ZM0.695312 5V5.66667H17.6953V5V4.33333H0.695312V5Z' fill='white'/%3E%3C/svg%3E%0A");
			}
		}
	}

	&__item-statistics-item {
		display: flex;
		flex-direction: column;
	}

	&__item-statistics-item-figure {
		margin-bottom: rem-calc(5);
	}

	&__item-statistics-item-text {
		margin-bottom: rem-calc(5);
		font-size: clamp(rem-calc(16), 2vw, rem-calc(26));
	}

	&__item-title {
		margin-bottom: rem-calc(15);

		@include bp($xl) {
			margin-bottom: rem-calc(30);
		}
	}

	&__item-content-quote-wrapper {
		position: relative;
		z-index: 2;
		width: 100%;
		border-radius: 0 0 rem-calc(13) rem-calc(13);
		z-index: 2;
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		padding: rem-calc(20);
		border: rem-calc(1) solid rgba($white, 0.2);
		background-color: $grey-primary;

		@include bp($xl) {
			width: 60%;
			padding: rem-calc(30);
			background-color: rgba($black, 0.1);
			border-radius: rem-calc(13);
		}

		@include bp($xxl) {
			width: 50%;
		}
	}

	&__top-details {
		display: flex;
		flex-direction: column;
		gap: rem-calc(30);
		margin-bottom: rem-calc(20);

		@include bp($lg) {
			gap: rem-calc(80);
		}
	}

	&__pre-heading {
		margin-bottom: 0;
	}

	&__item-content {
		position: relative;
		z-index: 2;
		width: 100%;
		height: 100%;
		padding: rem-calc(30 30 20 30);
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		gap: rem-calc(30);

		@include bp($xl) {
			gap: rem-calc(50);
		}
	}

	&__item-image {
		position: relative;
		aspect-ratio: 16/9;
		width: 100%;
		background-color: $black;

		&:after {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: rgba($black, 0.5);
			display: none;

			@include bp($xl) {
				display: block;
			}
		}

		@include bp($xl) {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			aspect-ratio: auto;
			width: auto;
		}

		img {
			display: block;
		}
	}

}

{
    "$schema": "https://schemas.wp.org/trunk/block.json",
    "apiVersion": 2,
    "name": "strategiq/case-study-hero",
    "title": "Case study hero",
    "description": "Case study hero block",
    "category": "strategiq",
    "icon": "strategiq",
    "acf": {
        "mode": "preview",
        "renderTemplate": "block-case-study-hero.php"
    },
    "supports": {
        "anchor": true,
        "align": false,
        "color": {
            "background": false,
            "text": false,
            "gradients": false
        },
        "spacing": {
            "padding": [
				"top",
				"bottom"
			],
            "margin": [
                "top",
                "bottom"
            ]
        }
    },
    "style": "file:../../assets/css/case-study-hero/block-case-study-hero.css"
}