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

.block-featured-resource-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;
		}
	}

	&__date {
		margin-bottom: rem-calc(10);
		font-size: rem-calc(16);

		p {
			font-size: rem-calc(16);
		}
	}

	&__heading {
		display: inline;
	}

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

	&__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%;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		align-items: flex-end;
		padding: rem-calc(8);
		text-decoration: none;

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

	&__panel {
		--text-color: #{$white};
		padding: rem-calc(15 20);
		background-color: rgba($white, 0.2);
		border-radius: rem-calc(13);
		border: rem-calc(1) solid rgba($white, 0.8);
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		z-index: 9;
		width: 100%;

		@include bp($md) {
			width: 70%;
			padding: rem-calc(25 30);
		}

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

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

}

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