/* FILE: blocks/_latest-posts.scss */

.wp-block-latest-posts {

	&:not(.alignwide) {
		margin-#{$left}: 0;
	}

	li {
		// We need the flex column layout also to stack the vertical
		// margin of children elements.
		display: flex;
		flex-direction: column;

		&:not(:first-child) {
			margin-top: 2em;
		}

		> * {
			margin-top: 1rem;
			margin-bottom: 1rem;

			&:first-child {
				margin-top: 0;
			}

			&:last-child {
				margin-bottom: 0;
			}

		}

	}

	&__featured-image {
		float: none; // If `alignleft/right` class is applied via block settings.

		img {
			width: 100%;
		}

	}

	a:not(.link-more) { // Post title.
		display: block;
		font-family: var(--typography_font_headings);
		font-size: var(--typography_heading_size_posts);
		line-height: 1.25;
		text-decoration: none;
		text-transform: uppercase;
		letter-spacing: var(--letter_spacing);
		color: var(--color_content_headings);
	}

	.entry-meta {
		margin-top: -1em;

		> *:not(:first-child)::before {
			content: '\2022 '; // •
			display: inline-block;
			margin: 0 .5em;
		}

	}

		&__post-author,
		&__post-date {
			display: inline;
			margin: .25em 0;
			color: inherit;
		}

	.wp-block-latest-posts__post-excerpt {
		margin-top: 0;
	}

	&.is-grid {
		// align-items: flex-start; // To prevent equal column height.
		width: calc( 100% + var(--posts_list_gap) );
		margin: calc( var(--posts_list_gap) * -1 ) calc( var(--posts_list_gap) / 2 * -1 );

		&.alignwide {
			width: calc( var(--layout_width_content) + var(--posts_list_gap) );
			margin-left: auto;
			margin-right: auto;
		}

		li {
			width: calc( 100% - var(--posts_list_gap) );
			margin: var(--posts_list_gap) calc( var(--posts_list_gap) / 2 );
		}

	}

	&.is-cascade li,
	&.has-center-vertical-align li {
		justify-content: center;
	}

	// Columns.

		&[class*="columns-"] li {
			@extend %posts_list_columns_1;
		}

		@for $i from 2 through 6 {
			&.columns-#{ $i } li {
				@extend %posts_list_columns_#{$i};
			}
		}

	// Modification classes.

		&.has-no-gap,
		&.has-no-gaps {
			--posts_list_gap: var(--zero);

			 li {

				@include media( map_get( $breakpoint, 'm' ) ) {
					padding-left: .5em;
					padding-right: .5em;

					.wp-block-latest-posts__featured-image {
						margin-left: -.5em;
						margin-right: -.5em;
					}

				}

				@include media( map_get( $breakpoint, 'xl' ) ) {
					padding-left: 1em;
					padding-right: 1em;

					.wp-block-latest-posts__featured-image {
						margin-left: -1em;
						margin-right: -1em;
					}

				}

				@include media( map_get( $breakpoint, 'xxl' ) ) {
					padding-left: 1.5em;
					padding-right: 1.5em;

					.wp-block-latest-posts__featured-image {
						margin-left: -1.5em;
						margin-right: -1.5em;
					}

				}

			}

		}

}