/* ==========================================================================
   PREDAJ NÁSTROJOV

   Nadpis a text vedľa seba, pod nimi dve fotky na celú šírku obsahu.
   Dizajn je kreslený na 1728 × 1007 px; obsah stojí medzi 150 a 1578 px,
   teda kontajner plus vnútorné odsadenie z oboch strán.
   ========================================================================== */

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

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

/* ---- Nadpis a text ------------------------------------------------------ */

.shs-instruments__head {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: var(--shs-space-11);
	align-items: start;
}

.shs-instruments__text {
	display: flex;
	flex-direction: column;
	gap: var(--shs-space-24);

	/* Text v dizajne nezačína v jednej línii s nadpisom, ale o kúsok nižšie. */
	padding-top: var(--shs-space-32);
	font-size: var(--shs-fs-lead);
	font-weight: var(--shs-weight-light);
	line-height: var(--shs-lh-relaxed);
}

/* ---- Fotky -------------------------------------------------------------- */

.shs-instruments__gallery {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--shs-space-11);
	margin-top: var(--shs-space-80);
}

.shs-instruments__figure {
	position: relative;
	margin: 0;
	aspect-ratio: 714 / 416;
	overflow: hidden;
}

/*
 * `:not()` je tu zámerne: logo partnera je tiež `img` vo `figure`, ale
 * nesmie vyplniť celú plochu ani sa orezať.
 */
.shs-instruments__figure img:not(.shs-instruments__logo) {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.shs-instruments__caption {
	position: absolute;
	bottom: var(--shs-space-48);
	left: var(--shs-space-48);
	max-width: 60%;
	color: var(--shs-white);
	font-size: var(--shs-fs-script);
	font-weight: var(--shs-weight-light);
	line-height: var(--shs-lh-relaxed);
}

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

/* Logo partnera je vložený obrázok, preto sa naň `object-fit` nevzťahuje. */
/*
 * Logo partnera sedí v spodnej časti fotky na progresívnom závoji —
 * päť vrstiev `.shs-blurfade` otočených nadol, rovnaký komponent ako
 * v kolotočoch. Bez závoja by sa logo strácalo v pestrom zábere.
 */
.shs-instruments__fade {
	top: auto;
	bottom: 0;
	width: 100%;
	height: 42%;
	transform: rotate(180deg);
}

.shs-instruments__logo {
	position: absolute;
	bottom: var(--shs-space-42);
	left: 50%;
	z-index: 1;
	max-width: 46%;
	height: auto;
	translate: -50% 0;
}

/* ---- Tlačidlá ----------------------------------------------------------- */

.shs-instruments__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--shs-space-11);
	margin-top: var(--shs-space-42);
}

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

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

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

	.shs-instruments__head,
	.shs-instruments__gallery {
		grid-template-columns: minmax(0, 1fr);
		row-gap: var(--shs-space-32);
	}

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

	.shs-instruments__gallery {
		margin-top: var(--shs-space-48);
	}

	.shs-instruments__caption {
		bottom: var(--shs-space-24);
		left: var(--shs-space-24);
		max-width: 80%;
	}
}