.fairs-map-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.fairs-map-row.map-left {
	flex-direction: row-reverse;
}

.fairs-map-text {
	display: flex;
	flex-direction: column;
	gap: 1em;
	padding-top: 20px;
	padding-bottom: 20px;
}

.fairs-map {
	width: 100%;
	height: 500px;
	border-radius: 8px;
	margin-top: 20px;
	margin-bottom: 30px;
	z-index: 1;
}

/* Banner-fluid (text-with-image-style) variant */
.fairs-map-banner .fairs-map-banner-image {
	display: flex;
}

.fairs-map-banner .fairs-map-banner-image .fairs-map {
	width: 100%;
	height: 100%;
	min-height: 500px;
	margin: 0;
	border-radius: 0;
}

.fairs-map-banner .fairs-map-banner-text {
	display: flex;
	flex-direction: column;
	gap: 1em;
}

.fairs-map-popup {
	font-family: 'Proxima Nova Condensed', sans-serif;
	line-height: 1.6;
	min-width: 200px;
}

.fairs-map-popup strong {
	font-size: 16px;
	color: #333;
}

.fairs-map-popup .popup-subtitle {
	font-size: 13px;
	color: #666;
}

.fairs-map-popup .popup-place,
.fairs-map-popup .popup-date {
	font-size: 13px;
	color: #555;
}

.fairs-map-popup .popup-place i,
.fairs-map-popup .popup-date i {
	width: 16px;
	text-align: center;
	color: #f2d086;
}

.fairs-map-popup .btn {
	margin-top: 8px;
	display: inline-block;
	font-size: 13px;
	padding: 4px 12px;
}

/* Mobile / below-md: .col-md-6 has no width below 992px, and inside the
   flex .fairs-map-row that means the column collapses to its content size.
   The map inner div has width:100% which then resolves back to the column
   width — a circular 0. Stack the row vertically and force the columns to
   real 100% widths. */
@media (max-width: 991px) {
	.fairs-map-row,
	.fairs-map-row.map-left,
	.fairs-map-row.map-right {
		flex-direction: column !important;
	}
	.fairs-map-row > .col-md-6,
	.fairs-map-row > .fairs-map-text,
	.fairs-map-row > .fairs-map-col {
		width: 100% !important;
		flex: 0 0 auto;
	}
}

@media (max-width: 767px) {
	.fairs-map {
		height: 350px;
	}
	/* Override the desktop "display: flex; .banner-fluid > div { width: 50% }" combo so
	   the map container resolves to a real width/height on mobile instead of collapsing
	   to 0. */
	.fairs-map-banner .fairs-map-banner-image {
		display: block !important;
		width: 100% !important;
		height: 350px;
		min-height: 350px;
	}
	.fairs-map-banner .fairs-map-banner-image .fairs-map {
		width: 100%;
		height: 350px;
		min-height: 350px;
	}
}

/* Leaflet defensive overrides: the WordPress block-library style.min.css ships a
   global "img { max-width: 100% !important; width: auto }" rule which fights with
   Leaflet's per-tile inline width/height and breaks tile rendering. Also bring back
   the standard Leaflet layer sizing constraints. */
.leaflet-container img,
.leaflet-container img.leaflet-image-layer,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-image-layer,
.leaflet-tile-container img,
.leaflet-pane > canvas,
.leaflet-pane > svg,
.leaflet-zoom-box,
.leaflet-layer {
	max-width: none !important;
	max-height: none !important;
}