/* Ampera · Vietos žemėlapis (Figma desktop 1103:3656, states 1103:3869 / 1103:4439,
   mobile 1103:9315).
   Geometry: the base image is SQUARE (1:1). Desktop viewport = its centred
   878×700 crop (canvas top −89/700 = −12.714%); mobile viewport = a 375×600
   window (canvas width 878/375 = 234.133%, left −233/375, top −189/600).
   pin_x / pin_y are % of the square image, so one dataset feeds both crops.
   Zoom = transform scale on the canvas (origin = the AMPERA pin), while each
   0×0 marker anchor counter-scales by --map-inv so pins keep their size. */

.ampera-city-map {
	padding-block: 96px;
}

.ampera-city-map__container {
	max-width: 1296px;
	margin: 0 auto;
	padding-inline: 72px;
}

.ampera-city-map__divider {
	display: block;
	height: 1px;
	background: #eee;
	margin-bottom: 24px;
}

.ampera-city-map__layout {
	display: flex;
	gap: 24px;
	align-items: stretch;
}

/* ---- Left rail ---- */

.ampera-city-map__rail {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 40px;
	padding-top: 12px;
	padding-bottom: 56px;
}

.ampera-city-map__intro {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.ampera-city-map__heading {
	margin: 0;
	font-family: var(--wp--preset--font-family--telegraf);
	font-weight: 800;
	font-size: clamp(30px, 4vw, 48px);
	line-height: 1.3;
	color: var(--wp--preset--color--juoda);
}

.ampera-city-map__address {
	margin: 0;
	font-size: 16px;
	line-height: 24px;
	color: var(--wp--preset--color--juoda);
}

.ampera-city-map__placeholder {
	margin: 0;
	opacity: 0.5;
}

.ampera-city-map__filters {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.ampera-city-map__filter {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	text-align: left;
	font-family: var(--wp--preset--font-family--telegraf);
	color: var(--wp--preset--color--juoda);
}

.ampera-city-map__filter-circle {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border: 1px solid rgba(23, 30, 40, 0.4);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--juoda);
	transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.ampera-city-map__filter-circle svg {
	width: 32px;
	height: 32px;
}

.ampera-city-map__filter-label {
	font-size: 16px;
	line-height: 24px;
	font-weight: 400;
	opacity: 0.6;
}

.ampera-city-map__filter.is-active .ampera-city-map__filter-circle {
	background: var(--wp--preset--color--juoda);
	border-color: var(--wp--preset--color--juoda);
	color: var(--wp--preset--color--balta);
}

.ampera-city-map__filter.is-active .ampera-city-map__filter-label {
	font-weight: 800;
	opacity: 1;
}

@media (hover: hover) {
	.ampera-city-map__filter:not(.is-active):hover .ampera-city-map__filter-circle {
		border-color: var(--wp--preset--color--juoda);
	}
	.ampera-city-map__filter:not(.is-active):hover .ampera-city-map__filter-label {
		opacity: 1;
	}
}

.ampera-city-map__rule {
	flex: 0 0 auto;
	width: 1px;
	background: #eee;
}

/* ---- Stacked variant (Vieta): centred heading + address, map centred below.
   Set per instance via the block's `layout` attribute — Jūsų verslui keeps the
   side-by-side rail. ---- */

/* No hairline above the centred headline, and the headline sits higher. */
.ampera-city-map--stacked {
	padding-block: 56px 96px;
}

.ampera-city-map--stacked .ampera-city-map__divider {
	display: none;
}

.ampera-city-map--stacked .ampera-city-map__layout {
	flex-direction: column;
	align-items: center;
	gap: 40px;
}

.ampera-city-map--stacked .ampera-city-map__rail {
	flex: none;
	padding: 0;
	gap: 32px;
	align-items: center;
	text-align: center;
}

.ampera-city-map--stacked .ampera-city-map__intro {
	gap: 16px;
	align-items: center;
}

.ampera-city-map--stacked .ampera-city-map__rule {
	display: none;
}

.ampera-city-map--stacked .ampera-city-map__stage {
	flex: none;
	width: 100%;
	max-width: 878px;
}

/* Desktop stacked (client 2026-07-29, 2nd pass: „remove the gradients from the
   sides and align the map in the middle"). The canvas now FILLS the viewport
   edge to edge, so there are no side gaps to fade and nothing to align: the
   map is the box. A square source shown across its POI rows (~11%–86%, every
   pin, chip and silhouette) makes the window 4:3, hence the width cap: wider
   than ~1200px and the section would grow taller than a screen. */
@media (min-width: 901px) {
	/* Break-out centring (fixed 2026-08-22). This used to rely on
	   `margin-inline: auto` alone, with a note saying the width "fits inside
	   the content column" — true until v5 raised the cap to 1700px, which is
	   WIDER than the 1296 column. Auto margins resolve to 0 on an overflowing
	   box, so the stage stayed pinned to the column's left edge and broke out
	   to the RIGHT only: at 1920 it ran 92px past the right edge, at 2560 it
	   left 632px of air on the left against 228px on the right. See the
	   margin-inline formula below for how both cases are handled at once. */
	.ampera-city-map--stacked .ampera-city-map__stage {
		max-width: none;
		/* Client 2026-08-07 („žemėlapis massive") → 2026-08-10 („now too small,
		   do something in between"): the 4:3 window still derives from viewport
		   HEIGHT so it roughly fits a laptop screen, but with a lighter 140px
		   reserve — the map may run a touch past the fold with the heading,
		   which the client prefers over a small map. Tall monitors keep the
		   old 1200px cap unchanged. */
		/* 2026-08-10 (2nd pass): „tiny bit bigger" — reserve 140 → 120px.
		   (3rd pass): reserve → 100px and the window is now 5:4 (see below),
		   so height-bound width = height × 1.25. */
		/* Client 2026-08-10 (5th pass, „KATEDRA cut — all tags must fit"): below
		   ~845px of width the fixed-px marker stacks outgrow the 6:5 window and
		   Katedra's plate clips — and REAL browser viewports are ~110-170px
		   shorter than the screen (browser chrome), so 900px screens actually
		   land there. The height-derived arm now FLOORS at 850px: every tag
		   always fits, and on short viewports the map scrolls a little instead
		   of ever clipping — completeness beats the fold. */
		/* v5 (2:1 art): the client asked for a map that "fits the whole screen".
		   The stage breaks OUT of the 1296 content column — 1700px cap and only
		   a 64px side gutter, so on large monitors the city spans nearly the
		   full width; height-derived arm keeps it inside one screen. */
		--stage-w: min(1700px, calc(100vw - 64px), max(900px, calc((100vh - 100px) * 2)));
		width: var(--stage-w);
		/* Centre in the content column whatever the width. A percentage margin
		   resolves against the column's width, so this is (1296 - stage)/2:
		   positive when the stage fits inside, NEGATIVE when it breaks out.
		   `margin-inline: auto` cannot do the break-out case (auto collapses to
		   0 on an overflowing box), and `left: 50% + translate` cannot do the
		   narrow case (it shifts from the STATIC position, which auto margins
		   have already centred — the map ended up 24px right of centre at the
		   client's 1440x724). One formula, both cases. */
		margin-inline: calc((100% - var(--stage-w)) / 2);
	}

	.ampera-city-map--stacked .ampera-city-map__viewport {
		/* 2026-08-10 (4th pass): the content band — BUSINESS STADIUM silhouette
		   top (13.4% pin − ~84px of fixed icon stack) down to KATEDRA's plate
		   (82.7% + fixed plate) — exceeds what 4:3 (75%) or even 5:4 (80%)
		   windows show once the fixed-px markers are counted at real canvas
		   widths. 6:5 shows 83.3%, and the markers compact to 0.88 below,
		   which together hold BOTH ends at every stacked width ≥ ~790px. */
		/* v3 wide art: the window IS the full 3:2 composition — no crop at
		   all, so nothing can ever clip at any width. */
		aspect-ratio: 1600 / 800;
		background: none;
	}

	/* Markers compact slightly so the fixed-px icon stacks eat less of the
	   canvas band (see the aspect-ratio note). Composes with the zoom
	   counter-scale; origin 0 0 keeps every anchor point in place. */
	.ampera-city-map--stacked .ampera-city-map__marker,
	.ampera-city-map--stacked .ampera-city-map__deco,
	.ampera-city-map--stacked .ampera-city-map__home {
		transform: scale(calc(var(--map-inv, 1) * var(--marker-scale, 1) * 0.88));
	}

	.ampera-city-map--stacked .ampera-city-map__canvas {
		width: 100%;
		left: 0;
		/* 2026-08-04 (pin-above-plate stacking): plates hang BELOW the pins, so
		   the crop must reach KATEDRA's plate bottom = 82.688% of the canvas
		   + a FIXED ~30px of plate. The % part scales with the canvas, the px
		   part covers the fixed plate: offset O = 10.25%·(0.75W) + 34px
		   ≡ 7.69%·W + 34px, which keeps the plate visible at EVERY stacked
		   width (a flat % failed below ~1100px, where fixed-px plates eat a
		   larger share of the shrinking canvas). Trade-off: below ~1073px the
		   BUSINESS STADIUM silhouette's top few px trim instead — plates win.
		   NOTE: the % resolves against the VIEWPORT height, not the canvas. */
		/* v3 wide art fills the window exactly — no crop offset. */
		top: 0;
		transform-origin: 49.182% calc(47.213% - 46px); /* see the base rule below */
	}
}


/* Mobile keeps the full-bleed map window (the -24px gutters need the default
   stretch, not the stacked width cap). */
@media (max-width: 900px) {
	.ampera-city-map--stacked .ampera-city-map__stage {
		width: auto;
		max-width: none;
		align-self: stretch;
	}
}

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

.ampera-city-map__stage {
	position: relative;
	flex: 0 1 878px;
	min-width: 0;
}

.ampera-city-map__viewport {
	position: relative;
	overflow: hidden;
	/* v6: both layouts show the FULL 2:1 composition — no crop, so clipping
	   is impossible and Vieta/Verslui read identically. */
	aspect-ratio: 1600 / 800;
	background: var(--wp--preset--color--balta);
}

.ampera-city-map__canvas {
	position: absolute;
	/* Wide 1536x1024 art (v3): the original SQUARE lives at x 256..1280. In
	   the side layout the window must show the same square crop as before:
	   canvas at 150% width / -25% left puts the FIELD exactly where the old
	   square canvas sat (878px in a 878px window), top crop unchanged. */
	/* v5 wide art (1600x800): the POI field sits at 25%/18.75%, 37.5x75% of
	   the canvas. Side layout shows the field at the old square scale:
	   canvas 266.67% wide puts the 37.5% field at exactly window width. */
	left: 0;
	top: 0;
	width: 100%;
	aspect-ratio: 1600 / 800;
	/* Zoom centres on the AMPERA pin (origin-y = pin tip-y − 5.24%: the 80px
	   circle centre sits 46px above the tip on the 878px canvas). Move BOTH
	   whenever the pin moves. */
	/* Coupled to the home pin WITHOUT a second hardcoded number: the 80px
	   teardrop circle sits a fixed 46px above the tip, so the origin is simply
	   the pin's own y minus 46px. Correct at ANY canvas width, unlike the old
	   fixed 42.16% which only held for an 878px canvas. */
	transform-origin: 49.182% calc(47.213% - 46px);
	transform: scale(var(--map-zoom, 1));
	transition: transform 0.45s ease;
}

/* The POI overlay's coordinate space: exactly the original square region of
   the wide art. Pin/zone percentages resolve against THIS box, so the ACF
   data needed no migration for the wide composition. */
.ampera-city-map__field {
	/* v6: POI percentages are of the FULL artwork (OSM-projected), so the
	   field is simply the whole canvas. */
	position: absolute;
	inset: 0;
}

.ampera-city-map__base {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ampera-city-map__group {
	position: absolute;
	inset: 0;
	color: var(--pin-color, var(--wp--preset--color--auksine));
}

/* 0×0 anchors: children hang off the exact pin point; the wrapper
   counter-scales so markers keep their designed size while zooming. */
.ampera-city-map__marker,
.ampera-city-map__deco,
.ampera-city-map__home {
	position: absolute;
	width: 0;
	height: 0;
	transform: scale(calc(var(--map-inv, 1) * var(--marker-scale, 1)));
	transform-origin: 0 0;
	transition: transform 0.45s ease;
}

/* Marker anchor = the teardrop tip (28×34 pin, chip at pin-left +19 / +5). */
.ampera-city-map__marker-pin {
	position: absolute;
	left: -14px;
	top: -34px;
	width: 28px;
	height: 34px;
}

.ampera-city-map__marker-pin svg,
.ampera-city-map__deco svg {
	display: block;
}

/* Client 2026-07-31: the landmark silhouette rides WITH its tag (it used to
   float at the landmark's own coordinates). 2026-08-04: with the plate now
   hanging BELOW the pin, the silhouette sits centred above the PIN — the
   stack reads silhouette → pin → title. Offsets from the chip box: the pin
   centre is 14px right of the chip's left edge, its top 40px above the chip
   top (tip 6 + pin 34). */
.ampera-city-map__marker-icon {
	position: absolute;
	bottom: calc(100% + 44px);
	left: 14px;
	translate: -50% 0;
	margin-bottom: 0;
}

.ampera-city-map__marker-icon svg {
	display: block;
}

.ampera-city-map__chip {
	position: absolute;
	/* Client 2026-08-04: the plate hangs BELOW the pin, left edges aligned —
	   the pin reads at the title's top-left on every tag (no mirrored
	   variants; the old side-by-side layout put the title over the pin point). */
	left: -14px;
	top: 6px;
	display: block;
	white-space: nowrap;
	font-family: var(--wp--preset--font-family--telegraf);
	font-weight: 800;
}

.ampera-city-map__chip-name {
	display: inline-block;
	background: var(--wp--preset--color--white);
	/* Standalone plate below the pin: full border (the missing left edge only
	   made sense while the plate was attached to the pin's side). */
	border: 1px solid currentColor;
	padding: 5px 10px;
	font-size: 12px;
	line-height: 1;
	text-transform: uppercase;
}

.ampera-city-map__chip-walk {
	display: block;
	padding-left: 12px;
	margin-top: 2px;
	font-size: 10px;
	line-height: 1;
}

.ampera-city-map__deco > svg {
	position: absolute;
	left: 0;
	top: 0;
	translate: -50% -50%;
}

/* AMPERA teardrop: 80px juoda circle + logo + tail; anchored at the tip.
   Client correction 2026-07 (2nd pass): "dar šiek tiek žemiau ir arčiau
   gatvės" — tip moved to image coords 46.0% / 47.4%, ~1.5% west of the
   Rinktinės g. kerb (west kerb ≈47.5% at this latitude), still on the plot
   between Rinktinės g., Žvejų g. and the Neris. The zoom transform-origin is
   coupled to this point (same x, y − 5.24%) in BOTH rules above — the stacked
   override (Vieta) and the base rule (Jūsų verslui). Move all three together. */
.ampera-city-map__home {
	/* v5: re-seated on the TRUE Rinktinės × Neris position in the new field
	   (was 46/47.4 in the old square). The zoom origin follows this point. */
	left: 49.182%;
	top: 47.213%;
	z-index: 3;
}

/* Mini-tag under the AMPERA teardrop ("Arti ETM terasos" — client field). */
.ampera-city-map__home-note {
	position: absolute;
	top: calc(100% + 6px);
	left: 50%;
	translate: -50% 0;
	white-space: nowrap;
	padding: 3px 8px;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--juoda);
	color: var(--wp--preset--color--juoda);
	font-family: var(--wp--preset--font-family--telegraf);
	font-weight: 700;
	font-size: 11px;
	line-height: 14px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.ampera-city-map__home-circle {
	position: absolute;
	bottom: 6px;
	left: 0;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 80px;
	height: 80px;
	background: var(--wp--preset--color--juoda);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--balta);
}

.ampera-city-map__home-circle svg {
	width: 46px;
	height: auto;
}

.ampera-city-map__home-tail {
	position: absolute;
	bottom: 0;
	left: 0;
	transform: translateX(-50%);
	width: 20px;
	height: 10px;
	background: var(--wp--preset--color--juoda);
	clip-path: polygon(0 0, 100% 0, 50% 100%);
}

/* ---- Zoom control (Figma 1103:3698: white card, +/− 42px, hairline) ---- */

.ampera-city-map__zoom {
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 6px;
	background: var(--wp--preset--color--white);
	border: 1px solid #f5f7fb;
	box-shadow: 0 0 6.5px rgba(218, 218, 218, 0.5);
	z-index: 4;
}

.ampera-city-map__zoom-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--juoda);
	cursor: pointer;
}

.ampera-city-map__zoom-btn:disabled {
	opacity: 0.35;
	cursor: default;
}

.ampera-city-map__zoom-rule {
	display: block;
	background: #e6e6e6;
	height: 1px;
}

@media (prefers-reduced-motion: reduce) {
	.ampera-city-map__canvas,
	.ampera-city-map__marker,
	.ampera-city-map__deco,
	.ampera-city-map__home,
	.ampera-city-map__filter-circle {
		transition: none;
	}
}

/* ---- Mobile (Figma 1103:9315: 375 frame, filters = 3 centred columns,
   full-bleed 375×600 map window) ---- */

@media (max-width: 900px) {
	.ampera-city-map {
		padding-block: 80px;
	}

	.ampera-city-map__container {
		padding-inline: 24px;
	}

	/* Figma 1103:9316: the top hairline runs full-bleed on mobile. */
	.ampera-city-map__divider {
		margin-inline: -24px;
	}

	.ampera-city-map__layout {
		flex-direction: column;
		gap: 16px;
	}

	.ampera-city-map__rail {
		padding-bottom: 0;
		gap: 48px;
	}

	.ampera-city-map__intro {
		gap: 16px;
	}

	.ampera-city-map__rule {
		display: none;
	}

	.ampera-city-map__filters {
		flex-direction: row;
		align-items: flex-start;
		gap: 8px;
	}

	.ampera-city-map__filter {
		flex: 1 1 0;
		flex-direction: column;
		align-items: center;
		gap: 8px;
		text-align: center;
	}

	.ampera-city-map__filter-circle {
		width: 50px;
		height: 50px;
	}

	.ampera-city-map__filter-circle svg {
		width: 30px;
		height: 30px;
	}

	.ampera-city-map__filter-label {
		font-size: 12px;
		line-height: 16px;
	}

	/* Mobile map — client 2026-08-22: „scale everything to mobile as well, make
	   it responsive", with poemos.lt as the reference: the WHOLE city visible at
	   once, everything shrunk to suit, no swiping.
	   This replaces the 2026-07-29 decision (a detail crop that panned, because
	   seven FIXED-size chips could not fit a 390px map). The blocker there was
	   that the chips did not scale — the marker chrome was pinned to desktop
	   pixels, so one plate spanned a fifth of the whole map. Now the chrome has
	   its own scale knob and long names wrap, so the full map does fit. The
	   text list below the map stays: it is still the readable way to scan all
	   seven, and it carries the walk times. */
	.ampera-city-map__stage {
		flex-basis: auto;
		margin-inline: -24px;
	}

	.ampera-city-map__viewport {
		/* Client 2026-08-22 (2nd pass): "zoom in closer to AMPERA and make the
		   map a bit bigger — but so all the buildings are still seen".
		   Measured with the plates hidden, every marker and silhouette lives
		   inside viewBox x 160..1192, y 66..674 — so a third of the art's width
		   is empty margin. Cropping to x 145..1215 / y 50..700 (1070x650) keeps
		   every landmark with room to spare and makes the map ~1.5x bigger on a
		   390px screen (0.244 -> 0.364 px per viewBox unit). */
		/* Client 2026-08-22 (3rd pass): "all the action is on the RIGHT — cut it
		   in half, don't show the left at all, zoom in, and make the section
		   more vertical so the project's logo is readable".
		   Crop = viewBox x 530..1330, full height (800 x 800) — a SQUARE window:
		   390x390 on a 390px screen,
		   against 390x279 before and 390x195 two passes ago — 0.513 px per
		   viewBox unit, 2.1x the first attempt.
		   LNOBT and GEDIMINO PR sit west of the crop and are therefore off the
		   phone map by design; both are still named in the list below it. */
		aspect-ratio: 1 / 1;
		overflow: hidden;
	}

	.ampera-city-map__canvas {
		position: absolute;           /* not `relative`: keeps it out of flow */
		width: 200%;                  /* 1600 / 800 */
		left: -66.25%;                /* crop starts at viewBox x = 530 — far
		                                 enough east that KALNŲ PARKAS's
		                                 single-line plate clears the right
		                                 edge instead of being sliced */
		top: 0;
	}

	/* Marker chrome scales WITH the map instead of staying at desktop pixels —
	   that was the real blocker in 2026-07-29: one plate spanned a fifth of the
	   whole city, so the map had to be cropped and panned. */
	.ampera-city-map__field {
		/* NB `scale()` takes a UNITLESS number, so this cannot be derived from
		   vw — a `clamp(..., 0.1154vw, ...)` here is a length, the whole
		   transform is invalid, and every marker silently renders at full size.
		   Fixed steps per breakpoint instead.
		   The crop above enlarged the map ~1.5x, and the chrome is fixed-px, so
		   it now covers proportionally LESS of the city — which buys room to
		   make the pins and silhouettes physically bigger as the client asked. */
		--marker-scale: 0.66;
	}

	/* Name plates are BACK on the phone (client 2026-08-22, 4th pass). They were
	   dropped when the whole 1600-unit city had to fit 390px: seven plates at a
	   legible size collided, and at a non-colliding size the text was ~4px.
	   Cropping to the eastern half changed the arithmetic — 0.5 px per viewBox
	   unit instead of 0.244, and six landmarks instead of eight — so an 11px
	   plate now fits. `.chip` is `white-space: nowrap` by default, which is why
	   an earlier "long names wrap" comment never did anything; the wrap has to
	   be set on the CHIP as well as the name. */
	/* Client 2026-08-22 (5th pass): "one line and smaller, so it doesn't overlap
	   the building icons". Wrapping to three lines made a plate TALL, and height
	   is what collided — Business Stadium's plate reached down onto the Sporto
	   rūmai roof. One short line plus a smaller marker scale keeps the whole
	   stack shallow: measured plate-over-icon drops from 368px2 to ZERO. */
	.ampera-city-map__chip-name {
		font-size: 14px;          /* x0.66 marker scale = ~9.2px on screen */
		line-height: 1.2;
		padding: 1px 4px;
	}

	.ampera-city-map__chip-walk {
		font-size: 10px;
		line-height: 12px;
	}

	/* Smaller location pins (client, same pass). The anchor is the teardrop TIP,
	   so scale from bottom-centre and the pin keeps pointing at its exact spot. */
	.ampera-city-map__marker-pin {
		transform: scale(0.7);
		transform-origin: 50% 100%;
	}

	/* West of the crop: the pin is off-frame but its plate would hang back into
	   view as a half-cut tag. */
	.ampera-city-map__marker--west {
		display: none;
	}

	/* The POI text list stops being screen-reader-only on phones. TWO classes,
	   because the .ampera-sr-only utility in the theme stylesheet is a single
	   class and would otherwise win on load order. */
	.ampera-city-map__poi-list.ampera-sr-only {
		position: static;
		width: auto;
		height: auto;
		margin: 24px 0 0;
		padding: 0;
		overflow: visible;
		clip: auto;
		clip-path: none;
		white-space: normal;
		border: 0;
	}

	.ampera-city-map__poi-list h3 {
		margin: 0 0 12px;
		font-family: var(--wp--preset__font-family--telegraf, var(--wp--preset--font-family--telegraf));
		font-weight: 800;
		font-size: 12px;
		line-height: 16px;
		text-transform: uppercase;
		letter-spacing: 0.04em;
		color: var(--wp--preset--color--juoda);
	}

	.ampera-city-map__poi-list ul {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 8px 16px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.ampera-city-map__poi-list li {
		display: flex;
		align-items: baseline;
		gap: 6px;
		font-size: 13px;
		line-height: 18px;
		color: var(--wp--preset--color--juoda);
	}

	.ampera-city-map__poi-list li::before {
		content: "";
		flex: 0 0 auto;
		width: 6px;
		height: 6px;
		border-radius: var(--wp--custom--radius--pill);
		background: var(--wp--preset--color--auksine);
	}

	/* (Mobile flip rules removed 2026-08-04 — every tag now stacks pin-above-
	   plate, so nothing can clip the canvas edge.) */

	/* AMPERA pin — the one marker that should read first (client 2026-08-22:
	   "make the AMPERA tag bigger"). Everything else on the phone came DOWN this
	   round (marker scale 0.70 -> 0.66) to keep the plates off the silhouettes,
	   so the project's own pin is sized up here to stay dominant: 72px circle
	   against the landmarks' 45px buildings, = 47px on screen after the 0.66
	   marker scale. */
	.ampera-city-map__home-circle {
		width: 72px;
		height: 72px;
		bottom: 4px;
	}

	.ampera-city-map__home-circle svg {
		width: 46px;
	}

	.ampera-city-map__home-tail {
		width: 22px;
		height: 11px;
	}

	/* Horizontal zoom control, bottom right (Figma 1103:9517). Kept for layout
	   history; the control itself is hidden at every width now — see the note
	   at the end of this file. */
	.ampera-city-map__zoom {
		top: auto;
		right: 12px;
		bottom: 12px;
		transform: none;
		flex-direction: row;
	}

	.ampera-city-map__zoom-rule {
		width: 1px;
		height: auto;
	}

	.ampera-city-map__zoom-btn[data-ampera-map-zoom='out'] {
		order: -1;
	}

	/* Client 2026-07-30 (item 2): the map starts AT minimum zoom, so a visible
	   but dead "−" reads as broken ("neduoda atsizoominti"). Hide it (and its
	   divider) while zoom-out is impossible; it appears once "+" is used. */
	.ampera-city-map__zoom-btn[data-ampera-map-zoom='out']:disabled {
		display: none;
	}
	.ampera-city-map__zoom:has(.ampera-city-map__zoom-btn[data-ampera-map-zoom='out']:disabled) .ampera-city-map__zoom-rule {
		display: none;
	}
}

/* Entrance: the styled map settles, then the markers surface in loose waves. */
@media (prefers-reduced-motion: no-preference) {
	.ampera-city-map .ampera-city-map__base {
		transition: opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1), transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
	}
	.ampera-city-map .ampera-city-map__marker,
	.ampera-city-map .ampera-city-map__deco {
		transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
		transition-delay: 0.5s;
	}
	.ampera-city-map .ampera-city-map__marker:nth-child(3n),
	.ampera-city-map .ampera-city-map__deco:nth-child(3n) {
		transition-delay: 0.72s;
	}
	.ampera-city-map .ampera-city-map__marker:nth-child(3n + 1),
	.ampera-city-map .ampera-city-map__deco:nth-child(3n + 1) {
		transition-delay: 0.94s;
	}
	.ampera-city-map.ampera-reveal:not(.is-visible) .ampera-city-map__base {
		opacity: 0;
		transform: scale(1.015);
	}
	.ampera-city-map.ampera-reveal:not(.is-visible) .ampera-city-map__marker,
	.ampera-city-map.ampera-reveal:not(.is-visible) .ampera-city-map__deco {
		opacity: 0;
		transform: translateY(8px);
	}
}

/* Editor only: the section is switched off for the live site. Kept visible in
   the editor so the client can switch it back on. */
.ampera-city-map--off {
	opacity: 0.45;
	outline: 2px dashed var(--wp--preset--color--auksine);
	outline-offset: -8px;
}

/* Client 2026-07-29: the +/- zoom is useless where the entire POI range is
   already in frame — originally desktop only, because mobile panned a closer
   crop. Since 2026-08-22 the phone shows the whole city too, so the same
   reasoning applies there: worse, zoom is implemented as a TRANSFORM, which
   creates no scrollable overflow, so a zoomed-in phone user could not pan to
   what the zoom pushed off screen. Hidden at every width (display:none also
   drops it from the tab order).
   Two classes + placed last, because the base .ampera-city-map__zoom rule
   further up would otherwise win on source order. */
.ampera-city-map .ampera-city-map__zoom {
	display: none;
}

/* (Desktop flip-wide rules removed 2026-08-04 — pin-above-plate stacking
   fits the right-most POI at every width.) */


/* ============================================================
   Illustrated-base reveal — RE-ORDERED (client 2026-08-22).
   Armed ONLY by JS (.amp-anim-armed) and outside reduced motion, so no-JS and
   reduced-motion visitors get the finished map instantly.

   Four beats on .amp-drawn:
     1. the AMPERA tag, ALONE;
     2. the other landmarks, ONE BY ONE, nearest the pin first (--mi is a beat
        index assigned by distance in render.php, not ACF row order);
     3. the river and the streets DRAW, starting in the middle beside AMPERA and
        spreading outward: every arm carries --sd, its own distance from the pin
        normalised 0..1 (baked by tools/map/build_map.py), and is emitted
        near-end FIRST so its dash grows AWAY from the centre;
     4. each street name lights just behind the wave that reached it.

   Retuning is a token edit below. --sd is geometry: it changes only when the
   art or the pin moves, and then build_map.py regenerates it.
   ============================================================ */
.ampera-city-map {
	--amp-home-in: 0.1s;      /* 1 */
	--amp-home-dur: 0.55s;
	--amp-poi-t0: 0.75s;      /* 2 */
	--amp-poi-step: 0.17s;
	--amp-poi-dur: 0.45s;
	--amp-geo-t0: 1.95s;      /* 3 */
	--amp-wave: 1.25s;        /* centre -> far edge */
	--amp-draw-dur: 1s;
	--amp-label-lag: 0.45s;   /* 4 */
	--amp-label-dur: 0.7s;
}

.ampera-city-map__base--drawn {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}

/* Every layer inside the SVG is hidden below, so the wrapper simply uncovers
   with the geometry — it is the only cover a fill-only junction patch has. */
.amp-anim-armed .ampera-city-map__base--drawn {
	opacity: 0;
	transition: opacity 0.4s ease calc(var(--amp-geo-t0) - 0.1s);
}

.amp-anim-armed .amp-map-labels > text,
.amp-anim-armed .amp-map-streets > .amp-map-fill,
.amp-anim-armed .ampera-city-map__marker,
.amp-anim-armed .ampera-city-map__deco,
.amp-anim-armed .ampera-city-map__home {
	opacity: 0;
}

.amp-drawn .ampera-city-map__base--drawn {
	opacity: 1;
}

/* 1. AMPERA, alone. */
.amp-drawn .ampera-city-map__home {
	animation: ampMapFadeIn var(--amp-home-dur) ease var(--amp-home-in) forwards;
}

/* 2. The other landmarks, one by one. */
.amp-drawn .ampera-city-map__marker,
.amp-drawn .ampera-city-map__deco {
	animation: ampMapFadeIn var(--amp-poi-dur) ease forwards;
	animation-delay: calc(var(--amp-poi-t0) + var(--mi, 0) * var(--amp-poi-step));
}

/* 3. River + streets: dash lengths measured inline by map.js; --sd and the
   near-end-first vertex order are baked in by build_map.py. */
.amp-drawn .amp-map-river > path,
.amp-drawn .amp-map-streets > path,
.amp-drawn .amp-map-streets > circle {
	animation: ampMapStreetDraw var(--amp-draw-dur) ease-out forwards;
	animation-delay: calc(var(--amp-geo-t0) + var(--sd, 0) * var(--amp-wave));
}

/* A fill patch has no stroke, so it cannot be dash-drawn — it fades instead. */
.amp-drawn .amp-map-streets > .amp-map-fill {
	animation: ampMapFadeIn var(--amp-draw-dur) ease forwards;
	animation-delay: calc(var(--amp-geo-t0) + var(--sd, 0) * var(--amp-wave));
}

/* 4. Names, each just behind its own stretch of road. */
.amp-drawn .amp-map-labels > text {
	animation: ampMapFadeIn var(--amp-label-dur) ease forwards;
	animation-delay: calc(var(--amp-geo-t0) + var(--sd, 0) * var(--amp-wave) + var(--amp-label-lag));
}

@keyframes ampMapStreetDraw {
	to { stroke-dashoffset: 0; }
}

@keyframes ampMapFadeIn {
	to { opacity: 1; }
}

/* ============================================================
   Landmarks as heroes (client 2026-08-21, poemos.lt reference).

   The buildings are what make a city recognisable, so they come FIRST in the
   visual hierarchy: drawn large, painted above every road and the river, and
   each one carries a white halo that follows its own silhouette — roads
   approach but never touch the icon or its name plate. The halo is built from
   stacked drop-shadows rather than a box, so it hugs the real outline instead
   of putting a rectangle on the map.
   ============================================================ */

.ampera-city-map__deco,
.ampera-city-map__marker-icon {
	z-index: 2; /* above the base artwork; the AMPERA pin (3) still tops all */
}

.ampera-city-map__deco > svg {
	/* Heroes: roughly double the old silhouette. */
	scale: 2;
	/* Small blur repeated builds a TIGHT opaque halo (a big blur reads as a
	   glow); scale:2 doubles it on screen, so keep the radius small here. */
	filter:
		drop-shadow(0 0 1.7px var(--wp--preset--color--white))
		drop-shadow(0 0 1.7px var(--wp--preset--color--white))
		drop-shadow(0 0 1.7px var(--wp--preset--color--white))
		drop-shadow(0 0 1.7px var(--wp--preset--color--white))
		drop-shadow(0 0 1.7px var(--wp--preset--color--white));
}

.ampera-city-map__marker-icon svg {
	transform-origin: 50% 100%;
	scale: 2;
	/* Small blur repeated builds a TIGHT opaque halo (a big blur reads as a
	   glow); scale:2 doubles it on screen, so keep the radius small here. */
	filter:
		drop-shadow(0 0 1.7px var(--wp--preset--color--white))
		drop-shadow(0 0 1.7px var(--wp--preset--color--white))
		drop-shadow(0 0 1.7px var(--wp--preset--color--white))
		drop-shadow(0 0 1.7px var(--wp--preset--color--white))
		drop-shadow(0 0 1.7px var(--wp--preset--color--white));
}

/* The name plate keeps its own clear ring, so a road can never run into the
   lettering or the border. */
.ampera-city-map__chip-name {
	box-shadow: 0 0 0 7px var(--wp--preset--color--white);
}

/* Client 2026-08-22: no white outer layer around the tags on the phone. This
   lives HERE, after the rule it cancels — the 7px ring above is a top-level
   rule, so a `box-shadow: none` inside the earlier mobile block lost to it on
   source order and the ring silently stayed (and at 7px, not 3px). */
@media (max-width: 900px) {
	.ampera-city-map__chip-name {
		box-shadow: none;
	}
}

.ampera-city-map__chip-walk {
	text-shadow:
		0 0 4px var(--wp--preset--color--white),
		0 0 4px var(--wp--preset--color--white);
}

/* The AMPERA teardrop sits above everything with the same breathing room. */
.ampera-city-map__home {
	filter:
		drop-shadow(0 0 2px var(--wp--preset--color--white))
		drop-shadow(0 0 2px var(--wp--preset--color--white))
		drop-shadow(0 0 2px var(--wp--preset--color--white));
}

/* Narrow phones: the marker chrome is measured in pixels while the canvas is a
   share of the screen, so the pins grow relative to the city as the screen
   narrows. Step the scale down to keep the map uncrowded at 375px and below. */
@media (max-width: 380px) {
	.ampera-city-map__field {
		--marker-scale: 0.59;
	}
}

@media (max-width: 340px) {
	.ampera-city-map__field {
		--marker-scale: 0.55;
	}
}

/* Phones: the map is a close crop now and the name plates are back, so the
   silhouettes come down again. Sporto rūmai and Business Stadium are only 132
   viewBox units apart, so the northern one's plate unavoidably lands on the
   southern one's roof; at 0.75 that covered corner drops from 29x26 to 23x21px
   and the building still reads. (Zooming until they clear entirely costs
   Kalnų parkas, which is a worse trade.) */
@media (max-width: 900px) {
	.ampera-city-map__deco > svg,
	.ampera-city-map__marker-icon svg {
		/* Client 2026-08-22: building icons 25% bigger. 0.75 -> 1 alone does
		   NOT give +25% on screen, because the whole marker is also scaled
		   by --marker-scale, which had to come down (0.70 -> 0.66) to keep
		   the Business Stadium plate off the Sporto rūmai roof. The pair
		   was solved together: measured widest icon 36px -> 45px, exactly
		   +25%, with zero plate-over-icon. */
		scale: 1;
	}
}

/* ============================================================
   Soft edges (client 2026-08-22): the map should dissolve into the page
   rather than stop at a hard rectangle. The mask is applied to the CANVAS, so
   the artwork AND the markers fade together — two linear gradients combined
   with `intersect` fade all four sides at once. Percentages are deliberately
   small: only the outer sliver dissolves, so no landmark is dimmed. Halved
   again 2026-08-22 — the client read the previous band as too strong.
   ============================================================ */
.ampera-city-map__canvas {
	-webkit-mask-image:
		linear-gradient(to right, transparent 0, #000 2.75%, #000 97.25%, transparent 100%),
		linear-gradient(to bottom, transparent 0, #000 3.5%, #000 96.5%, transparent 100%);
	mask-image:
		linear-gradient(to right, transparent 0, #000 2.75%, #000 97.25%, transparent 100%),
		linear-gradient(to bottom, transparent 0, #000 3.5%, #000 96.5%, transparent 100%);
	-webkit-mask-composite: source-in;
	mask-composite: intersect;
}

/* Phones show a CROP of the art now (see the mobile map block), so street names
   at the frame edge are cut mid-word. Every side therefore fades, which is what
   makes a crop read as "the city continues" instead of "the text is broken".
   The horizontal band is wider than desktop's because the canvas is 149.53% of
   the viewport here: 5% of the canvas is only ~7.5% of what you actually see. */
@media (max-width: 900px) {
	/* The mask goes on the VIEWPORT here, not the canvas. The mobile canvas is
	   149.53% wide and offset, so its own edges sit outside the visible frame —
	   masking it fades off-screen and shows nothing. The viewport IS the frame. */
	.ampera-city-map__canvas {
		-webkit-mask-image: none;
		mask-image: none;
	}

	.ampera-city-map__viewport {
		-webkit-mask-image:
			linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%),
			linear-gradient(to bottom, transparent 0, #000 5%, #000 95%, transparent 100%);
		mask-image:
			linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%),
			linear-gradient(to bottom, transparent 0, #000 5%, #000 95%, transparent 100%);
		-webkit-mask-composite: source-in;
		mask-composite: intersect;
	}
}