/*
Theme Name: Ipsum Child
Theme URI: https://example.com/
Description: A child theme for Ipsum that adds a Bento Grid layout for post archives.
Author: Your Name
Author URI: https://example.com
Template: ipsum
Version: 1.0.0
Text Domain: ipsum-child
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/*
 * Bento Grid.
 * The pattern sets the Post Template to the core Grid layout with four
 * columns, but that layout cannot give single posts a different size.
 * The spans below do it, in a cycle of ten posts: one large card (2x2),
 * four small ones beside it, then one wide card (2x1), two tall cards (1x2)
 * and two small ones filling the remaining cells.
 * "dense" lets the browser backfill any hole left by an unbalanced last page.
 */
.bento-grid {
	grid-auto-flow: dense;
	grid-auto-rows: minmax(18rem, auto);
}

.bento-grid > li:nth-child(10n + 1) {
	grid-column: span 2;
	grid-row: span 2;
}

.bento-grid > li:nth-child(10n + 6) {
	grid-column: span 2;
}

.bento-grid > li:nth-child(10n + 7),
.bento-grid > li:nth-child(10n + 8) {
	grid-row: span 2;
}

/* Each card fills its grid cell, whatever its span. */
.bento-grid > li > .wp-block-group {
	height: 100%;
}

/*
 * The featured image takes the space the text leaves free, cropped to fit.
 * It is positioned absolutely inside a zero-basis flex item so the image's
 * intrinsic height cannot stretch the row; posts without an image simply
 * render as text-only cards.
 */
.bento-grid .wp-block-post-featured-image {
	position: relative;
	flex: 1 1 0;
	min-height: 8rem;
	margin: 0;
}

.bento-grid .wp-block-post-featured-image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * Small screens. 781px is the breakpoint core uses to stack columns.
 * The grid drops to two columns, then to one. Rules are repeated at the same
 * specificity as the ones above and come after them, so they win by order.
 */
@media (max-width: 781px) {
	.bento-grid.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.bento-grid > li:nth-child(n) {
		grid-column: auto;
		grid-row: auto;
	}

	.bento-grid > li:nth-child(10n + 1),
	.bento-grid > li:nth-child(10n + 6) {
		grid-column: span 2;
	}
}

@media (max-width: 480px) {
	.bento-grid.is-layout-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.bento-grid > li:nth-child(n) {
		grid-column: auto;
		grid-row: auto;
	}
}