/*
 * "Our Locations (Featured)" box (pattern 5211, home and service pages)
 *
 * Markup: inc/featured-map.php (the map, printed by custom-blocks/ajax-map.php, and the
 * `lfm-box lucid-map` classes it adds to the `featured-regions` columns block). Script:
 * js/featured-map.js. The card, pins, zoom buttons and --lh-* colour tokens come from
 * css/lucid-map.css (a dependency of this file). RUCSS-safelisted, like lucid-map.css.
 *
 * Desktop, like /locations/: the map runs edge to edge behind the box and the metro list floats
 * over its left side in a dark panel, aligned with the heading above; the "See All X Locations"
 * button sits at the foot of the panel; the card opens top-right over the map.
 *
 * At max-width 880px nothing here changes the layout: style.css hides the map column
 * (`.featured-regions > * + *`) and the metro rows link to /locations/, as before.
 *
 * Namespace .lfm-*. Nothing here may reuse a selector js/more.js binds to (#map, .map, .marker,
 * .listing-entry, .address, .meeting-search, ...).
 */

.lfm {
	position: relative;
	overflow: hidden;
	color: var(--lh-text);
}

.lfm__map {
	position: absolute;
	inset: 0;
	background: #E9E4D8;
}

/* Metro list. Its form is .lfm-metros here, not #misha_filters (functions.php,
   sc_meeting_room_listings()), so this is style.css's `#misha_filters .region-radio-toggles label`. */
.lfm-metros .region-radio-toggles label {
	cursor: pointer;
}

@media (min-width: 881px) {

	/* ---------------------------------------------------------------------
	 * Box: no frame of its own; the map behind it and the panel are the box.
	 * style.css:19268 draws the bordered gradient card and makes it a flex row (!important).
	 * ------------------------------------------------------------------ */

	body:not(.tax-region) .featured-regions.lfm-box {
		display: block !important;
		position: relative;
		padding: 48px 0;
		border: 0;
		border-radius: 0;
		background: none;
		gap: 0;
	}

	/* Map column: out to the viewport edges, as tall as the box. --lfm-scrollbar (set by
	   js/featured-map.js) keeps it off the vertical scrollbar, which 100vw includes. The height and
	   align-self resets beat style.css `.featured-regions > * { height: 100%; align-self: center }`,
	   which would centre a shorter column instead of stretching it from top to bottom. */
	body:not(.tax-region) .featured-regions.lfm-box > .wp-block-column + .wp-block-column {
		position: absolute;
		top: 0;
		bottom: 0;
		left: calc(50% - (100vw - var(--lfm-scrollbar, 0px)) / 2);
		width: calc(100vw - var(--lfm-scrollbar, 0px));
		max-width: none;
		height: auto;
		margin: 0;
		align-self: stretch;
	}

	.featured-regions.lfm-box .lfm {
		height: 100%;
		min-height: 560px;
	}

	/* Panel: the metro list column, in flow so it lines up with the heading. */
	body:not(.tax-region) .featured-regions.lfm-box > .wp-block-column:first-child {
		position: relative;
		z-index: 2;
		width: 400px;
		max-width: 400px;
		height: auto;
		margin: 0;
		background: var(--lh-surface);
		box-shadow: var(--lh-shadow);
	}

	/* Service pages: the box's H2, moved here from above the map (inc/featured-map.php), heads the
	   panel like the /locations/ panel heading. A little smaller: these headings run longer. */
	.featured-regions.lfm-box .lfm-panel-heading {
		margin: 0;
		padding: 28px 28px 24px;
		border-bottom: 1px solid var(--lh-line);
		color: var(--lh-text);
		font-family: var(--font-serif);
		font-size: clamp(28px, 2.4vw, 36px);
		font-weight: 400;
		letter-spacing: -0.01em;
		line-height: 1.1;
	}

	/* ---------------------------------------------------------------------
	 * Metro rows, as the /locations/ list rows (.lh .lh-item): dividers, serif names, a raised
	 * fill on hover and a gold bar on the selected one. Replaces the gold gradient row.
	 * ------------------------------------------------------------------ */

	.featured-regions.lfm-box .region-radio-toggles {
		gap: 0;
	}

	.featured-regions.lfm-box .region-radio-btn {
		height: auto;
		margin: 0;
		padding: 22px 24px 22px 28px;
		border-bottom: 1px solid var(--lh-line) !important;
		transition: background-color 0.2s ease-in-out;
	}

	.featured-regions.lfm-box .region-radio-btn::after {
		display: none;
	}

	.featured-regions.lfm-box .region-radio-btn:hover,
	.featured-regions.lfm-box .region-radio-btn.checked {
		background: var(--lh-surface-raised);
	}

	.featured-regions.lfm-box .region-radio-btn.checked {
		box-shadow: inset 2px 0 0 var(--color-text-accent);
	}

	.featured-regions.lfm-box .region-radio-btn h3,
	.featured-regions.lfm-box .region-radio-btn.checked h3 {
		margin: 0;
		color: var(--lh-text);
		font-family: var(--font-serif);
		font-size: 24px;
		font-weight: 400;
		letter-spacing: 0;
		line-height: 1.15;
		text-shadow: none;
		animation: none;
	}

	/* The gold caret (style.css .region-radio-btn span:after) at the right edge, like the
	   /locations/ chevron. */
	.featured-regions.lfm-box .region-radio-btn .btn-ui {
		width: 100%;
		justify-content: space-between;
	}

	/* ---------------------------------------------------------------------
	 * "See All X Locations": a gold arrow text link (.with-arrow, printed instead of the old .btn by
	 * sc_meeting_room_listings() in functions.php) at the foot of the panel, instead of a button
	 * floating over the map. style.css:19433-19481 lays .floating-wrap over the whole box as two
	 * pseudo-columns.
	 * ------------------------------------------------------------------ */

	body:not(.tax-region) .featured-regions.lfm-box .ajax-map-wrap .floating-wrap {
		position: static;
		display: block;
		width: auto;
		height: auto;
		padding: 20px 24px 24px 28px;
		pointer-events: auto;
	}

	body:not(.tax-region) .featured-regions.lfm-box .ajax-map-wrap .floating-wrap > .pseudo-col:first-child {
		display: none;
	}

	/* Left-aligned with the metro names (style.css centres it under the map). */
	body:not(.tax-region) .featured-regions.lfm-box .ajax-map-wrap .floating-wrap > .pseudo-col + .pseudo-col {
		justify-content: flex-start;
	}

	body:not(.tax-region) .featured-regions.lfm-box .ajax-map-wrap .floating-wrap > .pseudo-col .tab {
		padding-bottom: 0;
	}

	.featured-regions.lfm-box .floating-wrap .lfm-see-all {
		color: var(--color-text-accent);
		font-size: 13px;
		line-height: 1.5;
		letter-spacing: 2.6px;
		text-decoration: none;
	}

	.featured-regions.lfm-box .floating-wrap .lfm-see-all:hover,
	.featured-regions.lfm-box .floating-wrap .lfm-see-all:focus-visible {
		color: var(--color-text-accent);
		text-decoration: underline;
	}

	/* ---------------------------------------------------------------------
	 * Card: the /locations/ size, top-right over the map.
	 * ------------------------------------------------------------------ */

	.lfm .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, as on /locations/. */
@media (min-width: 881px) and (max-width: 1180px) {

	body:not(.tax-region) .featured-regions.lfm-box > .wp-block-column:first-child {
		width: 340px;
		max-width: 340px;
	}

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

/* The site's gold button for the card's View Location and the panel's See All. style.css:18099
   paints every .btn in the featured box #12120F (!important), for the See All button that used
   to float over the map. */
body:not(.tax-region) .featured-regions.lfm-box .btn:not(.dropdown-toggle):before {
	background: var(--btn-gradient-primary) !important;
}

body:not(.tax-region) .featured-regions.lfm-box .btn:not(.dropdown-toggle):after {
	background: var(--btn-gradient-primary-hover) !important;
}

/* Zoom buttons: bottom-right, as on /locations/. style.css:18127 sets 21px left/top margins on
   every control in the featured box. */
body:not(.tax-region) .featured-regions .lfm .mapboxgl-control-container .mapboxgl-ctrl {
	margin: 0 var(--lh-gap) var(--lh-gap) 0;
}