/* FULL MOON SAILING SPECTACLE - zajednicki stil za sve stranice */

:root {
	--noc: #061c33;
	--noc-2: #0a2540;
	--noc-3: #0e314f;
	--mjesecina: #01b1ec;
	--mjesecina-jaka: #5fd6fb;
	--zlato: #c9a24b;
	--zlato-sjaj: #e8cd8a;
	--srebro: #c3d7e6;
	--tekst: #eef4f9;
	--tekst-prigusen: #9fb3c6;
	--linija: rgba(1, 177, 236, 0.22);
	--naslovni-font: "Alegreya Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--tekst-font: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--sirina-sadrzaja: 1560px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--noc);
	color: var(--tekst);
	font-family: var(--tekst-font);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

.sadrzaj {
	max-width: var(--sirina-sadrzaja);
	margin: 0 auto;
	padding: 0 24px;
}

h1, h2, h3, h4 {
	font-family: var(--naslovni-font);
	font-weight: 600;
	color: #ffffff;
	margin: 0 0 0.5em;
	letter-spacing: -0.01em;
}

.hero h1 {
	text-transform: uppercase;
	color: #ffffff;
}
.hero h1 em {
	font-style: normal;
	color: var(--mjesecina);
}

h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); line-height: 1.05; }
h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); line-height: 1.15; }
h3 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); }

p { margin: 0 0 1em; color: var(--tekst); }

.podnaslov-oznaka {
	display: inline-block;
	font-family: var(--tekst-font);
	font-size: 0.78rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--mjesecina);
	border-bottom: 1px solid var(--linija);
	padding-bottom: 6px;
	margin-bottom: 18px;
}

.gumb {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 30px;
	border-radius: 999px;
	font-family: var(--tekst-font);
	font-weight: 600;
	font-size: 0.95rem;
	letter-spacing: 0.02em;
	transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
	border: 1px solid transparent;
}
.gumb--puni {
	background: linear-gradient(135deg, var(--mjesecina-jaka), var(--mjesecina));
	color: #04121f;
	box-shadow: 0 10px 30px -10px rgba(1, 177, 236, 0.5);
}
.gumb--puni:hover { transform: translateY(-2px); box-shadow: 0 14px 34px -8px rgba(1, 177, 236, 0.65); }
.gumb--obris {
	border-color: var(--linija);
	color: var(--tekst);
}
.gumb--obris:hover { border-color: var(--mjesecina); color: var(--mjesecina-jaka); }

.gumb--tekst {
	padding: 0;
	border: none;
	border-radius: 0;
	background: none;
	color: var(--mjesecina-jaka);
	gap: 8px;
}
.gumb--tekst::after {
	content: "→";
	transition: transform 0.25s ease;
}
.gumb--tekst span {
	background-image: linear-gradient(var(--mjesecina-jaka), var(--mjesecina-jaka));
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 0% 1px;
	transition: background-size 0.25s ease;
}
.gumb--tekst:hover span { background-size: 100% 1px; }
.gumb--tekst:hover::after { transform: translateX(4px); }
.gumb--tekst:hover { transform: none; box-shadow: none; }
.gumb--tekst--natrag::after { content: none; }
.gumb--tekst--natrag::before {
	content: "←";
	transition: transform 0.25s ease;
}
.gumb--tekst--natrag:hover::before { transform: translateX(-4px); }
.gumb--tekst--natrag:hover::after { transform: none; }

/* ---------- ZAGLAVLJE ---------- */

.zaglavlje {
	position: sticky;
	top: 0;
	z-index: 50;
	background: #04101d;
	border-bottom: 1px solid var(--linija);
}

.zaglavlje .sadrzaj {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 84px;
}

.marka {
	display: flex;
	align-items: center;
	gap: 14px;
}
.marka__slika { height: 48px; width: auto; display: block; }
.marka__tekst {
	font-family: var(--naslovni-font);
	font-size: 1.25rem;
	letter-spacing: 0.02em;
	color: var(--tekst);
	display: flex;
	flex-direction: column;
	line-height: 1.1;
	text-transform: uppercase;
}
.marka__tekst span { color: var(--mjesecina); }
.marka__tekst small {
	font-family: var(--tekst-font);
	font-size: 0.6rem;
	letter-spacing: 0.3em;
	color: var(--tekst-prigusen);
	text-transform: uppercase;
	margin-top: 4px;
}

.podnozje__organizira {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
	margin-top: 16px;
}
.podnozje__organizira img { height: 30px; width: auto; }
.podnozje__organizira span { font-size: 0.78rem; color: var(--tekst-prigusen); }

.izbornik {
	display: flex;
	align-items: center;
	gap: 36px;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 0.92rem;
	letter-spacing: 0.03em;
}
.izbornik a {
	position: relative;
	padding: 6px 0;
	color: var(--srebro);
}
.izbornik a:hover, .izbornik a.aktivno { color: var(--mjesecina-jaka); }
.izbornik a.aktivno::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: -3px;
	height: 1px;
	background: var(--mjesecina);
}

.hamburger {
	display: none;
	flex-direction: column;
	gap: 5px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 8px;
}
.hamburger span { width: 26px; height: 2px; background: var(--mjesecina-jaka); display: block; }

.izbornik__jezici { list-style: none; }
@media (min-width: 881px) {
	.izbornik__jezici { margin-left: auto; }
}
.lang-switch { display: flex; align-items: center; gap: 2px; }
.lang-btn {
	appearance: none;
	border: none;
	background: transparent;
	color: var(--tekst-prigusen);
	font-family: var(--tekst-font);
	font-size: 0.76rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	padding: 5px 9px;
	border-radius: 999px;
	cursor: pointer;
	transition: background .2s ease, color .2s ease;
}
.lang-btn:hover { color: var(--tekst); }
.lang-btn.is-active { background: var(--mjesecina); color: var(--noc); }

@media (max-width: 880px) {
	.izbornik {
		position: fixed;
		top: 84px;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		max-width: 100vw;
		box-sizing: border-box;
		z-index: 60;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		gap: 0;
		background: var(--noc);
		padding: 10px 24px 24px;
		transform: translateX(100%);
		transition: transform 0.3s ease;
		border-top: 1px solid var(--linija);
		overflow-x: hidden;
	}
	.izbornik.otvoren { transform: translateX(0); }
	.izbornik li { width: 100%; border-bottom: 1px solid var(--linija); }
	.izbornik a { display: block; padding: 16px 0; }
	.hamburger { display: flex; }
	.izbornik__jezici { border-bottom: none; padding: 20px 0 6px; }
	.izbornik__jezici .lang-switch { justify-content: center; gap: 10px; }
	.izbornik__jezici .lang-btn { font-size: 0.92rem; padding: 10px 18px; }
}

/* ---------- HERO (naslovnica) ---------- */

.hero {
	position: relative;
	min-height: 92vh;
	display: flex;
	align-items: center;
	overflow: hidden;
	background:
		radial-gradient(ellipse at 20% 120%, rgba(24, 44, 68, 0.9), transparent 60%),
		linear-gradient(180deg, #060d17 0%, #0b1726 55%, #0f2135 100%);
}

.hero__slike {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.hero__slika {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0;
	animation: hero-izmjena-slika 36s infinite;
}

.hero__slika:nth-child(1) { background-image: url("../img/sadrzaj/regata-shining-arena.jpg"); animation-delay: 0s; }
.hero__slika:nth-child(2) { background-image: url("../img/sadrzaj/maxi-shining-sunset.jpg"); animation-delay: -6s; }
.hero__slika:nth-child(3) { background-image: url("../img/sadrzaj/night-sprint-pula.jpg"); animation-delay: -12s; }
.hero__slika:nth-child(4) { background-image: url("../img/sadrzaj/daleka-obala-koncert.jpg"); animation-delay: -18s; }
.hero__slika:nth-child(5) { background-image: url("../img/sadrzaj/regata-zalazak-aria.jpg"); animation-delay: -24s; }
/* Pula Arena u suton - prepoznatljiv simbol grada, da se PULA/ISTRA odmah vizualno
   prepozna i medju regatnim kadrovima, ne samo iz teksta iznad naslova. */
.hero__slika:nth-child(6) { background-image: url("../img/sadrzaj/pula-arena-suton.jpg"); animation-delay: -30s; }

@keyframes hero-izmjena-slika {
	0%, 100% { opacity: 0; }
	3% { opacity: 1; }
	20% { opacity: 1; }
	23% { opacity: 0; }
}

.hero__tama {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(100deg, rgba(6,16,28,0.88) 0%, rgba(6,16,28,0.62) 42%, rgba(6,16,28,0.38) 68%, rgba(6,16,28,0.55) 100%),
		linear-gradient(180deg, transparent 0%, transparent 55%, rgba(6,16,28,0.75) 85%, var(--noc) 100%);
}

.hero__mjesec {
	position: absolute;
	z-index: 1;
	top: 10%;
	right: 6%;
	width: min(34vw, 380px);
	height: min(34vw, 380px);
	background-image: url("../img/mjesec.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	filter: drop-shadow(0 0 90px rgba(1, 177, 236, 0.35));
	animation: mjesec-disanje 9s ease-in-out infinite;
	transform-origin: center;
	mix-blend-mode: screen;
}

@keyframes mjesec-disanje {
	0%, 100% { transform: scale(1); filter: drop-shadow(0 0 90px rgba(1, 177, 236, 0.35)); }
	50% { transform: scale(1.06); filter: drop-shadow(0 0 120px rgba(1, 177, 236, 0.5)); }
}

@media (prefers-reduced-motion: reduce) {
	.hero__mjesec { animation: none; }
	.hero__slika { animation: none; opacity: 0; }
	.hero__slika:nth-child(1) { opacity: 1; }
}

/* Na uskim zaslonima naslov (h1) zauzima skoro cijelu širinu .hero__sadrzaj, pa
   mjesec u izvornoj poziciji upada preko zadnjih slova naslova (svijetli sjaj
   preko svijetlog teksta). Odmaknut gore-desno i smanjen, ostaje kao sjaj u
   kutu bez kolizije s tekstom. */
@media (max-width: 640px) {
	.hero__mjesec {
		top: -6%;
		right: -12%;
		width: min(48vw, 210px);
		height: min(48vw, 210px);
	}
}

.hero__sadrzaj { position: relative; z-index: 2; width: 100%; }
.hero__sadrzaj p.vodeci {
	max-width: 640px;
	font-size: 1.15rem;
	color: var(--srebro);
}
.hero__kategorije {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 0;
	margin: 36px 0 0;
	padding: 20px 0;
	list-style: none;
	border-top: 1px solid var(--linija);
	border-bottom: 1px solid var(--linija);
}
.hero__kategorije li {
	font-family: var(--naslovni-font);
	font-size: 1.05rem;
	font-weight: 500;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--mjesecina-jaka);
	padding: 0 18px;
	border-left: 1px solid var(--linija);
	line-height: 1.3;
}
.hero__kategorije li:first-child { padding-left: 0; border-left: none; }
@media (max-width: 880px) {
	.hero__kategorije { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 0; }
	.hero__kategorije li:nth-child(3n+1) { padding-left: 0; border-left: none; }
	.hero__kategorije li:not(:nth-child(3n+1)) { border-left: 1px solid var(--linija); }
}
@media (max-width: 520px) {
	.hero__kategorije { grid-template-columns: repeat(2, minmax(0, 1fr)); font-size: 0.92rem; }
	.hero__kategorije li:nth-child(odd) { padding-left: 0; border-left: none; }
	.hero__kategorije li:nth-child(even) { border-left: 1px solid var(--linija); }
}

.hero__gumbi { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 28px; }

.hero__brojke {
	position: relative;
	z-index: 2;
	margin-top: 64px;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 24px;
	border-top: 1px solid var(--linija);
	padding-top: 28px;
}
.hero__brojke .broj { font-family: var(--naslovni-font); font-size: 2.1rem; color: var(--mjesecina-jaka); }
.hero__brojke .oznaka { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tekst-prigusen); }

@media (max-width: 760px) {
	.hero__brojke { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- OPCI ODJELJCI ---------- */

.odjeljak { padding: 110px 0; }
.odjeljak--usko { padding: 80px 0; }
.odjeljak--naizmjenicno:nth-of-type(odd) { background: var(--noc-2); }

.odjeljak__uvod { max-width: 720px; margin-bottom: 56px; }
.odjeljak__uvod.sredina { margin-left: auto; margin-right: auto; text-align: center; }

.mreza-stupaca {
	display: grid;
	gap: 32px;
}
.mreza-stupaca--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mreza-stupaca--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mreza-stupaca--1 { grid-template-columns: 1fr; max-width: 560px; }
.mreza-stupaca--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 880px) {
	.mreza-stupaca--3, .mreza-stupaca--2 { grid-template-columns: 1fr; }
	.mreza-stupaca--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
	.mreza-stupaca--4 { grid-template-columns: 1fr; }
}

.kartica {
	background: var(--noc-3);
	border: 1px solid var(--linija);
	border-radius: 18px;
	padding: 36px 32px;
	transition: transform 0.25s ease, border-color 0.25s ease;
}
.kartica:hover { transform: translateY(-4px); border-color: var(--mjesecina); }
.kartica__oznaka {
	display: inline-block;
	font-size: 0.7rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--mjesecina);
	margin-bottom: 14px;
}
.kartica p:last-child { margin-bottom: 0; }

.kartica--slika { padding: 0; overflow: hidden; border-radius: 12px; }
.kartica--slika img { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; }
.kartica--slika .kartica__tijelo { padding: 28px 28px 32px; }

.kartica--istaknuta { margin-bottom: 32px; }
.kartica--istaknuta img { aspect-ratio: 21/9; }
.kartica--istaknuta .kartica__tijelo { padding: 32px 36px 40px; }
.kartica--istaknuta h3 { font-size: clamp(1.9rem, 4vw, 2.8rem); }
@media (max-width: 760px) {
	.kartica--istaknuta img { aspect-ratio: 16/10; }
}

/* ---------- ULAZI ZA PUBLIKU (naslovnica, odmah ispod herosa) ---------- */

.mreza-ulazi {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
}
.ulaz {
	display: flex;
	flex-direction: column;
	gap: 10px;
	background: var(--noc-3);
	border: 1px solid var(--linija);
	border-radius: 18px;
	padding: 30px 26px;
	transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.ulaz:hover { transform: translateY(-5px); border-color: var(--mjesecina); background: var(--noc-2); }
.ulaz__oznaka {
	font-size: 0.7rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--mjesecina);
}
.ulaz h3 { font-size: 1.25rem; margin: 0; }
.ulaz p { font-size: 0.9rem; color: var(--srebro); margin: 0; flex: 1; }
.ulaz__veza {
	margin-top: 6px;
	font-family: var(--naslovni-font);
	font-weight: 600;
	font-size: 0.85rem;
	letter-spacing: 0.03em;
	color: var(--tekst);
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.ulaz:hover .ulaz__veza { color: var(--mjesecina-jaka); }
.ulaz__veza svg { transition: transform 0.25s ease; }
.ulaz:hover .ulaz__veza svg { transform: translate(3px, -3px); }

@media (max-width: 880px) { .mreza-ulazi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .mreza-ulazi { grid-template-columns: 1fr; } }

/* ---------- BENTO GALERIJA (naslovnica) ---------- */

.bento-galerija {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-auto-rows: 150px;
	gap: 14px;
}
.bento-galerija .velika { grid-column: span 2; grid-row: span 2; }
.bento-galerija .celija {
	position: relative;
	border-radius: 10px;
	overflow: hidden;
	display: block;
}
.bento-galerija .celija img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s ease;
}
.bento-galerija .celija:hover img { transform: scale(1.06); }
.bento-galerija .celija::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 55%, rgba(2, 10, 20, 0.8) 100%);
	opacity: 0;
	transition: opacity 0.3s ease;
}
.bento-galerija .celija:hover::after { opacity: 1; }
.bento-galerija .celija__oznaka {
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 14px;
	z-index: 1;
	color: #fff;
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 0.3s ease, transform 0.3s ease;
}
.bento-galerija .celija:hover .celija__oznaka { opacity: 1; transform: translateY(0); }

@media (max-width: 760px) {
	.bento-galerija { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 160px; }
	.bento-galerija .velika { grid-column: span 2; grid-row: span 2; }
}

/* ---------- CINEMATICNI ODJELJAK (puna fotografija s porukom) ---------- */

.cinematican {
	position: relative;
	min-height: 64vh;
	display: flex;
	align-items: flex-end;
	padding: 70px 0;
	overflow: hidden;
}
.cinematican img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}
.cinematican::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(6, 23, 38, 0.45) 0%, rgba(6, 23, 38, 0.6) 45%, rgba(6, 23, 38, 0.95) 100%);
	z-index: 1;
}
/* .cinematican je flex (zbog align-items:flex-end, da sadrzaj sjedne uz dno), a .sadrzaj je
   njegovo jedino dijete bez sirine - flex bi ga inace stisnuo na sirinu sadrzaja i margin:auto
   bi ga centrirao, pa bi naslov ispao na sredinu umjesto uz lijevi rub kao u ostalim
   poglavljima. Sirina 100% to ponisti: .sadrzaj se onda ponasa kao u obicnom poglavlju -
   njegov max-width+margin:auto ogranicava i centrira CIJELI stupac na stranici, a naslov
   (tekst poravnan lijevo) pocinje tocno na istom mjestu kao u poglavljima ispod. */
.cinematican .sadrzaj { position: relative; z-index: 2; width: 100%; }
.cinematican h2 { max-width: 760px; font-size: clamp(2.3rem, 5vw, 3.4rem); }
.cinematican p.vodeci { max-width: 620px; font-size: 1.2rem; }

.cinematican--naslovna { min-height: 86vh; padding: 120px 0 70px; }
.cinematican--naslovna h1 { max-width: 820px; text-transform: none; color: #fff; }

/* Polagano zumiranje fotografije u pozadini (Ken Burns efekt), isto kao na szgpu.hr naslovnici. */
.cinematican--naslovna img { animation: cinematican-zum 22s ease-in-out infinite alternate; }
@keyframes cinematican-zum {
	from { transform: scale(1); }
	to { transform: scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
	.cinematican--naslovna img { animation: none; }
}

.cinematican__mreza {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: 56px;
	align-items: start;
}
.cinematican__vizija p { color: var(--srebro); }
.cinematican__kartica {
	margin-top: 22px;
	background: rgba(4, 16, 29, 0.55);
	border: 1px solid rgba(1, 177, 236, 0.35);
	backdrop-filter: blur(4px);
	padding: 20px 24px;
}
.cinematican__kartica h4 {
	margin: 0 0 8px;
	font-size: 0.78rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--mjesecina-jaka);
	font-family: var(--tekst-font);
	font-weight: 600;
}
.cinematican__kartica p { margin: 0; font-size: 0.92rem; }
@media (max-width: 900px) {
	.cinematican__mreza { grid-template-columns: 1fr; gap: 32px; }
}

.odbrojavanje {
	display: flex;
	gap: 20px;
	margin-top: 32px;
	flex-wrap: wrap;
}
.odbrojavanje__jedinica {
	background: rgba(4, 16, 29, 0.55);
	border: 1px solid rgba(1, 177, 236, 0.35);
	border-radius: 14px;
	padding: 14px 20px;
	min-width: 84px;
	text-align: center;
	backdrop-filter: blur(4px);
}
.odbrojavanje__broj {
	font-family: var(--naslovni-font);
	font-size: 2rem;
	color: var(--mjesecina-jaka);
	line-height: 1;
}
.odbrojavanje__oznaka {
	font-size: 0.68rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--srebro);
	margin-top: 6px;
}

.disciplina {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
	padding: 72px 0;
	border-bottom: 1px solid var(--linija);
}
.disciplina:last-child { border-bottom: none; }
.disciplina:nth-of-type(even) .disciplina__tekst { order: 2; }
.disciplina__vizual {
	width: 100%;
	max-width: 100%;
	aspect-ratio: 4 / 3;
	border-radius: 12px;
	background: linear-gradient(135deg, var(--noc-3), var(--noc-2));
	border: 1px dashed var(--linija);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--tekst-prigusen);
	font-size: 0.85rem;
	text-align: center;
	padding: 24px;
	overflow: hidden;
}
.disciplina__vizual img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}
.disciplina__vizual--istaknuto {
	height: 100%;
	min-height: 360px;
	box-shadow: 0 30px 70px -24px rgba(0, 0, 0, 0.55);
}
.disciplina__vizual--istaknuto img {
	animation: disciplina-dah 9s ease-in-out infinite;
	transform-origin: center;
}
@keyframes disciplina-dah {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.07); }
}
@media (prefers-reduced-motion: reduce) {
	.disciplina__vizual--istaknuto img { animation: none; }
}
.disciplina__popis { margin: 18px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.disciplina__popis li { padding-left: 22px; position: relative; color: var(--srebro); font-size: 0.95rem; }
.disciplina__popis li::before { content: "—"; position: absolute; left: 0; color: var(--mjesecina); }

@media (max-width: 880px) {
	.disciplina { grid-template-columns: 1fr; padding: 48px 0; }
	.disciplina:nth-of-type(even) .disciplina__tekst { order: 0; }
	.disciplina--rastegnuto,
	.disciplina--rastegnuto-obrnuto { grid-template-columns: 1fr; }
	.disciplina--rastegnuto .disciplina__vizual--golo,
	.disciplina--rastegnuto-obrnuto .disciplina__vizual--golo { height: auto; }
}

.disciplina__broj {
	font-family: var(--naslovni-font);
	font-size: 3.2rem;
	color: var(--mjesecina-jaka);
	line-height: 1;
	margin: 14px 0 6px;
	display: flex;
	align-items: baseline;
	gap: 10px;
}
.disciplina__broj span { font-size: 2rem; }
.disciplina__broj small {
	font-family: var(--tekst-font);
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--tekst-prigusen);
}

/* ---------- SLAJDER (veliki rotirajuci prikaz fotografija unutar poglavlja) ---------- */

.slajder { position: relative; width: 100%; height: 100%; }
.slajder__trake { position: relative; width: 100%; height: 100%; }
.slajder__slajd { position: absolute; inset: 0; opacity: 0; transition: opacity 0.7s ease; }
.slajder__slajd.aktivan { opacity: 1; z-index: 1; }
.slajder__slajd img { width: 100%; height: 100%; object-fit: cover; display: block; }

.slajder__strelica {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(6, 16, 28, 0.55);
	border: 1px solid rgba(255, 255, 255, 0.25);
	color: #fff;
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
	transition: background 0.2s ease;
}
.slajder__strelica:hover { background: var(--mjesecina); color: #04121f; }
.slajder__strelica--lijevo { left: 14px; }
.slajder__strelica--desno { right: 14px; }

.slajder__tockice {
	position: absolute;
	bottom: 14px;
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
	gap: 8px;
	z-index: 2;
}
.slajder__tocka {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.4);
	border: none;
	padding: 0;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease;
}
.slajder__tocka.aktivna { background: var(--mjesecina-jaka); transform: scale(1.3); }

@media (max-width: 880px) {
	.slajder__strelica { width: 34px; height: 34px; font-size: 1.2rem; }
}

/* ---------- POGLAVLJE PUNE SIRINE (naslov + broj iznad, slajder ispod) ---------- */

.disciplina--puna {
	grid-template-columns: 1fr;
	gap: 36px;
}
.disciplina--puna .disciplina__tekst { order: 0; max-width: 760px; }
.disciplina--puna .disciplina__vizual {
	order: 1;
	aspect-ratio: auto;
	background: none;
	border: none;
	padding: 0;
	overflow: visible;
	min-width: 0;
}

/* ---------- TRAKOSLAJDER (vodoravni karusel foto-kartica, kao na pulainfo.hr) ---------- */

.trakoslajder { position: relative; min-width: 0; }

.trakoslajder__trag {
	display: flex;
	gap: 18px;
	min-width: 0;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding: 4px 4px 18px;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.trakoslajder__trag::-webkit-scrollbar { display: none; }

.trakoslajder__kartica {
	position: relative;
	flex: 0 0 auto;
	width: 240px;
	aspect-ratio: 3 / 4;
	border-radius: 10px;
	overflow: hidden;
	scroll-snap-align: start;
	background: var(--noc-3);
}
.trakoslajder__kartica img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s ease;
}
.trakoslajder__kartica:hover img { transform: scale(1.06); }

.trakoslajder__oznaka {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 16px 16px 14px;
	background: linear-gradient(0deg, rgba(6, 16, 28, 0.92), transparent);
	color: #fff;
	font-family: var(--naslovni-font);
	font-weight: 600;
	font-size: 0.95rem;
	letter-spacing: 0.02em;
}

.trakoslajder__strelica {
	position: absolute;
	top: 42%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--noc-2);
	border: 1px solid var(--linija);
	color: #fff;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
	transition: background 0.2s ease, border-color 0.2s ease;
}
.trakoslajder__strelica:hover { background: var(--mjesecina); color: #04121f; border-color: var(--mjesecina); }
.trakoslajder__strelica--lijevo { left: -22px; }
.trakoslajder__strelica--desno { right: -22px; }

@media (max-width: 880px) {
	.disciplina--puna .disciplina__tekst { max-width: none; }
	.trakoslajder__kartica { width: 200px; }
	.trakoslajder__strelica { display: none; }
}

/* ---------- TRAKOSLAJDER "GOLO" (bez okvira, dvije slike odjednom, kao TZ Pula) ---------- */

.disciplina__vizual--golo {
	background: none;
	border: none;
	padding: 0;
	aspect-ratio: auto;
	overflow: visible;
	min-width: 0;
}

.disciplina--rastegnuto { align-items: stretch; grid-template-columns: minmax(0, 380px) 1fr; }
.disciplina--rastegnuto-obrnuto { grid-template-columns: 1fr minmax(0, 380px); }
.disciplina--rastegnuto:not(.disciplina--rastegnuto-obrnuto) .disciplina__vizual--golo {
	margin-right: calc(-1 * max(0px, (100vw - var(--sirina-sadrzaja)) / 2 + 24px));
}
.disciplina--rastegnuto-obrnuto .disciplina__vizual--golo {
	margin-left: calc(-1 * max(0px, (100vw - var(--sirina-sadrzaja)) / 2 + 24px));
}
.disciplina--rastegnuto-obrnuto .disciplina__tekst { order: 2; }
/* Crta izmedju poglavlja prati slajder: slajder izlazi izvan .sadrzaj (margin-right/left gore)
   sve do ruba zaslona, pa linija ispod poglavlja ide do istog ruba na istoj strani - umjesto
   obicnog border-bottom (koji bi uvijek stao na rubu .sadrzaj). Crta je zaseban element (ne
   ::after) jer apsolutno pozicioniran pseudo-element unutar ovog grida ne preuzima lijevi/desni
   razmak ispravno na obje strane - obican element s istim margin trikom kao slajder radi
   pouzdano. Stavlja se rucno u HTML, izmedju poglavlja (osim nakon zadnjeg). */
.disciplina--rastegnuto { border-bottom: none; }
.poglavlje-crta { height: 1px; background: var(--linija); }
.poglavlje-crta--desno { margin-right: calc(-1 * max(0px, (100vw - var(--sirina-sadrzaja)) / 2 + 24px)); }
.poglavlje-crta--lijevo { margin-left: calc(-1 * max(0px, (100vw - var(--sirina-sadrzaja)) / 2 + 24px)); }
.disciplina__broj--zlatno { color: var(--zlato-sjaj); }
.disciplina--rastegnuto h2 { font-size: clamp(2.3rem, 5.2vw, 3.4rem); line-height: 1.08; }
.disciplina--rastegnuto .disciplina__vizual--golo { height: 100%; }
.disciplina--rastegnuto .trakoslajder--golo { height: 100%; }
.disciplina--rastegnuto .trakoslajder--golo .trakoslajder__trag { height: 100%; }
.disciplina--rastegnuto .trakoslajder--golo .trakoslajder__kartica {
	height: 100%;
}

.trakoslajder--golo .trakoslajder__trag { gap: 14px; padding: 4px 4px 4px; }
.trakoslajder--golo .trakoslajder__kartica {
	flex: 0 0 47%;
	width: auto;
	aspect-ratio: 4 / 3;
	border-radius: 9px;
	background: none;
}
.trakoslajder--golo .trakoslajder__strelica {
	top: auto;
	bottom: 20px;
	transform: none;
	width: 54px;
	height: 54px;
	font-size: 1.7rem;
	background: rgba(6, 16, 28, 0.65);
	backdrop-filter: blur(4px);
}
.trakoslajder--golo .trakoslajder__strelica--lijevo { left: auto; right: 86px; }
.trakoslajder--golo .trakoslajder__strelica--desno { right: 20px; }

@media (max-width: 880px) {
	.trakoslajder--golo .trakoslajder__strelica { display: flex; width: 44px; height: 44px; font-size: 1.4rem; bottom: 12px; }
	.trakoslajder--golo .trakoslajder__strelica--lijevo { right: 68px; }
	.trakoslajder--golo .trakoslajder__strelica--desno { right: 12px; }
}

@media (max-width: 880px) {
	.disciplina--rastegnuto { align-items: normal; grid-template-columns: 1fr; }
	.disciplina--rastegnuto .disciplina__vizual--golo,
	.disciplina--rastegnuto .trakoslajder--golo,
	.disciplina--rastegnuto .trakoslajder--golo .trakoslajder__trag { height: auto; }
	.disciplina--rastegnuto .trakoslajder--golo .trakoslajder__kartica { height: auto; }
	.trakoslajder--golo .trakoslajder__kartica { flex-basis: 72%; }
	.disciplina--rastegnuto-obrnuto .disciplina__tekst { order: 0; }
}

/* ---------- GALERIJA / PLACEHOLDER SLIKE ---------- */

.rezervirano-mjesto {
	aspect-ratio: 16 / 10;
	border-radius: 16px;
	border: 1px dashed var(--linija);
	background: repeating-linear-gradient(135deg, var(--noc-3), var(--noc-3) 10px, var(--noc-2) 10px, var(--noc-2) 20px);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: var(--tekst-prigusen);
	font-size: 0.82rem;
	padding: 16px;
}

/* ---------- IZDANJA (PROSLA) ---------- */

.izdanje {
	display: grid;
	grid-template-columns: 160px 1fr;
	gap: 32px;
	padding: 40px 0;
	border-bottom: 1px solid var(--linija);
}
.izdanje:last-child { border-bottom: none; }

.izdanje--dodaj { cursor: pointer; }
.izdanje--dodaj .izdanje__dodaj-oznaka {
	font-family: var(--naslovni-font);
	font-size: 2.6rem;
	color: var(--mjesecina);
}
.izdanje--dodaj .izdanje__dodaj-tekst {
	display: flex;
	align-items: center;
	color: var(--mjesecina);
	font-weight: 600;
	border: 2px dashed var(--linija);
	border-radius: 12px;
	padding: 0 20px;
	transition: border-color 0.15s ease, color 0.15s ease;
}
.izdanje--dodaj:hover .izdanje__dodaj-tekst { border-color: var(--mjesecina); }
.izdanje__obrazac {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}
.izdanje__obrazac label {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 0.8rem;
	color: var(--tekst-prigusen);
}
.izdanje__obrazac label.izdanje__polje--siroko { grid-column: 1 / -1; }
.izdanje__obrazac input,
.izdanje__obrazac textarea {
	appearance: none;
	border: 1px solid var(--linija);
	background: var(--noc-2);
	color: var(--tekst);
	padding: 8px 12px;
	border-radius: 8px;
	font-family: inherit;
	font-size: 0.9rem;
}
.izdanje__obrazac textarea { resize: vertical; min-height: 70px; }
.izdanje__obrazac-gumbi { grid-column: 1 / -1; display: flex; gap: 10px; margin-top: 4px; }
@media (max-width: 640px) {
	.izdanje__obrazac { grid-template-columns: 1fr; }
}

.izdanje__godina {
	font-family: var(--naslovni-font);
	font-size: 2.6rem;
	color: var(--mjesecina-jaka);
}
.izdanje__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	font-size: 0.88rem;
	color: var(--mjesecina);
	margin: 2px 0 14px;
	font-weight: 600;
}
.izdanje__brojke { display: flex; gap: 28px; flex-wrap: wrap; margin: 14px 0; }
.izdanje__brojke div { font-size: 0.85rem; color: var(--tekst-prigusen); }
.izdanje__brojke strong { display: block; color: var(--mjesecina-jaka); font-size: 1.2rem; font-family: var(--naslovni-font); }
.izdanje__mediji { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.oznaka-medija {
	font-size: 0.78rem;
	padding: 6px 14px;
	border-radius: 999px;
	border: 1px solid var(--linija);
	color: var(--srebro);
}
@media (max-width: 640px) {
	.izdanje { grid-template-columns: 1fr; }
}

/* ---------- MEDIJI / PRESS CLIPPING ---------- */

.mreza-clanaka {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 24px;
}
.clanak {
	background: var(--noc-3);
	border: 1px solid var(--linija);
	border-radius: 16px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.clanak__slika { aspect-ratio: 16/10; }
.clanak__tijelo { padding: 20px 22px; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.clanak__izvor { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mjesecina); }
.clanak__naslov { font-family: var(--naslovni-font); font-size: 1.15rem; color: var(--tekst); margin: 0; }
.clanak__poveznica { margin-top: auto; font-size: 0.85rem; color: var(--srebro); display: inline-flex; align-items: center; gap: 6px; }
.clanak__poveznica:hover { color: var(--mjesecina-jaka); }

.mreza-isjecaka {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 24px;
}
.isjecak {
	border-radius: 16px;
	overflow: hidden;
	border: 1px solid var(--linija);
	background: var(--noc-3);
	transition: transform 0.25s ease, border-color 0.25s ease;
}
.isjecak:hover { transform: translateY(-4px); border-color: var(--mjesecina); }
.isjecak img { width: 100%; height: auto; display: block; }
.isjecak a { display: block; }

/* Popis medijskih objava (desetci/stotinjak stavki) - lagan popis poveznica,
   bez slika, da raste bez problema s ucitavanjem/duljinom stranice. */
.popis-clanaka { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.popis-clanaka li { border-bottom: 1px solid var(--linija); }
.popis-clanaka li:first-child { border-top: 1px solid var(--linija); }
.popis-clanaka a {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 20px;
	padding: 16px 4px;
	color: var(--tekst);
	text-decoration: none;
	transition: color 0.2s ease;
}
.popis-clanaka a:hover { color: var(--mjesecina-jaka); }
.popis-clanaka a:hover .popis-clanaka__naslov::after { opacity: 1; transform: translateX(2px); }
.popis-clanaka__naslov { flex: 1; }
.popis-clanaka__naslov::after { content: "↗"; display: inline-block; margin-left: 8px; opacity: 0; transition: opacity 0.2s ease, transform 0.2s ease; }
.popis-clanaka__izvor { color: var(--tekst-prigusen); font-size: 0.85rem; white-space: nowrap; }
@media (max-width: 640px) {
	.popis-clanaka a { flex-direction: column; gap: 4px; }
}

/* ---------- MEDIJSKE OBJAVE (kartice s naslovnom slikom, uredom slicno dijeljenju linka) ---------- */

.objave-mreza {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 24px;
}
.objava-kartica {
	display: block;
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid var(--linija);
	background: var(--noc-3);
	text-decoration: none;
	color: inherit;
	transition: transform 0.25s ease, border-color 0.25s ease;
}
.objava-kartica:hover { transform: translateY(-4px); border-color: var(--mjesecina); }
.objava-kartica img { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; }
.objava-kartica__tijelo { padding: 16px 18px 18px; }
.objava-kartica__tijelo h3 { font-size: 1.02rem; line-height: 1.3; margin: 0 0 8px; color: var(--tekst); }
.objava-kartica__tijelo p {
	font-size: 0.85rem;
	color: var(--tekst-prigusen);
	margin: 0 0 14px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.objava-kartica__izvor {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.75rem;
	color: var(--tekst-prigusen);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.objava-kartica__tocka { width: 16px; height: 16px; border-radius: 50%; background: var(--mjesecina); flex-shrink: 0; }

/* Povlacenje (drag & drop) za promjenu redoslijeda - aktivno samo u Nacinu uredivanja (uredi.js). */
.objava-kartica[draggable="true"] { cursor: grab; position: relative; }
.objava-kartica.vuce-se { opacity: 0.4; }
.objava-kartica.povuci-iznad { border-color: var(--mjesecina-jaka); box-shadow: 0 0 0 2px var(--mjesecina-jaka); }

/* Gumb za brzo brisanje stavke (dodaje ga uredi.js, samo u Nacinu uredivanja). */
.stavka__obrisi {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 3;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: none;
	background: rgba(6, 23, 38, 0.75);
	color: #fff;
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease;
}
.stavka__obrisi:hover { background: #d64545; }
.stavka-za-brisanje { display: none !important; }

/* ---------- ORGANIZATORI ---------- */

.organizatori {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 56px;
	flex-wrap: wrap;
	padding: 20px 0 10px;
}
.organizatori__stavka {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}
.organizatori__logo { height: 92px; width: auto; }
.organizatori__logo--na-bijelom {
	background: #fff;
	border-radius: 10px;
	padding: 16px 22px;
	height: auto;
	max-height: 92px;
	box-sizing: content-box;
}
.organizatori__uloga {
	font-size: 0.74rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tekst-prigusen);
}
.organizatori__spojnica {
	font-family: var(--naslovni-font);
	font-size: 1.8rem;
	color: var(--mjesecina);
	align-self: center;
}
@media (max-width: 640px) { .organizatori { gap: 28px; } .organizatori__logo { height: 64px; } }

.organizatori-ploca {
	background: #ffffff;
	border-radius: 18px;
	padding: 44px 48px;
	max-width: 640px;
	margin: 20px auto 10px;
	text-align: center;
	box-shadow: 0 24px 56px -22px rgba(0, 0, 0, 0.4);
}
.organizatori-ploca__loga {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 32px;
	flex-wrap: wrap;
}
.organizatori-ploca__logo { height: 88px; width: auto; }
.organizatori-ploca__logo--veci { height: 104px; }
.organizatori-ploca__stupac {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}
.organizatori-ploca__spojnica {
	font-family: var(--naslovni-font);
	font-size: 1.6rem;
	color: #9fb3c6;
	align-self: center;
	margin-bottom: 34px;
}
.organizatori-ploca__opis,
.organizatori-ploca__uloga {
	margin: 0;
	font-size: 0.8rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #2a3f52;
	font-weight: 600;
}
@media (max-width: 640px) {
	.organizatori-ploca { padding: 32px 24px; }
	.organizatori-ploca__logo { height: 56px; }
	.organizatori-ploca__logo--veci { height: 68px; }
}

/* ---------- PARTNERI ---------- */

.partneri-veliki {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
}
.partner-logo {
	aspect-ratio: 2.3/1;
	background: #ffffff;
	border: 1px solid var(--linija);
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 18px 26px;
	color: #2a3f52;
	font-family: var(--naslovni-font);
	font-size: 1.05rem;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.partner-logo:hover { transform: translateY(-4px); box-shadow: 0 16px 32px -12px rgba(1, 177, 236, 0.45); }
.partner-logo[draggable="true"] { position: relative; cursor: grab; }
.kartica[draggable="true"] { position: relative; cursor: grab; }
.partner-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }

.partneri-istaknuto {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
	margin-bottom: 48px;
}
.partner-logo--istaknuto {
	aspect-ratio: 2/1;
	border: 2px solid var(--mjesecina);
	border-radius: 12px;
	padding: 30px 32px;
	font-size: 1.5rem;
	box-shadow: 0 18px 40px -16px rgba(1, 177, 236, 0.5);
}
.partner-logo--istaknuto img { max-width: 85%; max-height: 85%; }
@media (max-width: 880px) { .partneri-istaknuto { grid-template-columns: 1fr; } }
@media (max-width: 880px) { .partneri-veliki { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 480px) { .partneri-veliki { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px; } }

.partneri-mali {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 24px;
}
.partner-mali {
	font-size: 0.85rem;
	padding: 10px 18px;
	border-radius: 999px;
	border: 1px solid var(--linija);
	color: var(--tekst-prigusen);
}

.paketi {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 28px;
}
@media (max-width: 880px) { .paketi { grid-template-columns: 1fr; } }
.paket {
	border: 1px solid var(--linija);
	border-radius: 18px;
	padding: 40px 32px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.paket--istaknuto {
	border-color: var(--zlato);
	background: linear-gradient(180deg, rgba(201, 162, 75, 0.12), transparent 60%);
	position: relative;
}
.paket--istaknuto::before {
	content: "Preporučeno";
	position: absolute;
	top: -13px;
	left: 32px;
	background: linear-gradient(135deg, var(--zlato-sjaj), var(--zlato));
	color: #2b2008;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 5px 14px;
	border-radius: 999px;
}
.paket--istaknuto .paket__cijena { color: var(--zlato-sjaj); }
.paket--istaknuto .paket__popis li::before { color: var(--zlato); }
.paket__cijena { font-family: var(--naslovni-font); font-size: 2rem; color: var(--mjesecina-jaka); }

.zlatni-tekst { color: var(--zlato-sjaj); }

.kartica--pehar { display: flex; flex-direction: column; justify-content: center; }
.kartica--pehar .kartica__oznaka { font-size: 0.85rem; }
.kartica--pehar h3 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); margin-bottom: 20px; }
.kartica--pehar p { font-size: 1.2rem; line-height: 1.6; }
.paket__popis { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.paket__popis li { padding-left: 24px; position: relative; font-size: 0.92rem; color: var(--srebro); }
.paket__popis li::before { content: "✓"; position: absolute; left: 0; color: var(--mjesecina); }

/* ---------- GALERIJA PO AUTORU ---------- */

.galerija-autor {
	display: grid;
	gap: 22px;
	padding: 48px 0;
	border-bottom: 1px solid var(--linija);
}
.galerija-autor:last-child { border-bottom: none; }
.galerija-autor__zaglavlje {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 18px;
	flex-wrap: wrap;
}
.galerija-autor__zaglavlje h3 { margin: 0; }
.galerija-autor__izvor {
	font-size: 0.78rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--tekst-prigusen);
}
.galerija-autor__mreza {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
}
.galerija-autor__kartica {
	position: relative;
	aspect-ratio: 4/3;
	border-radius: 8px;
	overflow: hidden;
	background: linear-gradient(135deg, var(--noc-3), var(--noc-2));
	border: 1px dashed var(--linija);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 10px;
	font-size: 0.78rem;
	color: var(--tekst-prigusen);
}
.galerija-autor__kartica[draggable="true"] { cursor: grab; }
.galerija-autor__kartica.vuce-se { opacity: 0.4; }
.galerija-autor__kartica.povuci-iznad { outline: 2px solid var(--mjesecina-jaka); outline-offset: -2px; }
.galerija-autor__kartica img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s ease;
}
.galerija-autor__kartica:hover img { transform: scale(1.06); }
@media (max-width: 880px) {
	.galerija-autor__mreza { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.galerija-autor__kartica--dodaj {
	cursor: pointer;
	border: 2px dashed var(--mjesecina);
	background: rgba(201, 178, 122, 0.08);
	color: var(--mjesecina);
	font-weight: 600;
	gap: 6px;
	flex-direction: column;
	transition: background 0.15s ease, border-color 0.15s ease;
}
.galerija-autor__kartica--dodaj span { font-size: 1.6rem; line-height: 1; }
.galerija-autor__kartica--dodaj:hover,
.galerija-autor__kartica--dodaj.galerija-autor__kartica--povuceno {
	background: rgba(201, 178, 122, 0.18);
	border-color: var(--mjesecina-jaka);
}
.galerija-autor__kartica--dodaj input[type="file"] { display: none; }

/* ---------- POZIV NA KONTAKT ---------- */

.poziv-kontakt {
	text-align: center;
	padding: 100px 0;
	background: radial-gradient(ellipse at 50% 0%, rgba(233, 219, 166, 0.08), transparent 60%);
	border-top: 1px solid var(--linija);
}
.poziv-kontakt h2 { max-width: 760px; margin-left: auto; margin-right: auto; }

/* ---------- PODNOZJE ---------- */

.podnozje {
	border-top: 1px solid var(--linija);
	padding: 56px 0 32px;
	background: #060d17;
}
.podnozje__mreza {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: 40px;
	margin-bottom: 40px;
}
@media (max-width: 760px) { .podnozje__mreza { grid-template-columns: 1fr; gap: 28px; } }
.podnozje h4 { color: var(--tekst); font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.1em; }
.podnozje ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.podnozje a { color: var(--tekst-prigusen); font-size: 0.92rem; }
.podnozje a:hover { color: var(--mjesecina-jaka); }
.podnozje__partner-jk {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 0.85rem;
	color: var(--tekst-prigusen);
	border: 1px solid var(--linija);
	border-radius: 999px;
	padding: 10px 18px;
	margin-top: 10px;
}
.podnozje__dno {
	border-top: 1px solid var(--linija);
	padding-top: 24px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	font-size: 0.8rem;
	color: var(--tekst-prigusen);
}

/* ---------- NASLOVNA TRAKA PODSTRANICA ---------- */

.naslovna-traka {
	padding: 160px 0 70px;
	text-align: center;
	background: linear-gradient(180deg, #060d17, var(--noc) 70%);
	border-bottom: 1px solid var(--linija);
}
.naslovna-traka__uvod { max-width: 680px; margin: 0 auto; color: var(--srebro); }

/* ---------- NAPOMENA ZA RAZVOJ (uklanja se prije objave) ---------- */

.napomena-razvoj {
	background: #042034;
	color: #5fd6fb;
	text-align: center;
	font-size: 0.82rem;
	padding: 10px 16px;
	letter-spacing: 0.02em;
	border-bottom: 1px solid var(--linija);
}
.napomena-razvoj strong { text-transform: uppercase; letter-spacing: 0.08em; }

/* ---------- KARTICA PARTNERA (otvara se klikom na logo) ---------- */

.partner-logo { cursor: pointer; }
.partner-logo:focus-visible { outline: 2px solid var(--mjesecina); outline-offset: 3px; }

.partner-modal {
	position: fixed;
	inset: 0;
	z-index: 200;
}
.partner-modal[hidden] { display: none; }
.partner-modal__pozadina {
	position: absolute;
	inset: 0;
}
/* Na racunalu kartica se otvara cim misem predjes preko loga (skripta.js, hoverSposoban).
   Cijeli .partner-modal prekriva zaslon (position:fixed; inset:0) pa bi inace legao upravo
   preko loga nad kojim je mis - logo bi odmah "izgubio" hover na modal, sto bi pokrenulo
   zatvaranje kartice odmah nakon otvaranja. Na racunalu zato cijeli modal ne hvata mis, osim
   same kartice (zatvaranje ide samo kad mis ode s loga/kartice ili na Escape); na dodir
   (mobitel/tablet) modal ostaje hvatati dodir izvan kartice, jer ondje nema hover efekta koji
   bi to zamijenio. */
@media (hover: hover) and (pointer: fine) {
	.partner-modal { pointer-events: none; }
	.partner-modal__kartica { pointer-events: auto; }
}
.partner-modal__kartica {
	/* Pozicija (top/left) se racuna u skripta.js (pozicionirajKraj) prema polozaju
	   loga nad kojim je otvorena, umjesto da kartica uvijek stoji na sredini zaslona. */
	position: fixed;
	z-index: 1;
	max-width: 420px;
	width: calc(100% - 32px);
	max-height: 86vh;
	overflow-y: auto;
	background: var(--noc-3);
	border: 1px solid var(--linija);
	border-radius: 14px;
	padding: 40px 32px 32px;
	text-align: center;
	box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6);
	animation: partner-modal-pojavi 0.2s ease;
}
@keyframes partner-modal-pojavi {
	from { opacity: 0; transform: translateY(10px) scale(0.98); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}
.partner-modal__zatvori {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1px solid var(--linija);
	background: var(--noc-2);
	color: var(--srebro);
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease, color 0.2s ease;
}
.partner-modal__zatvori:hover { background: var(--mjesecina); color: #04121f; }
.partner-modal__logo {
	background: #fff;
	border-radius: 10px;
	padding: 18px 24px;
	margin: 0 auto 22px;
	max-width: 220px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.partner-modal__logo img { max-width: 100%; max-height: 64px; object-fit: contain; display: block; }
.partner-modal__kartica [hidden] { display: none; }
.partner-modal__kartica .kartica__oznaka { margin-bottom: 10px; }
.partner-modal__kartica h3 { margin: 0 0 12px; }
.partner-modal__kartica p { color: var(--srebro); margin: 0 0 22px; }
body.partner-modal-otvoren { overflow: hidden; }

/* Nacin uredivanja (uredi/server.py + assets/js/uredi.js) - samo za lokalno uredivanje teksta */
.uredi-traka {
	position: fixed;
	left: 50%;
	bottom: 18px;
	transform: translateX(-50%);
	z-index: 9999;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	border-radius: 999px;
	background: rgba(6, 16, 28, 0.92);
	border: 1px solid var(--linija);
	box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.6);
	font-family: var(--tekst-font);
	font-size: 0.85rem;
}
.uredi-gumb {
	appearance: none;
	border: 1px solid var(--linija);
	background: var(--noc-2);
	color: var(--tekst);
	padding: 8px 16px;
	border-radius: 999px;
	cursor: pointer;
	font-family: inherit;
	font-size: 0.85rem;
	white-space: nowrap;
}
.uredi-gumb:hover { background: var(--noc-3); }
.uredi-gumb--spremi { background: var(--mjesecina); color: var(--noc); border-color: var(--mjesecina); font-weight: 600; }
.uredi-gumb--spremi:hover { background: var(--mjesecina-jaka); }
.uredi-prijava { display: flex; align-items: center; gap: 8px; }
.uredi-lozinka {
	appearance: none;
	border: 1px solid var(--linija);
	background: var(--noc-2);
	color: var(--tekst);
	padding: 8px 14px;
	border-radius: 999px;
	font-family: inherit;
	font-size: 0.85rem;
	width: 130px;
}
.uredi-lozinka:focus { outline-color: var(--mjesecina-jaka); }
.uredi-poruka { padding: 0 6px; color: var(--srebro); }
.uredi-poruka--uspjeh { color: var(--mjesecina-jaka); }
.uredi-poruka--greska { color: #ff9b8a; }
.uredi-polje {
	outline: 2px dashed rgba(1, 177, 236, 0.45);
	outline-offset: 4px;
	border-radius: 4px;
	cursor: text;
}
.uredi-polje:focus { outline-color: var(--mjesecina-jaka); }
.uredi-polje--promijenjeno { outline-style: solid; outline-color: var(--zlato-sjaj); }
@media (max-width: 640px) {
	.uredi-traka { flex-wrap: wrap; justify-content: center; left: 16px; right: 16px; transform: none; }
	/* Traka za prijavu je fiksna pri dnu i zna prekriti zadnji redak sadrzaja na uskim
	   zaslonima (narocito na kraju stranice, gdje nema vise prostora za skrolati dalje). */
	body { padding-bottom: 96px; }
}