/**
 * Nástěnka domovské stránky (třídy `sh-domov__*`).
 *
 * ⚠️ BARVY: soubor NEDEKLARUJE žádné vlastní proměnné ani hex — všechny
 * tokeny `--sh-*` (včetně obalu `.sh-domov`) deklaruje JEDEN blok na začátku
 * `mapa-hrist.css`. Kdyby tam `.sh-domov` chybělo, byly by panely průhledné
 * (past popsaná v CLAUDE.md, sekce „Formulář hlášení je jeden pro celý web“).
 *
 * ŘEČ TVARŮ je stejná jako na detailu hřiště: panel = plocha + 1 px linka +
 * rádius, bez stínu; pilulky a chipy 999 px. Nic se tu nevymýšlí znovu.
 */

.sh-domov {
	margin: clamp(1.5rem, 4vw, 2.5rem) auto;
	color: var(--sh-text);
	font-variant-numeric: tabular-nums;
}

.sh-domov *,
.sh-domov *::before,
.sh-domov *::after {
	box-sizing: border-box;
}

.sh-domov [hidden] {
	display: none;
}

/* Nadpis sekce nástěnky — stejná velikost jako `.sh-detail__nadpis`. */
.sh-domov__nadpis {
	font-family: var(--sh-nadpisy);
	font-weight: 800;
	font-size: clamp(1.35rem, 1.1rem + 1vw, 1.7rem);
	line-height: 1.2;
	margin: 0 0 .8rem;
}

/* ----------------------------------------------------------------------- *
 * SKRÝVÁNÍ PŘI VÝSLEDCÍCH HLEDÁNÍ
 *
 * Hledání je první a nejrychlejší věc na stránce (návrh § 2 bod 1): jakmile
 * se ukážou výsledky, nesmí pod tlačítkem „Načíst dalších 20“ zůstat kilometr
 * nesouvisejícího obsahu. `mapa-hrist.js` proto při vykreslení výsledků
 * nasadí na <html> třídu `sh-ma-vysledky` a při návratu na `/` ji sundá.
 *
 * Bloky, které se mají schovat, nesou `sh-domov--jen-uvod` (čísla, feed,
 * mise, města); žebřík „Jak pomoct“ a blok autorky pod výsledky ZŮSTÁVAJÍ —
 * ty se hodí i tomu, kdo právě něco našel.
 * ----------------------------------------------------------------------- */

.sh-ma-vysledky .sh-domov--jen-uvod {
	display: none;
}

/* ----------------------------------------------------------------------- *
 * ČÍSLA — „Kolik toho víme“ (návrh § 4.2, vzhled přepracován 2026-08-20)
 *
 * Čtyři samostatné karty (na mobilu 2 × 2) — dřívější slitý pruh s 1px
 * dělicími linkami působil jako tabulka. Každá karta má nahoře kulatý
 * barevný terčík s ikonou (týž rukopis jako dlaždice „Jak pomoct“ v šabloně
 * a piktogramy vybavení v hlášení: tah 2,2, zaoblené konce). Barvy terčíků
 * se střídají z palety a váží se na KLÍČ dlaždice (viz `sh_domov_ikona()`
 * v domov.php), ne na pořadí.
 * ----------------------------------------------------------------------- */

.sh-domov__cisla {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: .8rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sh-domov__cislo {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: .15rem;
	padding: 1.15rem .9rem 1.2rem;
	background: var(--sh-plocha);
	border: 1px solid var(--sh-linka);
	border-radius: 16px;
	text-align: center;
}

/* Kulatý terčík s ikonou nad číslem. Ikona je dekorace (`aria-hidden`),
   význam nese číslo s popisem pod ní. */
.sh-domov__terc {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	margin-bottom: .4rem;
	border-radius: 50%;
	flex-shrink: 0;
}

.sh-domov__terc svg {
	display: block;
	width: 1.5rem;
	height: 1.5rem;
}

/* Barevné varianty terčíku — jen tokeny, žádný nový hex; světlé podklady
   se v tmavém režimu překlopí samy. Žlutá a cihlová se pro tah ikony míchají
   s barvou písma (`--sh-text`) stejně jako nadpis bloku „Chybí tu“ na
   detailu: čistá žlutá by se na světle žluté ztratila a mix s `--sh-text`
   v tmavém režimu zesvětlá spolu s písmem. */
.sh-domov__terc--zelena {
	background: var(--sh-zelena-svetla);
	color: var(--sh-zelena);
}

.sh-domov__terc--obloha {
	background: var(--sh-obloha-svetla);
	color: var(--sh-obloha);
}

.sh-domov__terc--zluta {
	background: var(--sh-zluta-svetla);
	color: color-mix(in srgb, var(--sh-zluta) 55%, var(--sh-text));
}

.sh-domov__terc--cihlova {
	background: var(--sh-cihlova-svetla);
	color: color-mix(in srgb, var(--sh-cihlova) 75%, var(--sh-text));
}

.sh-domov__cislo-hodnota {
	/* `inline-block` kvůli `minWidth`, kterým si count-up v domov.js fixuje
	   šířku hotového čísla, aby kratší mezisoučty necukaly layoutem. */
	display: inline-block;
	font-family: var(--sh-nadpisy);
	font-weight: 800;
	font-size: clamp(1.55rem, 1.3rem + .8vw, 1.9rem);
	line-height: 1.1;
	color: var(--sh-text);
}

/* Nájezd karet: lehce zespodu, jedna po druhé. Čistě CSS (běží i bez JS)
   a jen pro toho, kdo si animace nevypnul. `backwards` drží kartu
   neviditelnou i po dobu jejího zpoždění, jinak by před startem probliknula. */
@media (prefers-reduced-motion: no-preference) {
	.sh-domov__cislo {
		animation: sh-domov-nastup .5s ease-out backwards;
	}

	.sh-domov__cislo:nth-child(2) { animation-delay: .08s; }
	.sh-domov__cislo:nth-child(3) { animation-delay: .16s; }
	.sh-domov__cislo:nth-child(4) { animation-delay: .24s; }

	@keyframes sh-domov-nastup {
		from {
			opacity: 0;
			transform: translateY(10px);
		}
	}
}

.sh-domov__cislo-popis {
	font-size: .9rem;
	line-height: 1.3;
	color: var(--sh-text-2);
	text-wrap: balance;
}

/* Tichá druhá informace u dlaždice „s fotkou“: kolik hřišť na první fotku
   teprve čeká. Odlišuje ji menší písmo, ne průhlednost — `opacity` by
   kontrast strhla pod WCAG AA (naměřeno 4,9 : 1 místo 7,3 : 1). */
.sh-domov__cislo-pozn {
	font-size: .8rem;
	line-height: 1.3;
	color: var(--sh-text-2);
}

@media (max-width: 640px) {
	.sh-domov__cisla {
		grid-template-columns: repeat(2, 1fr);
		gap: .6rem;
	}

	.sh-domov__cislo {
		padding: .9rem .7rem 1rem;
	}

	.sh-domov__terc {
		width: 2.4rem;
		height: 2.4rem;
		margin-bottom: .3rem;
	}

	.sh-domov__terc svg {
		width: 1.3rem;
		height: 1.3rem;
	}
}