/*
 * Home: Services (pages/home/services.php) — the section frame only: the
 * Growth Line entering it and the centred heading. The wheel and the cards
 * are components/services-system (assets/css/components/services-system.css).
 *
 * Light surface after the dark journey: a deliberate change of rhythm, and the
 * most readable setting for seven short descriptions. The Growth Line enters
 * from the top edge and ends on the orange point above the heading.
 */

.gb-services {
	position: relative;
	padding-block: var(--gb-space-3xl) var(--gb-space-2xl);
	background-color: var(--gb-surface);
	color: var(--gb-text);
}

/* ---------- Growth Line entering the section ---------- */

.gb-services__line {
	position: absolute;
	inset-block-start: 0;
	/* Centred with margin-inline: auto (same as the hero cue), so it is direction-neutral. */
	inset-inline: 0;
	inline-size: 2px;
	block-size: calc(var(--gb-space-3xl) - var(--gb-space-s));
	margin-inline: auto;
	background-image: linear-gradient(to bottom, var(--gb-color-navy), var(--gb-primary));
	transform-origin: top;
}

/* The start point (the logo's seed) where the line lands. */
.gb-services__line::after {
	content: "";
	position: absolute;
	inset-block-end: -0.35rem;
	inset-inline-start: 50%;
	inline-size: 0.7rem;
	block-size: 0.7rem;
	border-radius: 50%;
	background-color: var(--gb-seed);
	box-shadow: 0 0 0 0.3rem var(--gb-seed-glow);
	/*
	 * Wider than its 2px parent, so it is centred on the parent's middle:
	 * inline-start is the left edge in LTR (shift by -50%) and the right edge
	 * in RTL (shift by +50%).
	 */
	translate: calc(-50% * var(--gb-dir)) 0;
}

/* Reveal: the line draws downward instead of fading/rising. */
:root[data-gb-appear-ready] .gb-services__line:not([data-gb-appeared]) {
	opacity: 1;
	translate: none;
	scale: 1 0;
}

:root[data-gb-appear-ready] .gb-services__line {
	transition-duration: calc(var(--gb-duration-reveal) * 1.6);
}

/* The heading sits centred under the line. */
.gb-services .gb-section-head {
	justify-items: center;
	margin-inline: auto;
	text-align: center;
}