/* ==========================================================================
   ČÍSLA

   Olivová plocha s vrstvami dekoru a zoznamom údajov. Dizajn je kreslený
   na 1728 × 1117 px — percentá v dekore sú z týchto hodnôt prepočítané.
   ========================================================================== */

.shs-stats {
	position: relative;
	overflow: hidden;
	padding-block: var(--shs-space-96) var(--shs-space-80);
	color: var(--shs-cream);
	background: var(--shs-brand);
}

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

.shs-stats__decor {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}

.shs-stats__glow {
	position: absolute;
	top: -123.3%;
	left: -127.3%;
	width: 262%;
	max-width: none;
	transform: rotate(-27.04deg);
}

/*
 * Uzol je v dizajne nakreslený až nad textom. Tu leží pod ním — pri
 * `multiply` to vyzerá rovnako, ale čísla ostanú úplne čisté.
 */
.shs-stats__watermark {
	position: absolute;
	top: -2.5%;
	left: 44.1%;
	display: block;
	width: 51.7%;
	color: var(--shs-cream);
	mix-blend-mode: multiply;
}

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

/* Zrno cez celú plochu — bez neho pôsobí olivová plocha ploche. */
.shs-stats__noise {
	position: absolute;
	inset: 0;
	opacity: 0.39;
	mix-blend-mode: color-burn;
	background-image: url("../../images/noise.jpg");

	/*
	 * V dizajne je dlaždica 1024 px zväčšená na 1382.56 px. Náš zdroj je
	 * polovičný (kvôli veľkosti súboru), preto je aj rozmer polovičný —
	 * zrno tak vyjde rovnako veľké ako v návrhu.
	 */
	background-size: 691.28px;
}

/* ---- Obsah -------------------------------------------------------------- */

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

/* Nadpis číselnej sekcie je v dizajne o niečo vzdušnejší než ostatné. */
.shs-stats__title {
	padding-inline-start: var(--shs-inset);
	line-height: var(--shs-lh-snug);
}

.shs-stats__list {
	margin: 0;
}

.shs-stats__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--shs-space-32);
	padding-block: var(--shs-space-31);
	padding-inline: var(--shs-inset);
	border-bottom: var(--shs-hairline) solid color-mix(in srgb, var(--shs-cream) 50%, transparent);
}

.shs-stats__label {
	font-family: var(--shs-font-display);
	font-size: var(--shs-fs-lead);
	font-weight: var(--shs-weight-extralight);
	line-height: var(--shs-lh-snug);
	text-transform: uppercase;
}

.shs-stats__value {
	margin: 0;
	font-family: var(--shs-font-display);
	font-size: var(--shs-fs-stat);
	font-weight: var(--shs-weight-thin);
	line-height: var(--shs-lh-snug);
	text-align: right;
	white-space: nowrap;

	/* Rovnako široké číslice — inak by číslo počas dopočítavania „tancovalo". */
	font-variant-numeric: tabular-nums;
}

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

@media (max-width: 900px) {
	.shs-stats__title,
	.shs-stats__row {
		padding-inline: 0;
	}

	/*
	 * Na úzkom okne sa popis a číslo na jeden riadok nezmestia. Číslo
	 * ide navrch, popis pod neho — poradie v kóde ostáva sémantické.
	 */
	.shs-stats__row {
		flex-direction: column-reverse;
		align-items: flex-start;
		gap: var(--shs-space-8);
	}

	.shs-stats__value {
		margin-bottom: var(--shs-space-8);
		text-align: left;
	}
}