/**
 * The globe band — the animated globe behind the "Australia and New Zealand" text
 * (acf/globe inside a full-width group with `pwr-globe-band`; Wayne, 27 Oct 2026).
 *
 * Globe and text share the WIDE rail: the globe anchored to its right edge, as tall as the
 * band, behind everything; the text on its left edge. On a big screen the two meet in the
 * middle and on a laptop the globe's left half runs under the words.
 * Phones stack it: text, then the globe under it, full column width.
 */

.pwr-globe-band {
	position: relative;
	isolation: isolate; /* the globe's z-index stays inside the band */
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: clamp(560px, 48vw, 880px);
}

.pwr-globe-band > .pwr-globe {
	position: absolute;
	z-index: -1;
	top: 50%;
	/* The right edge of the wide rail, not the screen (Wayne, 27 Oct: "limit the whole thing to
	   wide width"): the band's gutter, or half of what is left beside the rail, whichever is more. */
	right: max(var(--wp--preset--spacing--gutter), (100% - var(--wp--style--global--wide-size)) / 2);
	/* 80% of the band, not all of it (check-in, 30 Oct: "scale it down a bit"). It zooms to
	   nearly fill its own box, so at full height the finished globe met the band's edges. */
	height: 80%;
	width: auto;
	max-width: none;
	margin: 0;
	transform: translateY(-50%);
	pointer-events: none;
}

/* The flex column would shrink the wide group to its words (its auto margins cancel the
   stretch), centring them; full width up to the wide rail puts them on its left edge. The
   words themselves keep to the left half, clear of the globe on a big screen. */
.pwr-globe-band > .pwr-globe-band__text {
	width: 100%;
}

.pwr-globe-band__text > * {
	max-width: 36rem;
}

.pwr-globe {
	aspect-ratio: 1;
	width: 100%;
}

/* The editor: an ACF preview cannot run the script, so a ring stands where the globe lands. */
.editor-styles-wrapper .pwr-globe:not([data-pwr-init])::before {
	content: "";
	display: block;
	width: 94%;
	aspect-ratio: 1;
	margin: 3%;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--base) 40%, transparent);
	border-radius: 50%;
}

@media (max-width: 781px) {
	.pwr-globe-band {
		min-height: 0;
	}

	.pwr-globe-band > .pwr-globe {
		position: static;
		order: 1;
		height: auto;
		width: 100%;
		max-width: 420px; /* 520 before the 30 Oct scale-down */
		margin: var(--wp--preset--spacing--l) auto 0;
		transform: none;
	}
}