Gated Content Download

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

body.single-post,
body.single-intelligence {
	.block-gated-content-download {
		&__item {
			picture {
				max-height: 100%;
			}

			&__content {
				@include bp($sm) {
					flex-basis: 70%;
				}
			}
		}
	}
}

.block-gated-content-download {
	&__item {
		--text-color: $white;

		background-color: $tertiary-purple;

		display: flex;
		flex-direction: column;

		position: relative;

		@include bp($sm) {
			flex-direction: row;
			flex-wrap: nowrap;
			align-items: center;
			justify-content: flex-start;
		}

		picture {
			display: none;

			@include bp($sm) {
				align-self: stretch;
				overflow: hidden;
				display: flex;
				max-width: rem-calc(220);
			}

			@include bp($lg) {
				max-height: rem-calc(310);
			}

			img {
				object-fit: cover;
			}
		}
	}

	&__content {
		max-width: rem-calc(600);
		padding: rem-calc(24);

		@include bp($sm) {
			flex-basis: 70%;
		}

		@include bp($md) {
			padding: rem-calc(16 32);
		}

		.excerpt {
			@include fluid-type(14, 16);
			line-height: 1.5;
			text-wrap: balance;
		}

		span {
			strong {
				font-weight: 500;
			}
		}
	}

	p.block-gated-content-download__content-title {
		color: $white;
		@include fluid-type(24, 32);
		text-wrap: balance;
		line-height: 1.2;
		margin-bottom: 1rem;

		span {
			font-weight: bold;
		}
	}

	&__content-excerpt {
		color: $white;
		@include fluid-type(16, 16);
		line-height: 1.5;
		text-wrap: balance;
		margin-bottom: 1.5rem;

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

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