/* Component: Locations map (hub) — Figma "Map" */

.spc-lmap {
	position: relative;
	display: flex;
	height: 560px;
	padding: 8px;
	border-radius: var(--spc-radius-lg);
	overflow: hidden;
	background: var(--sp-border);
	isolation: isolate;
}

.spc-lmap__canvas {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: var(--sp-border);
}

/* Soften OpenStreetMap tiles towards the site palette. */
.spc-lmap__canvas .leaflet-tile-pane {
	filter: saturate(0.75) sepia(0.12);
}

.spc-lmap__canvas .leaflet-control-attribution {
	font: 400 10px/1.4 var(--sp-font-body);
	background: rgba(255, 250, 239, 0.8);
}

.spc-lmap__card {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	/* A third of the map's inner width: 458.67 / 426.67 / 360px at 1920 / 1440 / 1240. */
	width: calc((100% - 16px) / 3);
	height: 100%;
	border-radius: var(--spc-radius);
	overflow: hidden;
	background: var(--sp-dark);
}

.spc-lmap__photo {
	position: absolute;
	inset: 0;
}

.spc-lmap__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.spc-lmap__body {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	padding: 8px;
	border-radius: var(--spc-radius);
	background: var(--sp-white);
}

.spc-lmap__texts {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 16px;
}

/* Pins (Leaflet divIcon) */
.spc-lmap .spc-pin-marker {
	background: none;
	border: 0;
}

.spc-pin {
	display: block;
	width: 44px;
	height: 56px;
	cursor: pointer;
}

.spc-pin__body {
	transition: fill var(--spc-duration) var(--spc-ease);
}

.spc-pin-marker.is-active .spc-pin__body {
	fill: var(--sp-black);
}

/* Group of nearby locations (script.js recluster). */
.spc-lmap .spc-pin-cluster {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 9999px;
	background: var(--sp-gold);
	box-shadow: 0 0 0 6px rgba(203, 172, 86, 0.3), 0 4px 12px rgba(12, 12, 12, 0.15);
	font: 700 16px/1 var(--sp-font-body);
	color: var(--sp-white);
	cursor: pointer;
	transition: background-color var(--spc-duration) var(--spc-ease), box-shadow var(--spc-duration) var(--spc-ease);
}

.spc-lmap .spc-pin-cluster:hover,
.spc-lmap .spc-pin-cluster:focus-visible {
	background: var(--sp-black);
	box-shadow: 0 0 0 6px rgba(12, 12, 12, 0.15), 0 4px 12px rgba(12, 12, 12, 0.15);
	outline: none;
}

.spc-pin-marker:focus-visible {
	outline: 2px solid var(--sp-gold);
	outline-offset: 2px;
	border-radius: 8px;
}

/* City name on pin hover (Leaflet tooltip, restyled to the site). */
.spc-lmap .leaflet-tooltip.spc-pin-tooltip {
	padding: 4px 12px;
	border: 0;
	border-radius: 9999px;
	background: var(--sp-black);
	box-shadow: none;
	font: 700 14px/1.4 var(--sp-font-body);
	color: var(--sp-cream);
}

.spc-lmap .leaflet-tooltip.spc-pin-tooltip::before {
	border-top-color: var(--sp-black);
}

/* Card content fades in when another location is chosen. */
.spc-lmap__card.is-changing .spc-lmap__photo img,
.spc-lmap__card.is-changing .spc-lmap__texts {
	animation: spc-lmap-fade var(--spc-duration) var(--spc-ease);
}

@keyframes spc-lmap-fade {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.spc-lmap__card.is-changing .spc-lmap__photo img,
	.spc-lmap__card.is-changing .spc-lmap__texts {
		animation: none;
	}
}

/* 1024 / 768: card takes half of the map. */
@media (max-width: 1239px) {
	.spc-lmap__card {
		width: calc((100% - 8px) / 2);
	}
}

/* 360: map on top, card below it. */
@media (max-width: 767px) {
	.spc-lmap {
		flex-direction: column;
		height: auto;
	}

	.spc-lmap::before {
		content: '';
		display: block;
		flex: 0 0 552px;
	}

	.spc-lmap__card {
		width: 100%;
		height: 544px;
	}

	.spc-lmap--no-mobile-card {
		height: 560px;
	}

	.spc-lmap--no-mobile-card::before,
	.spc-lmap--no-mobile-card .spc-lmap__card {
		display: none;
	}
}