/* ==========================================================================
   PÔSOBENIE

   Nadpis a text v dvoch stĺpcoch, pod nimi tri karty a kolotoč fotiek.
   Dizajn je kreslený na 1728 × 1378 px.
   ========================================================================== */

.shs-world {
	--shs-world-photos-inset: max(clamp(var(--shs-gutter), 22.45vw, 388px), calc((100% - var(--shs-container)) / 2 + 328px));

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

.shs-world__inner {
	padding-inline: var(--shs-edge-inset);
}

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

.shs-world__head {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: var(--shs-space-42);
	align-items: start;
}

.shs-world__text {
	display: flex;
	flex-direction: column;
	gap: var(--shs-space-24);
	max-width: 673px;
	padding-top: var(--shs-space-42);
	font-size: var(--shs-fs-lead);
	font-weight: var(--shs-weight-light);
	line-height: var(--shs-lh-relaxed);
}

/* ---- Karty -------------------------------------------------------------- */

.shs-world__cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--shs-space-12);
	margin: var(--shs-space-96) 0 0;
	padding: 0;
	list-style: none;
}

/*
 * Nadpis sedí v dolnej tretine karty — preto sa obsah tlačí nadol, nie
 * rozťahuje. Výška vychádza z pomeru v dizajne (468 × 329).
 */
/* Karta je tlačidlo (tab) — dedí typografiu, ruší vzhľad buttonu. */
.shs-world__cards {
	padding: 0;
}

.shs-world__card {
	font: inherit;
	text-align: inherit;
	color: inherit;
	background: none;
	cursor: pointer;
}

/* Nadpis a text karty boli blokové značky — spany v tlačidle tiež. */
.shs-world__card-title,
.shs-world__card-text {
	display: block;
}

.shs-world__card {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	aspect-ratio: 468 / 329;
	padding: var(--shs-space-42);
	border: var(--shs-hairline) solid color-mix(in srgb, var(--shs-brand) 55%, transparent);
	transition:
		color var(--shs-duration) var(--shs-ease),
		background-color var(--shs-duration) var(--shs-ease),
		border-color var(--shs-duration) var(--shs-ease);
}

@media (prefers-reduced-motion: reduce) {
	.shs-world__card {
		transition: none;
	}
}

/*
 * Karta je tab, preto musí byť vidieť, kam sa klikne a čo je zapnuté:
 * pod myšou sa rám pritmaví a plocha sa jemne podfarbí, aktívny tab je
 * plný — presne tá karta, ktorá je v návrhu vyfarbená.
 */
.shs-world__card:hover,
.shs-world__card:focus-visible {
	border-color: var(--shs-sage);
	background: color-mix(in srgb, var(--shs-sage) 12%, transparent);
}

.shs-world__card.is-active,
.shs-world__card.is-active:hover {
	color: var(--shs-cream);
	background: var(--shs-sage);
	border-color: var(--shs-sage);
}

.shs-world__card-title {
	font-size: var(--shs-fs-script);
	font-weight: var(--shs-weight-regular);
	line-height: var(--shs-lh-tight);
	text-transform: none;
}

.shs-world__card-text {
	max-width: 274px;
	margin-top: var(--shs-space-19);
	font-size: var(--shs-fs-small);
	font-weight: var(--shs-weight-light);
	line-height: var(--shs-lh-relaxed);
}

/* ---- Fotky -------------------------------------------------------------- */

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

.shs-world__gallery {
	display: flex;
	gap: var(--shs-space-11);
	margin: 0;
	/*
	 * Zľava hlboký odsek z návrhu, sprava hrana obsahového pásu:
	 * pri rovnakom hlbokom odseku z oboch strán by na trojicu fotiek
	 * ostala polovica šírky a fotky by boli nečitateľne malé.
	 */
	padding: 0 var(--shs-edge-inset) 0 var(--shs-world-photos-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-world__gallery::-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-world__photo {
	flex: 0 0 auto;
	width: calc(
		(100% - (var(--shs-carousel-count) - 1) * var(--shs-space-11))
		/ var(--shs-carousel-count)
	);
	aspect-ratio: 589 / 371;
}

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

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

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

.shs-world__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-world__photo {
		width: 82vw;
	}

	.shs-world {
		--shs-world-photos-inset: var(--shs-gutter);

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

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

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

	.shs-world__head,
	.shs-world__cards {
		grid-template-columns: minmax(0, 1fr);
		row-gap: var(--shs-space-32);
	}

	.shs-world__text {
		padding-top: 0;
	}

	.shs-world__cards,
	.shs-world__viewport {
		margin-top: var(--shs-space-48);
	}

	/* Na mobile karta nedrží pomer strán — inak by pri dlhšom texte pretiekla. */
	.shs-world__card {
		aspect-ratio: auto;
		padding: var(--shs-space-32);
	}

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