/**
 * Kurs Novosti Stog - stog vijesti s page-flip listanjem.
 * Vidi novostipageflipplan.md za odluke o izgledu/interakciji.
 * Kartica puni punu sirinu sekcije (omjer sirina:visina dolazi iz
 * Elementor kontrole "Omjer kartice" - vidi --kurs-novosti-aspect-w/-h).
 */

.kurs-novosti-stog {
	--kurs-novosti-bg: #fffaf3;
	--kurs-novosti-accent: #b5482f;
	--kurs-novosti-stack-offset: 6px;
	--kurs-novosti-stack-rotation: 2deg;
	--kurs-novosti-aspect-w: 16;
	--kurs-novosti-aspect-h: 9;

	display: flex;
	flex-direction: column;
	align-items: stretch;
	width: 100%;
	gap: 24px;
}

.kurs-novosti-heading {
	margin: 0;
}

/* Standardni "visually hidden" obrazac - dostupan citacima ekrana i
   tražilicama, izvan flip mehanizma, neovisan o JS stanju page-flip
   biblioteke (koja skriva neaktivne stranice preko display:none). */
.kurs-novosti-a11y-list.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.kurs-novosti-stack-wrap {
	position: relative;
	width: 100%;
	max-width: var(--kurs-novosti-book-max-width, none);
	aspect-ratio: calc(var(--kurs-novosti-aspect-w) * var(--kurs-novosti-pages, 1) / var(--kurs-novosti-aspect-h));
}

/* Dekorativni "listovi" iza knjige - cisti CSS, neovisan o page-flip
   renderiranju, pa nema skoka/snapa kad JS preuzme knjigu (vidi plan,
   napomena o seam-u izmedju idle izgleda i biblioteke). Namjerno malo
   uzi od knjige (calc s stack-offset) da ostave prostora za peek. */
.kurs-novosti-stack-decoy {
	position: absolute;
	left: 0;
	top: 0;
	width: calc(100% - var(--kurs-novosti-stack-offset) * 6);
	aspect-ratio: calc(var(--kurs-novosti-aspect-w) * var(--kurs-novosti-pages, 1) / var(--kurs-novosti-aspect-h));
	background: var(--kurs-novosti-bg);
	border-radius: 6px;
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
	transform-origin: 50% 50%;
}

.kurs-novosti-stack-decoy:nth-of-type(1) {
	transform: translate(calc(var(--kurs-novosti-stack-offset) * 2), calc(var(--kurs-novosti-stack-offset) * 2)) rotate(calc(var(--kurs-novosti-stack-rotation) * -1));
	opacity: 0.9;
}

.kurs-novosti-stack-decoy:nth-of-type(2) {
	transform: translate(calc(var(--kurs-novosti-stack-offset) * 4), calc(var(--kurs-novosti-stack-offset) * 4)) rotate(var(--kurs-novosti-stack-rotation));
	opacity: 0.75;
}

.kurs-novosti-stack-decoy:nth-of-type(3) {
	transform: translate(calc(var(--kurs-novosti-stack-offset) * 6), calc(var(--kurs-novosti-stack-offset) * 6)) rotate(calc(var(--kurs-novosti-stack-rotation) * -0.6));
	opacity: 0.6;
}

/* Sjena ispod cijelog stoga - pojacava dojam debljine (plan, tocka 3). */
.kurs-novosti-stack-wrap::after {
	content: "";
	position: absolute;
	left: 6%;
	right: 6%;
	bottom: -6px;
	height: 18px;
	background: rgba(0, 0, 0, 0.18);
	filter: blur(10px);
	border-radius: 50%;
	z-index: 0;
}

.kurs-novosti-book {
	position: absolute;
	left: 0;
	top: 0;
	width: calc(100% - var(--kurs-novosti-stack-offset) * 6);
	aspect-ratio: calc(var(--kurs-novosti-aspect-w) * var(--kurs-novosti-pages, 1) / var(--kurs-novosti-aspect-h));
	z-index: 1;
	background: var(--kurs-novosti-bg);
	border-radius: 6px;
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.2);
	transition: none;
	/* Dopusti pregledniku prirodan okomiti scroll stranice preko
	knjige (touch uredjaji) - vodoravne geste ostaju iskljucivo nase
	(JS), sprecava otimanje cijele stranice/scroll-a tijekom listanja. */
	touch-action: pan-y;
}

/* NAPOMENA: .kurs-novosti-page je element koji page-flip biblioteka
   preuzima izravno (loadFromHTML) i sama mu postavlja inline "display"
   stil (npr. display:block) kad prebacuje stranice - to bi nadjacalo
   nas display:flex da smo ga stavili ovdje (inline stilovi imaju
   prednost pred stylesheet pravilima). Zato je dvostupcani izgled
   (slika/tekst) prebacen na .kurs-novosti-page-inner, unutarnji div
   koji page-flip ne dira. */
.kurs-novosti-page {
	width: 100%;
	height: 100%;
	background: var(--kurs-novosti-bg);
	overflow: hidden;
}

.kurs-novosti-page-inner {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: row;
}

.kurs-novosti-page-media {
	width: 42%;
	height: 100%;
	overflow: hidden;
	flex-shrink: 0;
}

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

.kurs-novosti-page-body {
	padding: 22px 28px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 10px;
	flex: 1;
	min-height: 0;
	overflow-y: auto;
}

.kurs-novosti-page-date {
	font-size: 0.8em;
	opacity: 0.6;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.kurs-novosti-page-title {
	margin: 0;
	line-height: 1.25;
}

.kurs-novosti-page-excerpt {
	margin: 0;
	font-size: 0.92em;
	opacity: 0.85;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
}

.kurs-novosti-page-link {
	margin-top: auto;
	color: var(--kurs-novosti-accent);
	font-weight: 600;
	text-decoration: none;
	width: fit-content;
}

.kurs-novosti-page-link:hover {
	text-decoration: underline;
}

/* Hit-zone: donji desni kut, gdje page-flip ionako ocekuje drag/klik za
   pokretanje listanja. Sam element je nevidljiv - samo mijenja cursor i
   pokrece tooltip preko JS-a. */
.kurs-novosti-hitzone {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 30%;
	height: 40%;
	z-index: 3;
	/* Cisto geometrijska referenca za JS (getBoundingClientRect) - NE
	   smije hvatati pointer evente, jer bi blokirala page-flip biblioteku
	   koja svoje drag/klik listenere ocekuje izravno na knjizi ispod. */
	pointer-events: none;
}

/* Cijela knjiga je klikabilna (lijeva/desna polovica listaju nazad/naprijed
   - vidi initClickZones u JS-u), pa je pokazivac po defaultu "pointer". U
   donjem desnom kutu (hitzone) preuzima ga cursor-tooltip (is-hover-corner). */
.kurs-novosti-book {
	cursor: pointer;
}

.kurs-novosti-book.is-hover-corner {
	cursor: none;
}

.kurs-novosti-cursor-tooltip {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
	pointer-events: none;
	opacity: 0;
	transform: translate(-9999px, -9999px);
	background: #1c1c1c;
	color: #fff;
	padding: 6px 14px;
	border-radius: 999px;
	font-size: 0.82rem;
	white-space: nowrap;
	transition: opacity 0.2s ease;
}

.kurs-novosti-cursor-tooltip.is-visible {
	opacity: 1;
}

.kurs-novosti-cursor-tooltip::before {
	content: "✋";
	margin-right: 6px;
}

/* Touch: nema hovera, pa cursor-tooltip nikad ne bi bio viden - trajna
   mala oznaka umjesto njega (plan, otvoreno pitanje o mobilnom afford.). */
.kurs-novosti-touch-hint {
	display: none;
	position: absolute;
	right: 10px;
	bottom: 10px;
	z-index: 3;
	background: rgba(28, 28, 28, 0.85);
	color: #fff;
	padding: 5px 12px;
	border-radius: 999px;
	font-size: 0.78rem;
	pointer-events: none;
}

@media (hover: none) {
	.kurs-novosti-touch-hint {
		display: inline-flex;
	}

	.kurs-novosti-touch-hint.is-hidden {
		display: none;
	}
}

.kurs-novosti-touch-hint.kurs-novosti-peek {
	animation: kurs-novosti-peek-pulse 1.8s ease-in-out 1;
}

@keyframes kurs-novosti-peek-pulse {
	0%, 100% { transform: translateX(0); }
	50% { transform: translateX(-4px); }
}

/* Uzi ekrani - slika gore (kraca), tekst ispod, umjesto rame uz rame -
   inace bi tekst postao presuzak da bude citljiv. */
@media (max-width: 700px) {
	.kurs-novosti-page-inner {
		flex-direction: column;
	}

	.kurs-novosti-page-media {
		width: 100%;
		height: 45%;
	}

	.kurs-novosti-page-body {
		padding: 16px 18px 18px;
	}

	.kurs-novosti-page-excerpt {
		-webkit-line-clamp: 2;
	}
}

/* Dodirni uredjaji: tooltip koji prati pokazivac misa nema smisla -
   na dodir ostaje visjeti nasred ekrana (uz njega tu je vec
   .kurs-novosti-touch-hint, koji je za dodir i namijenjen). */
@media (hover: none) {
	.kurs-novosti-cursor-tooltip {
		display: none !important;
	}
}

/* =========================================================
   LISTANJE UNAZAD - vlastiti 3D pregib
   =========================================================
   Biblioteka (StPageFlip) u jednostranicnom nacinu (usePortrait) ne moze
   savinuti stranicu unazad: za svaki "raspon" ima tocno jednu stranicu, pa
   s lijeve strane hrpta nema sto savijati - mirno stanje crta kroz
   simpleDraw() koji stranici doda klasu "--simple". Zbog toga je prethodna
   kartica izgledala kao ravna ploca koja doleti slijeva.

   Ovdje se pregib crta sam: list je zglobno vezan uz LIJEVI rub (isti hrbat
   oko kojeg biblioteka savija naprijed) i rotira se od -180deg prema 0. Dok
   je okrenut od nas vidi se poledina (papir); pri kraju se pojavi sadrzaj
   prethodne kartice.
   ========================================================= */
.kurs-novosti-fold {
	position: absolute;
	left: 0;
	top: 0;
	width: calc(100% - var(--kurs-novosti-stack-offset) * 6);
	aspect-ratio: calc(var(--kurs-novosti-aspect-w) * var(--kurs-novosti-pages, 1) / var(--kurs-novosti-aspect-h));
	z-index: 60;
	pointer-events: none;
	perspective: 1800px;
	/*
	 * Rez na rub kartice. Bez njega bi se list dok je jos savinut vidio
	 * IZVAN kartice, u praznini pokraj nje - a listanje naprijed (bibliotecino)
	 * ostaje unutar okvira. Ovako oba smjera imaju isti otisak.
	 */
	overflow: hidden;
	border-radius: 6px;
}

.kurs-novosti-fold[hidden] {
	display: none !important;
}

.kurs-novosti-fold__leaf {
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
	transform-origin: left center;
	border-radius: 6px;
}

.kurs-novosti-fold__face {
	position: absolute;
	inset: 0;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	border-radius: 6px;
	overflow: hidden;
	background: var(--kurs-novosti-bg, #fff);
}

/* Sadrzaj prethodne kartice - vidi se kad je list okrenut prema nama. */
.kurs-novosti-fold__face--content {
	transform: rotateY(0deg);
}

/*
 * Klon kartice MORA biti prikovan na velicinu lica lista. U izvornom
 * kontekstu .kurs-novosti-page-inner sjedi u stranici kojoj biblioteka
 * postavlja visinu u pikselima; ovdje te visine nema, pa se postotne
 * visine unutra (media/body) racunaju prema sadrzaju i klon naraste na
 * tisuce piksela (izmjereno: 4270 px umjesto ~600). Isti obrazac je vec
 * jednom pogodio samu knjigu - vidi napomenu o mjerenju .stack-wrap u JS-u.
 */
.kurs-novosti-fold__face > * {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
}

/*
 * Poledina lista. Namjerno nije samo bijela ploha: papir gledan s druge
 * strane ima blagi preljev prema hrptu, inace pregib izgleda kao plastika.
 */
.kurs-novosti-fold__face--paper {
	transform: rotateY(180deg);
	background:
		linear-gradient(
			to right,
			rgba(0, 0, 0, 0.16) 0%,
			rgba(0, 0, 0, 0.05) 12%,
			rgba(0, 0, 0, 0) 38%
		),
		var(--kurs-novosti-bg, #f6f3ee);
}

/*
 * Odsjaj koji putuje po listu dok se savija - JS mu mijenja samo opacity.
 * Bez njega pregib izgleda ravno jer 3D rotacija sama po sebi ne mijenja
 * osvjetljenje plohe.
 */
.kurs-novosti-fold__gloss {
	position: absolute;
	inset: 0;
	border-radius: 6px;
	pointer-events: none;
	opacity: 0;
	background: linear-gradient(
		to right,
		rgba(255, 255, 255, 0.45) 0%,
		rgba(255, 255, 255, 0.08) 30%,
		rgba(0, 0, 0, 0.12) 78%,
		rgba(0, 0, 0, 0.28) 100%
	);
}

/* Sjena koju list baca na karticu ispod. */
.kurs-novosti-fold__shadow {
	position: absolute;
	inset: 0;
	border-radius: 6px;
	opacity: 0;
	background: linear-gradient(
		to right,
		rgba(0, 0, 0, 0.38) 0%,
		rgba(0, 0, 0, 0.14) 28%,
		rgba(0, 0, 0, 0) 62%
	);
}

/* =========================================================
   DVIJE ZONE ZA LISTANJE
   ========================================================= */
.kurs-novosti-hitzone--next {
	right: 0;
	left: auto;
}

.kurs-novosti-hitzone--prev {
	left: 0;
	right: auto;
}

/* Zona se gasi kad u tom smjeru nema vise kartica. */
.kurs-novosti-hitzone.is-off {
	display: none;
}

/* =========================================================
   TRAJNA OZNAKA U KUTU
   =========================================================
   Element se i dalje zove "touch-hint" zbog povijesti, ali VISE NIJE samo
   za dodirne uredaje: sada je to trajna oznaka na svim uredajima. Na
   racunalu stoji prigusena i sklanja se dok je aktivan cursor-tooltip; na
   dodiru je jedini signal jer hovera nema.
   ========================================================= */
.kurs-novosti-touch-hint {
	display: inline-flex;
	left: auto;
	opacity: var(--kurs-novosti-hint-idle, 0.45);
	transition: opacity 0.25s ease;
}

.kurs-novosti-touch-hint.is-left {
	left: 10px;
	right: auto;
}

.kurs-novosti-touch-hint.is-hidden {
	display: inline-flex;
	opacity: 0;
}

@media (hover: none) {
	.kurs-novosti-touch-hint {
		display: inline-flex;
		opacity: 1;
	}

	.kurs-novosti-touch-hint.is-hidden {
		opacity: 1;
	}
}

/* =========================================================
   PORUKA NA ZADNJOJ KARTICI
   ========================================================= */
.kurs-novosti-end {
	position: absolute;
	left: 50%;
	bottom: 8%;
	transform: translateX(-50%);
	z-index: 70;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 14px 22px;
	border-radius: 14px;
	background: rgba(28, 28, 28, 0.82);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: #fff;
	text-align: center;
	opacity: 0;
	transition: opacity 0.35s ease;
}

.kurs-novosti-end[hidden] {
	display: none !important;
}

.kurs-novosti-end.is-visible {
	opacity: 1;
}

.kurs-novosti-end__title {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.2;
}

.kurs-novosti-end__link {
	display: inline-block;
	padding: 7px 16px;
	border-radius: 999px;
	background: var(--kurs-novosti-accent, #b8452c);
	color: #fff;
	text-decoration: none;
	font-size: 0.82rem;
	white-space: nowrap;
}

.kurs-novosti-end__link:hover,
.kurs-novosti-end__link:focus-visible {
	filter: brightness(1.12);
}

/* =========================================================
   DVOSTRANI RASPON (prava knjiga)
   =========================================================
   Klasu .is-spread postavlja JS kad je knjiga sira od praga. Tada svaka
   stranica zauzima pola sirine, pa dvostupcani raspored (slika lijevo,
   tekst desno) vise ne stane - prelazi u stupac.
   ========================================================= */
.kurs-novosti-stog.is-spread .kurs-novosti-page-inner {
	flex-direction: column;
}

.kurs-novosti-stog.is-spread .kurs-novosti-page-media {
	width: 100%;
	height: 46%;
	flex-shrink: 0;
}

.kurs-novosti-stog.is-spread .kurs-novosti-page-body {
	padding: 18px 22px;
	justify-content: flex-start;
	flex: 1 1 auto;
}

.kurs-novosti-stog.is-spread .kurs-novosti-page-excerpt {
	-webkit-line-clamp: 3;
}

/*
 * Hrbat. Biblioteka crta pregib, ali ne i sjenu u knjizi kad ta miruje -
 * bez ovoga dvije stranice izgledaju kao dvije odvojene kartice umjesto
 * kao jedan otvoren list.
 */
.kurs-novosti-stog.is-spread .kurs-novosti-stack-wrap::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	width: 46px;
	transform: translateX(-50%);
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(
		to right,
		rgba(0, 0, 0, 0) 0%,
		rgba(0, 0, 0, 0.10) 42%,
		rgba(0, 0, 0, 0.16) 50%,
		rgba(0, 0, 0, 0.10) 58%,
		rgba(0, 0, 0, 0) 100%
	);
}

/*
 * U dvostranom nacinu listanje vodi biblioteka (i klik i povlacenje, u oba
 * smjera), pa nase zone sluze SAMO kao geometrija za oznake u kutu.
 * Pokazivac zato ostaje standardni umjesto skrivenog.
 */
.kurs-novosti-stog.is-spread .kurs-novosti-book.is-hover-corner {
	cursor: pointer;
}

/* Sloj za vlastiti pregib nije potreban kad hrbat stvarno postoji. */
.kurs-novosti-stog.is-spread .kurs-novosti-fold {
	display: none !important;
}

/*
 * OMJER SE ODNOSI NA JEDNU STRANICU, NE NA KNJIGU.
 *
 * Ranije je vrijednost znacila omjer cijele knjige, a to je znacilo dvije
 * razlicite stvari: na desktopu (dvostrani raspon) 16:9 je davalo stranice
 * od 8:9, a na mobitelu (jedna kartica) stvarnih 16:9 - siroko i nisko.
 * Ista postavka, dva izgleda.
 *
 * Sada varijabla --kurs-novosti-pages (1 ili 2) mnozi sirinu, pa omjer
 * stranice ostaje isti na svim uredajima. Postavlja je JS nakon mjerenja,
 * a PHP je unaprijed pogada medijskim upitom da nema skoka visine pri
 * ucitavanju.
 */