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

.block-case-studies-hero {

	&__wrapper{
		margin-bottom: 2rem;
		padding: 2rem 0;
		background: $grey-4;
		border-radius: 0 0 30px 30px;

		@include bp($md){
			padding: 4rem 0;
			border-radius: 0 0 50px 50px;
		}
	}

	&__row{
		@include bp($lg, 'true'){
			flex-direction: column-reverse;
		}
	}

	&__logo-container{
		height: 32vh;
		max-height: 256px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 30px;
		border: solid 1px rgba(56,53,81,0.2);

		picture{
			display: flex;
			align-items: center;
			justify-content: center;
			width: 90%;

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

			@include bp($lg){
				width: 60%;
			}
		}

		img{
			width: 100%;
			object-fit: contain;
		}

		@include bp($md){
			border-radius: 50px;
		}
	}

	&__case-study-meta{
		display: flex;
		flex-direction: column;
		margin-top: 4rem;

		.label{
			background: var(--primary);
			font-size: 14px;
			text-transform: uppercase;
			padding: 2px 6px;
			border-radius: 4px;
			color: var(--white);
			width: fit-content;
			display: inline-block;
		}

		.value{
			border: solid 1px rgba(56,53,81,0.2);
			padding: 2px 6px;
			border-radius: 4px;
			font-size: 14px;
			width: fit-content;
			display: inline-block;
			color: var(--primary);
		}
	}

	&__heading{

		*{
			@include fluid-type(32, 64);
			color: var(--text-color);
		}
	}

	&__image-container{
		margin: 0 1rem;
		border-radius: 30px;
		overflow: hidden;
		height: 40vh;
		display: flex;

		@include bp($md){
			border-radius: 50px;
		}

		@include bp($lg){
			height: 72vh;
		}

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

.global__breadcrumbs{
	background: $grey-4;
}

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();

{
    "$schema": "https://schemas.wp.org/trunk/block.json",
    "apiVersion": 2,
    "name": "strategiq/case-studies-hero",
    "title": "Case Studies Hero",
    "description": "Example block to be used as a template",
    "category": "strategiq",
    "icon": "strategiq",
    "acf": {
        "mode": "preview",
        "renderTemplate": "block-case-studies-hero.php"
    },
    "supports": {
        "anchor": true,
        "align": false,
        "color": {
            "background": false,
            "text": false,
            "gradients": false
        },
        "spacing": {
            "padding": [
                "top",
                "bottom"
            ],
            "margin": [
                "top",
                "bottom"
            ]
        }
    },
    "example": {
        "attributes": {
            "mode": "preview",
            "data": {
                "heading_type": "h2",
                "heading_text": "Example - Example",
                "content": "This is some example content to represent what the content will look like"
            }
        }
    },
    "style": "file:../../assets/css/case-studies-hero/block-case-studies-hero.css"
}