/* ==========================================================================
   PREČO — nadpis, perex a kolotoč kariet

   Dizajn je kreslený na 1728 px. Odsadenia nižšie sú z neho prepočítané:
   nadpis začína na 386 px (22.34 %), karty na 610 px (35.30 %). Sú to
   preto lokálne premenné sekcie, nie globálne tokeny — inde sa
   nepoužívajú.
   ========================================================================== */

.shs-why {
	--shs-why-intro-inset: max(clamp(var(--shs-gutter), 22.34vw, 386px), calc((100% - var(--shs-container)) / 2 + 326px));
	/*
	 * Karty stoja v línii s perexom. V návrhu začínali ešte o 220 px
	 * hlbšie, lenže tam boli v páse vidieť dve — pri troch by na
	 * kartu ostalo 266 px a text by sa v nej lámal po slove.
	 */
	--shs-why-cards-inset: max(clamp(var(--shs-gutter), 22.34vw, 386px), calc((100% - var(--shs-container)) / 2 + 326px));

	position: relative;
	padding-block: var(--shs-space-96) var(--shs-space-80);
	color: var(--shs-brand);
	background: var(--shs-cream);
}

/* ---- Nadpis a perex ----------------------------------------------------- */

.shs-why__intro {
	padding-inline: var(--shs-why-intro-inset) var(--shs-gutter);
}

.shs-why__lead {
	max-width: 524px;
	margin-top: var(--shs-space-32);
	font-size: var(--shs-fs-lead);
	font-weight: var(--shs-weight-light);
	line-height: var(--shs-lh-lead);
}

/* ---- Kolotoč ------------------------------------------------------------ */

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

.shs-why__list {
	display: flex;
	align-items: flex-start;
	gap: var(--shs-space-80);
	margin: 0;
	padding: 0 var(--shs-edge-inset) 0 var(--shs-why-cards-inset);
	list-style: none;
	overflow-x: auto;

	/*
	 * Zvislé rolovanie zamknuté zámerne: pri `overflow-x: auto` si ho
	 * prehliadač dopočíta sám a prvok posunutý animáciou by v páse
	 * vyrobil zvislý posuvník.
	 */
	overflow-y: hidden;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}

.shs-why__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-why__card {
	flex: 0 0 auto;
	width: calc(
		(100% - (var(--shs-carousel-count) - 1) * var(--shs-space-80))
		/ var(--shs-carousel-count)
	);
}

/*
 * Ikona je v dizajne posunutá tak, že jej stred sedí na ľavej hrane
 * textu. Preto ju posúva `translate`, nie odsadenie textu — text tak
 * ostane zarovnaný bez ohľadu na to, akú ikonu klient nahrá.
 */
.shs-why__icon {
	display: block;
	width: max-content;
	translate: -50% 0;
}

.shs-why__icon svg,
.shs-why__icon img {
	display: block;
	width: auto;
	height: 110px;
}

.shs-why__card-title {
	margin-top: var(--shs-space-48);
	font-size: var(--shs-fs-card);
	font-weight: var(--shs-weight-regular);
	line-height: var(--shs-lh-tight);
	text-transform: none;
}

.shs-why__card-text {
	margin-top: var(--shs-space-24);
	font-size: var(--shs-fs-lead);
	font-weight: var(--shs-weight-light);
	line-height: var(--shs-lh-relaxed);
}

/* ---- Závoj pri pravom okraji -------------------------------------------- */

/*
 * Prekrýva kartu, ktorá vychádza z obrazovky — bez neho by sa lámala
 * na ostrej hrane. Samotné vrstvenie rieši `.shs-blurfade`.
 */
.shs-why__fade {
	--shs-blurfade-color: var(--shs-cream);

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

/* ---- Šípky -------------------------------------------------------------- */

/* Šípky samotné sú zdieľaný komponent (.shs-arrow) — tu je len ich miesto. */
.shs-why__nav {
	display: flex;
	align-items: center;
	gap: var(--shs-space-19);
	margin-top: calc(var(--shs-space-80) * 2);
	padding-inline: var(--shs-why-intro-inset) var(--shs-gutter);
}

/* ---- Mobil -------------------------------------------------------------- */

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

	.shs-why {
		--shs-why-intro-inset: var(--shs-gutter);
		--shs-why-cards-inset: var(--shs-gutter);
	}

	.shs-why__list {
		padding-inline: var(--shs-gutter);
	}

	.shs-why__viewport,
	.shs-why__nav {
		margin-top: var(--shs-space-48);
	}

	/*
	 * Ikona sa už neposúva mimo karty — pri odsadení na šírku gutteru
	 * by polovica z nej vyšla mimo obrazovku.
	 */
	.shs-why__icon {
		translate: none;
	}

	/* Na užšej karte by ikona v pôvodnej veľkosti pôsobila predimenzovane. */
	.shs-why__icon svg,
	.shs-why__icon img {
		height: 80px;
	}

	.shs-why__fade {
		width: var(--shs-space-48);
	}
}