Blog Pull Out

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

.block-blog-pull-out {
	.row {
		position: relative;

		&:after {
			width: 100vw;
			height: 100%;
			content: '';
			position: absolute;
			top: 0;

			z-index: 1;
			background-color: $indigo;
			pointer-events: none;

			@include bp($md) {
				width: 100%;
			}

			@include bp($lg) {
				width: 100vw;
				left: var(--bs-gutter-x);
			}
		}
	}

	&__row {
		@include bp($md) {
			margin-left: 0;
			margin-right: 0;
		}

		@include bp($lg) {
			margin-left: rem-calc(-12);
			margin-right: rem-calc(-12);
		}
	}


	&__image {
		height: 100%;
		// max-height: rem-calc(464);
		position: relative;
		z-index: 2;
		margin-left: rem-calc(-16);
		margin-right: rem-calc(-16);
		aspect-ratio: 16/9;

		@include bp($md) {
			margin-left: rem-calc(-12);
			margin-right: rem-calc(-12);
		}

		@include bp($lg) {
			margin-left: 0;
			margin-right: 0;
			max-height: 100%;
			aspect-ratio: unset;
		}

		&:before {
			content: '';
			width: rem-calc(3);
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			background-color: $secondary-light-green;
			opacity: 0;
			z-index: 2;

			@include bp($md) {
				opacity: 1;
			}
		}

		picture {
			height: 100%;
			display: flex;

			@include bp($lg) {
				max-width: rem-calc(390);
			}

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

	&__content {
		max-width: rem-calc(890);
		padding-top: rem-calc(24);
		padding-bottom: rem-calc(32);
		position: relative;
		z-index: 2;

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

		@include bp($lg) {
			padding-top: rem-calc(50);
			padding-bottom: rem-calc(60);
		}
	}

	&__meta {
		@include fluid-type(16, 18);
		line-height: 1.4;
		text-wrap: balance;
		margin-bottom: rem-calc(16);

		@include bp($md) {
			margin-bottom: rem-calc(26);
		}

		span {
			@include fluid-type(32, 40);
			line-height: 1.2;
		}
	}

	&__meta-title {
		@include fluid-type(32, 40);
		line-height: 1.2;
		color: $white;
	}

	&__meta-author {
		@include fluid-type(16, 18);
		line-height: 1.4;
		text-wrap: balance;
		color: $white;
		margin-top: rem-calc(5);
	}

	.content-container {
		margin-bottom: rem-calc(32);
		color: $white;

		--text-color: #{$white};

		ul, ol {
			--marker-color: #{$white};
		}

		p {
			color: $white;
		}
	}

	.buttons-container {
		display: flex;
		flex-direction: row;
		gap: rem-calc(16 24);
		flex-wrap: wrap;

		.btn--hollow {
			border-width: 2px;
			border-color: $white;
			color: $white;

			&:hover {
				border-color: $primary;
			}
		}
	}
}

{
    "$schema": "https://schemas.wp.org/trunk/block.json",
    "apiVersion": 2,
    "name": "strategiq/blog-pull-out",
    "title": "Blog Pull Out",
    "description": "Example block to be used as a template",
    "category": "strategiq",
    "icon": "strategiq",
    "acf": {
        "mode": "edit",
        "renderTemplate": "block-blog-pull-out.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 - Blog Pull Out",
                "content": "This is some example content to represent what the content will look like"
            }
        }
    },
    "style": ["file:../../assets/css/blog-pull-out/block-blog-pull-out.css"]
}