/*
 * Mapa de ciutats — CSS aïllat (no passa per style.scss / WP-SCSS a propòsit):
 * aquest mapa només es fa servir en 1 pàgina del lloc, així que es carrega
 * només allà (veure isom_mapa_ciutats_front_assets a inc/mapa-ciutats.php).
 */

.mapa-ciutats {
	position: relative;
	width: 100%;
	max-width: 100%;
	aspect-ratio: 769 / 748;
	/* Els labels es dimensionen en `cqw` (unitats relatives a l'amplada
	   REAL del mapa, no del viewport) perquè s'escalin de manera contínua
	   a mesura que el contenidor s'estreny — així no cal triar un breakpoint
	   fix on "es deixen de solapar"; sempre s'ajusten en qualsevol amplada,
	   estigui el mapa a pantalla completa o dins d'una columna estreta. */
	container-type: inline-size;
}

.mapa-ciutats__fons,
.mapa-ciutats__pins {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.mapa-ciutats__fons svg {
	display: block;
	width: 100%;
	height: 100%;
}

.mapa-ciutats__pins {
	pointer-events: none;
}

.map-line {
	fill: none;
	stroke: #5E4D74;
	stroke-width: 0.9px;
	pointer-events: all;
	transition: stroke-width 0.12s ease;
}

.map-dot {
	fill: #5E4D74;
	cursor: pointer;
	pointer-events: all;
	transform-box: fill-box;
	transform-origin: center;
	transition: transform 0.12s ease;
}

.map-dot--gran {
	fill: #5E4D74;
}

.map-label {
	position: absolute;
	transform: translate(-50%, -50%);
	white-space: nowrap;
	cursor: crosshair;
	/* opac (no transparent): el punt final de la línia cau al centre del pill
	   (veure transform de dalt) — cal un fons opac perquè el tram de línia
	   que quedaria per sota desaparegui darrere l'etiqueta, com al disseny
	   original, en lloc de travessar-la com un ratllat. */
	background: #F9F8F7;
	border: 1px solid #5E4D74;
	border-radius: 999px;
	color: #5E4D74;
	font-size: clamp(7px, 1.6cqw, 12px);
	line-height: 1;
	padding: clamp(4px, 1.2cqw, 9px) clamp(6px, 2cqw, 15px);
	transition: background-color 0.12s ease, color 0.12s ease;
}

.map-label.is-hover {
	background-color: #5E4D74;
	color: #F9F8F7;
}

.map-dot.is-hover {
	transform: scale(1.5);
}

.map-line.is-hover {
	stroke-width: 1.6px;
}