/**
 * PectusVac — Before / After Image Slider
 * pectus-before-after.css  v1.1
 *
 * FIX v1.1: usa clip-path:inset() invece di width sul container before.
 * Entrambe le immagini occupano sempre l'intera area dello slider —
 * il ritaglio è puramente visivo e non altera le dimensioni dell'img.
 *
 * Segue il Design System PectusVac v1.0.
 *
 * @package PectusVac
 * @since   1.1.0
 */

/* ═══════════════════════════════════════════════════════════════════
   WRAPPER
   ═══════════════════════════════════════════════════════════════════ */

.pba-wrapper {
	display:          block;
	width:            100%;
	user-select:      none;
	-webkit-user-select: none;
}

/* ═══════════════════════════════════════════════════════════════════
   SLIDER CONTAINER
   aspect-ratio impostato inline via PHP: style="aspect-ratio:16/9"
   ═══════════════════════════════════════════════════════════════════ */

.pba-slider {
	position:   relative;
	width:      100%;
	overflow:   hidden;
	cursor:     col-resize;
	background: var(--warm, #F2F0EB);
	/* border-radius: 0 — Design System PectusVac */
}

/* ═══════════════════════════════════════════════════════════════════
   ENTRAMBE LE IMMAGINI
   Stessa dimensione, stesso posizionamento assoluto.
   Il clip avviene solo con clip-path — nessuna width ridotta.
   ═══════════════════════════════════════════════════════════════════ */

.pba-after,
.pba-before {
	position: absolute;
	inset:    0;
	width:    100%;
	height:   100%;
}

.pba-after img,
.pba-before img {
	display:           block;
	width:             100%;
	height:            100%;
	object-fit:        cover;
	object-position:   center;
	pointer-events:    none;
	user-select:       none;
	-webkit-user-select: none;
	-webkit-user-drag: none;
}

/* AFTER — strato base, sempre visibile */
.pba-after {
	z-index: 1;
}

/* BEFORE — strato superiore, ritagliato con clip-path
   JS aggiorna: before.style.clipPath = `inset(0 ${100 - pct}% 0 0)` */
.pba-before {
	z-index:    2;
	will-change: clip-path;
}

/* ═══════════════════════════════════════════════════════════════════
   ETICHETTE
   ═══════════════════════════════════════════════════════════════════ */

.pba-label {
	position:       absolute;
	top:            16px;
	z-index:        3;
	padding:        5px 12px;
	font-family:    var(--sans, 'DM Sans', sans-serif);
	font-size:      0.72rem;
	font-weight:    500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color:          #fff;
	background:     rgba(6, 13, 22, 0.65);
	pointer-events: none;
	white-space:    nowrap;
}

.pba-label--before { left:  12px; }
.pba-label--after  { right: 12px; }

/* ═══════════════════════════════════════════════════════════════════
   HANDLE — linea + cerchio
   ═══════════════════════════════════════════════════════════════════ */

.pba-handle {
	--pba-handle-color: var(--teal, #1A9080);
	--pba-handle-size:  48px;

	position:       absolute;
	top:            0;
	bottom:         0;
	z-index:        10;
	transform:      translateX(-50%);
	display:        flex;
	flex-direction: column;
	align-items:    center;
	pointer-events: all;
	touch-action:   none;
	outline:        none;
	will-change:    left;
}

.pba-handle:focus-visible .pba-circle {
	outline:        3px solid var(--pba-handle-color);
	outline-offset: 3px;
}

.pba-line {
	flex:       1;
	width:      2px;
	background: var(--pba-handle-color);
}

.pba-circle {
	position:        absolute;
	top:             50%;
	left:            50%;
	transform:       translate(-50%, -50%);
	width:           var(--pba-handle-size);
	height:          var(--pba-handle-size);
	border-radius:   50%;
	background:      var(--pba-handle-color);
	color:           #fff;
	display:         flex;
	align-items:     center;
	justify-content: center;
	flex-shrink:     0;
	box-shadow:      0 2px 12px rgba(0, 0, 0, 0.28);
	cursor:          col-resize;
	transition:      transform 0.15s ease, box-shadow 0.15s ease;
}

.pba-slider:hover .pba-circle,
.pba-dragging .pba-circle {
	transform:  translate(-50%, -50%) scale(1.08);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.38);
}

.pba-arrows {
	width:   18px;
	height:  18px;
	fill:    currentColor;
	display: block;
}

.pba-dragging,
.pba-dragging * {
	cursor: col-resize !important;
}

/* ═══════════════════════════════════════════════════════════════════
   CAPTION & DISCLAIMER
   ═══════════════════════════════════════════════════════════════════ */

.pba-caption {
	margin:      10px 0 0;
	font-family: var(--sans, 'DM Sans', sans-serif);
	font-size:   0.84rem;
	font-style:  italic;
	color:       var(--muted, #6B7A85);
	line-height: 1.6;
	text-align:  center;
}

.pba-disclaimer {
	margin:      6px 0 0;
	font-family: var(--sans, 'DM Sans', sans-serif);
	font-size:   0.7rem;
	color:       var(--muted, #6B7A85);
	line-height: 1.6;
	text-align:  center;
}

/* ═══════════════════════════════════════════════════════════════════
   PLACEHOLDER builder
   ═══════════════════════════════════════════════════════════════════ */

.pba-placeholder {
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	justify-content: center;
	gap:             12px;
	padding:         56px 24px;
	background:      var(--warm, #F2F0EB);
	border:          1px dashed var(--border, #E4E0D8);
	text-align:      center;
}

.pba-placeholder-icon {
	font-size:   2.4rem;
	color:       var(--muted, #6B7A85);
	line-height: 1;
}

.pba-placeholder p {
	font-family: var(--sans, 'DM Sans', sans-serif);
	font-size:   0.84rem;
	color:       var(--muted, #6B7A85);
	margin:      0;
}

/* ═══════════════════════════════════════════════════════════════════
   SCREEN READER ONLY
   ═══════════════════════════════════════════════════════════════════ */

.pba-sr-only {
	position:    absolute;
	width:       1px;
	height:      1px;
	padding:     0;
	margin:      -1px;
	overflow:    hidden;
	clip:        rect(0, 0, 0, 0);
	white-space: nowrap;
	border:      0;
}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 600px) {
	.pba-label {
		font-size: 0.65rem;
		padding:   4px 10px;
		top:       10px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pba-circle { transition: none; }
}