/* ==========================================================================
   VYHLÁSENIE

   Pieskový pás s dvojriadkovým nadpisom, ktorého druhý riadok je odsadený
   doprava. Dizajn je kreslený na 1728 × 527 px.
   ========================================================================== */

.shs-statement {
	position: relative;
	overflow: hidden;
	padding-block: calc(var(--shs-space-96) + var(--shs-space-24)) var(--shs-space-80);
	color: var(--shs-brand);
	background: var(--shs-sand);
}

/* Obrí uzol za textom — o niečo tmavší reliéf, rovnako ako v pätičke. */
.shs-statement__mark {
	position: absolute;
	top: -24%;
	left: 47%;
	display: block;
	width: 52%;
	color: var(--shs-cream);
	mix-blend-mode: multiply;
	opacity: 0.3;
	pointer-events: none;
}

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

.shs-statement__inner {
	position: relative;
	z-index: 1;
}

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

/*
 * Varianta s fotkou: fotka ide od hrany po hranu na CELÚ výšku sekcie
 * a výšku neurčuje (pravidlo 12 — vlastná vrstva), text stojí na
 * strede zvyšnej plochy.
 */
.shs-statement--media {
	display: grid;
	grid-template-columns: 43% minmax(0, 1fr);
	align-items: center;
}

.shs-statement--media-right {
	grid-template-columns: minmax(0, 1fr) 43%;
}

.shs-statement__media {
	position: relative;
	grid-row: 1;
	grid-column: 1;
	align-self: stretch;
	min-height: 420px;
}

.shs-statement--media-right .shs-statement__media {
	grid-column: 2;
}

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

.shs-statement--media .shs-statement__inner {
	grid-row: 1;
	grid-column: 2;
}

.shs-statement--media-right .shs-statement__inner {
	grid-column: 1;
}

/* Farebné varianty — na tmavších plochách sa prevracia aj farba písma. */
.shs-statement--sage {
	color: var(--shs-cream);
	background: var(--shs-sage);
}

.shs-statement--cream {
	background: var(--shs-cream);
}

/*
 * Zarovnanie na stred: schody v nadpise strácajú zmysel, text stojí
 * v užšom stĺpci na osi stránky.
 */
.shs-statement--center .shs-statement__title,
.shs-statement--center .shs-statement__title .shs-section-title__strong,
.shs-statement--center .shs-statement__text {
	padding-inline-start: 0;
}

.shs-statement--center .shs-statement__inner {
	text-align: center;
}

.shs-statement--center .shs-statement__text {
	max-width: 880px;
	margin-inline: auto;
}

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

.shs-statement__title {
	padding-inline-start: 18.9%;
}

/* Druhý riadok nabieha ďalej doprava — schod je súčasťou sadzby nadpisu. */
.shs-statement__title .shs-section-title__strong {
	padding-inline-start: 17.2%;
}

.shs-statement__text {
	display: flex;
	flex-direction: column;
	gap: var(--shs-space-24);
	max-width: 951px;
	margin-top: var(--shs-space-80);
	padding-inline-start: 7.9%;
	font-size: var(--shs-fs-lead);
	font-weight: var(--shs-weight-light);
	line-height: var(--shs-lh-loose);
}

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

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

	.shs-statement__media,
	.shs-statement--media-right .shs-statement__media {
		grid-row: 1;
		grid-column: 1;
		min-height: 0;
		aspect-ratio: 4 / 3;
	}

	.shs-statement--media .shs-statement__inner,
	.shs-statement--media-right .shs-statement__inner {
		grid-row: 2;
		grid-column: 1;
	}

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

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

	/* Schody v nadpise sú kreslené na širokú plochu — na mobile miznú. */
	.shs-statement__title,
	.shs-statement__title .shs-section-title__strong,
	.shs-statement__text {
		padding-inline-start: 0;
	}
}