/* Radiolog Lightbox — shortcode [confronto]: "scorri per vedere la differenza". */

.rl-compare { margin-inline: 0; }
.rl-compare-stage {
	position: relative; overflow: hidden; border-radius: var(--radius); background: #000;
	user-select: none; -webkit-user-select: none; touch-action: pan-y; cursor: ew-resize;
}
.rl-compare-stage img { display: block; width: 100%; height: auto; margin: 0; pointer-events: none; }
.rl-compare.is-pixel img { image-rendering: pixelated; }
.rl-compare-a { position: absolute; inset: 0; height: 100% !important; object-fit: cover; clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); }

.rl-compare-line { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .35); pointer-events: none; }
.rl-compare-handle {
	position: absolute; top: 50%; left: 50%; width: 38px; height: 38px; margin: -19px 0 0 -19px;
	border: 2px solid #fff; border-radius: 50%; background: rgba(10, 14, 20, .55); backdrop-filter: blur(2px);
}
.rl-compare-handle::before, .rl-compare-handle::after {
	content: ""; position: absolute; top: 50%; width: 0; height: 0; margin-top: -5px;
	border-block: 5px solid transparent;
}
.rl-compare-handle::before { left: 7px; border-right: 6px solid #fff; }
.rl-compare-handle::after { right: 7px; border-left: 6px solid #fff; }

.rl-compare-tag {
	position: absolute; top: 10px; padding: 5px 8px; border-radius: 4px; background: rgba(10, 14, 20, .7); color: #fff;
	font: 500 11px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; pointer-events: none;
}
.rl-compare-tag.is-a { left: 10px; }
.rl-compare-tag.is-b { right: 10px; }

/* il cursore vero, per tastiera e lettori di schermo: invisibile ma focalizzabile */
.rl-compare-range { position: absolute; inset: auto 0 0; width: 100%; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.rl-compare-stage:has(.rl-compare-range:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }

.rl-compare-switch { display: flex; justify-content: center; gap: 6px; margin-top: 10px; }
.rl-compare-switch button {
	padding: 7px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg); color: var(--text);
	font: 500 12px/1 var(--font-mono); letter-spacing: .04em; cursor: pointer;
}
.rl-compare-switch button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.rl-compare-switch button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }