/**
 * simplydwell/communities-map — "Find Your Neighborhood" map section (Figma).
 *
 * A Google Map fills the section; an eyebrow + two-tone heading and a city filter are
 * overlaid centered at the top, with a scrollable rail of community cards down the
 * right. Lexend throughout; brand orange #EA6E24 / gold #E2BB61 gradient; dark pills
 * #1F242E; card chrome #F6F4EE on #C8C8C8 hairlines (active = #EA6E24).
 *
 * Desktop: map full-bleed with overlays. Tablet (<=1024px): the map becomes a
 * fixed-height block, the header still overlays its top, and the cards move to a
 * horizontal scroll row beneath. Mobile (<=600px): the header is lifted out of the
 * overlay and stacked ABOVE the map (3-row grid) so nothing overlaps the map.
 *
 * Without a Google Maps API key the section gets .sd-cmapb--static: the map area shows
 * a neutral styled placeholder while the city filter + cards stay fully interactive.
 */

.sd-cmapb {
	position: relative;
	width: 100%;
	/* Taller map so more markers AND more of the right-hand community rail are visible
	   without scrolling (the headline was crowding access to the communities). */
	min-height: clamp( 540px, 46vw, 640px );
	overflow: hidden;
	background: #FAF8F5;
	font-family: 'Lexend', sans-serif;
	box-sizing: border-box;
}

.sd-cmapb * {
	box-sizing: border-box;
}

/* ── Map canvas (fills the section) ──────────────────────────────────────────── */
.sd-cmapb__map {
	position: absolute;
	inset: 0;
	z-index: 0;
}

/* Styled placeholder when no API key is configured. */
.sd-cmapb--static .sd-cmapb__map {
	background-color: #eceee9;
	background-image:
		linear-gradient( 0deg, rgba( 31, 36, 46, 0.04 ) 1px, transparent 1px ),
		linear-gradient( 90deg, rgba( 31, 36, 46, 0.04 ) 1px, transparent 1px );
	background-size: 48px 48px;
}

/* ── Custom zoom controls ────────────────────────────────────────────────────── */
.sd-cmapb__zoom {
	position: absolute;
	top: 20px;
	left: 20px;
	z-index: 3;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 6px;
	background: transparent;
	border-radius: 8px;
	box-shadow: none;
}

.sd-cmapb__zoom-btn {
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #ddd;
	border-radius: 4px;
	background: #fff;
	color: #1f242e;
	font-size: 32px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.2s ease;
}

.sd-cmapb__zoom-btn:hover {
	background: #f5f5f5;
}

/* Hide the custom controls in the static fallback (nothing to zoom). */
.sd-cmapb--static .sd-cmapb__zoom {
	display: none;
}

/* ── Overlay header (eyebrow + heading + city pills) ─────────────────────────── */
.sd-cmapb__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	/* Tighter top band so the headline covers less of the map's upper markers. */
	padding: clamp( 18px, 2.6vw, 26px ) clamp( 16px, 4vw, 40px );
	pointer-events: none; /* let map drag through; re-enable on the controls */
}

.sd-cmapb__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	/* Was a flat 32px (two gaps = 64px of vertical space); tightened so the eyebrow,
	   heading and city pills form a more compact cluster and free up the map below. */
	gap: clamp( 14px, 2.2vw, 24px );
	width: min( 794px, 100% );
	text-align: center;
}

.sd-cmapb__eyebrow {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.17em;
	text-transform: uppercase;
	color: #ea6e24;
}

.sd-cmapb__heading {
	margin: 0;
	font-size: clamp( 1.75rem, 3.4vw, 40px );
	font-weight: 700;
	line-height: 1.05;
	color: #1f242e;
}

.sd-cmapb__grad {
	background: linear-gradient( 90deg, #ea6e24 0%, #e2bb61 100% );
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

.sd-cmapb__cities {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px 24px;
	pointer-events: auto;
}

.sd-cmapb__city {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 36px;
	padding: 8px 16px;
	background: #1f242e;
	border: 0;
	border-radius: 20px;
	color: #fff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	line-height: 20px;
	cursor: pointer;
	transition: background 0.25s ease, transform 0.2s ease;
}

.sd-cmapb__city:hover,
.sd-cmapb__city:focus-visible {
	background: #ea6e24;
	transform: translateY( -2px );
	outline: none;
}

.sd-cmapb__city[aria-pressed="true"] {
	background: #ea6e24;
}

/* ── Community cards rail (right) ─────────────────────────────────────────────── */
.sd-cmapb__cards {
	position: absolute;
	top: 0;
	right: clamp( 12px, 1.5vw, 18px );
	bottom: 0;
	z-index: 2;
	width: 180px;
	margin: 0;
	padding: 16px 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 16px;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: #ea6e24 transparent;
}

.sd-cmapb__cards::-webkit-scrollbar {
	width: 6px;
}

.sd-cmapb__cards::-webkit-scrollbar-thumb {
	background: #ea6e24;
	border-radius: 3px;
}

.sd-cmapb__card {
	flex: none;
	width: 180px;
}

.sd-cmapb__card.is-hidden {
	display: none;
}

.sd-cmapb__card-link {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	border: 0.5px solid #c8c8c8;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.sd-cmapb__card:hover .sd-cmapb__card-link,
.sd-cmapb__card.is-active .sd-cmapb__card-link,
.sd-cmapb__card-link:focus-visible {
	border-color: #ea6e24;
	box-shadow: 0 4px 12px rgba( 31, 36, 46, 0.15 );
	outline: none;
}

.sd-cmapb__card-media {
	position: relative;
	display: flex;
	align-items: flex-end;
	height: 78px;
	padding: 8px;
	background: #1f242e center/cover no-repeat;
}

/* Darkening overlay so the white LOCATION label stays legible on any photo. */
.sd-cmapb__card-media::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba( 0, 0, 0, 0.15 );
}

.sd-cmapb__card-loc {
	position: relative;
	z-index: 1;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 15px;
}

.sd-cmapb__card-body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 8px;
	background: #f6f4ee;
}

.sd-cmapb__card-name {
	color: #1f242e;
	font-size: 10px;
	font-weight: 700;
	line-height: 15px;
}

.sd-cmapb__card-price {
	color: #ea6e24;
	font-size: 10px;
	font-weight: 700;
	line-height: 15px;
}

.sd-cmapb__card-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #ea6e24;
	font-size: 12px;
	font-weight: 700;
	line-height: 16px;
	transition: gap 0.15s ease;
}

.sd-cmapb__card:hover .sd-cmapb__card-cta {
	gap: 12px;
}

.sd-cmapb__notice {
	margin: 0;
	padding: 24px;
	font-family: 'Lexend', sans-serif;
	color: #888;
	text-align: center;
}

/* ── Marker popup card (opens above a marker on click) ───────────────────────── */
/*
 * Built on a google.maps.OverlayView (view.js): the container is positioned at the
 * marker's pixel, and the bubble floats above it via translate(-50%, -100%). A small
 * tail points down at the marker. The bubble fades + scales in/out with .is-open.
 */
.sd-cmapb__popup {
	position: absolute;
	z-index: 5;
	width: 0;
	height: 0;
}

.sd-cmapb__popup-bubble {
	position: absolute;
	left: 0;
	top: 0; /* with translateY(-100%) this lands the bubble's bottom on the marker */
	width: 248px;
	max-width: 78vw;
	transform: translate( -50%, calc( -100% - 24px ) ) scale( 0.94 );
	transform-origin: bottom center;
	display: flex;
	flex-direction: column;
	background: #f6f4ee;
	border: 0.5px solid #c8c8c8;
	border-radius: 10px;
	box-shadow: 0 12px 32px rgba( 31, 36, 46, 0.22 );
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.24s ease, transform 0.24s cubic-bezier( 0.2, 0.8, 0.3, 1 ), visibility 0s linear 0.24s;
}

.sd-cmapb__popup.is-open .sd-cmapb__popup-bubble {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translate( -50%, calc( -100% - 24px ) ) scale( 1 );
	transition: opacity 0.24s ease, transform 0.24s cubic-bezier( 0.2, 0.8, 0.3, 1 ), visibility 0s;
}

/* Downward tail pointing at the marker. */
.sd-cmapb__popup-bubble::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -9px;
	width: 18px;
	height: 18px;
	background: #f6f4ee;
	border-right: 0.5px solid #c8c8c8;
	border-bottom: 0.5px solid #c8c8c8;
	transform: translateX( -50% ) rotate( 45deg );
	border-bottom-right-radius: 3px;
}

.sd-cmapb__popup-close {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba( 31, 36, 46, 0.55 );
	color: #fff;
	cursor: pointer;
	transition: background 0.2s ease;
}

.sd-cmapb__popup-close:hover,
.sd-cmapb__popup-close:focus-visible {
	background: #ea6e24;
	outline: none;
}

.sd-cmapb__popup-media {
	position: relative;
	display: flex;
	align-items: flex-end;
	height: 120px;
	padding: 10px;
	background: #1f242e center/cover no-repeat;
}

.sd-cmapb__popup-media::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba( 0, 0, 0, 0.15 );
}

.sd-cmapb__popup-loc {
	position: relative;
	z-index: 1;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 15px;
	letter-spacing: 0.06em;
}

.sd-cmapb__popup-body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 12px;
}

.sd-cmapb__popup-name {
	color: #1f242e;
	font-size: 15px;
	font-weight: 700;
	line-height: 20px;
}

.sd-cmapb__popup-price {
	color: #ea6e24;
	font-size: 13px;
	font-weight: 700;
	line-height: 18px;
}

.sd-cmapb__popup-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 2px;
	color: #ea6e24;
	font-size: 13px;
	font-weight: 700;
	line-height: 18px;
	text-decoration: none;
	transition: gap 0.15s ease;
}

.sd-cmapb__popup-cta:hover,
.sd-cmapb__popup-cta:focus-visible {
	gap: 12px;
	outline: none;
}

/* ── Focus state: while a popup is open, clear the rail + overlay header ──────────
 *
 * The popup lives inside the map's pane (a lower stacking context), so the right-side
 * card rail and the overlay header are faded out — both to focus attention on the
 * selected community and so neither paints over the popup. Closing the popup restores
 * them with the same smooth transition. (On tablet/mobile the rail collapses instead;
 * see the media query below.)
 */
.sd-cmapb__cards,
.sd-cmapb__overlay {
	transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s;
}

.sd-cmapb.is-popup-open .sd-cmapb__cards {
	opacity: 0;
	visibility: hidden;
	transform: translateX( 16px );
	transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
	pointer-events: none;
}

.sd-cmapb.is-popup-open .sd-cmapb__overlay {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

/* ── Tablet / mobile: stack the map and move cards to a scroll row beneath ────── */
@media ( max-width: 1024px ) {
	.sd-cmapb {
		/* Single source of truth for the stacked map height — the map, the overlay
		   and the zoom control all read it, so they never drift out of sync (that
		   drift was the mobile zoom bug). Overridden at <=600px below. */
		--sd-map-h: 480px;
		min-height: 0;
		display: flex;
		flex-direction: column;
	}
	.sd-cmapb__map {
		position: relative;
		inset: auto;
		width: 100%;
		height: var( --sd-map-h );
	}
	.sd-cmapb__overlay {
		position: absolute;
		inset: 0 0 auto 0;
		height: var( --sd-map-h );
		align-items: flex-start;
	}
	/* Zoom: pinned to the bottom-left of the map at any map height. `top` sits on the
	   map's bottom edge, then the control shifts up by its own height + 16px — no magic
	   numbers, so it stays correctly placed when the map shrinks on phones. */
	.sd-cmapb__zoom {
		top: var( --sd-map-h );
		left: 16px;
		bottom: auto;
		transform: translateY( calc( -100% - 16px ) );
	}
	.sd-cmapb__cards {
		position: static;
		width: 100%;
		flex-direction: row;
		align-items: stretch; /* every card stretches to the tallest -> equal heights */
		gap: 16px;
		padding: 16px clamp( 16px, 4vw, 24px );
		max-height: 480px;
		overflow-x: auto;
		overflow-y: visible;
		background: #1f242e;
		transition: opacity 0.3s ease, max-height 0.35s ease, padding 0.3s ease, visibility 0s;
	}
	/* Consistent card size + aligned content regardless of name / price length:
	   the link fills the stretched card, the body grows, the name clamps to two
	   lines, and the CTA is pinned to the bottom so every card's CTA lines up. */
	.sd-cmapb__card {
		width: 180px;
	}
	.sd-cmapb__card-link {
		height: 100%;
	}
	.sd-cmapb__card-body {
		flex: 1 1 auto;
	}
	.sd-cmapb__card-name {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	.sd-cmapb__card-cta {
		margin-top: auto;
	}
	/* Below the map the rail is a row — collapse it (not just fade) so no empty bar shows. */
	.sd-cmapb.is-popup-open .sd-cmapb__cards {
		transform: none;
		max-height: 0;
		padding-top: 0;
		padding-bottom: 0;
		overflow: hidden;
		transition: opacity 0.3s ease, max-height 0.35s ease, padding 0.3s ease, visibility 0s linear 0.35s;
	}
}

@media ( max-width: 600px ) {
	/* Mobile: lift the header OUT of the map overlay and stack it ABOVE the map, so the
	   map gets the full block to itself and nothing overlaps. The section becomes a
	   3-row grid (header / map / cards). The zoom shares the map's grid cell and anchors
	   to its bottom-left, so it stays correctly placed no matter how tall the header is.
	   Desktop and tablet (the >600px / <=1024px rules above) are unchanged. */
	.sd-cmapb {
		--sd-map-h: 340px;
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: auto var( --sd-map-h ) auto;
	}
	/* Header: now a normal-flow row above the map (was an absolute overlay). */
	.sd-cmapb__overlay {
		grid-row: 1;
		grid-column: 1;
		position: static;
		inset: auto;
		height: auto;
		align-items: center;
		pointer-events: auto;
		/* Header is a normal-flow row above the map here, so its height directly delays
		   reaching the community cards — keep it compact. */
		padding: 18px clamp( 16px, 4vw, 40px );
	}
	.sd-cmapb__map {
		grid-row: 2;
		grid-column: 1;
		height: 100%;
	}
	/* Zoom: same cell as the map, pinned to its bottom-left (no section-relative math). */
	.sd-cmapb__zoom {
		grid-row: 2;
		grid-column: 1;
		position: static;
		justify-self: start;
		align-self: end;
		margin: 0 0 16px 16px;
		top: auto;
		left: auto;
		bottom: auto;
		transform: none;
	}
	.sd-cmapb__cards {
		grid-row: 3;
		grid-column: 1;
	}
	/* Header sits above the map, so it no longer needs to hide when a popup opens. */
	.sd-cmapb.is-popup-open .sd-cmapb__overlay {
		opacity: 1;
		visibility: visible;
	}
	.sd-cmapb__header {
		gap: 14px;
	}
	.sd-cmapb__cities {
		gap: 10px 12px;
	}
	.sd-cmapb__city {
		padding: 8px 14px;
		font-size: 12px;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.sd-cmapb__city,
	.sd-cmapb__card-link,
	.sd-cmapb__card-cta,
	.sd-cmapb__cards,
	.sd-cmapb__overlay,
	.sd-cmapb__popup-bubble,
	.sd-cmapb__popup-cta,
	.sd-cmapb__popup-close {
		transition: none;
	}
	/* Still snap the bubble to its resting transform (no scale-in) without animating. */
	.sd-cmapb__popup-bubble {
		transform: translate( -50%, calc( -100% - 24px ) ) scale( 1 );
	}
}