.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;
}

/* Custom fair markers: brand-red teardrop pin with the site logo. Replaces
   Leaflet's default blue marker image. */
.fairs-map-marker {
	background: transparent;
	border: none;
}

.fairs-map-marker-pin {
	position: absolute;
	left: 0;
	top: 0;
	width: 40px;
	height: 40px;
	box-sizing: border-box;
	background: #a54843;
	border: 2px solid #fff;
	border-radius: 50% 50% 50% 0;
	transform: rotate(-45deg);
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.35);
}

.fairs-map-marker-logo {
	position: absolute;
	left: 8px;
	top: 8px;
	/* !important defeats the WordPress "img { width: auto !important }" rule
	   noted above, which otherwise collapses the logo. */
	width: 24px !important;
	height: 24px !important;
	box-sizing: border-box;
	padding: 2px;
	border-radius: 50%;
	background: #fff;
	object-fit: contain;
}