/**
 * Galerie-Widget (`kwat_gallery`, Phase 6/3b) – drei Wandvorlagen.
 *
 * Bau-Spez: mockups/galerie.html (Auftraggeber-abgenommen, alle drei Varianten).
 * Reines CSS, kein eigenes JS. Responsiv über CONTAINER QUERIES auf `.kwat-gal`
 * (innerer Container, nie der Widget-Root – Elementor-Leerraum-Gotcha).
 *
 * Aufbau
 *   1  Wurzel + Tokens
 *   2  Kopf (Eyebrow / Titel / Unterzeile)
 *   3  Geteiltes Bild-Element + Beschriftung
 *   4  Vorlage „Kachelwand" (tiles)
 *   5  Vorlage „Regal" (shelf)
 *   6  Vorlage „Barspiegel" (mirror)
 *   7  Bewegung / forced-colors
 */

/* ── 1 · Wurzel + Tokens ─────────────────────────────────────────────────── */
.kwat-gal {
	container-type: inline-size;
	--kwat-gal-accent: var(--kwat-color-gold, #cbaa5c);
	--kwat-gal-surface: #141719;
	--kwat-gal-gap: 7px;
	--kwat-gal-radius: var(--kwat-radius-md, 10px);
	--kwat-gal-tile-min: 150px;
	--kwat-gal-glaze: #2b3134;
	--kwat-gal-glaze-edge: #586066;
	--kwat-gal-wood: #4a382a;
	--kwat-gal-wood-hi: #6b5138;
	--kwat-gal-lamp: #f0c583;
	--kwat-gal-patina: #3d3a30;
	--kwat-gal-bevel: rgb(255 255 255 / 22%);
}

/* ── 2 · Kopf ────────────────────────────────────────────────────────────── */
.kwat-gal__head {
	max-width: 42rem;
	margin: 0 auto var(--kwat-space-lg, 2rem);
	text-align: center;
}

.kwat-gal__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	margin: 0 0 .625rem;
	color: var(--kwat-gal-accent);
	font-size: var(--kwat-text-sm, .8125rem);
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.kwat-gal__eyebrow::before,
.kwat-gal__eyebrow::after {
	content: "";
	inline-size: 1.75rem;
	block-size: 1px;
	background: linear-gradient(90deg, transparent, var(--kwat-gal-accent));
}

.kwat-gal__eyebrow::after {
	background: linear-gradient(90deg, var(--kwat-gal-accent), transparent);
}

.kwat-gal__title {
	margin: 0 0 .5rem;
	color: var(--kwat-color-heading, #fff);
	font-family: var(--kwat-font-heading, Georgia, serif);
	font-size: var(--kwat-text-2xl, clamp(1.5rem, 3.4cqi + 1rem, 2.25rem));
	line-height: 1.12;
}

.kwat-gal__sub {
	margin: 0;
	color: var(--kwat-color-muted, #aab2bb);
	font-size: var(--kwat-text-md, .9375rem);
}

/* ── 3 · Geteiltes Bild-Element ──────────────────────────────────────────── */
.kwat-gal__item {
	position: relative;
	display: block;
	overflow: hidden;
	margin: 0;
	color: inherit;
	text-decoration: none;
	isolation: isolate;
}

/* Sehr lange Galerien: nur rendern, was sichtbar ist. NUR dort, wo die Höhe
   ohnehin vom Raster vorgegeben ist (quadratische Kachel bzw. Rasterzeile).
   Im Regal NICHT: dort bestimmt das Bild selbst die Höhe – eine geschätzte
   Größe ließe die Bilder neben dem Brett schweben, bis sie in den Blick
   scrollen (live gemessen: bis zu 68px Luft). */
.kwat-gal--tiles .kwat-gal__item,
.kwat-gal--mirror .kwat-gal__item {
	content-visibility: auto;
	contain-intrinsic-size: auto 10rem;
}

.kwat-gal__img.kwat-gal__img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	filter: saturate(.92) brightness(.94);
	transition:
		transform var(--kwat-duration-slow, 480ms) var(--kwat-ease-entrance, cubic-bezier(.16, 1, .3, 1)),
		filter var(--kwat-duration-base, 240ms) var(--kwat-ease-standard, cubic-bezier(.4, 0, .2, 1));
}

@media (hover: hover) {
	.kwat-gal__item:hover .kwat-gal__img {
		filter: saturate(1.05) brightness(1);
	}
}

.kwat-gal__item:focus-visible .kwat-gal__img {
	filter: saturate(1.05) brightness(1);
}

/* Beschriftung: dauerhaft lesbar. Der Verlauf deckt zu ~82 %, damit der Text
   unabhängig vom Foto kontrastiert (gemessen, nicht geschätzt). */
.kwat-gal__cap {
	position: absolute;
	inset: auto 0 0;
	z-index: 3;
	padding: 1.75rem .625rem .5rem;
	background: linear-gradient(180deg, transparent, rgb(8 10 11 / 82%) 62%);
	color: #fff;
	font-size: var(--kwat-text-sm, .8125rem);
	font-weight: 600;
	line-height: 1.3;
	text-shadow: 0 1px 3px rgb(0 0 0 / 90%);
}

.kwat-gal__cap-title {
	display: block;
}

.kwat-gal__cap-note {
	display: block;
	margin-block-start: .0625rem;
	color: #cfd6dc;
	font-size: var(--kwat-text-sm, .8125rem);
	font-weight: 500;
}

/* ── 4 · Vorlage „Kachelwand" ────────────────────────────────────────────── */
.kwat-gal--tiles .kwat-gal__wall {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(var(--kwat-gal-tile-min), 100%), 1fr));
	gap: var(--kwat-gal-gap);
	padding: calc(var(--kwat-gal-gap) + 4px);
	border-radius: var(--kwat-gal-radius);
	background: var(--kwat-gal-surface);
	box-shadow:
		inset 0 2px 6px rgb(0 0 0 / 55%),
		0 1px 0 color-mix(in srgb, #fff 6%, transparent);
}

.kwat-gal--tiles .kwat-gal__item {
	aspect-ratio: 1;
	background: var(--kwat-gal-glaze);
	/* Glasurkante: oben Licht, unten Schatten – macht die Kachel körperlich. */
	box-shadow:
		inset 0 2px 0 color-mix(in srgb, var(--kwat-gal-glaze-edge) 80%, transparent),
		inset 0 -2px 3px rgb(0 0 0 / 60%),
		inset 2px 0 0 color-mix(in srgb, var(--kwat-gal-glaze-edge) 34%, transparent),
		inset -2px 0 0 rgb(0 0 0 / 35%);
}

/* Der Glanz auf der Glasur wandert bei Hover/Fokus schräg durch. */
.kwat-gal--tiles .kwat-gal__item::before {
	content: "";
	position: absolute;
	z-index: 2;
	inset: -30% -60%;
	background: linear-gradient(105deg, transparent 42%, color-mix(in srgb, #fff 16%, transparent) 50%, transparent 58%);
	pointer-events: none;
	transform: translateX(-60%);
	transition: transform var(--kwat-duration-slow, 480ms) var(--kwat-ease-standard, cubic-bezier(.4, 0, .2, 1));
}

@media (hover: hover) {
	.kwat-gal--tiles .kwat-gal__item:hover::before {
		transform: translateX(60%);
	}

	.kwat-gal--tiles .kwat-gal__item:hover .kwat-gal__img {
		transform: scale(1.06);
	}
}

.kwat-gal--tiles .kwat-gal__item:focus-visible::before {
	transform: translateX(60%);
}

.kwat-gal--tiles .kwat-gal__item:focus-visible {
	outline: 3px solid var(--kwat-gal-accent);
	outline-offset: -3px;
}

/* Die gebrannte Dekorkachel – kein Bild, das Zeichen des Hauses. */
.kwat-gal__ornament {
	display: grid;
	place-items: center;
	background: linear-gradient(155deg, #333a3d, #20262a);
	color: var(--kwat-gal-accent);
}

.kwat-gal__ornament svg {
	inline-size: 52%;
	block-size: auto;
	opacity: .85;
}

.kwat-gal__ornament::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(120% 90% at 30% 15%, color-mix(in srgb, #fff 8%, transparent), transparent 60%);
}

@container (max-width: 30rem) {
	.kwat-gal--tiles {
		--kwat-gal-tile-min: 8rem;
	}

	/* Schmal bleibt nur die Ortsangabe – zwei Zeilen erschlagen die kleine Kachel. */
	.kwat-gal--tiles .kwat-gal__cap-note {
		display: none;
	}
}

/* ── 5 · Vorlage „Regal" ─────────────────────────────────────────────────── */
.kwat-gal--shelf .kwat-gal__unit {
	padding: 1.25rem clamp(.75rem, 3cqi, 1.75rem) .5rem;
	border-radius: var(--kwat-gal-radius);
	background: linear-gradient(180deg, #1e2225, var(--kwat-gal-surface));
	box-shadow:
		inset 0 0 60px rgb(0 0 0 / 60%),
		0 1px 0 color-mix(in srgb, #fff 6%, transparent);
}

.kwat-gal__board {
	margin-block-end: 2.25rem;
}

.kwat-gal__board:last-child {
	margin-block-end: .75rem;
}

/* Ein Brett ist EINE Reihe: wird der Platz knapp, schaut man am Regal entlang.
   Gestapelte Bilder ohne Standfläche würden die Metapher zerstören. */
.kwat-gal__row {
	--kwat-gal-rowh: clamp(5.5rem, 15cqi, 12rem);

	display: flex;
	flex-wrap: nowrap;
	align-items: flex-end;
	/* „safe": bei Überlauf wird links nicht abgeschnitten. Zentriert stehen
	   halbleere Bretter wie eine einzelne Flasche mittig statt linksbündig. */
	justify-content: safe center;
	gap: clamp(.5rem, 1.6cqi, 1.125rem);
	padding-block-end: .375rem;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: thin;
	scrollbar-color: color-mix(in srgb, var(--kwat-gal-lamp) 45%, transparent) transparent;
}

.kwat-gal--shelf .kwat-gal__item {
	/* Breite nach Seitenverhältnis → das Brett füllt sich gleichmäßig. Der Deckel
	   verhindert, dass ein einzelnes Bild auf einem halbleeren Brett über seine
	   natürliche Breite aufgeblasen und dadurch stark beschnitten wird. */
	flex: var(--kwat-gal-ar, 1.5) 1 6rem;
	min-inline-size: 7rem;
	max-inline-size: calc(var(--kwat-gal-rowh) * var(--kwat-gal-lift, 1) * var(--kwat-gal-ar, 1.5) * 1.15);
	overflow: visible;
	scroll-snap-align: start;
	transition: transform var(--kwat-duration-base, 240ms) var(--kwat-ease-entrance, cubic-bezier(.16, 1, .3, 1));
}

.kwat-gal--shelf .kwat-gal__img {
	block-size: calc(var(--kwat-gal-rowh) * var(--kwat-gal-lift, 1));
	border-radius: 3px 3px 1px 1px;
	/* Kantenlicht oben + Aufsetzschatten unten: das Bild STEHT. */
	box-shadow:
		inset 0 1px 0 rgb(255 255 255 / 25%),
		0 1px 0 rgb(0 0 0 / 80%),
		0 10px 16px -8px rgb(0 0 0 / 85%);
}

@media (hover: hover) {
	.kwat-gal--shelf .kwat-gal__item:hover {
		transform: translateY(-4px);
	}
}

.kwat-gal--shelf .kwat-gal__item:focus-visible {
	outline: 3px solid var(--kwat-gal-accent);
	outline-offset: 3px;
	border-radius: 4px;
}

/* Bauchbinde: erscheint bei Hover/Fokus. Auf Touch trägt die Großansicht den Text. */
.kwat-gal--shelf .kwat-gal__cap {
	inset: auto .25rem .5rem;
	padding: .3125rem .4375rem;
	border-radius: 2px;
	background: rgb(10 12 13 / 86%);
	opacity: 0;
	transform: translateY(.25rem);
	transition:
		opacity var(--kwat-duration-base, 240ms) var(--kwat-ease-standard, cubic-bezier(.4, 0, .2, 1)),
		transform var(--kwat-duration-base, 240ms) var(--kwat-ease-standard, cubic-bezier(.4, 0, .2, 1));
}

.kwat-gal--shelf .kwat-gal__item:hover .kwat-gal__cap,
.kwat-gal--shelf .kwat-gal__item:focus-visible .kwat-gal__cap {
	opacity: 1;
	transform: none;
}

.kwat-gal__plank {
	position: relative;
	block-size: .875rem;
	border-radius: 2px;
	background:
		repeating-linear-gradient(90deg, transparent 0 7px, rgb(0 0 0 / 13%) 7px 8px),
		linear-gradient(180deg, var(--kwat-gal-wood-hi), var(--kwat-gal-wood) 42%, #2f2419);
	box-shadow:
		inset 0 1px 0 color-mix(in srgb, var(--kwat-gal-lamp) 34%, transparent),
		0 2px 3px rgb(0 0 0 / 70%);
}

/* Das Licht unter der Brettkante – die Signatur dieser Vorlage. */
.kwat-gal__plank::after {
	content: "";
	position: absolute;
	inset: 100% 4% auto;
	block-size: 5rem;
	background: linear-gradient(180deg, color-mix(in srgb, var(--kwat-gal-lamp) 22%, transparent), transparent 72%);
	filter: blur(6px);
	pointer-events: none;
}

/* Die Gravur in der Vorderkante = das Thema des Bretts. */
.kwat-gal__label {
	display: flex;
	align-items: center;
	gap: .625rem;
	margin: .5rem 0 0;
	padding-inline: .25rem;
	color: color-mix(in srgb, var(--kwat-gal-lamp) 62%, #8b7a66);
	font-family: var(--kwat-font-heading, Georgia, serif);
	font-size: var(--kwat-text-md, .875rem);
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.kwat-gal__label::after {
	content: "";
	flex: 1;
	block-size: 1px;
	background: linear-gradient(90deg, color-mix(in srgb, var(--kwat-gal-lamp) 26%, transparent), transparent);
}

.kwat-gal__label-note {
	/* Gemessen gegen den dunkelsten Untergrund: 5,1:1 (WCAG AA). */
	color: #9b9082;
	font-family: var(--kwat-font-body, system-ui, sans-serif);
	font-size: var(--kwat-text-sm, .8125rem);
	font-weight: 400;
	letter-spacing: .04em;
	text-transform: none;
}

.kwat-gal__label-note::before {
	content: "· ";
}

@container (max-width: 44rem) {
	.kwat-gal__row {
		--kwat-gal-rowh: clamp(5.5rem, 22cqi, 9rem);
	}
}

@container (max-width: 30rem) {
	.kwat-gal__row {
		--kwat-gal-rowh: clamp(6rem, 34cqi, 8rem);
	}

	.kwat-gal__label-note {
		display: none;
	}
}

/* ── 6 · Vorlage „Barspiegel" ────────────────────────────────────────────── */
.kwat-gal--mirror .kwat-gal__wall {
	position: relative;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-auto-rows: clamp(4.5rem, 9cqi, 7.5rem);
	grid-auto-flow: dense;
	gap: max(var(--kwat-gal-gap), 8px);
	padding: .75rem;
	overflow: hidden;
	border-radius: var(--kwat-gal-radius);
	background: linear-gradient(150deg, #23282b, #171a1c 60%);
	box-shadow:
		inset 0 0 0 1px rgb(255 255 255 / 5%),
		var(--kwat-shadow-md, 0 10px 30px rgb(0 0 0 / 50%));
}

/* Der Scheinwerfer, der über das Glas zieht. */
.kwat-gal--mirror .kwat-gal__wall::after {
	content: "";
	position: absolute;
	z-index: 4;
	inset: -20% -40%;
	background: linear-gradient(102deg, transparent 44%, rgb(255 255 255 / 5%) 50%, transparent 56%);
	pointer-events: none;
	animation: kwat-gal-sweep 20s linear infinite;
}

@keyframes kwat-gal-sweep {
	from { transform: translateX(-55%); }
	to { transform: translateX(55%); }
}

.kwat-gal--mirror .kwat-gal__item {
	grid-column: span 2;
	grid-row: span 2;
	background: #22272a;
	/* Facettenschliff: abgeschrägte Ecken + heller Grat an der Kante. */
	clip-path: polygon(1.15rem 0, 100% 0, 100% calc(100% - 1.15rem), calc(100% - 1.15rem) 100%, 0 100%, 0 1.15rem);
	box-shadow: inset 0 0 0 2px var(--kwat-gal-bevel), inset 0 0 1.5rem rgb(0 0 0 / 35%);
}

.kwat-gal__item--wide { grid-column: span 4; grid-row: span 3; }
.kwat-gal__item--tall { grid-column: span 2; grid-row: span 3; }
.kwat-gal__item--full { grid-column: 1 / -1; grid-row: span 3; }

/* Die Alterung: warme Flecken in den Ecken wie bei altem Spiegelglas. */
.kwat-gal--mirror .kwat-gal__item::before {
	content: "";
	position: absolute;
	z-index: 2;
	inset: 0;
	background:
		radial-gradient(60% 55% at 3% 97%, color-mix(in srgb, var(--kwat-gal-patina) 60%, transparent), transparent 70%),
		radial-gradient(45% 40% at 97% 4%, color-mix(in srgb, var(--kwat-gal-patina) 42%, transparent), transparent 72%);
	mix-blend-mode: soft-light;
	opacity: .9;
	pointer-events: none;
}

@media (hover: hover) {
	.kwat-gal--mirror .kwat-gal__item:hover .kwat-gal__img {
		transform: scale(1.04);
	}
}

.kwat-gal--mirror .kwat-gal__item:focus-visible {
	outline: 3px solid var(--kwat-gal-accent);
	outline-offset: -4px;
}

.kwat-gal--mirror .kwat-gal__cap {
	padding: 2rem .75rem .625rem;
	background: linear-gradient(180deg, transparent, rgb(8 10 11 / 85%) 65%);
	font-size: var(--kwat-text-md, .875rem);
}

@container (max-width: 44rem) {
	.kwat-gal--mirror .kwat-gal__wall {
		grid-template-columns: repeat(4, 1fr);
		grid-auto-rows: clamp(4rem, 13cqi, 6rem);
	}

	.kwat-gal__item--wide,
	.kwat-gal__item--full { grid-column: 1 / -1; grid-row: span 3; }
	.kwat-gal__item--tall { grid-column: span 2; grid-row: span 3; }
}

@container (max-width: 30rem) {
	.kwat-gal--mirror .kwat-gal__wall {
		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: clamp(4.5rem, 26cqi, 6.5rem);
	}

	.kwat-gal--mirror .kwat-gal__item { grid-column: span 1; grid-row: span 2; }
	.kwat-gal__item--wide,
	.kwat-gal__item--full { grid-column: 1 / -1; grid-row: span 3; }
	.kwat-gal__item--tall { grid-column: span 1; grid-row: span 3; }

	.kwat-gal--mirror .kwat-gal__cap-note {
		display: none;
	}
}

/* ── 7 · Bewegung / forced-colors ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.kwat-gal--mirror .kwat-gal__wall::after {
		animation: none;
		opacity: .35;
	}

	.kwat-gal__img,
	.kwat-gal--shelf .kwat-gal__item,
	.kwat-gal--tiles .kwat-gal__item::before,
	.kwat-gal--shelf .kwat-gal__cap {
		transition: none;
	}
}

@media (forced-colors: active) {
	/* Glasur, Patina und Scheinwerfer sind reine Deko – im Kontrastmodus weg,
	   damit Rahmen und Beschriftung die Systemfarben behalten. */
	.kwat-gal--tiles .kwat-gal__item::before,
	.kwat-gal--mirror .kwat-gal__item::before,
	.kwat-gal--mirror .kwat-gal__wall::after,
	.kwat-gal__plank::after {
		display: none;
	}

	.kwat-gal__item {
		border: 1px solid CanvasText;
	}

	.kwat-gal__cap {
		background: Canvas;
		color: CanvasText;
		text-shadow: none;
	}
}