/* 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; }

	.db-mosaic .db-mosaic__stack {
		display: grid;
		grid-template-rows: 1fr 1fr;
		gap: 40px;
		height: 100%;
	}

	.db-mosaic .db-mosaic__item { height: 100%; }
	.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; }
}