/*
 * Gallery (design draft V2): tall photographs in a row of up to four, each
 * with a spaced label and a serif title beneath. A linked entry is one
 * target (the link's ::after covers the figure).
 */
@layer blocks {
	.gallery .section-head {
		margin-bottom: var(--section-gap);
	}

	.gallery__grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-10) var(--space-4);
	}

	.gallery__figure {
		position: relative;
		margin: 0;
	}

	.gallery__media {
		aspect-ratio: 10 / 13;
		overflow: hidden;
		background: var(--muted);
	}

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

	.gallery__caption {
		display: grid;
		gap: var(--space-1);
		padding-top: var(--space-5);
	}

	.gallery__title {
		font-size: var(--type-editorial-title);
		line-height: var(--type-editorial-line);
	}

	.gallery__link {
		color: inherit;
	}

	.gallery__link::after {
		content: "";
		position: absolute;
		inset: 0;
	}

	.gallery__figure:has(.gallery__link):is(:hover, :focus-within) .gallery__title {
		color: var(--primary);
	}

	.gallery__link:focus-visible {
		outline: none;
	}

	.gallery__figure:has(.gallery__link:focus-visible) {
		outline: 2px solid var(--ring);
		outline-offset: var(--space-2);
	}

	@media (min-width: 48rem) {
		.gallery__grid {
			grid-template-columns: repeat(4, minmax(0, 1fr));
			gap: var(--space-5);
		}

		.gallery__grid:has(> :nth-child(3):last-child) {
			grid-template-columns: repeat(3, minmax(0, 1fr));
		}

		.gallery__grid:has(> :nth-child(2):last-child) {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
	}

	@media (min-width: 64rem) {
		.gallery .section-head {
			grid-template-columns: repeat(12, minmax(0, 1fr));
			column-gap: var(--grid-gap);
			align-items: start;
		}

		.gallery .section-head__main {
			grid-column: 1 / 6;
		}

		.gallery .section-head__intro {
			grid-column: 7 / 12;
			padding-top: var(--space-6);
		}
	}
}