/**
 * Terra Cracovianum — "Mapa Świata" globe page.
 * Dark-observatory layout, container, and dark hover popup. Inherits theme tokens from
 * style.css (--ink-deep, --parchment, --sand, --serif, --sans, --mono, --gutter, --hairline-dark).
 */

/* ---------- page layout (dark observatory) ---------- */

.globus-page {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	padding-top: clamp( 78px, 11vh, 108px ); /* clear the fixed header */
	background: var(--ink-deep);
	color: var(--parchment);
}

.globus-head {
	padding: 0 var(--gutter) clamp( 12px, 2vh, 20px );
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 18px;
	flex-wrap: wrap;
	border-bottom: 1px solid var(--hairline-dark);
}

.globus-head h1 {
	margin: 0;
	font-family: var(--serif);
	font-weight: 340;
	font-size: clamp( 30px, 5vw, 56px );
	line-height: 1;
	letter-spacing: -0.01em;
	color: var(--parchment);
	text-transform: none;
}

.globus-page .globus-head .kicker {
	color: var(--sand);
}

/* the dedicated globe page shares the same warm-glow container as the archive band */
.globus-page #globe-container {
	background: radial-gradient( 120% 90% at 50% 14%, rgba( 217, 160, 107, 0.1 ), transparent 62% );
}

.globus-head .kicker {
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ink-soft);
}

/* ---------- globe container ---------- */

#globe-container {
	position: relative;
	flex: 1 1 auto;
	min-height: 58vh;
	width: 100%;
	overflow: hidden;
	cursor: grab;
}

#globe-container:active {
	cursor: grabbing;
}

#globe-container canvas {
	display: block;
}

.globe-msg {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: var(--gutter);
	text-align: center;
	font-family: var(--mono);
	font-size: 13px;
	letter-spacing: 0.06em;
	color: var(--ink-soft);
}

/* ---------- publications-page globe section ---------- */

.pub-globe {
	border-bottom: 1px solid var(--hairline);
}

.pub-globe-stage {
	position: relative;
	padding: clamp( 6px, 1.5vh, 20px ) var(--gutter) clamp( 24px, 5vh, 52px );
}

/* In the archive the globe lives inside a normal section, so it needs an explicit
   height (the dedicated globe page uses the flex layout above instead). */
.pub-globe #globe-container {
	flex: none;
	min-height: 0;
	height: clamp( 380px, 56vh, 660px );
	border-radius: 0;
	background: radial-gradient( 120% 90% at 50% 14%, rgba( 217, 160, 107, 0.1 ), transparent 62% );
}

/* legend inside the dark observatory band: light halo (the default dark halo vanishes) */
.pub-globe .globe-legend-dot {
	box-shadow: 0 0 0 3px rgba( 243, 238, 227, 0.06 );
}

.pub-globe .globe-legend li {
	color: var(--text-on-dark);
}

/* Same reason for the empty/error message: --ink-soft (#3c4238) on --ink-deep (#10140f) is a
   ~1.8:1 contrast ratio, i.e. invisible. The legend already had this override; the message did not,
   so a globe with no pinned publications looked like an empty black rectangle. */
.pub-globe .globe-msg,
.globus-page .globe-msg {
	color: var(--text-on-dark);
}

.globe-legend {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 9px 22px;
	margin: clamp( 16px, 2.6vh, 24px ) auto 0;
	padding: 0;
	list-style: none;
}

.globe-legend li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink-soft);
}

.globe-legend-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	flex-shrink: 0;
	box-shadow: 0 0 0 3px rgba( 24, 28, 23, 0.05 );
}

/* ---------- hover popup (globe.gl tooltip host) ---------- */

/* globe.gl's default tooltip host — strip any framing so only .globe-tip shows */
.scene-tooltip {
	pointer-events: none;
	background: none;
	border: 0;
	box-shadow: none;
	padding: 0;
	border-radius: 0;
}

.globe-tip {
	min-width: 200px;
	max-width: 280px;
	padding: 12px 14px;
	background: rgba( 20, 26, 19, 0.92 );
	border: 1px solid rgba( 243, 238, 227, 0.16 );
	border-radius: 12px;
	-webkit-backdrop-filter: blur( 8px );
	backdrop-filter: blur( 8px );
	font-family: var(--sans);
	text-align: left;
}

.globe-tip-loc {
	margin-bottom: 8px;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba( 243, 238, 227, 0.62 );
}

.globe-tip-item + .globe-tip-item {
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid rgba( 243, 238, 227, 0.12 );
}

.globe-badge {
	display: inline-block;
	margin-bottom: 5px;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--cat, #c2451e);
	color: #fff;
	font-family: var(--mono);
	font-size: 9.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.globe-tip-title {
	display: block;
	font-family: var(--serif);
	font-size: 15px;
	line-height: 1.25;
	color: var(--parchment);
	text-decoration: none;
}

.globe-tip-read {
	display: inline-block;
	margin-top: 4px;
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sand-soft);
}

/* ---------- mobile ---------- */

@media ( max-width: 700px ) {
	.globus-page {
		padding-top: clamp( 68px, 9vh, 88px );
	}

	#globe-container {
		min-height: 64vh;
	}

	.pub-globe #globe-container {
		height: clamp( 320px, 56vh, 460px );
		min-height: 0;
		border-radius: 14px;
	}

	.globe-tip {
		min-width: 168px;
		max-width: 232px;
		padding: 10px 12px;
	}

	.globe-tip-title {
		font-size: 14px;
	}
}