Article Selection

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


.page .site-content .wp-block-strategiq.block-article-selection {
	border-bottom: none;
}

.block-article-selection + .block-article-selection {
	margin-top: 0;
}

body.single-post,
body.single-intelligence {
	.block-article-selection {
		article {
			picture {
				max-height: 100%;
			}

			.hero__articles-content {
				display: flex;
				flex-direction: column;
				gap: rem-calc(8);

				span {
					padding-left: 0;
				}
			}
		}
	}
}

.block-article-selection {
	margin-top: rem-calc(24);
	margin-bottom: rem-calc(24);

	.block_article_selection__article {
		--text-color: $white;

		background-color: $prussian-blue;

		a {
			text-decoration: none;
		}

		article {
			width: 100%;
			min-height: auto;

			padding: 0;

			display: flex;
			flex-direction: column;

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

			&:after {
				content: none;
			}

			h3 {
				&:before {
					content: none;
				}
			}

			picture {
				max-height: rem-calc(240);
				align-self: stretch;
				overflow: hidden;
				display: flex;

				@include bp($md) {
					max-height: rem-calc(342);
				}

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

			.hero__articles-content {
				padding: rem-calc(24 18);
				flex: 1 0 auto;
				max-width: none;

				@include bp($md) {
					padding: rem-calc(20 26 26);

					flex-basis: 70%;
				}

				@include bp($lg) {
					flex-basis: 50%;
				}

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

				h3 {
					margin-top: auto;
				}

				.hero__articles-meta-container {
					margin-top: auto;
					display: flex;
					flex-direction: column;
				}

				.hero__articles-meta {
					row-gap: rem-calc(8);
				}

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

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

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