/**
 * "How it works" steps.
 *
 * Only the six values the design drove from its `narrow` flag; everything
 * else keeps the design's inline styling. No box-sizing reset -- the design
 * has none, and its inline sizes assume content-box.
 *
 * Narrow first, so each rule below is the design's `narrow` branch and the
 * one media query at the end is its wide branch.
 */

.rchw__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
}

.rchw__card {
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: stretch;
	gap: 16px;
	padding-right: 0;
	padding-bottom: 32px;
}

.rchw__rail-wrap {
	display: flex;
	flex: 0 0 40px;
	flex-direction: column;
	align-items: center;
	align-self: stretch;
	gap: 10px;
	width: 40px;
}

/*
 * Vertical in the narrow layout, and pulled 42px past its box so the line
 * reaches the next step's number.
 */
.rchw__rail,
.rchw__rail--last {
	flex: 1;
	width: 1px;
	min-height: 24px;
	margin-bottom: -42px;
	background: linear-gradient(to bottom, #c7d2fe 0%, #c7d2fe 100%);
}

/* The last step's rail has nothing to join, so the design drops it. */
.rchw__rail--last {
	display: none;
}

.rchw__content {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
	width: auto;
}

/* The switch ---------------------------------------------------------------
 *
 * One breakpoint, at the design's own `narrow = w < 860`.
 */

@media (min-width: 860px) {

	.rchw__grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 36px 0;
	}

	.rchw__card {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
		padding-right: clamp(0px, 3vw, 32px);
		padding-bottom: 0;
	}

	.rchw__rail-wrap {
		flex: 0 0 auto;
		flex-direction: row;
		gap: 14px;
		width: 100%;
	}

	/* Horizontal, and the last one is shown. */
	.rchw__rail,
	.rchw__rail--last {
		display: block;
		width: auto;
		height: 1px;
		min-height: 0;
		margin-bottom: 0;
		background: linear-gradient(to right, #c7d2fe 0%, #e8e8ed 100%);
	}

	.rchw__content {
		flex: 0 0 auto;
		gap: 20px;
		width: 100%;
	}
}

/* The design hides the subtitle's line break on small screens. */
@media (max-width: 900px) {

	.rchw .rc-br {
		display: none;
	}
}