/* GALLERY — .db-gallery  (gallery, about, corporate-events, landing = 4)
   core/gallery with WP's native lightbox (6.4+). The prototype shipped a
   hand-rolled JS lightbox; core's is accessible and needs no code. */
.db-gallery { border-bottom: 1px solid var(--line); }
.db-gallery .db-gallery__inner { display: flex; flex-direction: column; gap: 32px; padding-block: 20px 40px; }
.db-gallery__title { font-size: clamp(2rem, 9vw, 5rem); line-height: 1.1; }
.db-gallery .wp-block-gallery { gap: 10px; }
/* Height goes on the FIGURE, not the img. A cropped gallery is styled by
   `.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) img`
   — the `:not(#individual-image)` puts an ID in the selector, making it (1,4,2),
   which no class-based rule can outrank. That rule already gives the img
   `height:100%; object-fit:cover`, so sizing the figure is both the way to win
   and the WP-native way to do it. Sizing the img silently did nothing: every
   gallery fell back to its intrinsic aspect ratio (~510px where the design says
   680px) and the earlier section diff never caught it because the probe only
   compared section-level fields. */
.db-gallery .wp-block-gallery figure.wp-block-image { height: 300px; }
@media (min-width: 861px) {
	.db-gallery .db-gallery__inner { padding-block: 60px 120px; gap: 48px; }
	.db-gallery__title { font-size: 5rem; }
	.db-gallery .wp-block-gallery { gap: 16px; }
	.db-gallery .wp-block-gallery figure.wp-block-image { height: clamp(300px, 26vw, 460px); }
}

/* --- variants: centring and colour are separate concerns ------------------
   Two instances want a centred heading with symmetric 120px padding:
     .ab-location (Über uns) — plus a cream surface and 425/680px frames
     .lp-finger   (landing)  — plus a sand surface, default frame heights
   So --centered carries the layout and --cream only the colour + frame heights.
   Bundling them, as the first pass did, meant landing could not reuse either.

   ⚠ Structural deviation left in place on Über uns: .ab-location is a scroll-snap
   rail with prev/next arrows showing three at a time. This stays core/gallery so
   WP's native lightbox keeps working — the documented reason this section is not
   hand-rolled. Desktop reads the same; mobile stacks rather than swiping. */
.db-gallery--centered .db-gallery__inner { align-items: center; padding-block: 40px; }
.db-gallery--centered .db-gallery__title { text-align: center; align-self: stretch; }

.db-gallery--cream { background: var(--cream); }
.db-gallery--cream .wp-block-gallery figure.wp-block-image { height: 425px; }

@media (min-width: 861px) {
	/* 60, not 48 [Figma 368:3653 gap 60]. The base's 48 came from the other
	   gallery instance; this variant's frame says otherwise. */
	.db-gallery--centered .db-gallery__inner { padding-block: 120px; gap: 60px; }
	.db-gallery--cream .wp-block-gallery figure.wp-block-image { height: 680px; }
}

/* --- variant: filterable  (.db-gallery--filtered) -------------------------
   The Galerie page. Three things the base cannot do:

     1. a filter row above the grid (5 categories + "Alle anzeigen")
     2. `--wide` tiles spanning two columns, which needs CSS Grid with
        `grid-auto-flow: dense` — core/gallery is a FLEX container, so the
        container is overridden to grid here and the figures become grid items
        (their flex-basis/flex-grow simply stop applying)
     3. a "Mehr anzeigen" button revealing the tail of the set

   Row height comes from grid-auto-rows, so the figure fills its row rather than
   carrying the base's fixed height — a --wide tile is two columns but still one
   row tall. */
.db-gallery--filtered .db-gallery__filters {
	display: flex;
	align-items: flex-end;
	gap: 32px;
	width: 100%;
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.db-gallery--filtered .db-gallery__filters::-webkit-scrollbar { display: none; }

.db-gallery__filter {
	flex: 0 0 auto;
	position: relative;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	font-family: var(--font-body);
	font-weight: 300;
	font-size: 16px;
	line-height: 20px;
	white-space: nowrap;
	color: rgba(37, 32, 30, 0.32);
	transition: color .2s ease;
}
.db-gallery__filter:hover,
.db-gallery__filter.is-active { color: var(--ink); }

/* ⚠️ A real element between the labels, not a `::after` under each one. The
   frame (368:2984) draws 1px vertical hairlines BETWEEN the categories and no
   underline at all, and on desktop the row is `space-between` — so the gaps are
   distributed by flex and a pseudo-element could not be centred in one. As flex
   items the separators take part in that distribution, which is exactly what the
   frame does with them. */
.db-gallery__sep {
	flex: 0 0 1px;
	align-self: stretch;
	width: 1px;
	background: var(--line);
}

/* `.has-nested-images` in the selector on purpose. Two core rules have to be
   beaten here and both are stronger than a plain two-class selector:
     gap   — blockGap:0 generates `.wp-container-core-gallery-is-layout-<hash>
             { gap: 0 }`, printed after this file (trap 10)
     width — `.wp-block-gallery.columns-4 figure.wp-block-image` sets
             `width: calc(25% - …)`, which a flex container ignores but a GRID
             honours: every tile came out 85px wide inside a 340px column */
.db-gallery--filtered .wp-block-gallery.has-nested-images {
	display: grid;
	grid-template-columns: 1fr;
	grid-auto-rows: 300px;
	grid-auto-flow: dense;
	gap: 10px;
}
/* `!important` is the only way out, and it is deliberate. Core sizes gallery
   tiles with
     .wp-block-gallery.has-nested-images.columns-4 figure.wp-block-image:not(#individual-image)
   whose `:not(#individual-image)` puts an ID in the selector — specificity
   (1,4,1). No class-based rule can outrank that, and the width it sets
   (`calc(25% - …)`) is meaningless once the container is a grid: every tile came
   out 82px inside a 328px column. Core uses the same ID trick for the cropped
   img height, which is why THAT one is solved by sizing the figure instead —
   here there is no other element to move the width onto. */
.db-gallery--filtered .wp-block-gallery.has-nested-images figure.wp-block-image {
	width: auto !important;
	height: 100%;
}
.db-gallery--filtered .wp-block-gallery.has-nested-images figure.wp-block-image.is-hidden { display: none; }

/* Hidden until the script runs: without JS every tile is already visible, so a
   reveal button would be a dead control. Same contract as .db-rail-nav. */
.db-gallery__more { display: none; align-self: center; width: 100%; }
.db-gallery__more.is-ready { display: block; }
.db-gallery__more.is-exhausted { display: none; }

/* The frame gives this the header CTA's treatment — 16/24 with 16/28 padding
   (368:3016) — where `.btn` is 14/21 with 12/20. Overridden here rather than on
   `.btn`, which is network-wide and matches its own frames elsewhere. */
.db-gallery__more.is-ready {
	padding: 16px 28px;
	font-size: 16px;
	line-height: 24px;
}

@media (min-width: 861px) {
	/* Regular, not Light, and the labels spread across the full content width. */
	.db-gallery--filtered .db-gallery__filters { justify-content: space-between; }
	.db-gallery__filter { font-weight: 400; font-size: 20px; line-height: 28px; }

	.db-gallery--filtered .wp-block-gallery.has-nested-images {
		grid-template-columns: repeat(4, 1fr);
		grid-auto-rows: 560px;
		gap: 16px;
	}
	.db-gallery--filtered .wp-block-gallery figure.db-gal--wide { grid-column: span 2; }
	.db-gallery__more.is-ready { align-self: stretch; }
}

@media (prefers-reduced-motion: reduce) {
	.db-gallery .wp-block-gallery figure.wp-block-image img { transition: none; }
}