/* ==========================================================================
   KROKY SPOLUPRÁCE

   Očíslované kroky v kolotoči. Číslo je veľké a tenké, rovnako ako čísla
   v sekcii „Čísla hovoria za nás". Dizajn: 1728 × 858 px.
   ========================================================================== */

.shs-steps {
	--shs-steps-inset: var(--shs-edge-inset);

	padding-block: calc(var(--shs-space-96) + var(--shs-space-19)) var(--shs-space-96);
	color: var(--shs-brand);
	background: var(--shs-cream);
}

/*
 * Hlava sekcie je plnošírková — odsadenie si musí niesť sama. Na
 * desktope je nadpis na strede, takže ho gutter neposunie; na mobile
 * je zarovnaný doľava a bez odsadenia by sedel na hrane obrazovky,
 * kým zvyšok webu má 20 px.
 */
.shs-steps__head {
	padding-inline: var(--shs-gutter);
	text-align: center;
}

/* ---- Kroky -------------------------------------------------------------- */

.shs-steps__viewport {
	position: relative;
	margin-top: var(--shs-space-96);
}

.shs-steps__list {
	display: flex;
	gap: var(--shs-space-64);
	margin: 0;
	padding: 0 var(--shs-steps-inset);
	list-style: none;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}

.shs-steps__list::-webkit-scrollbar {
	display: none;
}

/*
 * Kolotoč ukazuje presne TRI položky, zvyšok sa doroluje. Šírka je
 * podiel viditeľnej plochy pásu, nie pevné číslo z návrhu — inak by na
 * širokej obrazovke vykúkala štvrtá a na užšej sa nezmestili tri.
 * Pás je odsadený rovnako z oboch strán, takže tie tri sedia presne
 * v 1600 px páse ako zvyšok obsahu; ďalšia vykúka do okraja, lebo
 * obsah sa orezáva až na hrane výplne, nie na konci textu.
 */
.shs-steps__item {
	flex: 0 0 auto;
	width: calc(
		(100% - (var(--shs-carousel-count) - 1) * var(--shs-space-64))
		/ var(--shs-carousel-count)
	);
}

.shs-steps__number {
	font-family: var(--shs-font-display);
	font-size: var(--shs-fs-stat);
	font-weight: var(--shs-weight-thin);
	line-height: var(--shs-lh-snug);
}

.shs-steps__item-title {
	margin-top: var(--shs-space-19);
	font-family: var(--shs-font-body);
	font-size: var(--shs-fs-lead);
	font-weight: var(--shs-weight-light);
	line-height: var(--shs-lh-tight);
	text-transform: none;
}

.shs-steps__text {
	margin-top: var(--shs-space-16);
	font-size: var(--shs-fs-small);
	font-weight: var(--shs-weight-light);
	line-height: var(--shs-lh-relaxed);
}

/* Krok, ktorý vychádza z obrazovky, sa stráca pod závojom. */
.shs-steps__fade {
	--shs-blurfade-color: var(--shs-cream);

	inset-block: 0;
	right: 0;
	width: 14%;
}

.shs-steps__nav {
	display: flex;
	align-items: center;
	gap: var(--shs-space-19);
	margin-top: var(--shs-space-48);
	padding-inline-start: var(--shs-steps-inset);
}

@media (max-width: 900px) {
	/* Na úzkom okne sú tri položky nečitateľné — ostane jedna a pol. */
	.shs-steps__item {
		width: 82vw;
	}

	.shs-steps {
		--shs-steps-inset: var(--shs-gutter);

		padding-block: var(--shs-space-64);
	}

	.shs-steps__head {
		text-align: left;
	}

	.shs-steps__viewport {
		margin-top: var(--shs-space-48);
	}

	.shs-steps__list {
		gap: var(--shs-space-32);
	}
}