/* =================================================================
   INTERPLAY — Comparador "Antes / Después"
   -----------------------------------------------------------------
   Galería (bloque nativo) con el estilo "Antes / Después". El JS
   (before-after.js) la reestructura y añade .is-enhanced.

   Sin JS: se ve como una galería normal de dos imágenes (fallback).
   ================================================================= */

/* --- Fallback: mientras no hay JS, cuadrícula de dos columnas --- */
.wp-block-gallery.is-style-before-after {
	gap: var(--space-2);
}

/* --- Comparador ya montado --- */
.wp-block-gallery.is-style-before-after.is-enhanced {
	display: block;          /* anula la cuadrícula flex del bloque galería */
	width: 100%;
	margin-inline: auto;
}

/* Si la galería tuviera más de dos imágenes, las sobrantes no se muestran
   (no se borran del contenido: solo se ocultan). El segundo selector es
   necesario porque WordPress les aplica "display:flex" con más
   especificidad que el primero. */
.wp-block-gallery.is-style-before-after.is-enhanced > *:not(.ba__media) {
	display: none;
}
.wp-block-gallery.is-style-before-after.is-enhanced > figure.wp-block-image:not(.ba__media) {
	display: none;
}

.ba__media {
	--ba-pos: 50%;

	position: relative;
	overflow: hidden;
	touch-action: pan-y;     /* permite hacer scroll vertical arrastrando */
	cursor: ew-resize;
	user-select: none;
	-webkit-user-select: none;
	background: var(--color-pale-grey);   /* se ve mientras cargan las imágenes */
}

/* Las dos capas comparten caja: la de abajo marca la altura.
   Los selectores llevan las tres clases de la galería a propósito: así
   ganan a las reglas del bloque Galería de WordPress, que fija anchos
   por columnas a las figuras que contiene. */
.wp-block-gallery.is-style-before-after.is-enhanced .ba__pane {
	display: block;
	position: relative;
	width: 100%;
	max-width: 100%;
	flex: none;
	margin: 0;
}

.wp-block-gallery.is-style-before-after.is-enhanced .ba__pane--after img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
}

.wp-block-gallery.is-style-before-after.is-enhanced .ba__pane--before {
	position: absolute;
	inset: 0;
	/* Recorte por la derecha: solo se ve la parte izquierda hasta --ba-pos. */
	clip-path: inset(0 calc(100% - var(--ba-pos)) 0 0);
}

.wp-block-gallery.is-style-before-after.is-enhanced .ba__pane--before img {
	position: absolute;
	inset: 0;
	width: 100%;
	max-width: 100%;
	height: 100%;
	object-fit: cover;       /* encaja aunque las proporciones no sean idénticas */
}

/* --- Pies de foto: sirven de etiqueta ("render" / "built") --- */
.wp-block-gallery.is-style-before-after.is-enhanced .ba__pane figcaption {
	position: absolute;
	bottom: var(--space-3);
	left: auto;
	right: auto;
	top: auto;
	width: auto;
	max-height: none;
	margin: 0;
	padding: var(--space-1) var(--space-2);
	background: rgba(30, 30, 30, 0.75);
	color: var(--color-white);
	font: var(--font-footer-credit);
	letter-spacing: var(--ls-default);
	text-align: left;
	text-shadow: none;
	overflow: visible;
	pointer-events: none;
}

.wp-block-gallery.is-style-before-after.is-enhanced .ba__pane--before figcaption { left: var(--space-3); }
.wp-block-gallery.is-style-before-after.is-enhanced .ba__pane--after  figcaption { right: var(--space-3); }

/* --- Línea divisoria --- */
.ba__divider {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--ba-pos);
	width: 2px;
	margin-left: -1px;
	background: var(--color-white);
	pointer-events: none;
}

/* --- Manejador --- */
.ba__handle {
	position: absolute;
	top: 50%;
	left: var(--ba-pos);
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--color-black);
	color: var(--color-white);
	font-size: 22px;         /* controla el tamaño del icono (1em) */
	cursor: ew-resize;
	touch-action: none;
}

.ba__handle:focus-visible {
	outline: 2px solid var(--color-white);
	outline-offset: 3px;
}

/* Arrastrando, el movimiento debe ser inmediato (sin transición, para que
   no "persiga" al cursor). Con el teclado sí se acompaña suavemente. */
.ba__media:not(.is-dragging) .ba__divider,
.ba__media:not(.is-dragging) .ba__handle,
.ba__media:not(.is-dragging) .ba__pane--before {
	transition: left 0.12s ease-out, clip-path 0.12s ease-out;
}

/* --- Responsive --- */
@media (max-width: 600px) {
	.ba__handle {
		width: 44px;
		height: 44px;
		font-size: 18px;
	}
	.wp-block-gallery.is-style-before-after.is-enhanced .ba__pane figcaption {
		bottom: var(--space-2);
		font-size: 14px;
	}
	.wp-block-gallery.is-style-before-after.is-enhanced .ba__pane--before figcaption { left: var(--space-2); }
	.wp-block-gallery.is-style-before-after.is-enhanced .ba__pane--after  figcaption { right: var(--space-2); }
}