/**
 * Simó Lorenzo Kit — Image Carousel Collage.
 *
 * Todos los valores configurables llegan como variables CSS desde los
 * controles de Elementor (o desde el JS, en el caso de --slk-columns).
 */

.slk-carousel {
	--slk-columns: 4;
	--slk-gap: 24px;
	--slk-radius: 12px;
	--slk-shadow: 40;             /* 0–100 */
	--slk-ratio: 4 / 5;
	--slk-transition: 700ms;
	--slk-rotate: 0deg;
	--slk-frame-bg: transparent;  /* fondo detrás de cada imagen (se ve con "Encajar entera") */
	--slk-img-max-w: none;        /* ancho máximo de cada imagen dentro de su hueco */
	--slk-fit: cover;             /* cover = recortar, contain = imagen entera (logos) */

	position: relative;
	width: 100%;
}

/*
 * El viewport recorta en horizontal (lo que queda fuera del carrusel, sin
 * generar scroll lateral en la página) pero NO en vertical, para que las
 * esquinas giradas y la sombra no se corten. El padding deja aire a las
 * esquinas giradas. Navegadores antiguos: overflow hidden como respaldo.
 */
.slk-carousel__viewport {
	position: relative;
	overflow: hidden;
	padding: 1.25rem 0.75rem;
}

/* Sin rotación no hacen falta márgenes laterales para las esquinas: las imágenes
   quedan alineadas con el resto del contenido (se mantiene el aire vertical para la sombra). */
.slk-carousel--flat .slk-carousel__viewport {
	padding-inline: 0;
}

@supports (overflow-x: clip) {
	.slk-carousel__viewport {
		overflow: visible;
		overflow-x: clip;
	}
}

.slk-carousel__track {
	position: relative; /* referencia para offsetLeft en el JS */
	display: flex;
	gap: var(--slk-gap);
	margin: 0;
	padding: 0;
	list-style: none;
	transition: transform var(--slk-transition) cubic-bezier(0.65, 0, 0.35, 1);
	will-change: transform;
}

.slk-carousel__slide {
	flex: 0 0 calc((100% - (var(--slk-columns) - 1) * var(--slk-gap)) / var(--slk-columns));
	min-width: 0;
	margin: 0;
	padding: 0;
}

.slk-carousel__frame {
	width: 100%;
	max-width: var(--slk-img-max-w);
	margin: 0 auto; /* centrada en su hueco cuando es más estrecha */
	aspect-ratio: var(--slk-ratio);
	overflow: hidden;
	border-radius: var(--slk-radius);
	transform: rotate(var(--slk-rotate));
	box-shadow:
		0 calc(var(--slk-shadow) * 0.25px) calc(var(--slk-shadow) * 0.6px)
		rgba(0, 0, 0, calc(var(--slk-shadow) * 0.004));
	background: var(--slk-frame-bg);
}

.slk-carousel__frame img,
.slk-carousel__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: var(--slk-fit);
	border-radius: 0;
	user-select: none;
	-webkit-user-drag: none;
}

@media (prefers-reduced-motion: reduce) {
	.slk-carousel__track {
		transition-duration: 0ms;
	}
}