/*
 * [dci_gallery layout="grid"]
 *
 * Four columns. With the default sizes pattern ("big,,,,,wide,") every
 * seven images fill three complete rows:
 *
 *   big  big  1    2
 *   big  big  3    4
 *   wide wide wide 5
 *
 * which is why a wide tile spans three columns rather than two. Other
 * counts can leave a gap at the end of the last row.
 *
 * The grid is sized from its wrapper's width, not the screen's, so it
 * works the same in a narrow card as in a full width row: rows keep a
 * landscape shape, and below 560px of room it drops to two columns.
 */
.dci-gallery-grid-wrap {
	container-type: inline-size;
	margin: 0 0 24px;
}

.gallery-grid {
	--gallery-grid-cols: 4;
	--gallery-grid-gap: 12px;
	--gallery-grid-radius: 10px;
	--gallery-grid-overlay: rgba(16, 40, 71, 0.82);

	display: grid;
	grid-template-columns: repeat(var(--gallery-grid-cols), minmax(0, 1fr));
	/* Fallback for browsers without container units. */
	grid-auto-rows: 210px;
	/* One column's width, at a 4:3 landscape shape. */
	grid-auto-rows: calc((100cqw - (var(--gallery-grid-cols) - 1) * var(--gallery-grid-gap)) / var(--gallery-grid-cols) * 0.75);
	grid-auto-flow: dense;
	gap: var(--gallery-grid-gap);
}

.gallery-grid .gallery-tile {
	position: relative;
	overflow: hidden;
	border-radius: var(--gallery-grid-radius);
	background: #102847;
	margin: 0;
}

.gallery-grid .gallery-tile.big {
	grid-column: span 2;
	grid-row: span 2;
}

.gallery-grid .gallery-tile.wide {
	grid-column: span 3;
}

.gallery-grid .gallery-tile img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.gallery-grid .gallery-tile:hover img {
	transform: scale(1.05);
}

/* The label sits on a fade so it reads over any photo. */
.gallery-grid .tile-overlay {
	position: absolute;
	inset: auto 0 0 0;
	padding: 36px 14px 12px;
	background: linear-gradient(to top, var(--gallery-grid-overlay), rgba(16, 40, 71, 0));
	pointer-events: none;
}

.gallery-grid .tile-overlay span {
	display: block;
	color: #fff;
	font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.15;
	text-transform: uppercase;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
	overflow-wrap: anywhere;
}

.gallery-grid .gallery-tile.big .tile-overlay span {
	font-size: 22px;
}

/* Two columns when the room is narrow. The big tile keeps its square
   and a wide tile becomes a normal one, so the seven fill five whole
   rows; a full width wide tile would leave the last image on its own. */
@container (max-width: 560px) {
	.gallery-grid {
		--gallery-grid-cols: 2;
		--gallery-grid-gap: 8px;
	}

	.gallery-grid .gallery-tile.wide {
		grid-column: span 1;
	}

	.gallery-grid .tile-overlay {
		padding: 28px 10px 9px;
	}

	.gallery-grid .tile-overlay span {
		font-size: 14px;
	}

	.gallery-grid .gallery-tile.big .tile-overlay span {
		font-size: 18px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gallery-grid .gallery-tile img {
		transition: none;
	}

	.gallery-grid .gallery-tile:hover img {
		transform: none;
	}
}