/*
 * Before/after comparison slider.
 *
 * The markup lives in post content as a saved block pattern
 * (`dental/before-after-slider`, authored under the dentista26 theme), so this
 * theme only has to style and drive it — there is no block to register. The
 * original stylesheet hardcoded dentista26's blue (#2c5aa0); this port uses the
 * design-system tokens so it follows light/dark like everything else.
 */

.wp-block-dental-before-after {
	margin: 0 auto;
}

.dental-slider-container {
	position: relative;
	width: 100%;
	margin: 0 auto;
	overflow: hidden;
	border-radius: var(--radius-media);
	box-shadow: var(--shadow-lg);
	background: var(--surface-card);
}

.dental-slider-wrapper {
	position: relative;
	width: 100%;
	height: 400px;
	overflow: hidden;
}

.before-image,
.after-image {
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.before-image { left: 0;  clip-path: inset(0 50% 0 0); }
.after-image  { right: 0; clip-path: inset(0 0 0 50%); }

.slider-control {
	position: absolute;
	top: 0;
	left: 50%;
	width: 4px;
	height: 100%;
	background: var(--brand-ink);
	cursor: ew-resize;
	transform: translateX(-50%);
	z-index: 10;
	transition: width .2s ease, background .2s ease;
}

.slider-control:hover,
.slider-control:focus-visible {
	width: 6px;
	background: var(--brand-ink-hover);
}

.slider-control:focus-visible {
	outline: none;
	box-shadow: var(--ring-focus);
}

.slider-handle {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 40px;
	height: 40px;
	background: var(--surface-card);
	border: 3px solid var(--brand-ink);
	border-radius: var(--radius-pill);
	cursor: ew-resize;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--shadow-md);
	transition: background .2s ease, transform .2s ease;
}

.slider-handle::before {
	content: "\2194";
	font-size: 18px;
	font-weight: var(--weight-bold);
	color: var(--brand-ink);
	transition: color .2s ease;
}

.slider-handle:hover {
	background: var(--brand-ink);
	transform: translate(-50%, -50%) scale(1.1);
}

.slider-handle:hover::before { color: var(--on-brand); }

.before-label,
.after-label {
	position: absolute;
	top: var(--space-6);
	padding: var(--space-2) var(--space-5);
	background: var(--surface-card);
	color: var(--text-strong);
	font-weight: var(--weight-bold);
	font-size: var(--text-sm);
	border-radius: var(--radius-pill);
	box-shadow: var(--shadow-sm);
	z-index: 5;
}

.before-label { left: var(--space-6); }
.after-label  { right: var(--space-6); }

@media (max-width: 768px) {
	.dental-slider-wrapper { height: 300px; }

	.before-label,
	.after-label {
		font-size: var(--text-xs);
		padding: var(--space-1) var(--space-3);
		top: var(--space-4);
	}

	.before-label { left: var(--space-4); }
	.after-label  { right: var(--space-4); }
}

@media (prefers-reduced-motion: reduce) {
	.slider-control,
	.slider-handle,
	.slider-handle::before {
		transition: none;
	}
}