/**
 * Molo Horizontal Scroll
 * @author  molo&CO (https://moloandco.com)
 * @version 1.0.4
 *
 * Filosofía v1.0.4:
 *   - Respetar la altura, paddings, márgenes y gap configurados en Elementor.
 *   - No forzar ancho a los slides: usan su ancho natural según contenido.
 *   - Las clases utility (molo-hs-slide, molo-hs-slide-80...) son OPCIONALES.
 *   - Sticky centrado verticalmente para ver la sección anterior y siguiente.
 */

/* =========================================================
   ESTADO BASE
   ========================================================= */

.molo-hs {
	position: relative;
}

.molo-hs:not(.molo-hs-ready):not(.molo-hs-vertical) {
	overflow-x: hidden;
}

/* =========================================================
   WRAPPERS CREADOS POR JS
   ========================================================= */

.molo-hs-outer {
	position: relative;
	width: 100%;
}

.molo-hs-sticky {
	position: sticky;
	/* top y height las pone el JS dinámicamente (con la altura del .molo-hs) */
	width: 100%;
	max-width: 100vw;
	overflow: hidden;
	display: flex;
	align-items: stretch;
	justify-content: stretch;
}

/* =========================================================
   EL .molo-hs CUANDO ESTÁ ACTIVO
   Mantiene su padding, altura, gap, background... lo único
   que forzamos es que no envuelva en multilínea y se vea
   sin overflow recortado (eso lo hace el sticky).
   ========================================================= */

.molo-hs.molo-hs-ready,
.elementor .molo-hs.molo-hs-ready,
.e-con.molo-hs.molo-hs-ready {
	--flex-wrap: nowrap !important;
	--flex-direction: row !important;

	flex-wrap: nowrap !important;
	flex-direction: row !important;
	overflow: visible !important;
	height: 100% !important;
	width: 100% !important;
	max-width: 100% !important;
}

/* =========================================================
   EL TRACK
   Caso A — Container Boxed: el track real es .e-con-inner.
   Caso B — Container Full Width: el track es el propio .molo-hs
            (el JS le añade la clase .molo-hs-is-track).
   En ambos casos heredan el padding del Container.
   ========================================================= */

/* Caso A: Boxed */
.molo-hs.molo-hs-ready > .e-con-inner {
	--width: max-content !important;
	--container-widget-width: max-content !important;
	--content-width: max-content !important;
	--flex-wrap: nowrap !important;
	--flex-direction: row !important;

	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	width: max-content !important;
	max-width: none !important;
	min-width: 100% !important;
	height: 100% !important;

	will-change: transform;
	transform: translate3d( 0, 0, 0 );
	backface-visibility: hidden;
}

/* Caso B: Full Width */
.molo-hs.molo-hs-ready.molo-hs-is-track {
	--width: max-content !important;
	--container-widget-width: max-content !important;
	--content-width: max-content !important;

	width: max-content !important;
	max-width: none !important;
	min-width: 100% !important;

	will-change: transform;
	transform: translate3d( 0, 0, 0 );
	backface-visibility: hidden;
}

/* =========================================================
   SLIDES (hijos directos del track)
   Ancho natural por defecto, sin imposiciones.
   ========================================================= */

.molo-hs.molo-hs-ready > .e-con-inner > *,
.molo-hs.molo-hs-ready.molo-hs-is-track > * {
	/* Anulamos el --width: 100% que Elementor pone por defecto */
	--width: max-content;
	--container-widget-width: max-content;

	/* No estirar, no encoger: que el slide tenga su ancho propio */
	flex: 0 0 auto !important;
	flex-shrink: 0 !important;
	flex-grow: 0 !important;
}

/* =========================================================
   CLASES UTILITY OPCIONALES
   Solo se aplican si el usuario las añade explícitamente.
   Tienen mayor especificidad que el default y ganan.
   ========================================================= */

.molo-hs.molo-hs-ready > .e-con-inner > .molo-hs-slide,
.molo-hs.molo-hs-ready > .e-con-inner > .molo-hs-slide-100,
.molo-hs.molo-hs-ready.molo-hs-is-track > .molo-hs-slide,
.molo-hs.molo-hs-ready.molo-hs-is-track > .molo-hs-slide-100 {
	--width: 100vw !important;
	width: 100vw !important;
	min-width: 100vw !important;
	max-width: 100vw !important;
}

.molo-hs.molo-hs-ready > .e-con-inner > .molo-hs-slide-80,
.molo-hs.molo-hs-ready.molo-hs-is-track > .molo-hs-slide-80 {
	--width: 80vw !important;
	width: 80vw !important;
	min-width: 80vw !important;
	max-width: 80vw !important;
}

.molo-hs.molo-hs-ready > .e-con-inner > .molo-hs-slide-60,
.molo-hs.molo-hs-ready.molo-hs-is-track > .molo-hs-slide-60 {
	--width: 60vw !important;
	width: 60vw !important;
	min-width: 60vw !important;
	max-width: 60vw !important;
}

.molo-hs.molo-hs-ready > .e-con-inner > .molo-hs-slide-50,
.molo-hs.molo-hs-ready > .e-con-inner > .molo-hs-slide-half,
.molo-hs.molo-hs-ready.molo-hs-is-track > .molo-hs-slide-50,
.molo-hs.molo-hs-ready.molo-hs-is-track > .molo-hs-slide-half {
	--width: 50vw !important;
	width: 50vw !important;
	min-width: 50vw !important;
	max-width: 50vw !important;
}

.molo-hs.molo-hs-ready > .e-con-inner > .molo-hs-slide-third,
.molo-hs.molo-hs-ready.molo-hs-is-track > .molo-hs-slide-third {
	--width: 33.3333vw !important;
	width: 33.3333vw !important;
	min-width: 33.3333vw !important;
	max-width: 33.3333vw !important;
}

.molo-hs.molo-hs-ready > .e-con-inner > .molo-hs-slide-quarter,
.molo-hs.molo-hs-ready.molo-hs-is-track > .molo-hs-slide-quarter {
	--width: 25vw !important;
	width: 25vw !important;
	min-width: 25vw !important;
	max-width: 25vw !important;
}

/* =========================================================
   MODO VERTICAL (TABLET Y MOVIL)
   Por debajo del breakpoint NO hay scroll horizontal: la
   seccion se reordena en columna y fluye con el scroll
   normal de la pagina. Cada slide pasa a ancho completo.
   ========================================================= */

.molo-hs.molo-hs-vertical,
.elementor .molo-hs.molo-hs-vertical,
.e-con.molo-hs.molo-hs-vertical {
	--flex-direction: column !important;
	--flex-wrap: nowrap !important;

	display: flex !important;
	flex-direction: column !important;
	flex-wrap: nowrap !important;
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	overflow: visible !important;
	transform: none !important;
}

.molo-hs.molo-hs-vertical > .e-con-inner {
	--flex-direction: column !important;
	--flex-wrap: nowrap !important;

	display: flex !important;
	flex-direction: column !important;
	flex-wrap: nowrap !important;
	width: 100% !important;
	max-width: 100% !important;
	transform: none !important;
}

.molo-hs.molo-hs-vertical > *,
.molo-hs.molo-hs-vertical > .e-con-inner > * {
	--width: 100% !important;
	--container-widget-width: 100% !important;

	flex: 0 0 auto !important;
	flex-shrink: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
}

/* =========================================================
   PREFERENCIA: REDUCIR MOVIMIENTO
   ========================================================= */

@media ( prefers-reduced-motion: reduce ) {
	.molo-hs.molo-hs-ready {
		transition: none !important;
	}
}

/* =========================================================
   EDITOR DE ELEMENTOR
   ========================================================= */

body.elementor-editor-active .molo-hs,
body.elementor-editor-preview .molo-hs {
	--flex-wrap: nowrap !important;
	--flex-direction: row !important;

	flex-wrap: nowrap !important;
	flex-direction: row !important;
	overflow-x: auto !important;
	width: 100% !important;
	max-width: 100% !important;
	transform: none !important;
}

body.elementor-editor-active .molo-hs > .e-con-inner,
body.elementor-editor-preview .molo-hs > .e-con-inner {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	width: max-content !important;
	max-width: none !important;
}

body.elementor-editor-active .molo-hs > *,
body.elementor-editor-preview .molo-hs > *,
body.elementor-editor-active .molo-hs > .e-con-inner > *,
body.elementor-editor-preview .molo-hs > .e-con-inner > * {
	flex-shrink: 0 !important;
}