/* =========================================================================
   Kvarnerski otoci — krk.hr/cetiri-otoka
   Tokeni su iz DESIGN.md. Nema vrijednosti izvan skale.
   ========================================================================= */

:root {
	/* Boje */
	--c-navy: #152F4C;
	--c-navy-deep: #0D1F35;
	--c-blue: #1D4E89;
	--c-blue-hover: #17406F;
	--c-cream: #F3F0EB;
	--c-white: #FFFFFF;
	--c-ink: #22303C;
	--c-muted: #6E7B88;
	--c-line: #E2DED7;

	/* Boje otoka (fallback; stvarna vrijednost dolazi inline iz admina) */
	--c-krk: #D9A441;
	--c-rab: #E0596B;
	--c-cres: #7FAF3E;
	--c-losinj: #34BFB4;
	--accent: var(--c-krk);

	/* Overlay */
	--overlay-hero: linear-gradient(180deg, rgba(13, 31, 53, .55) 0%, rgba(13, 31, 53, .15) 35%, rgba(13, 31, 53, .75) 100%);
	--overlay-card: linear-gradient(180deg, rgba(13, 31, 53, 0) 40%, rgba(13, 31, 53, .78) 100%);

	/* Tipografija */
	--ff-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
	--ff-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

	--fs-hero: clamp(2.4rem, 6vw, 4.5rem);
	--fs-h2: clamp(1.9rem, 3.6vw, 3rem);
	--fs-island: clamp(2rem, 4vw, 3.25rem);
	--fs-lead: clamp(1rem, 1.4vw, 1.2rem);
	--fs-body: 1rem;
	--fs-sm: .875rem;
	--fs-eyebrow: .75rem;

	/* Razmaci */
	--s-1: 4px;  --s-2: 8px;   --s-3: 12px; --s-4: 16px; --s-5: 24px;
	--s-6: 32px; --s-7: 48px;  --s-8: 64px; --s-9: 96px; --s-10: 128px;
	--section-y: clamp(56px, 8vw, 112px);

	/* Mreza */
	--container: 1280px;
	--gutter: clamp(20px, 4vw, 40px);
	--header-h: 76px;
	--wave-h: 90px;

	/* Radijusi i sjene */
	--r-sm: 6px;
	--r-md: 12px;
	--r-full: 999px;
	--sh-card: 0 1px 2px rgba(21, 47, 76, .06), 0 8px 24px rgba(21, 47, 76, .08);
	--sh-card-hover: 0 2px 4px rgba(21, 47, 76, .08), 0 16px 40px rgba(21, 47, 76, .16);

	/* Gibanje */
	--t-fast: 160ms ease;
	--t-base: 280ms cubic-bezier(.4, 0, .2, 1);
	--t-slow: 700ms cubic-bezier(.4, 0, .2, 1);
	--ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* -------------------------------------------------------------------------
   Otkrivanje pri skrolanju
   Element je sakriven samo ako JS radi (klasa na <html>), da bez skripte
   sadrzaj ostane vidljiv.
   ------------------------------------------------------------------------- */

.js [data-reveal] {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
	transition-delay: calc(var(--i, 0) * 90ms);
}
.js [data-reveal].is-in {
	opacity: 1;
	transform: none;
}

/* Traka napretka citanja */
.scroll-progress {
	position: fixed;
	inset: 0 0 auto;
	z-index: 60;
	height: 3px;
	pointer-events: none;
}
.scroll-progress span {
	display: block;
	height: 100%;
	width: 100%;
	background: linear-gradient(90deg, var(--c-krk), var(--c-rab), var(--c-cres), var(--c-losinj));
	transform: scaleX(0);
	transform-origin: 0 50%;
	transition: transform 120ms linear;
}

/* -------------------------------------------------------------------------
   Osnove
   ------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: var(--header-h);
}

body {
	margin: 0;
	background: var(--c-white);
	color: var(--c-ink);
	font: 400 var(--fs-body)/1.7 var(--ff-ui);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3 {
	margin: 0;
	font-family: var(--ff-display);
	font-weight: 400;
	letter-spacing: -.01em;
	color: var(--c-navy);
}

p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }

:focus-visible {
	outline: 3px solid var(--c-blue);
	outline-offset: 3px;
	border-radius: var(--r-sm);
}

.container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: var(--s-3) var(--s-5);
	background: var(--c-navy);
	color: var(--c-white);
	font-size: var(--fs-sm);
}
.skip-link:focus { left: var(--s-4); top: var(--s-4); }

/* -------------------------------------------------------------------------
   Tipografski pomocnici
   ------------------------------------------------------------------------- */

.eyebrow {
	margin: 0 0 var(--s-4);
	font-size: var(--fs-eyebrow);
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--c-muted);
}
.eyebrow--light { color: rgba(255, 255, 255, .85); }
.eyebrow--accent { color: var(--accent); }

/* -------------------------------------------------------------------------
   Gumbi
   ------------------------------------------------------------------------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--s-2);
	padding: var(--s-3) var(--s-6);
	min-height: 48px;
	border: 1px solid transparent;
	border-radius: var(--r-sm);
	font-size: .95rem;
	font-weight: 500;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--c-blue); color: var(--c-white); }
.btn--primary:hover { background: var(--c-blue-hover); }

.btn--outline {
	background: transparent;
	border-color: rgba(255, 255, 255, .7);
	color: var(--c-white);
}
.btn--outline:hover { background: rgba(255, 255, 255, .14); border-color: #fff; }

.btn--ghost {
	background: transparent;
	border-color: rgba(255, 255, 255, .55);
	color: var(--c-white);
	padding: var(--s-2) var(--s-5);
	min-height: 42px;
	font-size: .875rem;
}
.btn--ghost:hover { background: rgba(255, 255, 255, .16); border-color: #fff; }

.btn--wide { padding-inline: var(--s-7); }
.btn--wide svg { width: 20px; height: 20px; transition: transform var(--t-base); }
.btn--wide:hover svg { transform: translateX(4px); }

/* -------------------------------------------------------------------------
   Zaglavlje
   ------------------------------------------------------------------------- */

.site-header {
	position: fixed;
	inset: 0 0 auto;
	z-index: 50;
	transition: background-color var(--t-base), box-shadow var(--t-base);
}
.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-4);
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding: var(--s-4) var(--gutter);
	min-height: var(--header-h);
}
.site-header.is-scrolled {
	background: rgba(21, 47, 76, .94);
	backdrop-filter: blur(8px);
	box-shadow: 0 1px 0 rgba(255, 255, 255, .08);
}

.brand { color: var(--c-white); }
.brand__name {
	display: block;
	font-family: var(--ff-display);
	font-size: clamp(1rem, 2vw, 1.3rem);
	letter-spacing: .16em;
	text-transform: uppercase;
	line-height: 1.1;
}
.brand__wave { width: 64px; height: 8px; margin-top: var(--s-2); opacity: .75; }

/* -------------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------------- */

.hero {
	position: relative;
	display: grid;
	grid-template-rows: 1fr auto;
	min-height: 100svh;
	/* Donji razmak je tocno visina vala koji preko njega naleze — inace val
	   pojede tabove i strelice. */
	padding: var(--header-h) 0 var(--wave-h);
	overflow: hidden;
	background: var(--c-navy-deep);
	isolation: isolate;
}

.hero__stage { position: absolute; inset: 0; z-index: -2; }
.hero__stage::after {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--overlay-hero);
	z-index: 1;
}

.hero__slide {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	transition: opacity var(--t-slow);
}
.hero__slide.is-active { opacity: 1; }
.hero__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.06);
	transition: transform 400ms linear;
}
/* Ken Burns: aktivna fotografija polako putuje, ostale stoje. */
.hero__slide.is-active img { animation: co-kenburns 16s ease-out forwards; }

@keyframes co-kenburns {
	from { transform: scale(1.06) translate3d(0, 0, 0); }
	to   { transform: scale(1.14) translate3d(-1.2%, -1%, 0); }
}

.hero__loc {
	position: absolute;
	right: var(--gutter);
	bottom: calc(var(--s-9) + var(--s-6));
	z-index: 2;
	padding: var(--s-1) var(--s-3);
	border-radius: var(--r-full);
	background: rgba(13, 31, 53, .45);
	backdrop-filter: blur(4px);
	color: rgba(255, 255, 255, .9);
	font-size: .75rem;
	letter-spacing: .04em;
}

.hero__body { align-self: center; padding-block: var(--s-6); }

.hero__title {
	max-width: 16ch;
	margin: 0 0 var(--s-4);
	font-size: var(--fs-hero);
	line-height: 1.06;
	color: var(--c-white);
	text-shadow: 0 2px 24px rgba(13, 31, 53, .45);
}

.hero__lead {
	max-width: 46ch;
	margin-bottom: var(--s-6);
	font-size: var(--fs-lead);
	color: rgba(255, 255, 255, .92);
	text-shadow: 0 1px 12px rgba(13, 31, 53, .5);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* Mig da stranica ide dalje. */
.hero__cue {
	/* Postavlja se prema .hero (kak i strelice), pa mora imati izracunat odmak
	   iznad tabova: val + visina reda s tabovima. */
	position: absolute;
	left: 50%;
	bottom: calc(var(--wave-h) + 92px);
	translate: -50% 0;
	display: block;
	width: 22px;
	height: 34px;
	border: 1.5px solid rgba(255, 255, 255, .55);
	border-radius: var(--r-full);
}
.hero__cue i {
	position: absolute;
	left: 50%;
	top: 7px;
	translate: -50% 0;
	width: 3px;
	height: 7px;
	border-radius: var(--r-full);
	background: rgba(255, 255, 255, .9);
	animation: co-cue 1.9s var(--ease-out) infinite;
}
@keyframes co-cue {
	0%, 12%  { transform: translateY(0); opacity: 0; }
	28%      { opacity: 1; }
	70%      { transform: translateY(12px); opacity: 0; }
	100%     { transform: translateY(12px); opacity: 0; }
}

/* Bez position:relative — strelice se onda postavljaju prema cijelom heroju
   i stoje na pola visine, kak je u predlosku. */
.hero__controls { padding-bottom: var(--s-5); }
.hero__controls-inner {
	display: flex;
	align-items: center;
	justify-content: center;
}

.hero__tabs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--s-2);
}
.hero__tab {
	position: relative;
	padding: var(--s-3) var(--s-5) var(--s-4);
	border: 0;
	border-top: 2px solid rgba(255, 255, 255, .3);
	background: transparent;
	color: rgba(255, 255, 255, .7);
	font-family: var(--ff-ui);
	font-size: var(--fs-eyebrow);
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	cursor: pointer;
	transition: color var(--t-fast), border-color var(--t-fast);
}
.hero__tab:hover { color: var(--c-white); border-top-color: rgba(255, 255, 255, .7); }
.hero__tab.is-active { color: var(--c-white); border-top-color: var(--accent); }

.hero__arrow {
	position: absolute;
	top: 50%;
	translate: 0 -50%;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border: 1px solid rgba(255, 255, 255, .5);
	border-radius: var(--r-full);
	background: rgba(13, 31, 53, .2);
	color: var(--c-white);
	cursor: pointer;
	transition: background-color var(--t-fast), border-color var(--t-fast);
}
.hero__arrow:hover { background: rgba(255, 255, 255, .2); border-color: #fff; }
.hero__arrow svg { width: 22px; height: 22px; }
.hero__arrow--prev { left: var(--gutter); }
.hero__arrow--next { right: var(--gutter); }

/* -------------------------------------------------------------------------
   Izbor otoka
   ------------------------------------------------------------------------- */

/* Val koji spaja hero i svijetlu sekciju ispod. */
.wave-divider {
	position: relative;
	z-index: 1;
	margin-top: calc(-1 * var(--wave-h));
	line-height: 0;
	pointer-events: none;
}
.wave-divider svg { display: block; width: 100%; height: var(--wave-h); }
.wave-divider path { fill: var(--c-cream); }

.picker {
	padding-block: 0 var(--section-y);
	background: var(--c-cream);
}
.picker .section-head { padding-top: var(--s-5); }

.section-head { margin-bottom: var(--s-7); text-align: center; }
.section-head__title { font-size: var(--fs-h2); }
.section-head__sub {
	margin-top: var(--s-3);
	font-size: var(--fs-lead);
	color: var(--c-muted);
}

/* Karta i kartice stoje jedno uz drugo — isti sadrzaj, dva nacina odabira. */
.picker__grid {
	display: grid;
	grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
	gap: clamp(var(--s-6), 4vw, var(--s-8));
	align-items: center;
}

.cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--s-5);
}

.card { border-radius: var(--r-md); }
.card__link {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--r-md);
	box-shadow: var(--sh-card);
	transition: box-shadow var(--t-base), transform var(--t-base);
}
.card__link:hover { box-shadow: var(--sh-card-hover); transform: translateY(-4px); }

.card__media { display: block; aspect-ratio: 4 / 3; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow); }
.card__link:hover .card__media img { transform: scale(1.06); }

.card__link::after {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--overlay-card);
	pointer-events: none;
}

.card__body {
	position: absolute;
	inset: auto 0 0;
	z-index: 1;
	padding: var(--s-5);
	color: var(--c-white);
}
.card__name {
	display: block;
	font-family: var(--ff-display);
	font-size: clamp(1.75rem, 2.6vw, 2.4rem);
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: .01em;
}
.card__tag {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	margin-top: var(--s-2);
	font-size: var(--fs-sm);
	color: rgba(255, 255, 255, .92);
}
.card__tag i {
	display: block;
	width: 28px;
	height: 2px;
	flex: none;
	background: var(--accent);
	transform-origin: 0 50%;
	transition: transform var(--t-base);
}
.card__link:hover .card__tag i,
.card.is-linked .card__tag i { transform: scaleX(1.7); }

/* Kad se pokaze otok na karti, odgovarajuca kartica se javi. */
.card.is-linked .card__link {
	box-shadow: var(--sh-card-hover);
	transform: translateY(-4px);
}
.card.is-linked .card__media img { transform: scale(1.06); }

/* -------------------------------------------------------------------------
   Karta Kvarnera
   ------------------------------------------------------------------------- */

.map {
	position: relative;
	border-radius: var(--r-md);
	overflow: hidden;
	box-shadow: var(--sh-card);
	background: #D6E6F0;
}
.map__svg { display: block; width: 100%; height: auto; }

/* Kopno je "papir", more tonirano — tak otoci u boji odmah iskoce. */
.map__mainland { fill: #EEF1F2; }
.map__islets { fill: #E1E7EA; }

.map__waves path {
	fill: none;
	stroke: #fff;
	stroke-width: 2.5;
	opacity: .38;
	animation: co-wave 26s linear infinite;
}
.map__waves path:nth-child(2) { animation-duration: 34s; animation-direction: reverse; }
.map__waves path:nth-child(3) { animation-duration: 30s; }
.map__waves path:nth-child(4) { animation-duration: 38s; animation-direction: reverse; }

@keyframes co-wave {
	from { transform: translateX(0); }
	to   { transform: translateX(-520px); }
}

.map__ferries path {
	fill: none;
	stroke: var(--c-navy);
	stroke-width: 3.5;
	stroke-linecap: round;
	stroke-dasharray: 2 15;
	opacity: .55;
	animation: co-ferry 2.4s linear infinite;
}
@keyframes co-ferry {
	to { stroke-dashoffset: -18; }
}

/* --- otok kao gumb --- */

.map__island {
	cursor: pointer;
	/* transform-box: fill-box drzi ishodiste na samom otoku, ne na cijelom SVG-u */
	transform-box: fill-box;
	transform-origin: center;
}
.map__hit {
	fill: transparent;
	stroke: transparent;
	stroke-width: 20;
	stroke-linejoin: round;
	pointer-events: all;
}
.map__island .map__shape {
	fill: color-mix(in srgb, var(--accent) 70%, #F2F6F9);
	stroke: color-mix(in srgb, var(--accent) 85%, #152F4C);
	stroke-width: 2;
	stroke-linejoin: round;
	transform-box: fill-box;
	transform-origin: center;
	transition: fill var(--t-base), transform 420ms var(--ease-out), filter var(--t-base);
}
.map__island:hover .map__shape,
.map__island:focus-visible .map__shape,
.map__island.is-active .map__shape {
	fill: var(--accent);
	transform: translateY(-8px) scale(1.03);
	filter: url(#co-lift);
}

.map__leader {
	stroke: var(--c-navy);
	stroke-width: 1.4;
	opacity: .35;
	transition: opacity var(--t-base);
}
.map__island:hover .map__leader,
.map__island.is-active .map__leader { opacity: .7; }

.map__dot { fill: #fff; stroke: var(--c-navy); stroke-width: 3; }
.map__halo {
	fill: var(--accent);
	opacity: 0;
	transform-box: fill-box;
	transform-origin: center;
}
.map__island:hover .map__halo,
.map__island.is-active .map__halo { animation: co-halo 1.6s var(--ease-out) infinite; }

@keyframes co-halo {
	0%   { opacity: .5; transform: scale(1); }
	100% { opacity: 0;  transform: scale(2.6); }
}

.map__label {
	font-family: var(--ff-display);
	font-size: 44px;
	fill: var(--c-navy);
	transition: fill var(--t-base);
}
.map__island:hover .map__label,
.map__island.is-active .map__label { fill: color-mix(in srgb, var(--accent) 80%, var(--c-navy)); }

.map__town {
	font-family: var(--ff-ui);
	font-size: 20px;
	letter-spacing: .06em;
	fill: var(--c-muted);
}

.map__context text {
	font-family: var(--ff-ui);
	fill: #8FA0AF;
}
.map__context-area { font-size: 24px; letter-spacing: .3em; }
.map__context-city { font-size: 22px; letter-spacing: .12em; }

.map__note {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	padding: var(--s-3) var(--s-4);
	background: rgba(255, 255, 255, .85);
	border-top: 1px solid var(--c-line);
	font-size: .75rem;
	color: var(--c-muted);
}
.map__note-dash {
	flex: none;
	width: 26px;
	height: 0;
	border-top: 2px dashed var(--c-blue);
	opacity: .6;
}

/* -------------------------------------------------------------------------
   Sekcija otoka
   ------------------------------------------------------------------------- */

.island { padding-block: var(--section-y); }
.island--alt { background: var(--c-cream); }

.island__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: clamp(var(--s-6), 5vw, var(--s-9));
	align-items: center;
}
.island--flip .island__media { order: 2; }

.island__media {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--s-3);
}
.island__shot {
	position: relative;
	display: block;
	overflow: hidden;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--r-md);
	box-shadow: var(--sh-card);
	background: var(--c-line);
	cursor: zoom-in;
	transition: transform 420ms var(--ease-out), box-shadow 420ms var(--ease-out);
}
.island__shot img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 700ms var(--ease-out);
}
.island__shot:hover,
.island__shot:focus-visible {
	transform: translateY(-8px);
	box-shadow: var(--sh-card-hover);
}
.island__shot:hover img,
.island__shot:focus-visible img { transform: scale(1.09); }

/* Povecalo se javi tek na hover — inace bi sjedilo preko fotografije. */
.island__zoom {
	position: absolute;
	right: var(--s-3);
	bottom: var(--s-3);
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: var(--r-full);
	background: rgba(13, 31, 53, .55);
	backdrop-filter: blur(6px);
	color: #fff;
	opacity: 0;
	transform: translateY(6px) scale(.9);
	transition: opacity var(--t-base), transform var(--t-base);
}
.island__zoom svg { width: 20px; height: 20px; }
.island__shot:hover .island__zoom,
.island__shot:focus-visible .island__zoom {
	opacity: 1;
	transform: none;
}
.island__shot--lead { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
.island__shot--small { aspect-ratio: 1 / 1; }

/* Dvije fotografije: druga preko cijele sirine, da ne ostane prazno pola retka. */
.island__media--2 .island__shot--small { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
/* Jedna fotografija: sama nosi cijeli stupac. */
.island__media--1 .island__shot--lead { aspect-ratio: 3 / 2; }

.island__text { max-width: 54ch; }
.island__name {
	margin-bottom: var(--s-4);
	font-size: var(--fs-island);
	line-height: 1;
	text-transform: uppercase;
}
.island__lead {
	margin-bottom: var(--s-6);
	font-size: var(--fs-lead);
	color: var(--c-ink);
}

.facts { margin: 0 0 var(--s-7); }
.facts__row {
	display: grid;
	grid-template-columns: minmax(120px, 34%) 1fr;
	gap: var(--s-4);
	padding-block: var(--s-3);
	border-top: 1px solid var(--c-line);
}
.facts__row:last-child { border-bottom: 1px solid var(--c-line); }

/* Redci se otvaraju jedan za drugim kad sekcija udje u kadar. */
.js .island__text[data-reveal] .facts__row {
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out);
	transition-delay: calc(260ms + var(--i, 0) * 80ms);
}
.js .island__text[data-reveal].is-in .facts__row {
	opacity: 1;
	transform: none;
}
.facts dt {
	font-size: var(--fs-sm);
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--c-muted);
}
.facts dd { margin: 0; font-size: var(--fs-body); }

/* -------------------------------------------------------------------------
   Povecalo (native <dialog>)
   ------------------------------------------------------------------------- */

.lightbox {
	width: min(96vw, 1400px);
	max-width: none;
	max-height: 94svh;
	padding: 0;
	border: 0;
	background: transparent;
	overflow: visible;
}
.lightbox::backdrop {
	background: rgba(9, 20, 34, .92);
	backdrop-filter: blur(6px);
}

.lightbox__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--s-4);
}
.lightbox__img {
	display: block;
	max-width: 100%;
	max-height: 80svh;
	width: auto;
	height: auto;
	border-radius: var(--r-md);
	box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
	background: rgba(255, 255, 255, .04);
}
.lightbox__caption {
	max-width: 60ch;
	text-align: center;
	font-size: var(--fs-sm);
	color: rgba(255, 255, 255, .8);
}

.lightbox__btn {
	position: absolute;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border: 1px solid rgba(255, 255, 255, .35);
	border-radius: var(--r-full);
	background: rgba(9, 20, 34, .55);
	color: #fff;
	cursor: pointer;
	transition: background-color var(--t-fast), border-color var(--t-fast);
}
.lightbox__btn:hover { background: rgba(255, 255, 255, .18); border-color: #fff; }
.lightbox__btn svg { width: 22px; height: 22px; }

.lightbox__btn--close { top: -8px; right: -8px; }
.lightbox__btn--prev { top: 50%; left: -22px; translate: 0 -50%; }
.lightbox__btn--next { top: 50%; right: -22px; translate: 0 -50%; }

/* Otvaranje: kratki zoom-in, da klik ima tezinu. */
.lightbox[open] .lightbox__inner { animation: co-pop 320ms var(--ease-out); }
@keyframes co-pop {
	from { opacity: 0; transform: scale(.94); }
	to   { opacity: 1; transform: none; }
}

@media (max-width: 767px) {
	.lightbox { width: 94vw; }
	.lightbox__btn { width: 42px; height: 42px; }
	.lightbox__btn--close { top: -10px; right: 0; }
	.lightbox__btn--prev { left: 0; top: auto; bottom: -56px; translate: none; }
	.lightbox__btn--next { right: 0; top: auto; bottom: -56px; translate: none; }
	.lightbox__img { max-height: 68svh; }
}

/* -------------------------------------------------------------------------
   Podnozje
   ------------------------------------------------------------------------- */

.site-footer {
	padding-block: var(--section-y) var(--s-7);
	background: var(--c-navy);
	color: rgba(255, 255, 255, .8);
}
.site-footer__top {
	display: grid;
	/* Logotipi su siroki — desna strana dobiva vecinu sirine da ne budu minijaturni. */
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 2.1fr);
	gap: var(--s-8);
	padding-bottom: var(--s-7);
	border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.site-footer__brand { color: var(--c-white); }
.site-footer__brand p {
	margin-top: var(--s-4);
	font-size: var(--fs-sm);
	color: rgba(255, 255, 255, .7);
}

.site-footer__links h2 {
	margin-bottom: var(--s-5);
	font-family: var(--ff-ui);
	font-size: var(--fs-eyebrow);
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .6);
}
/* Logotipi TZ-ova. Svaki je u svojoj paleti, pa idu na bijelu plocicu —
   inace bi se pola njih izgubilo na tamnoj pozadini. */
.boards {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--s-4);
}
.boards__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--s-2);
}
.boards__tile {
	display: grid;
	place-items: center;
	width: 100%;
	min-height: 100px;
	padding: var(--s-4);
	border-radius: var(--r-md);
	background: var(--c-white);
	transition: transform var(--t-base), box-shadow var(--t-base);
}
.boards__link:hover .boards__tile {
	transform: translateY(-4px);
	box-shadow: 0 10px 26px rgba(0, 0, 0, .28);
}
.boards__tile img { width: auto; max-width: 100%; max-height: 64px; }
.boards__tile--text {
	font-family: var(--ff-display);
	font-size: 1.4rem;
	color: var(--c-navy);
}
.boards__domain {
	font-size: var(--fs-sm);
	color: rgba(255, 255, 255, .6);
	transition: color var(--t-fast);
}
.boards__link:hover .boards__domain { color: var(--c-white); }

.site-footer__legal {
	padding-top: var(--s-5);
	font-size: var(--fs-sm);
	color: rgba(255, 255, 255, .55);
}

/* -------------------------------------------------------------------------
   Rezervni predlozak
   ------------------------------------------------------------------------- */

.page-simple { padding-block: calc(var(--header-h) + var(--section-y)) var(--section-y); }
.page-simple__title { margin-bottom: var(--s-5); font-size: var(--fs-h2); }
.page-simple__body { margin-bottom: var(--s-6); }
.page-simple .btn { margin-top: var(--s-5); }

/* -------------------------------------------------------------------------
   Responzivno — 1024 / 768 / 480
   ------------------------------------------------------------------------- */

@media (max-width: 1023px) {
	.picker__grid { grid-template-columns: 1fr; gap: var(--s-7); }
	.picker__map { max-width: 520px; margin-inline: auto; width: 100%; }

	.island__grid { grid-template-columns: 1fr; gap: var(--s-7); }
	.island--flip .island__media { order: 0; }
	.island__text { max-width: none; }
}

@media (max-width: 767px) {
	:root { --header-h: 64px; }

	.hero { min-height: 92svh; }
	.hero__loc { display: none; }
	.hero__arrow { width: 42px; height: 42px; }
	.hero__arrow--prev { left: var(--s-3); }
	.hero__arrow--next { right: var(--s-3); }
	.hero__controls { padding-bottom: var(--s-5); }
	.hero__tab { padding: var(--s-2) var(--s-3) var(--s-3); letter-spacing: .12em; }

	.site-header__cta { display: none; }
	/* Na mobitelu je hero ionako kratak i gumbi su preko cijele sirine —
	   mig za skrolanje bi se samo tiskal med njima. */
	.hero__cue { display: none; }

	.site-footer__top { grid-template-columns: 1fr; gap: var(--s-7); }
}

@media (max-width: 767px) {
	:root { --wave-h: 50px; }

	/* Na mobitelu su natpisi na karti prerijetki da bi se citali u punoj velicini. */
	.map__label { font-size: 54px; }
	.map__town { font-size: 26px; }
	.map__context-area { font-size: 30px; }
	.map__context-city { font-size: 28px; }
	.map__dot { r: 8; }
}

@media (max-width: 599px) {
	.cards { grid-template-columns: 1fr; }
	.card__media { aspect-ratio: 3 / 2; }

	.hero__actions { flex-direction: column; align-items: stretch; }
	.hero__actions .btn { width: 100%; }

	.island__media { grid-template-columns: 1fr 1fr; }
	.facts__row { grid-template-columns: 1fr; gap: var(--s-1); }
	.boards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* -------------------------------------------------------------------------
   Manje gibanja
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
	/* Nista se ne "otkriva" — sve je odmah tu. */
	.js [data-reveal],
	.js .island__text[data-reveal] .facts__row {
		opacity: 1 !important;
		transform: none !important;
	}
	.hero__cue { display: none; }
}