.wbp-map-page__hero {
	padding: var(--wbp-space-2xl) 0;
	background: linear-gradient(180deg, rgba(249, 248, 243, 0.3), var(--wbp-cream)),
		var(--wbp-green-deep);
	color: var(--wbp-white);
	text-align: center;
}

.wbp-map-page__hero h1 {
	color: var(--wbp-white);
}

.wbp-map-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wbp-space-md);
	margin-top: var(--wbp-space-xl);
}

.wbp-map-stat {
	background: var(--wbp-white);
	color: var(--wbp-text);
	border-radius: var(--wbp-radius-md);
	padding: var(--wbp-space-lg);
	box-shadow: var(--wbp-shadow-sm);
}

.wbp-map-stat strong {
	display: block;
	font-family: var(--wbp-font-serif);
	font-size: 1.75rem;
	color: var(--wbp-green-deep);
}

.wbp-map-filters {
	background: var(--wbp-white);
	border-radius: var(--wbp-radius-md);
	padding: var(--wbp-space-md);
	box-shadow: var(--wbp-shadow-sm);
	margin-top: calc(-1 * var(--wbp-space-xl));
	position: relative;
	z-index: 2;
}

.wbp-map-filters__row {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr auto;
	gap: 0.75rem;
	align-items: end;
}

.wbp-map-layout {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: var(--wbp-space-lg);
	margin-top: var(--wbp-space-xl);
	min-height: 560px;
}

.wbp-map-container {
	border-radius: var(--wbp-radius-md);
	overflow: hidden;
	border: 1px solid var(--wbp-border);
	min-height: 560px;
	background: var(--wbp-beige);
}

#wbp-map {
	width: 100%;
	height: 100%;
	min-height: 560px;
}

.wbp-map-pin span {
	display: block;
	width: 28px;
	height: 28px;
	background: var(--wbp-green-deep);
	border: 3px solid var(--wbp-white);
	border-radius: 50% 50% 50% 0;
	transform: rotate(-45deg);
	box-shadow: 0 2px 6px rgba(27, 48, 34, 0.35);
}

.wbp-mini-map {
	width: 100%;
	min-height: 160px;
	border: 1px solid var(--wbp-border);
	z-index: 1;
}

.wbp-map-result.is-highlight {
	outline: 2px solid var(--wbp-green-primary);
}

.wbp-map-list {
	display: flex;
	flex-direction: column;
	gap: var(--wbp-space-md);
	max-height: 560px;
	overflow-y: auto;
}

@media (max-width: 900px) {
	.wbp-map-stats {
		grid-template-columns: 1fr;
	}

	.wbp-map-filters__row {
		grid-template-columns: 1fr;
	}

	.wbp-map-layout {
		grid-template-columns: 1fr;
	}

	.wbp-map-list {
		max-height: none;
	}
}