/* ==========================================================================
   Geopol Globe - layout and design for [geopol_globe]
   Tokens first: every colour and face comes from a custom property the theme can override.
   Desktop 1024+  : list beside the globe
   Tablet 768-1023: globe on top, list beneath it (two-tap on touch)
   Phone  <768    : no globe at all - the list becomes a card grid
   ========================================================================== */

.gg {
	--gg-indigo: #130C4F;
	--gg-ash: #ABA3A3;
	--gg-ink: #1C1B2E;
	--gg-smoke: #F5F5F5;
	--gg-quiet: #5F5E6E;
	--gg-font-head: 'Sorts Mill Goudy', Georgia, 'Times New Roman', serif;
	--gg-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--gg-radius: 0;
	--gg-ease: cubic-bezier(.2, .7, .2, 1);

	position: relative;
	isolation: isolate;
	display: grid;
	grid-template-columns: minmax(300px, 0.78fr) minmax(0, 1.6fr);
	grid-template-areas: "list stage";
	min-height: clamp(580px, 76vh, 860px);
	overflow: hidden;
	font-family: var(--gg-font-body);
	-webkit-font-smoothing: antialiased;
}

/* ---- the two designs --------------------------------------------------- */

.gg--atlas {
	--gg-bg: #060424;
	--gg-fg: #FFFFFF;
	--gg-muted: rgba(231, 230, 237, .62);
	--gg-row-hover: rgba(255, 255, 255, .06);
	--gg-rule: rgba(171, 163, 163, .22);
	background:
		radial-gradient(ellipse 60% 70% at 0% 50%, rgba(108, 123, 255, .10), transparent 70%),
		var(--gg-bg);
	color: var(--gg-fg);
}

.gg--cartographer {
	--gg-bg: #FFFFFF;
	--gg-fg: var(--gg-ink);
	--gg-muted: var(--gg-quiet);
	--gg-row-hover: #F3F2F7;
	--gg-rule: rgba(171, 163, 163, .45);
	background: #FFFFFF;
	color: var(--gg-fg);
}
.gg--cartographer .gg__list { background: var(--gg-smoke); }

/* Emblem: the brand guide's own layout - white rounded cards with a fine Warm Ash border on the
   near-white page; Midnight Indigo for every word that matters. */
.gg--emblem {
	--gg-bg: var(--gg-smoke);
	--gg-fg: var(--gg-indigo);
	--gg-muted: #5F5E6E;
	--gg-row-hover: #F4F3F8;
	--gg-rule: #D9D6D6;
	--gg-card-border: #E8E6E6;
	gap: clamp(12px, 1.4vw, 20px);
	padding: clamp(12px, 1.4vw, 20px);
	background: var(--gg-bg);
	color: var(--gg-fg);
}
.gg--emblem .gg__stage,
.gg--emblem .gg__list {
	background: #FFFFFF;
	border: 1px solid var(--gg-card-border);
	border-radius: 0;
}
.gg--emblem .gg__stage { overflow: hidden; }
.gg--emblem .gg__title { color: var(--gg-indigo); }
.gg--emblem .gg__name  { color: var(--gg-indigo); }
.gg--emblem .gg__swatch { box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 4px color-mix(in srgb, var(--desk) 35%, transparent); }
.gg--emblem .gg__poster {
	background:
		radial-gradient(circle, rgba(19, 12, 79, .32) 1px, transparent 1.6px) 0 0 / 10px 10px,
		radial-gradient(circle at 34% 28%, #FFFFFF 0%, #F4F3F8 60%, #E7E7ED 100%);
	-webkit-mask: radial-gradient(circle, #000 69%, transparent 70.5%);
	        mask: radial-gradient(circle, #000 69%, transparent 70.5%);
}
.gg--emblem .gg__tooltip {
	background: #FFFFFF;
	border-color: #E8E6E6;
	box-shadow: 0 14px 34px -14px rgba(19, 12, 79, .3);
	color: var(--gg-indigo);
}
.gg--emblem .gg__label {
	padding: 0;
	background: none;
	font-family: var(--gg-font-head);
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--gg-indigo);
	text-shadow: 0 0 3px #FFFFFF, 0 0 8px #FFFFFF, 0 0 12px #FFFFFF;
}
/* at rest the globe stays as clean as the logo - the list names every desk; the globe names only the one in hand */
.gg--emblem .gg__label:not(.is-active) { opacity: 0; }
.gg--emblem .gg__label.is-active {
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--gg-indigo);
	color: #FFFFFF;
	font-size: 15px;
	font-style: italic;
	text-shadow: none;
}

/* ---- the globe stage ---------------------------------------------------- */

.gg__stage {
	grid-area: stage;
	position: relative;
	min-height: inherit;
	touch-action: pan-y;               /* a vertical swipe still scrolls the page */
}

.gg--atlas .gg__stage { background: var(--gg-bg); }

.gg__canvas {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 1.4s var(--gg-ease);
}
.gg--live .gg__canvas { opacity: 1; }

/* A drawn sphere shown instantly, while the 3D code loads - and on screens that never get it. */
.gg__poster {
	position: absolute;
	top: 50%;
	left: 50%;
	width: min(70%, 68vh, 600px);
	aspect-ratio: 1;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	transition: opacity 1s var(--gg-ease);
	pointer-events: none;
}
.gg--live .gg__poster { opacity: 0; }

.gg--atlas .gg__poster {
	background:
		radial-gradient(circle, rgba(143, 168, 255, .55) 1px, transparent 1.6px) 0 0 / 11px 11px,
		radial-gradient(circle at 34% 28%, #2B2585 0%, #0C0940 58%, #07052A 100%);
	-webkit-mask: radial-gradient(circle, #000 69%, transparent 70.5%);
	        mask: radial-gradient(circle, #000 69%, transparent 70.5%);
	box-shadow: 0 0 120px 10px rgba(108, 123, 255, .28);
}

.gg--cartographer .gg__poster {
	background: radial-gradient(circle at 34% 28%, #FFFFFF 0%, #EDF0F6 52%, #D6DAE6 100%);
	box-shadow: 0 40px 80px -30px rgba(19, 12, 79, .28);
}

/* the soft shadow the light globe casts on the page */
.gg--cartographer .gg__stage::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 6%;
	width: min(46%, 380px);
	height: 26px;
	transform: translateX(-50%);
	background: radial-gradient(ellipse at center, rgba(19, 12, 79, .20), transparent 70%);
	filter: blur(6px);
	pointer-events: none;
	z-index: -1;
}

.gg--loading .gg__poster { animation: gg-breathe 2.4s ease-in-out infinite; }
@keyframes gg-breathe {
	0%, 100% { filter: brightness(1); }
	50%      { filter: brightness(1.12); }
}

/* ---- tooltip over the globe --------------------------------------------- */

.gg__tooltip {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 3;
	display: grid;
	gap: 2px;
	padding: 9px 14px 10px;
	border-radius: 0;
	pointer-events: none;
	white-space: nowrap;
	border: 1px solid var(--desk, var(--gg-ash));
	will-change: transform;
}
.gg__tooltip[hidden] { display: none; }
.gg--atlas .gg__tooltip {
	background: rgba(12, 9, 64, .82);
	-webkit-backdrop-filter: blur(8px);
	        backdrop-filter: blur(8px);
	box-shadow: 0 0 24px -6px var(--desk);
	color: #FFFFFF;
}
.gg--cartographer .gg__tooltip {
	background: rgba(255, 255, 255, .94);
	box-shadow: 0 12px 30px -12px rgba(19, 12, 79, .35);
	color: var(--gg-ink);
}
.gg__tip-name { font-family: var(--gg-font-head); font-size: 18px; line-height: 1.15; }
.gg__tip-hint {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--gg-muted);
}

/* ---- desk labels on the light globe ------------------------------------- */

.gg__label {
	padding: 3px 8px;
	border-radius: 999px;
	font-family: var(--gg-font-body);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--gg-ink, #1C1B2E);
	background: rgba(255, 255, 255, .78);
	pointer-events: none;
	opacity: var(--edge, 1);
	transition: opacity .35s ease, background-color .35s ease, color .35s ease, font-size .35s ease;
}
.gg__label.is-muted  { opacity: calc(var(--edge, 1) * .3); }
.gg__label.is-hidden { opacity: 0; }
.gg__label.is-active {
	color: #FFFFFF;
	background: var(--gg-indigo, #130C4F);
	font-size: 11.5px;
}

/* ---- the region list ---------------------------------------------------- */

.gg__list {
	grid-area: list;
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(28px, 4vw, 64px) clamp(20px, 3vw, 48px);
}

.gg__title {
	margin: 0 0 clamp(16px, 2vw, 26px);
	font-family: var(--gg-font-head);
	font-size: clamp(30px, 3vw, 42px);
	font-weight: 400;
	line-height: 1.08;
	color: inherit;
}

.gg__regions,
.gg__themes {
	margin: 0;
	padding: 0;
	list-style: none;
}

.gg__item { transition: opacity .45s var(--gg-ease), transform .6s var(--gg-ease); }

.gg__link {
	display: grid;
	grid-template-columns: 12px 1fr 16px;
	align-items: center;
	gap: 14px;
	min-height: 44px;
	padding: 9px 14px;
	border: 1px solid transparent;
	border-radius: var(--gg-radius);
	color: inherit;
	text-decoration: none;
	transition: background-color .25s ease, border-color .25s ease, transform .35s var(--gg-ease);
}

.gg__swatch {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--desk);
}
.gg--atlas .gg__swatch { box-shadow: 0 0 10px 1px var(--desk); }

.gg__text { display: grid; }
.gg__name {
	font-family: var(--gg-font-head);
	font-size: clamp(18px, 1.35vw, 21px);
	line-height: 1.2;
}

/* the one-line description opens only on the active row */
.gg__blurb {
	display: grid;
	grid-template-rows: 0fr;
	font-size: 13px;
	line-height: 1.45;
	color: var(--gg-muted);
	transition: grid-template-rows .4s var(--gg-ease), margin .4s var(--gg-ease);
}
.gg__blurb > span { min-height: 0; overflow: hidden; }

.gg__arrow {
	opacity: 0;
	transform: translateX(-6px);
	transition: opacity .25s ease, transform .35s var(--gg-ease);
	color: var(--desk);
}

/* Themes style a:hover and h2 (Hello Elementor turns links #336 on hover) - the globe keeps its own. */
.gg .gg__link,
.gg .gg__link:hover,
.gg .gg__link:focus,
.gg .gg__link:visited,
.gg .gg__title { color: inherit; text-decoration: none; }

.gg__item.is-active .gg__link,
.gg__link:hover,
.gg__link:focus-visible {
	background: var(--gg-row-hover);
	border-color: color-mix(in srgb, var(--desk) 45%, transparent);
	transform: translateX(4px);
}
.gg__item.is-active .gg__blurb { grid-template-rows: 1fr; margin-top: 3px; }
.gg__item.is-active .gg__arrow,
.gg__link:hover .gg__arrow,
.gg__link:focus-visible .gg__arrow { opacity: 1; transform: none; }
.gg__link:focus-visible { outline: 2px solid var(--desk); outline-offset: 2px; }

.gg--has-active .gg__item:not(.is-active) { opacity: .48; }

.gg__divider {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 14px 0 6px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--gg-muted);
}
.gg__divider::after { content: ""; flex: 1; height: 1px; background: var(--gg-rule); }

/* opening sequence: rows arrive one by one as their desk lights on the globe */
.gg[data-gg-started]:not(.gg--failed) .gg__item:not(.is-in) { opacity: 0; transform: translateY(8px); }

/* ---- tablet: globe on top, list beneath --------------------------------- */

@media (max-width: 1023px) {
	.gg {
		grid-template-columns: 1fr;
		grid-template-areas: "stage" "list";
		min-height: 0;
	}
	.gg__stage { min-height: clamp(420px, 70vw, 620px); }
	.gg--cartographer .gg__list { background: transparent; }
	.gg__list { padding-top: 8px; }
	.gg__regions { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; }
}

/* ---- phone: the list IS the page - a card grid, no 3D at all ------------ */

@media (max-width: 767px) {
	.gg__stage { display: none; }
	.gg__list { padding: 28px 16px; }
	.gg__regions,
	.gg__themes { display: grid; grid-template-columns: 1fr; gap: 10px; }
	.gg__link {
		align-items: start;
		padding: 16px 16px 16px 18px;
		border: 1px solid var(--gg-rule);
		border-left: 4px solid var(--desk);
		transform: none !important;
	}
	.gg__swatch { display: none; }
	.gg__link { grid-template-columns: 1fr 16px; }
	.gg__blurb { grid-template-rows: 1fr; margin-top: 4px; }
	.gg__arrow { opacity: 1; transform: none; align-self: center; }
	.gg--has-active .gg__item:not(.is-active) { opacity: 1; }
}

@media (max-width: 767px) {
	.gg--emblem { padding: 0; }
	.gg--emblem .gg__list { border: 0; border-radius: 0; background: var(--gg-bg); }
	.gg--emblem .gg__link { background: #FFFFFF; }
}

@media (min-width: 480px) and (max-width: 767px) {
	.gg__regions { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
	.gg *,
	.gg *::before,
	.gg *::after { transition-duration: 0s !important; animation: none !important; }
	.gg[data-gg-started] .gg__item:not(.is-in) { opacity: 1; transform: none; }
}