Two Column

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

.block-two-column {
	padding: 40px 0 20px;

	.single-firm & {
		padding-bottom: rem-calc(30);
	}

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

	.content-offset-right {

		@include bp($md) {
			padding-right: 0;
		}

		@include bp($lg) {
			padding-right: calc(8.33333% + 24px);
		}
	}

	img {
		width: 100%;
	}

	&__content {
		color: var(--text-color);

		p:last-of-type {
			margin-bottom: 0;
		}
	}

	&__list {

		&-content {
			margin-bottom: rem-calc(40);
		}

		&-heading {
			margin-bottom: 8px;
			font-size: $body-large;
			font-weight: 500;
		}

		li {
			p:last-of-type {
				margin-bottom: 0;
			}
		}

		ul:first-of-type,
		ol:first-of-type {
			margin-top: 0;

			li:first-of-type {
				margin-top: 0;
			}
		}

		> p + ul:first-of-type,
		> p + ol:first-of-type {
			margin-top: 1rem;

			li:first-of-type {
				margin-top: $grid-gutter-width;
			}
		}
	}

	&__content, &__list, &__image-container {
		&.position-sticky {
			top: calc(var(--site-header-height) + 1rem);
		}
	}

	&__content,
	&__image,
	&__list {
		padding: 12px 0;

		@include bp($md) {
			padding: rem-calc(40) 1rem;
		}

		@include bp($lg) {
			padding: rem-calc(80) 0 rem-calc(60) 0;
		}
	}
}

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