/* ==========================================================================
   flow.css — Genva Craft

   How an order works, as a vertical timeline: the number on the left, a gold
   hairline joining the numbers, the step on the right.

   The numbers are a CSS counter and the line is ::after, so each step in the
   pattern is only a heading and a paragraph; steps can be added or removed
   in the editor and the numbering and the line follow.
   ========================================================================== */

.flow {
	--flow-num: 3.5rem;
	counter-reset: flow;
}

.flow > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

.flow__step {
	counter-increment: flow;
	position: relative;
	display: grid;
	grid-template-columns: var(--flow-num) 1fr;
	column-gap: var(--wp--preset--spacing--50);
	padding-bottom: var(--wp--preset--spacing--60);
}

.flow .flow__step > * {
	grid-column: 2;
	margin-block-start: 0;
	margin-block-end: 0;
}

.flow__step::before {
	content: counter(flow, decimal-leading-zero);
	grid-column: 1;
	grid-row: 1 / span 2;
	font-family: var(--font-latin);
	font-size: var(--wp--preset--font-size--xlarge);
	font-variant-numeric: lining-nums;
	line-height: 1.2;
	text-align: center;
	color: var(--wp--preset--color--primary);
}

.flow__step::after {
	content: "";
	position: absolute;
	top: calc(var(--wp--preset--font-size--xlarge) * 1.2 + var(--wp--preset--spacing--30));
	bottom: var(--wp--preset--spacing--30);
	left: calc(var(--flow-num) / 2);
	width: 1px;
	background-color: var(--wp--preset--color--line);
}

.flow__step:last-child {
	padding-bottom: 0;
}

.flow__step:last-child::after {
	display: none;
}

.flow .flow__title {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.6;
}

.flow .flow__text {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--secondary);
}