/* ==========================================================================
   VÝZVA

   Fotka od hrany po hranu na jednej strane, nadpis a tlačidlá na druhej.
   Podklad je pieskový so značkovým vodoznakom — rovnaká plocha ako
   v sekcii dopytu. Dizajn: fotka 898 × 860 px.
   ========================================================================== */

.shs-cta {
	position: relative;
	display: grid;
	grid-template-columns: 52% 48%;
	align-items: center;
	min-height: min(49.8vw, 860px);
	overflow: hidden;
	color: var(--shs-brand);
	background: linear-gradient(
		215deg,
		color-mix(in srgb, var(--shs-sand) 12%, var(--shs-white)) 0%,
		color-mix(in srgb, var(--shs-sand) 42%, var(--shs-cream)) 45%,
		color-mix(in srgb, var(--shs-sand) 88%, var(--shs-cream)) 100%
	);
}

.shs-cta--right {
	grid-template-columns: 48% 52%;
}

.shs-cta--right .shs-cta__media {
	order: 2;
}

.shs-cta__watermark {
	position: absolute;
	top: -20%;
	right: -8%;
	display: block;
	width: 52%;
	color: color-mix(in srgb, var(--shs-sand) 30%, var(--shs-white));
	mix-blend-mode: multiply;
	pointer-events: none;
}

.shs-cta__watermark :is(svg, img) {
	display: block;
	width: 100%;
	height: auto;
}

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

.shs-cta__media {
	position: relative;
	align-self: stretch;
	overflow: hidden;
}

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

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

/* Nadpis, text aj tlačidlá sadia doľava — tak je to v návrhu kurzu. */
.shs-cta__body {
	position: relative;
	z-index: 1;
	padding: var(--shs-space-64) var(--shs-gutter);
	text-align: start;
}

/*
 * Bez fotky sa výzva zmršťuje na pás s textom na osi — polovica
 * mriežky by inak ostala prázdna.
 */
.shs-cta--bare {
	grid-template-columns: minmax(0, 1fr);
	min-height: 0;
	padding-block: calc(var(--shs-space-96) + var(--shs-space-24));
}

.shs-cta--bare .shs-cta__body {
	padding-inline: var(--shs-edge-inset);
}

.shs-cta--bare /*
 * Silnejší rez začína vlastný riadok — „Poďte sa učiť / s nami".
 * V jednom riadku sa nadpis na užšom stĺpci zalomil kdekoľvek.
 */
.shs-cta__title .shs-section-title__strong {
	display: block;
}

.shs-cta__text {
	max-width: 640px;
}

.shs-cta__text {
	max-width: 433px;
	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-cta__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: var(--shs-space-11);
	margin-top: var(--shs-space-42);
}

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

@media (max-width: 900px) {
	.shs-cta,
	.shs-cta--right {
		grid-template-columns: minmax(0, 1fr);
		min-height: 0;
	}

	.shs-cta__media,
	.shs-cta--right .shs-cta__media {
		order: -1;
		aspect-ratio: 4 / 3;
	}

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