/* ==========================================================================
   Map page — 2/3 list panel + 1/3 map
   ========================================================================== */

body.page-template-template-map .site-main {
	padding: 0;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.map-page {
	display: grid;
	grid-template-columns: 2fr 1fr;
	height: calc(100vh - var(--header-height));
	overflow: hidden;
	position: relative;
}

/* ── Left panel ── */
.map-panel {
	display: flex;
	flex-direction: column;
	background: var(--color-bg);
	border-right: 1px solid var(--color-border);
	overflow: hidden;
	z-index: 10;
}

/* ── Filter bar ── */
.map-filters {
	padding: var(--sp-4) var(--sp-5);
	border-bottom: 1px solid var(--color-border);
	background: var(--color-white);
	flex-shrink: 0;
	display: flex;
	gap: var(--sp-3);
	align-items: flex-end;
	flex-wrap: wrap;
}
.map-filters__search { flex: 1 1 200px; min-width: 0; }
.map-filter-input {
	width: 100%;
	padding: 9px var(--sp-3);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-md);
	font: inherit;
	font-size: var(--text-sm);
	background: var(--color-white);
	transition: border-color var(--ease);
}
.map-filter-input:focus { outline: none; border-color: var(--color-primary); }

.map-filters__row {
	display: contents; /* children participate directly in the flex row */
}
.map-filter-group { display: flex; flex-direction: column; gap: var(--sp-1); flex: 1 1 120px; min-width: 0; }
.map-filter-label {
	font-size: var(--text-xs);
	font-weight: 700;
	color: var(--color-grey);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
.map-filter-select {
	padding: 9px var(--sp-3);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-md);
	font: inherit;
	font-size: var(--text-sm);
	background: var(--color-white);
	cursor: pointer;
	transition: border-color var(--ease);
}
.map-filter-select:focus { outline: none; border-color: var(--color-primary); }

.map-filters__footer {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	flex-shrink: 0;
	padding-top: 18px; /* align with inputs */
}
.map-results-count {
	font-size: var(--text-xs);
	color: var(--color-grey);
	white-space: nowrap;
}

/* ── Listing grid ── */
.map-list {
	flex: 1;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: var(--sp-5);
}
.map-list__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--sp-4);
}
.map-list__loading {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--sp-16);
}
.map-spinner {
	display: block;
	width: 36px; height: 36px;
	border: 3px solid var(--color-border);
	border-top-color: var(--color-primary);
	border-radius: var(--radius-full);
	animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.map-no-results {
	grid-column: 1 / -1;
	text-align: center;
	padding: var(--sp-12) 0;
	color: var(--color-grey);
	font-size: var(--text-sm);
}

/* ── Map tile card ── */
.map-tile {
	background: var(--color-white);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	border: 1.5px solid var(--color-border);
	cursor: pointer;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
	display: flex;
	flex-direction: column;
	outline: none;
}
.map-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--color-primary); }
.map-tile.is-active { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(74,123,196,.2); }

.map-tile__thumb-wrap { position: relative; overflow: hidden; flex-shrink: 0; }
.map-tile__thumb {
	width: 100%;
	height: 150px;
	object-fit: cover;
	display: block;
	transition: transform .35s ease;
}
.map-tile:hover .map-tile__thumb { transform: scale(1.05); }
.map-tile__thumb--placeholder {
	height: 150px;
	background: linear-gradient(135deg, var(--color-primary-light), var(--color-accent-light));
}
.map-tile__badge {
	position: absolute;
	top: var(--sp-2); left: var(--sp-2);
	background: var(--color-accent);
	color: var(--color-dark);
	font-family: var(--font);
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 2px 8px;
	border-radius: var(--radius-full);
}

.map-tile__body { padding: var(--sp-3) var(--sp-4) var(--sp-4); flex: 1; display: flex; flex-direction: column; gap: var(--sp-1); }
.map-tile__title {
	font-family: var(--font-display);
	font-size: var(--text-sm);
	font-weight: 700;
	color: var(--color-dark);
	line-height: var(--leading-snug);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.map-tile__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: var(--text-xs);
	color: var(--color-grey);
	margin-top: auto;
	padding-top: var(--sp-2);
}
.map-tile__rating { display: flex; align-items: center; gap: 3px; font-size: var(--text-xs); }
.map-tile__price { font-weight: 700; color: var(--color-dark); font-size: var(--text-xs); }
.map-tile__address {
	font-size: var(--text-xs);
	color: var(--color-grey);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ── Map canvas ── */
.map-canvas {
	position: relative;
	z-index: 1;
}
.leaflet-container { height: 100%; width: 100%; }

/* Active pin */
.wt-map-pin__outer--active { background: var(--color-accent) !important; }

/* Popup */
.wt-popup { min-width: 200px; font-family: var(--font); }
.wt-popup__thumb { width: 100%; height: 110px; object-fit: cover; border-radius: var(--radius-sm); margin-bottom: var(--sp-2); display: block; }
.wt-popup__cat { font-size: var(--text-xs); font-weight: 700; color: var(--color-dark); background: var(--color-accent); padding: 2px 8px; border-radius: var(--radius-full); display: inline-block; margin-bottom: var(--sp-2); }
.wt-popup__title { font-size: var(--text-sm); font-weight: 700; color: var(--color-dark); margin-bottom: var(--sp-2); line-height: var(--leading-snug); }
.wt-popup__meta { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--text-xs); color: var(--color-grey); margin-bottom: var(--sp-3); }
.wt-popup__link { display: block; text-align: center; padding: 7px var(--sp-4); background: var(--color-primary); color: var(--color-white); border-radius: var(--radius-md); font-size: var(--text-xs); font-weight: 700; text-decoration: none; transition: background var(--ease); }
.wt-popup__link:hover { background: var(--color-primary-dark); color: var(--color-white); }

/* Leaflet overrides */
.leaflet-control-attribution { font-size: 10px !important; background: rgba(255,255,255,.8) !important; backdrop-filter: blur(4px); }
.leaflet-control-zoom a { font-family: var(--font) !important; color: var(--color-dark) !important; border-color: var(--color-border) !important; }
.leaflet-control-zoom a:hover { background: var(--color-primary-light) !important; }

/* ── Mobile panel toggle ── */
.map-panel-toggle {
	display: none;
	position: absolute;
	bottom: var(--sp-5);
	left: 50%;
	transform: translateX(-50%);
	z-index: 20;
	background: var(--color-primary);
	color: var(--color-white);
	border-radius: var(--radius-full);
	padding: var(--sp-3) var(--sp-6);
	font-size: var(--text-sm);
	font-weight: 700;
	gap: var(--sp-2);
	align-items: center;
	box-shadow: var(--shadow-lg);
	white-space: nowrap;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
	.map-page { grid-template-columns: 3fr 2fr; }
	.map-list__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
	.map-page { grid-template-columns: 1fr; grid-template-rows: 1fr; }
	.map-panel {
		position: absolute;
		inset: 0;
		z-index: 20;
		transform: translateY(0);
		transition: transform .3s ease;
	}
	.map-panel.is-hidden { transform: translateY(-100%); }
	.map-canvas { grid-row: 1; grid-column: 1; }
	.map-panel-toggle { display: flex; }
	.map-filters { flex-wrap: wrap; }
	.map-list__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
	.map-list__grid { grid-template-columns: 1fr; }
	.map-filters { flex-direction: column; align-items: stretch; }
}