/*
 * Landing locations + map — /l/{service-type}/{region}/ only
 *
 * Lives outside style.css on purpose: WP Rocket's "remove unused CSS" walks the rendered DOM,
 * so the JS-toggled state hooks (.is-active, .is-hover, [data-view="map"]) would be stripped
 * out of style.css. inc/landing-pages.php safelists this whole file via rocket_rucss_safelist.
 *
 * Namespace is .ll-* and it is exclusive to blocks/landing/locations-map.php. Nothing here may
 * reuse the shared map/list classes (#map, .map, .marker, .listing-entry, .map-container, ...) —
 * js/more.js binds those globally.
 *
 * Breakpoint convention matches style.css: max-width 880px / min-width 881px.
 * Header offsets: 90px desktop, 64px mobile.
 *
 * Desktop is one viewport-tall row rather than a sticky map: both columns are the same fixed
 * height and the list scrolls inside its own column. The <ul> carries data-lenis-prevent so
 * Lenis leaves that internal scroller alone.
 *
 * @see blocks/landing/locations-map.php
 * @see js/landing-map.js
 */

/* -------------------------------------------------------------------------
 * Section shell
 * ---------------------------------------------------------------------- */

/* Beats the blanket 100px section padding at style.css:6732 — this section sits directly
   under the hero, which already drops its bottom padding on landers. */
.site-inner .content .wp-block-group.landing-locations {
	padding-top: 40px;
}

.landing-locations .section-subheading,
.landing-locations .section-heading {
	margin-bottom: 8px;
}

.landing-locations .section-heading {
	margin-bottom: 24px;
}

/* -------------------------------------------------------------------------
 * Mapbox global overrides, scoped to this section
 * ---------------------------------------------------------------------- */

/* style.css:~11900 tints every canvas on the site warm brown. streets-v11 is meant to be read
   at its own colours, so undo it here only. */
.landing-locations .mapboxgl-canvas {
	filter: none;
}

/* style.css:18100 and the 881-1280px block at 18111 push the controls 50-75px off the edge for
   the full-bleed shared map. This map is a boxed 50% column. */
.landing-locations .mapboxgl-control-container .mapboxgl-ctrl,
.wp-block-group.landing-locations .mapboxgl-control-container .mapboxgl-ctrl {
	margin: 12px 12px 0 0;
}

/* -------------------------------------------------------------------------
 * Layout
 * ---------------------------------------------------------------------- */

/* Mobile-only List/Map switch; revealed in the max-width 880px block. */
.landing-locations .ll-toggle {
	display: none;
}

.landing-locations .ll-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	align-items: start;
}

/* -------------------------------------------------------------------------
 * List
 *
 * Prefixed .entry-content ul.ll-list, the same trick ul.landing-amenities uses: that beats the
 * inherited .entry-content ul padding and the ul li ::before bullet outright, instead of
 * relying on source order.
 * ---------------------------------------------------------------------- */

.entry-content ul.ll-list {
	display: grid;
	/* Cards clip their own overflow, which makes their automatic minimum size 0; without an
	   explicit track size the fixed-height desktop list would shrink rows to fit instead of
	   scrolling. */
	grid-auto-rows: max-content;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.entry-content ul.ll-list li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.entry-content ul.ll-list li::before,
.entry-content ul.ll-list li::marker {
	content: none;
	display: none;
}

/* The photo column is a fixed square per breakpoint (--ll-thumb) and the row is at least that
   tall, so with normal card content the image is exactly square and fills the card height. An
   `auto` column sized from an aspect-ratio thumb was tried and is unstable: the <img>'s
   intrinsic 300px width drives the first track pass and the re-resolve then feeds the row height
   back into the column (300px squares on desktop, 500px+ on mobile). If the body ever outgrows
   the square (very long name on a narrow screen) the image grows taller, not wider. */
.entry-content ul.ll-list li.ll-card {
	--ll-thumb: 168px;
	display: grid;
	grid-template-columns: var(--ll-thumb) 1fr;
	grid-template-rows: minmax(var(--ll-thumb), auto);
	gap: 0;
	padding: 0;
	overflow: hidden;
	background: #1A1A16;
	border: 1px solid var(--border-color);
	border-radius: 8px;
	cursor: pointer;
	transition: border-color var(--transition-ease-in-out), background var(--transition-ease-in-out);
}

.entry-content ul.ll-list li.ll-card:hover,
.entry-content ul.ll-list li.ll-card.is-hover {
	border-color: var(--color-text-accent);
}

.entry-content ul.ll-list li.ll-card.is-active {
	border-color: var(--color-text-accent);
	background: var(--gradient-light);
}

.ll-card__thumb {
	display: block;
	width: 100%;   /* = the --ll-thumb column */
	height: 100%;  /* = the row, which is at least --ll-thumb tall */
	align-self: stretch;
	border-radius: 0;
	overflow: hidden;
}

.ll-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 0;
}

.ll-card__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	padding: 12px 14px;
}

.ll-card__name,
.entry-content .ll-card__name a.ll-card__link {
	font-family: var(--font-sans-serif); /* "indivisible" (style.css :root), the site's UI sans */
	font-weight: 400;
}

.ll-card__name {
	margin: 0;
	font-size: var(--fs-body-lg);
	line-height: 1.25;
	letter-spacing: 0.03em;
}

.entry-content .ll-card__name a.ll-card__link {
	color: var(--color-text-primary);
	text-decoration: none;
}

.ll-card__meta {
	margin: 0;
	font-size: var(--fs-body-sm);
	line-height: 1.35;
	color: var(--color-text-accent); /* gold address, same accent the price line used */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Street on one line, "City, ST ZIP" on the next; each line truncates on its own. */
.ll-card__meta-line {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Actions row (now just the Explore link). margin-top:auto pins it to the bottom of the body,
   which is a flex column stretched to the card's full height, so the link sits on the same
   baseline in every card regardless of how many lines the name or address take. */
.ll-card__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	margin-top: auto;
	padding-top: 4px;
}

/* The same arrow text link as "See all locations" below the grid, stepped down to the badge/
   button 11px. .with-arrow (style.css:19533) is a single class, so these two-and-three-class
   selectors beat its font-size (--fs-body-md), 2.8px letter-spacing and colour without
   !important. Its chevron is a fixed 4x8px background on :after, independent of font-size, so
   it survives untouched — only the text metrics are overridden. */
.entry-content .ll-card__explore,
.entry-content .ll-card__explore.with-arrow {
	color: var(--color-text-primary);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	text-decoration: none;
}

.entry-content .ll-card__explore:hover,
.entry-content .ll-card__explore.with-arrow:hover {
	color: var(--color-text-accent);
}

/* Optional second action (blocks/landing/locations-map.php `tour` arg): the site's primary
   .btn (gold fill, span lifts the label above its :before), sized down to fit the card. */
.entry-content .ll-card__tour.btn {
	padding: 10px 18px;
	font-size: 11px;
	letter-spacing: 0.15em;
}

/* Mirrors .listing-entry .location-details .badge (style.css:16779) without reusing it —
   .listing-entry is a more.js selector. */
.ll-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	height: 22px;
	padding: 2px 8px;
	border-radius: 2px;
	background: #2F2E2C;
	color: #F7F7F2;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 1;
}

/* .btn is a max-content flex block; left-aligned under the list column. */
.ll-more {
	display: flex;
	justify-content: flex-start;
	margin: 20px 0 0;
}

/* -------------------------------------------------------------------------
 * Map
 * ---------------------------------------------------------------------- */

.landing-locations .ll-map {
	width: 100%;
	height: 420px;
	border-radius: 8px;
	overflow: hidden;
	background: var(--color-bg-inverse);
}

/* Markers. Mapbox owns the root element's transform (it positions it), so every visual
   effect goes on the inner __pin. */
.ll-marker {
	width: 28px;
	height: 34px;
	cursor: pointer;
}

.ll-marker__pin {
	display: block;
	width: 28px;
	height: 34px;
	background: url(../images/marker.svg) center / contain no-repeat;
	transform-origin: 50% 100%;
	transition: transform .2s ease-in-out;
}

.ll-marker:hover .ll-marker__pin,
.ll-marker.is-hover .ll-marker__pin {
	transform: scale(1.12);
}

.ll-marker.is-active {
	z-index: 2;
}

.ll-marker.is-active .ll-marker__pin {
	transform: scale(1.25);
	filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .35));
}

.ll-marker:focus-visible .ll-marker__pin {
	outline: 2px solid var(--color-text-accent);
	outline-offset: 2px;
}

/* Out-of-region pins exist from load but only show once the visitor zooms out past the
   region fit: js/landing-map.js toggles .ll-zoomed-out on the section. Same pin artwork —
   nothing distinguishes them once revealed. display:none also keeps them out of the tab order. */
.landing-locations:not(.ll-zoomed-out) .ll-marker--other {
	display: none;
}

/* -------------------------------------------------------------------------
 * Info card ("popup")
 *
 * NOT a .mapboxgl-popup. style.css skins every Mapbox popup on the site into a bottom-right
 * panel (`.mapboxgl-popup { transform: none !important; right: 0 !important; ... }` at 12213,
 * tip hidden at 12216, width forced at 12232) and those !important rules beat Mapbox's inline
 * positioning, so a scoped override cannot win. js/landing-map.js therefore renders the card
 * as a mapboxgl.Marker carrying this element, which stays anchored above its pin.
 * Mapbox owns the root transform; the tip is a pseudo-element.
 * ---------------------------------------------------------------------- */

.ll-popup {
	/* no `position` here: the root is a .mapboxgl-marker and Mapbox positions it */
	width: 260px;
	max-width: calc(100vw - 48px);
	padding: 12px 14px 14px;
	border-radius: 8px;
	background: #fff;
	color: #12120F;
	font-family: inherit;
	font-size: 14px;
	line-height: 1.4;
	box-shadow: rgba(0, 0, 0, .18) 0 4px 20px;
	cursor: default;
	z-index: 3; /* above .ll-marker.is-active */
}

.ll-popup::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -8px;
	width: 16px;
	height: 16px;
	background: #fff;
	transform: translateX(-50%) rotate(45deg);
	border-radius: 2px;
	box-shadow: rgba(0, 0, 0, .08) 3px 3px 6px;
}

.ll-popup .ll-popup__name {
	margin: 0 0 4px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.25;
	padding-right: 22px;
}

.ll-popup .ll-popup__name a.ll-popup__link {
	color: #12120F;
	text-decoration: none;
}

.ll-popup .ll-popup__name a.ll-popup__link:hover {
	color: var(--btn-fill-secondary);
}

.ll-popup .ll-popup__meta {
	margin: 0 0 4px;
	font-size: 13px;
	line-height: 1.35;
}

.ll-popup .ll-popup__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
	margin-top: 8px;
}

/* Dark-on-white version of the card's Explore link; .with-arrow supplies the gold chevron. */
.ll-popup .ll-popup__explore,
.ll-popup .ll-popup__explore.with-arrow {
	color: #12120F;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	text-decoration: none;
}

.ll-popup .ll-popup__explore.with-arrow:hover {
	color: var(--btn-fill-secondary);
}

/* .with-arrow:after (style.css ~19566) lifts the 8px chevron 2px for its default 14px text; at
   11px caps that puts it above the letters, so sit it on the baseline instead. */
.entry-content .ll-card__explore.with-arrow:after,
.ll-popup .ll-popup__explore.with-arrow:after {
	top: 0;
}

.ll-popup .ll-popup__close {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #12120F;
	font-size: 18px;
	line-height: 24px;
	text-align: center;
	cursor: pointer;
}

.ll-popup .ll-popup__close:hover,
.ll-popup .ll-popup__close:focus-visible {
	background: rgba(0, 0, 0, .08);
	outline: none;
}

/* -------------------------------------------------------------------------
 * Desktop: 50 / 50, one viewport-tall row with the list scrolling inside it
 * ---------------------------------------------------------------------- */

@media (min-width: 881px) {

	/* One viewport-tall row: header (90px) + section padding/gap (48px). Both columns are the
	   same fixed height, so the map needs no sticky positioning. */
	.landing-locations .ll-grid {
		grid-template-columns: 1fr 1fr;
		gap: 32px;
		height: calc(100vh - 90px - 48px);
		min-height: 480px;
		align-items: stretch;
	}

	/* The list scrolls inside its column. data-lenis-prevent (see the partial) keeps Lenis from
	   swallowing wheel events over it, so the browser scrolls the list natively and, at either
	   end, chains the gesture on to the page (no overscroll-behavior: contain here on purpose);
	   Lenis then re-syncs from the native scroll event.
	   position: relative makes the <ul> the cards' offsetParent, which is what
	   js/landing-map.js scrollCardIntoView() measures against. */
	.entry-content ul.ll-list {
		position: relative;
		height: 100%;
		overflow-y: auto;
		scrollbar-gutter: stable;
		padding-right: 8px;
		scroll-padding-top: 12px;
		align-content: start; /* grid items pack to the top when the list is shorter than the column */
		scrollbar-width: thin;
		scrollbar-color: var(--border-color) transparent;
	}

	/* WebKit/Blink equivalent of the two standard properties above. */
	.entry-content ul.ll-list::-webkit-scrollbar {
		width: 6px;
	}

	.entry-content ul.ll-list::-webkit-scrollbar-thumb {
		background: var(--border-color);
		border-radius: 3px;
	}

	.entry-content ul.ll-list::-webkit-scrollbar-track {
		background: transparent;
	}

	.landing-locations .ll-map-col,
	.landing-locations .ll-map {
		height: 100%;
	}
}

/* -------------------------------------------------------------------------
 * Mobile: single column with a List / Map toggle
 * ---------------------------------------------------------------------- */

@media (max-width: 880px) {

	/* style.css:12364 only lifts the overflow clip above 880px. The sticky toggle needs the
	   same escape down here, scoped to landing pages so nothing else changes. */
	body.landing-page.has-sticky-element {
		overflow-x: hidden;
	}

	body.landing-page.has-sticky-element .site-container {
		overflow: visible;
	}

	.landing-locations .ll-toggle {
		display: flex;
		position: sticky;
		top: 64px;
		z-index: 5;
		gap: 8px;
		padding: 8px 0;
		margin-bottom: 16px;
		background: var(--color-bg-primary);
	}

	.landing-locations .ll-toggle__btn {
		flex: 1 1 50%;
		padding: 10px 12px;
		border: 1px solid var(--border-color);
		border-radius: 4px;
		background: transparent;
		color: var(--color-text-primary);
		font-size: 11px;
		font-weight: 500;
		letter-spacing: 0.15em;
		text-transform: uppercase;
		cursor: pointer;
	}

	.landing-locations .ll-toggle__btn[aria-pressed="true"] {
		background: var(--btn-fill-primary);
		border-color: var(--btn-fill-primary);
		color: #F7F7F2;
	}

	.landing-locations[data-view="list"] .ll-map-col {
		display: none;
	}

	.landing-locations[data-view="map"] .ll-list {
		display: none;
	}

	.landing-locations .ll-map {
		height: 70vh;
		min-height: 420px;
	}

	/* Matches the usual body height on a phone (title, address, Explore link), so the image
	   stays square; a name that wraps to two lines makes it slightly taller instead. */
	.entry-content ul.ll-list li.ll-card {
		--ll-thumb: 170px;
	}

	.ll-card__name {
		font-size: var(--fs-body-md); /* 14px on phones. Indivisible is wide, so long names wrap here and the image runs taller than the square; smaller sizes still wrap and read worse. */
		letter-spacing: normal; /* the desktop tracking pushes "Addison / North Tollway" onto a second line at this width */
	}

	.ll-card__body {
		padding: 10px 12px;
	}
}