/* =========================================================
   Kurs Stacked Cards
   - Pin + scroll-scrub slaganje kartica (GSAP ScrollTrigger)
   - "Okretanje stranice" animacija sa uvezom (icon-repeat) na rubu
   - Otvaranje u lepezu (fan_open)
   - Gomilanje kartica - peek (stack_peek)
   - Otvaranje s otkrivanjem sadržaja (zip_reveal)
   - Ljepljivi prikaz s promjenom slike - wipe (sticky_wipe)
   - Pozadine kartica (boja/mesh/slika/video), uvećanje pri zastoju
     skrola i klikabilna cijela kartica - zajedničko svim stilovima.
   ========================================================= */

.kurs-stacked-cards {
	position: relative;
	width: 100%;
}

.kurs-stacked-cards [data-card-link] {
	cursor: pointer;
}

/* --- Kartica koja umjesto polja prikazuje spremljeni Elementor
   predlozak. Kartica je flex kutija s overflow: hidden, pa predlozak
   mora ispuniti sirinu i ne smije nametati vlastitu sirinu (min-width
   je zato 0 - inace bi dugi tekst u predlosku rastegnuo karticu).
   Sadrzaj visi od kartice se REZE, ne skrola: skrolabilno podrucje
   unutar prikvacene sekcije otimalo bi kotacic misa i pin bi izgledao
   pokvareno. --- */
.kurs-stack-card-template {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	min-height: 0;
	overflow: hidden;
}

/* Elementor kontejner unutar kartice ne smije nasljediti vlastitu
   min-height: 100vh ili slicno - kartica diktira visinu. */
.kurs-stack-card-template > .elementor,
.kurs-stack-card-template > .elementor > .e-con,
.kurs-stack-card-template > .elementor > .elementor-section {
	height: 100%;
	max-height: 100%;
}

/* --- Opcionalni naslov sekcije: renderira se UNUTAR <section
   class="kurs-stacked-cards">, iznad sadržaja. Zato što je unutar
   elementa koji GSAP pina, prikvači se zajedno s karticama i ne može se
   podvući pod fiksni header - za razliku od zasebnog Heading widgeta
   iznad widgeta, kojeg nitko ne pina. Boja/tipografija/razmak dolaze iz
   Elementor kontrola preko varijabli. --- */
.kurs-stacked-cards-title {
	margin: 0 0 var( --kurs-stack-title-gap, 24px );
	text-align: var( --kurs-stack-title-align, start );
	color: var( --kurs-stack-section-title-color, inherit );
}

/* Visina stoga: 100vh MINUS ono što je iznad njega već potrošeno
   (fiksni header, nadvišenje nagnutih kartica, naslov sekcije) - tu
   vrijednost JS upisuje u --kurs-stack-head. Bez oduzimanja bi na nižim
   ekranima dno prikvačenog sadržaja izlazilo ispod ruba ekrana. */
.kurs-stacked-cards-stack {
	position: relative;
	width: 100%;
	height: calc( 100vh - var( --kurs-stack-head, 0px ) );
	max-height: 720px;
	min-height: 420px;
	perspective: 1800px;
	overflow: visible;
}

.kurs-stack-card {
	position: absolute;
	inset: 0;
	display: flex;
	transform-style: preserve-3d;
	transform-origin: left center;
	backface-visibility: hidden;
	will-change: transform;
	background-color: var( --kurs-stack-card-bg, #ffffff );
	border-radius: var( --kurs-stack-card-radius, 18px );
	/* Obrub i sjena dolaze iz varijabli - globalno iz Style taba, a po
	   kartici iz inline stila koji render upisuje na <article>. */
	border: var( --kurs-stack-card-border-w, 0px ) solid var( --kurs-stack-card-border-c, transparent );
	box-shadow: var( --kurs-stack-card-shadow, 0 20px 50px rgba( 0, 0, 0, 0.12 ) );
	overflow: hidden;
}

/* Redoslijed slaganja - prva kartica (index 0) je na vrhu */
.kurs-stack-card {
	z-index: calc( 100 - var( --kurs-stack-index, 0 ) );
}

/* --- Video pozadina kartice (bg_type = video) - iza sadržaja, ispod
   spine/fold-shadow (koji imaju eksplicitan z-index) i ispod
   media/body (koji su flex-item pa se ponašaju kao pozicionirani, ali
   dolaze kasnije u dokumentu pa se crtaju preko videa). --- */
.kurs-stack-card-bg-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --- Raspored slika/tekst unutar kartice --- */
.kurs-stack-card-image-top {
	flex-direction: column;
}
.kurs-stack-card-image-bottom {
	flex-direction: column-reverse;
}
.kurs-stack-card-image-left {
	flex-direction: row;
}
.kurs-stack-card-image-right {
	flex-direction: row-reverse;
}

.kurs-stack-card-media {
	flex: 0 0 45%;
	overflow: hidden;
}
.kurs-stack-card-image-top .kurs-stack-card-media,
.kurs-stack-card-image-bottom .kurs-stack-card-media {
	flex-basis: 50%;
}

.kurs-stack-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.kurs-stack-card-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 14px;
	padding: 40px 48px;
}

.kurs-stack-card-icon {
	font-size: 28px;
	color: var( --kurs-stack-accent-color, #b5482f );
}

.kurs-stack-card-title {
	font-family: var( --kurs-font-family-heading, inherit );
	font-size: var( --kurs-font-heading-3, 1.6rem );
	margin: 0;
	color: var( --kurs-stack-title-color, #1c1c1c );
}

.kurs-stack-card-text {
	font-family: var( --kurs-font-family-body, inherit );
	font-size: var( --kurs-font-text-medium, 1rem );
	color: var( --kurs-stack-text-color, #4a4a4a );
	line-height: 1.6;
}

.kurs-stack-card-button {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 22px;
	border-radius: 999px;
	background-color: var( --kurs-stack-accent-color, #b5482f );
	color: #ffffff;
	text-decoration: none;
	font-weight: 600;
	transition: opacity 0.2s ease;
	position: relative;
	z-index: 2;
}
.kurs-stack-card-button:hover {
	opacity: 0.85;
}

/* --- Uvez na lijevom rubu kartice (icon-repeat, umjesto CSS gradient prstena) ---
   Jedna ikona (Elementor ICONS kontrola - biblioteka ili custom SVG upload) se
   ponavlja niz rub preko flex justify-content:space-between, boja preko
   currentColor tako da spine_color kontrola radi bez posebne logike po ikoni. */
.kurs-stack-card-spine {
	position: absolute;
	top: 14px;
	bottom: 14px;
	left: -11px;
	width: 22px;
	z-index: 5;
	pointer-events: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	color: var( --kurs-stack-spine-color, #d9d2c2 );
	filter: drop-shadow( 1px 1px 1px rgba( 0, 0, 0, 0.15 ) );
}
.kurs-stack-card-spine-icon {
	display: block;
	font-size: 14px;
	line-height: 1;
}
.kurs-stack-card-spine-icon svg {
	display: block;
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* --- Sjena/preklop koji daje dojam mekog savijanja stranice (pin_flip) --- */
.kurs-stack-card-fold-shadow {
	position: absolute;
	inset: 0;
	z-index: 6;
	pointer-events: none;
	opacity: 0;
	background: linear-gradient(
		to right,
		rgba( 0, 0, 0, 0.4 ) 0%,
		rgba( 0, 0, 0, 0.12 ) 35%,
		rgba( 0, 0, 0, 0 ) 65%
	);
}

/* Neravni, blago valoviti rub kartice umjesto savršeno ravne linije -
   suptilan dojam papira, primjenjuje se preko maske na lijevom rubu. */
.kurs-stack-card {
	mask-image: linear-gradient( to right, black calc( 100% - 1px ), black );
	-webkit-mask-image: linear-gradient( to right, black calc( 100% - 1px ), black );
}

/* --- Responsive: mobitel - jednostavniji, kraći pin --- */
@media ( max-width: 767px ) {
	.kurs-stacked-cards-stack {
		height: 88vh;
		min-height: 380px;
	}
	.kurs-stack-card-body {
		padding: 24px 24px;
		gap: 10px;
	}
	.kurs-stack-card-title {
		font-size: 1.25rem;
	}
	.kurs-stack-card-image-left,
	.kurs-stack-card-image-right {
		flex-direction: column;
	}
}

/* --- Kurs Single Post: statički prikaz jedne kartice (bez pina/animacije) --- */
.kurs-stacked-cards-stack-static {
	height: auto;
	max-height: none;
	min-height: 0;
	perspective: none;
}
.kurs-stacked-cards-stack-static .kurs-stack-card {
	position: relative;
	inset: auto;
}
.kurs-stacked-cards-stack-static .kurs-stack-card-fold-shadow {
	display: none;
}
@media ( max-width: 767px ) {
	.kurs-stacked-cards-stack-static.kurs-stacked-cards-stack {
		height: auto;
		min-height: 0;
	}
}

/* --- Naizmjenično uklizavanje (fan_scroll): normalan tok umjesto pina, kartice se
   nižu jedna ispod druge s razmakom, bez uveza/preklopa. --- */
.kurs-stacked-cards-stack-fan {
	height: auto;
	max-height: none;
	min-height: 0;
	perspective: none;
	display: flex;
	flex-direction: column;
	gap: 32px;
}
.kurs-stacked-cards-stack-fan .kurs-stack-card {
	position: relative;
	inset: auto;
}
.kurs-stacked-cards-stack-fan .kurs-stack-card-spine,
.kurs-stacked-cards-stack-fan .kurs-stack-card-fold-shadow {
	display: none;
}

/* --- Otvaranje u lepezu (fan_open): kartice kreću iz stisnutog stoga u
   centru sekcije, portret format, fiksna px veličina centrirana preko
   margina (radi ispravno zajedno s GSAP x/y/rotate transformom koji se
   dodaje preko ovog centriranja, ne umjesto njega). --- */
.kurs-stacked-cards-stack-fan-open {
	height: calc( 100vh - var( --kurs-stack-head, 0px ) );
	max-height: 720px;
	min-height: 420px;
	perspective: none;
}
.kurs-stacked-cards-stack-fan-open .kurs-stack-card {
	position: absolute;
	inset: auto;
	top: 50%;
	left: 50%;
	width: var( --kurs-stack-fan-card-width, 260px );
	height: var( --kurs-stack-fan-card-height, 360px );
	margin-top: calc( var( --kurs-stack-fan-card-height, 360px ) / -2 );
	margin-left: calc( var( --kurs-stack-fan-card-width, 260px ) / -2 );
	flex-direction: column;
}
.kurs-stacked-cards-stack-fan-open .kurs-stack-card-fold-shadow {
	display: none;
}
@media ( max-width: 767px ) {
	.kurs-stacked-cards-stack-fan-open {
		height: calc( 80vh - var( --kurs-stack-head, 0px ) );
		min-height: 380px;
	}
	.kurs-stacked-cards-stack-fan-open .kurs-stack-card {
		width: var( --kurs-stack-fan-card-width, 200px );
		height: var( --kurs-stack-fan-card-height, 280px );
		margin-top: calc( var( --kurs-stack-fan-card-height, 280px ) / -2 );
		margin-left: calc( var( --kurs-stack-fan-card-width, 200px ) / -2 );
	}
}

/* --- Gomilanje kartica (stack_peek): svaka sljedeća kartica ulazi
   odozdo (JS: y od 100% do konačnog malog pomaka) i legne na
   prethodnu. Novije (veći index) moraju biti IZNAD starijih - obrnuto
   od zadanog z-index redoslijeda iznad (koji je za pin_flip: prva
   kartica na vrhu). Fold-shadow (savijanje stranice) ovdje nema smisla,
   umjesto njega blaga rotacija po kartici iz PHP-a (--kurs-stack-peek-
   rotation), koju JS preuzima i kombinira sa svojim y transformom. --- */
.kurs-stacked-cards-stack-peek .kurs-stack-card {
	z-index: calc( 1 + var( --kurs-stack-index, 0 ) );
	transform: rotate( var( --kurs-stack-peek-rotation, 0deg ) );
}
.kurs-stacked-cards-stack-peek .kurs-stack-card-fold-shadow {
	display: none;
}

/* --- Otvaranje s otkrivanjem sadržaja (zip_reveal): tekst/slika/video
   (.kurs-zip-text) prikvačen (pin) na vrhu sekcije cijelo vrijeme.
   Ispod, dva retka malih pločica (.kurs-zip-tile) koje JS prvo fade-in-a
   na mjesto, pa potom simetrično razmiče od sredine svakog retka
   ("prasak") uz odlazak prema gore - vidi initZipReveal() u JS-u. --- */
.kurs-stacked-cards-zip {
	position: relative;
	height: 100vh;
	max-height: 820px;
	min-height: 480px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 28px;
	padding-top: 44px;
	overflow: hidden;
}
.kurs-zip-text {
	flex: 0 0 auto;
	max-width: 800px;
	width: 100%;
	text-align: center;
	padding: 0 24px;
	font-family: var( --kurs-font-family-body, inherit );
	color: var( --kurs-stack-text-color, #2a2a2a );
}
.kurs-zip-text img,
.kurs-zip-text video {
	max-width: 100%;
	border-radius: var( --kurs-stack-card-radius, 18px );
}

.kurs-zip-tiles {
	flex: 1 1 auto;
	width: 70%;
	max-width: 1100px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 18px;
}
.kurs-zip-row {
	display: flex;
	justify-content: center;
	align-items: stretch;
	gap: 18px;
}
.kurs-zip-tile {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	aspect-ratio: 16 / 10;
	border-radius: var( --kurs-stack-card-radius, 14px );
	overflow: hidden;
	background-color: var( --kurs-stack-card-bg, #e7e2d6 );
	background-size: cover;
	background-position: center;
	box-shadow: 0 10px 30px rgba( 0, 0, 0, 0.18 );
	will-change: transform, opacity;
}
.kurs-zip-tile-meta {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 10px 14px;
	background: linear-gradient( to top, rgba( 0, 0, 0, 0.72 ), rgba( 0, 0, 0, 0 ) );
	color: #ffffff;
}
.kurs-zip-tile-date {
	display: block;
	font-size: 0.72rem;
	opacity: 0.85;
	margin-bottom: 2px;
}
.kurs-zip-tile-title {
	margin: 0;
	font-family: var( --kurs-font-family-heading, inherit );
	font-size: 0.92rem;
	font-weight: 600;
	line-height: 1.3;
}

@media ( max-width: 767px ) {
	.kurs-stacked-cards-zip {
		height: 88vh;
		min-height: 460px;
		gap: 16px;
		padding-top: 28px;
	}
	.kurs-zip-tiles {
		gap: 8px;
	}
	.kurs-zip-row {
		gap: 8px;
	}
	.kurs-zip-tile-meta {
		padding: 6px 8px;
	}
	.kurs-zip-tile-date {
		display: none;
	}
	.kurs-zip-tile-title {
		font-size: 0.7rem;
	}
}

/* --- Ljepljivi prikaz s promjenom slike (sticky_wipe): arhitekturno
   drukčije od ostalih stilova - BEZ pina. Lijevo normalan tok teksta
   po kartici (nema JS animacije - izlazi/ulazi prirodnim skrolom
   stranice), desno "zalijepljena" (position: sticky) kutija sa
   slikama koje JS otkriva "wipe" efektom (clip-path scrub). Pozadina
   (.kurs-stack-sticky-bg) mijenja boju/sliku diskretno po aktivnoj
   kartici. --- */
.kurs-stacked-cards-sticky-wipe {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: start;
	padding: 10px var( --kurs-wipe-pad, 5vw );
}

.kurs-stack-sticky-bg {
	position: absolute;
	inset: -40px calc( -1 * var( --kurs-wipe-bleed, 5vw ) );
	z-index: -1;
	border-radius: 24px;
	background-color: var( --kurs-stack-card-bg, transparent );
	transition: background-color 0.6s ease;
}

.kurs-stack-sticky-left {
	display: flex;
	flex-direction: column;
	gap: 55vh;
}
.kurs-stack-sticky-item {
	padding: 20px 0;
}
.kurs-stack-sticky-item:first-child {
	padding-top: 0;
}
.kurs-stack-sticky-icon {
	font-size: 26px;
	color: var( --kurs-stack-accent-color, #b5482f );
	margin-bottom: 14px;
}
.kurs-stack-sticky-title {
	font-family: var( --kurs-font-family-heading, inherit );
	font-size: var( --kurs-font-heading-3, 1.6rem );
	margin: 0 0 14px;
	color: var( --kurs-stack-title-color, #1c1c1c );
}
.kurs-stack-sticky-text {
	font-family: var( --kurs-font-family-body, inherit );
	line-height: 1.7;
	color: var( --kurs-stack-text-color, #4a4a4a );
	margin-bottom: 18px;
}
.kurs-stack-sticky-button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 22px;
	border-radius: 999px;
	background-color: var( --kurs-stack-accent-color, #b5482f );
	color: #ffffff;
	text-decoration: none;
	font-weight: 600;
	transition: opacity 0.2s ease;
	position: relative;
	z-index: 2;
}
.kurs-stack-sticky-button:hover {
	opacity: 0.85;
}

.kurs-stack-sticky-right {
	/* POZORNICA, ne fotografija: visoka je tocno koliko i vidljivi dio
	   ekrana ISPOD fiksnog headera (--kurs-header-offset upisuje JS iz
	   getHeaderOffset(), ista mjera koju vec koriste pin stilovi).
	   Dvije posljedice, obje namjerne:
	   1) zalijepljena fotografija fizicki ne moze zavrsiti pod headerom;
	   2) lijepljenje traje tocno "visina lijevog stupca - jedan ekran",
	      sto je isti raspon na koji je vezan master timeline u JS-u
	      (initStickyWipe) - animacija zavrsi tocno u trenutku
	      odljepljivanja, ne prije njega. */
	position: sticky;
	top: var( --kurs-header-offset, 0px );
	height: calc( 100vh - var( --kurs-header-offset, 0px ) );
}
.kurs-stack-sticky-photo-box {
	/* Fotografija ima vlastitu visinu (kontrola "Visina fotografije" ->
	   --kurs-photo-height), a "Okomiti polozaj fotografije"
	   (--kurs-sticky-anchor: 0 = uz header, 50 = sredina, 100 = dno)
	   pomice je unutar pozornice obicnom marginom - bez transform trika
	   koji se prije primjenjivao i dok kutija jos nije bila zalijepljena.
	   OBRUB je OVDJE, na stabilnoj kutiji, a NE na fotografijama koje se
	   klipaju: clip-path rezao bi i obrub, pa se na spoju dviju slika
	   gubila debljina. Boju obruba po aktivnoj kartici upisuje JS. */
	position: relative;
	width: 100%;
	height: var( --kurs-photo-height, 55vh );
	max-height: 100%;
	margin-top: max(
		0px,
		calc(
			( 100vh - var( --kurs-header-offset, 0px ) - var( --kurs-photo-height, 55vh ) ) *
			var( --kurs-sticky-anchor, 50 ) / 100
		)
	);
	box-sizing: border-box;
	border-style: solid;
	border-width: 0;
	border-color: var( --kurs-frame-color, transparent );
	transition: border-color 0.6s ease;
	border-radius: var( --kurs-stack-card-radius, 24px );
	overflow: hidden;
	box-shadow: 0 20px 50px rgba( 0, 0, 0, 0.15 );
}
.kurs-stack-sticky-photo {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	box-sizing: border-box;
}

/* Slika po kartici je SAMO za mobilni/tablet raspored - na desktopu su
   fotografije u pozornici, pa se ovaj element ne prikazuje (i preglednik
   mu ne ucitava pozadinsku sliku). */
.kurs-stack-sticky-photo-mobile {
	display: none;
}

/* --- Mobitel i tablet (<= 1024px, isti prag kao Hero Intro): sekcija
   NIJE ljepljiva nego obicna okomita lista - po kartici slika iznad
   teksta. Pozornica, wipe i scrim se gase, a JS (initStickyWipe) na ovoj
   sirini uopce ne inicijalizira animaciju.
   Prije je ovdje bila "sticky preko cijelog ekrana + bijeli scrim
   opacity 0.93 preko cijele kartice", zbog cega se fotografija iza
   teksta uopce nije vidjela - sekcija je na mobitelu bila ~3400px
   praznog bijelog hodnika. --- */
@media (max-width: 1024px) {
	.kurs-stacked-cards-sticky-wipe {
		display: block;
		position: relative;
		padding: 0;
	}

	.kurs-stack-sticky-right,
	.kurs-stack-sticky-bg {
		display: none !important;
	}

	.kurs-stack-sticky-left {
		gap: 56px;
	}

	.kurs-stack-sticky-item {
		position: relative;
		min-height: 0;
		display: block;
		padding: 0;
	}

	.kurs-stack-sticky-item::before {
		display: none;
	}

	.kurs-stack-sticky-photo-mobile {
		display: block;
		width: 100%;
		aspect-ratio: 4 / 3;
		margin-bottom: 20px;
		background-size: cover;
		background-position: center;
		border-radius: 16px;
		border-style: solid;
		border-width: 8px;
		border-color: var( --kurs-frame-color, transparent );
		box-sizing: border-box;
		box-shadow: 0 12px 32px rgba( 0, 0, 0, 0.15 );
	}
}