/*
 * Quick task 260812-td9 (Grundlage) + 260812-wxx (Scroll-Snap-Reihe) + 260813-0xw (Umbau zum
 * Ein-Bild-Karussell): Projekt-Galerie - Frontend-Stylesheet.
 *
 * Dieses Stylesheet besitzt jetzt drei Dinge: das waagerechte Ein-Bild-Karussell mit
 * per JavaScript eingehaengten Pfeil-Schaltflaechen (260813-0xw, ersetzt die fruehere
 * 2/3/4-gleichzeitig-Reihe aus 260812-wxx, die wiederum das Bild-Raster aus 260812-td9
 * ersetzt hatte), den kundenseitig einstellbaren Proportions-Regler
 * `--pcg-gallery-aspect-ratio` (GAL-10, siehe Erklaerblock unten bei .pcg-gallery__img) und
 * die Vanilla-Lightbox (siehe pcg-gallery.js). Nur auf pcg_project-Einzelseiten geladen
 * (GAL-05), nie sitewide.
 *
 * Quick task 260813-q6v (Task 1 + Task 2): the base .pcg-gallery rule below now carries the
 * same box treatment as the [pcg_before_after] slider's own .pcg-ba rule in before-after.css
 * - box-shadow (Task 1), border-radius, aspect-ratio and a shared max-width knob (Task 2) -
 * so the Projekt-Galerie box and the Vorher/Nachher slider read as a matched pair rather than
 * one framed/elevated element next to one flat one (the client's own "Schatten/3D-Effekt"
 * request). The shadow expression is byte-identical in both stylesheets and pinned by a
 * cross-file test in tests/pcg-project-gallery.test.cjs. Its client-facing knob,
 * --pcg-media-shadow, follows the exact same no-:root-default rule as
 * --pcg-gallery-aspect-ratio below (D-12b) - see that contract comment further down for the
 * full print-order reasoning, which applies identically here.
 *
 * Eigener :root-Block nur fuer Werte ohne geteiltes Design-Token (die Lightbox-Abdunklung),
 * jede uebrige Farbe/jeder Abstand liest ein bestehendes var(--token, fallback). WICHTIG:
 * dieser :root-Block ist NICHT der Ort fuer weitere Standardwerte - insbesondere nicht fuer
 * --pcg-gallery-aspect-ratio (siehe Erklaerblock unten, D-12b).
 */

:root {
	/* Navy-Ink-Abdunklung fuer die Lightbox (rgb(20,36,64), dasselbe Navy wie
	 * before-after.css's Label-Scrim), aber deutlich dunkler/deckender als dort - die
	 * Lightbox muss den ganzen Bildschirm verdunkeln, nicht nur eine Bildecke abdecken. */
	--pcg-gallery-scrim: rgba(20, 36, 64, .92);
}

/* Waagerechtes Ein-Bild-Karussell (GAL-06, D-01/D-02, umgebaut in 260813-0xw): die Bewegung
 * selbst (Wischen, Trackpad, Tastatur) kommt weiterhin komplett von diesen
 * CSS-Eigenschaften, ganz ohne JavaScript - der Scroll-Container bleibt bewusst erhalten,
 * weil er natives Wischen auf dem iPhone ermoeglicht und die Galerie auch ohne JavaScript
 * bedienbar bleibt. scroll-behavior ist der EINZIGE Ort im gesamten Feature, an dem die
 * Bewegungsart steht (D-06, unveraendert) - pcg-gallery.js ruft scrollTo() bewusst ohne
 * eigene behavior-Angabe auf, damit es hier nie zwei auseinanderlaufende Schalter gibt.
 * align-items:flex-start verhindert, dass ein nicht geladenes Bild die Nachbarn auf seine
 * (kleinere) Hoehe streckt (D-12c, unveraendert). Der Abstand (gap) ist jetzt 0 (D-01): mit
 * genau einem Bild pro Bildschirmbreite gibt es keine Nachbarn mehr, zwischen denen ein
 * Abstand entstehen koennte - und die Pfeil-Arithmetik in pcg-gallery.js setzt voraus, dass
 * ein Schritt exakt der Container-Breite entspricht; jeder Abstand wuerde das mit jedem
 * Klick ein Stueck weiter auseinanderlaufen lassen. */
.pcg-gallery {
	display: flex;
	align-items: flex-start;
	/* 260813-q6v Task 2 (D-03/T-q6v-01): these two per-axis declarations are the ONLY reason
	 * to add radius/shadow here at all - overflow-x:auto makes this a scroll container that
	 * clips its children to the padding box WITH border-radius applied, and overflow-y:hidden
	 * keeps the vertical edge tidy. Do not "tidy" these into a single overflow shorthand -
	 * that would silently disable horizontal scrolling and break the carousel. */
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	overscroll-behavior-x: contain;
	gap: 0;
	scrollbar-width: none;
	/* 260813-q6v Task 1 (D-01/D-02): matched navy elevation, identical to .pcg-ba's own base
	 * rule in before-after.css - see the file-header comment above for the full
	 * client-knob/print-order contract. */
	box-shadow: var(--pcg-media-shadow, var(--shadow-lg, 0 24px 60px rgba(20,36,64,.18)));
	/* 260813-q6v Task 2 (D-05): the same literal .pcg-ba uses, not a new radius token - what
	 * the client asked for is textually identical treatment, which a cross-file test in
	 * tests/pcg-project-gallery.test.cjs pins between the two boxes' shadow value already;
	 * the radius itself only needs to match, not be knob-driven. */
	border-radius: 12px;
	/* 260813-q6v Task 2 (D-07): declared on the box as well as the image below, mirroring
	 * .pcg-ba/.pcg-ba img in before-after.css exactly - this box's own height would otherwise
	 * be content-derived (only resolved once the first image has loaded), causing the whole
	 * page to jump. Reads the SAME --pcg-gallery-aspect-ratio variable and 16/9 fallback as
	 * .pcg-gallery__img below - both declarations can never disagree, so this does not
	 * contradict D-12a's "only ONE declaration" (that rule's subject is a divergent
	 * breakpoint-scoped value, not a second reader of the same one). */
	aspect-ratio: var(--pcg-gallery-aspect-ratio, 16 / 9);
}

/* Quick task 260814-15c: dark-background override for the Projekt-Galerie box's shadow. The
 * section class this rule keys on, .pcg-navy, carries a hard-coded dark background declared
 * in this project's own global CSS (design-exports/PCG_GlobalCSS_bereinigt.css) - that
 * declared contract is the only reason a stylesheet is entitled to assume what colour sits
 * behind the box here. The shared elevation token used by the base rule above resolves to
 * that exact same background colour, which is why its shadow is invisible in this one
 * context specifically and reads correctly everywhere else it is used (on a light
 * background, including the base rule's own light-context instance of this component). The
 * first shadow layer below is a thin light rim doing the visible-edge work a plain drop
 * shadow cannot do on a dark background; the second layer intentionally keeps the shared
 * token's own offset and blur and changes only its colour, so this box's shadow keeps the
 * same shape and softness as the base rule's while each reads correctly on its own
 * background. The knob in front of this expression is deliberately its own, independent of
 * the shared media-shadow knob the base rule reads, because chaining the two would let a
 * future global retune silently point this box's shadow back at the shared token's colour
 * and re-create the exact invisible-on-navy bug this rule exists to fix. Like every other
 * client-facing knob in this file, it must never be given a :root default anywhere in this
 * theme - see the --pcg-gallery-aspect-ratio contract block further down this file for the
 * full print-order reasoning, which applies identically here. Desktop and mobile stay
 * identical - no @media block may re-declare this. */
.pcg-navy .pcg-gallery {
	box-shadow: var(--pcg-gallery-shadow-on-dark, 0 0 0 1px rgba(255,255,255,.14), 0 24px 60px rgba(0,0,0,.45));
}

.pcg-gallery::-webkit-scrollbar {
	display: none;
}

/* Genau EIN Bild pro Bildschirmbreite, bei jeder Fensterbreite (GAL-06, D-01, 260813-0xw): der
 * Kunde hat die vorherige "2 auf dem Handy, 3 auf dem Tablet, 4 auf dem Desktop"-Reihe
 * ausdruecklich abgelehnt ("mehrere Bilder in einer Reihe und mehrere Bilder sliden
 * gleichzeitig - so war es nicht gedacht"; gewuenscht: "ein slider also ein bild und man
 * kann mit den pfeilen nach rechts und links zu anderen bildern"). flex: 0 0 100% macht
 * jedes Element exakt so breit wie die Reihe selbst - das ist die Voraussetzung dafuer, dass
 * "zu Bild n scrollen" und "nur Bild n zeigen" in pcg-gallery.js dieselbe Operation werden
 * (D-02). Die beiden fruehere Breitenumbruchpunkte (641px/1024px) sind komplett entfallen -
 * mit einem Bild pro Bildschirm gibt es nichts mehr, das sie variieren koennten. */
.pcg-gallery__item {
	margin: 0;
	scroll-snap-align: start;
	flex: 0 0 100%;
	min-width: 0;
}

/* Huelle + Pfeile (GAL-07, D-02): per JavaScript um die Reihe eingehaengt, deshalb bleibt
 * inc/project-gallery.php unangetastet. Ohne JavaScript existiert diese Huelle nicht - die
 * Reihe bleibt trotzdem per natives Wischen/Scrollen bedienbar (D-01). */
.pcg-gallery-slider {
	position: relative;
}

/* 260813-q6v Task 2 (D-06): this rule and .pcg-gallery-section .pcg-gallery further down must
 * read the SAME max-width expression, byte-for-byte - the arrows and counter are positioned
 * against THIS wrapper while the images live in the scroller below it, so if only the
 * scroller narrowed, the arrows would float outside the image the moment anyone uses the
 * --pcg-gallery-max-width knob. min(..., 100%) mirrors the hardening .pcg-ba-wrap already has
 * in before-after.css, so a fixed pixel knob value can never exceed a narrow phone's
 * container either. */
.pcg-gallery-section .pcg-gallery-slider {
	max-width: min(var(--pcg-gallery-max-width, var(--content-width, 1200px)), 100%);
	margin-inline: auto;
}

.pcg-gallery__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: var(--pcg-touch-min, 44px);
	min-height: var(--pcg-touch-min, 44px);
	border: none;
	border-radius: 50%;
	background-color: rgba(20, 36, 64, .72);
	color: var(--color-bg, #fff);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	transition: background-color .2s ease;
}

.pcg-gallery__nav:hover {
	background-color: rgba(20, 36, 64, .88);
}

.pcg-gallery__nav:focus-visible {
	outline: 2px solid var(--pcg-color-accent, #8F6132);
	outline-offset: 3px;
}

/* Bewusst INNERHALB der Reihenkante (nicht am Section-Rand), damit die Pfeile auf dem Handy
 * nicht von der 20px-Seitenpolsterung des Abschnitts abgeschnitten werden. */
.pcg-gallery__nav--prev {
	left: 4px;
}

.pcg-gallery__nav--next {
	right: 4px;
}

/* Kein display:none - der Kunde soll sehen, dass es ein Ende gibt (D-03). */
.pcg-gallery__nav:disabled {
	opacity: .3;
	cursor: default;
}

/* Passen alle Bilder gleichzeitig ins Bild, verschwinden BEIDE Pfeile (D-04) - sonst haette
 * eine kleine Galerie zwei dauerhaft graue, sinnlose Pfeile. */
.pcg-gallery-slider--static .pcg-gallery__nav {
	display: none;
}

/* Positions-Zaehler ("3 / 7", D-06, 260813-0xw): das fruehere Nebeneinander mehrerer Bilder
 * hat dem Kunden "es gibt noch mehr" schon rein optisch gezeigt - mit nur noch einem
 * sichtbaren Bild faellt dieser Hinweis weg, der Zaehler holt ihn zurueck. Reiner Text
 * (kein Markup, T-0xw-01), deshalb reicht eine einfache Pille. pointer-events:none, damit er
 * niemals einen Klick abfaengt, der eigentlich dem Bild darunter (Lightbox-Oeffnen) gilt. */
.pcg-gallery__counter {
	position: absolute;
	bottom: var(--pcg-space-sm, 12px);
	left: 50%;
	transform: translateX(-50%);
	z-index: 5;
	background-color: rgba(20, 36, 64, .72);
	color: var(--color-bg, #fff);
	border-radius: 999px;
	padding: 4px 12px;
	font-size: 13px;
	letter-spacing: .03em;
	pointer-events: none;
}

/* Passt das ganze Bild gleichzeitig ins Bild (nur ein Bild vorhanden), verschwindet auch der
 * Zaehler - es gibt nichts zu zaehlen (D-05/D-06). */
.pcg-gallery-slider--static .pcg-gallery__counter {
	display: none;
}

.pcg-gallery__trigger {
	display: block;
	overflow: hidden;
	border-radius: var(--pcg-radius-card, 4px);
	background-color: var(--color-navy, #142440);
	cursor: zoom-in;
}

.pcg-gallery__trigger:focus-visible {
	outline: 2px solid var(--pcg-color-accent, #8F6132);
	outline-offset: 3px;
}

/* ============================================================
   Quick task 260812-wxx (Regler eingefuehrt) + 260813-0xw (Standardwert geaendert) — the
   --pcg-gallery-aspect-ratio variable contract (GAL-10)

   The single declaration below takes the form
   `aspect-ratio: var(--pcg-gallery-aspect-ratio, 16 / 9);` and NO :root block anywhere in
   this child theme may ever define --pcg-gallery-aspect-ratio. This is load-bearing, not
   stylistic: pcg-gallery.css is enqueued with a dependency on the Bricks
   `bricks-frontend-inline` handle (functions.php), so it prints AFTER the Bricks Custom CSS
   field - a child-theme :root default would therefore print AFTER the client's own Custom
   CSS override and silently beat it by print order, re-creating the exact "ich kann nichts
   aendern" lock-out that 260811-ldk's --pcg-hero-* contract exists to remove. Without a
   theme :root default, only ONE value ever exists - the client's own - so print order
   becomes irrelevant. The fallback inside var() IS the default: an undefined variable
   falls back to it. If you are reading this because you want to "helpfully" add a
   `:root { --pcg-gallery-aspect-ratio: ...; }` default somewhere in this theme: do not - it
   silently disables the client's own Custom CSS override (guarded by test M,
   tests/pcg-project-gallery.test.cjs).

   Only ONE declaration exists (D-12a) - a customer who wants a phone-only value wraps the
   same Custom CSS line in their own @media block themselves (documented in
   KLICKANLEITUNG.md).

   The fallback moved from 4 / 3 to 16 / 9 in 260813-0xw (D-04), because the gallery is no
   longer 2/3/4 images across (260812-wxx) but exactly ONE full-width image per screen
   (260813-0xw, D-01). At 4 images across, a 4:3 image rendered roughly 214px tall - at full
   content width the SAME 4:3 ratio would render roughly 900px tall on desktop and dominate
   the page. 16 / 9 gives roughly 675px at full content width (1200px), a proportion that
   still reads as a photograph rather than a near-square tile. The variable contract itself
   is unchanged - only the fallback value inside var() changes, and the client can still
   override it from the Bricks Custom CSS field exactly as before.

   It is a RATIO, not a pixel height (D-12), because a fixed pixel height would not scale
   correctly at every viewport width, while a ratio does automatically. See KLICKANLEITUNG.md
   for the client-facing German table of the ratio's default and example values,
   recalculated for the full-width single image. */
.pcg-gallery__img {
	display: block;
	width: 100%;
	aspect-ratio: var(--pcg-gallery-aspect-ratio, 16 / 9);
	object-fit: cover;
	transition: transform .3s ease, opacity .3s ease;
}

.pcg-gallery__trigger:hover .pcg-gallery__img {
	transform: scale(1.04);
	opacity: .96;
}

/* Automatisch angehaengte Huelle (Teil I - kein Bricks-Template-Eingriff noetig): eigener
 * vertikaler Rhythmus und dieselbe 20px-Seitenpolsterung, die pcg-responsive.css dem
 * Header gegeben hat. Bei manuellem Shortcode-Einsatz existiert diese Klasse nicht - das
 * Bricks-Element behaelt dann sein eigenes Section-Padding. */
.pcg-gallery-section {
	padding: var(--pcg-space-xl, 48px) 20px;
}

/* 260813-q6v Task 2 (D-06): byte-identical to .pcg-gallery-section .pcg-gallery-slider above
 * - see that rule's comment for the full reasoning. --pcg-gallery-max-width must NEVER be
 * given a :root default anywhere in this theme, for the exact same print-order reason the
 * --pcg-gallery-aspect-ratio contract comment further up documents (pcg-gallery.css prints
 * after the client's own Bricks Custom CSS field). */
.pcg-gallery-section .pcg-gallery {
	max-width: min(var(--pcg-gallery-max-width, var(--content-width, 1200px)), 100%);
	margin-inline: auto;
}

.pcg-gallery__title {
	font-family: var(--pcg-font-heading, 'Manrope', system-ui, sans-serif);
	margin: 0 0 var(--pcg-space-md, 20px);
}

/* ---------------------------------------------------------------------------
 * Lightbox (Task 2) - Weiter/Zurueck, Escape, Fokus-Falle, Fokus-Rueckgabe. Das JS-
 * Verhalten lebt in pcg-gallery.js; dieses Stylesheet liefert nur die optische Seite.
 * --------------------------------------------------------------------------- */

.pcg-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: none;
	align-items: center;
	justify-content: center;
	background-color: var(--pcg-gallery-scrim);
}

.pcg-lightbox.pcg-lightbox--open {
	display: flex;
}

.pcg-lightbox__figure {
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: min(1200px, 92vw);
	max-height: 86vh;
}

.pcg-lightbox__img {
	display: block;
	max-width: min(1200px, 92vw);
	max-height: 86vh;
	object-fit: contain;
	border-radius: var(--pcg-radius-card, 4px);
}

.pcg-lightbox__close,
.pcg-lightbox__prev,
.pcg-lightbox__next {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: var(--pcg-touch-min, 44px);
	min-height: var(--pcg-touch-min, 44px);
	border: none;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, .12);
	color: var(--color-bg, #fff);
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	transition: background-color .2s ease;
}

.pcg-lightbox__close:hover,
.pcg-lightbox__prev:hover,
.pcg-lightbox__next:hover {
	background-color: rgba(255, 255, 255, .22);
}

.pcg-lightbox__close:focus-visible,
.pcg-lightbox__prev:focus-visible,
.pcg-lightbox__next:focus-visible {
	outline: 2px solid var(--pcg-color-accent, #8F6132);
	outline-offset: 3px;
}

.pcg-lightbox__close {
	top: var(--pcg-space-md, 20px);
	right: var(--pcg-space-md, 20px);
}

.pcg-lightbox__prev {
	left: var(--pcg-space-md, 20px);
	top: 50%;
	transform: translateY(-50%);
}

.pcg-lightbox__next {
	right: var(--pcg-space-md, 20px);
	top: 50%;
	transform: translateY(-50%);
}

.pcg-lightbox__counter {
	position: absolute;
	bottom: var(--pcg-space-md, 20px);
	left: 50%;
	transform: translateX(-50%);
	color: var(--color-bg, #fff);
	font-size: 14px;
	letter-spacing: .05em;
}

/* Scroll-Sperre auf dem Hintergrund, waehrend die Lightbox offen ist (pcg-gallery.js setzt
 * diese Klasse auf documentElement). */
html.pcg-lightbox-open {
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.pcg-gallery {
		scroll-behavior: auto;
	}

	.pcg-gallery__nav {
		transition: none;
	}

	.pcg-gallery__img {
		transition: none;
	}

	.pcg-gallery__trigger:hover .pcg-gallery__img {
		transform: none;
	}

	.pcg-lightbox__close,
	.pcg-lightbox__prev,
	.pcg-lightbox__next {
		transition: none;
	}
}