/* ==========================================================================
   KROKY — ČO ROBÍME

   Riadky pod sebou, oddelené vlasovou linkou. Je to postupnosť, preto
   `<ol>` — poradie nesie význam a čítačka obrazovky ho ohlási.
   ========================================================================== */

.cpx-steps__title {
	margin-bottom: var(--cpx-space-16);
}

.cpx-steps__lead {
	margin-bottom: var(--cpx-space-64);
}

.cpx-steps__list {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Zvislo na stred: ikona, názov aj text majú spoločnú os. Pri texte
 * na dva riadky pôsobí zarovnanie na vrch ako preklep.
 */
.cpx-steps__item {
	display: grid;
	grid-template-columns: 64px minmax(0, 300px) minmax(0, 1fr);
	gap: var(--cpx-space-34);
	align-items: center;
	padding-block: var(--cpx-space-44);
	border-top: 1px solid var(--cpx-border-subtle);
}

.cpx-steps__item:last-child {
	border-bottom: 1px solid var(--cpx-border-subtle);
}

.cpx-steps__item-title {
	font-size: var(--cpx-fs-step);
	font-weight: var(--cpx-weight-bold);
	line-height: var(--cpx-lh-tight);
	letter-spacing: var(--cpx-ls-h3);
}

.cpx-steps__item-text {
	font-size: var(--cpx-fs-base);
	line-height: 1.72;
	color: var(--cpx-text-muted);
}

.cpx-steps__note {
	max-width: 58ch;
	margin-top: var(--cpx-space-44);
	font-size: var(--cpx-fs-body);
	line-height: var(--cpx-lh-loose);
	color: var(--cpx-text-faint);
}

/*
 * Pod 860 px sa text presunie pod nadpis, ikona ostáva vedľa nadpisu —
 * riadok si tak udrží rytmus a nerozpadne sa na tri samostatné bloky.
 */
@media (max-width: 860px) {
	.cpx-steps__item {
		grid-template-columns: 52px minmax(0, 1fr);
		gap: var(--cpx-space-16) var(--cpx-space-20);
		align-items: start;
		padding-block: var(--cpx-space-34);
	}

	/* Ikona drží riadok s názvom, text ide pod ne cez celú šírku. */
	.cpx-steps__icon {
		grid-row: 1;
	}

	.cpx-steps__item-title {
		align-self: center;
	}

	.cpx-steps__item-text {
		grid-column: 1 / -1;
	}
}