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

.block-simple-hero {
	padding-top: clamp(40px, 8vw, 140px);
	padding-bottom: clamp(40px, 8vw, 140px);
	background: $grey-4;
	border-radius: 0 0 32px 32px;
	height: auto;
	display: flex;
	align-items: center;

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

	&__row{
		padding: 2rem 0;

		@include bp($md){
			padding: 4rem 0;
		}
	}

	&__heading{
		color: var(--text-color) !important;
	}

	&__content{
		p{
			@include fluid-type(18, 22);
		}
	}

	&__cta{
		.btn{
			/* color: var(--text-color) !important; */
			@include fluid-type(16, 20);

			@include bp($lg){
				padding: 20px 30px;

				&.btn--hollow{
					&::after{
						width: 3.8125rem;
						height: 3.8125rem;
					}
				}
			}
		}
	}

}

.global__breadcrumbs{
	background: $grey-4;
}

{
    "$schema": "https://schemas.wp.org/trunk/block.json",
    "apiVersion": 2,
    "name": "strategiq/simple-hero",
    "title": "Simple Hero",
    "description": "Example block to be used as a template",
    "category": "strategiq",
    "icon": "strategiq",
    "acf": {
        "mode": "preview",
        "renderTemplate": "block-simple-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/simple-hero/block-simple-hero.css"
}