/* ==========================================================================
   ZAKLADATELIA

   Šalviová plocha s citátom a portrétom idúcim od hrany po hranu.
   Dizajn je kreslený na 1728 × 777 px.
   ========================================================================== */

.shs-founders {
	position: relative;
	display: grid;
	grid-template-columns: 52.3% 47.7%;
	align-items: center;
	overflow: hidden;
	color: var(--shs-cream);
	background: var(--shs-sage);
}

/* ---- Citát -------------------------------------------------------------- */

/*
 * Ľavý odstup je percento zo stĺpca, nie zo sekcie: v dizajne citát
 * začína na 169 px, čo je 18.7 % šírky ľavej polovice.
 */
.shs-founders__body {
	position: relative;
	z-index: 1;
	padding: calc(var(--shs-space-96) + var(--shs-space-48)) var(--shs-space-48)
		var(--shs-space-80) 18.7%;
}

.shs-founders__quote {
	max-width: 667px;
	margin: 0;
	font-size: var(--shs-fs-card);
	font-weight: var(--shs-weight-light);
	line-height: var(--shs-lh-loose);
}

.shs-founders__quote strong {
	font-weight: var(--shs-weight-medium);
}

/* Podpis je v dizajne odsadený hlbšie než samotný citát. */
.shs-founders__meta {
	margin-top: var(--shs-space-64);
	padding-inline-start: calc(var(--shs-space-96) * 2 + var(--shs-space-48));
}

.shs-founders__name {
	font-family: var(--shs-font-display);
	font-size: var(--shs-fs-heading);
	font-weight: var(--shs-weight-regular);
	line-height: var(--shs-lh-tight);
	text-transform: uppercase;
}

.shs-founders__role {
	margin-top: var(--shs-space-12);
	font-size: var(--shs-fs-small);
	font-weight: var(--shs-weight-light);
	line-height: var(--shs-lh-tight);
}

.shs-founders__cta {
	margin-top: var(--shs-space-32);
	margin-inline-start: calc(var(--shs-space-96) + var(--shs-space-48));
}

/* ---- Portrét ------------------------------------------------------------ */

/*
 * 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-founders__media {
	position: relative;
	align-self: stretch;
	overflow: hidden;
}

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

/* Celá fotka bez orezu — voľba redaktora, keď záber nesmie prísť o kraje. */
.shs-founders--fit-contain .shs-founders__media img {
	object-fit: contain;
	object-position: bottom center;
}

/* ---- Dekor -------------------------------------------------------------- */

.shs-founders__quotemark {
	position: absolute;
	top: 8.5%;
	left: -1.45%;
	width: 7.46%;
	color: var(--shs-cream);
	pointer-events: none;
}

.shs-founders__sign {
	position: absolute;
	top: 6.6%;
	right: 3.5%;
	z-index: 1;
	width: 4.57%;
	color: var(--shs-cream);
	mix-blend-mode: screen;
	pointer-events: none;
}

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

/*
 * Znak a známka stoja vedľa seba v jednom riadku, nie známka odsadená
 * mimo znaku: pri odsadení by pri pravom okraji fotky vyšla von zo
 * záberu. Skupina sa tak zmestí vždy.
 */
.shs-founders__sign {
	display: flex;
	align-items: flex-end;
	gap: 0.4em;
	width: 6.6%;
}

.shs-founders__mark {
	display: block;
	flex: 0 0 68%;
}

.shs-founders__reg {
	display: block;
	flex: 0 0 22%;
	margin-bottom: 4%;
}

.shs-founders__reg svg {
	display: block;
	width: 100%;
	height: auto;
}

/*
 * Slovné logo je na šírku — samotný uzol by v tej šírke bol drobný.
 * Šírka je pevná (nie percento zo sekcie): logo má vlastnú čitateľnú
 * veľkosť a na širokej obrazovke by z percenta narástlo do plagátu.
 */
.shs-founders__sign--logo {
	width: 100px;
	mix-blend-mode: normal;
}

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

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

	.shs-founders__media {
		order: -1;
		position: relative;
		aspect-ratio: 4 / 3;
	}

	.shs-founders__body {
		padding: var(--shs-space-64) var(--shs-gutter);
	}

	.shs-founders__meta {
		padding-inline-start: 0;
	}

	.shs-founders__cta {
		margin-inline-start: 0;
	}

	.shs-founders__quotemark {
		display: none;
	}
}