.bl-process-track {
	display: grid;
	gap: var(--bl-process-gap, 2rem);
	position: relative;
	/* Диаметр кружка с номером: от него считаются отступы и положение линии. */
	--bl-process-dot: 3rem;
	--bl-process-line: color-mix(in srgb, currentColor 20%, transparent);
}

/* Линию рисует каждый шаг сам, внутри своей ячейки. Одна общая линия на всю
   дорожку торчала за последний шаг и пропадала на второй строке, когда шагов
   больше, чем колонок. */
.bl-process-connector--solid .bl-process-step::after { --bl-process-line-style: solid; }
.bl-process-connector--dashed .bl-process-step::after { --bl-process-line-style: dashed; }

.bl-process--timeline-h .bl-process-track { grid-template-columns: 1fr; }
@media (min-width: 782px) {
	.bl-process--timeline-h .bl-process-track { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
	/* Линия цепляется за кружок с номером, поэтому без номеров её не рисуем —
	   иначе она проходила бы прямо по заголовкам шагов. */
	.bl-process--timeline-h.bl-process--numbered.bl-process-connector--solid .bl-process-step:not(:last-child)::after,
	.bl-process--timeline-h.bl-process--numbered.bl-process-connector--dashed .bl-process-step:not(:last-child)::after {
		content: "";
		position: absolute;
		top: calc(var(--bl-process-dot) / 2);
		left: calc(var(--bl-process-dot) + .6rem);
		right: 0;
		height: 0;
		border-top: 2px var(--bl-process-line-style, dashed) var(--bl-process-line);
		z-index: 0;
	}
}

.bl-process--timeline-v .bl-process-track { grid-template-columns: 1fr; max-width: 640px; padding-left: 2.5rem; position: relative; }
.bl-process--timeline-v.bl-process-connector--solid .bl-process-step::after,
.bl-process--timeline-v.bl-process-connector--dashed .bl-process-step::after {
	content: "";
	position: absolute;
	left: -1.5rem;
	top: 0;
	bottom: calc(var(--bl-process-gap, 2rem) * -1);
	width: 0;
	border-left: 2px var(--bl-process-line-style, dashed) var(--bl-process-line);
}
/* У последнего шага линия обрывается на его номере, а не тянется до низа блока. */
.bl-process--timeline-v .bl-process-step:last-child::after { bottom: auto; height: calc(var(--bl-process-dot) / 2); }
.bl-process--timeline-v .bl-process-step:only-child::after { content: none; }

.bl-process--cards .bl-process-track { grid-template-columns: 1fr; }
@media (min-width: 560px) { .bl-process--cards .bl-process-track { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 782px) {
	.bl-process--cards .bl-process-track { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	/* Меньше четырёх шагов — не растягиваем ряд из четырёх колонок,
	   иначе справа остаётся пустая клетка. */
	.bl-process--cards .bl-process-track--n1 { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
	.bl-process--cards .bl-process-track--n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 840px; }
	.bl-process--cards .bl-process-track--n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.bl-process--cards .bl-process-step {
	padding: 1.5rem;
	border-radius: var(--bl-card-radius);
	background: var(--bl-surface);
	border: var(--bl-border-width, 1px) solid var(--bl-border);
	box-shadow: var(--bl-shadow, none);
}

.bl-process-step { position: relative; z-index: 1; min-width: 0; }
.bl-process-step__number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: var(--bl-process-dot, 3rem); height: var(--bl-process-dot, 3rem);
	border-radius: 50%;
	background: var(--bl-accent);
	color: var(--bl-accent-contrast);
	font-weight: 750;
	font-size: 1.0625rem;
	letter-spacing: -0.02em;
	margin-bottom: 1.15rem;
	box-shadow: 0 6px 18px color-mix(in srgb, var(--bl-accent) 35%, transparent);
	position: relative;
}
.bl-process-step__number::after {
	content: "";
	position: absolute;
	inset: -5px;
	border-radius: 50%;
	border: 1.5px solid color-mix(in srgb, var(--bl-accent) 28%, transparent);
}
.bl-process-step__icon { width: 2.5rem; height: 2.5rem; object-fit: contain; margin-bottom: 1rem; }
.bl-process-step h3 { margin: 0 0 .45em; font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.bl-process-step p { margin: 0; font-size: .9375rem; line-height: 1.55; color: var(--bl-muted); overflow-wrap: anywhere; }
.bl-process-step__duration {
	max-width: 100%;
	overflow-wrap: anywhere;
	display: inline-flex;
	align-items: center;
	gap: .4em;
	margin-top: .85rem;
	padding: .3em .8em;
	/* Половина высоты в одну строку: капсула на коротком сроке и аккуратный
	   прямоугольник, если срок переносится. */
	border-radius: 1em;
	line-height: 1.4;
	background: color-mix(in srgb, var(--bl-accent) 10%, transparent);
	font-size: .78rem;
	font-weight: 650;
	color: var(--bl-accent);
}