/*!
 * WP-ImmoMakler static-grid gallery preset.
 *
 * A responsive grid of same-sized tiles, N to a row. Every tile keeps one
 * aspect ratio; the `--fit-cover` / `--fit-contain` wrapper modifier (from
 * the preset's `image_fit` option) decides whether the image is cropped to
 * fill it or shown whole with letterboxing — the latter is what floorplans
 * need, where a crop cuts off the very detail the image is there to show.
 * Clicking a tile opens the lightbox at that image.
 *
 * Vanilla CSS, no Bootstrap. All visual knobs are exposed as CSS custom
 * properties on the gallery wrapper. The preset sets `--columns` and
 * `--tile-aspect` inline from its options; the rest are defaults a theme
 * can override.
 */

.immomakler-gallery--static_grid {

	/* Layout — the preset overrides these two inline from its options. */
	--immomakler-gallery-grid-columns: 2;
	--immomakler-gallery-grid-tile-aspect: 4 / 3;

	/* A tile never gets narrower than this; the grid drops a column
	 * instead. Keeps a floorplan legible on a phone. */
	--immomakler-gallery-grid-min-tile: 200px;

	/* Wider than the photo presets' 6px: the tiles are separate documents,
	 * not fragments of one gallery, and read better with room around them. */
	--immomakler-gallery-grid-gap: 16px;

	/* `--fit-contain` only: the letterbox colour behind an image whose ratio
	 * differs from the tile's. White, because floorplans are drawn on white —
	 * a grey band around a white plan would read as part of the drawing. The
	 * hairline border gives a white tile an edge against a white panel. */
	--immomakler-gallery-grid-tile-background: #fff;
	--immomakler-gallery-grid-tile-border-color: rgba(0, 0, 0, 0.1);

	--immomakler-gallery-grid-caption-color: inherit;

	width: 100%;
	max-width: 100%;
}

.immomakler-gallery--static_grid .immomakler-gallery__grid {
	display: grid;

	/* "At most N columns, never narrower than the minimum tile": a column
	 * is the larger of the minimum tile and an even N-way split of the row,
	 * and `min(100%, ...)` keeps a lone tile from overflowing a container
	 * narrower than that minimum. The percentages resolve against the grid
	 * once substituted, so the split can live in a custom property. */
	--immomakler-gallery-grid-even-split: calc((100% - (var(--immomakler-gallery-grid-columns) - 1) * var(--immomakler-gallery-grid-gap)) / var(--immomakler-gallery-grid-columns));
	--immomakler-gallery-grid-column-min: min(100%, max(var(--immomakler-gallery-grid-min-tile), var(--immomakler-gallery-grid-even-split)));

	grid-template-columns: repeat(auto-fit, minmax(var(--immomakler-gallery-grid-column-min), 1fr));
	gap: var(--immomakler-gallery-grid-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.immomakler-gallery--static_grid .immomakler-gallery__grid-item {
	margin: 0;
	padding: 0;
	min-width: 0;
}

.immomakler-gallery--static_grid .immomakler-gallery__tile {
	margin: 0;
	padding: 0;
}

.immomakler-gallery--static_grid .immomakler-gallery__tile-link {
	display: block;
	width: 100%;
	aspect-ratio: var(--immomakler-gallery-grid-tile-aspect);
	overflow: hidden;
	box-sizing: border-box;
	border-radius: var(--immomakler-gallery-border-radius, 0);
	cursor: zoom-in;
	color: inherit;
	text-decoration: none;
}

.immomakler-gallery--static_grid .immomakler-gallery__tile-link:focus-visible {
	outline: 2px solid var(--immomakler-gallery-primary-color, #af1615);
	outline-offset: 2px;
}

/*
 * `--fit-cover` (the default) crops the image to fill the tile, the way the
 * other presets do; `--fit-contain` shows it whole inside the tile and paints
 * the letterbox. gallery-base.css (a dependency, so printed before this file)
 * forces `cover` onto an optimizer-wrapped `<picture> > img` at (0,1,1); the
 * contain selectors carry the wrapper class as well and win on specificity,
 * not on order.
 */
.immomakler-gallery--static_grid .immomakler-gallery__tile-link .immomakler-gallery__image,
.immomakler-gallery--static_grid .immomakler-gallery__tile-link picture > img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;

	/* Base transitions for the hover-animation modifiers shared with the
	 * other static presets — see preset-static-compact.css. */
	transition: transform 200ms linear, filter 200ms linear;
	transform-origin: center;
}

.immomakler-gallery.immomakler-gallery--fit-contain .immomakler-gallery__tile-link {
	border: 1px solid var(--immomakler-gallery-grid-tile-border-color);
	background: var(--immomakler-gallery-grid-tile-background);
}

.immomakler-gallery.immomakler-gallery--fit-contain .immomakler-gallery__tile-link .immomakler-gallery__image,
.immomakler-gallery.immomakler-gallery--fit-contain .immomakler-gallery__tile-link picture > img {
	object-fit: contain;
}

.immomakler-gallery--hover-zoom-in.immomakler-gallery--static_grid .immomakler-gallery__tile-link:hover .immomakler-gallery__image,
.immomakler-gallery--hover-zoom-in.immomakler-gallery--static_grid .immomakler-gallery__tile-link:focus-visible .immomakler-gallery__image {
	transform: scale(1.03);
}

.immomakler-gallery--hover-brighten.immomakler-gallery--static_grid .immomakler-gallery__tile-link:hover .immomakler-gallery__image,
.immomakler-gallery--hover-brighten.immomakler-gallery--static_grid .immomakler-gallery__tile-link:focus-visible .immomakler-gallery__image {
	filter: brightness(1.08);
}

.immomakler-gallery--static_grid .immomakler-gallery__tile-caption {
	margin: 0.5em 0 0;
	padding: 0;
	font-size: 0.9em;
	line-height: 1.3;
	text-align: center;
	color: var(--immomakler-gallery-grid-caption-color);
}

/* Lightbox off / photos linked to the property: cursor per gallery-base.css. */
.immomakler-gallery.immomakler-gallery--no-lightbox.immomakler-gallery--static_grid .immomakler-gallery__tile-link {
	cursor: default;
}

.immomakler-gallery.immomakler-gallery--linked.immomakler-gallery--static_grid .immomakler-gallery__tile-link {
	cursor: pointer;
}