/**
 * LVE Global Map - front-end styles.
 * Everything is namespaced under .agm so a theme's globals can't leak in.
 */

.agm {
	--agm-bg: transparent;
	--agm-max-w: 1440px;
	--agm-map-aspect: 1728 / 843;
	--agm-mobile-aspect: 1.2;
	--agm-compact-w: 1140px;
	--agm-duration: 0.7s;
	--agm-dim: 0.2;
	--agm-active-scale: 1.25;

	--agm-marker: 26px;
	--agm-marker-fill: #000;
	--agm-marker-stroke: #fff;
	--agm-marker-core: #fff;
	--agm-active-ring: #fff;
	--agm-active-ring-w: 1;
	--agm-label: #fff;

	--agm-btn-bg: rgba(255, 255, 255, 0.26);
	--agm-btn-text: #ebffff;
	--agm-btn-border: rgba(255, 255, 255, 0.16);
	--agm-btn-active: #ff365d;
	--agm-radius: 15px;
	/* Target width of one button. It is a ceiling rather than a fixed size -
	   see the flex basis below - so the row still fits when the block is
	   narrower than the buttons would like. */
	--agm-btn-w: 180px;
	--agm-btn-font:
		"Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

	--agm-title: #fff;
	--agm-desc: #e8e3f2;
	--agm-g1: #752c90;
	--agm-g2: #ff365d;
	--agm-g3: #ff8d16;

	--agm-gap: 10px;
	--agm-controls-w: 1228px;

	/* Vertical rhythm of the header group: the title sits above the map, the
	   description and the buttons over it, and these two gaps are what hold
	   the three together as one block of copy. */
	--agm-title-gap: 18px;
	--agm-intro-gap: 34px;
	--agm-edge-pad: 15px;

	/* The copy has its own faces rather than inheriting the theme's, so the
	   block reads the same wherever it is dropped in. Both are custom
	   properties: a theme that wants its own type can redefine them without
	   touching the stylesheet. The families must be loaded by the theme - the
	   block does not fetch them. */
	--agm-title-font:
		"Roboto Condensed", "Roboto", system-ui, -apple-system, "Segoe UI",
		Arial, sans-serif;
	--agm-title-weight: 700;
	--agm-desc-font:
		"Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	--agm-desc-weight: 400;

	/* Ceiling for the map itself. It grows with the block up to here and then
	   stops, so an ultrawide or a very wide container cannot turn the frame
	   into a strip taller than any screen. */
	--agm-map-max-w: 5000px;

	position: relative;
	box-sizing: border-box;
	width: 100%;
}

.agm--has-bg {
	background: var(--agm-bg);
}

.agm *,
.agm *::before,
.agm *::after {
	box-sizing: border-box;
}

/* ------------------------------------------------------------ measures */

/* The map runs to the full width of the block. It is vector, so it stays sharp
   at any size, and the label overlay shares its viewBox and scales with it -
   there is nothing to cap it for. The copy is what gets the cap: the title,
   the description and the buttons stay at a readable measure, centred over the
   map, however wide the map itself becomes. */
.agm__heading,
.agm__head {
	max-width: var(--agm-max-w);
	margin-inline: auto;
}

/* ------------------------------------------------------------- heading */

/* The title is not part of the map. It sits in normal flow above the stage in
   both layouts, so it never rides on the artwork, never has to give up its
   pointer events, and never has to be worked around when the map is short. */
.agm__heading {
	position: relative;
	z-index: 2;
	text-align: center;
	margin-bottom: var(--agm-title-gap);
}

/* ---------------------------------------------------------------- head */

/* The head carries the description and the buttons, and it lives inside the
   stage, floated over the map - the map reads as a backdrop rather than as a
   separate panel, which is what the reference design does. Positioned against
   .agm__stage, so it sits inside the map frame and never reaches the title
   above it. The one exception is mobile, below: the map frame is short there
   and the buttons would cover it, so the head drops back into flow. */
.agm__head {
	position: absolute;
	inset: 0 0 auto;
	z-index: 2;
	padding-top: 8px;
	pointer-events: none;
}

/* Only the controls need to be clickable; the rest of the head must let
   clicks through to the map underneath it. */
.agm__controls,
.agm__btn {
	pointer-events: auto;
}

/* ------------------------------------------------------------------ intro */

.agm__intro {
	text-align: center;
	margin-bottom: var(--agm-intro-gap);
}

/* The sizes below are the fallbacks inside the custom properties: the block
   only sets `--agm-title-size` and friends when an author fills the field in,
   so leaving it empty keeps the fluid clamp rather than pinning the type. */
.agm__title {
	margin: 0;
	color: var(--agm-title);
	font-size: var(--agm-title-size, clamp(28px, 4.2vw, 46px));
	font-family: var(--agm-title-font);
	font-weight: var(--agm-title-weight);
	line-height: 1.1;
	letter-spacing: -0.01em;
}

/* The gradient is painted through the glyphs, and it is clipped to the box it
   is painted on - so the span is what carries it. On the <h2>, which is as
   wide as the block, the words would only ever sample the middle of the ramp
   and both end colours would be lost. */
.agm__title-text {
	display: inline-block;
	max-width: 100%;
}

/* `color: transparent` is the fallback path, so the plain colour above is
   what shows if a browser cannot clip a background to text. */
.agm__title--gradient .agm__title-text {
	background-image: linear-gradient(
		90deg,
		var(--agm-g1) 0%,
		var(--agm-g2) 50%,
		var(--agm-g3) 100%
	);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
	.agm__title--gradient .agm__title-text {
		background-image: none;
		color: var(--agm-title);
		-webkit-text-fill-color: currentColor;
	}
}

.agm__description {
	margin: 0;
	color: var(--agm-desc);
	font-size: var(--agm-desc-size, clamp(14px, 1.3vw, 17px));
	font-family: var(--agm-desc-font);
	font-weight: var(--agm-desc-weight);
	line-height: 1.45;
}

/* Below the desktop widths the buttons stretch to the full width of the block
   and the outermost ones would otherwise sit flush against its edge, so the
   copy and the buttons get a gutter. Applied to the head rather than to the
   buttons, so the description keeps the same margin as the row beneath it. */
@media (max-width: 1024px) {
	.agm__heading,
	.agm__head {
		padding-left: var(--agm-edge-pad);
		padding-right: var(--agm-edge-pad);
	}
}

/* ----------------------------------------------------------- mobile picker */

/* Fourteen buttons take half a phone screen before the map gets any of it, so
   below the breakpoint the list collapses into one native picker. Native, not
   a custom menu: it gets the platform's own wheel or sheet, keyboard support
   and assistive-technology behaviour for nothing. It sits under the
   description and above the map, where the button grid was. */
.agm__picker {
	display: none;
	position: relative;
	width: 100%;
	max-width: var(--agm-picker-w, 320px);
	margin: 0 auto var(--agm-intro-gap);
	border-radius: var(--agm-radius);
	background: linear-gradient(
		90deg,
		var(--agm-g1) 0%,
		var(--agm-g2) 50%,
		var(--agm-g3) 100%
	);
	/* The gradient is the border: the select sits on top, inset by the border
	   width, so the ramp shows only as a ring around it. */
	padding: var(--agm-picker-ring, 1.5px);
	pointer-events: auto;
}

.agm.is-mobile.agm--has-select .agm__picker {
	display: block;
}

.agm.is-mobile.agm--has-select .agm__controls {
	display: none;
}

/* The chevron, drawn rather than fetched. */
.agm__picker::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 18px;
	width: 9px;
	height: 9px;
	border-right: 2px solid var(--agm-btn-text);
	border-bottom: 2px solid var(--agm-btn-text);
	transform: translateY(-70%) rotate(45deg);
	pointer-events: none;
}

.agm__select {
	appearance: none;
	-webkit-appearance: none;
	display: block;
	width: 100%;
	margin: 0;
	padding: 13px 40px 13px 18px;
	border: 0;
	border-radius: calc(var(--agm-radius) - 1px);
	background: var(--agm-select-bg, rgba(16, 10, 28, 0.86));
	color: var(--agm-btn-text);
	font-family: var(--agm-btn-font);
	font-size: var(--agm-select-size, 17px);
	font-weight: 500;
	line-height: 1.2;
	text-align: left;
	cursor: pointer;
}

.agm__select:focus-visible {
	outline: 2px solid var(--agm-btn-active);
	outline-offset: 2px;
}

/* The menu itself is drawn by the platform, which does not inherit the page's
   colours - so the options are given readable ones of their own. */
.agm__select option {
	background: #140d20;
	color: #fff;
}

/* ---------------------------------------------------------------- buttons */

/* Capped independently of the block so a long market list wraps into even
   rows instead of one long line with a short orphan row under it. */
.agm__controls {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	gap: var(--agm-gap);
	/* No floor of its own: the row is only ever as wide as the buttons that
	   fit, and `min-width: 0` stops a flex or grid parent from handing it the
	   content's intrinsic width as a minimum. */
	min-width: 0;
	max-width: var(--agm-controls-w);
	margin-inline: auto;
	margin-bottom: 28px;
}

.agm__btn {
	appearance: none;
	/* Every button is the same width and none goes under it, so the rows come
	   out even and a long market name never squeezes its own button. How many
	   share a row is then just arithmetic - as many as fit inside the controls
	   width - so there is no row count to keep in step with the type. */
	flex: 0 0 var(--agm-btn-w);
	min-width: var(--agm-btn-w);
	padding: 12px 20px;
	border: 1px solid var(--agm-btn-border);
	border-radius: var(--agm-radius);
	/* The buttons sit on the map, so the fill is translucent and the land
	   shows through - which is what the reference design does. The blur is
	   kept small: a wide radius pulls map colour out past the button's own
	   edges and reads as a halo rather than as frosted glass. */
	background: var(--agm-btn-bg);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	color: var(--agm-btn-text);
	font-family: var(--agm-btn-font);
	font-size: var(--agm-btn-size, 1.375rem);
	font-weight: 500;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
	transition:
		background-color 0.25s ease,
		border-color 0.25s ease,
		opacity 0.25s ease,
		transform 0.25s ease;
}

.agm__btn:hover,
.agm__btn:focus-visible {
	border-color: var(--agm-btn-active);
}

.agm__btn:focus-visible {
	outline: 2px solid var(--agm-btn-active);
	outline-offset: 2px;
}

.agm__btn[aria-pressed="true"] {
	background: var(--agm-btn-active);
	border-color: var(--agm-btn-active);
	opacity: 1;
}

/* Non-selected buttons step back a little once something is selected. */
.agm--dim-buttons.agm--has-active .agm__btn:not([aria-pressed="true"]) {
	opacity: 0.55;
}

.agm--dim-buttons.agm--has-active .agm__btn:not([aria-pressed="true"]):hover,
.agm--dim-buttons.agm--has-active
	.agm__btn:not([aria-pressed="true"]):focus-visible {
	opacity: 1;
}

/* ------------------------------------------------------------------- map */

.agm__stage {
	position: relative;
	/* Sizing context for the markers below: they are laid out against the map's
	   own width, not the viewport's - so they stop growing with the map does. */
	container-type: inline-size;
	max-width: var(--agm-map-max-w);
	margin-inline: auto;
}

.agm__viewport {
	position: relative;
	width: 100%;
	aspect-ratio: var(--agm-map-aspect);
	overflow: hidden;
	touch-action: pan-y;
	-webkit-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}

.agm--zoomable .agm__viewport {
	touch-action: none;
	cursor: grab;
}

.agm--zoomable .agm__viewport.is-panning {
	cursor: grabbing;
}

.agm__canvas {
	position: absolute;
	inset: 0 auto auto 0;
	width: 100%;
	transform-origin: 0 0;
}

/* `will-change` is applied only while the map is actually moving. Left on
   permanently it pins the layer to one rasterisation, so the vector map would
   stay soft after a zoom instead of being repainted at the new scale. */
.agm--animating .agm__canvas {
	will-change: transform;
}

/* Used only when GSAP is unavailable. */
.agm:not(.agm--gsap) .agm__canvas {
	transition: transform var(--agm-duration) cubic-bezier(0.22, 0.61, 0.36, 1);
}

.agm:not(.agm--gsap) .agm__canvas.is-dragging {
	transition: none;
}

.agm__map {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
	pointer-events: none;
}

/* The bundled map is inline SVG: it has a viewBox but the width/height are
   dropped in favour of the layout box, so the intrinsic ratio comes from the
   viewBox. */
.agm__map--svg {
	aspect-ratio: var(--agm-map-natural, 1728 / 843);
	overflow: visible;
}

/* ------------------------------------------------------------- scrims */

/* Two fades inside the map frame. They are the last thing in the viewport, so
   they paint over the map, the label artwork and the markers, and the head sits
   above them on its own z-index - which is the whole point: the buttons keep
   their contrast wherever the coastline underneath happens to be busy.

   Heights are authored in px or %; a percentage is read against the map frame,
   so the fade keeps its proportion as the map grows. */
.agm__scrim {
	position: absolute;
	left: 0;
	right: 0;
	pointer-events: none;
}

/* The stops ease rather than ramp - a straight two-stop gradient reads as a
   visible band across the artwork. Fading to the same colour at zero alpha,
   never to `transparent`, keeps it from going grey on the way out. */
.agm__scrim--top {
	top: 0;
	height: var(--agm-scrim-top-h, 0px);
	background: linear-gradient(
		to bottom,
		rgba(var(--agm-scrim-rgb, 0, 0, 0), var(--agm-scrim-top-a, 0)) 0%,
		rgba(var(--agm-scrim-rgb, 0, 0, 0), calc(var(--agm-scrim-top-a, 0) * 0.94))
			34%,
		rgba(var(--agm-scrim-rgb, 0, 0, 0), calc(var(--agm-scrim-top-a, 0) * 0.66))
			62%,
		rgba(var(--agm-scrim-rgb, 0, 0, 0), calc(var(--agm-scrim-top-a, 0) * 0.26))
			84%,
		rgba(var(--agm-scrim-rgb, 0, 0, 0), 0) 100%
	);
}

.agm__scrim--bottom {
	bottom: 0;
	height: var(--agm-scrim-bot-h, 0px);
	background: linear-gradient(
		to top,
		rgba(var(--agm-scrim-rgb, 0, 0, 0), var(--agm-scrim-bot-a, 0)) 0%,
		rgba(var(--agm-scrim-rgb, 0, 0, 0), calc(var(--agm-scrim-bot-a, 0) * 0.94))
			34%,
		rgba(var(--agm-scrim-rgb, 0, 0, 0), calc(var(--agm-scrim-bot-a, 0) * 0.66))
			62%,
		rgba(var(--agm-scrim-rgb, 0, 0, 0), calc(var(--agm-scrim-bot-a, 0) * 0.26))
			84%,
		rgba(var(--agm-scrim-rgb, 0, 0, 0), 0) 100%
	);
}

/* ------------------------------------------------------------ name tags */

/* The tag is a child of the marker, and the marker is moved by a transform on
   every frame - so the tag rides along for free and there is no second set of
   coordinates to keep in step with the map. Everything here is in px, not map
   units, which is the point of the change: the tag is the same size on screen
   at rest and at ten times zoom, and it is real text, so it restyles with CSS,
   translates, and reads out to a screen reader. */
.agm__tag {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 2;
	transform: translate(var(--agm-tag-x, 44px), var(--agm-tag-y, 0px))
		translateY(-50%);
	white-space: nowrap;
	color: var(--agm-label);
	font-family: var(--agm-tag-font, var(--agm-desc-font));
	font-size: var(--agm-tag-size, 13px);
	font-weight: var(--agm-tag-weight, 700);
	line-height: 1.2;
	letter-spacing: 0.01em;
	pointer-events: none;
	transition: opacity 0.4s ease;
}

/* Which edge of the tag meets the leader. */
.agm__tag[data-side="left"] {
	transform: translate(var(--agm-tag-x, -44px), var(--agm-tag-y, 0px))
		translate(-100%, -50%);
}

.agm__tag[data-side="top"] {
	transform: translate(var(--agm-tag-x, 0px), var(--agm-tag-y, -44px))
		translate(-50%, -100%);
}

.agm__tag[data-side="bottom"] {
	transform: translate(var(--agm-tag-x, 0px), var(--agm-tag-y, 44px))
		translate(-50%, 0);
}

/* A box with two of its borders showing: horizontal, vertical, or an L of the
   two, never a diagonal. One element however it bends, and the box has no
   background, so only the edges are ever seen.

   Drawn as borders rather than as SVG because a marker is a zero-sized point,
   and an <svg> given no size will not paint what hangs outside it. */
.agm__leader {
	position: absolute;
	left: var(--agm-leader-l, 0px);
	top: var(--agm-leader-t, 0px);
	width: var(--agm-leader-x, 0px);
	height: var(--agm-leader-y, 0px);
	pointer-events: none;
	transition: opacity 0.4s ease;
}

.agm__leader[data-edges~="top"] {
	border-top: var(--agm-leader-w, 1px) solid var(--agm-label);
}

.agm__leader[data-edges~="bottom"] {
	border-bottom: var(--agm-leader-w, 1px) solid var(--agm-label);
}

.agm__leader[data-edges~="left"] {
	border-left: var(--agm-leader-w, 1px) solid var(--agm-label);
}

.agm__leader[data-edges~="right"] {
	border-right: var(--agm-leader-w, 1px) solid var(--agm-label);
}

/* Once something is selected the rest step back, the way the markers do. */
.agm--has-active .agm__marker:not(.is-active) .agm__tag,
.agm--has-active .agm__marker:not(.is-active) .agm__leader {
	opacity: var(--agm-dim);
}

/* Bigger on a phone than on desktop, which is the opposite of the usual rule
   and deliberate: by the time a tag shows there it is the only one on screen,
   on a map zoomed right into its marker, and it has the room. */
.agm.is-mobile .agm__tag {
	font-size: var(--agm-tag-size-m, var(--agm-tag-size, 17px));
}

/* A phone frames one market at a time, and at that size the names in the
   Hong Kong / Macau / Taiwan cluster land on top of each other - so only the
   selected one is drawn, and it appears as the map closes in on it. */
.agm.is-mobile.agm--solo-tag .agm__tag,
.agm.is-mobile.agm--solo-tag .agm__leader {
	opacity: 0;
}

.agm.is-mobile.agm--solo-tag .agm__marker.is-active .agm__tag,
.agm.is-mobile.agm--solo-tag .agm__marker.is-active .agm__leader {
	opacity: 1;
}

/* --------------------------------------------------------------- markers */

/* The marker layer sits ABOVE the canvas and is never scaled. Pins used to
   live inside the canvas and were counter-scaled to hold their size, which
   meant a 12px dot was laid out at 12/zoom px and then magnified by the
   canvas's compositing layer - mobile browsers rasterise that layer once and
   stretch the bitmap, so the dot blurred. JS positions each marker in
   viewport space, so it is always laid out at its true size. */
.agm__markers {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}

.agm__marker {
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	opacity: 1;
	transition: opacity 0.4s ease;
}

/* Off-frame markers are taken out of the paint entirely - at 10x most of them
   are outside the viewport. */
.agm__marker[hidden] {
	display: none;
}

.agm--has-active .agm__marker:not(.is-active) {
	opacity: var(--agm-dim);
}

.agm__marker.is-active {
	z-index: 3;
	--agm-m-emph: var(--agm-active-scale);
}

/* Each marker is a real button: it toggles the same selection its row button
   does. The dot carries the scaling so the hit area stays put. */
.agm__marker-inner {
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	appearance: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	line-height: 0;
	cursor: pointer;
	pointer-events: auto;
	-webkit-tap-highlight-color: transparent;
	transform: translate(-50%, -50%);
}

/* A 26px marker is still a small target, so the button claims a little more
   room than it draws. */
.agm__marker-inner::before {
	content: "";
	position: absolute;
	inset: -8px;
}

.agm__marker-inner:focus {
	outline: none;
}

/* Three multipliers compose into one transform - the responsive size, the
   active emphasis, and the hover/focus bump. The artwork is inline SVG, so it
   stays sharp however far the map is zoomed; a raster marker would soften the
   moment the canvas is scaled up.

   `overflow: visible` matters: the selected state's outer ring is drawn at a
   radius that reaches the edge of the 26-unit box, and the drop shadow spills
   past it. */
.agm__marker-svg {
	display: block;
	/* The map is vector and the label overlay rides in its viewBox, so both grow
	   with the block. The marker is a fixed pixel box, which would leave it
	   shrinking against its own labels on a wide screen - so past the reference
	   width it grows in step with the map. `max()` keeps the configured size
	   below that width, where nothing changes. */
	width: max(var(--agm-marker), calc(var(--agm-marker-q, 1.8056) * 1cqw));
	height: max(var(--agm-marker), calc(var(--agm-marker-q, 1.8056) * 1cqw));
	overflow: visible;
	pointer-events: none;
	transform: scale(
		calc(var(--agm-m-size, 1) * var(--agm-m-emph, 1) * var(--agm-m-hover, 1))
	);
	transform-origin: 50% 50%;
	transition: transform 0.35s cubic-bezier(0.34, 1.4, 0.64, 1);
}

/* The source artwork carries a Gaussian drop shadow. Reproduced here so the
   marker needs no filter `id` - one per market would mean duplicate ids on
   the page. Same radius, same alpha, no offset. */
.agm--marker-shadow .agm__marker-svg {
	filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.8));
}

.agm__marker-ring {
	fill: var(--agm-marker-fill);
	stroke: var(--agm-marker-stroke);
	stroke-width: 1;
}

.agm__marker-core {
	fill: var(--agm-marker-core);
}

/* The selected market's second border: a ring outside the marker's own, with
   the map showing through the gap between them. */
.agm__marker-halo {
	stroke: var(--agm-active-ring);
	stroke-width: var(--agm-active-ring-w);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.agm__marker.is-active .agm__marker-halo {
	opacity: 1;
}

.agm__marker-inner:focus-visible .agm__marker-svg {
	--agm-m-hover: 1.2;
}

.agm__marker-inner:focus-visible .agm__marker-halo {
	stroke: var(--agm-btn-active);
	stroke-width: calc(var(--agm-active-ring-w) * 2);
	opacity: 1;
}

/* Touch devices get no hover state, only the tap. */
@media (hover: hover) and (pointer: fine) {
	.agm__marker-inner:hover .agm__marker-svg {
		--agm-m-hover: 1.2;
	}
}

/* A market whose own artwork already draws the circle hides the built-in one,
   but keeps the button so the marker is still clickable and focusable. */
.agm__marker--bare .agm__marker-ring,
.agm__marker--bare .agm__marker-core,
.agm__marker--bare .agm__marker-halo {
	display: none;
}

.agm__marker--bare .agm__marker-svg {
	filter: none;
}

.agm__sr-status {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ----------------------------------------------------------------- crisp */

/* Once the map settles, the zoom is expressed as a viewBox window instead of a
   transform, so the browser redraws the paths at native resolution rather than
   stretching a cached bitmap. The SVG then fills the frame and the canvas holds
   no transform at all. */
.agm--crisp .agm__canvas {
	inset: 0;
	width: auto;
	height: auto;
}

.agm--crisp .agm__map--svg {
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
}

/* --------------------------------------------------------------- compact */

/* On a small laptop the map is the tallest thing in the module and the first
   thing to push the copy below the fold. Cap the stage there instead of
   rescaling the whole block, so the buttons keep their full width.

   No `-webkit-min-device-pixel-ratio` clause: it filters nothing (every screen
   is at least 1x) and a browser that does not know the prefix throws the whole
   query away. */
@media only screen and (min-width: 1024px) and (max-width: 1366px) {
	.agm--compact .agm__stage,
	.agm--compact .agm__heading,
	.agm--compact .agm__head {
		max-width: var(--agm-compact-w);
		margin-inline: auto;
	}
}

/* Width is a proxy; height is the real constraint. This catches a wide laptop
   with a short viewport, which the width range above misses. */
@media only screen and (min-width: 1024px) and (max-height: 820px) {
	.agm--compact-short .agm__stage,
	.agm--compact-short .agm__heading,
	.agm--compact-short .agm__head {
		max-width: var(--agm-compact-w);
		margin-inline: auto;
	}
}

/* ---------------------------------------------------------------- mobile */

.agm.is-mobile {
	--agm-gap: 8px;
}

/* The mobile map frame is short and the buttons would sit on top of it, so
   the head folds back into normal flow here: the description and the buttons
   move out of the map and stack above it, under the title. */
.agm.is-mobile .agm__head {
	position: static;
	padding-top: 0;
	pointer-events: auto;
}

/* The mobile breakpoint is an editor setting and can be pushed above the
   media query's 1024px, so the gutter is restated for it here. */
.agm.is-mobile .agm__heading,
.agm.is-mobile .agm__head {
	padding-left: var(--agm-edge-pad);
	padding-right: var(--agm-edge-pad);
}

.agm.is-mobile .agm__viewport {
	aspect-ratio: var(--agm-mobile-aspect);
	background: transparent;
}

.agm.is-mobile .agm__heading {
	margin-bottom: 18px;
}

/* A size written for a wide screen is usually too big on a phone, so each has
   an optional mobile counterpart. The chain falls back to the desktop value,
   and then to the fluid clamp, so filling in one field alone still behaves. */
.agm.is-mobile .agm__title {
	font-size: var(
		--agm-title-size-m,
		var(--agm-title-size, clamp(28px, 4.2vw, 46px))
	);
}

.agm.is-mobile .agm__description {
	font-size: var(
		--agm-desc-size-m,
		var(--agm-desc-size, clamp(14px, 1.3vw, 17px))
	);
}

.agm.is-mobile .agm__intro {
	margin-bottom: 18px;
}

.agm.is-mobile .agm__controls {
	margin-bottom: 18px;
}

.agm.is-mobile .agm__btn {
	flex: 1 1 calc(33.333% - var(--agm-gap));
	min-width: 96px;
	padding: 9px 10px;
	/* Same chain as the title and the description: the mobile size if one was
	   given, otherwise the desktop size, otherwise the built-in. */
	font-size: var(--agm-btn-size-m, var(--agm-btn-size, 13px));
}

/* Only go two-up on the narrowest phones - fourteen wide buttons would push
   the map off the first screen. */
@media (max-width: 420px) {
	.agm.is-mobile .agm__btn {
		flex: 1 1 calc(50% - var(--agm-gap));
		min-width: 0;
	}
}

/* The map's movement is not decoration: it is how a selection shows you where
   in the world it landed, and cutting it to nothing leaves the map appearing
   to jump or not respond at all. So the block animates whatever the system
   setting says, unless the author opts back in with "Respect Reduce Motion",
   which restores the behaviour below. */
@media (prefers-reduced-motion: reduce) {
	.agm--respect-motion .agm__canvas,
	.agm--respect-motion .agm__marker,
	.agm--respect-motion .agm__marker-svg,
	.agm--respect-motion .agm__marker-halo,
	.agm--respect-motion .agm__tag,
	.agm--respect-motion .agm__leader,
	.agm--respect-motion .agm__btn {
		transition-duration: 0.01ms !important;
	}
}