/* ==========================================================================
   TEXT A FOTKA NA CELÚ VÝŠKU

   Sekcia je rozdelená na dve polovice: text a fotka idúca od hrany po
   hranu. Dizajn je kreslený na 1728 × 763 px, text začína na 200 px.
   ========================================================================== */

.shs-split {
	/*
	 * 100vw a nie %: odsadenie sa používa vnútri stĺpca mriežky a
	 * percento by sa počítalo z jeho šírky — text by ostal pri kraji.
	 */
	--shs-split-inset: max(clamp(var(--shs-gutter), 11.57vw, 200px), calc((100vw - var(--shs-container)) / 2 + 140px));

	display: grid;
	grid-template-columns: 52.6% 47.4%;
	align-items: center;
	color: var(--shs-brand);
	background: var(--shs-mist);
}

.shs-split--left {
	grid-template-columns: 47.4% 52.6%;
}

.shs-split--left .shs-split__media {
	order: -1;
}

/* ---- Text --------------------------------------------------------------- */

.shs-split__body {
	padding: calc(var(--shs-space-96) * 2) var(--shs-space-48) calc(var(--shs-space-96) * 2) var(--shs-split-inset);
}

.shs-split--left .shs-split__body {
	padding-inline: var(--shs-space-48) var(--shs-split-inset);
}

/* Vyrovnanie ľavého postranku písma Ysabeau — nadpis sa opticky zarovná. */
.shs-split__title {
	margin-left: -0.125em;
}

.shs-split__text {
	display: flex;
	flex-direction: column;
	gap: var(--shs-space-24);
	margin-top: var(--shs-space-48);
	font-size: var(--shs-fs-lead);
	font-weight: var(--shs-weight-light);
	line-height: var(--shs-lh-loose);
}

.shs-split__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--shs-space-11);
	margin-top: var(--shs-space-42);
}

/* ---- Fotka -------------------------------------------------------------- */

/*
 * Fotka nesmie určovať výšku sekcie — tú drží text. Preto je vo vlastnej
 * vrstve a z toku vypadáva; inak by ju roztiahla na svoj vlastný pomer.
 */
.shs-split__media {
	position: relative;
	align-self: stretch;
	overflow: hidden;
}

.shs-split__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

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

@media (max-width: 900px) {
	.shs-split,
	.shs-split--left {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Fotka ide vždy nad text, nech je na desktope na ktorejkoľvek strane. */
	.shs-split__media,
	.shs-split--left .shs-split__media {
		order: -1;
		position: relative;
		aspect-ratio: 4 / 3;
	}

	.shs-split__body,
	.shs-split--left .shs-split__body {
		padding: var(--shs-space-64) var(--shs-gutter);
	}
}