/* ==========================================================================
   PROGRAMY

   Nadpis a text na osi stránky, pod nimi kolotoč fotiek s popismi.
   Dizajn je kreslený na 1728 × 1279 px.
   ========================================================================== */

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

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

/* ---- Nadpis a text ------------------------------------------------------ */

.shs-programs__intro {
	text-align: center;
}

.shs-programs__text {
	display: flex;
	flex-direction: column;
	gap: var(--shs-space-24);
	max-width: 890px;
	margin-inline: auto;
	margin-top: var(--shs-space-96);
	font-size: var(--shs-fs-lead);
	font-weight: var(--shs-weight-light);
	line-height: var(--shs-lh-loose);
	text-align: left;
}

/*
 * Podnadpis stojí v jednej línii s fotkami kolotoča — nadpis a perex
 * nad ním sú na osi, on nie. Bez `text-align` by zdedil centrovanie
 * z obalu a odsadenie by len posunulo rám.
 */
.shs-programs__subtitle {
	margin-top: var(--shs-space-48);
	padding-inline-start: var(--shs-edge-inset);
	font-size: var(--shs-fs-script);
	text-align: left;
}

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

.shs-programs__viewport {
	position: relative;
	margin-top: var(--shs-space-48);
}

.shs-programs__list {
	display: flex;
	align-items: flex-start;
	gap: var(--shs-space-11);
	margin: 0;
	padding: 0 var(--shs-programs-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-programs__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-programs__card {
	flex: 0 0 auto;
	width: calc(
		(100% - (var(--shs-carousel-count) - 1) * var(--shs-space-11))
		/ var(--shs-carousel-count)
	);
}

.shs-programs__media {
	display: block;
	aspect-ratio: 483 / 354;
}

.shs-programs__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * Popis je v dizajne podčiarknutý presne na šírku textu — nie linkou cez
 * celú kartu. Preto podčiarknutie písma, nie orámovanie prvku.
 */
.shs-programs__label {
	display: inline-block;
	margin-top: var(--shs-space-23);
	font-size: var(--shs-fs-lead);
	font-weight: var(--shs-weight-medium);
	line-height: var(--shs-lh-tight);
	text-decoration-thickness: var(--shs-hairline);
}

/* ---- Tlačidlo a šípky --------------------------------------------------- */

.shs-programs__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--shs-space-48);
	margin-top: var(--shs-space-80);
	padding-inline-start: var(--shs-programs-inset);
}

.shs-programs__nav {
	display: flex;
	align-items: center;
	gap: var(--shs-space-19);
}

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

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

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

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

	/* Hlava sekcie je plnošírková — na mobile potrebuje vlastný okraj. */
	.shs-programs__intro {
		padding-inline: var(--shs-gutter);
		text-align: left;
	}

	.shs-programs__text {
		margin-top: var(--shs-space-32);
	}

	.shs-programs__subtitle {
		margin-top: var(--shs-space-48);
		padding-inline-start: 0;
	}

	.shs-programs__foot {
		gap: var(--shs-space-32);
		padding-inline-start: var(--shs-gutter);
	}
}