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

.block-split-hero {
	padding: rem-calc(8);

	&__breadcrumbs {
		position: relative;
		z-index: 2;
		width: 100%;
		padding-top: rem-calc(100);
		padding-left: rem-calc(14);
		margin-bottom: rem-calc(20);

		@include bp($lg) {
			padding-top: rem-calc(40);
			padding-left: rem-calc(30);
			margin-bottom: 0;
		}
	}

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

		p {
			margin-bottom: 0;
		}
	}

	&__career-salary {
		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;
		}
	}

	&__career-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;
		}
	}

	&__heading {
		display: inline;
	}

	&__buttons {
		display: inline-flex;
		vertical-align: text-bottom;
		gap: rem-calc(8);
		flex-wrap: wrap;
		margin-top: rem-calc(16); 
	}

	&__content-container {
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	&__content {
		display: flex;
		flex-direction: column;
		flex-grow: 1;
		justify-content: space-between;
		padding: clamp(rem-calc(12), 3vw, rem-calc(90));
		gap: rem-calc(70);
		margin-bottom: rem-calc(50);

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

	&__heading {

		@include bp($lg) {
			font-size: clamp(rem-calc(40), 4vw, rem-calc(84));
		}
	}

	&__image {
		width: 100%;
		aspect-ratio: 1/1;
		background-color: $black;
		border-radius: rem-calc(20);
		overflow: hidden;
		position: relative;
		height: 100%;

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

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

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

}

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