/* Kurs Gallery - bento grid, v3 (fix preljeva okruglih oblika izvan grid celije) */

/* KLJUCNI ISPRAVAK: container-type MORA biti na PREDKU grida, ne na
samom gridu. Po CSS specifikaciji, element koji ima container-type ne
moze koristiti cqw jedinice u vlastitim pravilima da upita SAM SEBE -
takve cqw vrijednosti se umjesto toga rjesavaju prema SLJEDECEM precu
(ovdje: viewport, jer ranije nije postojao drugi query container). To
je bio pravi uzrok "ogromnih" plocica: max-width:900px na .kurs-gallery-grid
JE ogranicavao sirinu stupaca (1fr, obicno CSS, radi ispravno), ali NIJE
ograncavao grid-auto-rows (cqw), jer se taj cqw racunao prema SIRINI
CIJELOG PROZORA (npr. na 2560px sirokom monitoru: 25% od 2560 = 640px
po redu!), a ne prema kapiranom gridu. Zato su portret plocice (3 reda)
znale biti ogromne i ne stati na ekran, dok su vodoravne plocice
(landscape, 1-2 reda) ispadale nerazmjerno visoke/uske. Rjesenje: query
container je sad .elementor-widget-kurs_gallery (predak), a
.kurs-gallery-grid je NJEGOV potomak pa cqw ispravno gleda kapiranu
900px sirinu predka. Baza: 4 stupca, gap 12px -> 1 stupac =
(100cqw - 3*12px) / 4. */
/* width: 100% je OBAVEZAN ovdje - .elementor-widget-kurs_gallery je
flex-item unutar Elementorovog e-flex/e-con roditelja. Kad flex-item
nema eksplicitnu 'width', njegov flex-basis (auto) se inace racuna
prema SADRZAJU (velicini djece) - ali container-type: inline-size
iznad ukljucuje 'size containment', sto znaci da element vise NE SMIJE
koristiti velicinu svoje djece za vlastitu velicinu. Bez eksplicitne
width, flex-basis:auto tada nema od cega racunati sirinu pa se cijeli
widget stisne na priblizno 0px (upravo ono sto se dogodilo - sitne,
sicusne plocice na svim uredajima). width: 100% daje flexboxu gotovu
vrijednost za flex-basis, neovisno o sadrzaju, pa se containment ne
sudara s flex sizing-om. */
.elementor-widget-kurs_gallery {
	container-type: inline-size;
	width: 100%;
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
}

/* 8 stupaca (umjesto ranijih 4/6) - izmjereno u izoliranom testu: kod
tipicnog seta od ~25 plocica (bento mjesavina malih/velikih/ovalnih
oblika), 8 stupaca na 900px stropu daje ukupnu visinu galerije od
~1.0-1.9 ekrana na uobicajenim rezolucijama (1440x900, 1920x1080,
2560x1440), unutar korisnikovog zahtjeva "max 1.5-2 ekrana". Vise
stupaca bi dalje smanjilo plocice na neugodno malu velicinu (<90px),
manje stupaca (4-6) prelazi trazenu granicu (2.5-3+ ekrana). */
.kurs-gallery-grid {
	display: grid;
	grid-template-columns: repeat( 8, 1fr );
	grid-auto-rows: calc( 12.5cqw - 10.5px );
	grid-auto-flow: dense;
	gap: 12px;
}

/* Rucna mreza (manual mode) - broj stupaca dolazi iz PHP-a kao CSS
varijabla --kurs-gallery-columns (Elementor kontrola grid_columns), pa
formula za visinu retka mora raditi za BILO KOJI broj stupaca, ne samo
za fiksnih 8 kao gore. Sirina 1 stupca = ( ukupna sirina - razmaci ) /
broj stupaca - ista logika koju stvarni CSS grid koristi za repeat(N,1fr)
s gapom, pa je 1 jedinica visine retka uvijek priblizno kvadratna. */
.kurs-gallery-grid--manual {
	grid-template-columns: repeat( var( --kurs-gallery-columns, 8 ), 1fr );
	grid-auto-rows: calc( ( 100cqw - ( var( --kurs-gallery-columns, 8 ) - 1 ) * 12px ) / var( --kurs-gallery-columns, 8 ) );
}

.kurs-gallery-tile {
	position: relative;
	overflow: hidden;
	border-radius: 10px;
	background: #eee;
}

/* Zadano ponasanje (v5): svaka slika ispunjava CIJELU celiju preko
object-fit: cover - nikad ne ostaje prazan prostor niti se slika
izoblici (za razliku od stare height:100%/width:auto varijante koja je
znala ostaviti prazninu sa strane kod uzih slika). Ako se omjer slike
bitno razlikuje od omjera plocice, visak se odsijeca - zato slike koje
idu u galeriju treba unaprijed kadrirati za odgovarajuci kontekst
(Kadriranje za galeriju na ekranu pojedine slike u Media Library), da
cover ima sto manje posla i ne odreze bitan dio kadra. */
.kurs-gallery-tile img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: opacity 0.3s ease;
}

.kurs-gallery-tile:hover img {
	opacity: 0.35;
}

.kurs-gallery-tile-link {
	display: block;
	width: 100%;
	height: 100%;
}

/* Hover overlay - datum + naslov objave, preko zatamnjene slike.
Na dodirnim uredajima :hover se ne pojavljuje - tap-to-reveal dolazi
kao zaseban korak (otvoreno pitanje 1 iz plana galerije). */
.kurs-gallery-tile-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 4px;
	padding: 14px;
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
	color: #fff;
	text-align: center;
	align-items: center;
}

.kurs-gallery-tile:hover .kurs-gallery-tile-overlay {
	opacity: 1;
}

.kurs-gallery-tile-date {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	opacity: 0.85;
}

.kurs-gallery-tile-title {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
}

.kurs-gallery-tile--small {
	grid-column: span 1;
	grid-row: span 1;
}

/* Mala landscape plocica - naizmjenice s --oval-h u rotaciji za
landscape orijentaciju (vidi get_tile_size() u class-kurs-gallery-widget.php),
koristi isti "Galerija - siroko" (3:2) kadar kao oval-h, samo u manjem
rasponu (2x1 umjesto 3x2) radi ravnoteze male/velike plocice u mrezi. */
.kurs-gallery-tile--wide {
	grid-column: span 2;
	grid-row: span 1;
}

/* Smanjeno s 2x3 na 1x2 - korisnik je trazio manje portret plocice; i
dalje tocan 1:2 portret omjer, samo u manjem, kompaktnijem rasponu. */
.kurs-gallery-tile--tall {
	grid-column: span 1;
	grid-row: span 2;
}

.kurs-gallery-tile--large {
	grid-column: span 2;
	grid-row: span 2;
}

/* Oblici za rucnu mrezu (manual mode) - ovdje NE odreduju span (to je
inline style iz PHP-a, po tile_col_span/tile_row_span), samo rub. */
.kurs-gallery-tile--rounded {
	border-radius: 20px;
}

.kurs-gallery-tile--oval {
	border-radius: 50%;
}

/* Okrugli/ovalni oblici - svaki ima svoj raspon koji STVARNO odgovara
ciljanom kadru (vidi kurs_builder_image_crop_contexts() u
featured-image-crop.php), jer sad grid-auto-rows prati sirinu stupca
(gore) pa je 1 jedinica raspona uvijek priblizno kvadratna - omjeri
ispod su zato pouzdani na svakoj sirini ekrana, ne samo priblizni. */
.kurs-gallery-tile--circle {
	grid-column: span 1;
	grid-row: span 1;
	border-radius: 50%;
}

/* Smanjeno s 3x2 na 2x1 (2:1 umjesto tocnog 3:2) - korisnik je trazio
manje ovalne plocice; blazi omjer (2:1) i dalje daje uredan, ne-siljati
oval (vidi napomenu kod --oval-v za problem prevelike ekstremnosti). */
.kurs-gallery-tile--oval-h {
	grid-column: span 2;
	grid-row: span 1;
	border-radius: 50%;
}

/* Ispravljeno: prijasnji raspon (1 stupac x 2 reda = omjer 1:2) davao je
preoznake, siljate "list/oko" oblike umjesto blagog ovala - border-radius:
50% na jako izduzenom pravokutniku matematicki JEST elipsa, ali s tako
ekstremnim omjerom vizualno djeluje siljato/neprirodno (tocno ono sto
korisnik zeli izbaciti). Sada prati tocan omjer "Galerija - usko" kadra
(2:3) - isti raspon kao --tall, samo s border-radius: 50% za blazi,
prirodniji ovalni oblik. */
/* Dalje smanjeno s 2x3 na 1x2 - korisnik je trazio manje portret/ovalne
plocice. Omjer 1:2 je blazi nego prijasnji problematicni 1:2.3 (koji je
nastao zbog tadasnjeg grid-auto-rows bug-a gdje redovi NISU bili kvadratni
sa stupcima) - sada kad su redovi/stupci stvarno kvadratni (v6 ispravak
gore), 1:2 omjer daje uredan, blago izduzen oval, ne siljati list/oko. */
.kurs-gallery-tile--oval-v {
	grid-column: span 1;
	grid-row: span 2;
	border-radius: 50%;
}

/* Puna sirina retka (banner), namjerno NIJE u automatskoj rotaciji
oblika - koristi se samo kad slika ima spremljen "Galerija - ultra
siroko" kadar (vidi kurs_builder_get_image_crop_url() poziv u
render()), tj. kad urednik svjesno odabere sliku koja stvarno ima
dovoljno sirok format. Raspon 4 reda na (bazno) 8 stupaca = tocan omjer 2:1 (vidi override
u 767px breakpointu ispod za istu logiku kod 2 stupca). */
.kurs-gallery-tile--ultrawide {
	grid-column: 1 / -1;
	grid-row: span 4;
	border-radius: 10px;
}

/* Mobitel: 2 -> 4 stupca. Stari 2-stupacni raspored je na uskom
telefonskom ekranu davao OGROMNE jedinice (npr. na 390px sirokom
ekranu, 50cqw davalo je cca 191px po jedinici - jedna "velika" plocica
zauzimala je gotovo cijeli ekran), pa se puno skrolalo. Sa 4 stupca na
istoj sirini jedinica pada na ~90px - sve plocice (ukljucujuci sada vec
smanjene ovalne/portret oblike gore) prirodno stanu unutar 4 stupca bez
potrebe za posebnim grid-column/row nadjacavanjima kao prije. */
@media ( max-width: 767px ) {
	.kurs-gallery-grid {
		grid-template-columns: repeat( 4, 1fr );
		grid-auto-rows: calc( 25cqw - 6px );
		gap: 8px;
	}

	/* Rucna mreza (manual mode) na mobitelu zadrzava ISTI broj stupaca
	koji je urednik odabrao (npr. 8) - v1 namjerno ne smanjuje broj
	stupaca na malim ekranima, samo prati manji gap (8px umjesto 12px)
	i time manje plocice. Ako se 8+ stupaca pokaze premalo za telefone,
	ovo je mjesto za buduce prilagodbe (npr. fiksni manji broj stupaca). */
	.kurs-gallery-grid--manual {
		grid-auto-rows: calc( ( 100cqw - ( var( --kurs-gallery-columns, 8 ) - 1 ) * 8px ) / var( --kurs-gallery-columns, 8 ) );
		gap: 8px;
	}

	/* Bazni ultrawide raspon (span 4 reda) racunat je za 8 baznih
	stupaca (8:4 = 2:1). Na mobitelu je sada 4 stupca pa treba span 2
	reda da ostane isti 2:1 omjer (4:2 = 2:1). */
	.kurs-gallery-tile--ultrawide {
		grid-row: span 2;
	}

	.kurs-gallery-tile-title {
		font-size: 12px;
	}
}

.kurs-gallery-tile--natural img {
	object-fit: contain;
	padding: 16px;
	box-sizing: border-box;
}