Basic Hero

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

.block-basic-hero {
	--text-color: var(--white);
	position: relative;
	background: $grey-primary;
	min-height: 32rem;
	display: flex;
	align-items: center;
	color: var(--text-color);

	&__wrapper {
		padding: 4rem 0;
		position: relative;
		z-index: 5;

		h1 {
			margin-bottom: 1rem;
			font-weight: 700;
		}

		ol {
			li {

				margin-bottom: 1rem;

				&:last-of-type {
					margin-bottom: 0;
				}
			}
		}
	}
	&__image img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		z-index: 1;
	}
	&.content-alignment-left {
		text-align: left;

		.block-basic-hero__wrapper {
			max-width: 32rem;
		}
	}
	&.content-alignment-right {
		text-align: right;

		.block-basic-hero__wrapper {
			max-width: 32rem;
		}
		.container {
			display: flex;
			justify-content: flex-end;
		}
		.btn {
			margin-right: 0;
			margin-left: 1rem;
		}
	}
	&.content-alignment-center {
		text-align: center;

		.btn {
			margin-right: 0.5rem;
			margin-left: 0.5rem;
		}
		.block-basic-hero__wrapper {
			max-width: 48rem;
			margin: 0 auto;
		}
	}
	&.has-img {
		&:after {
			content: "";
			z-index: 2;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(#000, 0.4);
		}
		h1,
		h2,
		h3,
		h4,
		p {
			color: #fff;
		}
	}
}

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