/**
 * simplydwell/location-hero — front-end styles.
 *
 * Two columns: an image slider with overlaid area title/description/CTAs on the left, and an
 * interactive communities map on the right. Stacks on narrow screens. Colours, type and
 * button treatments follow the site design system.
 */
.sd-lochero {
	width: 100%;
	background: #1f242e;
}

.sd-lochero__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: clamp(440px, 60vh, 660px);
}

/* ── Left: slider + overlay ─────────────────────────────────────────────────── */
.sd-lochero__left {
	position: relative;
	min-height: 550px;
}

.sd-lochero__slider {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.sd-lochero__slides {
	position: absolute;
	inset: 0;
}

.sd-lochero__slide {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0;
	transition: opacity 0.8s ease;
}

.sd-lochero__slide.is-active {
	opacity: 1;
}

.sd-lochero__slide--empty {
	opacity: 1;
	background: linear-gradient(135deg, #2a3140 0%, #1f242e 100%);
}

/* Scrim so the overlaid copy stays legible over any photo. */
.sd-lochero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(31, 36, 46, 0.15) 0%, rgba(31, 36, 46, 0.55) 55%, rgba(31, 36, 46, 0.85) 100%);
	pointer-events: none;
}

.sd-lochero__overlay {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding-block: clamp(28px, 4vw, 56px);
	padding-inline: 100px;
	color: #fff;
}

.sd-lochero__eyebrow {
	margin: 0 0 10px;
	font-family: var(--sd-font-display, 'Lexend', sans-serif);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.17em;
	text-transform: uppercase;
	color: #e2bb61;
}

.sd-lochero__title {
	margin: 0;
	font-family: var(--sd-font-display, 'Lexend', sans-serif);
	font-size: clamp(2.25rem, 4.4vw, 3.5rem);
	font-weight: 700;
	line-height: 1.05;
	color: #fff;
}

.sd-lochero__desc {
	margin: 16px 0 0;
	max-width: 65ch;
	font-family: var(--sd-font-body, 'Lexend', sans-serif);
	font-size: 1rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.9);
}

.sd-lochero__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 26px;
}

.sd-lochero__cta {
	display: inline-flex;
	align-items: center;
	padding: 13px 28px;
	font-family: var(--sd-font-display, 'Lexend', sans-serif);
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-decoration: none;
	border-radius: 6px;
	transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.sd-lochero__cta--primary {
	color: #fff;
	background: #d46f35;
	border-radius: 20px;
}

.sd-lochero__cta--primary:hover,
.sd-lochero__cta--primary:focus-visible {
	background: #b85a26;
	color: #fff;
	transform: translateY(-1px);
	outline: none;
}

.sd-lochero__cta--ghost {
	color: #fff;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.7);
}

.sd-lochero__cta--ghost:hover,
.sd-lochero__cta--ghost:focus-visible {
	background: #fff;
	color: #1f242e;
	outline: none;
}

/* Slider controls */
.sd-lochero__nav {
	position: absolute;
	top: 50%;
	z-index: 3;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
	line-height: 1;
	color: #fff;
	background: rgba(31, 36, 46, 0.4);
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 50%;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.sd-lochero__nav:hover,
.sd-lochero__nav:focus-visible {
	background: rgba(212, 111, 53, 0.9);
	outline: none;
}

.sd-lochero__nav--prev { left: 16px; }
.sd-lochero__nav--next { right: 16px; }

.sd-lochero__dots {
	position: absolute;
	top: 18px;
	right: 18px;
	z-index: 3;
	display: flex;
	gap: 8px;
}

.sd-lochero__dot {
	width: 9px;
	height: 9px;
	padding: 0;
	background: rgba(255, 255, 255, 0.5);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.sd-lochero__dot.is-active {
	background: #d46f35;
	transform: scale(1.25);
}

/* ── Right: map ─────────────────────────────────────────────────────────────── */
.sd-lochero__right {
	position: relative;
	min-height: 550px;
	background: #e9eef1;
}

.sd-lochero__map {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* Static fallback (no Maps key / API blocked): a styled placeholder panel. */
.sd-lochero__right--static .sd-lochero__map,
.sd-lochero--static .sd-lochero__map {
	background:
		linear-gradient(135deg, rgba(212, 111, 53, 0.06), rgba(226, 187, 97, 0.06)),
		repeating-linear-gradient(0deg, #e9eef1, #e9eef1 22px, #e3e9ed 22px, #e3e9ed 23px),
		repeating-linear-gradient(90deg, #e9eef1, #e9eef1 22px, #e3e9ed 22px, #e3e9ed 23px);
}

.sd-lochero__zoom {
	position: absolute;
	right: 16px;
	bottom: 16px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.sd-lochero__zoom-btn {
	width: 38px;
	height: 38px;
	font-size: 20px;
	line-height: 1;
	color: #1f242e;
	background: #fff;
	border: 1px solid #d7dde2;
	border-radius: 6px;
	cursor: pointer;
	box-shadow: 0 1px 4px rgba(31, 36, 46, 0.14);
	transition: color 0.15s ease, border-color 0.15s ease;
}

.sd-lochero__zoom-btn:hover,
.sd-lochero__zoom-btn:focus-visible {
	color: #d46f35;
	border-color: #d46f35;
	outline: none;
}

.sd-lochero__right--static .sd-lochero__zoom {
	display: none;
}

.sd-lochero__map-note {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	margin: 0;
	padding: 14px 18px;
	max-width: 80%;
	text-align: center;
	color: #4a5160;
	background: rgba(255, 255, 255, 0.92);
	border-radius: 8px;
}

/* ── Map info popup (a compact community card) ────────────────────────────────
 *
 * Matches the marker popup on simplydwell/communities-map — #F6F4EE surface on a
 * #C8C8C8 hairline, dark media band, #D46F35 price and an arrow CTA that opens its
 * gap on hover — so both maps on the site read as one component.
 *
 * This one rides inside a google.maps.InfoWindow, so the rules below first strip the
 * API's own chrome (white bubble, padding, scroll container, close button) and then
 * paint our card in its place. The class names are Google's, hence the !important and
 * the exact selectors: they're the only handle on DOM the API owns, and it ships
 * inline styles. Scoped to .sd-lochero so no other map is touched. Google renames
 * these across releases — if the bubble ever reverts to plain white, re-check them.
 */
.sd-lochero .gm-style .gm-style-iw-c {
	padding: 0 !important;
	max-width: 264px !important;
	background: #f6f4ee !important;
	border: 0.5px solid #c8c8c8 !important;
	border-radius: 10px !important;
	box-shadow: 0 12px 32px rgba(31, 36, 46, 0.22) !important;
	overflow: hidden !important;
}

.sd-lochero .gm-style .gm-style-iw-d {
	padding: 0 !important;
	overflow: hidden !important;
	background: transparent !important;
	max-width: 264px !important;
	max-height: none !important;
}

/* The tail that points at the marker. */
.sd-lochero .gm-style .gm-style-iw-tc::after {
	background: #f6f4ee !important;
}

/* Google's close button + the header row that reserves space for it: the card
   carries its own close button (styled below), so drop both. */
.sd-lochero .gm-style .gm-style-iw-chr,
.sd-lochero .gm-style .gm-ui-hover-effect {
	display: none !important;
}

/* The radius/clip lives on the card as well as the bubble, so the media band's
   corners stay round even if the API's chrome shifts under us. */
.sd-lochero__pop {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 264px;
	max-width: 78vw;
	overflow: hidden;
	background: #f6f4ee;
	border-radius: 10px;
	font-family: var(--sd-font-display, 'Lexend', sans-serif);
	color: #1f242e;
}

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

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

.sd-lochero__pop-media {
	display: block;
	height: 128px;
	background: #1f242e center / cover no-repeat;
}

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

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

.sd-lochero__pop-price {
	display: block;
	font-size: 13px;
	font-weight: 700;
	line-height: 18px;
	color: #d46f35;
}

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

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

@media (max-width: 480px) {
	.sd-lochero__pop-media {
		height: 108px;
	}
}

.sd-lochero__notice {
	margin: 0;
	padding: 40px 24px;
	text-align: center;
	color: #fff;
	background: #1f242e;
}

/* ── Responsive ─────────────────────────────────────────────────────────────── */
/*
 * Stacked layout. The copy comes OUT of the photo here: on a phone the overlaid
 * treatment squeezed the title/description into a dark strip over the image, so
 * below 860px the slider is a fixed-height media box and the copy follows it in
 * normal flow as its own content box. The desktop overlay is untouched.
 *
 * --sd-lochero-media is the media box's height: the slides, the scrim and the
 * prev/next arrows all size/centre against it (the arrows can't reference the
 * slides box directly — they're its siblings, not its children).
 */
@media (max-width: 860px) {
	.sd-lochero {
		--sd-lochero-media: clamp(240px, 58vw, 360px);
	}

	.sd-lochero__inner {
		grid-template-columns: 1fr;
		min-height: 0;
	}

	.sd-lochero__left {
		min-height: 0;
	}

	/* Out of the absolute fill and into flow: media box, then copy. */
	.sd-lochero__slider {
		position: relative;
		inset: auto;
		overflow: visible;
	}

	.sd-lochero__slides {
		position: relative;
		inset: auto;
		height: var(--sd-lochero-media);
		overflow: hidden;
	}

	/* Confine the scrim to the photo — it no longer sits behind any copy, it just
	   keeps the dots and arrows legible on a bright image. */
	.sd-lochero__scrim {
		inset: 0 0 auto 0;
		height: var(--sd-lochero-media);
	}

	.sd-lochero__nav {
		top: calc(var(--sd-lochero-media) / 2);
	}

	/* The content box: normal flow, no overlay. */
	.sd-lochero__overlay {
		position: static;
		padding-block: 28px 32px;
		padding-inline: 20px;
		background: #1f242e;
	}

	.sd-lochero__desc {
		margin-top: 12px;
	}

	.sd-lochero__ctas {
		margin-top: 22px;
	}

	.sd-lochero__right {
		min-height: 340px;
	}
}