/**
 * INM Maps — style map, popupów i karty (zgodne z INM Design System).
 *
 * Tokeny var(--inm-*) pochodzą z inm-design-tokens (inm-core-plugin);
 * każdy krytyczny kolor ma fallback, więc mapa jest czytelna także
 * bez załadowanych tokenów.
 */

/* --- Karta wokół mapy (wariant statyczny design systemu) --- */

.inm-maps-card {
	background: var(--inm-card-bg, linear-gradient(135deg, #ffffff 0%, #f8fdf4 100%));
	border: var(--inm-card-border, 1.5px solid rgba(114, 207, 48, 0.45));
	border-radius: var(--inm-card-radius, 16px);
	padding: var(--inm-card-padding, 24px);
	box-shadow: var(--inm-card-shadow, 0 2px 12px rgba(114, 207, 48, 0.08));
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.inm-maps-card:hover {
	border-color: var(--inm-green-soft, rgba(114, 207, 48, 0.45));
	box-shadow: 0 3px 16px var(--inm-green-glow, rgba(114, 207, 48, 0.08));
}

/* --- Kontener mapy --- */

.inm-map {
	position: relative;
	width: 100%;
	max-width: 100%;
	border-radius: var(--inm-card-radius-sm, 12px);
	overflow: hidden;
	/* Leaflet ustawia z-index na panach — trzymamy mapę pod sticky headerami. */
	z-index: 0;
	background: var(--inm-bg-muted, #e8e8e8);
}

.inm-map .inm-map-data {
	display: none;
}

/* --- Pusty stan (tryb FacetWP: brak wyników dla filtrów) --- */

.inm-map--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 120px;
	padding: 24px;
}

.inm-maps-empty {
	margin: 0;
	font-family: var(--inm-font, 'Poppins', sans-serif);
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--inm-label, #999999);
	text-align: center;
}

/* --- Markery INM (SVG) --- */

.inm-map .inm-maps-marker {
	filter: drop-shadow(0 2px 3px rgba(51, 51, 51, 0.35));
}

/* --- Popupy --- */

.leaflet-container {
	font-family: var(--inm-font, 'Poppins', sans-serif);
}

.inm-map .leaflet-popup-content-wrapper {
	border-radius: var(--inm-card-radius-sm, 12px);
	box-shadow: var(--inm-card-shadow, 0 2px 12px rgba(114, 207, 48, 0.08));
}

.inm-map .leaflet-popup-content {
	margin: 14px 16px;
	line-height: 1.45;
}

.inm-maps-popup {
	font-family: var(--inm-font, 'Poppins', sans-serif);
	font-size: 14px;
	color: var(--inm-text, #444444);
	max-height: 240px;
	overflow-y: auto;
}

.inm-map.leaflet-container a.inm-maps-popup__title,
.inm-maps-popup__title {
	display: block;
	color: var(--inm-green-dark, #5a9e2e);
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
}

.inm-map.leaflet-container a.inm-maps-popup__title:hover,
.inm-maps-popup__title:hover {
	color: var(--inm-green, #72cf30);
	text-decoration: underline;
}

.inm-maps-popup__place {
	font-family: var(--inm-font, 'Poppins', sans-serif);
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	color: var(--inm-label, #999999);
	margin-bottom: 4px;
}

.inm-maps-popup__address,
.inm-maps-popup__meta {
	font-size: 12px;
	font-weight: 500;
	color: var(--inm-meta, #aaaaaa);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-top: 2px;
}

.inm-maps-popup__count {
	display: inline-block;
	background: var(--inm-green-pill-bg, rgba(114, 207, 48, 0.12));
	color: var(--inm-green-dark, #5a9e2e);
	padding: 2px 10px;
	border-radius: 20px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin: 4px 0 2px;
}

.inm-maps-popup__event {
	border-top: 1px solid var(--inm-green-line, rgba(114, 207, 48, 0.2));
	padding-top: 8px;
	margin-top: 8px;
}

.inm-maps-popup__event:first-of-type {
	border-top: none;
	padding-top: 4px;
	margin-top: 4px;
}

.inm-map.leaflet-container a.inm-maps-popup__external,
.inm-maps-popup__external {
	display: inline-block;
	color: var(--inm-green-dark, #5a9e2e);
	font-size: 12px;
	font-weight: 600;
	text-decoration: none;
	margin-top: 4px;
}

.inm-map.leaflet-container a.inm-maps-popup__external:hover,
.inm-maps-popup__external:hover {
	color: var(--inm-green, #72cf30);
	text-decoration: underline;
}

/* --- Plakietka "Dotknij, aby aktywować mapę" (tylko dotyk) --- */

.inm-maps-touch-guard {
	position: absolute;
	inset: 0;
	z-index: 500; /* nad panami Leaflet (400), pod popupami (700) */
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding: 0 0 14px;
	background: transparent;
	border: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.inm-maps-touch-guard__label {
	display: inline-block;
	background: var(--inm-bg-white, #ffffff);
	color: var(--inm-green-dark, #5a9e2e);
	border: 1.5px solid var(--inm-green-soft, rgba(114, 207, 48, 0.45));
	border-radius: 20px;
	padding: 6px 16px;
	font-family: var(--inm-font, 'Poppins', sans-serif);
	font-size: 13px;
	font-weight: 600;
	box-shadow: var(--inm-card-shadow, 0 2px 12px rgba(114, 207, 48, 0.08));
	pointer-events: none;
}

/* --- Dostępność / wygoda dotyku --- */

/* Większe strefy dotyku kontrolek zoomu na ekranach dotykowych. */
@media (pointer: coarse) {
	.inm-map .leaflet-control-zoom a {
		width: 40px;
		height: 40px;
		line-height: 40px;
		font-size: 20px;
	}
}

/* --- Mobile --- */

@media (max-width: 768px) {
	.inm-maps-card {
		border-radius: var(--inm-card-radius-sm, 12px);
		padding: var(--inm-card-padding-sm, 20px 16px 16px);
	}

	/* Mapa nie może zajmować całego ekranu telefonu —
	   użytkownik zawsze widzi kontekst strony. */
	.inm-map {
		max-height: 75vh;
	}

	.inm-maps-popup {
		font-size: 13px;
		max-height: 190px;
	}
}