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

.block-full-width-image-hero {
	background: $grey-4;
	border-radius: 0 0 32px 32px;

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

	&__image-container {
		height: 38vh;
		min-height: 300px;
		overflow: hidden;
		display: flex;
		border-radius: 0 0 32px 32px;

		@media (max-width: 1280px) and (max-height: 620px) {
			min-height: 240px;
		}

		@media (min-width: 1400px) and (min-height: 1000px) {
			min-height: 400px;
		}

		@include bp($md, true) {
			height: 20vh;
		}

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

		img, picture{
			display: flex;
			height: 100%;
			width: 100%;
			object-fit: cover;
			object-position: center;
		}

	}

	&__row{
		padding: 2rem 0;

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

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

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

	&__cta{
		.btn{
			@include fluid-type(16, 20);

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

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

		.btn--secondary{
			&.btn--hollow{
				border-color: var(--secondary);
			}
		}
	}

	&__secondary-cta{
		font-weight: 700;
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 0.5rem;
		text-decoration: none;
		text-transform: uppercase;

		&:hover{
			.ico{
				transform: translateX(10px);
				transition: .4s ease-out;
			}
		}

		.ico--arrow-right{
			transition: .6s ease-out;
			width: 24px;
			height: 24px;
			min-width: 24px;
			min-height: 24px;
			border: solid 1px var(--text-color);
			border-radius: 100px;
			background-position: center;
			background-repeat: no-repeat;
			background-size: 16px;
			background-image: url("data:image/svg+xml,%3Csvg width='28' height='18' viewBox='0 0 28 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.3682 16.7598L26.7682 8.75977L20.3682 0.759765' stroke='%23383551'/%3E%3Cpath d='M26.7686 8.75977L0.768555 8.75977' stroke='%23383551'/%3E%3C/svg%3E%0A");
		}
	}

	&__ctas-container{
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 2rem;

		@include bp($sm){
			flex-direction: row;
			align-items: center;
		}

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

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