/*
 * All Locations (/locations/) — map hero
 *
 * Markup: templates/locations-page.php. Script: js/locations-hero.js. Enqueued on this page only
 * (inc/locations-page.php) and RUCSS-safelisted: the open card, active row/pin, hover and
 * map/list view states are all set by the script.
 *
 * Namespace .lh-*. Nothing here may reuse a selector js/more.js binds to (#map, .map, .marker,
 * .listing-entry, .address, .meeting-search, ...).
 *
 * The colour tokens, card, pins and zoom buttons are shared with the featured box's map and live
 * in css/lucid-map.css (a dependency of this file); this file places them on the hero. Colours go
 * through the --lh-* custom properties, which css/theme-light.css redefines for light visitors.
 *
 * Breakpoint convention matches style.css: max-width 880px / min-width 881px.
 * Header heights: 90px desktop, 64px mobile (fixed header; content starts below it).
 */

/* -------------------------------------------------------------------------
 * Page shell
 * ---------------------------------------------------------------------- */

/* The hero is printed after the header, outside .site-inner, and already sits below the fixed
   header (it is the element style.css:6271 pushes down). .site-inner's own 90px/64px top margin
   (style.css:13443 / 14485, !important) would leave a gap between the hero and the content. */
body.lucid-locations .site-inner {
	margin-top: 0 !important;
}

.lh {
	position: relative;
	width: 100%;
	background: var(--color-bg-primary);
	color: var(--lh-text);
}

.lh-map {
	background: #E9E4D8;
}

/* -------------------------------------------------------------------------
 * Panel
 * ---------------------------------------------------------------------- */

.lh-panel {
	display: flex;
	flex-direction: column;
	background: var(--lh-surface);
}

.lh-panel__head {
	padding: 28px 28px 24px;
	border-bottom: 1px solid var(--lh-line);
}

.lh-eyebrow {
	margin: 0 0 14px;
	color: var(--color-text-accent);
	font-family: var(--font-sans-serif);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.25em;
	line-height: 1.2;
	text-transform: uppercase;
}

.lh .lh-heading {
	margin: 0 0 24px;
	color: var(--lh-text);
	font-family: var(--font-serif);
	font-size: clamp(32px, 2.7vw, 42px);
	font-weight: 400;
	letter-spacing: -0.01em;
	line-height: 1.05;
}

/* Region select: a white field with a small caps label above the value, as the mockup. */
.lh-select {
	position: relative;
	display: block;
	margin: 0;
	padding: 8px 40px 9px 14px;
	border-radius: 3px;
	background: var(--lh-field);
	cursor: pointer;
}

.lh-select:focus-within {
	outline: 2px solid var(--color-text-accent);
	outline-offset: 2px;
}

.lh-select::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 16px;
	width: 7px;
	height: 7px;
	margin-top: -5px;
	border-right: 1.5px solid var(--lh-field-text);
	border-bottom: 1.5px solid var(--lh-field-text);
	transform: rotate(45deg);
	pointer-events: none;
}

.lh-select__label {
	display: block;
	margin-bottom: 2px;
	color: var(--lh-field-label);
	font-family: var(--font-sans-serif);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.2em;
	line-height: 1.2;
	text-transform: uppercase;
}

/* style.css:4291 gives every select a border, padding and #333 text. */
.lh .lh-select__input {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--lh-field-text);
	font-family: var(--font-sans-serif);
	font-size: 15px;
	line-height: 1.4;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	outline: none;
}

.lh .lh-select__input option,
.lh .lh-select__input optgroup {
	color: #12120F;
	background: #FFFFFF;
}

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

/* -------------------------------------------------------------------------
 * List
 * ---------------------------------------------------------------------- */

.lh .lh-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.lh .lh-item {
	position: relative;
	display: grid;
	grid-template-columns: 100px minmax(0, 1fr) 16px;
	gap: 16px;
	align-items: center;
	margin: 0;
	padding: 18px 20px 18px 24px;
	border-bottom: 1px solid var(--lh-line);
	list-style: none;
	cursor: pointer;
	transition: background-color 0.2s ease-in-out;
}

.lh .lh-item::before,
.lh .lh-item::marker {
	content: none;
	display: none;
}

.lh .lh-item[hidden] {
	display: none;
}

.lh .lh-item:hover,
.lh .lh-item.is-active {
	background: var(--lh-surface-raised);
}

.lh .lh-item.is-active {
	box-shadow: inset 2px 0 0 var(--color-text-accent);
}

.lh-item__thumb {
	display: block;
	overflow: hidden;
	border-radius: 2px;
}

.lh-item__thumb img {
	display: block;
	width: 100px;
	height: 75px;
	object-fit: cover;
	border-radius: 2px;
}

.lh-item__body {
	min-width: 0;
}

.lh .lh-item__name {
	margin: 0 0 6px;
	font-family: var(--font-serif);
	font-size: 21px;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.12;
}

.lh .lh-item__link {
	color: var(--lh-text);
	text-decoration: none;
}

.lh .lh-item__link:hover,
.lh .lh-item__link:focus-visible {
	color: var(--color-text-accent);
}

/* The header Locations menu's "Coming soon" pill (style.css .ls-city-meta--soon), above the name. */
.lh-badge {
	display: inline-block;
	margin: 0 0 8px;
	padding: 3px 10px;
	border-radius: 20px;
	background: var(--btn-gradient-vertical);
	color: var(--lh-badge-text);
	font-family: var(--font-sans-serif);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.15em;
	line-height: 1.4;
	text-transform: uppercase;
}

.lh .lh-item__address {
	margin: 0 0 4px;
	color: var(--lh-text-2);
	font-size: 13px;
	line-height: 1.35;
}

.lh-item__more {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 28px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--color-text-accent);
	cursor: pointer;
}

.lh-item__more:focus-visible {
	outline: 2px solid var(--color-text-accent);
	outline-offset: 2px;
}

.lh .lh-count {
	margin: 0;
	padding: 13px 24px;
	border-top: 1px solid var(--lh-line);
	color: var(--lh-muted);
	font-size: 12px;
	line-height: 1.3;
}

/* -------------------------------------------------------------------------
 * Embedded: on state and region pages the hero replaces the old listing inside the page content
 * (inc/locations-page.php, pre_render_block). It breaks out of the content column to the window
 * edges; js/locations-hero.js sets --lh-scrollbar because 100vw includes the scrollbar.
 * ---------------------------------------------------------------------- */

.lh--embed {
	width: calc(100vw - var(--lh-scrollbar, 0px));
	max-width: none;
	margin-right: 0;
	margin-left: calc(50% - (100vw - var(--lh-scrollbar, 0px)) / 2);
}

/* In-page links (#locations) land below the fixed header (90px desktop, 64px mobile). */
.lh--embed {
	scroll-margin-top: 90px;
}

/* Takes the region pages' slide-in in place of the section (inc/locations-page.php,
   lucid_locations_hero_markup()). */
.lh-lead {
	height: 0;
	margin: 0 !important;
}

@media (max-width: 880px) {

	.lh--embed {
		scroll-margin-top: 64px;
	}
}

/* Region pages: the next block (the tour CTA cover) brings no top space of its own. On state pages
   the testimonials section after the hero does. */
body.tax-region .lh--embed {
	margin-bottom: 100px;
}

/* On region pages the hero follows an hr.fade.reverse, and style.css
   `.wp-block-separator.fade.reverse + * > * { position: relative }` would take the map, panel and
   card out of their absolute positions. */
@media (min-width: 881px) {

	body .lh.lh--embed > .lh-map,
	body .lh.lh--embed > .lh-panel,
	body .lh.lh--embed > .lh-card {
		position: absolute;
	}
}

@media (max-width: 880px) {

	body.tax-region .lh--embed {
		margin-bottom: 64px;
	}

	body .lh.lh--embed[data-view="map"] > .lh-card {
		position: absolute;
	}
}

/* -------------------------------------------------------------------------
 * Desktop: the map fills the hero; panel and card float over it
 * ---------------------------------------------------------------------- */

@media (min-width: 881px) {

	.lh {
		height: calc(100vh - 90px);
		min-height: 640px;
		overflow: hidden;
	}

	/* One section among many: a full window at most, and no taller than the list needs. */
	.lh.lh--embed {
		max-height: 860px;
	}

	/* At the list's ends the wheel goes on to the page (js/locations-hero.js, cfg.embed). */
	.lh.lh--embed .lh-list {
		overscroll-behavior: auto;
	}

	.lh-map {
		position: absolute;
		inset: 0;
	}

	.lh-panel {
		position: absolute;
		z-index: 2;
		top: var(--lh-gap);
		bottom: var(--lh-gap);
		left: var(--lh-gap);
		width: 400px;
		box-shadow: var(--lh-shadow);
	}

	.lh .lh-list {
		flex: 1 1 auto;
		min-height: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-gutter: stable;
		scrollbar-width: thin;
		scrollbar-color: var(--lh-line) transparent;
	}

	.lh .lh-list::-webkit-scrollbar {
		width: 6px;
	}

	.lh .lh-list::-webkit-scrollbar-thumb {
		border-radius: 3px;
		background: var(--lh-line);
	}

	.lh-card {
		position: absolute;
		z-index: 3;
		top: var(--lh-gap);
		right: var(--lh-gap);
		width: 360px;
		max-height: calc(100% - 2 * var(--lh-gap));
		overflow-y: auto;
		overscroll-behavior: contain;
	}
}

/* Narrow desktops: keep room for the map between the panel and the card. */
@media (min-width: 881px) and (max-width: 1180px) {

	.lh-panel {
		width: 340px;
	}

	.lh-card {
		width: 320px;
	}
}

/* -------------------------------------------------------------------------
 * Mobile: header + sticky List / Map switch, then one of the two
 * ---------------------------------------------------------------------- */

@media (max-width: 880px) {

	.lh {
		--lh-gap: 16px;
		overflow-anchor: none;
	}

	.lh-panel__head {
		padding: 28px 20px 0;
		border-bottom: 0;
	}

	/* A direct child of the panel, so it stays stuck under the header for the whole list.
	   position: sticky needs body.has-sticky-element (added in inc/locations-page.php), which
	   lifts .site-container's overflow: hidden (style.css:16907). */
	.lh-toggle {
		position: sticky;
		top: 64px;
		z-index: 5;
		display: flex;
		gap: 8px;
		margin: 20px 0 0;
		padding: 12px 20px;
		background: var(--lh-surface);
		border-bottom: 1px solid var(--lh-line);
	}

	.lh-toggle__btn {
		flex: 1 1 0;
		margin: 0;
		padding: 10px 12px;
		border: 1px solid var(--lh-line);
		border-radius: 3px;
		background: transparent;
		color: var(--lh-text);
		font-family: var(--font-sans-serif);
		font-size: 11px;
		font-weight: 600;
		letter-spacing: 0.15em;
		line-height: 1.2;
		text-transform: uppercase;
		cursor: pointer;
	}

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

	/* The panel scrolls with the page here; the head's toggle needs the panel to be visible. */
	.lh-panel {
		position: relative;
	}

	.lh .lh-item {
		padding: 16px 20px;
	}

	.lh-map {
		position: relative;
		height: calc(100vh - 64px - 64px);
		min-height: 420px;
	}

	.lh[data-view="list"] .lh-map,
	.lh[data-view="list"] .lh-card {
		display: none;
	}

	.lh[data-view="map"] .lh-list,
	.lh[data-view="map"] .lh-count {
		display: none;
	}

	/* Map view: the card is a sheet over the bottom of the map. */
	.lh[data-view="map"] {
		display: flex;
		flex-direction: column;
	}

	.lh[data-view="map"] .lh-map {
		order: 2;
	}

	.lh[data-view="map"] .lh-panel {
		order: 1;
	}

	.lh[data-view="map"] .lh-card {
		position: absolute;
		z-index: 3;
		right: var(--lh-gap);
		bottom: var(--lh-gap);
		left: var(--lh-gap);
		max-height: 70%;
		overflow-y: auto;
	}

	.lh-card__media {
		aspect-ratio: 16 / 7;
	}

	.lh-card__body {
		padding: 18px 18px 20px;
	}

	.lh .lh-card__name {
		font-size: 26px;
	}
}