/*
 * Portfolio gallery grid (replaces Modula's custom grid; audit #22, 2026-10-18).
 * Loaded on the front end (only on pages with a gallery) and in the block
 * editor, so the editor shows the same layout.
 *
 * Structure: Group "sdg-gallery" > Group "sdg-gallery__grid" > Image blocks.
 * 12 columns, square row units, 15px gap. Each Image block picks a Gallery
 * style (Styles panel); auto-placement packs them in order. The sdg-w* / sdg-h*
 * classes remain for unusual sizes.
 */

.sdg-gallery {
	container-type: inline-size;
	margin-bottom: 2em;
}

/* GeneratePress's group inner-container: no padding inside the gallery.
   GP prints ".site-main .wp-block-group__inner-container" padding inline on
   pages with group blocks, so match it with the extra .site-main selector. */
.sdg-gallery .wp-block-group__inner-container,
.site-main .sdg-gallery .wp-block-group__inner-container {
	max-width: none;
	padding: 0;
	margin: 0;
}

.sdg-gallery .sdg-gallery__grid {
	--sdg-gap: 15px;
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-auto-rows: calc((100cqw - 11 * var(--sdg-gap)) / 12);
	gap: var(--sdg-gap);
}

/* Flatten wrappers between the grid and the images (the front end's
   inner-container, the editor's inner-blocks layout) so images are grid items. */
.sdg-gallery .sdg-gallery__grid > :not(.wp-block-image),
.sdg-gallery .sdg-gallery__grid > :not(.wp-block-image) > :not(.wp-block-image) {
	display: contents;
}

/* Editor: the "add block" button spans the full row. */
.sdg-gallery .sdg-gallery__grid .block-list-appender {
	display: block;
	grid-column: 1 / -1;
	margin: 0;
}

.sdg-gallery .wp-block-image {
	margin: 0;
	overflow: hidden;
	grid-column: span 12;
	grid-row: span 8;
}

.sdg-gallery .wp-block-image a,
.sdg-gallery .wp-block-image > div {
	display: block;
	height: 100%;
}

.sdg-gallery .wp-block-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.sdg-gallery .wp-block-image a:hover img {
	transform: scale(1.03);
}

.sdg-gallery .wp-block-image a:focus-visible {
	outline: 2px solid #2F2D2C;
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.sdg-gallery .wp-block-image img {
		transition: none;
	}
}

/* Named Gallery styles (Image block > Styles). */
.sdg-gallery .is-style-sdg-full { grid-column: span 12; grid-row: span 8; }
.sdg-gallery .is-style-sdg-full-tall { grid-column: span 12; grid-row: span 10; }
.sdg-gallery .is-style-sdg-half { grid-column: span 6; grid-row: span 8; }
.sdg-gallery .is-style-sdg-half-tall { grid-column: span 6; grid-row: span 9; }
.sdg-gallery .is-style-sdg-half-short { grid-column: span 6; grid-row: span 4; }

/* Size classes for unusual layouts (Advanced > Additional CSS class):
   sdg-w1 to sdg-w12 columns wide, sdg-h1 to sdg-h16 rows tall. */
.sdg-gallery .sdg-w1 { grid-column: span 1; }
.sdg-gallery .sdg-w2 { grid-column: span 2; }
.sdg-gallery .sdg-w3 { grid-column: span 3; }
.sdg-gallery .sdg-w4 { grid-column: span 4; }
.sdg-gallery .sdg-w5 { grid-column: span 5; }
.sdg-gallery .sdg-w6 { grid-column: span 6; }
.sdg-gallery .sdg-w7 { grid-column: span 7; }
.sdg-gallery .sdg-w8 { grid-column: span 8; }
.sdg-gallery .sdg-w9 { grid-column: span 9; }
.sdg-gallery .sdg-w10 { grid-column: span 10; }
.sdg-gallery .sdg-w11 { grid-column: span 11; }
.sdg-gallery .sdg-w12 { grid-column: span 12; }
.sdg-gallery .sdg-h1 { grid-row: span 1; }
.sdg-gallery .sdg-h2 { grid-row: span 2; }
.sdg-gallery .sdg-h3 { grid-row: span 3; }
.sdg-gallery .sdg-h4 { grid-row: span 4; }
.sdg-gallery .sdg-h5 { grid-row: span 5; }
.sdg-gallery .sdg-h6 { grid-row: span 6; }
.sdg-gallery .sdg-h7 { grid-row: span 7; }
.sdg-gallery .sdg-h8 { grid-row: span 8; }
.sdg-gallery .sdg-h9 { grid-row: span 9; }
.sdg-gallery .sdg-h10 { grid-row: span 10; }
.sdg-gallery .sdg-h11 { grid-row: span 11; }
.sdg-gallery .sdg-h12 { grid-row: span 12; }
.sdg-gallery .sdg-h13 { grid-row: span 13; }
.sdg-gallery .sdg-h14 { grid-row: span 14; }
.sdg-gallery .sdg-h15 { grid-row: span 15; }
.sdg-gallery .sdg-h16 { grid-row: span 16; }