/*
 * Quick task 260731-ryd: before/after comparison slider stylesheet.
 * Quick task 260802-gp3: custom slotted handle added below.
 * Quick task 260802-h0b: VORHER/NACHHER corner labels added below, and the wrapper box
 * (sizing/centring) moved from .pcg-ba onto a new .pcg-ba-wrap element (DEC-5) so an
 * instance-supplied width can override the 900px cap instead of being silently clamped
 * by a rule the client cannot see or edit.
 * Quick task 260809-tpm (Teil A): added .pcg-ba__single below - the box treatment for the
 * single plain <img> the [pcg_before_after] shortcode now renders when only one image (or
 * none) resolves, replacing the old broken placeholder-SVG default. Reads the same
 * --pcg-ba-height/--pcg-ba-object-fit custom properties as .pcg-ba/.pcg-ba img so the
 * width/height shortcode attributes keep working identically in both render modes.
 * Quick task 260810-1ld (Teil C, Task 3): .pcg-ba-wrap's max-width hardened below so a
 * fixed pixel --pcg-ba-max-width instance value can never resolve wider than the
 * container on a narrow phone (discovered fact 10: the live project-detail instance
 * passes --pcg-ba-width:100% today, so this was latent, not yet visibly broken).
 * Quick task 260813-a5m (Task 1, D-01): added an aspect-ratio declaration to .pcg-ba,
 * .pcg-ba img and .pcg-ba__single below, reading the new --pcg-ba-aspect-ratio custom
 * property with an `auto` fallback - CSS's own initial value for this property, which is
 * what makes the addition inert for every existing instance that does not pass the new
 * aspect_ratio shortcode attribute.
 * Quick task 260813-q6v (Task 1): .pcg-ba and .pcg-ba__single below now carry an elevation
 * (box-shadow) matching the Projekt-Galerie box's own base rule in pcg-gallery.css - the
 * client explicitly asked for a "Schatten/3D-Effekt" so the two media boxes read as a
 * designed pair. The expression is deliberately byte-identical in both stylesheets and
 * pinned by a cross-file test in tests/pcg-project-gallery.test.cjs, which also pins the
 * expression's innermost literal fallback against site-interactions.css's own --shadow-lg
 * declaration so the two can never silently drift apart. The client-facing knob inside
 * that expression must never be given a :root default in EITHER file - :root custom
 * properties are global, not scoped per stylesheet, so a default declared here would still
 * collide with pcg-gallery.css's own print-order contract (that file is enqueued after the
 * Bricks Custom CSS field and explains the full reasoning in its own
 * --pcg-gallery-aspect-ratio comment block); the var() fallback embedded in the expression
 * stays the one and only default, exactly like every other --pcg-ba-* property above.
 *
 * This file owns the [pcg_before_after] shortcode's wrapper box (sizing, centring,
 * rounded corners), a replacement slotted handle for the divider, and the two corner
 * labels. The vendor's default handle (img-comparison-slider@8's own dist/styles.css,
 * loaded from the jsDelivr CDN) tested as too subtle against real project photography,
 * so this file now supplies a high-visibility white circular handle with a navy
 * double-arrow icon instead; the vendor stylesheet still supplies the rest of the
 * component's internals.
 *
 * This file DOES declare one colour value of its own below, in a :root block following
 * the same convention as site-interactions.css/price-calculator.css: the label scrim
 * colour, which has no existing Bricks Global Variable equivalent. Every other colour
 * still resolves through a var() reference to a shared design token.
 */

:root {
	/* DEC-3: both labels share this single navy scrim - the mockup's two-tone
	 * VORHER/orange-NACHHER treatment was rejected as reading like a generic
	 * advertising/SaaS demo template. #142440 = rgb(20,36,64), this project's navy ink. */
	--pcg-ba-label-scrim: rgba(20,36,64,.82);
}

.pcg-ba-wrap {
	position: relative;
	display: block;
	/* Custom properties set by the shortcode's style attribute (quick task 260802-h0b,
	 * Part B); every fallback below equals today's pre-change value, so an instance that
	 * supplies neither attribute renders pixel-identical to before this task. */
	width: var(--pcg-ba-width, 100%);
	/* min() clamp (260810-1ld Task 3): the instance-supplied --pcg-ba-max-width can be a
	 * fixed pixel value (e.g. 900px) that would exceed a narrow phone's container - min()
	 * against 100% guarantees this box can never resolve wider than its parent, no matter
	 * what value an instance passes. */
	max-width: min(var(--pcg-ba-max-width, 900px), 100%);
	margin: 0 auto;
}

.pcg-ba {
	display: block;
	width: 100%;
	/* auto is CSS's own initial value for height, so omitting the height attribute
	 * reproduces today's natural-aspect-ratio render exactly. */
	height: var(--pcg-ba-height, auto);
	/* 260813-a5m Task 1 (D-01): auto is CSS's own initial value for aspect-ratio too, so
	 * omitting the aspect_ratio attribute leaves this rule inert for every existing
	 * instance - the same "fallback equals today's value" contract every other
	 * --pcg-ba-* property already follows. An explicit --pcg-ba-height still wins over
	 * this whenever both are supplied, because aspect-ratio only resolves a dimension
	 * that is otherwise auto. */
	aspect-ratio: var(--pcg-ba-aspect-ratio, auto);
	border-radius: 12px;
	/* 260813-q6v Task 1 (D-01/D-02): matched navy elevation, identical to .pcg-gallery's own
	 * base rule in pcg-gallery.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)));
	overflow: hidden;
	--divider-width: 2px;
}

.pcg-ba img {
	display: block;
	width: 100%;
	/* Per DEC-2: the fixed height lands here as an absolute length reading the SAME
	 * custom property as the host above, never a percentage - height: 100% would resolve
	 * against the vendor shadow DOM's own content-derived height and circularly resolve
	 * back to auto, silently doing nothing. Do not "simplify" this to a percentage. */
	height: var(--pcg-ba-height, auto);
	/* fill is CSS's own initial value for object-fit, so omitting the height attribute
	 * reproduces today's render exactly. */
	object-fit: var(--pcg-ba-object-fit, fill);
	/* 260813-a5m Task 1 (D-01): declared here too, and not only on the host above, because
	 * the host's own height is content-derived when the ratio is set on it alone - the
	 * SAME mechanical reason the height declaration immediately above this comment is an
	 * absolute length rather than a percentage. Do not "simplify" either one away. */
	aspect-ratio: var(--pcg-ba-aspect-ratio, auto);
}

.pcg-ba__single {
	/* Box treatment for the single-image render mode (260809-tpm): the image loses the
	 * slider host's own box (.pcg-ba) when only one side resolves, so this rule supplies
	 * the same width/height/object-fit/radius contract directly on the <img> itself. */
	display: block;
	width: 100%;
	/* Phone-overflow insurance (also directly useful for Teil C's later mobile pass): never
	 * exceed the .pcg-ba-wrap container, no matter the image's natural size. */
	max-width: 100%;
	height: var(--pcg-ba-height, auto);
	object-fit: var(--pcg-ba-object-fit, fill);
	/* 260813-a5m Task 1 (D-01): same fallback contract as .pcg-ba/.pcg-ba img above - auto
	 * is CSS's own initial value, so an instance that never passes aspect_ratio renders
	 * unaffected here too, in the single-image render mode. */
	aspect-ratio: var(--pcg-ba-aspect-ratio, auto);
	border-radius: 12px;
	/* 260813-q6v Task 1 (D-01/D-02): same matched elevation as .pcg-ba above, so the
	 * single-image render mode is elevated identically to the two-image slider mode. */
	box-shadow: var(--pcg-media-shadow, var(--shadow-lg, 0 24px 60px rgba(20,36,64,.18)));
}

.pcg-ba__label {
	position: absolute;
	top: 18px;
	padding: 6px 13px;
	border-radius: 6px;
	letter-spacing: .1em;
	text-transform: uppercase;
	backdrop-filter: blur(3px);
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--color-bg);
	background-color: var(--pcg-ba-label-scrim);
	z-index: 2;
	/* Load-bearing, not polish: without this, a drag gesture begun with the pointer
	 * directly on top of a label corner is swallowed by the label instead of reaching
	 * the slider component underneath, and the slider does not move. */
	pointer-events: none;
}

.pcg-ba__label--before {
	left: 18px;
}

.pcg-ba__label--after {
	right: 18px;
}

.pcg-ba__handle {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background-color: var(--color-bg);
	box-shadow: var(--shadow-sm);
	/* Only the icon recolours (fill: currentColor on .pcg-ba__handle-icon below); the
	 * circle stays white via background-color above, left untouched. */
	color: var(--pcg-ba-handle-color, var(--color-navy));
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: ew-resize;
}

.pcg-ba__handle-icon {
	width: 24px;
	height: 24px;
	display: block;
	fill: currentColor;
}