/* ==========================================================================
   MOBILNÁ APLIKÁCIA

   Nadpis vľavo, text a odkazy do obchodov vpravo, dva telefóny a ornament
   v ľavej polovici. Dizajn je kreslený na 1728 × 892 px — všetky polohy
   nižšie sú z neho prepočítané percentá, takže scéna drží pomer.
   ========================================================================== */

.shs-app {
	position: relative;

	/*
	 * Výšku sekcie určuje vizualizácia, nie text — a tá je mimo tok.
	 * Strop drží sekciu rozumnú na širokom monitore.
	 */
	min-height: min(51.6vw, 892px);
	overflow: hidden;
	padding-block: calc(var(--shs-space-96) + var(--shs-space-80)) var(--shs-space-96);
	color: var(--shs-brand);
	background: var(--shs-cream);
}

/* ---- Vizualizácia ------------------------------------------------------- */

/*
 * Telefóny aj ornament sú jeden obrázok — v návrhu sa prekrývajú, majú
 * vlastné tiene a mäkké prechody, ktoré sa z jednotlivých vrstiev poskladať
 * nedajú. Podklad obrázka je rovnaká krémová ako sekcia, takže hrana nie
 * je vidieť. Poloha aj šírka sú prepočty z návrhu (1728 × 892 px).
 */
.shs-app__stage {
	position: absolute;
	inset: 33.63% auto auto 0;

	/*
	 * 830 z 1728 px. Výrez končí presne pred textom sekcie (ten začína
	 * na 860 px) — inak by sa jeho ľavý okraj zapiekol do obrázka
	 * a pod skutočným textom by presvital jeho duch.
	 */
	width: 48.03%;
	pointer-events: none;
}

.shs-app__stage img {
	display: block;
	width: 100%;
	height: auto;
}

/* Telefóny sa pri spodnej hrane strácajú, nekončia ostrým rezom. */
.shs-app__veil {
	--shs-blurfade-color: var(--shs-cream);

	inset: auto 0 0;
	height: 34%;
}

/* ---- Obsah -------------------------------------------------------------- */

.shs-app__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: var(--shs-space-11);
	align-items: start;
	padding-inline: calc(var(--shs-gutter) + var(--shs-inset));
}

.shs-app__body {
	padding-top: calc(var(--shs-space-96) + var(--shs-space-48));
}

.shs-app__text {
	display: flex;
	flex-direction: column;
	gap: var(--shs-space-24);
	max-width: 670px;
	font-size: var(--shs-fs-lead);
	font-weight: var(--shs-weight-light);
	line-height: var(--shs-lh-loose);
}

/* ---- Obchody ------------------------------------------------------------ */

/*
 * Odznaky sú v dizajne zarovnané na pravý okraj textu, nie pod jeho
 * začiatok — preto `flex-end` a rovnaká šírka ako text.
 */
.shs-app__stores {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: var(--shs-space-11);
	max-width: 670px;
	margin-top: var(--shs-space-64);
}

.shs-app__store {
	display: block;
	width: 162.8px;
	max-width: 45%;
}

.shs-app__store:hover {
	text-decoration: none;
	opacity: 0.8;
}

.shs-app__store img {
	display: block;
	width: 100%;
	height: auto;
}

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

@media (max-width: 900px) {
	/*
	 * Zdola bez odsadenia — vizualizácia telefónov dosadá priamo na
	 * hranu sekcie, inak pod ňou ostane prázdny pruh podkladu.
	 */
	.shs-app {
		min-height: 0;
		padding-block: var(--shs-space-64) 0;
	}

	.shs-app__inner {
		grid-template-columns: minmax(0, 1fr);
		row-gap: var(--shs-space-32);
		padding-inline: var(--shs-gutter);
	}

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

	/*
	 * Scéna sa vracia do toku pod text — ako pozadie by prekryla odkazy
	 * do obchodov. Ornament vypadáva, na úzkom okne z neho nič nevidno.
	 */
	/*
	 * Vizualizácia sa vracia do toku pod text — ako pozadie by prekryla
	 * odkazy do obchodov.
	 */
	.shs-app__stage {
		position: static;
		display: block;
		width: 100%;
		margin-top: var(--shs-space-48);
	}

	.shs-app__stage img {
		display: block;
	}

	.shs-app__veil {
		display: none;
	}

	.shs-app__stores {
		justify-content: flex-start;
		margin-top: var(--shs-space-32);
	}
}