/* Ampera · Interaktyvus pastatas
   (Figma: Namai jums 1103:2396 desktop / 1103:7817 mobile; pressed 1103:2589 /
   1103:7981; hover zones 1103:2638; Jūsų verslui 1103:2647 / 1103:8061;
   verslui cards 1103:3051, 1103:3100, 1103:3140.)

   Geometry model: the stage shows a fixed 1440×800 composition. Desktop keeps
   the exact ratio (canvas == stage). Mobile keeps a viewport-height band and
   cover-crops the same canvas around a per-category focal point — pins (%)
   and the zone SVG (viewBox 1440×800) live INSIDE the canvas, so they stay
   registered with the render at every size. */

.ampera-building {
	position: relative;
}

.ampera-building__stage {
	position: relative;
	aspect-ratio: 1440 / 800;
	overflow: clip;
}

/* --focal-x: which vertical line of the composition stays centred when the
   stage is narrower than the canvas (mobile crop). translateX(-focal) is a
   percentage OF THE CANVAS, which is exactly the focal-point math. */
.ampera-building__canvas {
	position: absolute;
	top: 50%;
	left: 50%;
	height: 100%;
	aspect-ratio: 1440 / 800;
	transform: translate(calc(var(--focal-x, 50%) * -1), -50%);
}

.ampera-building__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Figma Rectangle 2675 — flat 30% black scrim over the render. */
.ampera-building__shade {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.3);
	pointer-events: none;
}

.ampera-building__placeholder {
	position: relative;
	margin: 0;
	padding: 48px 72px;
	opacity: 0.6;
}

/* ---- Volume-zone overlay (Vector 17–21): translucent violetinė fill +
   3px violetinė stroke, revealed for the hovered/open record. ---- */
.ampera-building__zones {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	pointer-events: none;
	overflow: visible;
}

.ampera-building__zone {
	fill: var(--wp--preset--color--violetine);
	fill-opacity: 0.4;
	stroke: var(--wp--preset--color--violetine);
	stroke-width: 3;
	stroke-linejoin: round;
	opacity: 0;
	pointer-events: fill; /* hit-test the invisible volume too */
	cursor: pointer;
	transition: opacity 0.25s ease;
}

.ampera-building__zone.is-active {
	opacity: 1;
}

/* ---- Pins: violetinė dot with a soft balta ring; the bold white label +
   count badge + arrow row starts at the dot centre (Figma 1103:2543). ---- */
.ampera-building__pins {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/* Mobile-only type index (see the mobile block); desktop shows every pin on
   the full composition, so the index would be noise. */
.ampera-building__index {
	display: none;
}

.ampera-pin {
	position: absolute;
	/* The inline style sets left/top to var(--bx)/var(--by) and ships both
	   coordinate pairs as constants; the cascade picks the pair — desktop
	   here, the mobile pair under .ampera-building--has-mobile-img below. */
	--bx: var(--bx-d);
	--by: var(--by-d);
	display: flex;
	align-items: center;
	margin: -18px 0 0 -18px; /* anchor = dot centre */
	pointer-events: auto;
	text-decoration: none;
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--telegraf);
	cursor: pointer;
}

.ampera-pin__dot {
	position: relative;
	z-index: 1; /* stays BELOW the label even when hover-scaled */
	flex: none;
	width: 36px;
	height: 36px;
	box-sizing: border-box;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--violetine);
	background-clip: padding-box;
	border: 6px solid rgba(245, 245, 245, 0.2);
}

.ampera-pin__label {
	position: relative;
	z-index: 2; /* name always paints above the dot / hover blob */
	display: flex;
	align-items: center;
	gap: 4px;
	margin-left: -18px; /* label row starts at the dot centre */
}

.ampera-pin__title {
	font-weight: 800;
	font-size: 14px;
	line-height: 20px;
	white-space: nowrap;
}

.ampera-pin__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 24px;
	height: 24px;
	padding: 0 4px;
	border: 1px solid var(--wp--preset--color--white);
	border-radius: var(--wp--custom--radius--pill);
	background: rgba(255, 255, 255, 0.2);
	backdrop-filter: blur(5px);
	color: var(--wp--preset--color--balta);
	font-weight: 400;
	font-size: 12px;
	line-height: 16px;
}

.ampera-pin__arrow {
	display: inline-flex;
}

.ampera-pin__arrow svg {
	width: 20px;
	height: 20px;
	display: block;
}

.ampera-pin:focus-visible {
	outline: 2px solid var(--wp--preset--color--white);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: no-preference) {
	.ampera-pin__dot {
		transition: transform 0.2s ease;
	}
	.ampera-pin:hover .ampera-pin__dot,
	.ampera-pin:focus-visible .ampera-pin__dot {
		transform: scale(1.12);
	}
}

/* ---- Detail panel (single shell, JS-populated). Desktop: 325px violetinė
   popover with a callout tail, a framed thumbnail overhanging the top edge
   and a white close disc on the top-right corner. ---- */
.ampera-pin-panel {
	position: absolute;
	z-index: 30;
	width: 325px;
	box-sizing: border-box;
	padding: 16px;
	background: var(--wp--preset--color--violetine);
	color: var(--wp--preset--color--juoda);
	font-family: var(--wp--preset--font-family--telegraf);
}

.ampera-pin-panel[hidden],
.ampera-pin-scrim[hidden] {
	display: none;
}

/* Links/buttons inside follow the card colour, not the global link colour. */
.ampera-pin-panel a,
.ampera-pin-panel button {
	color: inherit;
}

/* Tail points LEFT (asset orientation) = panel sits RIGHT of the pin.
   --side-left flips it to the right edge, pointing right. */
.ampera-pin-panel__tail {
	position: absolute;
	left: -12px;
	top: var(--tail-y, 152px);
	width: 13px;
	height: 26px;
	color: var(--wp--preset--color--violetine);
}

.ampera-pin-panel__tail svg {
	display: block;
	width: 100%;
	height: 100%;
}

.ampera-pin-panel--side-left .ampera-pin-panel__tail {
	left: auto;
	right: -12px;
	transform: rotate(180deg);
}

/* Thumbnail: 220×160 incl. the 8px violetinė frame, 16px in from the left,
   overhanging the card top by 129px (Figma 1103:2631). */
.ampera-pin-panel__thumb {
	position: absolute;
	top: -129px;
	left: 16px;
	width: 220px;
	height: 160px;
	box-sizing: border-box;
	margin: 0;
	border: 8px solid var(--wp--preset--color--violetine);
	background: var(--wp--preset--color--juoda);
}

.ampera-pin-panel__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Close: 28px white disc centred on the card's top-right corner. */
.ampera-pin-panel__close {
	position: absolute;
	top: -14px;
	right: -14px;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--juoda);
	cursor: pointer;
}

.ampera-pin-panel__close svg {
	width: 16px;
	height: 16px;
	display: block;
}

.ampera-pin-panel__close:focus-visible {
	outline: 2px solid var(--wp--preset--color--juoda);
	outline-offset: 2px;
}

.ampera-pin-panel__intro {
	padding-top: 16px; /* room under the overhanging thumbnail */
	margin-bottom: 24px;
}

.ampera-pin-panel__title {
	margin: 0 0 4px;
	font-weight: 800;
	font-size: 18px;
	line-height: 28px;
}

.ampera-pin-panel__desc {
	margin: 0;
	font-weight: 400;
	font-size: 12px;
	line-height: 16px;
}

.ampera-pin-panel__desc:empty {
	display: none;
}

/* Laisvų / Iš viso row — dark 28px badges with violetinė bold numerals. */
.ampera-pin-panel__counts {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 24px;
}

.ampera-pin-panel__counts[hidden] {
	display: none;
}

.ampera-pin-panel__count {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 400;
	font-size: 12px;
	line-height: 16px;
}

.ampera-pin-panel__count-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 28px;
	height: 28px;
	padding: 0 6px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--juoda);
	color: var(--wp--preset--color--violetine);
	font-weight: 800;
	font-size: 14px;
	line-height: 20px;
}

/* Spec rows over hairline rules (Figma 0.5px @ 15% juoda). */
.ampera-pin-panel__specs {
	margin: 0 0 16px;
}

.ampera-pin-panel__spec {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 6px 0;
	border-top: 1px solid rgba(23, 30, 40, 0.15);
}

.ampera-pin-panel__spec[hidden] {
	display: none;
}

.ampera-pin-panel__specs .ampera-pin-panel__spec:last-of-type:not([hidden]) {
	border-bottom: 1px solid rgba(23, 30, 40, 0.15);
}

.ampera-pin-panel__spec dt {
	font-weight: 400;
	font-size: 12px;
	line-height: 16px;
}

.ampera-pin-panel__spec dd {
	margin: 0;
	font-weight: 800;
	font-size: 14px;
	line-height: 20px;
}

.ampera-pin-panel__pdf {
	display: inline-flex;
	color: inherit;
}

.ampera-pin-panel__pdf svg {
	width: 20px;
	height: 20px;
	display: block;
}

.ampera-pin-panel__pdf:focus-visible {
	outline: 2px solid var(--wp--preset--color--juoda);
	outline-offset: 2px;
}

/* "Pasiteirauti" — full-width 40px juoda-outline CTA on the violet card. */
.ampera-pin-panel__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	height: 40px;
	border: 1px solid var(--wp--preset--color--juoda);
	background: transparent;
	color: var(--wp--preset--color--juoda);
	text-decoration: none;
	font-weight: 800;
	font-size: 14px;
	line-height: 20px;
	transition: background 0.18s ease, color 0.18s ease;
}

.ampera-pin-panel__cta:hover {
	background: var(--wp--preset--color--juoda);
	color: var(--wp--preset--color--violetine);
}

.ampera-pin-panel__cta:focus-visible {
	outline: 2px solid var(--wp--preset--color--juoda);
	outline-offset: 2px;
}

/* ---- Modal mode (JS adds --modal when max-width:900px / pointer:coarse):
   fixed centred card over a scrim, no tail (Figma 1103:7981). The +64px
   compensates the thumbnail overhang so the ensemble looks centred. ---- */
.ampera-pin-scrim {
	position: fixed;
	inset: 0;
	z-index: 90;
	background: rgba(23, 30, 40, 0.5);
}

.ampera-pin-panel--modal {
	position: fixed;
	z-index: 95;
	left: 50% !important;
	top: 50% !important;
	transform: translate(-50%, calc(-50% + 64px));
	width: min(325px, calc(100vw - 48px));
}

.ampera-pin-panel--modal .ampera-pin-panel__tail {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.ampera-building__zone,
	.ampera-pin__dot,
	.ampera-pin-panel__cta {
		transition: none;
	}
}

/* ============================================================
   Mobile: the WHOLE composition on screen (client 2026-07-30, item 4 —
   supersedes the pannable 100svh close-up: „kad matytųsi visas namas ir
   visos interaktyvios žymos"). The canvas fits the viewport width, pin
   labels give way to dots (the volume zones stay the big tap targets),
   and the type-chip index — every category, now on BOTH kategorijos —
   wraps below the building, fully visible.
   ============================================================ */
@media (max-width: 900px) {
	.ampera-building__stage {
		aspect-ratio: auto;
		height: auto;
		padding-top: 96px; /* the 80px absolute header overlays the band */
		overflow: visible;
	}

	/* In-flow, width-driven canvas: the full 1440×800 render fits the
	   screen. The base rule's absolute centring + focal translate MUST all
	   reset here or the composition shifts off-centre. */
	.ampera-building__canvas {
		position: relative;
		top: 0;
		left: 0;
		transform: none;
		width: 100%;
		height: auto;
		aspect-ratio: 1440 / 800;
	}

	/* While the detail card is open, gestures on it (or its scrim) must not
	   scroll-chain into the stage and pan the building underneath. */
	.ampera-pin-scrim,
	.ampera-pin-panel--modal {
		touch-action: none;
	}

	/* Type index BELOW the building: every option visible at a glance, no
	   scrolling — the row wraps. White plates + juoda ink (the corrected
	   pin-plate pattern). */
	.ampera-building__index {
		position: static;
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		padding: 16px 24px 24px;
	}

	.ampera-building__index-chip {
		flex: none;
		display: inline-flex;
		align-items: center;
		gap: 8px;
		height: 40px;
		padding-inline: 14px;
		background: var(--wp--preset--color--white);
		color: var(--wp--preset--color--juoda);
		text-decoration: none;
		font-family: var(--wp--preset--font-family--telegraf);
		font-weight: 800;
		font-size: 13px;
		line-height: 16px;
		text-transform: uppercase;
	}

	.ampera-building__index-chip:focus-visible {
		outline: 2px solid var(--wp--preset--color--white);
		outline-offset: 3px;
	}

	.ampera-building__index-count {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		min-width: 22px;
		height: 22px;
		padding: 0 4px;
		border: 1px solid var(--wp--preset--color--juoda);
		border-radius: var(--wp--custom--radius--pill);
		font-weight: 400;
		font-size: 12px;
	}

	/* At whole-house scale the plates cannot fit on the canvas: dots only.
	   Every label lives on in the wrapped chip index below the building, and
	   the volume zones stay the big tap targets on the render itself. */
	.ampera-pin__label {
		display: none;
	}

	/* ---- Art-directed mobile render (client 2026-08-01) ----
	   When the block carries a PORTRAIT mobile visualisation, phones show it
	   instead of the landscape frame: the canvas takes ITS aspect ratio, pins
	   jump to their mobile coordinates (records without them hide), and the
	   volume zones disappear — their paths trace the landscape projection
	   and would glow in the wrong places here. Client 2026-08-01 (2nd pass):
	   the portrait render carries DESKTOP-style tags — title + count plate on
	   every pin, NO chip index, NO highlight — and the canvas starts at the
	   very top of the section so the header floats over the photo. */
	.ampera-building--has-mobile-img .ampera-building__stage {
		padding-top: 0; /* the photo runs under the transparent header */
	}

	.ampera-building--has-mobile-img .ampera-building__canvas {
		aspect-ratio: var(--canvas-ar-m, 1440 / 800);
	}

	.ampera-building--has-mobile-img .ampera-building__zones,
	.ampera-building--has-mobile-img .ampera-building__index {
		display: none;
	}

	.ampera-building--has-mobile-img .ampera-pin {
		display: none;
	}

	.ampera-building--has-mobile-img .ampera-pin--m {
		display: flex;
		--bx: var(--bx-m);
		--by: var(--by-m);
	}

	/* The plates come back (they are hidden in the landscape fit-whole mode
	   above): same anatomy as desktop — bold title, count badge, arrow — at
	   a phone-friendly size. The whole anchor stays the tap target.
	   Client 2026-08-01 (3rd pass): dot bumped 24 → 28px and every tag reads
	   identically — dot first, then title/count/arrow (no mirrored variants
	   in the shipped data; pins sit left of the flip threshold).
	   Client 2026-08-06: plates trimmed again (dot 28 → 22, badge 24 → 20,
	   arrow 20 → 18, gaps 4 → 3) because neighbouring tags collided on
	   phones — every px removed here is a px of clearance between tags. */
	.ampera-building--has-mobile-img .ampera-pin {
		margin: -11px 0 0 -11px; /* anchor = centre of the 22px dot */
	}

	/* The plate is only ~22px tall now, so a transparent pseudo restores a
	   finger-sized tap area. Absolutely positioned = it does NOT enter the
	   anchor's own border box, so tag-to-tag spacing math stays honest. */
	.ampera-building--has-mobile-img .ampera-pin::after {
		content: '';
		position: absolute;
		inset: -6px -2px;
	}

	.ampera-building--has-mobile-img .ampera-pin__dot {
		width: 22px;
		height: 22px;
		border-width: 4px;
	}

	.ampera-building--has-mobile-img .ampera-pin__label {
		display: flex;
		max-width: none;
		gap: 3px;
		margin-left: -5px; /* title clears the dot instead of sitting on it */
	}

	.ampera-building--has-mobile-img .ampera-pin__badge {
		min-width: 20px;
		height: 20px;
		padding: 0 3px;
		font-size: 11px;
	}

	.ampera-building--has-mobile-img .ampera-pin__arrow svg {
		width: 18px;
		height: 18px;
	}

	.ampera-building--has-mobile-img .ampera-pin__title {
		font-size: 15px; /* client 2026-08-06: "a bit bigger" than the 13px start */
		line-height: 20px;
		/* ONE line always (client 2026-08-06) — verslui's long titles fit
		   because their pins sit far enough left: at 15px the longest plate
		   ("Administracinės patalpos") extends ~235px right of the dot and
		   must clear a 375px screen, so its x stays ≤ ~34. */
		white-space: nowrap;
	}

	/* Guard for future data: pins past 78% mirror their plate LEFT of the dot
	   so it never exits the viewport (render.php sets --flip-m from the
	   MOBILE x). Inner order stays title→badge→arrow. */
	.ampera-building--has-mobile-img .ampera-pin--flip-m,
	.ampera-building--gyvenimui.ampera-building--has-mobile-img .ampera-pin {
		/* Client 2026-08-06: on Namai Jums EVERY tag reads text-first with the
		   dot on the right (arrow pointing at its dot) — the whole set matches
		   what Suite's edge-mirror already did. Verslui keeps text-right. */
		flex-direction: row-reverse;
		translate: calc(-100% + 11px) 0; /* anchor stays on the dot centre */
	}

	.ampera-building--has-mobile-img .ampera-pin--flip-m .ampera-pin__label,
	.ampera-building--gyvenimui.ampera-building--has-mobile-img .ampera-pin .ampera-pin__label {
		margin-left: 0;
		margin-right: -5px;
	}
	.ampera-pin {
		margin: -12px 0 0 -12px; /* anchor = centre of the smaller dot */
	}
	.ampera-pin__dot {
		width: 24px;
		height: 24px;
		border-width: 4px;
	}
	/* Labels are gone, so the right-edge flip has nothing to mirror — the
	   translate would drag the bare dot off its anchor. */
	.ampera-pin--flip {
		flex-direction: row;
		translate: none;
	}
}

/* Entrance: pins surface one by one over the render (load-based; the hero is
   above the fold). Gated on html.ampera-motion. */
@media (prefers-reduced-motion: no-preference) {
	html.ampera-motion .ampera-pin {
		animation: ampera-pin-in 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
	}
	html.ampera-motion .ampera-pin:nth-of-type(1) { animation-delay: 0.9s; }
	html.ampera-motion .ampera-pin:nth-of-type(2) { animation-delay: 1.12s; }
	html.ampera-motion .ampera-pin:nth-of-type(3) { animation-delay: 1.34s; }
	html.ampera-motion .ampera-pin:nth-of-type(4) { animation-delay: 1.56s; }
	html.ampera-motion .ampera-pin:nth-of-type(5) { animation-delay: 1.78s; }
	@keyframes ampera-pin-in {
		from {
			opacity: 0;
			transform: translateY(10px) scale(0.9);
		}
		to {
			opacity: 1;
			transform: none;
		}
	}
}

/* ---- Open animation: one crafted reveal — the card unfurls from the pin you
   pressed, its photo settles into focus, and the details cascade in with the
   count numerals popping. building.js toggles .is-revealing on every open
   (including pin-to-pin switches) so it replays on each press. Everything lives
   under prefers-reduced-motion: no-preference, so reduced motion / no-JS shows
   the final state instantly. ---- */

/* Unfurl origin: the tail — the point that touches the pin. */
.ampera-pin-panel {
	transform-origin: 0 calc(var(--tail-y, 152px) + 13px);
}
.ampera-pin-panel--side-left {
	transform-origin: 100% calc(var(--tail-y, 152px) + 13px);
}
.ampera-pin-panel--modal {
	transform-origin: center;
}

@media (prefers-reduced-motion: no-preference) {
	/* The card unfurls from the pin. */
	.ampera-pin-panel.is-revealing:not(.ampera-pin-panel--modal) {
		animation: ampera-panel-emerge 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
	}
	@keyframes ampera-panel-emerge {
		from { opacity: 0; transform: scale(0.88); }
		to   { opacity: 1; transform: none; }
	}
	.ampera-pin-panel--modal.is-revealing {
		animation: ampera-panel-modal-in 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
	}
	@keyframes ampera-panel-modal-in {
		from { opacity: 0; transform: translate(-50%, calc(-50% + 84px)) scale(0.97); }
		to   { opacity: 1; transform: translate(-50%, calc(-50% + 64px)); }
	}

	/* Photo fades in with a slow zoom-out, settling into focus. */
	.ampera-pin-panel.is-revealing .ampera-pin-panel__thumb {
		animation: ampera-panel-fade 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.08s both;
	}
	.ampera-pin-panel.is-revealing .ampera-pin-panel__thumb img {
		animation: ampera-thumb-settle 1.25s cubic-bezier(0.16, 1, 0.3, 1) 0.08s both;
	}
	@keyframes ampera-thumb-settle {
		from { transform: scale(1.14); }
		to   { transform: scale(1); }
	}

	/* Close disc: soft pop. */
	.ampera-pin-panel.is-revealing .ampera-pin-panel__close {
		animation: ampera-panel-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.14s both;
	}

	/* Details rise and fade in sequence. */
	.ampera-pin-panel.is-revealing .ampera-pin-panel__title,
	.ampera-pin-panel.is-revealing .ampera-pin-panel__desc,
	.ampera-pin-panel.is-revealing .ampera-pin-panel__counts,
	.ampera-pin-panel.is-revealing .ampera-pin-panel__spec,
	.ampera-pin-panel.is-revealing .ampera-pin-panel__cta {
		animation: ampera-panel-item 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
	}
	@keyframes ampera-panel-item {
		from { opacity: 0; transform: translateY(10px); }
		to   { opacity: 1; transform: none; }
	}
	.ampera-pin-panel.is-revealing .ampera-pin-panel__title  { animation-delay: 0.18s; }
	.ampera-pin-panel.is-revealing .ampera-pin-panel__desc   { animation-delay: 0.23s; }
	.ampera-pin-panel.is-revealing .ampera-pin-panel__counts { animation-delay: 0.28s; }
	.ampera-pin-panel.is-revealing .ampera-pin-panel__spec:nth-of-type(1) { animation-delay: 0.33s; }
	.ampera-pin-panel.is-revealing .ampera-pin-panel__spec:nth-of-type(2) { animation-delay: 0.37s; }
	.ampera-pin-panel.is-revealing .ampera-pin-panel__spec:nth-of-type(3) { animation-delay: 0.41s; }
	.ampera-pin-panel.is-revealing .ampera-pin-panel__cta    { animation-delay: 0.47s; }

	/* Count numerals pop in with a soft overshoot. */
	.ampera-pin-panel.is-revealing .ampera-pin-panel__count-badge {
		animation: ampera-panel-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.34s both;
	}

	@keyframes ampera-panel-fade {
		from { opacity: 0; }
		to   { opacity: 1; }
	}
	@keyframes ampera-panel-pop {
		from { opacity: 0; transform: scale(0.5); }
		60%  { opacity: 1; transform: scale(1.06); }
		to   { opacity: 1; transform: scale(1); }
	}

	/* Scrim (modal) fades with the card. */
	.ampera-pin-scrim:not([hidden]) {
		animation: ampera-pin-scrim-in 0.4s ease;
	}
	@keyframes ampera-pin-scrim-in {
		from { opacity: 0; }
		to   { opacity: 1; }
	}
}

/* Narrow phones (iPhone SE / mini, Android compacts): the tags are the only
   thing on the render competing for width, so the type steps down one notch
   below 376px. 390px+ keeps the client's chosen 15px (2026-08-06). */
@media (max-width: 375px) {
	.ampera-building--has-mobile-img .ampera-pin__title {
		font-size: 13px;
		line-height: 18px;
	}

	.ampera-building--has-mobile-img .ampera-pin__dot {
		width: 20px;
		height: 20px;
		border-width: 4px;
	}

	.ampera-building--has-mobile-img .ampera-pin {
		margin: -10px 0 0 -10px;
	}

	.ampera-building--has-mobile-img .ampera-pin--flip-m,
	.ampera-building--gyvenimui.ampera-building--has-mobile-img .ampera-pin {
		translate: calc(-100% + 10px) 0;
	}

	.ampera-building--has-mobile-img .ampera-pin__badge {
		min-width: 18px;
		height: 18px;
		font-size: 10px;
	}

	.ampera-building--has-mobile-img .ampera-pin__arrow svg {
		width: 16px;
		height: 16px;
	}
}