/*
 * Flow Padel Vertical Gallery
 * Todo está bajo el prefijo .fpvg- (no se carga el CSS de Swiper: las clases del carrusel se renombraron).
 * Personalizable con variables CSS, p. ej. en "Apariencia > Personalizar > CSS adicional":
 *   .fpvg-gallery { --fpvg-thumb-size: 88px; --fpvg-accent: #e4002b; }
 */
.fpvg-gallery {
	--fpvg-thumb-size: 72px;
	--fpvg-gap: 12px;
	--fpvg-accent: #111;
	--fpvg-radius: 4px;
	--fpvg-bg: transparent;
	position: relative;
	display: grid;
	grid-template-columns: var(--fpvg-thumb-size) minmax(0, 1fr);
	gap: var(--fpvg-gap);
	align-items: start;
	box-sizing: border-box;
}
.fpvg-gallery *,
.fpvg-gallery *::before,
.fpvg-gallery *::after {
	box-sizing: border-box;
}
.fpvg-gallery.fpvg-no-thumbs {
	grid-template-columns: minmax(0, 1fr);
}
.fpvg-gallery.fpvg-no-thumbs .fpvg-thumbs {
	display: none;
}

/* Miniaturas (columna izquierda, misma altura que la foto principal; scroll interno si hay muchas) */
.fpvg-thumbs {
	position: relative;
	align-self: stretch;
	min-height: 0;
	visibility: hidden; /* se muestra cuando el carrusel está listo: sin saltos ni botones inertes */
}
.fpvg-ready .fpvg-thumbs {
	visibility: visible;
}
.fpvg-thumbs-inner {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	overflow-y: auto;
	overflow-x: hidden;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding: 2px;
}
.fpvg-thumbs-inner::-webkit-scrollbar {
	display: none;
}
.fpvg-gallery .fpvg-thumb {
	flex: 0 0 auto;
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	margin: 0;
	padding: 0;
	border: 2px solid transparent;
	border-radius: var(--fpvg-radius);
	background: var(--fpvg-bg);
	box-shadow: none;
	cursor: pointer;
	overflow: hidden;
	opacity: 0.6;
	transition: opacity 0.2s, border-color 0.2s;
	-webkit-appearance: none;
	appearance: none;
}
.fpvg-gallery .fpvg-thumb:hover,
.fpvg-gallery .fpvg-thumb.is-active {
	opacity: 1;
}
.fpvg-gallery .fpvg-thumb.is-active {
	border-color: var(--fpvg-accent);
}
.fpvg-gallery .fpvg-thumb:focus-visible {
	outline: 2px solid var(--fpvg-accent);
	outline-offset: 2px;
}
.fpvg-gallery .fpvg-thumb-img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	pointer-events: none;
	-webkit-user-drag: none;
}

/* Ventana principal: altura fija por proporción => no hay saltos al cambiar de variación */
.fpvg-viewport {
	position: relative;
	width: 100%;
	aspect-ratio: var(--fpvg-ratio, 4 / 5);
	overflow: hidden;
	z-index: 1;
	border-radius: var(--fpvg-radius);
	background: var(--fpvg-bg);
	user-select: none;
	-webkit-user-select: none;
	touch-action: pan-x pinch-zoom; /* el carrusel gestiona el gesto vertical (táctil y ratón); el zoom de pellizco sigue disponible */
}
/* Solo si el swipe táctil se desactiva por configuración (touchSwipe=false): la página hace scroll sobre la foto */
.fpvg-page-scroll .fpvg-viewport {
	touch-action: pan-y pinch-zoom;
}

/* Mecánica del carrusel (equivalente mínimo al CSS de Swiper, con nuestras clases) */
.fpvg-wrapper {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	box-sizing: content-box;
	transition-property: transform;
	transform: translate3d(0, 0, 0);
}
.fpvg-slide {
	position: relative;
	display: block;
	flex-shrink: 0;
	width: 100%;
	height: 100%;
	transition-property: transform;
}
.fpvg-gallery .fpvg-img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: contain;
	pointer-events: none;
	-webkit-user-drag: none;
}
.fpvg-viewport.fpvg-vertical {
	cursor: grab;
}
.fpvg-viewport.fpvg-vertical:active {
	cursor: grabbing;
}

/* Entrada suave solo cuando cambia el conjunto de fotos */
@keyframes fpvg-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
.fpvg-swap .fpvg-viewport,
.fpvg-swap .fpvg-thumbs-inner {
	animation: fpvg-in 0.25s ease-out;
}
@media (prefers-reduced-motion: reduce) {
	.fpvg-swap .fpvg-viewport,
	.fpvg-swap .fpvg-thumbs-inner {
		animation: none;
	}
	.fpvg-gallery .fpvg-thumb {
		transition: none;
	}
}

@media (max-width: 600px) {
	.fpvg-gallery {
		--fpvg-thumb-size: 52px;
		--fpvg-gap: 8px;
	}
}