/*
 * Turismo Serón – Widgets Dinámicos
 * Estilos base (estructurales). Los valores configurables desde Elementor
 * (colores, tamaños, espaciados, tipografía...) se aplican mediante los
 * "selectors" de cada control y se generan en el CSS propio de la página,
 * no en este archivo. Prefijo turismoswp- en todos los selectores.
 */

/* ---------- Widget 1: Rutas Relacionadas ---------- */

.turismoswp-related-routes {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	max-width: 100%;
}

.turismoswp-related-route {
	max-width: 100%;
}

.turismoswp-related-route-link {
	display: flex;
	align-items: center;
	width: 100%;
	max-width: 100%;
	text-decoration: none;
	box-sizing: border-box;
}

.turismoswp-related-route-link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.turismoswp-related-route-image-wrap {
	flex: 0 0 auto;
	overflow: hidden;
	display: block;
}

.turismoswp-related-route-image-wrap img,
.turismoswp-related-route-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.turismoswp-related-route-text {
	flex: 1 1 auto;
	min-width: 0;
}

.turismoswp-related-route-title {
	display: block;
	margin: 0;
	overflow-wrap: break-word;
}

.turismoswp-related-route-arrow {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.turismoswp-related-route-arrow svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* ---------- Widget 2: Tipos de Ruta ---------- */

.turismoswp-route-types {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: 100%;
}

.turismoswp-route-type {
	flex: 0 1 auto;
	max-width: 100%;
	box-sizing: border-box;
}

.turismoswp-route-type-link {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-decoration: none;
	width: 100%;
	box-sizing: border-box;
}

.turismoswp-route-type-link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.turismoswp-route-type-image-wrap {
	overflow: hidden;
	display: block;
	box-sizing: border-box;
}

.turismoswp-route-type-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.turismoswp-route-type-name {
	display: block;
	text-align: center;
	overflow-wrap: break-word;
}