/*
 * Capa compartida de carruseles (`js/aim-slider.js`).
 * Sólo resuelve viewport, track y el ancho de diapositiva en mobile.
 * El diseño de cada tarjeta sigue viviendo en el CSS de su bloque o pantalla.
 */

/* Controles ocultos cuando el bloque no necesita carrusel. */
[data-aim-slider-hidden="true"] {
	display: none !important;
}

.aim-slider__viewport {
	touch-action: pan-y;
}

/* El recorte sólo hace falta cuando el track se desplaza. */
.is-aim-slider-loop .aim-slider__viewport {
	overflow: hidden;
	cursor: grab;
	-webkit-user-select: none;
	user-select: none;
}

.is-aim-slider-dragging .aim-slider__viewport {
	cursor: grabbing;
}

.is-aim-slider-loop .aim-slider__track {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	width: max-content;
	will-change: transform;
}

/*
 * Los clones del loop deben responder al `:hover` (son las cards que asoman en los
 * bordes), así que conservan `pointer-events`. Se les quita el foco por tabindex y
 * el árbol accesible por `aria-hidden` desde el JS, no ocultándolos del puntero.
 */

/* Sin Swiper, las diapositivas no deben encogerse dentro del track flexible. */
.is-aim-slider-loop .aim-slider__track > .aim-slider__slide {
	flex-shrink: 0;
}

.is-aim-slider-loop .aim-slider__track img,
.is-aim-slider-loop .aim-slider__track a {
	-webkit-user-drag: none;
}

.is-aim-slider-loop .aim-slider__track img {
	-webkit-user-select: none;
	user-select: none;
}

/*
 * Mobile: una sola diapositiva y un pedazo de la siguiente a la vista.
 * El ancho llega en píxeles desde el motor (`--aim-slider-slide-width`) para no
 * depender de porcentajes dentro de un track con `width: max-content`.
 * El `!important` es necesario porque varias pantallas fijan anchos propios.
 */
.is-aim-slider-mobile-single .aim-slider__track .aim-slider__slide {
	flex: 0 0 var(--aim-slider-slide-width) !important;
	width: var(--aim-slider-slide-width) !important;
	min-width: 0 !important;
	max-width: none !important;
}

@media (prefers-reduced-motion: reduce) {
	.is-aim-slider-loop .aim-slider__track {
		will-change: auto;
	}
}