/* Component: Our Process — Figma "OurProcess", steps "Title" (Mob=No / Mob=Yes) */

.spc-process__inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 64px;
}

.spc-process__upper {
	display: flex;
	flex-direction: column;
	gap: 32px;
	width: 100%;
}

/* Figma Txts width: (content − 64) / 3 → 448 / 349 / 299px at 1920 / 1240 / 1024. */
.spc-process__heading {
	max-width: calc((100% - 64px) / 3);
}

.spc-process__steps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 64px;
	padding: 0;
	list-style: none;
}

.spc-process__step {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.spc-process__head {
	display: flex;
	align-items: center;
	gap: 32px;
}

/* Gold line + arrow head running into the gap before the next step. */
.spc-process__arrow {
	position: relative;
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	justify-content: flex-end;
	min-width: 64px;
	height: 24px;
	margin-right: -48px;
	color: var(--sp-gold);
}

.spc-process__arrow::before {
	content: '';
	position: absolute;
	left: 0;
	right: 8px;
	top: 50%;
	height: 3px;
	margin-top: -1.5px;
	background: currentColor;
}

.spc-process__arrow-head {
	position: relative;
	width: 32px;
	height: 24px;
}

.spc-process__step:last-child .spc-process__arrow {
	display: none;
}

/* 768 / 360: vertical timeline — title, gold line beside the text, arrow down. */
@media (max-width: 1023px) {
	.spc-process__heading {
		max-width: calc((100% - 32px) / 2);
	}

	.spc-process__steps {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.spc-process__step {
		display: grid;
		grid-template-columns: 32px minmax(0, 1fr);
		gap: 0;
	}

	.spc-process__head {
		display: contents;
	}

	.spc-process__step h3 {
		grid-column: 1 / -1;
		grid-row: 1;
		margin-bottom: 8px;
	}

	.spc-process__step::before {
		content: '';
		grid-column: 1;
		grid-row: 2;
		justify-self: center;
		width: 3px;
		margin-bottom: -4px;
		background: var(--sp-gold);
	}

	.spc-process__step .spc-lead {
		grid-column: 2;
		grid-row: 2;
		padding: 16px;
	}

	.spc-process__step:last-child .spc-process__arrow,
	.spc-process__arrow {
		display: flex;
		grid-column: 1;
		grid-row: 3;
		justify-content: center;
		width: 32px;
		min-width: 0;
		height: 32px;
		margin: 0;
	}

	.spc-process__arrow::before {
		display: none;
	}

	.spc-process__arrow-head {
		transform: rotate(90deg);
	}
}

@media (max-width: 767px) {
	.spc-process__inner {
		gap: 32px;
	}

	.spc-process__heading {
		max-width: none;
	}
}