/**
 * Explore map — square cover/logo crop, clusters stay MyListing, mobile height.
 *
 * Listing cards use a fixed-height landscape .lf-item. aspect-ratio on the
 * inner background alone does nothing; the box itself must be square.
 */

.cts-explore .lf-item-container .lf-item,
.leaflet-popup-content .lf-item {
	position: relative;
	overflow: hidden;
	height: auto !important;
	min-height: 0 !important;
	aspect-ratio: 1 / 1;
}

.cts-explore .lf-item .lf-background,
.leaflet-popup-content .lf-item .lf-background {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100% !important;
	background-color: #111;
	background-size: contain !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
}

.cts-explore .lf-item .overlay,
.leaflet-popup-content .lf-item .overlay {
	opacity: 0.22 !important;
}

.cts-explore .lf-item .pc-slider,
.leaflet-popup-content .lf-item .pc-slider {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100% !important;
	background: #111;
}

.cts-explore .lf-item .pc-slider img,
.leaflet-popup-content .lf-item .pc-slider img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

.cts-explore .listing-preview .lf-avatar,
.leaflet-popup-content .lf-avatar {
	width: 52px !important;
	height: 52px !important;
	border-radius: 8px !important;
	background-size: contain !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
}

.finder-listings .listing-preview {
	cursor: pointer;
}

@media (max-width: 1199px) {
	.finder-container.mobile-tab-map {
		height: min(70dvh, calc(100dvh - 7rem)) !important;
		min-height: 280px;
	}

	.finder-container.mobile-tab-map .mobile-explore-head-top ~ .finder-map {
		height: calc(100% - 61px) !important;
		min-height: 220px;
	}

	.leaflet-popup-content {
		max-width: min(16rem, 78vw);
	}

	.leaflet-popup-content .lf-head-btn {
		white-space: normal;
	}
}

@media (max-width: 640px) {
	.finder-container.mobile-tab-map {
		height: min(62dvh, calc(100dvh - 8rem)) !important;
	}

	.leaflet-control-zoom a {
		width: 36px;
		height: 36px;
		line-height: 36px;
	}
}
