/**
 * core/post-template - Thumbnail
 */

.wp-block-query:has(> .wp-block-post-template.is-style-thumbnail) {
	overflow: hidden;

	@container body (width < 1024px) {
		margin-block: var(--wp--preset--spacing--resp-30-60);
	}
}

ul.wp-block-post-template.is-style-thumbnail {
	.wp-block-post {
		.wp-block-image {
			overflow: clip;

			&, img {
				border-radius: var(--wp--preset--border-radius--small);
			}

			img {
				scale: 1 1;
				transition: scale var(--wp--custom--transition--hover-slow), filter var(--wp--custom--transition--hover-slow);
			}
		}

		.wp-block-post-date, .wp-block-post-terms {
			z-index: 1;
		}

		.wp-block-post-terms a {
			white-space: wrap;
		}

		.wp-block-post-title {
			position: static;
			z-index: 0;

			a {
				text-decoration-color: transparent;
			}

			/* Link overlay */
			a::before {
				display: block;
				position: absolute;
				inset: 0;
				content: '';
				z-index: -1;
			}
		}
	}

	@media (hover:hover) {
		.wp-block-post:hover {
			.wp-block-image img {
				scale: 1.05;
			}

			.wp-block-post-title a {
				color: var(--wp--preset--color--primary);
				text-decoration-color: currentColor;
			}
		}
	}
}

/* Grid layout */
ul.wp-block-post-template.is-style-thumbnail.is-layout-grid {
	--post-template--offset: var(--wp--preset--spacing--30);

	grid-template-columns: repeat(auto-fill, minmax(max(min(300px, 100%), (100% - (var(--wp--preset--spacing--60) *	 (3 - 1))) /3), 1fr));
	gap: 0;
	inline-size: calc(100% + (var(--post-template--offset) * 2));
	max-inline-size: none;
	margin-block: calc(var(--post-template--offset) * -1) !important;
	margin-inline-start: calc(var(--post-template--offset) * -1);

	.wp-block-post {
		padding: var(--post-template--offset);
		border: 0.5px solid var(--wp--preset--color--gray-lighter);
	}
}


/* List layout */
ul.wp-block-post-template.is-style-thumbnail.is-layout-flow {
	> .wp-block-post + .wp-block-post {
		margin-block-start: var(--wp--preset--spacing--30);
		padding-block-start: var(--wp--preset--spacing--30);
		border-block-start: 1px solid var(--wp--preset--color--gray-lighter);
	}
}