/* =====================================================================
   Dve sekcije koje deli vise porodica sablona: ploca i galerija.

   ZASTO SVOJ LIST, A NE `osnova.css`
   Ploca stoji na devet strana, galerija na sedam, od devedeset pet. U
   `osnova.css` bi ta pravila isla na svaku stranu, ukljucujuci onih
   sedamdesetak koje ih nemaju. To je tacno greska koja je Kadence-u
   izmerena: 142 KB po otvaranju a pogodi 3,7 % pravila.

   ZASTO NE PO JEDAN LIST PO SEKCIJI
   Dve sekcije, dva preuzimanja, a obe stoje na `/o-nama/`. Jedan list po
   grupi koja se cesto pojavljuje zajedno je jedno preuzimanje.

   MREZA OD DVANAEST STUPACA
   Obe sekcije citaju `sirina` iz baze, vrednost od 1 do 12, jer je tako
   Milica unosila i taj izbor se ne sme izgubiti. `--stupaca` je taj broj.
   Ispod 980 px svaka kartica uzima pola reda, ispod 640 ceo, po pravilima
   za uske ekrane iz N1a: na telefonu se ne cita mreza nego spisak.
   ===================================================================== */

/* ---------- Zajednicka mreza ---------- */
.ploca__mreza,
.galerija__mreza {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 28px;
	margin-top: 40px;
}

/* BEZ NASLOVA SEKCIJE NEMA STA DA SE ODVOJI, od 08.09.2026. Onih 40 px iznad
   je razmak od naslova do mreze. Sekcija bez naslova (na strani kursa je takva
   „Da li je potrebno predznanje?", gde naslov nosi kartica) ih je dodavala na
   svoj gornji ritam, pa je pojas iznad nje bio 40 px siri od svih ostalih.
   Nadjeno merenjem dok je Pavle trazio da se prazan prostor smanji. */
.traka > .ploca__mreza:first-child,
.traka > .galerija__mreza:first-child { margin-top: 0; }

.ploca__kartica,
.galerija__kadar,
.galerija__tekst {
	grid-column: span var(--stupaca, 4);
	min-width: 0;
}

@media (max-width: 980px) {
	.ploca__mreza,
	.galerija__mreza {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
		margin-top: 32px;
	}

	.ploca__kartica,
	.galerija__kadar,
	.galerija__tekst { grid-column: span 1; }
}

@media (max-width: 640px) {
	.ploca__mreza,
	.galerija__mreza { grid-template-columns: 1fr; }
}

/* ---------- Ploca ---------- */
.ploca h2 + .uvod { margin-bottom: 0; }

.ploca__kartica h3 {
	margin-bottom: 12px;
	font: 800 21px/1.25 var(--font-naslov);
}

.ploca__cipovi {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 4px 0 18px;
	padding: 0;
	list-style: none;
}

/* Bedz u spisku cipova ne nosi svoju donju marginu: nju daje `gap`. */
.ploca__cipovi .bedz { margin-bottom: 0; }

.ploca__citat {
	margin: 4px 0 18px;
	padding-left: 16px;
	border-left: 3px solid var(--istaknuto);
}

.ploca__citat p {
	margin-bottom: 6px;
	font-style: italic;
	color: var(--tekst);
}

.ploca__citat cite {
	font-size: 15px;
	font-style: normal;
	color: var(--tekst-blagi);
}

/* ---------- Galerija ---------- */

/* Kadar i tekstualna kartica dele visinu reda, pa im ivice stoje u liniji
   umesto da se stepenasto razilaze. */
.galerija__kadar,
.galerija__tekst {
	display: flex;
	flex-direction: column;
	margin: 0;
	border-radius: var(--radius-kartica);
	overflow: hidden;
}

.galerija__slika {
	width: 100%;
	flex: 1;
	aspect-ratio: 4 / 3;

	/* `cover` sece sliku, a `--teziste` odlucuje sta ostaje u kadru.
	   Vrednost je merena po fotografiji i stoji u bazi; bez nje bi se
	   seklo po sredini i deci bi odsecalo glave. */
	object-fit: cover;
	object-position: var(--teziste, 50% 50%);
}

.galerija__kadar figcaption {
	padding: 12px 4px 0;
	font-size: 15px;
	color: var(--tekst-blagi);
}

.galerija__tekst {
	justify-content: center;
	padding: 26px 24px;
}

.galerija__tekst--mirna { background: var(--podloga-mirna); }

.galerija__tekst--zuta {
	background: var(--istaknuto);
	color: var(--podloga-tamna);
}

.galerija__tekst h3 {
	margin-bottom: 12px;
	font: 800 20px/1.25 var(--font-naslov);
}

.galerija__tekst--zuta h3 { color: var(--podloga-tamna); }

.galerija__tekst p {
	margin-bottom: 14px;
	font-size: 16px;
	color: var(--tekst-blagi);
}

.galerija__tekst p:last-child { margin-bottom: 0; }

/* Zuta kartica nosi svoje slovo: `--tekst-blagi` na njoj pada na kontrastu,
   a ovaj ton je meren, 5,4:1 prema #ffc94a. */
.galerija__tekst--zuta p { color: var(--tekst-na-zutom); }

.galerija__poziv {
	margin-top: 36px;
	text-align: center;
}

/* Sekcija na tamnoj podlozi: natpis ispod slike i telo tekstualne kartice
   citaju svetliji ton, jer `--tekst-blagi` je racunat prema beloj. */
.sekcija--tamna .galerija__kadar figcaption { color: var(--tekst-na-tamnom-blagi); }
.sekcija--tamna .ploca__kartica .kartica__telo p { color: var(--tekst-blagi); }

/* Sitniji red ispod potpisa citata („utisak potpisan i objavljen na sajtu").
   Zaseban red, ne nastavak `cite`: govori o poreklu utiska, a ne o tome ko ga
   je rekao, i citac ekrana ne sme da ih izgovori kao jednu recenicu. */
.ploca__citat-blize {
	display: block;
	margin-top: .35em;
	color: var(--tekst-blagi);
	font-size: .875rem;   /* 14 px tacno; .82rem je 13,12 i pada na kapiji za uske ekrane */
}


/* =====================================================================
   FORMA

   ZASTO OVDE, A NE U DVA LISTA
   Do 27.08.2026. su ista pravila stajala i u `kontakt.css` i u
   `prijava.css`. Posetilac to nije placao, jer se ta dva lista nikad ne
   ucitavaju zajedno, ali se svaka izmena polja radila dvaput ili se
   zaboravljala jednom. Dva primerka su se vec bila razisla: prijava je
   izgubila boju natpisa u praznom polju, kontakt prsten fokusa na ishodu.

   ZASTO BAS U OVOM LISTU
   Isti razlog kao za plocu i galeriju: pravila koja presecaju porodice
   sablona ne idu u `osnova.css`, jer bi tada isla i na sedamdesetak
   strana koje forme nemaju.

   STA JE OSTALO SVOJE
   `kontakt.css` drzi kvacicu saglasnosti i polozaj dugmeta, `prijava.css`
   padajuci spisak, izbor za koga je kurs, brojac razreda i red o obradi
   podataka. Uz svako od njih tamo pise zasto je bas tamo.
   ===================================================================== */

/* Kartica forme nije veza, pa ne sme da se podize pod misem: pomeraj od 2 px
   na necemu sto se ne klikne cita se kao kvar, a ne kao odziv. Klasa je
   dvostruka da bi bila jaca od `.kartica:hover` u `osnova.css`. */
@media (hover: hover) {
	.kartica.forma:hover {
		transform: none;
		border-color: var(--crta);
	}
}

.forma { max-width: none; }
.forma .kartica__telo { padding: 28px 28px 30px; }

@media (max-width: 640px) {
	.forma .kartica__telo { padding: 22px 20px 24px; }
}

/* `fieldset` je i sam `.polje`, pa mu se skida sistemski okvir. */
.polje {
	margin: 0 0 22px;
	padding: 0;
	border: 0;
	min-width: 0;
}

.polje__oznaka {
	display: block;
	margin-bottom: 6px;
	font-size: 16px;
	font-weight: 700;
	color: var(--tekst);
}

.polje__unos,
.polje__tekst,
.polje__izbor {
	width: 100%;
	min-height: 52px;
	padding: 13px 16px;
	border: 1px solid var(--crta-jaka);
	border-radius: var(--radius-polje);
	background: var(--podloga);
	color: var(--tekst);
	font: 400 17px/1.4 var(--font-tekst);
	transition: border-color .18s ease;
}

.polje__tekst { min-height: 110px; resize: vertical; }

/* Natpis u praznom polju je uputstvo, ne tekst, pa mora da se razlikuje od
   onoga sto covek upise. Podrazumevana boja pregledaca nije merena; ova jeste.
   Do 27.08.2026. je ovo pravilo stajalo samo u `kontakt.css`. */
.polje__unos::placeholder,
.polje__tekst::placeholder { color: var(--tekst-blagi); }

/* Prsten fokusa je obris, ne senka: senki na ovom sajtu nema, a obris se vidi
   i u rezimu visokog kontrasta, gde se `box-shadow` gubi. */
.polje__unos:focus-visible,
.polje__tekst:focus-visible,
.polje__izbor:focus-visible {
	outline: 3px solid var(--akcenat);
	outline-offset: 2px;
	border-color: var(--akcenat-tamni);
}

/* Greska se vidi i bez boje: crveni okvir je pojacanje, a recenica ispod polja
   je poruka. Vezana je preko `aria-describedby`, pa je cita i citac ekrana. */
.polje--greska .polje__unos,
.polje--greska .polje__tekst,
.polje--greska .polje__izbor { border-color: var(--greska); }

.polje__greska {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	color: var(--greska);
}

.polje__greska:empty { display: none; }

/* ---------- Ishod prethodnog slanja ---------- */

.forma__ishod {
	margin: 0 0 22px;
	padding: 14px 18px;
	border-left: 4px solid var(--akcenat);
	border-radius: 0 var(--radius-polje) var(--radius-polje) 0;
	background: var(--podloga-mirna);
	font-size: 16px;
	font-weight: 600;
}

.forma__ishod--lose {
	border-left-color: var(--greska);
	color: var(--greska);
}

/* Posle slanja fokus pada na ovu recenicu, pa joj treba vidljiv prsten.
   Do 27.08.2026. je pravilo stajalo samo u `prijava.css`, a ishod se isto
   tako fokusira i na kontaktu. */
.forma__ishod:focus-visible {
	outline: 3px solid var(--akcenat);
	outline-offset: 2px;
}

/* ---------- Mamac ----------
   Sakriven i od oka i od citaca ekrana, a i dalje u dokumentu, jer robot koji
   popunjava sve popuni i ovo. `display: none` se ne koristi: deo robota takva
   polja preskace, pa bi zamka prestala da radi. */
.pc-mamac {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ---------- Tamna tema ----------
   Kartica je na tamnoj temi `--podloga-mirna`, pa polje unutar nje mora da
   bude tamnije OD nje da bi se videlo da je udubljeno. Na svetloj temi je
   obrnuto, i tamo obris radi sam. */
[data-tema="tamna"] .polje__unos,
[data-tema="tamna"] .polje__tekst,
[data-tema="tamna"] .polje__izbor {
	background: var(--podloga);
	border-color: var(--crta-jaka);
}

/* Ishod stoji na kartici koja je i sama `--podloga-mirna`, pa bi na tamnoj
   temi nestao. Podloga mu zato ide korak nize. */
[data-tema="tamna"] .forma__ishod { background: var(--podloga); }

/* ---------- Kartica koja je sama u ploci ---------- */
/* Preko cele sirine slika je 1160 px za jedan pasus teksta, a na pola reda
   ostane pola reda prazno; jedno i drugo izgleda kao greska. Zato se menja
   raspored, ne sirina: slika levo na 46 % reda, tekst desno. Trazi se
   `:has` da tekstualne kartice bez slike ostanu kakve jesu.
   Nastalo 30.08.2026. za „Udzbenik" na /o-nama/, gde je kartica bila 1160
   px siroka i 879 px visoka za tri recenice. */
@media (min-width: 981px) {
	.ploca__kartica:only-child:has(> .kartica__slika) {
		flex-direction: row;
		align-items: stretch;
	}

	/* `min-width: 0` je uslov, ne ukras: flex stavka ima `min-width: auto`,
	   a to je za sliku njena sopstvena sirina od 768 px, pa bi `flex-basis`
	   od 46 % ostao bez dejstva i slika bi izasla 768 px siroka. */
	.ploca__kartica:only-child > .kartica__slika {
		flex: 0 0 46%;
		min-width: 0;
		align-self: stretch;
	}

	.ploca__kartica:only-child:has(> .kartica__slika) .kartica__telo {
		justify-content: center;
		padding: 34px 38px;
	}
}