/**
 * Geo map placeholder + canvas.
 *
 * Presentation-minimal by design: sizing/aspect per preset lives here;
 * anything hero-specific belongs to the theme's hero component, which
 * wraps this fragment (docs/geography/lld-geography.md §4–§5).
 */

/* The map style's water color per scheme — the single source of truth
   for every surface that paints before tiles do (placeholder media, JS
   map backgroundColor, the theme's hero band). */
:root {
	--cs-map-water: #67a9c7;
}

:root[data-theme="dark"] {
	--cs-map-water: #2e6b85;
}

.cs-map {
	/* The figure carries the water surface itself: during the canvas's
	   hidden loading phase it is what shows through, in every preset. */
	background: var(--cs-map-water, #67a9c7);
	margin: 0;
	position: relative;
}

.cs-map__media,
.cs-map__canvas {
	/* Pre-tiles the surface reads as sea, not as a dark void. */
	background: var(--cs-map-water, #67a9c7);
	display: block;
	width: 100%;
}

/* The canvas fades in only once the map has rendered its first frame
   (JS lifts the modifier on tilesloaded) — Google's WebGL canvas
   composites black until then, and the sea surface beneath covers the
   whole loading phase instead. */
.cs-map__canvas {
	transition: opacity 200ms ease;
}

.cs-map__canvas--loading {
	opacity: 0;
}

.cs-map--inline .cs-map__media,
.cs-map--inline .cs-map__canvas {
	aspect-ratio: 16 / 9;
}

.cs-map--hero .cs-map__media,
.cs-map--hero .cs-map__canvas {
	aspect-ratio: 21 / 9;
}

/* The hero media keeps its own surface (sea, above): the theme
   neutralizes cover dims globally (--background-dim: 0), so the media
   layer IS the hero's visual — exactly as a featured image is on the
   other heroes. */

.cs-map--location .cs-map__media,
.cs-map--location .cs-map__canvas {
	aspect-ratio: 4 / 3;
}

.cs-map__media {
	align-items: center;
	display: flex;
	justify-content: center;
}

.cs-map__caption {
	font-size: 0.8125rem;
	opacity: 0.75;
	padding: 0.5em 0;
}

/* The trigger matches the YouTube consent pill exactly (same conventions:
   theme tokens, pill radius) and is JS-only — hidden until the consent
   runtime marks the document ready; no-JS visitors see no inert button. */
.cs-map .cs-consent-trigger {
	background: var(--color-base, #fff);
	border: none;
	border-radius: 999px;
	color: var(--color-contrast, #111);
	cursor: pointer;
	display: none;
	font: inherit;
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	padding: 0.75em 1.5em;
	position: relative;
	z-index: 1;
}

.cs-consent-ready .cs-map .cs-consent-trigger {
	display: inline-block;
}