/* [twentytwenty] before/after comparison (acw-site). Without JS (.is-ready absent), both images stack. */
.acw-compare { margin: 1.5em auto; width: 100%; }
.acw-compare img { display: block; max-width: 100%; height: auto; }
.acw-compare__label { display: none; }

.acw-compare.is-ready { position: relative; overflow: hidden; --pos: 50%; touch-action: pan-y; }
.acw-compare.is-ready img { width: 100%; margin: 0; }
/* The before image stays in normal flow and sets the height (posts from the block editor
   have no width/height attributes); the after image is laid over it and clipped. */
.acw-compare.is-ready .acw-compare__after {
	position: absolute; inset: 0; height: 100%; object-fit: cover; clip-path: inset(0 0 0 var(--pos));
}
.acw-compare.is-ready::after { /* divider line + handle */
	content: ""; position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px;
	background: #fff; box-shadow: 0 0 4px rgba(0,0,0,.5); pointer-events: none;
}
.acw-compare__range {
	position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
	opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none;
}
.acw-compare__range:focus-visible { opacity: .01; }
.acw-compare.is-ready:focus-within::after { width: 5px; background: #ffd400; }
.acw-compare.is-ready .acw-compare__label {
	display: block; position: absolute; top: .6em; padding: .15em .5em; font: 600 13px/1.4 sans-serif;
	color: #fff; background: rgba(0,0,0,.55); border-radius: 3px; pointer-events: none;
}
.acw-compare__label--before { left: .6em; }
.acw-compare__label--after { right: .6em; }