/**
 * EVO page grid — Figma margin frame.
 * Renders as a body overlay above all widgets (pointer-events: none).
 */

:root {
	--evo-page-grid-inset: var(--evo-section-inset, clamp(24px, calc(70 * 100vw / 1440), 70px));
	--evo-page-grid-rail-w: 14px;
	--evo-page-grid-header-y: var(--evo-header-h, 119px);
	--evo-section-gap: 120px;
	--evo-page-grid-z: 10050;
}

/* Desktop only (≥1101) — hidden on phone + tablet */
@media (max-width: 1100px) {
	.evo-page-grid__overlay {
		display: none !important;
	}
}

@media (min-width: 1101px) {
	/* —— Tone tokens — faint Figma rails —— */
	.evo-page-grid__segment--dark {
		--evo-page-grid-line: rgba(255, 255, 255, 0.1);
		--evo-page-grid-rule: var(--evo-header-overlay-rule, rgba(255, 255, 255, 0.08));
		--evo-page-grid-mark: rgba(255, 255, 255, 0.32);
	}

	.evo-page-grid__segment--light {
		--evo-page-grid-line: rgba(231, 227, 221, 0.35);
		--evo-page-grid-rule: rgba(231, 227, 221, 0.35);
		--evo-page-grid-mark: rgba(197, 140, 96, 0.28);
	}

	.evo-page-grid__segment--fade {
		--evo-page-grid-line: rgba(231, 227, 221, 0.22);
		--evo-page-grid-rule: rgba(231, 227, 221, 0.22);
		--evo-page-grid-mark: rgba(197, 140, 96, 0.25);
	}
}

/* —— Fixed viewport overlay — never extends page scroll height —— */
.evo-page-grid__overlay {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: var(--evo-page-grid-z);
	overflow: visible;
}

.evo-page-grid__segment {
	position: fixed;
}

/* Fixed viewport rails — always visible while scrolling */
.evo-page-grid__rail--fixed {
	position: fixed;
	top: 0;
	bottom: 0;
	width: var(--evo-page-grid-rail-w);
	z-index: var(--evo-page-grid-z);
	pointer-events: none;
}

.evo-page-grid__rail--fixed.evo-page-grid__rail--left {
	left: var(--evo-page-grid-inset);
}

.evo-page-grid__rail--fixed.evo-page-grid__rail--right {
	right: var(--evo-page-grid-inset);
}

.evo-page-grid__rail--fixed::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	width: 1px;
	transform: translateX(-50%);
	background: var(--evo-page-grid-line, rgba(255, 255, 255, 0.48));
}

/* Per-section tone segments — viewport-fixed, synced on scroll via JS */
.evo-page-grid__segment {
	left: 0;
	right: 0;
	pointer-events: none;
}

.evo-page-grid__segment .evo-page-grid__rail {
	position: absolute;
	top: 0;
	bottom: 0;
	width: var(--evo-page-grid-rail-w);
}

.evo-page-grid__segment .evo-page-grid__rail--left {
	left: var(--evo-page-grid-inset);
}

.evo-page-grid__segment .evo-page-grid__rail--right {
	right: var(--evo-page-grid-inset);
}

.evo-page-grid__segment .evo-page-grid__rail::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	width: 1px;
	transform: translateX(-50%);
	background: var(--evo-page-grid-line);
}

/* —— + marker —— */
.evo-page-grid__mark {
	position: absolute;
	left: 50%;
	width: 9px;
	height: 9px;
	transform: translate(-50%, -50%);
	color: var(--evo-page-grid-mark);
}

.evo-page-grid__mark::before,
.evo-page-grid__mark::after {
	content: "";
	position: absolute;
	background: currentColor;
	border-radius: 0.5px;
}

.evo-page-grid__mark::before {
	left: 0;
	top: 4px;
	width: 9px;
	height: 1px;
}

.evo-page-grid__mark::after {
	left: 4px;
	top: 0;
	width: 1px;
	height: 9px;
}

.evo-page-grid__mark--header {
	top: var(--evo-page-grid-header-y);
}

.evo-page-grid__mark--section {
	top: 0;
}

/* —— Horizontal rules —— */
.evo-page-grid__rule {
	position: absolute;
	left: var(--evo-page-grid-inset);
	right: var(--evo-page-grid-inset);
	height: 1px;
	background: var(--evo-page-grid-rule);
}

.evo-page-grid__rule--header {
	top: var(--evo-page-grid-header-y);
}

.evo-page-grid__rule--section {
	top: 0;
}

/* Hero segment: fade rails toward white at bottom */
.evo-page-grid__segment--dark .evo-page-grid__rail::before {
	-webkit-mask-image: linear-gradient(
		180deg,
		#000 0%,
		#000 58%,
		rgba(0, 0, 0, 0.55) 78%,
		rgba(0, 0, 0, 0.2) 90%,
		transparent 100%
	);
	mask-image: linear-gradient(
		180deg,
		#000 0%,
		#000 58%,
		rgba(0, 0, 0, 0.55) 78%,
		rgba(0, 0, 0, 0.2) 90%,
		transparent 100%
	);
}

/* Footer segment: fade out */
.evo-page-grid__segment--last .evo-page-grid__rail::before {
	-webkit-mask-image: linear-gradient(
		180deg,
		#000 0%,
		#000 55%,
		rgba(0, 0, 0, 0.4) 75%,
		transparent 92%
	);
	mask-image: linear-gradient(
		180deg,
		#000 0%,
		#000 55%,
		rgba(0, 0, 0, 0.4) 75%,
		transparent 92%
	);
}