/* ampeco/tw-footprint-globe — LAYOUT + fallback visual only.
   The globe is drawn on a Canvas2D element by view.js (d3-geo orthographic, NO
   WebGL); its colours are read from DS tokens at runtime. Here: the square
   responsive card, the grab cursor, and the static brand "highlight" shown
   until/unless the globe goes live (the permanent state only on Canvas2D-
   unsupported browsers or load failure; reduced-motion still draws a static
   globe). DS theme-reactive custom props only — zero hardcoded hex. Mirrors
   careers.css `.impact-row__image` / `.impact-globe`. */

.tw-globe {
	width: min(520px, 42vw);
	max-width: 100%;
	margin-inline: auto;
}

/* Square stage. The Canvas2D <canvas> is injected here and sized to fill. */
.tw-globe__viz {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: var(--radius-l);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* view.js appends a canvas; force it to fill + show the grab affordance. */
.tw-globe__viz.is-live { cursor: grab; }
.tw-globe__viz.is-live:active { cursor: grabbing; }
.tw-globe__viz canvas {
	width: 100% !important;
	height: 100% !important;
}

/* ---- Static fallback: frost disc + brand globe glyph + label ---- */
.tw-globe__fallback {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-xxl, 1.5rem);
	text-align: center;
	padding: var(--spacing-4xl, 2rem);
}

/* Once the live globe is up, the fallback is purely decorative scaffolding —
   hide it so only the canvas shows. */
.tw-globe__viz.is-live .tw-globe__fallback { display: none; }

.tw-globe__fallback-disc {
	width: 62%;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background: var(--gradient-ocean, var(--p-frost-300));
	box-shadow: var(--shadow-2);
	display: grid;
	place-items: center;
}

/* tw-* blocks must size inline SVGs explicitly. */
.tw-globe__glyph {
	width: 34%;
	height: 34%;
	color: var(--c-brand);
}

.tw-globe__fallback-label {
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 600;
	color: var(--c-ink-2, var(--color-text-secondary));
}

/* Mobile: the design caps the globe at ~380px and centres it. */
@media (max-width: 720px) {
	.tw-globe {
		width: 100%;
		max-width: 380px;
	}
}