/* ------------------------------------------------------------ *\
	Step Card
\* ------------------------------------------------------------ */

.step-card {
	--dot-center: 58px;
	--line-size: 4px;

	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--b-space-xs);
	min-height: 325px;
	padding: var(--b-space);
	border-left: 3px solid var(--c-green);
	border-radius: var(--border-radius);
	background: var(--c-grey);

	/* Dot on the connecting line */
	&::before {
		content: '';
		position: absolute;
		top: calc(var(--dot-center) - 16px);
		left: -21px;
		z-index: 1;
		width: 32px;
		height: 32px;
		background: url('../../images/steps-dot.svg') 0 0 / 100% 100% no-repeat;
	}

	/* Dashed line, drawn behind the cards across the whole row */
	&::after {
		content: '';
		position: absolute;
		top: calc(var(--dot-center) - var(--line-size) / 2);
		left: -100vw;
		right: -100vw;
		z-index: -1;
		height: var(--line-size);
		background: repeating-linear-gradient(90deg, var(--c-green) 0 10px, transparent 10px 20px);
	}

	/* One line per row, so the dash pattern stays continuous */
	&:not(:nth-child(4n + 1))::after {
		display: none;
	}

	.step-card__number {
		font-family: var(--ff-bold);
		font-size: 45px;
		line-height: 40px;
		color: var(--c-green);
	}

	.step-card__note {
		font-family: var(--ff-medium);
		font-size: var(--fs-small);
	}
}

@media (max-width: 1199px) {
	.step-card {
		&:nth-child(odd)::after {
			display: block;
		}
	}
}

@media (max-width: 767px) {
	.step-card {
		min-height: 0;
	}
}

@media (max-width: 575px) {
	.step-card {
		min-height: 325px;

		/* One card per row: the line only crosses the first card */
		&:nth-child(odd)::after {
			display: none;
		}

		&:first-child::after {
			display: block;
		}
	}
}