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

.block-image-hero {
	padding-bottom: clamp(rem-calc(30), 4vw, rem-calc(80));
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;

	.single-post & {
		margin-bottom: rem-calc(60);
	}

	.single-resources & {
		margin-bottom: rem-calc(60);
	}

	// .single-events & {
	// 	margin-bottom: rem-calc(60);
	// }

	.page-template-page-template-single-style & {
		margin-bottom: rem-calc(60);
	}

	@include bp($lg) {
		height: 100vh;
		min-height: rem-calc(600);
		max-height: 50vh;
	}

	&:has(.block-image-hero__background-image) {
		--text-color: #{$white};
	}

	&:has(.block-image-hero__cta) {
		.block-image-hero__heading {
			display: inline;
		}
	}

	&__event-details {
		display: flex;
		flex-direction: row;
		align-items: center;
		flex-wrap: wrap;
		gap: rem-calc(10 24);
		margin-bottom: rem-calc(20);

		p {
			margin-bottom: 0;
		}
	}

	&__event-date {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: rem-calc(5);

		&:before {
			content: '';
			display: inline-block;
			width: rem-calc(24);
			height: rem-calc(24);
			background-image: url('data:image/svg+xml;utf8,');
			background-repeat: no-repeat;
			background-size: contain;
			background-position: center;
			vertical-align: middle;
		}
	}

	&__event-location {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: rem-calc(5);

		&:before {
			content: '';
			display: inline-block;
			width: rem-calc(24);
			height: rem-calc(24);
			background-image: url('data:image/svg+xml;utf8,');
			background-repeat: no-repeat;
			background-size: contain;
			background-position: center;
			vertical-align: middle;
		}
	}


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

		@include bp($lg) {
			padding-top: rem-calc(30);
			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);
			transition: color 0.3s ease-in-out;

			&:hover {
				color: $secondary;
			}
		}

		p {
			font-size: clamp(rem-calc(14), 2vw, rem-calc(16));
			margin-bottom: 0;
		}
	}

	&__cta {
		vertical-align: text-bottom;
		font-size: clamp(rem-calc(16), 3vw, rem-calc(26)) !important;
		padding-top: clamp(rem-calc(10), 1.5vw, rem-calc(17)) !important;
		padding-bottom: clamp(rem-calc(10), 1.5vw, rem-calc(17)) !important;
		margin-top: rem-calc(8);
	}

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

	&__container {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		position: relative;
		z-index: 2;
		padding-top: rem-calc(50);
		padding-left: clamp(rem-calc(20), 2vw, rem-calc(30));
		padding-right: clamp(rem-calc(20), 2vw, rem-calc(30));
		gap: clamp(rem-calc(40), 8vw, rem-calc(180));
		height: 100%;
		flex-grow: 1;
	}

	&__background-image {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}

	&.--has-image-overlay {
		.block-image-hero__background-image {
			&:after {
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background-color: rgba($black, 0.6);
				pointer-events: none;
			}
		}
	}
}

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