/*
 * Maps (HANDOFF §5.10). The cleaned SVG is inlined (bin/build-maps.mjs); its labels are HTML over it, so they keep
 * their size (Map label, 13 → 12) when the map shrinks. Each label has an anchor in % of the map and an alignment,
 * in three sets chosen by the map's own width (a container query), since one map is 1120 wide on Home and 736 on
 * About us at the same 1440:
 *   --x/--y and the --end / --middle class: Figma's desktop positions, for maps 1100 and wider (exact at Figma's size);
 *   --lx/--ly/--lax/--lay override them for maps 700–1099;
 *   --mx/--my/--max/--may: the phone positions, below 700, each label beside its marker or Dart, centred on it unless
 *   --may says otherwise (Figma's mobile maps have 8 px labels, too small for the token, so their positions don't hold).
 * --ax/--ay move the label off its anchor (0 start or top, -50% middle, -100% end or bottom). A label never leaves the
 * map: the clamp() slides it back inside. `npm run check:maps` checks every width from 320 to 1920.
 *
 * Colours follow the brand SVGs: Slate over the light countries, white over the Ink of the Bulgaria map, Cement on
 * the Ink-band map (the SVG's white at 70%).
 *
 * The logo (the interim trace, in white as it is) lies in the black Bulgaria of Home's map and of About us' Bulgaria
 * map, over the SVG like the labels: --x/--y are its centre and --w its width, in % of the map; on maps under 700
 * wide --mx/--mw replace --w and the centre (Home: a little larger, to stay readable); --wide-only leaves it out on
 * maps under 600 wide (About us on a phone: five labels fill the shape; from 600 it clears them by 20 px or more). The
 * route lines are Ink on Ink inside Bulgaria, so none shows under it. `npm run check:maps` keeps every label, marker
 * and Dart head 6 px or more clear of it and the map under it wholly Ink.
 *
 * When the map comes into view (motion.js), the markers, the logo and their labels fade in, then the routes draw from
 * Sofia outward, each Dart head and its label appearing as the route ends. Reduced motion: the map as it is, complete.
 *
 * Home H.5 (Figma 26:2785 / 35:1124): the section heading, the map (Figma's 1120 at 1440 on desktop, like the
 * film's poster), then the text (columns 2–8) and "Learn more" (from column 10); stacked below 1024, 24 apart.
 */
.map {
	position: relative;
	container: map / inline-size;
}

.map__svg {
	width: 100%;
	height: auto;
}

.map__labels {
	position: absolute;
	inset: 0;
	margin: 0;
}

.map__label {
	--px: var(--x);
	--py: var(--y);
	--pax: var(--ax, 0%);
	--pay: var(--ay, 0%);
	position: absolute;
	top: calc(var(--py) * 1%);
	left: calc(var(--px) * 1%);
	/* A browser without container units (Safari before 16) keeps the plain offset, unclamped. */
	transform: translate(var(--pax), var(--pay));
	transform: translate(clamp(calc(var(--px) * -1cqi), var(--pax), calc((100 - var(--px)) * 1cqi - 100%)), var(--pay));
	color: var(--color-slate);
	font-size: var(--font-size-map-label);
	font-weight: var(--font-weight-strong);
	line-height: var(--line-height-eyebrow);
	letter-spacing: var(--letter-spacing-eyebrow);
	text-transform: uppercase;
	white-space: nowrap;
}

.map__label--end {
	--ax: -100%;
}

.map__label--middle {
	--ax: -50%;
}

.map__label--white {
	color: var(--color-white);
}

.map--on-ink .map__label {
	color: var(--color-cement);
}

.map__logo {
	position: absolute;
	top: calc(var(--y) * 1%);
	left: calc(var(--x) * 1%);
	width: calc(var(--w) * 1%);
	transform: translate(-50%, -50%);
	color: var(--color-white);
	/* The map's Ink stays Ink in forced colours (an SVG fill is not adjusted), so the logo stays white on it. */
	forced-color-adjust: none;
	line-height: 0;
	pointer-events: none;
}

.map__logo svg {
	display: block;
	width: 100%;
	height: auto;
}

/* Left out until the map is known to be wide enough, so a browser without container queries never shows it crowded. */
.map__logo--wide-only {
	display: none;
}

@container map (width >= 600px) {
	.map__logo--wide-only {
		display: block;
	}
}

@container map (width < 1100px) {
	.map__label {
		--px: var(--lx, var(--x));
		--py: var(--ly, var(--y));
		--pax: var(--lax, var(--ax, 0%));
		--pay: var(--lay, var(--ay, 0%));
	}
}

@container map (width < 700px) {
	.map__label {
		--px: var(--mx);
		--py: var(--my);
		--pax: var(--max, var(--ax, 0%));
		--pay: var(--may, -50%);
	}

	/* A label whose phone position is on the Ink. */
	.map__label--phone-white {
		color: var(--color-white);
	}

	.map__logo {
		top: calc(var(--my, var(--y)) * 1%);
		left: calc(var(--mx, var(--x)) * 1%);
		width: calc(var(--mw, var(--w)) * 1%);
	}
}

/* A route's label (--i: its route) appears with the route's Dart head; a marker's label (--place) and the logo with the markers. */
@media (prefers-reduced-motion: no-preference) {
	.motion-ready .map .route {
		stroke-dasharray: 1;
		stroke-dashoffset: 1;
		transition: stroke-dashoffset var(--motion-route-draw) var(--motion-ease) calc(var(--motion-reveal-duration) + var(--i, 0) * var(--motion-stagger));
	}

	.motion-ready .map :is(.dart, .map__label) {
		opacity: 0;
		transition: opacity var(--motion-stagger) linear calc(var(--motion-reveal-duration) + var(--i, 0) * var(--motion-stagger) + var(--motion-route-draw));
	}

	.motion-ready .map :is(.map__marker, .map__label--place, .map__logo) {
		opacity: 0;
		transition: opacity var(--motion-reveal-duration) var(--motion-ease);
	}

	.motion-ready .map.is-in .route {
		stroke-dashoffset: 0;
	}

	.motion-ready .map.is-in :is(.dart, .map__label, .map__marker, .map__logo) {
		opacity: 1;
	}
}

/* Home H.5 */
.logistics__inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-24);
}

.logistics__content {
	row-gap: var(--space-24);
}

.logistics__content > * {
	grid-column: 1 / -1;
}

.logistics__link {
	justify-self: start;
}

@media (min-width: 768px) {
	.logistics__map {
		margin-top: var(--space-24);
	}

	.logistics__content {
		margin-top: var(--space-8);
	}
}

@media (min-width: 1024px) {
	.logistics__map {
		align-self: center;
		width: calc(100% - var(--space-margin) * 2);
	}

	.logistics__text {
		grid-column: 2 / span 7;
	}

	.logistics__link {
		grid-column: 10 / span 2;
		align-self: start;
	}
}