/*
 * Tira deslizable sin flechas. La etiqueta "cep-tira" se pone UNA vez, en el
 * contenedor que agrupa las tarjetas. Solo actúa en móvil: por encima de ese
 * ancho el contenedor mantiene las columnas que tenga puestas en Elementor.
 *
 * Medidas del diseño: tarjeta de 296 px (75 % del ancho de una pantalla de
 * 390) con 16 px de separación, y la siguiente tarjeta asomando para que se
 * vea que hay más. El deslizamiento con el dedo es el del propio navegador.
 */

@media (max-width: 767px) {
	.e-con.cep-tira.cep-tira,
	.cep-tira.cep-tira.cep-tira {
		--e-con-grid-template-columns: none !important;
		--e-con-grid-template-rows: none !important;

		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: min(296px, 76vw);
		gap: 16px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x proximity;
		scrollbar-width: none;          /* Firefox */
		-ms-overflow-style: none;       /* Edge antiguo */
	}

	/* Chrome, Safari: se oculta la barra pero el desplazamiento sigue activo */
	.e-con.cep-tira::-webkit-scrollbar,
	.cep-tira::-webkit-scrollbar {
		display: none;
	}

	.e-con.cep-tira > *,
	.cep-tira.cep-tira > * {
		width: auto;
		max-width: none;
		scroll-snap-align: start;
	}

	/*
	 * Dentro del editor de Elementor no se convierte en tira: así el cliente
	 * ve y edita las tarjetas una debajo de otra, sin tener que deslizar.
	 */
	body.elementor-editor-active .cep-tira.cep-tira.cep-tira {
		display: block;
		overflow-x: visible;
	}

	body.elementor-editor-active .cep-tira.cep-tira > * {
		margin-bottom: 16px;
	}
}