/**
 * About page — Manifesto scroll section.
 * Animation mechanics live in assets/css/manifesto.css + assets/js/manifesto-parallax.js.
 * This file only maps About design tokens and layout onto the shared manifesto block.
 */

:root {
	/*
	 * Figma "About US" (node 1167:452, 1920 artboard) puts the page container at
	 * x 77 → 1843 and indents every block below the images section inside it:
	 * copy starts at x=380 (+303) and the manifesto label/heading at x=272 (+195).
	 * The indents therefore hang off the shared container, not the viewport edge —
	 * anchoring them right made the copy drift out of the grid past 1920px.
	 */
	--sp-about-content-indent: clamp(0px, calc(303 / var(--spaciefy-artboard) * 100vw), 303px);
	--sp-about-statement-indent: clamp(0px, calc(195 / var(--spaciefy-artboard) * 100vw), 195px);
	/* Left gutter of the centred page container, for blocks that bleed off the right edge. */
	--sp-about-container-gutter: calc(
		(100% - min(var(--spaciefy-container-width), var(--spaciefy-container))) / 2
	);
	--sp-about-content-text-max: min(1068px, 55.625vw);
	--sp-about-content-pad-top: clamp(48px, calc(160 / var(--spaciefy-artboard) * 100vw), 160px);
	--sp-about-content-pad-bottom: clamp(48px, calc(210 / var(--spaciefy-artboard) * 100vw), 210px);
	--sp-about-content-label-size: clamp(12px, calc(17 / var(--spaciefy-artboard) * 100vw), 17px);
	--sp-about-content-label-tracking: clamp(2px, calc(4.25 / var(--spaciefy-artboard) * 100vw), 4.25px);
	--sp-about-content-label-lh: 1.43;
	--sp-about-content-label-opacity: 0.5;
	--sp-about-content-label-text-gap: clamp(14px, calc(34 / var(--spaciefy-artboard) * 100vw), 34px);
	--sp-about-content-text-size: clamp(16px, calc(39.618 / var(--spaciefy-artboard) * 100vw), 39.618px);
	--sp-about-content-text-lh: 1.43;
	--sp-about-content-text-manifesto-gap: clamp(56px, calc(240 / var(--spaciefy-artboard) * 100vw), 240px);
	--sp-about-statement-heading-size: clamp(32px, calc(128.207 / var(--spaciefy-artboard) * 100vw), 128.207px);
	--sp-about-statement-heading-lh: 1.43;
	--sp-about-statement-heading-tracking: clamp(-1px, calc(-2.564 / var(--spaciefy-artboard) * 100vw), -2.564px);
	--sp-about-statement-heading-color: #232325;
	--sp-about-statement-heading-bottom: clamp(48px, calc(180 / var(--spaciefy-artboard) * 100vw), 180px);
}

/* Feed About tokens into the shared homepage manifesto variables */
.sp-manifesto-scroll--about {
	--sp-manifesto-pad-top: var(--sp-about-content-pad-top);
	--sp-manifesto-heading-bottom: var(--sp-about-statement-heading-bottom);
	--sp-manifesto-label-size: var(--sp-about-content-label-size);
	--sp-manifesto-label-tracking: var(--sp-about-content-label-tracking);
	--sp-manifesto-heading-size: var(--sp-about-statement-heading-size);
	--sp-manifesto-heading-lh: var(--sp-about-statement-heading-lh);
	--sp-manifesto-heading-tracking: var(--sp-about-statement-heading-tracking);
	--sp-manifesto-heading-color: var(--sp-about-statement-heading-color);
	background-color: var(--spaciefy-white);
}

.sp-manifesto-scroll--about[data-manifesto-pinned] {
	height: var(--sp-manifesto-scroll-height, auto);
}

.sp-about-manifesto__intro-section + .sp-manifesto-scroll--about {
	--sp-manifesto-pad-top: 0;
}

.sp-manifesto-scroll--about > .sp-about-manifesto__intro-section + .sp-manifesto--about {
	--sp-manifesto-pad-top: 0;
}

/* Intro — scrolls before the sticky manifesto block, same alignment as before */
.sp-manifesto-scroll--about > .sp-about-manifesto__intro-section {
	background-color: transparent;
	color: var(--spaciefy-black);
	padding-top: var(--sp-about-content-pad-top);
	padding-bottom: var(--sp-about-content-text-manifesto-gap);
}

/* Intro as first section outside sticky (legacy standalone pages) */
.sp-about-manifesto__intro-section {
	background-color: var(--spaciefy-white);
	color: var(--spaciefy-black);
	padding-top: var(--sp-about-content-pad-top);
}

.sp-about-manifesto__intro-section:not(:last-child) {
	padding-bottom: var(--sp-about-content-text-manifesto-gap);
}

.sp-about-manifesto__intro-wrap {
	width: var(--spaciefy-container-width);
	max-width: var(--spaciefy-container);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--sp-about-content-indent);
}

.sp-about-manifesto__intro-block {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
}

.sp-about-manifesto__intro-label {
	display: block;
	margin: 0;
	padding: 0 0 var(--sp-about-content-label-text-gap);
	font-family: var(--spaciefy-font-helvetica);
	font-size: var(--sp-about-content-label-size);
	font-weight: 400;
	line-height: 1.43;
	letter-spacing: var(--sp-about-content-label-tracking);
	text-transform: uppercase;
	color: #000;
	opacity: var(--sp-about-content-label-opacity);
}

.sp-about-manifesto__intro {
	margin: 0;
	max-width: var(--sp-about-content-text-max);
	font-family: var(--spaciefy-font-helvetica);
	font-size: var(--sp-about-content-text-size);
	font-weight: 300;
	line-height: var(--sp-about-content-text-lh);
	color: #000;
	overflow-wrap: break-word;
}

/* Label container — page container, indented to the manifesto column */
.sp-about-manifesto__inner.sp-manifesto__inner {
	width: var(--spaciefy-container-width);
	max-width: var(--spaciefy-container);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--sp-about-statement-indent);
}

.sp-manifesto-scroll--about .sp-manifesto__statement {
	margin-top: 0;
	padding-left: 0;
}

.sp-manifesto-scroll--about .sp-manifesto__label {
	opacity: var(--sp-about-content-label-opacity);
}

/*
 * Heading track — starts on the manifesto indent and runs to the page edge, so
 * the parallax copy is clipped by the viewport exactly as it is in the design.
 */
.sp-about-manifesto__heading-wrap {
	width: auto;
	max-width: none;
	margin-left: calc(var(--sp-about-container-gutter) + var(--sp-about-statement-indent));
	margin-right: 0;
}

.sp-about-manifesto__heading-wrap .sp-manifesto__heading-track {
	width: 100%;
}

/* Stack point — the editorial indent collapses with the images grid */
@media (max-width: 992px) {
	:root {
		--sp-about-content-indent: 0px;
		--sp-about-statement-indent: 0px;
	}
}

@media (max-width: 768px) {
	/* Parallax is off here, so the heading track no longer needs the right bleed */
	.sp-about-manifesto__heading-wrap {
		width: var(--spaciefy-container-width);
		max-width: var(--spaciefy-container);
		margin-left: auto;
		margin-right: auto;
	}

	.sp-about-manifesto__intro {
		max-width: 100%;
	}
}

@media (max-width: 480px) {
	.sp-manifesto-scroll--about .sp-manifesto__heading {
		line-height: 1.15;
	}
}