/**
 * Layout: Values — "We are …".
 *
 * Technique from the "you can solve." CSS scroll effect (freefrontend.com):
 * - "We are" is sticky with its line centred on the screen (--gm-vstack-start);
 * - the values scroll past naturally, nothing is pinned or faded out;
 * - each value is painted with a viewport-fixed gradient (background-clip:
 *   text): purple in a one-line band at the "We are" line, light grey above
 *   and below — so the value level with "We are" is purple, by position;
 * - proximity scroll-snap centres the nearest value on that line.
 * Touch devices (no fixed backgrounds on iOS) use the .is-active colour.
 * Plain list (all sentences) without JS / with reduced motion.
 *
 * @package GagaMuller
 */

.gm-vstack {
	--gm-vstack-size: clamp(2.25rem, 1.4rem + 3.4vw, 4rem);
	--gm-vstack-line: calc(var(--gm-vstack-size) * 1.15);
	--gm-vstack-start: 50vh;
	--gm-vstack-grey: #c9c8d3;
}

.gm-vstack__stage {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: clamp(0.75rem, 0.4rem + 1.2vw, 1.5rem);
	align-items: start;
	margin-top: clamp(1rem, 0.5rem + 2vw, 2.5rem);
}

.gm-vstack__lead,
.gm-vstack__word {
	margin: 0;
	padding: 0;
	font-family: var(--gm-font-heading);
	font-size: var(--gm-vstack-size) !important;
	font-weight: var(--gm-weight-bold);
	letter-spacing: -0.01em;
	line-height: 1.15 !important;
}

.gm-vstack__lead {
	color: var(--gm-text);
	white-space: nowrap;
}

.gm-vstack__caption {
	display: none;
}

.gm-vstack__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.gm-vstack__item {
	margin: 0;
	padding: 0;
}

.gm-vstack__word {
	color: var(--gm-text);
}

.gm-vstack__desc {
	max-width: 30rem;
	margin: 0.25rem 0 1.25rem;
	color: var(--gm-text-secondary);
}

/* ---- Enhanced (view.js) --------------------------------------------- */

html:has(.gm-vstack.is-enhanced) {
	scroll-snap-type: y proximity;
}

/* Breathing room between values so the purple band (one line tall) never
   touches the value above or below. The lead gets the same top padding so
   it stays level with the first value. */
.gm-vstack {
	--gm-vstack-gap: calc(var(--gm-vstack-size) * 0.14);
}

.gm-vstack.is-enhanced .gm-vstack__item {
	padding-block: var(--gm-vstack-gap);
}

.gm-vstack.is-enhanced .gm-vstack__side {
	position: sticky;
	top: calc(var(--gm-vstack-start) - var(--gm-vstack-line) / 2 - var(--gm-vstack-gap));
	align-self: start;
	padding-top: var(--gm-vstack-gap);
}

/* Sentences live under "We are" (caption), so the list is only the words. */
.gm-vstack.is-enhanced .gm-vstack__desc {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* The caption is in flow with a fixed 3-line height, and the list ends
   with the same space, so the sticky "We are" still stops exactly level
   with the last value and the caption never runs into the next section. */
.gm-vstack {
	--gm-vstack-caption: calc(3 * 1.45rem + 0.5rem);
}

.gm-vstack.is-enhanced .gm-vstack__list {
	padding-bottom: var(--gm-vstack-caption);
}

.gm-vstack.is-enhanced .gm-vstack__caption {
	display: block;
	box-sizing: border-box;
	width: 0;
	min-width: 100%;
	height: var(--gm-vstack-caption);
	overflow: hidden;
	margin: 0;
	padding-top: 0.5rem;
	color: var(--gm-text-secondary);
	font-size: 1rem;
	line-height: 1.45;
	transition: opacity 300ms var(--gm-ease);
}

.gm-vstack.is-enhanced .gm-vstack__caption.is-swapping {
	opacity: 0;
}

.gm-vstack.is-enhanced .gm-vstack__word {
	scroll-snap-align: center;
	color: var(--gm-vstack-grey);
	transition: color 300ms var(--gm-ease);
}

.gm-vstack.is-enhanced .gm-vstack__item.is-active .gm-vstack__word {
	color: var(--gm-color-purple);
}

/* Desktop: colour by position, exactly like the reference. */
@media (hover: hover) and (pointer: fine) {
	.gm-vstack.is-enhanced .gm-vstack__word,
	.gm-vstack.is-enhanced .gm-vstack__item.is-active .gm-vstack__word {
		background: linear-gradient(
			180deg,
			var(--gm-vstack-grey) 0 calc(var(--gm-vstack-start) - var(--gm-vstack-line) * 0.5),
			var(--gm-color-purple) calc(var(--gm-vstack-start) - var(--gm-vstack-line) * 0.5) calc(var(--gm-vstack-start) + var(--gm-vstack-line) * 0.5),
			var(--gm-vstack-grey) calc(var(--gm-vstack-start) + var(--gm-vstack-line) * 0.5)
		);
		background-attachment: fixed;
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
	}
}

.gm-surface--inverse .gm-vstack__lead,
.gm-surface--inverse .gm-vstack__word {
	color: var(--gm-color-white);
}

.gm-surface--inverse.gm-vstack {
	--gm-vstack-grey: rgb(255 255 255 / 0.22);
}

@media (max-width: 599px) {
	.gm-vstack {
		--gm-vstack-size: clamp(1.75rem, 1.2rem + 3vw, 2.25rem);
	}

	/* Phones: "We are" is too narrow to hold the sentence; show words only. */
	.gm-vstack.is-enhanced .gm-vstack__caption {
		display: none;
	}

	.gm-vstack.is-enhanced .gm-vstack__list {
		padding-bottom: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	html:has(.gm-vstack.is-enhanced) {
		scroll-snap-type: none;
	}
}