/*
 * "From imagery to intelligence in four steps" - a 2x2 numbered flow joined by
 * a dotted connector that loops 1 -> 2 -> 3 -> 4.
 *
 * Measured off the design export: 40px badges, 344px between the two badge
 * rows, a 2px/2px dotted rule at 1px, and a right-hand semicircle whose radius
 * is exactly half the row pitch, touching the container's right edge.
 */

.steps {
	position: relative;
	padding-block: var(--section-y);
	background: var(--color-bg-default);
}

/* Soft wash behind the flow: warm on the left, violet on the right, fading to
   white at the head and foot. Rebuilt from the export's sampled colors. */
.steps::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(52% 34% at 14% 55%, #f9e5de 0%, rgb(249 229 222 / 0%) 100%),
		radial-gradient(52% 34% at 80% 55%, #e6d9ec 0%, rgb(230 217 236 / 0%) 100%),
		radial-gradient(46% 28% at 47% 56%, #eddce2 0%, rgb(237 220 226 / 0%) 100%);
}

.steps > .container {
	position: relative;
	z-index: 1;
}

.steps__title {
	margin: 0 0 var(--space-80);
	color: var(--color-text-primary);
}

.steps__grid {
	/* Everything the connector needs is derived from these four. */
	--steps-badge: 40px;
	--steps-colgap: var(--space-24);
	--steps-pitch: clamp(268px, 24vw, 344px);
	--steps-r: calc(var(--steps-pitch) / 2);

	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	/* Row 1 is a fixed track, so the badge rows sit exactly --steps-pitch apart
	   and the connector can be positioned without measuring content. */
	grid-template-rows: var(--steps-pitch) auto;
	column-gap: var(--steps-colgap);
	row-gap: 0;
}

/* --- Connector ------------------------------------------------------------ */

/* Spans badge-centre to badge-centre, so every piece below is placed against
   the badges rather than against the text. */
.steps__wire {
	position: absolute;
	top: calc(var(--steps-badge) / 2);
	left: 0;
	right: 0;
	height: var(--steps-pitch);
	color: var(--color-text-primary);
	pointer-events: none;
}

.steps__line {
	position: absolute;
	height: 1px;
	background-image: repeating-linear-gradient(
		to right,
		currentcolor 0 2px,
		transparent 2px 4px
	);
}

/* Each rule leaves its badge 24px past the edge, and stops 80px short of the
   next column. The arrow end is pulled back a further 4px so the dots meet the
   chevron's base instead of running under its point. */
.steps__line--a {
	top: 0;
	left: calc(var(--steps-badge) / 2 + 24px);
	right: calc(50% - var(--steps-colgap) / 2 + 84px);
}

.steps__line--b {
	top: 0;
	left: calc(50% + var(--steps-colgap) / 2 + var(--steps-badge) / 2 + 24px);
	right: var(--steps-r);
}

.steps__line--c {
	top: var(--steps-pitch);
	left: calc(50% + var(--steps-colgap) / 2 + var(--steps-badge) / 2 + 28px);
	right: var(--steps-r);
}

.steps__line--d {
	top: var(--steps-pitch);
	left: calc(var(--steps-badge) / 2 + 28px);
	right: calc(50% - var(--steps-colgap) / 2 + 80px);
}

/* The box is always r wide by 2r tall, so the arc stays a true semicircle at
   any width; non-scaling-stroke keeps the dots at 1px instead of scaling up. */
.steps__loop {
	position: absolute;
	top: 0;
	right: 0;
	width: var(--steps-r);
	height: var(--steps-pitch);
	overflow: visible;
}

/* A 4x7 chevron, per the design - open, not a filled head. */
.steps__tip {
	position: absolute;
	width: 5px;
	height: 8px;
	margin-top: -4px;
}

.steps__tip--a {
	top: 0;
	right: calc(50% - var(--steps-colgap) / 2 + 80px);
}

.steps__tip--c,
.steps__tip--d {
	top: var(--steps-pitch);
	transform: scaleX(-1);
}

.steps__tip--c {
	left: calc(50% + var(--steps-colgap) / 2 + var(--steps-badge) / 2 + 24px);
}

.steps__tip--d {
	left: calc(var(--steps-badge) / 2 + 24px);
}

/* --- Steps ---------------------------------------------------------------- */

.steps-step {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-16);
}

.steps-step__badge {
	display: grid;
	place-items: center;
	width: var(--steps-badge);
	height: var(--steps-badge);
	border-radius: var(--radius-full);
	font-family: var(--font-body);
	font-size: var(--text-body);
	font-weight: 500;
	color: var(--color-text-inverse);
}

.steps-step__badge--warm {
	background: var(--color-secondary);
}

.steps-step__badge--cool {
	background: var(--color-primary);
}

.steps-step__title {
	margin: var(--space-8) 0 0;
	font-family: var(--font-display);
	font-size: var(--text-h4);
	font-weight: 500;
	line-height: 1.2;
	color: var(--color-text-primary);
}

.steps-step__text {
	max-width: 420px;
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--text-body);
	line-height: var(--lh-body);
	color: var(--color-text-muted);
}

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 767px) {
	.steps__grid {
		grid-template-columns: 1fr;
		grid-template-rows: none;
		row-gap: 0;
	}

	.steps__wire {
		display: none;
	}

	/* DOM order is row-major (1, 2, 4, 3) for the connector loop; stacked in one
	   column it has to read 1, 2, 3, 4. */
	.steps-step:nth-of-type(3) {
		order: 2;
	}

	.steps-step:nth-of-type(4) {
		order: 1;
	}

	/* Mobile turns the flow on its side: badge in a left gutter, copy beside it,
	   and a dotted rule running down between the badges. */
	.steps-step {
		display: grid;
		grid-template-columns: 52px minmax(0, 1fr);
		align-items: start;
		gap: 4px var(--space-16);
		padding-bottom: var(--space-32);
	}

	.steps-step__badge {
		grid-row: 1 / span 2;
		margin-left: 8px;
	}

	.steps-step__title {
		margin: 6px 0 0;
		font-size: var(--text-body-lg);
	}

	/* The rule hangs off the badge column and stops short of the next badge,
	   where the arrowhead sits. */
	/* Deliver is the third article in the DOM but the last one on screen, so the
	   rule is suppressed there rather than on :last-of-type. */
	.steps-step:not(:nth-of-type(3))::before,
	.steps-step:not(:nth-of-type(3))::after {
		content: "";
		position: absolute;
		left: 26px;
	}

	.steps-step:not(:nth-of-type(3))::before {
		top: 40px;
		bottom: 12px;
		width: 1px;
		transform: translateX(-0.5px);
		background-image: repeating-linear-gradient(
			to bottom,
			var(--color-text-primary) 0 2px,
			transparent 2px 6px
		);
	}

	.steps-step:not(:nth-of-type(3))::after {
		bottom: 4px;
		width: 0;
		height: 0;
		border-left: 3.5px solid transparent;
		border-right: 3.5px solid transparent;
		border-top: 5px solid var(--color-text-primary);
		transform: translateX(-3.5px);
	}

	.steps-step__text {
		font-size: var(--text-body-sm);
	}
}