/*!
 * WP-ImmoMakler static-mosaic gallery preset.
 *
 * Photos in blocks of four, each block a 4x2 grid: two large tiles and two
 * small ones. Odd blocks put the tall tile on the right, even blocks on the
 * left, so consecutive blocks mirror each other. One block is one fixed
 * aspect box; `--rows` divides its height between the top and bottom row.
 * 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 `--block-aspect` and
 * `--rows` inline from its options (and `--gap` when a host passes one);
 * the rest are defaults a theme can override.
 */

.immomakler-gallery--static_mosaic {

	/* Layout — the preset overrides these inline from its options. */
	--immomakler-gallery-mosaic-block-aspect: 2 / 1;
	--immomakler-gallery-mosaic-rows: 2fr 1fr;

	/* Between tiles and between blocks alike. Wider than the photo presets'
	 * 6px: the standalone "Raster" elements this preset replaces used 20px,
	 * and a mosaic reads as a set of photos, not as one image with a strip. */
	--immomakler-gallery-mosaic-gap: 20px;

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

.immomakler-gallery--static_mosaic .immomakler-gallery__mosaic {
	display: grid;
	gap: var(--immomakler-gallery-mosaic-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.immomakler-gallery--static_mosaic .immomakler-gallery__mosaic-block {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: var(--immomakler-gallery-mosaic-rows);
	gap: var(--immomakler-gallery-mosaic-gap);
	aspect-ratio: var(--immomakler-gallery-mosaic-block-aspect);
	margin: 0;
	padding: 0;
	min-width: 0;
}

.immomakler-gallery--static_mosaic .immomakler-gallery__tile-link {
	display: block;
	min-width: 0;
	min-height: 0;
	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_mosaic .immomakler-gallery__tile-link:focus-visible {
	outline: 2px solid var(--immomakler-gallery-primary-color, #af1615);
	outline-offset: 2px;
}

/*
 * Tile placement. Odd blocks: wide tile top-left, tall tile on the right,
 * two small tiles bottom-left. Even blocks: the mirror image.
 */
.immomakler-gallery--static_mosaic .immomakler-gallery__mosaic-block:nth-child(odd) > :nth-child(1) {
	grid-column: 1 / 3;
	grid-row: 1 / 2;
}

.immomakler-gallery--static_mosaic .immomakler-gallery__mosaic-block:nth-child(odd) > :nth-child(2) {
	grid-column: 3 / 5;
	grid-row: 1 / 3;
}

.immomakler-gallery--static_mosaic .immomakler-gallery__mosaic-block:nth-child(odd) > :nth-child(3) {
	grid-column: 1 / 2;
	grid-row: 2 / 3;
}

.immomakler-gallery--static_mosaic .immomakler-gallery__mosaic-block:nth-child(odd) > :nth-child(4) {
	grid-column: 2 / 3;
	grid-row: 2 / 3;
}

.immomakler-gallery--static_mosaic .immomakler-gallery__mosaic-block:nth-child(even) > :nth-child(1) {
	grid-column: 1 / 3;
	grid-row: 1 / 3;
}

.immomakler-gallery--static_mosaic .immomakler-gallery__mosaic-block:nth-child(even) > :nth-child(2) {
	grid-column: 3 / 5;
	grid-row: 1 / 2;
}

.immomakler-gallery--static_mosaic .immomakler-gallery__mosaic-block:nth-child(even) > :nth-child(3) {
	grid-column: 3 / 4;
	grid-row: 2 / 3;
}

.immomakler-gallery--static_mosaic .immomakler-gallery__mosaic-block:nth-child(even) > :nth-child(4) {
	grid-column: 4 / 5;
	grid-row: 2 / 3;
}

/*
 * A last block with fewer than four photos. The placement above would leave
 * a hole where the missing tiles go; instead the tiles that are there grow
 * into the space. One photo fills the block, two share it side by side, and
 * with three the last one takes the whole bottom row on its side. Browsers
 * without `:has()` keep the hole, which is what the standalone elements
 * always rendered.
 */
.immomakler-gallery--static_mosaic .immomakler-gallery__mosaic-block:has(> :nth-child(1):last-child) > :nth-child(1) {
	grid-column: 1 / 5;
	grid-row: 1 / 3;
}

.immomakler-gallery--static_mosaic .immomakler-gallery__mosaic-block:has(> :nth-child(2):last-child) > :nth-child(1) {
	grid-column: 1 / 3;
	grid-row: 1 / 3;
}

.immomakler-gallery--static_mosaic .immomakler-gallery__mosaic-block:has(> :nth-child(2):last-child) > :nth-child(2) {
	grid-column: 3 / 5;
	grid-row: 1 / 3;
}

.immomakler-gallery--static_mosaic .immomakler-gallery__mosaic-block:nth-child(odd):has(> :nth-child(3):last-child) > :nth-child(3) {
	grid-column: 1 / 3;
	grid-row: 2 / 3;
}

.immomakler-gallery--static_mosaic .immomakler-gallery__mosaic-block:nth-child(even):has(> :nth-child(3):last-child) > :nth-child(3) {
	grid-column: 3 / 5;
	grid-row: 2 / 3;
}

/*
 * The image fills its tile. gallery-base.css (a dependency, so printed
 * before this file) forces `cover` onto an optimizer-wrapped
 * `<picture> > img` at (0,1,1); these selectors carry the wrapper class as
 * well and win on specificity, not on order.
 */
.immomakler-gallery--static_mosaic .immomakler-gallery__tile-link .immomakler-gallery__image,
.immomakler-gallery--static_mosaic .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--hover-zoom-in.immomakler-gallery--static_mosaic .immomakler-gallery__tile-link:hover .immomakler-gallery__image,
.immomakler-gallery--hover-zoom-in.immomakler-gallery--static_mosaic .immomakler-gallery__tile-link:focus-visible .immomakler-gallery__image {
	transform: scale(1.03);
}

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

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

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