/*
 * The mosaic. Four frames on three columns: the shopfront tall on the left, two short frames
 * stacked in the middle, the bar tall on the right.
 *
 * Track ratios are the photographs' own pixel dimensions (1674 / 726 / 726 across, 544 down), and
 * the four are pre-cropped to those shapes, so the grid tiles them with nothing left to crop.
 */

.gallery {
	padding-block-start: var(--rhythm-md);
}

.gallery__list {
	display: grid;
	grid-template-columns: 1674fr 726fr 726fr;
	gap: var(--space-15);
	margin: 0;
}

.gallery__item {
	margin: 0;
	min-height: 0;   /* grid items floor at min-content, which the tall frames exceed */
}

/* Placed cell by cell rather than left to auto-flow, which fills row 1 across all three columns
   before it ever drops to row 2 and so puts the third photograph beside the second, not under it.
   Nth-child, not a modifier: position in the mosaic decides the span, not the photograph. */
.gallery__item:nth-child(1) {
	grid-column: 1;
	grid-row: 1 / span 2;
}

.gallery__item:nth-child(2) {
	grid-column: 2;
	grid-row: 1;
}

.gallery__item:nth-child(3) {
	grid-column: 2;
	grid-row: 2;
}

.gallery__item:nth-child(4) {
	grid-column: 3;
	grid-row: 1 / span 2;
}

.gallery__frame {
	display: block;
	height: 100%;
	overflow: hidden;
	border-radius: var(--radius-lg);
	background-color: var(--bnk-stone);
}

/* The stacked pair sets the row height; the spanning frames then resolve against two of it. Doing
   it this way rather than a fixed ratio on the list means a re-cropped photo re-sizes the grid. */
.gallery__item:nth-child(2) .gallery__frame,
.gallery__item:nth-child(3) .gallery__frame {
	height: auto;
	aspect-ratio: 726 / 544;
}

.gallery__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gallery__caption {
	margin-block-start: var(--space-1);
	color: var(--color-text-muted);
	font-size: var(--font-2);
	text-align: center;
}

/*
 * Narrow: the mosaic unstacks into two columns. The shopfront and the bar each take the full width
 * and give up their spans, and the bar re-crops to 3:2 so an upright frame cannot run the page long.
 */
@media (max-width: 48rem) {
	.gallery__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-1);
	}

	/* Same nth-child selectors as the mosaic, not a bare .gallery__item: a class alone loses to
	   them on specificity, and the pinned cells would survive into this layout and overlap. */
	.gallery__item:nth-child(1),
	.gallery__item:nth-child(2),
	.gallery__item:nth-child(3),
	.gallery__item:nth-child(4) {
		grid-column: auto;
		grid-row: auto;
	}

	.gallery__item:nth-child(1),
	.gallery__item:nth-child(4) {
		grid-column: 1 / -1;
	}

	.gallery__item:first-child .gallery__frame {
		height: auto;
		aspect-ratio: 1674 / 1112;
	}

	.gallery__item:last-child .gallery__frame {
		height: auto;
		aspect-ratio: 3 / 2;
	}
}