.eba-content-hidden {
	display: none !important;
}

/* Our own wrapper (not envirabox's .envirabox-slide--current) so this only
   affects our before/after slides, never envirabox's other content types.
   It's now the actual direct child of .envirabox-slide, so it - not
   .eba-compare - is what has to override the conflicting
   .envirabox-slide>* rule (assets/css/envira.css). Sized to the full slide
   so .eba-compare's margin:auto below has the whole slide to center within. */
.envirabox-slide .eba-compare-wrap {
	display: flex;
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0 1.5rem;
	background: none;
	box-sizing: border-box;
}

/* .eba-compare no longer sits directly under .envirabox-slide (the wrapper
   above does), so it's no longer matched by .envirabox-slide>* at all - this
   selector just needs to reach it through the wrapper, which it still does
   since descendant selectors match at any depth. */
.envirabox-slide .eba-compare {
	display: inline-flex;
	vertical-align: middle;
	flex-direction: column;
	align-items: stretch;
	justify-content: center;
	gap: 0;
	max-width: 100%;
	margin: auto;
	/* max-height is set directly in JS (eba-lightbox.js) as 100vh minus the
	   measured height of .envirabox-caption-wrap / .envirabox-thumbs-bottom,
	   recalculated on resize - not a fixed CSS value. */
	padding: 20px;
	box-sizing: border-box;
	background: none;
	overflow-y: auto;
}

.eba-compare-col {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 1 1 0;
	min-width: 0;
}

.eba-compare-image-wrap {
	position: relative;
	display: inline-block;
	max-width: 100%;
	line-height: 0;
}

.eba-compare-image {
	max-width: 100%;
	/* Stacked layout (default): two images share the 90vh budget on .eba-compare,
	   so each is capped at ~40vh (minus its share of the reserved bottom
	   space), leaving room for the gap/padding/captions. */
	max-height: calc( 40vh - ( var( --eba-reserved-bottom, 0px ) / 2 ) );
	height: auto;
	width: auto;
	display: block;
}

/* When the before image's dimensions are known, both images in the pair are
   forced into a shared box (sized from that ratio) and crop to fill it,
   rather than each rendering at its own natural ratio. */
.eba-compare-image-wrap--ratio {
	max-height: calc( 40vh - ( var( --eba-reserved-bottom, 0px ) / 2 ) );
}

.eba-compare-image-wrap--ratio .eba-compare-image {
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	object-fit: cover;
}

/* Portrait pairs (before image taller than wide) are always side-by-side,
   at every viewport width, so they always get the full (row-layout) height
   budget rather than the stacked one - regardless of the breakpoint below.
   Specificity note: must outrank .envirabox-slide .eba-compare (0,2,0)'s
   flex-direction:column, which otherwise wins on the same element - hence
   the compound .eba-compare.eba-compare--portrait (0,3,0) here rather than
   the modifier class alone. */
.envirabox-slide .eba-compare.eba-compare--portrait {
	flex-direction: row;
}

.eba-compare--portrait .eba-compare-image {
	max-height: calc( 70vh - var( --eba-reserved-bottom, 0px ) );
}

.eba-compare--portrait .eba-compare-image-wrap--ratio {
	max-height: calc( 70vh - var( --eba-reserved-bottom, 0px ) );
}

.eba-compare-label {
	position: absolute;
	left: 0;
	bottom: 0;
	margin: 0;
	padding: 16px;
	font-family: 'Lato', sans-serif;
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #fff;
	background: rgba( 0, 0, 0, 0.55 );
}

.eba-compare-caption {
	margin-top: 4px;
	font-size: 13px;
	color: #ccc;
	text-align: center;
}

/* Landscape and square pairs: stacked below WordPress/Gutenberg's own 782px
   admin breakpoint, side-by-side from it upward. Portrait pairs ignore this
   entirely - see .eba-compare--portrait above, which forces row at every
   width. */
@media ( min-width: 782px ) {
	.envirabox-slide .eba-compare {
		flex-direction: row;
	}

	.envirabox-slide .eba-compare-wrap {
		padding: 0 3rem;
	}

	/* Side-by-side layout: images sit next to each other, not stacked,
	   so each can use the full height budget. */
	.eba-compare-image {
		max-height: calc( 70vh - var( --eba-reserved-bottom, 0px ) );
	}

	.eba-compare-image-wrap--ratio {
		max-height: calc( 70vh - var( --eba-reserved-bottom, 0px ) );
	}
}