/*
 * Work process steps: icon tiles, numbered badges, dashed arc connectors
 * (desktop only).
 */

.asli-process {
	display: grid;
	grid-template-columns: repeat(var(--asli-process-cols, 3), minmax(0, 1fr));
	gap: var(--asli-space-2xl) var(--asli-space-3xl);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: asli-step;
	text-align: center;
}

.asli-process__item {
	position: relative;
	counter-increment: asli-step;
}

/* ------------------------------------------------------------ icon tile */

.asli-process__tile {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 6.5rem;
	height: 6.5rem;
	border-radius: var(--asli-radius-box);
	background: var(--asli-blue);
	color: var(--asli-text-on-dark);
	font-size: 2.4rem;
	margin-block-end: var(--asli-space-md);
}

.asli-process__tile::after {
	content: counter(asli-step, decimal-leading-zero);
	position: absolute;
	top: -0.75rem;
	inset-inline-end: -0.75rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: var(--asli-radius-pill);
	background: var(--asli-yellow);
	color: var(--asli-navy);
	font-family: var(--asli-font-body);
	font-size: var(--asli-text-meta);
	font-weight: var(--asli-weight-medium);
	box-shadow: 0 0 0 4px var(--asli-surface);
}

.asli-process__title {
	margin: 0 0 var(--asli-space-xs);
}

.asli-process__text {
	margin: 0;
	font-size: var(--asli-text-meta);
}

/* ------------------------------------------------- dashed arc connector */

@media (min-width: 1025px) {
	.asli-process__item:not(:last-child)::before {
		content: "";
		position: absolute;
		top: 2.2rem;
		inset-inline-start: calc(50% + 4.25rem);
		width: calc(100% - 8.5rem + var(--asli-space-3xl));
		height: 2.4rem;
		border: 2px dashed var(--asli-blue);
		border-block-end: 0;
		border-inline-width: 0;
		border-start-start-radius: 100% 200%;
		border-start-end-radius: 100% 200%;
		opacity: 0.45;
	}

	.asli-process__item:nth-child(even):not(:last-child)::before {
		top: auto;
		bottom: 3.4rem;
		border-block-end: 2px dashed var(--asli-blue);
		border-block-start: 0;
		border-start-start-radius: 0;
		border-start-end-radius: 0;
		border-end-start-radius: 100% 200%;
		border-end-end-radius: 100% 200%;
	}
}

/* --------------------------------------------------------------- mobile */

@media (max-width: 1024px) {
	.asli-process {
		grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	}
}