/* FINGERFOOD MOSAIC — .db-mosaic   (landing, firmenfeier = 2)
   Prototype .lp-finger / .ce-finger.

   NOT core/gallery. A gallery lays out uniform columns; this is an asymmetric
   mosaic — rows of 340fr/600fr/340fr where one cell holds a STACK of two images
   sharing the row height. The theme previously mapped both instances onto
   .db-gallery, which can express neither the ratios nor the stack.

   Mobile is a plain column of fixed-height images (the --tall ones a little
   taller, matching the prototype); from 861px each row becomes a grid whose row
   height is clamp(420px, 42vw, 600px) and every image fills its cell. A stacked
   cell therefore yields two images of (rowHeight - 40) / 2. */
.db-mosaic .db-mosaic__inner { display: flex; flex-direction: column; gap: 24px; padding-block: 40px; }
.db-mosaic__title { font-size: clamp(2rem, 9vw, 5rem); line-height: 1.1; }

.db-mosaic .db-mosaic__grid  { display: flex; flex-direction: column; gap: 10px; }
.db-mosaic .db-mosaic__row   { display: flex; flex-direction: column; gap: 10px; }
.db-mosaic .db-mosaic__stack { display: flex; flex-direction: column; gap: 10px; }

.db-mosaic__item { margin: 0; }
/* (0,2,1) so it outranks core's `.wp-block-image img { height: auto }` (0,1,1).
   Standalone images have no ID-bearing core rule, unlike a cropped gallery. */
.db-mosaic .db-mosaic__item img {
	width: 100%;
	height: 300px;
	object-fit: cover;
	display: block;
	transition: transform .6s ease;
}
.db-mosaic .db-mosaic__item--tall img { height: 340px; }

@media (min-width: 861px) {
	.db-mosaic .db-mosaic__inner { padding-block: 120px; gap: 48px; }
	.db-mosaic .db-mosaic__grid  { gap: 40px; }

	.db-mosaic .db-mosaic__row {
		display: grid;
		gap: 40px;
		grid-auto-rows: clamp(420px, 42vw, 600px);
	}
	.db-mosaic .db-mosaic__row--a  { grid-template-columns: 340fr 600fr 340fr; }
	.db-mosaic .db-mosaic__row--b  { grid-template-columns: 600fr 340fr; }
	.db-mosaic .db-mosaic__row--b3 { grid-template-columns: 600fr 340fr 340fr; }

	/* minmax(0, 1fr), not 1fr: a bare 1fr track has an auto minimum, so a square
	   photo's intrinsic height (340px at this column width) won over the row's
	   600px. The pair then measured 720px and the lower image ran 120px out of
	   the section. The Figma placeholders were landscape and hid it; the old
	   site's real photos are square. 2026-10-07, RELAUNCH-NOTES §9.83. */
	.db-mosaic .db-mosaic__stack {
		display: grid;
		grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
		gap: 40px;
		height: 100%;
		min-height: 0;
	}

	.db-mosaic .db-mosaic__item { height: 100%; min-height: 0; }
	.db-mosaic .db-mosaic__item img,
	.db-mosaic .db-mosaic__item--tall img { height: 100%; }
}

/* landing centres the heading; firmenfeier leaves it left and closes on 60px
   rather than 120px because the next section carries its own top padding */
.db-mosaic--centered .db-mosaic__title { text-align: center; }
@media (min-width: 861px) {
	.db-mosaic--flush .db-mosaic__inner { padding-block: 120px 60px; }
}

@media (prefers-reduced-motion: reduce) {
	.db-mosaic .db-mosaic__item img { transition: none; }
}