.ct-before-after-block {
	--ct-before-after-position: 50%;
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.ct-before-after-block__layers {
	display: grid;
}

.ct-before-after-block__side {
	grid-area: 1 / 1;
	min-width: 0;
	margin: 0;
}

.ct-before-after-block__side:nth-child(2) {
	z-index: 1;
	clip-path: inset(0 0 0 var(--ct-before-after-position));
}

.ct-before-after-block__side > :first-child { margin-top: 0; }
.ct-before-after-block__side > :last-child { margin-bottom: 0; }
.ct-before-after-block__side .wp-block-image,
.ct-before-after-block__side .wp-block-video,
.ct-before-after-block__side figure { margin: 0; }
.ct-before-after-block__side img,
.ct-before-after-block__side video { display: block; width: 100%; height: 100%; object-fit: cover; }

.ct-before-after-block__side::after {
	content: attr(data-comparison-label);
	position: absolute;
	top: 1rem;
	z-index: 2;
	padding: .45rem .7rem;
	background: rgba(12, 30, 42, .82);
	color: #fff;
	font-family: var(--wp--preset--font-family--sans, sans-serif);
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.ct-before-after-block__side:first-child::after { left: 1rem; }
.ct-before-after-block__side:nth-child(2)::after { right: 1rem; }
.ct-before-after-block__side[data-comparison-label=""]::after { display: none; }

.ct-before-after-block__handle {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--ct-before-after-position);
	z-index: 4;
	width: 3rem;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--ink, #0c1e2a);
	transform: translateX(-50%);
	cursor: ew-resize;
	touch-action: none;
}
.ct-before-after-block__handle::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 2px;
	background: #fff;
	box-shadow: 0 0 0 1px rgba(12, 30, 42, .15);
}
.ct-before-after-block__handle span {
	position: relative;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 2px solid #fff;
	border-radius: 50%;
	background: var(--wp--preset--color--paper, #fbf8f1);
	box-shadow: 0 3px 16px rgba(12, 30, 42, .25);
	font-size: 1.1rem;
}
.wp-site-blocks .ct-before-after-block__handle:focus {
	outline: none;
}
.ct-before-after-block__handle:focus-visible span { outline: 3px solid var(--wp--preset--color--river-2, #1e8bb5); outline-offset: 3px; }

/* Editing uses two clear work areas; the frontend supplies the overlay. */
.editor-styles-wrapper .ct-before-after-block--editor { overflow: visible; }
.editor-styles-wrapper .ct-before-after-block--editor > .block-editor-block-list__layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.editor-styles-wrapper .ct-before-after-block__editor-side { height: 100%; padding: .75rem; border: 1px solid var(--wp--preset--color--line, #d9d2c2); }
.editor-styles-wrapper .ct-before-after-block__editor-label { display: block; margin-bottom: .65rem; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; }
.editor-styles-wrapper .ct-before-after-block--editor .ct-before-after-block__side { clip-path: none; }
.editor-styles-wrapper .ct-before-after-block--editor .ct-before-after-block__side::after { display: none; }

@media (max-width: 600px) {
	.editor-styles-wrapper .ct-before-after-block--editor > .block-editor-block-list__layout { grid-template-columns: 1fr; }
}