/* ==========================================================================
   BLOG

   Svoj list a ne deo `kursevi.css`. Do 26.08.2026. je `procoding-rubrike` bio
   upisan u porodicu pregleda kurseva, pa je `/zanimljivosti/` preuzimao ceo
   list strane koja sa blogom nema veze. Ime porodice mora da opisuje stranu
   koju drzi, inace se sledeca izmena trazi u pogresnom fajlu.

   OD 30.08.2026. STRANA JE HRONOLOSKI SPISAK, a rubrike su filter, ne
   raspored. Zasto, pise u `sekcije/rubrike.php`. Pravila koja gase i vracaju
   redove ne stoje ovde nego u samoj strani, jer ih ima onoliko koliko rubrika
   ima u bazi; ovde je sve sto ne zavisi od podataka.
   ========================================================================== */

.blog__uvod { margin-bottom: 8px; }

/* Zuta podvlaka pod naslovom strane, od 03.09.2026 (Pavle). Isti recept kao na
   `/kontakt/` i `/prijava/`: traka ispod slova, ne podloga iza njih. Puna zuta
   iza naslova od 56 px bila bi treca povrsina na strani, a ovako ostaje
   oznaka; slovo se ne boji, pa kontrast naslova ostaje 10,97:1.

   Nije isto sto i `<em>` u uvodu dva reda nize, gde je puna podloga. Razlog je
   boja slova: uvod je `--tekst-blagi`, koji na zutoj traci daje 1,9:1 u tamnoj
   temi, a naslov je `--tekst` i traka ga ne dodiruje. */
.blog h1 em {
	font-style: normal;
	background: linear-gradient(to top, var(--istaknuto) 0 .28em, transparent .28em);
}

/* Zuti marker na `<em>` u uvodu. Puna podloga, ne traka preko donjeg dela:
   traka je pala na merenju tamne teme, gde je slovo uvoda `--tekst-blagi`
   #9fb0c0 i na zutoj daje 1,9:1. Sa punom podlogom slovo je mornarsko u obe
   teme, 7,16:1 na svetloj i 6,4:1 na tamnoj. Isti razlog drzi `osnova.css`
   na `.sekcija--zuta`: zuta ostaje topla u obe teme, pa se slovo ne okrece. */
/* Uz `.blog__uvod em` je do 11.09.2026. stajao i `.rubrike__uvod em`. Uvod na
   strani rubrike ne postoji: `sekcije/rubrike.php` ispisuje `rubrike__potezi` i
   `rubrike__poziv`, uvoda medju njima nema. */
.blog__uvod em {
	padding: 1px 5px;
	border-radius: 4px;
	background: var(--istaknuto);
	color: var(--podloga-tamna);
	font-style: normal;
}

/* ==========================================================================
   FILTER

   Kvacica je skrivena od oka a ne od citaca ekrana (`samo-citac` u
   `osnova.css`), a `<label>` je ono sto se vidi i klikce. Tako pilula ostaje
   dugme za misa i ostaje kvacica za tastaturu: `Tab` je nadje, `Space` je
   ukljuci, a citac procita „potvrdno polje, Iz ucionice, nije izabrano".
   ========================================================================== */

.blog__filter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 28px 0 36px;
}

.blog__filter fieldset {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	border: 0;
}

.blog__pilula {
	display: inline-flex;
	align-items: center;
	/* 44 px je dodirna meta iz ADR-0005 i drzi je `min-height`, ne ispuna. */
	min-height: 44px;
	padding: 0 18px;
	border: 1px solid var(--crta-jaka);
	border-radius: 999px;
	font-size: 16px;
	font-weight: 600;
	color: var(--tekst);
	cursor: pointer;
	user-select: none;
	transition: border-color .18s ease, color .18s ease, background-color .18s ease;
}

@media (hover: hover) {
	.blog__pilula:hover {
		border-color: var(--akcenat-tamni);
		color: var(--akcenat-tamni);
	}
}

/* Ukljucena pilula je puna, ne samo obojena ivica: razlika u boji ivice se na
   telefonu i pod suncem ne vidi, a razlika pun/prazan se vidi uvek. Slovo je
   belo na `--akcenat-tamni`, 5,30:1. */
.blog__kvaka:checked + .blog__pilula {
	border-color: var(--akcenat-tamni);
	background: var(--akcenat-tamni);
	color: var(--bela);
}

/* Prsten ide na `<label>`, jer je kvacica skrivena i njen sopstveni prsten se
   ne bi video nigde. `:focus-visible` na kvacici, ne `:focus`: mis ne sme da
   ostavi prsten za sobom. */
.blog__kvaka:focus-visible + .blog__pilula {
	outline: 3px solid var(--akcenat);
	outline-offset: 2px;
}

/* Dugme koje ponistava prazan izbor nema sta da radi, pa ga nema. Vraca se
   cim je bar jedna pilula ukljucena. */
.blog__ponisti {
	display: none;
	min-height: 44px;
	padding: 0 16px;
	border: 0;
	background: none;
	font: inherit;
	font-size: 16px;
	font-weight: 600;
	color: var(--tekst-blagi);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	cursor: pointer;
}

.blog__filter:has(input:checked) .blog__ponisti { display: inline-flex; align-items: center; }

@media (hover: hover) {
	.blog__ponisti:hover { color: var(--akcenat-tamni); }
}

.blog__ponisti:focus-visible {
	outline: 3px solid var(--akcenat);
	outline-offset: 2px;
}

/* ==========================================================================
   SPISAK
   ========================================================================== */

.blog__spisak {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}

/* Stavka je omotac oko kartice, jer se filter kaci na `li`, a kartica na
   `a`. Da je klasa `je--` stajala na kartici, `display:none` iz filtera bi se
   tukao sa `display:flex` koji kartici daje oblik. */
/* JEDNAKE KARTICE, od 01.10.2026. `grid-auto-rows: 1fr` daje svim redovima
   visinu najviseg reda na strani, a kartica popunjava svoju stavku. Tako je
   kartica sa naslovom u jednom redu iste velicine kao ona sa cetiri, i
   mreza ostaje ravna. */
.blog__spisak { grid-auto-rows: 1fr; }
.blog__stavka { display: flex; }
.blog__stavka > .kartica { flex: 1; width: 100%; }

/* `[hidden]` mora ovde, jer `display: block` iznad je autorsko pravilo iste
   tezine kao ono iz pregledaca, a autorsko pobedjuje: bez ovog reda `hidden`
   nad stavkom ne bi radio nista. Skripta filtera (`js/blog-filter.js`) gasi i
   pali stavke bas tim atributom, a ne klasom, da bi ono sto je sakriveno bilo
   sakriveno i za citac ekrana. */
.blog__stavka[hidden] { display: none; }

/* Prelaze upisuje skripta u sam element, jer trajanja i tada racuna ona.
   Ovde stoji samo ono sto se ne racuna: sa cega se transformacija vrti. */
.blog--js .blog__stavka { transform-origin: 50% 50%; will-change: transform; }

@media (max-width: 980px) {
	.blog__spisak { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (max-width: 640px) {
	.blog__spisak { grid-template-columns: 1fr; }
}

.blog__prazno {
	margin: 24px 0 0;
	color: var(--tekst-blagi);
}

/* ==========================================================================
   POZIV NA DNU

   Danas prazan na obe strane bloga (Pavle ga je 30.08.2026. skinuo), ali
   polja u widgetu ostaju, pa ostaju i pravila.
   ========================================================================== */

.rubrike__poziv {
	margin-top: var(--ritam-mali);
	padding-top: 40px;
	border-top: 1px solid var(--crta);
}

.rubrike__poziv h2 { margin-bottom: 12px; }

.rubrike__potezi {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 24px;
}


/* ==========================================================================
   PILULE KAO VEZE I STRANE BLOGA, od 01.10.2026.
   Filter je presao sa kvacica na veze (`?rubrika=`), jer blog ima strane.
   Izabrana pilula izgleda isto kao ranije ukljucena kvacica.
   ========================================================================== */

a.blog__pilula { text-decoration: none; }

.blog__pilula.je-izabrana {
	border-color: var(--akcenat-tamni);
	background: var(--akcenat-tamni);
	color: var(--bela);
}

a.blog__pilula:focus-visible {
	outline: 3px solid var(--akcenat);
	outline-offset: 2px;
}

.strane {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-top: 48px;
}

.strane .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 16px;
	border: 1px solid var(--crta);
	border-radius: 999px;
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
	color: var(--tekst);
	transition: border-color .18s ease, background .18s ease;
}

.strane .current {
	background: var(--akcenat);
	border-color: var(--akcenat-tamni);
	color: var(--bela);
}

[data-tema="tamna"] .strane .current { color: var(--mrak); }

.strane .dots { border-color: transparent; color: var(--tekst-blagi); }

@media (hover: hover) {
	.strane a.page-numbers:hover { border-color: var(--tekst); }
}

.strane a:focus-visible {
	outline: 3px solid var(--akcenat-tamni);
	outline-offset: 2px;
}

@media (max-width: 640px) {
	.strane .page-numbers { padding: 0 12px; }
}