/* „Înainte / după”. Fără JavaScript și în editor: două imagini alăturate. */
.wp-block-group.is-style-inainte-dupa {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.is-style-inainte-dupa > figure {
	margin: 0;
}

.is-style-inainte-dupa > figure img {
	width: 100%;
	aspect-ratio: var(--ratio, 3 / 4);
	object-fit: cover;
	border-radius: 20px;
}

/* Cu JavaScript: o singură imagine, cu cursor. */
.wp-block-group.is-style-inainte-dupa.ab-compare {
	--pos: 50%;
	display: block;
	position: relative;
	overflow: hidden;
	aspect-ratio: var(--ratio, 4 / 3.3);
	border-radius: var(--radius, 24px);
	box-shadow: 0 30px 60px -36px rgba(42, 22, 44, .55);
}

.ab-compare > figure {
	position: absolute;
	inset: 0;
}

.ab-compare > figure img {
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	border-radius: 0;
}

.ab-compare > figure:nth-of-type(2) {
	clip-path: inset(0 0 0 var(--pos));
}

.ab-compare > figure figcaption {
	position: absolute;
	bottom: 14px;
	left: 14px;
	margin: 0;
	padding: 5px 12px;
	border-radius: 999px;
	background: rgba(42, 22, 44, .8);
	color: #fff;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
	font-size: 12px;
	line-height: 1.5;
}

.ab-compare > figure:nth-of-type(2) figcaption {
	right: 14px;
	left: auto;
}

.ab-compare-bar {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--pos);
	width: 2px;
	margin-left: -1px;
	background: #fdf8ee;
	pointer-events: none;
}

.ab-compare-bar::after {
	content: "‹ ›";
	position: absolute;
	top: 50%;
	left: 50%;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin: -22px 0 0 -22px;
	border-radius: 50%;
	background: #fdf8ee;
	color: #2a162c;
	font-weight: 600;
	letter-spacing: 2px;
	box-shadow: 0 4px 14px rgba(42, 22, 44, .35);
}

.ab-compare-range {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: ew-resize;
	/* Pe telefon, glisarea pe verticală derulează pagina, nu mută cursorul. */
	touch-action: pan-y;
}

.ab-compare-range:focus-visible + .ab-compare-bar::after {
	outline: 3px solid #4ead7c;
	outline-offset: 2px;
}

/* Planurile de pe Acasă sunt mai mici: colțuri și buton pe măsură. */
.ab-compare.is-small {
	--radius: 20px;
}

.ab-compare.is-small .ab-compare-bar::after {
	width: 36px;
	height: 36px;
	margin: -18px 0 0 -18px;
	font-size: 13px;
}