/* ==========================================================================
   ĽUDIA

   Meno nad fotkou, fotka bez pozadia, pod ňou postavenie a text.
   Dizajn je kreslený na 1728 px — stĺpce začínajú na 150 a 904 px.
   ========================================================================== */

.shs-people {
	padding-block: var(--shs-section-py);
	color: var(--shs-brand);
	background: var(--shs-cream);
}

.shs-people__inner {
	padding-inline: calc(var(--shs-gutter) + var(--shs-inset));
}

.shs-people__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--shs-space-96) var(--shs-space-64);
	margin: var(--shs-space-64) 0 0;
	padding: 0;
	list-style: none;
}

.shs-people__name {
	font-size: var(--shs-fs-small);
	font-weight: var(--shs-weight-light);
	line-height: var(--shs-lh-tight);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.shs-people__figure {
	position: relative;
	margin-top: var(--shs-space-24);
}

/*
 * Fotka je vystrihnutá postava bez pozadia — preto `contain` a nie
 * `cover`: orezanie by jej odrezalo ruky alebo hlavu.
 */
.shs-people__photo {
	aspect-ratio: 546 / 424;
}

.shs-people__photo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: bottom center;
	transition:
		filter var(--shs-duration) var(--shs-ease),
		opacity var(--shs-duration) var(--shs-ease);
}

/*
 * Text sa objaví až na dotyk myšou (alebo klávesnicou): fotka sa
 * rozostrí a nad ňou vypláva karta s popisom — tak je to nakreslené.
 * `focus-within` drží efekt prístupný aj bez myši.
 */
.shs-people__item:hover .shs-people__photo img,
.shs-people__item:focus-within .shs-people__photo img {
	filter: blur(14px);
	opacity: 0.9;
}

/*
 * Karta je len vrstva cez fotku, ktorá rámček centruje — rámček samotný
 * je `__panel`. Farbu ani rám preto nesmie mať karta: prekryla by celú
 * fotku namiesto stredu.
 */
.shs-people__card {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--shs-space-24);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--shs-duration) var(--shs-ease);
}

/*
 * Rámček s textom: svetlá presvitajúca doska s vlasovým rámom. Vlastné
 * rozostrenie podkladu ju odlepí od fotky aj tam, kde je fotka svetlá.
 */
.shs-people__panel {
	display: flex;
	flex-direction: column;
	gap: var(--shs-space-12);
	width: min(100%, 420px);
	padding: var(--shs-space-31) var(--shs-space-24);
	text-align: center;
	background: color-mix(in srgb, var(--shs-cream) 72%, transparent);
	border: var(--shs-hairline) solid color-mix(in srgb, var(--shs-brand) 25%, transparent);
	backdrop-filter: blur(6px);
}

.shs-people__item:hover .shs-people__card,
.shs-people__item:focus-within .shs-people__card {
	opacity: 1;
}

/*
 * Postavenie je v doske popiskom nad textom, nie nadpisom — v návrhu
 * je v rámčeku samotný text a veľký displejový rez by ho pretlačil.
 */
.shs-people__role {
	font-size: var(--shs-fs-small);
	font-weight: var(--shs-weight-regular);
	line-height: var(--shs-lh-tight);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.shs-people__text {
	font-size: var(--shs-fs-base);
	font-weight: var(--shs-weight-light);
	line-height: var(--shs-lh-loose);
}

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

@media (max-width: 900px) {
	.shs-people {
		padding-block: var(--shs-section-py-sm);
	}

	.shs-people__inner {
		padding-inline: var(--shs-gutter);
	}

	.shs-people__list {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--shs-space-64);
		margin-top: var(--shs-space-48);
	}

	/*
	 * Dotykové zariadenie nemá hover. Rámček preto stojí staticky NAD
	 * fotkou — tak je nakreslená mobilná verzia — a fotka sa
	 * nerozostruje.
	 */
	.shs-people__figure {
		display: flex;
		flex-direction: column;
	}

	.shs-people__card {
		position: static;
		order: -1;
		padding: 0;
		margin-bottom: var(--shs-space-19);
		opacity: 1;
		pointer-events: auto;
	}

	.shs-people__panel {
		width: 100%;
		padding: var(--shs-space-24) var(--shs-space-19);
	}

	/* Vystrihnutá postava má nad hlavou prázdno — na mobile sa priťahuje. */
	.shs-people__photo img {
		margin-top: -40px;
	}

	.shs-people__item:hover .shs-people__photo img,
	.shs-people__item:focus-within .shs-people__photo img {
		filter: none;
		opacity: 1;
	}
}