/* Montreal 3D map — Team Frank & Moshé demo
   Sits on top of assets/stylesheets/3d-map60aa.css: reuses the template's
   .page-3d-map__pin / .page-3d-map-modals chrome, only adds what MapLibre needs. */

.page-3d-map {
	position: relative;
	/* bounded, NOT the full viewport: the global footer lives below this
	   section, and while the map was 100svh tall the footer sat entirely
	   off-screen and its links could not be reached (measured 2026-09-17:
	   footer box y=1079 in a 1080-px viewport, every footer link hit-tested
	   to nothing). The kit scales with --scale-px, so one
	   calc tracks every width. Measured on the live page 2026-09-17: the map
	   section comes out 960 tall at 1920 (header 146), 666 at 1024 (header
	   121), 724 at 390 (header 80 — --scale-px computes to 1px at phone
	   width, not 0.6). What is left over is the footer's own top edge
	   showing above the fold, which is the point. */
	height: calc(100svh - var(--scale-px, 1px) * 120);
	min-height: calc(var(--scale-px, 1px) * 420);
	width: 100%;
	background: var(--c-blue, #051936);
}

/* the template's beige top-fade would wash out the navy map */
.page-3d-map:before { display: none !important; }

.js-map-3d-container {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	background: var(--c-blue, #051936);
	/* owner: "strange hand + circle cursor, not like the original ERA".
	   Plain arrow at rest; the grab hand only while a drag is in progress. */
	cursor: default;
}
.js-map-3d-container:active { cursor: grabbing; }
.js-map-3d-container .maplibregl-canvas-container.maplibregl-interactive,
.js-map-3d-container .maplibregl-canvas-container.maplibregl-interactive .maplibregl-canvas,
.js-map-3d-container .maplibregl-canvas { cursor: default; }
.js-map-3d-container .maplibregl-canvas-container.maplibregl-interactive:active,
.js-map-3d-container .maplibregl-canvas-container.maplibregl-interactive.maplibregl-track-pointer,
.js-map-3d-container .maplibregl-canvas-container.maplibregl-interactive:active .maplibregl-canvas { cursor: grabbing; }
/* the pins stay clickable-looking */
.js-map-3d-container .mtl-marker,
.js-map-3d-container .mtl-marker * { cursor: pointer; }

.js-map-3d-container .maplibregl-canvas { outline: none; }
.js-map-3d-container .maplibregl-ctrl-bottom-left,
.js-map-3d-container .maplibregl-ctrl-bottom-right { display: none; }

/* ---------------------------------------------------------------- pins --- */
.mtl-marker {
	display: block;
	line-height: 0;
	will-change: transform;
}
.mtl-marker .page-3d-map__pin {
	position: relative;
	display: block;
	opacity: 1;                 /* template gates on body.is-3d-map-loaded  */
	filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .55));
}
body:not(.is-3d-map-loaded) .mtl-marker .page-3d-map__pin { opacity: 0; }

.mtl-marker__label {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translate(-50%, 4px);
	white-space: nowrap;
	font-family: Gilroy, Helvetica, Arial, sans-serif;
	font-size: calc(var(--scale-px, 1px) * 13);
	letter-spacing: .04em;
	line-height: 1.2;
	color: var(--c-beige, #f4f1ec);
	text-shadow: 0 1px 6px rgba(5, 25, 54, .95), 0 0 14px rgba(5, 25, 54, .8);
	pointer-events: none;
	transition: color .3s cubic-bezier(.25, .74, .22, .99);
}
.mtl-marker:hover .mtl-marker__label,
.mtl-marker.is-active .mtl-marker__label { color: var(--c-brick, #f37021); }

/* zoomed out the ten listing pins sit close together — chip the labels and
   flip every other one above its pin (JS adds .is-flip by index parity) so
   the names stay readable */
.mtl-marker.is-far .mtl-marker__label {
	padding: 2px 7px;
	background: rgba(5, 25, 54, .82);
	border: 1px solid rgba(243, 112, 33, .22);
	font-size: calc(var(--scale-px, 1px) * 12);
	text-shadow: none;
}
.mtl-marker.is-far.is-flip .mtl-marker__label {
	top: auto;
	bottom: 100%;
	transform: translate(-50%, -6px);
}

/* --------------------------------------------------------- map overlays --- */
.mtl-map-legend {
	position: absolute;
	left: var(--spacing, 20px);
	bottom: var(--spacing, 20px);
	z-index: 12;
	max-width: calc(var(--scale-px, 1px) * 250);
	padding: calc(var(--scale-px, 1px) * 18) calc(var(--scale-px, 1px) * 20);
	background: rgba(5, 25, 54, .72);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border: 1px solid rgba(243, 112, 33, .28);
	color: var(--c-beige, #f4f1ec);
	opacity: 0;
	transition: opacity 1.2s cubic-bezier(.25, .74, .22, .99);
}
.is-3d-map-loaded .mtl-map-legend { opacity: 1; }

.mtl-map-legend__title {
	font-family: Gilroy, Helvetica, Arial, sans-serif;
	font-size: calc(var(--scale-px, 1px) * 11);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--c-brick, #f37021);
	margin: 0 0 calc(var(--scale-px, 1px) * 12);
}
.mtl-map-legend__list { margin: 0; padding: 0; list-style: none; }
.mtl-map-legend__list li + li { margin-top: calc(var(--scale-px, 1px) * 6); }
.mtl-map-legend__btn {
	display: block;
	width: 100%;
	text-align: left;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	font-family: Gilroy, Helvetica, Arial, sans-serif;
	font-size: calc(var(--scale-px, 1px) * 15);
	line-height: 1.4;
	color: var(--c-beige, #f4f1ec);
	opacity: .82;
	transition: color .3s, opacity .3s;
}
.mtl-map-legend__btn:hover,
.mtl-map-legend__btn.is-active { color: var(--c-brick, #f37021); opacity: 1; }

.mtl-map-overview {
	position: absolute;
	left: var(--spacing, 20px);
	top: calc(var(--spacing, 20px) + var(--scale-px, 1px) * 84);
	z-index: 12;
	padding: calc(var(--scale-px, 1px) * 10) calc(var(--scale-px, 1px) * 18);
	background: rgba(5, 25, 54, .72);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border: 1px solid rgba(243, 112, 33, .28);
	color: var(--c-beige, #f4f1ec);
	font-family: Gilroy, Helvetica, Arial, sans-serif;
	font-size: calc(var(--scale-px, 1px) * 12);
	letter-spacing: .12em;
	text-transform: uppercase;
	cursor: pointer;
	opacity: 0;
	transition: opacity 1.2s cubic-bezier(.25, .74, .22, .99), color .3s, border-color .3s;
}
.is-3d-map-loaded .mtl-map-overview { opacity: 1; }
.mtl-map-overview:hover { color: var(--c-brick, #f37021); border-color: rgba(243, 112, 33, .6); }

/* feed-failure toast — listings-geo.json didn't load, or came back empty;
   the map still renders (no pins), this just says why */
.mtl-map-toast {
	position: absolute;
	left: 50%;
	top: var(--spacing, 20px);
	transform: translateX(-50%);
	z-index: 14;
	max-width: calc(100% - 40px);
	padding: calc(var(--scale-px, 1px) * 12) calc(var(--scale-px, 1px) * 18);
	background: rgba(5, 25, 54, .92);
	border: 1px solid rgba(243, 112, 33, .38);
	color: var(--c-beige, #f4f1ec);
	font-family: Gilroy, Helvetica, Arial, sans-serif;
	font-size: calc(var(--scale-px, 1px) * 13);
	line-height: 1.4;
	text-align: center;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: calc(var(--scale-px, 1px) * 12);
}
/* an explicit `display` on the class above wins the cascade over the
   browser's default [hidden]{display:none} UA rule (author beats UA at
   equal specificity) — restate it here so toggling the hidden attribute
   in JS actually hides the toast */
.mtl-map-toast[hidden] { display: none; }
.mtl-map-toast p { margin: 0; }
.mtl-map-toast a { color: var(--c-brick, #f37021); text-decoration: underline; }
.mtl-map-toast__retry {
	flex: 0 0 auto;
	background: none;
	border: 1px solid rgba(243, 112, 33, .5);
	color: var(--c-brick, #f37021);
	padding: 4px 12px;
	font-family: Gilroy, Helvetica, Arial, sans-serif;
	font-size: calc(var(--scale-px, 1px) * 12);
	text-transform: uppercase;
	letter-spacing: .08em;
	cursor: pointer;
	transition: background .3s, color .3s;
}
.mtl-map-toast__retry:hover { background: var(--c-brick, #f37021); color: var(--c-blue, #051936); }

/* attribution — required by OpenStreetMap's licence, kept small and quiet */
.mtl-map-attrib {
	position: absolute;
	right: calc(var(--spacing, 20px));
	bottom: calc(var(--spacing, 20px) + var(--scale-px, 1px) * 52);
	z-index: 11;
	font-family: Gilroy, Helvetica, Arial, sans-serif;
	font-size: calc(var(--scale-px, 1px) * 10);
	color: rgba(244, 241, 236, .45);
	letter-spacing: .04em;
}
.mtl-map-attrib a { color: inherit; text-decoration: underline; }

/* compass needle colour on navy */
.page-3d-map-compass { background: rgba(5, 25, 54, .72); border: 1px solid rgba(243, 112, 33, .28); }
.page-3d-map-compass span { color: var(--c-beige, #f4f1ec); font-family: Gilroy, Helvetica, Arial, sans-serif; font-size: calc(var(--scale-px, 1px) * 11); }
.page-3d-map-compass__arrow { border-color: rgba(244, 241, 236, .25); border-top-color: var(--c-brick, #f37021); }

/* ------------------------------------------------------ card panel bits --- */
.page-3d-map-modals__item__image { margin-bottom: calc(var(--scale-px, 1px) * 24) !important; }
.page-3d-map-modals__item__image img {
	display: block;
	width: 100%;
	height: calc(var(--scale-px, 1px) * 300);
	object-fit: cover;
	object-position: center;
}
.page-3d-map-modals__item__title { margin-bottom: calc(var(--scale-px, 1px) * 24) !important; }
.page-3d-map-modals__item > p:not([class]) { margin-bottom: 0; }

.mtl-card-cta { margin-top: calc(var(--scale-px, 1px) * 26); }

@media (max-width: 567px), (max-width: 979px) and (max-height: 415px) {
	/* the six-neighbourhood legend used to be dropped entirely on phones for
	   space; now it's the only listing index on this page, so keep it —
	   just cap its height and let it scroll instead of covering the map */
	.mtl-map-legend {
		left: 12px; right: 12px; bottom: 12px;
		max-width: none;
		max-height: 38vh;
		overflow-y: auto;
		padding: 12px 14px;
	}
	.mtl-map-legend__title { font-size: 10px; margin-bottom: 8px; }
	.mtl-map-legend__btn { font-size: 13px; }
	.mtl-map-overview { top: calc(var(--scale-px, 1px) * 74); bottom: auto; left: 12px; }
	/* legend now spans the full width at the bottom on phones (see above),
	   so the attribution moves up to the top-right, clear of both it and
	   the header — still visible, still required by OSM's licence */
	.mtl-map-attrib { top: calc(var(--scale-px, 1px) * 74); bottom: auto; right: 12px; font-size: 9px; }
	.mtl-marker__label { font-size: 11px; }
	.page-3d-map-modals__item__image img { height: calc(var(--scale-px, 1px) * 220); }
	.mtl-map-toast { font-size: 12px; padding: 10px 14px; }
}

/* keep the legend clickable while a card is open (the template's modal
   container spans the full viewport and would otherwise swallow clicks) */
.page-3d-map-modals__container.is-active { pointer-events: none; }
.page-3d-map-modals__container.is-active .page-3d-map-modals,
.page-3d-map-modals__container.is-active .page-3d-map-modals__close { pointer-events: auto; }

/* desktop close button floats over the dark map, not over the light panel */
.page-3d-map-modals__container > .page-3d-map-modals__close { border-color: rgba(244, 241, 236, .38); }
.page-3d-map-modals__container > .page-3d-map-modals__close svg path { stroke: var(--c-beige, #f4f1ec); }
.page-3d-map-modals__container > .page-3d-map-modals__close:hover { border-color: var(--c-brick, #f37021); }
.page-3d-map-modals__container > .page-3d-map-modals__close:hover svg path { stroke: var(--c-brick, #f37021); }
.page-3d-map-modals__container > .page-3d-map-modals__close { color: var(--c-beige, #f4f1ec); }
.page-3d-map-modals__container > .page-3d-map-modals__close:hover { color: var(--c-brick, #f37021); }


/* ==== map 2026-09-17 ==== */

/* the card panel inherited height:100svh from 3d-map60aa.css; the map
   section is now shorter than the viewport, so match it instead of
   overflowing into the footer */
.page-3d-map-modals__container { height: 100%; }

/* The kit's smooth scroll does NOT move this page as one block: html is
   position:fixed and each section is translated on its own. Measured
   2026-09-17 after a 10x600px wheel scroll: .page-3d-map stays at y=0 while
   the footer carries transform translateY(-529px) and slides up OVER the
   map. So the footer's own z-index has to beat every map overlay
   (legend 12, overview 12, attribution 11, compass 11, card panel 100) or
   the legend keeps swallowing the footer's phone and e-mail links — which
   is exactly what the hit-test showed before this rule. */
footer.footer { position: relative; z-index: 101; }

/* the kit gives .page-content a 100svh min-height; with the map section now
   shorter than that, it left a dead 120-px band between the map and the
   footer. Drop it on the map page only, so the footer's real top edge is
   what peeks above the fold. */
.js-page-content:has(.page-3d-map) { min-height: 0; }

/* MapLibre cooperative gestures: a plain wheel scrolls the PAGE (so the
   footer is reachable), Ctrl/Cmd + wheel zooms the map, two fingers move it
   on touch. Style the kit's own navy/beige on the hint overlay. */
.maplibregl-cooperative-gesture-screen {
	background: rgba(5, 25, 54, .72);
	color: var(--c-beige, #f4f1ec);
	font-family: Gilroy, Helvetica, Arial, sans-serif;
	font-size: calc(var(--scale-px, 1px) * 15);
	letter-spacing: .04em;
}
.maplibregl-cooperative-gesture-screen .maplibregl-desktop-message,
.maplibregl-cooperative-gesture-screen .maplibregl-mobile-message {
	padding: calc(var(--scale-px, 1px) * 12) calc(var(--scale-px, 1px) * 18);
	border: 1px solid rgba(243, 112, 33, .28);
	background: rgba(5, 25, 54, .82);
}

/* "SHOW ALL" sat under the site header: measured 2026-09-17 the header is
   146 px tall at 1920, 121 at 1024, 80 at 390, and the button's old
   top (--spacing + 84*scale) put it at y=144 / 106 / 74 — an overlap of
   2 / 15 / 6 px. Push it clear. */
.mtl-map-overview { top: calc(var(--spacing, 20px) + var(--scale-px, 1px) * 112); }

/* the failure toast sat at the very top and covered the header logo (seen in
   the no-WebGL run) — drop it below the header too */
.mtl-map-toast { top: calc(var(--spacing, 20px) + var(--scale-px, 1px) * 112); }

@media (max-width: 567px), (max-width: 979px) and (max-height: 415px) {
	.mtl-map-overview { top: 92px; }
	.mtl-map-toast { top: 140px; }
	/* same story for the OSM attribution, which the phone rules move up to
	   the top-right corner */
	.mtl-map-attrib { top: 96px; }
}

/* ==== end map ==== */


/* ==== map-r1 2026-09-17 ==== */

/* D3 / X1 ROOT FIX - one stacking context for the whole map section.
   Measured before this block (3d-map.html, real Chrome, menu open):
     #menu is .modal{position:fixed;z-index:11} in global60aa.css, while
     .page-3d-map was position:relative with z-index:auto, so it created NO
     stacking context and its children competed with the menu in the ROOT one:
     legend 12, overview 12, toast 14, compass 11, card panel 100, MapLibre
     cooperative-gesture screen 99999.
     elementFromPoint at the 8 nav-item centres returned a .mtl-map-legend*
     element for 3 of them at 1920x1080 (5/8 ok) and for 5 of them at 390x844
     (3/8 ok); a real click on CONTACT opened a listing card instead of
     navigating, twice, at both widths.
   z-index 1, NOT 10: 10 ties with .header and the section comes after the
   header in the DOM, so the map canvas painted OVER the sticky header and
   swallowed the Menu button itself (measured: 0 nav items reachable, two
   runs). 1 keeps the section under the header (10), under the footer (2)
   and under the menu (11). */
.page-3d-map { isolation: isolate; z-index: 1; }

/* the footer only needed 101 because the card panel's 100 was loose in the
   root context; the section is one z-index-1 layer now, so 2 is enough. 101
   was itself painting OVER the menu (11) wherever the footer's top edge shows
   above the fold (390x844: the map section ends at y=804). */
footer.footer { z-index: 2; }

/* M12 - the page shipped no <h1> at all (0 in the served HTML, 0 in the live
   DOM). The heading and the SHOW ALL button now share one absolutely
   positioned block and stack in normal flow, so the button can never be
   pushed out of place by the heading's own height. */
.mtl-map-head {
	position: absolute;
	left: var(--spacing, 20px);
	top: calc(var(--spacing, 20px) + var(--scale-px, 1px) * 112);
	z-index: 12;
	max-width: calc(var(--scale-px, 1px) * 430);
}
.mtl-map-h1 {
	margin: 0 0 calc(var(--scale-px, 1px) * 14);
	font-family: Gilroy, Helvetica, Arial, sans-serif;
	font-size: calc(var(--scale-px, 1px) * 26);
	line-height: 1.16;
	letter-spacing: .01em;
	text-transform: uppercase;
	color: var(--c-beige, #f4f1ec);
	/* the map underneath is navy but not uniform - park green, water, roads */
	text-shadow: 0 2px 20px rgba(5, 25, 54, .9), 0 1px 4px rgba(5, 25, 54, .95);
}
.mtl-map-h1 span { color: var(--c-brick, #f37021); white-space: nowrap; }

/* SHOW ALL keeps its own look; only its positioning moves into the flow of
   .mtl-map-head (it was pinned to the same corner coordinates as the heading) */
.mtl-map-head .mtl-map-overview {
	position: relative;
	top: auto; left: auto; right: auto; bottom: auto;
	display: inline-block;
}

@media (max-width: 567px), (max-width: 979px) and (max-height: 415px) {
	.mtl-map-head { top: 92px; left: 12px; max-width: 56vw; }
	.mtl-map-h1 { font-size: 17px; margin-bottom: 10px; }
	.mtl-map-head .mtl-map-overview { top: auto; left: auto; }
	/* the OSM credit shares the top row on phones - keep the two clear */
	.mtl-map-attrib { max-width: 36vw; text-align: right; }
}

/* Containing the section costs the pin card its escape from the sticky
   header: the card's close button sits at y=50, inside .header's own box, and
   was only clickable while the card floated at z-index 100 in the ROOT
   context. Measured after the containment: elementFromPoint(1390, 50)
   returned DIV.row.row--middle-xs (the header row), ok:false, where it had
   returned the button before. Drop the button to the same row as the heading,
   using the very calc the SHOW ALL button already uses to clear the header
   (header measured 146 tall at 1920, 121 at 1024, 80 at 390). The phone
   layout hides this button (is-hidden--sm-down), so only the desktop
   breakpoint needs it. */
@media (min-width: 568px) and (max-aspect-ratio: 13/9), (min-width: 668px) and (min-height: 416px), (min-width: 980px) {
	.page-3d-map-modals__container > .page-3d-map-modals__close {
		margin-top: calc(var(--spacing, 20px) + var(--scale-px, 1px) * 112);
	}
}

/* ==== end map-r1 ==== */