/* ==========================================================
   mod_deer_stats v2.1.1
   Pouze strukturalni / mechanicka pravidla.
   Barvy, typografie a fonty resi globalni utility (typography.css)
   pres class pole v administraci.
   ========================================================== */

.deer-stats{
	--stat-accent: var(--c-grain-400);
	--stat-gap-x: clamp(24px, 4vw, 64px);
	--stat-gap-y: clamp(24px, 3vw, 40px);
	--stat-pad-x: 0px;
	position: relative;
	isolation: isolate;
	padding-inline: var(--stat-pad-x);
	border-radius: 0;
}

/* ----------------------------------------------------------
   Pozadi pres celou sirku okna.
   Sirku meni pouze podkladovy pseudo-element; obsah modulu
   zustava zarovnany na mrizku nadrazeneho .container.
   ---------------------------------------------------------- */
.deer-stats::before{
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 100vw;
	transform: translateX(-50%);
	background-color: inherit;
	z-index: -1;
	pointer-events: none;
}

/* Vertikalni rytmus (horizontalni odsazeni resi .container) */
.deer-stats--pad-none{ padding-block: 0; }
.deer-stats--pad-sm{ padding-block: clamp(16px, 2vw, 24px); }
.deer-stats--pad-md{ padding-block: clamp(32px, 4vw, 56px); }
.deer-stats--pad-lg{ padding-block: clamp(48px, 6vw, 88px); }

/* ----------------------------------------------------------
   VYCHOZI rozlozeni = roztazene k okrajum.
   Sirku polozek urcuje obsah, ne mrizka, takze prvni polozka lici
   s levou hranou containeru a posledni s pravou.
   Je zamerne na zakladni tride (ne na modifikatoru), aby vzhled
   nezavisel na verzi sablony.
   ---------------------------------------------------------- */
.deer-stats__inner{
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--stat-gap-y) var(--stat-gap-x);
	align-items: flex-start;
}

.deer-stats__inner > .deer-stats__item{
	flex: 0 1 auto;
}

/* Explicitni modifikatory ze sablony */
.deer-stats__inner--between{ justify-content: space-between; }
.deer-stats__inner--center{ justify-content: center; }

/* Stejne siroke sloupce – navrat k mrizce */
.deer-stats__inner--equal,
.deer-stats__inner--fixed{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	align-items: start;
}

.deer-stats__inner--fixed{
	grid-template-columns: repeat(var(--stat-cols, 4), minmax(0, 1fr));
}

@media (max-width: 991.98px){
	.deer-stats__inner--fixed{
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Na uzkych displejich vzdy 2 sloupce – space-between by trhalo mezery */
@media (max-width: 575.98px){
	.deer-stats__inner,
	.deer-stats__inner--between,
	.deer-stats__inner--center,
	.deer-stats__inner--equal,
	.deer-stats__inner--fixed{
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: start;
	}
}

.deer-stats__item{
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}

.deer-stats--center .deer-stats__item{
	align-items: center;
	text-align: center;
}

/* Cislo – barvu urcuje --stat-accent (umoznuje akcent per polozka) */
.deer-stats__value{
	color: var(--stat-accent) !important;
	margin: 0;
	font-feature-settings: "lnum" 1, "tnum" 0;
}

/* Popisek – barvu i font urcuje class pole v administraci */
.deer-stats__label{
	margin: 0;
	text-transform: uppercase;
	letter-spacing: .12em;
	max-width: 22ch;
	text-wrap: balance;
}