/* Kurs Video Galerija - "Kolo" prikaz (dijamant mreza, kontinuirana rotacija) */

/* KLJUCNI OBRAZAC preuzet iz kurs-gallery.css: container-type mora biti na
PREDKU grida (ovdje: .kurs-video-gallery-widget), ne na samom gridu, jer
cqw jedinice ne mogu upitati sam sebe. width: 100% je obavezan jer je ovaj
element flex-item unutar Elementorovog e-flex/e-con roditelja - bez toga
container-type: inline-size (size containment) stisne widget na ~0px.

Namjerno BEZ overflow: hidden - mreza se smije vizualno protezati izvan
ovog okvira dok rotira (kao u referentnom primjeru), bez rezanja kutova pri
rotaciji. Velicina se sad racuna preko --vg-size (postavlja JS iz "Velicina
mreze" Elementor kontrole, u vh jedinicama) umjesto fiksnog max-width-a -
zato roditeljska Elementor sekcija treba imati dovoljno prostora (min-
height) oko widgeta da rotacija ima kamo "disati". */
.kurs-video-gallery-widget {
	container-type: inline-size;
	width: 100%;
	max-width: min( 100%, var( --vg-size, 60vh ) );
	margin-left: auto;
	margin-right: auto;
	position: relative;
}

.kurs-vg-grid {
	position: relative;
	display: grid;
	grid-template-columns: repeat( var( --vg-columns, 4 ), 1fr );
	grid-auto-rows: calc( 25cqw - 9px );
	grid-auto-flow: dense;
	gap: 12px;
	transform-origin: 50% 50%;
	will-change: transform;
}

.kurs-vg-tile {
	position: relative;
	overflow: hidden;
	border-radius: 10px;
	background: #111319;
	transform-origin: 50% 50%;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.kurs-vg-tile--malo {
	grid-column: span 1;
	grid-row: span 1;
}

.kurs-vg-tile--veliko-vodoravno {
	grid-column: span 2;
	grid-row: span 1;
}

.kurs-vg-tile--veliko-okomito {
	grid-column: span 1;
	grid-row: span 2;
}

/* Centar je uvijek eksplicitno pozicioniran (2x2), ostalih 8 se automatski
posloze oko njega preko grid-auto-flow: dense kao rezerva za
necetverostupcane postavke. Pocetni redak/stupac racuna se u PHP-u (data-
center-start, uvijek stupci/2) i postavlja u JS-u kao --vg-center-start -
isti broj vrijedi i za stupac i za redak jer je mreza uvijek NxN (4x4 po
zadanom). */
.kurs-vg-tile--center {
	grid-column: var( --vg-center-start, 2 ) / span 2;
	grid-row: var( --vg-center-start, 2 ) / span 2;
}

.kurs-vg-tile-link {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.kurs-vg-tile-media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.kurs-vg-tile-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
	gap: 6px;
	padding: 14px;
	text-align: center;
	color: #fff;
	background: linear-gradient( to top, rgba( 0, 0, 0, 0.75 ), transparent 60% );
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.kurs-vg-tile:hover .kurs-vg-tile-overlay,
.kurs-vg-tile.is-active .kurs-vg-tile-overlay {
	opacity: 1;
}

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

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

.kurs-vg-tile-cta {
	display: inline-block;
	padding: 6px 14px;
	margin-top: 2px;
	border-radius: 999px;
	background-color: #3b82f6;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* Eksplicitan raspored "kola" oko centra kad je mreza na zadanih 4 stupca -
svaka od 8 pozicija ima tocno mjesto u prstenu (u smjeru kazaljke na satu),
umjesto oslanjanja samo na grid-auto-flow: dense koje ne jamci simetriju.
Raspored tocno prati resolve_tile_format()/default_tile_format() uzorak iz
PHP-a (1,3,5,7=malo, 2,6=veliko-vodoravno, 4,8=veliko-okomito), tako da
velicina i mjesto svake pozicije uvijek odgovaraju. VRIJEDI NA SVIM
SIRINAMA (ukljucujuci mobitel) - mreza ostaje kvadratna 4x4 bez obzira na
sirinu ekrana, sama velicina (--vg-size) se smanjuje umjesto rasporeda. */
.kurs-video-gallery-widget[ data-columns="4" ] .kurs-vg-tile--pos-1 {
	grid-column: 1 / span 1;
	grid-row: 1 / span 1;
}

.kurs-video-gallery-widget[ data-columns="4" ] .kurs-vg-tile--pos-2 {
	grid-column: 2 / span 2;
	grid-row: 1 / span 1;
}

.kurs-video-gallery-widget[ data-columns="4" ] .kurs-vg-tile--pos-3 {
	grid-column: 4 / span 1;
	grid-row: 1 / span 1;
}

.kurs-video-gallery-widget[ data-columns="4" ] .kurs-vg-tile--pos-4 {
	grid-column: 4 / span 1;
	grid-row: 2 / span 2;
}

.kurs-video-gallery-widget[ data-columns="4" ] .kurs-vg-tile--pos-5 {
	grid-column: 4 / span 1;
	grid-row: 4 / span 1;
}

.kurs-video-gallery-widget[ data-columns="4" ] .kurs-vg-tile--pos-6 {
	grid-column: 2 / span 2;
	grid-row: 4 / span 1;
}

.kurs-video-gallery-widget[ data-columns="4" ] .kurs-vg-tile--pos-7 {
	grid-column: 1 / span 1;
	grid-row: 4 / span 1;
}

.kurs-video-gallery-widget[ data-columns="4" ] .kurs-vg-tile--pos-8 {
	grid-column: 1 / span 1;
	grid-row: 2 / span 2;
}

/* Uvecanje na hover (desktop) / aktivnu plocicu (tap na mobitelu) - faktor
dolazi kao CSS varijabla postavljena preko JS-a iz "Uvecanje plocice na
hover/tap (%)" kontrole, tako da postotak iz Elementor panela izravno
upravlja CSS-om bez hardkodirane vrijednosti. */
.kurs-vg-tile.is-active {
	transform: scale( var( --vg-hover-scale, 1.35 ) );
	z-index: 5;
}

/* Mobitel: samo manji naslov/CTA, raspored ostaje isti 4x4 prsten kao
desktop - smanjuje se ukupna velicina mreze (--vg-size), ne broj stupaca. */
@media ( max-width: 480px ) {
	.kurs-vg-tile-title {
		font-size: 11px;
	}

	.kurs-vg-tile-cta {
		padding: 4px 10px;
		font-size: 10px;
	}
}

/* Reducirano kretanje - JS provjerava isto (preskace rotaciju), ovo je CSS
zastitna mreza za samu tranziciju uvecanja. */
@media ( prefers-reduced-motion: reduce ) {
	.kurs-vg-tile {
		transition: none;
	}
}