/**
 * Classic [gallery] shortcode.
 *
 * inc/setup.php declares html5 gallery support, which tells WordPress to skip
 * the inline gallery CSS it would otherwise print. Nothing in the enqueued
 * stylesheets covers .gallery, so without this the columns="" attribute does
 * nothing and every item stacks at full width.
 */

.gallery {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
	margin: 2rem 0;
}

/* A single-column gallery reads as a stack of full images, so it keeps the
   uploaded proportions rather than being cropped to a shared ratio. */
.gallery-columns-1 {
	grid-template-columns: minmax(0, 1fr);
}

.gallery-item {
	margin: 0;
}

.gallery-icon {
	margin: 0;
	line-height: 0;
}

.gallery-icon a {
	display: block;
}

.gallery-icon img {
	display: block;
	width: 100%;
	height: auto;
	border: 0;
	transition: opacity 0.15s ease-in-out;
}

/* Mixed portrait and landscape uploads make ragged rows, so multi-column
   galleries crop to one ratio. */
.gallery:not(.gallery-columns-1) .gallery-icon img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* link="file" and link="post" both wrap the image in an anchor. */
.gallery-icon a:hover img,
.gallery-icon a:focus img {
	opacity: 0.85;
}

.gallery-caption {
	display: block;
	margin: 0.5rem 0 0;
	font-size: 0.875rem;
	line-height: 1.4;
	text-align: center;
}

/* Below md everything is capped at two across so a columns="9" gallery does
   not shrink to thumbnails on a phone. */
@media (min-width: 768px) {
	.gallery-columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.gallery-columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.gallery-columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.gallery-columns-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.gallery-columns-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.gallery-columns-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
	.gallery-columns-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
	.gallery-columns-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
}