/* ==========================================================================
   FOTKA A TEXT

   Dve stĺpce: fotka a text vedľa seba. Text nezačína v jednej línii
   s fotkou — v dizajne visí nižšie, čím vzniká voľná plocha vpravo hore.
   Dizajn je kreslený na 1728 px.
   ========================================================================== */

.shs-promo {
	padding-block: calc(var(--shs-space-96) + var(--shs-space-32));
	color: var(--shs-brand);
	background: var(--shs-cream);
}

/*
 * Obal JE kontajner (centruje sa sám), preto hlboké odsadenie = gutter
 * + inset. Edge tokeny sem NEPATRIA: percento v nich sa počíta zo šírky
 * RODIČA, teda z celej sekcie, a odsadenie by sa zarátalo druhý raz —
 * obsah by sa pri širokej obrazovke ťahal doprava.
 */
.shs-promo__inner {
	display: grid;
	grid-template-columns: minmax(0, 591px) minmax(0, 1fr);
	column-gap: 119px;

	/*
	 * Text stojí v strede oproti fotke. V návrhu visel nižšie (pevný
	 * odstup zhora), lenže ten je kreslený na krátky text — pri dlhšom
	 * texte to vyzeralo ako nedopatrenie, nie ako zámer. Rozhodnutie
	 * klienta: obe polovice sa centrujú voči sebe.
	 */
	align-items: center;
	padding-inline: calc(var(--shs-gutter) + var(--shs-inset));
}

/* Fotku doprava presúva poradie v mriežke, nie iný markup. */
.shs-promo--right .shs-promo__inner {
	grid-template-columns: minmax(0, 1fr) minmax(0, 591px);
}

.shs-promo--right .shs-promo__media {
	order: 2;
}

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

.shs-promo__media {
	aspect-ratio: 591 / 510;
}

/* Video sedí v ráme rovnako ako fotka — je to tá istá plocha sekcie. */
.shs-promo__media :is(img, video) {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Bez fotky sa telo roztiahne — mriežka by inak nechala prázdny stĺpec. */
.shs-promo__inner:not(:has(.shs-promo__media)) {
	grid-template-columns: minmax(0, 1fr);
}

.shs-promo__inner:not(:has(.shs-promo__media)) .shs-promo__body {
	max-width: 880px;
}

/*
 * Oblúková fotka (detail kurzu) je vyššia než rovná — polkruh potrebuje
 * priestor. Pomer je z návrhu: viditeľný výrez 864 × 931 px.
 */
.shs-promo--frame-arch .shs-promo__media {
	aspect-ratio: 864 / 931;
}

/* ---- Nadpis nad obsahom ------------------------------------------------- */

.shs-promo__head {
	margin-bottom: var(--shs-space-64);
	text-align: center;
}

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

.shs-promo__body {
	max-width: 740px;
}

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

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

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

@media (max-width: 900px) {
	.shs-promo {
		padding-block: var(--shs-space-64);
	}

	/*
	 * Obe varianty naraz: pravidlo pre `--left` má vyššiu špecificitu,
	 * takže bez neho by sekcii na mobile ostalo veľké odsadenie zľava
	 * a žiadne sprava.
	 */
	.shs-promo__inner,
	.shs-promo--left .shs-promo__inner,
	.shs-promo--right .shs-promo__inner {
		grid-template-columns: minmax(0, 1fr);
		row-gap: var(--shs-space-32);
		padding-inline: var(--shs-gutter);
	}

	/* Fotka ide vždy nad text — nezávisle od strany na desktope. */
	.shs-promo--right .shs-promo__media {
		order: 0;
	}

}