/* Hero karusel – izgled prema demu v8.0 (h63), uz animaciju aktivnog slajda (Q-20). */

.plt-hero {
	--plt-hero-slajd: 0;
	--plt-hero-ease: cubic-bezier(0.22, 0.7, 0.2, 1);
	position: relative;
	margin: 0 0 clamp(32px, 4vw, 50px);
	overflow: hidden;
	color: #fff;
}

/* Hero preko cijele širine (Markova napomena 30. 10.): bez bočnog uvlačenja, susjedni slajd se ne vidi. */
.plt-hero__prozor {
	position: relative;
	overflow: hidden;
	padding: 0;
}

.plt-hero__traka {
	display: flex;
	gap: 0;
	transform: translateX(calc(var(--plt-hero-slajd) * -100%));
	transition: transform 0.85s var(--plt-hero-ease);
}

.plt-hero__slajd {
	flex: 0 0 100%;
	min-width: 0;
	overflow: hidden;
}

.plt-hero__baner {
	position: relative;
	height: calc(100svh - 100px);
	min-height: 620px;
	max-height: 1000px;
	overflow: hidden;
	isolation: isolate;
	background: #151C17;
}

.plt-hero__slika {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
	object-position: center 58%;
	transform: scale(1.06);
	transition: transform 1.2s var(--plt-hero-ease);
}

.plt-hero__baner::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(90deg, rgba(4, 16, 10, 0.72), rgba(4, 16, 10, 0.22) 65%),
		linear-gradient(0deg, rgba(4, 16, 10, 0.65), transparent 35%);
}

.plt-hero__slajd--desno .plt-hero__baner::after {
	background:
		linear-gradient(270deg, rgba(4, 16, 10, 0.78), rgba(4, 16, 10, 0.1) 90%),
		linear-gradient(0deg, rgba(4, 16, 10, 0.65), transparent 35%);
}

.plt-hero__slajd--sredina .plt-hero__baner::after {
	background: linear-gradient(0deg, #06130BD9, #06130B65 55%, #06130B70);
}

.plt-hero__tekst {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	max-width: 1100px;
	padding: 70px clamp(36px, 7vw, 150px) 120px;
}

.plt-hero__slajd--desno .plt-hero__tekst {
	margin-left: auto;
}

.plt-hero__slajd--sredina .plt-hero__tekst {
	max-width: none;
	align-items: center;
	text-align: center;
	padding-inline: 7vw;
}

.plt-hero__naslov {
	margin: 0 0 24px;
	max-width: 14ch;
	font-family: Gloock, Georgia, serif;
	font-weight: 400;
	font-size: clamp(2.625rem, 5.6vw, 5.5rem);
	line-height: 1.04;
	letter-spacing: -0.03em;
	text-wrap: balance;
	color: #fff;
}

.plt-hero__slajd--sredina .plt-hero__naslov {
	max-width: none;
	font-size: clamp(1.75rem, 3.3vw, 3.375rem);
	margin-bottom: 32px;
}

.plt-hero__logo {
	display: block;
	width: min(550px, 100%);
	height: auto;
	margin: 4px 0 6px;
}

.plt-hero__slajd--sredina .plt-hero__logo {
	width: min(780px, 72vw);
	margin: 8px 0 28px;
}

.plt-hero__podnaslov {
	margin: 20px 0 28px;
	max-width: 40ch;
	font-size: clamp(1.125rem, 1.4vw, 1.5rem);
	line-height: 1.5;
	color: #fff;
}

.plt-hero .plt-hero__gumb {
	box-sizing: border-box;
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 28px;
	min-height: 46px;
	padding: 12px 20px;
	border: 1px solid var(--plt-accent, #164B34);
	border-radius: 4px;
	background: var(--plt-accent, #164B34);
	color: #fff !important;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.35;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.plt-hero .plt-hero__gumb:hover {
	background: var(--plt-accent-hover, #236044);
}

.plt-hero .plt-hero__gumb svg {
	width: 18px;
	height: 18px;
	transition: transform 0.25s var(--plt-hero-ease);
}

.plt-hero .plt-hero__gumb:hover svg {
	transform: translateX(4px);
}

/* Animacija aktivnog slajda: lagani „Ken Burns” i ulazak teksta redom. */
.plt-hero__slajd.is-aktivan .plt-hero__slika {
	transform: scale(1);
	transition: transform calc(var(--plt-hero-interval, 7s) + 1.5s) linear;
}

.plt-hero.is-spreman .plt-hero__slajd .plt-hero__tekst > * {
	opacity: 0;
	transform: translateY(18px);
}

.plt-hero.is-spreman .plt-hero__slajd.is-aktivan .plt-hero__tekst > * {
	opacity: 1;
	transform: none;
	transition: opacity 0.6s ease, transform 0.8s var(--plt-hero-ease);
}

.plt-hero.is-spreman .plt-hero__slajd.is-aktivan .plt-hero__tekst > :nth-child(2) {
	transition-delay: 0.12s;
}

.plt-hero.is-spreman .plt-hero__slajd.is-aktivan .plt-hero__tekst > :nth-child(3) {
	transition-delay: 0.24s;
}

.plt-hero.is-spreman .plt-hero__slajd.is-aktivan .plt-hero__tekst > :nth-child(4) {
	transition-delay: 0.36s;
}

/* Prvi slajd mora biti čitljiv odmah (~0,6 s), ne čeka JavaScript. */
.plt-hero:not(.is-spreman) .plt-hero__slajd:first-child .plt-hero__tekst > * {
	animation: plt-hero-ulaz 0.6s var(--plt-hero-ease) both;
}

@keyframes plt-hero-ulaz {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
}

/* Strelice */
.plt-hero__strelica {
	position: absolute;
	top: 50%;
	z-index: 3;
	display: grid;
	place-items: center;
	width: 48px;
	height: 64px;
	transform: translateY(-50%);
	border: 0;
	border-radius: 4px;
	background: rgba(9, 24, 15, 0.2);
	color: #fff;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.plt-hero__strelica:hover {
	background: rgba(9, 24, 15, 0.6);
}

.plt-hero__strelica--natrag {
	left: 28px;
}

.plt-hero__strelica--naprijed {
	right: 28px;
}

/* Kontrole: točke s linijom napretka, stanje, pauza (HERO K03, K08). */
.plt-hero__kontrole {
	position: absolute;
	z-index: 4;
	bottom: 26px;
	left: clamp(55px, 8vw, 170px);
	right: clamp(55px, 8vw, 170px);
	display: flex;
	align-items: center;
	gap: 24px;
	color: #fff;
}

.plt-hero__tocke {
	display: flex;
	gap: 4px;
}

.plt-hero__tocke button {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.plt-hero__tocke span {
	position: relative;
	display: block;
	width: 24px;
	height: 2px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.38);
	transition: width 0.3s var(--plt-hero-ease);
}

.plt-hero__tocke button[aria-pressed="true"] span {
	width: 36px;
}

.plt-hero__tocke span::after {
	content: "";
	position: absolute;
	inset: 0;
	background: #fff;
	transform: scaleX(0);
	transform-origin: left;
}

.plt-hero__tocke button[aria-pressed="true"] span::after {
	transform: scaleX(1);
}

.plt-hero.is-tece .plt-hero__tocke button[aria-pressed="true"] span::after {
	animation: plt-hero-napredak var(--plt-hero-interval, 7s) linear both;
}

@keyframes plt-hero-napredak {
	from {
		transform: scaleX(0);
	}
	to {
		transform: scaleX(1);
	}
}

.plt-hero__stanje {
	font-size: 0.875rem;
	letter-spacing: 0.03em;
	font-variant-numeric: tabular-nums;
}

.plt-hero__pauza {
	margin-left: auto;
	min-height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: #fff;
	font: inherit;
	font-size: 0.875rem;
	text-decoration: underline;
	text-underline-offset: 5px;
	cursor: pointer;
}

.plt-hero :is(button, a):focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

@media (max-width: 700px) {
	.plt-hero {
		margin-bottom: 32px;
	}

	.plt-hero__traka {
		gap: 6px;
		transform: translateX(calc(var(--plt-hero-slajd) * (-100% - 6px)));
	}

	/* Zaglavlje 64 px + donja traka 64 px: kontrole hera ostaju iznad trake. */
	.plt-hero__baner {
		height: calc(100svh - 160px - env(safe-area-inset-bottom));
		min-height: 570px;
		max-height: 850px;
	}

	.plt-hero__baner::after,
	.plt-hero__slajd--desno .plt-hero__baner::after {
		background: linear-gradient(0deg, rgba(4, 16, 10, 0.88), rgba(4, 16, 10, 0.14) 95%);
	}

	/* Visina = slika: bez border-boxa razmak od 165 px dodavao se na 100 % i tekst je padao na kontrole (Marko 2. 11.). */
	.plt-hero__tekst {
		box-sizing: border-box;
		justify-content: flex-end;
		max-width: none;
		padding: 45px 28px 120px;
	}

	.plt-hero__slajd--sredina .plt-hero__tekst {
		justify-content: center;
		padding: 60px 24px 120px;
	}

	.plt-hero__naslov {
		font-size: clamp(2.375rem, 10vw, 3.625rem);
		margin-bottom: 16px;
	}

	.plt-hero__slajd--sredina .plt-hero__naslov {
		font-size: 1.75rem;
		margin-bottom: 24px;
	}

	.plt-hero__logo,
	.plt-hero__slajd--sredina .plt-hero__logo {
		width: 100%;
		max-width: 350px;
		margin-bottom: 20px;
	}

	.plt-hero__podnaslov {
		font-size: 1rem;
		margin: 16px 0 20px;
	}

	.plt-hero .plt-hero__gumb {
		min-height: 46px;
		padding: 12px 19px;
		font-size: 0.75rem;
		gap: 23px;
	}

	.plt-hero__strelica {
		top: 28%;
		width: 44px;
		height: 52px;
	}

	.plt-hero__strelica--natrag {
		left: 8px;
	}

	.plt-hero__strelica--naprijed {
		right: 8px;
	}

	.plt-hero__kontrole {
		left: 20px;
		right: 20px;
		bottom: 12px;
		gap: 0 12px;
		flex-wrap: wrap;
	}

	.plt-hero__tocke button {
		width: 36px;
	}

	.plt-hero__tocke span {
		width: 18px;
	}

	.plt-hero__tocke button[aria-pressed="true"] span {
		width: 28px;
	}

	.plt-hero__stanje {
		margin-left: auto;
		font-size: 0.75rem;
	}

	.plt-hero__pauza {
		flex-basis: 100%;
		margin-left: 0;
		font-size: 0.75rem;
		text-align: left;
	}
}

@media (prefers-reduced-motion: reduce) {
	.plt-hero__traka,
	.plt-hero__slika,
	.plt-hero__slajd.is-aktivan .plt-hero__slika {
		transition: none;
		transform: none;
	}

	.plt-hero.is-spreman .plt-hero__slajd .plt-hero__tekst > *,
	.plt-hero:not(.is-spreman) .plt-hero__slajd:first-child .plt-hero__tekst > * {
		opacity: 1;
		transform: none;
		transition: none;
		animation: none;
	}

	.plt-hero.is-tece .plt-hero__tocke button[aria-pressed="true"] span::after {
		animation: none;
	}
}

/* Video slajda: preko naslovne slike, ispod zatamnjenja i teksta. */
.plt-hero__video {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: #151C17;
}

.plt-hero__slajd--video .plt-hero__slika {
	transform: none !important;
	transition: none !important;
}

/* Prvi slajd rebranda (scena 1 iz scroll dema): PLATA DO VRATA / sada je / logo koji se iscrtava. */
.plt-hero__naslov--rebrand {
	display: flex;
	flex-direction: column;
	align-items: inherit;
	max-width: none !important;
	margin-bottom: 8px !important;
}

.plt-hero__staro {
	display: block;
	font-size: clamp(2.25rem, 5.1vw, 4.75rem);
	line-height: 1.06;
	letter-spacing: 0.01em;
}

.plt-hero__sada {
	display: block;
	margin-top: 14px;
	font-size: clamp(1.5rem, 3.3vw, 3.1rem);
	line-height: 1.1;
}

.plt-hero__naslov--rebrand .plt-hero__logo {
	width: min(1000px, 82vw) !important;
	margin: clamp(16px, 2vw, 26px) 0 0 !important;
}

.plt-hero__slajd--lijevo .plt-hero__naslov--rebrand .plt-hero__logo,
.plt-hero__slajd--desno .plt-hero__naslov--rebrand .plt-hero__logo {
	width: min(720px, 60vw) !important;
}

/* Raspored prvog slajda (Marko 2. 11. 2026., do videa): PLATA DO VRATA gore, „sada je” desno ispod „vrata”,
 * logo dolje preko širine, gumb ispod loga; sredina ostaje slobodna za plate na fotografiji. */
.plt-hero__slajd--rebrand .plt-hero__tekst {
	box-sizing: border-box;
	justify-content: flex-start;
	padding-top: clamp(36px, 7vh, 90px);
	padding-bottom: clamp(70px, 9vh, 110px);
}

/* Zatamnjenje samo gore (naslov) i dolje (logo, gumb); plate u sredini ostaju svijetle. */
.plt-hero__slajd--rebrand .plt-hero__baner::after {
	background: linear-gradient(180deg, rgba(6, 19, 11, 0.62) 0%, rgba(6, 19, 11, 0.12) 30%, rgba(6, 19, 11, 0.1) 48%, rgba(6, 19, 11, 0.58) 68%, rgba(6, 19, 11, 0.8) 100%);
}

.plt-hero__slajd--rebrand .plt-hero__naslov--rebrand {
	flex: 1 1 auto;
	align-items: center;
	margin-bottom: clamp(14px, 2vh, 24px) !important;
}

.plt-hero__staro-sada {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-end;
}

.plt-hero__staro-sada .plt-hero__sada {
	margin-top: 4px;
}

.plt-hero__slajd--rebrand .plt-hero__naslov--rebrand .plt-hero__logo {
	width: min(860px, 62vw) !important;
	margin-top: auto !important;
}

.plt-hero__slajd--rebrand .plt-hero__podnaslov {
	max-width: none;
	font-size: clamp(1.25rem, 2.1vw, 2.25rem);
	line-height: 1.25;
}

.plt-hero__slajd.is-aktivan .plt-hero__logo--crtanje {
	animation: plt-hero-logo 3.2s cubic-bezier(0.22, 0.7, 0.2, 1) 0.35s both;
}

@keyframes plt-hero-logo {
	0% {
		clip-path: inset(0 100% 0 0);
		opacity: 0;
		transform: translateY(14px);
	}
	30% {
		opacity: 1;
	}
	100% {
		clip-path: inset(0 0 0 0);
		opacity: 1;
		transform: none;
	}
}

@media (max-width: 760px) {
	.plt-hero__staro {
		font-size: clamp(1.75rem, 8.4vw, 2.4rem);
	}

	.plt-hero__sada {
		margin-top: 10px;
		font-size: clamp(1.375rem, 6.4vw, 2rem);
	}

	.plt-hero__naslov--rebrand .plt-hero__logo,
	.plt-hero__slajd--lijevo .plt-hero__naslov--rebrand .plt-hero__logo,
	.plt-hero__slajd--desno .plt-hero__naslov--rebrand .plt-hero__logo {
		width: 100% !important;
	}

	.plt-hero__slajd--rebrand .plt-hero__podnaslov {
		font-size: 1.25rem;
	}

	/* Mobitel: točke i strelice karusela su na dnu – gumb ostaje iznad njih. */
	.plt-hero__slajd--rebrand .plt-hero__tekst {
		padding-top: 40px;
		padding-bottom: 120px;
	}

	.plt-hero__slajd--rebrand .plt-hero__naslov--rebrand .plt-hero__logo {
		width: 100% !important;
	}

	/* Logo na mobitelu pada na plate: tamnije od sredine prema dnu. */
	.plt-hero__slajd--rebrand .plt-hero__baner::after {
		background: linear-gradient(180deg, rgba(6, 19, 11, 0.6) 0%, rgba(6, 19, 11, 0.14) 22%, rgba(6, 19, 11, 0.12) 38%, rgba(6, 19, 11, 0.66) 58%, rgba(6, 19, 11, 0.86) 100%);
	}
}

/* Prvi slajd s videom (Marko 3. 11. 2026., skica 01 - DIZAJN_WEBA/2026-11-03_hero-video-raspored_v1.2.html):
 * na računalu copy lijevo – PLATA DO VRATA i „sada je” lijevo ispod u gornjem dijelu, logo dolje lijevo
 * ispod ugraviranog natpisa na dasci; sredina slobodna za video. Na mobitelu tamni veo, logo dolje. */
@media (min-width: 761px) {
	.plt-hero__slajd--rebrand.plt-hero__slajd--video .plt-hero__baner::after {
		background:
			linear-gradient(90deg, rgba(6, 19, 11, 0.84) 0%, rgba(6, 19, 11, 0.6) 30%, rgba(6, 19, 11, 0.08) 58%),
			linear-gradient(0deg, rgba(6, 19, 11, 0.45), transparent 30%);
	}

	.plt-hero__slajd--rebrand.plt-hero__slajd--video .plt-hero__tekst {
		align-items: flex-start;
		padding-top: clamp(130px, calc((100svh - 100px) * 0.3), 300px);
		padding-bottom: clamp(100px, 12vh, 140px);
	}

	.plt-hero__slajd--rebrand.plt-hero__slajd--video .plt-hero__naslov--rebrand,
	.plt-hero__slajd--rebrand.plt-hero__slajd--video .plt-hero__staro-sada {
		align-items: flex-start;
	}

	.plt-hero__slajd--rebrand.plt-hero__slajd--video .plt-hero__staro {
		font-size: clamp(2rem, 3.6vw, 3.4rem);
	}

	.plt-hero__slajd--rebrand.plt-hero__slajd--video .plt-hero__sada {
		margin-top: 0.4em;
		font-size: clamp(1.25rem, 2.4vw, 2.25rem);
	}

	.plt-hero__slajd--rebrand.plt-hero__slajd--video .plt-hero__naslov--rebrand .plt-hero__logo {
		width: min(560px, 30vw) !important;
	}
}

@media (max-width: 760px) {
	.plt-hero__slajd--rebrand.plt-hero__slajd--video .plt-hero__baner::after {
		background: rgba(6, 19, 11, 0.58);
	}

	/* PLATA DO VRATA 20 % manji nego na slajdu s fotografijom. */
	.plt-hero__slajd--rebrand.plt-hero__slajd--video .plt-hero__staro {
		font-size: clamp(1.4rem, 6.72vw, 1.92rem);
	}
}

@media (prefers-reduced-motion: reduce) {
	.plt-hero__video {
		display: none;
	}

	.plt-hero__slajd.is-aktivan .plt-hero__logo--crtanje {
		animation: none;
	}
}
/* Editor: slajdovi jedan ispod drugoga. */
.plt-hero-editor .plt-hero__baner {
	height: 420px;
	min-height: 0;
}

.plt-hero-editor .plt-hero__slika {
	transform: none;
}

.plt-hero-editor .plt-hero__slajd--iskljucen {
	opacity: 0.45;
}