/*
 * Astro Spice — komponenta `broj` (plan C1 §5) · prikaz-broj.css
 *
 * Veliki broj, oznaka (npr. master), lanac redukcije, teaser ili rečenica da je
 * tumačenje u punom izveštaju. Tokeni su iz as-calc.css (`.as-calc`), pa ovaj
 * fajl ne uvodi nijednu novu boju. Više `broj` blokova jedan za drugim stoji u
 * mreži (C4: pet brojeva) — kontejner upit, bez medijskih upita po širini ekrana.
 *
 * Kontrast (WCAG 2.2 AA) nad površinom #2A2A38: zlatna 6,0 · tekst 12,9 ·
 * prigušeno 5,1 · tamni tekst na zlatnoj oznaci 6,8.
 */

section.as-calc section.as-prikaz--broj {
	display: inline-block;
	box-sizing: border-box;
	width: 100%;
	vertical-align: top;
}

@container as-calc (min-width: 34rem) {
	section.as-calc section.as-prikaz--broj {
		width: calc(50% - 0.75rem);
		margin-right: 0.75rem;
	}
}

@container as-calc (min-width: 52rem) {
	section.as-calc section.as-prikaz--broj {
		width: calc(33.333% - 0.75rem);
	}
}

section.as-calc .as-broj {
	display: grid;
	gap: 0.4rem;
	padding: 1rem 1.1rem;
	border: 1px solid var(--as-linija);
	border-radius: var(--as-radijus-malo);
	background: var(--as-pozadina);
}

section.as-calc .as-broj[data-istaknuto='da'] {
	border-color: var(--as-zlatna);
}

section.as-calc .as-broj__vrednost {
	margin: 0;
	font-family: var(--as-font-naslov);
	font-size: clamp(2.6rem, 2rem + 3vw, 3.6rem);
	font-weight: 600;
	line-height: 1;
	color: var(--as-zlatna);
	font-variant-numeric: lining-nums tabular-nums;
}

section.as-calc .as-broj__oznaka {
	justify-self: start;
	margin: 0;
	padding: 0.15rem 0.6rem;
	border-radius: 999px;
	background: var(--as-zlatna);
	color: var(--as-pozadina);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.03em;
}

section.as-calc .as-broj__lanac {
	margin: 0.2rem 0 0;
	padding: 0;
	list-style: none;
	color: var(--as-priguseno);
	font-size: 0.9rem;
}

section.as-calc .as-broj__lanac-red {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

section.as-calc .as-broj__lanac-oznaka {
	min-width: 4.5rem;
}

section.as-calc .as-broj__lanac-brojevi {
	color: var(--as-tekst);
	font-variant-numeric: tabular-nums;
}

section.as-calc .as-broj__teaser,
section.as-calc .as-broj__zakljucano {
	margin: 0.3rem 0 0;
	line-height: 1.55;
}

section.as-calc .as-broj__zakljucano {
	color: var(--as-priguseno);
	font-style: italic;
}