.vrl-row.vrl-has-slideshow::before,
.vrl-section.vrl-has-slideshow::before {
	background-image: none !important;
}

.vrl-background-slideshow {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	border-radius: inherit;
	pointer-events: none;
	opacity: var(--vrl-bg-opacity, 1);
}

/* A slideshow's z-index:-1 keeps it painting behind real content by design -
   but that also means the Row/Section's own box normally intercepts every
   click in its area before it can ever reach the image beneath. With "Enlarge
   on click" on, this lets clicks pass straight through any of this element's
   own empty space (letting them reach the active slide's lightbox trigger
   underneath), while every real content child explicitly keeps its own normal
   interactivity - nothing about clicking an actual heading, button or link
   inside this block changes. */
/* A Section's own slideshow is nested two levels below the Row
   (.vrl-row > .vrl-row__inner > .vrl-section > .vrl-background-slideshow), and
   every one of those ancestors sits in normal (non-negative) stacking -
   directly in front of that Section's negatively-stacked image - so each one
   needs this same pass-through-but-restore-for-real-content treatment, one
   level at a time, all the way down. Each "restore" selector below explicitly
   excludes whatever the *next* level's own "none" rule targets - without that,
   the two rules would have equal specificity and whichever is written later
   would silently win, regardless of which outcome is actually wanted. */
.vrl-row.vrl-has-slideshow-lightbox {
	pointer-events: none;
}
.vrl-row.vrl-has-slideshow-lightbox > :not(.vrl-background-slideshow):not(.vrl-slideshow-controls):not(.vrl-row__inner) {
	pointer-events: auto;
}
.vrl-row.vrl-has-slideshow-lightbox > .vrl-row__inner {
	pointer-events: none;
}
.vrl-row.vrl-has-slideshow-lightbox > .vrl-row__inner > :not(.vrl-has-slideshow-lightbox) {
	pointer-events: auto;
}
.vrl-section.vrl-has-slideshow-lightbox {
	pointer-events: none;
}
.vrl-section.vrl-has-slideshow-lightbox > :not(.vrl-background-slideshow) {
	pointer-events: auto;
}

/* Descendant, not direct-child: a WebP delivery feature (or any other output filter)
   can wrap this <img> in a <picture>, so it isn't always a direct child of the layer.
   With "Enlarge on click" on, this class sits on a <figure> instead of the <img>
   itself (core's own lightbox markup requires a <figure><img> pair) - the rules
   below apply identically either way since they only test the class, not the tag. */
.vrl-background-slideshow .vrl-background-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 800ms ease;
}

.vrl-background-slideshow .vrl-background-slide.vrl-slide-lightbox {
	/* Core's own `.wp-lightbox-container` rule (position:relative; display:flex)
	   targets this same <figure> and can print after ours - WordPress enqueues it
	   from render time, which flushes late, in wp_footer. !important guarantees
	   our absolute, box-filling positioning always wins regardless of load order. */
	position: absolute !important;
	inset: 0 !important;
	display: block !important;
}

.vrl-background-slideshow .vrl-background-slide.is-active {
	opacity: 1;
}

/* Only the currently visible slide (and, being its child, its lightbox zoom
   button) should ever be reachable - every other slide stays inert underneath,
   matching the parent layer's own default pointer-events:none. */
.vrl-background-slideshow .vrl-background-slide.is-active.vrl-slide-lightbox {
	pointer-events: auto;
}

/* Core's own lightbox button is hover-only (opacity:0 until the image is
   hovered) - a reasonable default for a normal in-content image, but there's
   no reason to expect anyone hovers a decorative background hoping to find a
   hidden control. Keeping it visible here is what actually makes this
   discoverable at all, especially on touch devices with no hover concept. */
.vrl-background-slideshow .vrl-background-slide.is-active.vrl-slide-lightbox .lightbox-trigger {
	opacity: 1 !important;
}

/* The whole point of opening a lightbox is to see the original image clearly -
   but some other rule (this site's theme, or another plugin's generic image
   reset) was forcing every enlarged lightbox image to crop with object-fit:
   cover instead. Scoped to the lightbox overlay only, so nothing else on the
   page is affected - just the one place a cropped image never makes sense. */
.wp-lightbox-overlay .lightbox-image-container img {
	object-fit: contain !important;
}

/* Core computes --wp--lightbox-container-width/height and --wp--lightbox-
   image-width/height itself, from the clicked element's own on-page rendered
   size - for a background slide that's an absolutely-positioned fill element,
   that calculation doesn't reliably produce a good result, and was measured
   coming out small. Overriding the actual properties directly (not the CSS
   variables feeding them) sidesteps that calculation entirely: height is
   fixed at 85vh, width follows the image's own aspect ratio automatically
   since only one dimension is fixed on a replaced element like <img> - capped
   by max-width so an unusually wide/panoramic image still fits the viewport
   horizontally instead of overflowing it. */
.wp-lightbox-overlay .lightbox-image-container {
	width: auto !important;
	height: 85vh !important;
	max-width: 95vw !important;
}
.wp-lightbox-overlay .lightbox-image-container img {
	width: auto !important;
	height: 100% !important;
	max-width: 100% !important;
}

.vrl-background-slideshow img.vrl-background-slide,
.vrl-background-slideshow .vrl-background-slide .vrl-slide-media {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	margin: 0;
	border: 0;
	object-fit: var(--vrl-slide-fit, cover) !important;
	object-position: var(--vrl-bg-position, center center) !important;
}

.vrl-slideshow-controls {
	position: absolute;
	right: 12px;
	bottom: 12px;
	z-index: 2;
	display: flex;
	gap: 4px;
	padding: 4px;
	border-radius: 6px;
	background: #fff;
	color: #111;
}

.vrl-slideshow-controls[hidden],
.vrl-slideshow-controls button[hidden] {
	display: none;
}

.vrl-slideshow-controls button {
	min-width: 36px;
	min-height: 36px;
	padding: 6px 10px;
	border: 0;
	border-radius: 3px;
	background: #fff;
	color: #111;
	cursor: pointer;
	font: inherit;
	font-size: 14px;
	line-height: 1.2;
}

.vrl-slideshow-controls button:hover {
	background: #eee;
}

.vrl-slideshow-controls button:focus-visible {
	outline: 2px solid #111;
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.vrl-background-slideshow .vrl-background-slide {
		transition: none;
	}
}