/*
 * Galeria — the photographs at their own proportions, sorted by orientation.
 *
 * Three things the client asked for, and they only work together:
 *
 *   - nothing is cropped. The block used to run every picture through a 4:3
 *     window with object-fit: cover, which took the top off the upright ones;
 *     there is no aspect-ratio and no object-fit here at all, so each file is
 *     shown at the shape it was taken at;
 *   - upright photographs stand side by side, landscape ones one under another.
 *     That is the grid below: a portrait takes one column, a landscape takes the
 *     whole row. Which is which is tagged by assets/js/galeria.js, because CSS
 *     cannot see the aspect of an image;
 *   - the corners are rounded, "tak jak w Whats up" — 14px, which is that
 *     radius at the sizes these render.
 *
 * Rows are independent: `align-items: start` keeps a short picture short instead
 * of stretching it to its neighbour, which is the other way a grid crops.
 *
 * Core's gallery rules carry ID-level specificity through :not(#individual-image)
 * and set both the flex layout and a cropped image box, so the overrides below
 * mirror that hack. The block stays a core Gallery on purpose: the owner adds
 * and removes photographs from the panel, and everything here works whatever
 * she puts in it.
 */

/* alignment and the gap below come from the shared page-title rule in main.css */

/*
 * Two columns, not three, and the grid stops well short of the page width.
 * Three columns put a 1180px landscape frame directly above a 378px upright one
 * — the same room photographed twice, one reading as a hero and the other as a
 * thumbnail — and left every short picture in the third column trailing a
 * 150-220px hole, because rows start together and end where they like. Two
 * columns halve that jump, pair the upright photographs evenly, and keep the
 * landscape ones at a width their originals (taken on a phone) still hold.
 */
.dd-galeria.wp-block-gallery.has-nested-images {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	align-items: start;
	gap: clamp(12px, 1.2vw, 20px);
	max-width: 1000px;
	margin-inline: auto;
}

.dd-galeria.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
	display: block;
	width: 100%;
	margin: 0;
}

/* a landscape photograph gets the row to itself */
.dd-galeria.wp-block-gallery.has-nested-images figure.wp-block-image.is-landscape:not(#individual-image) {
	grid-column: 1 / -1;
}

/*
 * The `:not(#individual-image)` is not decoration: core's cropped-gallery rule
 * carries ID-level specificity, so without it the owner ticking "Przytnij
 * obrazy" in the editor puts `object-fit: cover` back and crops every picture —
 * the one thing the client wrote in capitals not to do.
 */
.dd-galeria.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) img {
	display: block;
	/* nothing is cut: a picture taller than this is scaled down whole — width
	   follows height, so there is no letterboxing and the two halves of a row
	   stop diverging by 300px.
	   The vh term is the laptop case (19.08): on a 560px window a 700px ceiling
	   is taller than the screen, so an upright photograph filled it entirely and
	   the grid stopped reading as a gallery. 78vh keeps the whole picture — this
	   is the one page the client asked in capitals not to crop — and only ever
	   scales it down; above ~900px of window the 700px ceiling still wins, so
	   nothing moves on the desktop she approved. */
	max-height: min(700px, 78vh);
	width: auto;
	max-width: 100%;
	height: auto;
	margin-inline: auto;
	aspect-ratio: auto;
	border-radius: var(--dd-radius-media);
	transition: filter 0.3s ease;
}

.dd-galeria.wp-block-gallery .wp-block-image img:hover {
	filter: brightness(1.08);
}

@media (max-width: 990.98px) {
	.dd-galeria.wp-block-gallery.has-nested-images {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 680px) {
	.dd-galeria.wp-block-gallery.has-nested-images {
		grid-template-columns: 1fr;
	}
}