/**
 * WP-InTeh — stilovi za page builder module, layout i dodatne komponente.
 */

/* ---------- Layout wrapperi modula ---------- */
.wpinteh-layout { width: 100%; }
.wpi-module { position: relative; }
.wpi-narrow { max-width: 820px; }

.wpi-pad-none   { padding-block: 0; }
.wpi-pad-small  { padding-block: calc(28px * var(--wpi-sscale, 1)); }
.wpi-pad-normal { padding-block: calc(56px * var(--wpi-sscale, 1)); }
.wpi-pad-large  { padding-block: calc(96px * var(--wpi-sscale, 1)); }

/* Odvojeni gornji/donji razmak modula — nadjačava wpi-pad-* pa se
   susjedni moduli mogu potpuno stopiti (bez praznog prostora). */
.wpi-pt-none   { padding-top: 0 !important; }
.wpi-pt-small  { padding-top: calc(28px * var(--wpi-sscale, 1)) !important; }
.wpi-pt-normal { padding-top: calc(56px * var(--wpi-sscale, 1)) !important; }
.wpi-pt-large  { padding-top: calc(96px * var(--wpi-sscale, 1)) !important; }
.wpi-pb-none   { padding-bottom: 0 !important; }
.wpi-pb-small  { padding-bottom: calc(28px * var(--wpi-sscale, 1)) !important; }
.wpi-pb-normal { padding-bottom: calc(56px * var(--wpi-sscale, 1)) !important; }
.wpi-pb-large  { padding-bottom: calc(96px * var(--wpi-sscale, 1)) !important; }

.wpi-bg-alt { background: var(--wpi-color-bg-alt); }
.wpi-bg-primary { background: var(--wpi-color-primary); }
.wpi-bg-secondary { background: var(--wpi-color-secondary); }
.wpi-bg-primary, .wpi-bg-primary h1, .wpi-bg-primary h2, .wpi-bg-primary h3, .wpi-bg-primary p,
.wpi-bg-secondary, .wpi-bg-secondary h1, .wpi-bg-secondary h2, .wpi-bg-secondary h3, .wpi-bg-secondary p { color: #fff; }
.wpi-bg-primary a:not(.wpi-btn), .wpi-bg-secondary a:not(.wpi-btn) { color: #fff; text-decoration: underline; }

/* ---------- Heading modul ---------- */
.wpi-heading-module h1, .wpi-heading-module h2, .wpi-heading-module h3 { margin-bottom: .3em; }
.wpi-heading-sub { color: var(--wpi-color-text-muted); font-size: 1.15rem; margin: 0; }
.wpi-bg-primary .wpi-heading-sub, .wpi-bg-secondary .wpi-heading-sub { color: rgba(255,255,255,.85); }

/* ---------- Text modul ---------- */
.wpi-text-module { font-size: 1.05rem; }
.wpi-text-module > *:last-child { margin-bottom: 0; }

/* ---------- Button modul ---------- */
.wpi-button-module { margin-block: 4px; }
.wpi-bg-primary .wpi-btn { background: #fff; color: var(--wpi-color-primary); }
.wpi-bg-primary .wpi-btn:hover { background: rgba(255,255,255,.9); }

/* ---------- Image modul ---------- */
.wpi-image-module img { display: inline-block; border-radius: var(--wpi-radius); }

/* ---------- Search modul ----------
   Uredna, ograničena cjelina — naslov + live tražilica bez gumba.
   Ne razvlači se preko cijelog ekrana ni kad je sekcija pune širine. */
.wpi-search-module {
	max-width: 680px;
	margin-inline: auto;
	padding-block: 8px;
}
.wpi-search-module-title {
	margin: 0 0 6px;
	font-size: 1.45rem;
}
.wpi-search-module-title::after {
	content: '';
	display: block;
	width: 52px;
	height: 3px;
	border-radius: 3px;
	margin-top: 10px;
	background: linear-gradient(90deg, var(--wpi-color-primary), var(--wpi-color-accent));
}
.wpi-search-module .wpi-search-form {
	max-width: none;
	margin-top: 16px;
}
.wpi-search-module .wpi-search-form.wpi-search-live input[type="search"] {
	padding-block: 14px;
	font-size: 1rem;
	box-shadow: 0 4px 18px rgba(15, 23, 42, .06);
}
/* Centrirana varijanta (postavka "Poravnanje: Sredina") */
.wpi-search-module-center { text-align: center; }
.wpi-search-module-center .wpi-search-module-title::after { margin-inline: auto; }

/* Puna širina sekcije = i modul se stvarno razvuče */
.wpi-full-width .wpi-search-module { max-width: none; }

/* =====================================================================
   20 GOTOVIH STILOVA SEARCH FORME (postavka modula "Stil forme")
   Klasa wpi-sform-* na omotaču; nadjačava globalni wpi-sbar-* izbor.
   ===================================================================== */
/* classic = zadani izgled (kapsula + meka sjena) — bez dodatnih pravila */

/* Oblik rubova (postavka "Oblik rubova") — nadjačava zaobljenost BILO KOJEG
   od 20 stilova. Neovisno od stila forme. */
.wpi-sradius-square input.wpi-search-field,
.wpi-sradius-square .wpi-search-form,
.wpi-sradius-square .wpi-live-results { border-radius: 0 !important; }
.wpi-sradius-soft input.wpi-search-field,
.wpi-sradius-soft .wpi-search-form,
.wpi-sradius-soft .wpi-live-results { border-radius: 8px !important; }
.wpi-sradius-rounded input.wpi-search-field,
.wpi-sradius-rounded .wpi-search-form,
.wpi-sradius-rounded .wpi-live-results { border-radius: var(--wpi-radius) !important; }
.wpi-sradius-pill input.wpi-search-field,
.wpi-sradius-pill .wpi-search-form { border-radius: 999px !important; }
.wpi-sradius-pill .wpi-live-results { border-radius: 18px !important; }

.wpi-search-module.wpi-sform-square input.wpi-search-field { border-radius: 0; }
.wpi-search-module.wpi-sform-square .wpi-live-results { border-radius: 0; }

.wpi-search-module.wpi-sform-rounded input.wpi-search-field { border-radius: var(--wpi-radius); }

.wpi-search-module.wpi-sform-underline input.wpi-search-field {
	border-radius: 0;
	border: none;
	border-bottom: 2px solid var(--wpi-color-border);
	background: transparent;
	box-shadow: none;
	padding-inline: 34px 4px;
}
.wpi-search-module.wpi-sform-underline input.wpi-search-field:focus { border-bottom-color: var(--wpi-color-primary); box-shadow: none; }
.wpi-search-module.wpi-sform-underline .wpi-search-live-ico { left: 4px; }

.wpi-search-module.wpi-sform-underline-gradient input.wpi-search-field {
	border-radius: 0;
	border: none;
	background:
		linear-gradient(var(--wpi-color-bg), var(--wpi-color-bg)) padding-box,
		linear-gradient(90deg, var(--wpi-color-primary), var(--wpi-color-accent)) bottom / 100% 3px no-repeat;
	box-shadow: none;
}

.wpi-search-module.wpi-sform-filled input.wpi-search-field {
	border-color: transparent;
	background: var(--wpi-color-bg-alt);
	box-shadow: none;
}

.wpi-search-module.wpi-sform-soft input.wpi-search-field {
	border-color: transparent;
	background: color-mix(in srgb, var(--wpi-color-primary) 8%, var(--wpi-color-bg));
}

.wpi-search-module.wpi-sform-outline-primary input.wpi-search-field { border-color: var(--wpi-color-primary); }
.wpi-search-module.wpi-sform-outline-primary .wpi-search-live-ico { color: var(--wpi-color-primary); }

.wpi-search-module.wpi-sform-gradient input.wpi-search-field {
	border: 2px solid transparent;
	background:
		linear-gradient(var(--wpi-color-bg), var(--wpi-color-bg)) padding-box,
		linear-gradient(90deg, var(--wpi-color-primary), var(--wpi-color-accent)) border-box;
}

.wpi-search-module.wpi-sform-glow input.wpi-search-field {
	border-color: var(--wpi-color-primary);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--wpi-color-primary) 16%, transparent);
}

.wpi-search-module.wpi-sform-shadow input.wpi-search-field {
	border-color: transparent;
	box-shadow: 0 14px 38px rgba(15, 23, 42, .16);
}

.wpi-search-module.wpi-sform-inset input.wpi-search-field {
	border-color: transparent;
	background: var(--wpi-color-bg-alt);
	box-shadow: inset 0 2px 6px rgba(15, 23, 42, .12);
}

.wpi-search-module.wpi-sform-dark input.wpi-search-field {
	background: var(--wpi-color-secondary);
	border-color: transparent;
	color: #fff;
}
.wpi-search-module.wpi-sform-dark input.wpi-search-field::placeholder { color: rgba(255, 255, 255, .55); }
.wpi-search-module.wpi-sform-dark .wpi-search-live-ico { color: rgba(255, 255, 255, .7); }

.wpi-search-module.wpi-sform-glass input.wpi-search-field {
	background: rgba(255, 255, 255, .35);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border-color: rgba(255, 255, 255, .5);
}

.wpi-search-module.wpi-sform-neon input.wpi-search-field {
	background: #0f172a;
	border-color: #22d3ee;
	color: #e0faff;
	box-shadow: 0 0 14px rgba(34, 211, 238, .45);
}
.wpi-search-module.wpi-sform-neon input.wpi-search-field::placeholder { color: rgba(224, 250, 255, .5); }
.wpi-search-module.wpi-sform-neon .wpi-search-live-ico { color: #22d3ee; }

.wpi-search-module.wpi-sform-retro input.wpi-search-field {
	border-radius: 0;
	border: 2px solid var(--wpi-color-heading);
	box-shadow: 5px 5px 0 var(--wpi-color-primary);
}
.wpi-search-module.wpi-sform-retro .wpi-live-results { border-radius: 0; }

.wpi-search-module.wpi-sform-double input.wpi-search-field {
	border-color: var(--wpi-color-primary);
	box-shadow: 0 0 0 3px var(--wpi-color-bg), 0 0 0 5px color-mix(in srgb, var(--wpi-color-primary) 45%, transparent);
}

.wpi-search-module.wpi-sform-dashed input.wpi-search-field {
	border: 2px dashed color-mix(in srgb, var(--wpi-color-primary) 55%, transparent);
	border-radius: 16px;
}

.wpi-search-module.wpi-sform-elegant input.wpi-search-field {
	border-radius: 0;
	border-width: 1px;
	letter-spacing: .06em;
	padding-block: 11px;
	box-shadow: none;
}
.wpi-search-module.wpi-sform-elegant input.wpi-search-field::placeholder { letter-spacing: .12em; text-transform: uppercase; font-size: .8rem; }

.wpi-search-module.wpi-sform-xl input.wpi-search-field {
	padding-block: 19px;
	padding-left: 52px;
	font-size: 1.12rem;
	box-shadow: 0 10px 30px rgba(15, 23, 42, .1);
}
.wpi-search-module.wpi-sform-xl .wpi-search-live-ico { left: 20px; }
.wpi-search-module.wpi-sform-xl .wpi-search-live-ico svg { width: 21px; height: 21px; }

/* ---------- Toast (kopiranje poveznice) ---------- */
.wpi-toast {
	position: fixed;
	bottom: 28px;
	left: 50%;
	transform: translateX(-50%) translateY(20px);
	background: var(--wpi-color-secondary, #0f172a);
	color: #fff;
	padding: 12px 22px;
	border-radius: 999px;
	font-size: .9rem;
	font-weight: 600;
	box-shadow: 0 8px 30px rgba(0,0,0,.25);
	opacity: 0;
	transition: opacity .3s ease, transform .3s ease;
	z-index: 100000;
}
.wpi-toast-show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Back to top ---------- */
.wpi-back-to-top {
	position: fixed;
	bottom: 28px;
	right: 28px;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: none;
	background: var(--wpi-color-primary);
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--wpi-shadow);
	opacity: 0;
	transform: translateY(10px);
	transition: opacity var(--wpi-transition), transform var(--wpi-transition), background var(--wpi-transition);
	z-index: 9990;
}
.wpi-back-to-top[hidden] { display: none; } /* display:flex ne smije pregaziti [hidden] */
.wpi-back-to-top.wpi-visible { opacity: 1; transform: translateY(0); }
.wpi-back-to-top:hover { background: var(--wpi-color-primary-hover); }
.wpi-back-to-top svg { width: 22px; height: 22px; }

/* ---------- Tagovi / kategorije na singleu ---------- */
.wpi-single-cats a {
	display: inline-block;
	background: color-mix(in srgb, var(--wpi-color-primary) 14%, transparent);
	color: var(--wpi-color-primary);
	padding: 4px 12px;
	border-radius: 999px;
	font-size: .78rem;
	font-weight: 700;
	margin-bottom: 14px;
}
.wpi-single-tags { max-width: 760px; margin: 24px auto; display: flex; flex-wrap: wrap; gap: 8px; }
.wpi-single-tags a {
	background: var(--wpi-color-bg-alt);
	border: 1px solid var(--wpi-color-border);
	padding: 5px 14px;
	border-radius: 999px;
	font-size: .84rem;
	color: var(--wpi-color-text-muted);
}
.wpi-single-tags a:hover { border-color: var(--wpi-color-primary); color: var(--wpi-color-primary); }

/* ---------- Card "pročitaj više" — 9 varijacija izgleda (more_style) ---------- */
.wpi-card-more {
	font-weight: 600;
	font-size: .9rem;
	margin-top: auto;
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--wpi-color-primary);
	text-decoration: none;
	transition: color .2s ease, gap .2s ease, background .2s ease, transform .2s ease, border-color .2s ease;
}
.wpi-card-more-arrow { transition: transform .2s ease, opacity .2s ease; line-height: 1; }

/* arrow (zadano) — strelica se pomakne udesno */
.wpi-more-arrow:hover .wpi-card-more-arrow { transform: translateX(4px); }
.wpi-more-arrow:hover { color: var(--wpi-color-accent, var(--wpi-color-primary)); }

/* slide — strelica klizne iz teksta na hover */
.wpi-more-slide .wpi-card-more-arrow { opacity: 0; transform: translateX(-6px); }
.wpi-more-slide:hover .wpi-card-more-arrow { opacity: 1; transform: translateX(2px); }
.wpi-more-slide:hover { gap: 9px; color: var(--wpi-color-accent, var(--wpi-color-primary)); }

/* underline — animirani podcrt, bez strelice */
.wpi-more-underline .wpi-card-more-arrow { display: none; }
.wpi-more-underline .wpi-card-more-txt {
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 0 2px;
	background-repeat: no-repeat;
	background-position: 0 100%;
	padding-bottom: 2px;
	transition: background-size .28s cubic-bezier(.4, 0, .2, 1);
}
.wpi-more-underline:hover .wpi-card-more-txt { background-size: 100% 2px; }

/* button — ispunjeni gumb (primarna) */
.wpi-more-button {
	background: var(--wpi-color-primary);
	color: #fff;
	padding: 8px 16px;
	border-radius: 999px;
}
.wpi-more-button:hover { background: var(--wpi-color-accent, var(--wpi-color-primary)); color: #fff; transform: translateY(-1px); }
.wpi-more-button:hover .wpi-card-more-arrow { transform: translateX(3px); }

/* outline — gumb s obrubom */
.wpi-more-outline {
	border: 1.5px solid var(--wpi-color-primary);
	padding: 7px 15px;
	border-radius: 999px;
}
.wpi-more-outline:hover { background: var(--wpi-color-primary); color: #fff; }

/* soft — meki tint gumb */
.wpi-more-soft {
	background: color-mix(in srgb, var(--wpi-color-primary) 12%, transparent);
	padding: 8px 16px;
	border-radius: 10px;
}
.wpi-more-soft:hover { background: color-mix(in srgb, var(--wpi-color-primary) 20%, transparent); transform: translateY(-1px); }
.wpi-more-soft:hover .wpi-card-more-arrow { transform: translateX(3px); }

/* pill — kapsula sa strelicom u krugu */
.wpi-more-pill {
	background: var(--wpi-color-primary);
	color: #fff;
	padding: 6px 6px 6px 16px;
	border-radius: 999px;
	gap: 10px;
}
.wpi-more-pill .wpi-card-more-arrow {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	background: rgba(255, 255, 255, .22);
	border-radius: 50%;
}
.wpi-more-pill:hover { background: var(--wpi-color-accent, var(--wpi-color-primary)); color: #fff; }
.wpi-more-pill:hover .wpi-card-more-arrow { transform: translateX(2px); }

/* caps — velika razmaknuta slova */
.wpi-more-caps { text-transform: uppercase; letter-spacing: .12em; font-size: .74rem; font-weight: 800; }
.wpi-more-caps:hover .wpi-card-more-arrow { transform: translateX(4px); }
.wpi-more-caps:hover { color: var(--wpi-color-accent, var(--wpi-color-primary)); }

/* boxed — kockasta pločica */
.wpi-more-boxed {
	border: 1px solid var(--wpi-color-border);
	color: var(--wpi-color-heading, #16202e);
	padding: 8px 14px;
	border-radius: 6px;
}
.wpi-more-boxed:hover { border-color: var(--wpi-color-primary); color: var(--wpi-color-primary); background: var(--wpi-color-bg-alt); }
.wpi-more-boxed:hover .wpi-card-more-arrow { transform: translateX(3px); }

/* Oblik gumba "Pročitaj više" (more_shape) — nadjačava radius bilo koje varijante.
   Za pill oblik i strelica-u-krugu ostaje okrugla. */
.wpi-moresh-square { border-radius: 0 !important; }
.wpi-moresh-soft { border-radius: 8px !important; }
.wpi-moresh-rounded { border-radius: var(--wpi-radius) !important; }
.wpi-moresh-pill { border-radius: 999px !important; }

/* ---------- Hero / banner ---------- */
.wpi-hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--wpi-color-secondary);
	background-size: cover;
	background-position: center;
	border-radius: var(--wpi-radius);
	overflow: hidden;
	padding: 48px 32px;
}
.wpi-full-width .wpi-hero { border-radius: 0; }
/* Bez slike: slojeviti gradijent + suptilni sjaj (wow fallback) */
.wpi-hero:not(.wpi-hero-has-img) {
	background:
		radial-gradient(ellipse 70% 90% at 80% 10%, color-mix(in srgb, var(--wpi-color-primary) 45%, transparent), transparent),
		radial-gradient(ellipse 50% 70% at 15% 90%, color-mix(in srgb, var(--wpi-color-accent) 22%, transparent), transparent),
		linear-gradient(150deg, var(--wpi-color-secondary), color-mix(in srgb, var(--wpi-color-secondary) 55%, var(--wpi-color-primary)));
}
.wpi-hero-small  { min-height: 280px; }
.wpi-hero-normal { min-height: 420px; }
.wpi-hero-large  { min-height: 560px; }
.wpi-hero-full   { min-height: calc(100vh - 90px); }
.wpi-hero-overlay { position: absolute; inset: 0; }
.wpi-hero-overlay-dark { background: linear-gradient(160deg, rgba(2, 6, 23, .72), rgba(2, 6, 23, .45)); }
.wpi-hero-overlay-primary { background: color-mix(in srgb, var(--wpi-color-primary) 80%, #000 10%); opacity: .88; }
.wpi-hero-content { position: relative; z-index: 1; max-width: 780px; text-align: center; }
.wpi-hero-align-left .wpi-hero-content { text-align: left; margin-right: auto; }
.wpi-hero-title { color: #fff; font-size: clamp(2.2rem, 5vw, 3.6rem); margin-bottom: .35em; letter-spacing: -.02em; }
.wpi-hero-sub { color: rgba(255, 255, 255, .88); font-size: clamp(1.05rem, 2vw, 1.3rem); margin-bottom: 1.6em; }
.wpi-hero-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.wpi-hero-align-left .wpi-hero-btns { justify-content: flex-start; }
.wpi-hero-btn2 { border-color: #fff; color: #fff; }
.wpi-hero-btn2:hover { background: #fff; color: var(--wpi-color-heading); }

/* ---------- Vijesti traka (ticker) ---------- */
.wpi-ticker {
	display: flex;
	align-items: stretch;
	background: var(--wpi-color-secondary);
	color: #fff;
	overflow: hidden;
}
.wpi-ticker-badge {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	background: linear-gradient(135deg, var(--wpi-color-primary), var(--wpi-color-accent));
	color: #fff;
	padding: 13px 22px;
	font-weight: 800;
	font-size: .76rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	white-space: nowrap;
}
.wpi-ticker-badge i {
	width: 8px; height: 8px;
	border-radius: 50%;
	background: #fff;
	animation: wpiPulse 1.6s ease-in-out infinite;
}
@keyframes wpiPulse { 50% { opacity: .3; transform: scale(.7); } }
.wpi-ticker-viewport { flex: 1; overflow: hidden; display: flex; align-items: center; }
.wpi-ticker-track {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	padding-left: 24px;
	animation: wpiTicker var(--wpi-tdur, 30s) linear infinite;
	will-change: transform;
}
.wpi-ticker:hover .wpi-ticker-track { animation-play-state: paused; }
@keyframes wpiTicker { to { transform: translateX(-50%); } }
.wpi-ticker-item { color: rgba(255, 255, 255, .92); font-size: .92rem; font-weight: 500; }
a.wpi-ticker-item:hover { color: var(--wpi-color-accent); }
.wpi-ticker-sep { margin: 0 20px; color: var(--wpi-color-accent); font-size: .6rem; }
@media (prefers-reduced-motion: reduce) { .wpi-ticker-track { animation: none; } }

/* ---------- Hero: kaskadni entrance (wow ulaz) ---------- */
.wpi-hero-content > * {
	opacity: 0;
	transform: translateY(26px);
	animation: wpiHeroIn .75s cubic-bezier(.22, .9, .3, 1) forwards;
}
.wpi-hero-content > *:nth-child(1) { animation-delay: .05s; }
.wpi-hero-content > *:nth-child(2) { animation-delay: .18s; }
.wpi-hero-content > *:nth-child(3) { animation-delay: .32s; }
.wpi-hero-content > *:nth-child(4) { animation-delay: .46s; }
@keyframes wpiHeroIn { to { opacity: 1; transform: none; } }

/* ---------- Gumbi: shine sweep na hover ---------- */
.wpi-btn { position: relative; overflow: hidden; }
.wpi-btn::after {
	content: '';
	position: absolute;
	top: 0; left: -130%;
	width: 55%; height: 100%;
	background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .38), transparent);
	transform: skewX(-20deg);
	transition: left .55s ease;
	pointer-events: none;
}
.wpi-btn:hover::after { left: 140%; }

/* ---------- Hero kicker (eyebrow) ---------- */
.wpi-hero-kicker {
	display: inline-block;
	background: rgba(255, 255, 255, .14);
	backdrop-filter: blur(4px);
	color: #fff;
	font-size: .8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .12em;
	padding: 8px 20px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, .25);
	margin-bottom: 22px;
}
.wpi-hero-overlay-gradient {
	background: linear-gradient(135deg,
		color-mix(in srgb, var(--wpi-color-primary) 88%, #000 8%),
		color-mix(in srgb, var(--wpi-color-accent) 70%, #000 15%));
	opacity: .92;
}

/* ---------- Shape divideri (prijelazi sekcija) ---------- */
.wpi-has-shape { position: relative; padding-bottom: 90px !important; }
.wpi-shape {
	position: absolute;
	left: 0; right: 0; bottom: -1px;
	line-height: 0;
	pointer-events: none;
}
.wpi-shape svg { width: 100%; height: 64px; display: block; }
.wpi-shape svg path { fill: var(--wpi-color-bg); }
.wpi-bg-alt + .wpi-module .wpi-shape svg path { fill: var(--wpi-color-bg); }
.wpi-module-hero.wpi-has-shape { padding-bottom: 0 !important; }
.wpi-module-hero .wpi-shape { z-index: 2; }
@media (max-width: 640px) {
	.wpi-shape svg { height: 36px; }
	.wpi-has-shape { padding-bottom: 60px !important; }
}

/* ---------- Brojači (stats) ---------- */
.wpi-stats {
	display: grid;
	grid-template-columns: repeat(var(--wpi-scols, 4), 1fr);
	gap: 28px;
	text-align: center;
}
.wpi-stat-num {
	display: block;
	font-size: clamp(2.4rem, 5vw, 3.6rem);
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1.1;
	background: linear-gradient(135deg, var(--wpi-color-primary), var(--wpi-color-accent));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.wpi-bg-primary .wpi-stat-num,
.wpi-bg-secondary .wpi-stat-num {
	background: none;
	-webkit-text-fill-color: currentColor;
	color: #fff;
}
.wpi-stat-label {
	display: block;
	margin-top: 8px;
	font-weight: 600;
	color: var(--wpi-color-text-muted);
	font-size: .95rem;
	text-transform: uppercase;
	letter-spacing: .06em;
}
.wpi-bg-primary .wpi-stat-label,
.wpi-bg-secondary .wpi-stat-label { color: rgba(255, 255, 255, .8); }
@media (max-width: 860px) { .wpi-stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .wpi-stats { grid-template-columns: 1fr; gap: 20px; } }

/* ---------- Izjave (testimonial slider) ---------- */
.wpi-testi {
	position: relative;
	max-width: 780px;
	margin-inline: auto;
	text-align: center;
	padding: 12px 0 8px;
}
.wpi-testi-slide { display: none; animation: wpiTestiIn .45s ease; }
.wpi-testi-slide.active { display: block; }
@keyframes wpiTestiIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.wpi-testi-quote {
	font-size: clamp(1.15rem, 2.4vw, 1.5rem);
	font-style: italic;
	color: var(--wpi-color-heading);
	line-height: 1.55;
	margin-bottom: 26px;
}
.wpi-testi-who { display: flex; align-items: center; justify-content: center; gap: 14px; }
.wpi-testi-avatar {
	width: 52px; height: 52px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--wpi-color-primary), var(--wpi-color-accent));
	color: #fff;
	font-weight: 800;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1rem;
	letter-spacing: .02em;
}
.wpi-testi-meta { text-align: left; }
.wpi-testi-meta strong { display: block; color: var(--wpi-color-heading); }
.wpi-testi-meta em { font-style: normal; font-size: .85rem; color: var(--wpi-color-text-muted); }
.wpi-testi-dots { display: flex; justify-content: center; gap: 8px; margin-top: 26px; }
.wpi-testi-dots button {
	width: 10px; height: 10px;
	border-radius: 999px;
	border: none;
	background: var(--wpi-color-border);
	cursor: pointer;
	padding: 0;
	transition: all var(--wpi-transition);
}
.wpi-testi-dots button.active { background: var(--wpi-color-primary); width: 26px; }

/* ---------- Logotipi klijenata ---------- */
.wpi-logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: clamp(28px, 5vw, 64px);
}
.wpi-logos img {
	max-height: 52px;
	width: auto;
	opacity: .75;
	transition: all var(--wpi-transition);
}
.wpi-logos-gray img { filter: grayscale(1); }
.wpi-logos img:hover { filter: none; opacity: 1; transform: scale(1.06); }

/* ---------- Iconbox kartica (Avada stil) ---------- */
.wpi-iconbox-card {
	background: var(--wpi-color-bg);
	border: 1px solid var(--wpi-color-border);
	border-radius: var(--wpi-radius);
	padding: 34px 26px;
	height: 100%;
	position: relative;
	overflow: hidden;
	transition: transform var(--wpi-transition), box-shadow var(--wpi-transition);
}
.wpi-iconbox-card::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--wpi-color-primary), var(--wpi-color-accent));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .3s ease;
}
.wpi-iconbox-card:hover { transform: translateY(-6px); box-shadow: var(--wpi-shadow-hover); }
.wpi-iconbox-card:hover::before { transform: scaleX(1); }
.wpi-iconbox-card .wpi-iconbox-ico {
	background: linear-gradient(135deg,
		color-mix(in srgb, var(--wpi-color-primary) 14%, transparent),
		color-mix(in srgb, var(--wpi-color-accent) 10%, transparent));
}
.wpi-iconbox-card:hover .wpi-iconbox-ico {
	background: linear-gradient(135deg, var(--wpi-color-primary), var(--wpi-color-accent));
	color: #fff;
}
.wpi-bg-alt .wpi-iconbox-card { border-color: transparent; box-shadow: var(--wpi-shadow); }

/* ---------- CTA ---------- */
.wpi-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	flex-wrap: wrap;
	background: linear-gradient(135deg, var(--wpi-color-primary), color-mix(in srgb, var(--wpi-color-primary) 60%, #000 15%));
	color: #fff;
	border-radius: var(--wpi-radius);
	padding: 40px 44px;
}
.wpi-cta-title { color: #fff; margin-bottom: .3em; }
.wpi-cta-text { color: rgba(255, 255, 255, .88); margin: 0; }
.wpi-cta-btn { background: #fff; color: var(--wpi-color-primary); flex: 0 0 auto; }
.wpi-cta-btn:hover { background: rgba(255, 255, 255, .92); color: var(--wpi-color-primary); }

/* ---------- Iconbox ---------- */
.wpi-iconbox { padding: 12px 0; }
.wpi-iconbox-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 16px;
	background: color-mix(in srgb, var(--wpi-color-primary) 12%, transparent);
	color: var(--wpi-color-primary);
	margin-bottom: 16px;
}
.wpi-iconbox-ico svg { width: 30px; height: 30px; }
.wpi-iconbox-title { margin-bottom: .4em; font-size: 1.2rem; }
.wpi-iconbox-text { color: var(--wpi-color-text-muted); margin: 0; }
/* Iconbox na obojenim pozadinama sekcije */
.wpi-bg-primary .wpi-iconbox-ico,
.wpi-bg-secondary .wpi-iconbox-ico { background: rgba(255, 255, 255, .14); color: #fff; }
.wpi-bg-primary .wpi-iconbox-text,
.wpi-bg-secondary .wpi-iconbox-text { color: rgba(255, 255, 255, .82); }
.wpi-bg-primary .wpi-iconbox-title a,
.wpi-bg-secondary .wpi-iconbox-title a { color: #fff; }

/* =====================================================================
   GALERIJA — 5 rasporeda × omjeri × razmaci × hover efekti + natpisi
   ===================================================================== */
.wpi-gallery {
	display: grid;
	grid-template-columns: repeat(var(--wpi-gcols, 3), 1fr);
	gap: var(--wpi-ggap, 14px);
}
.wpi-galgap-none   { --wpi-ggap: 0px; }
.wpi-galgap-small  { --wpi-ggap: 8px; }
.wpi-galgap-normal { --wpi-ggap: 14px; }
.wpi-galgap-large  { --wpi-ggap: 24px; }

.wpi-gallery-item { display: block; overflow: hidden; position: relative; }
.wpi-gal-rounded .wpi-gallery-item { border-radius: var(--wpi-radius-sm); } /* legacy */
.wpi-gal-media { display: block; width: 100%; height: 100%; position: relative; }

/* Kutovi slika (postavka "corners") */
.wpi-galc-square .wpi-gallery-item { border-radius: 0; }
.wpi-galc-soft .wpi-gallery-item   { border-radius: 6px; }
.wpi-galc-theme .wpi-gallery-item  { border-radius: var(--wpi-radius-sm); }
.wpi-galc-heavy .wpi-gallery-item  { border-radius: 22px; }
.wpi-galc-circle .wpi-gallery-item { border-radius: 50%; }
.wpi-galc-circle .wpi-gal-cap { display: none; } /* natpis nema smisla na krugu */

/* Ikona povećala pri prelasku (postavka "hover_icon") */
.wpi-gal-ico {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 46px;
	height: 46px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	color: var(--wpi-color-primary);
	box-shadow: 0 6px 18px rgba(2, 6, 23, .3);
	transform: translate(-50%, -50%) scale(.55);
	opacity: 0;
	transition: opacity .22s ease, transform .22s ease;
	pointer-events: none;
	z-index: 2;
}
.wpi-gal-ico svg { width: 19px; height: 19px; }
.wpi-gallery-item:hover .wpi-gal-ico { opacity: 1; transform: translate(-50%, -50%) scale(1); }
/* Uz ikonu, "dark" efekt zadrži zatamnjenje ali bez svog emojija */
.wpi-gal-hasico.wpi-galh-dark .wpi-gallery-item::after { content: ''; }
.wpi-gallery-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .4s ease, filter .3s ease;
}

/* Omjeri (mreža/mozaik/traka) */
.wpi-galr-square .wpi-gallery-item img   { aspect-ratio: 1 / 1; }
.wpi-galr-classic .wpi-gallery-item img  { aspect-ratio: 4 / 3; }
.wpi-galr-wide .wpi-gallery-item img     { aspect-ratio: 16 / 9; }
.wpi-galr-portrait .wpi-gallery-item img { aspect-ratio: 3 / 4; }
.wpi-galr-auto .wpi-gallery-item img     { aspect-ratio: auto; }

/* Hover efekti */
.wpi-galh-zoom .wpi-gallery-item:hover img { transform: scale(1.06); }
.wpi-galh-lift .wpi-gallery-item { transition: transform .2s ease, box-shadow .2s ease; }
.wpi-galh-lift .wpi-gallery-item:hover { transform: translateY(-5px); box-shadow: 0 16px 34px rgba(15, 23, 42, .2); z-index: 2; }
.wpi-galh-dark .wpi-gallery-item::after {
	content: '🔍';
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.6rem;
	background: rgba(2, 6, 23, 0);
	opacity: 0;
	transition: all .25s ease;
	pointer-events: none;
}
.wpi-galh-dark .wpi-gallery-item:hover::after { background: rgba(2, 6, 23, .45); opacity: 1; }

/* Natpisi — preko donjeg ruba, na hover */
.wpi-gal-cap {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 22px 14px 10px;
	font-size: .82rem;
	font-weight: 600;
	color: #fff;
	background: linear-gradient(180deg, transparent, rgba(2, 6, 23, .75));
	opacity: 0;
	transform: translateY(6px);
	transition: all .25s ease;
	pointer-events: none;
}
.wpi-gallery-item:hover .wpi-gal-cap { opacity: 1; transform: none; }

/* ----- MASONRY: zidanje po visini (CSS columns) ----- */
.wpi-gal-masonry {
	display: block;
	columns: var(--wpi-gcols, 3);
	column-gap: var(--wpi-ggap, 14px);
}
.wpi-gal-masonry .wpi-gallery-item {
	margin-bottom: var(--wpi-ggap, 14px);
	break-inside: avoid;
}
.wpi-gal-masonry .wpi-gallery-item img { aspect-ratio: auto; }

/* ----- MOZAIK: prva slika 2×2 ----- */
.wpi-gal-mosaic { grid-auto-rows: 190px; grid-auto-flow: dense; }
.wpi-gal-mosaic .wpi-gallery-item.is-lead { grid-column: span 2; grid-row: span 2; }
.wpi-gal-mosaic .wpi-gallery-item img { height: 100%; aspect-ratio: auto; }

/* ----- FILMSKA TRAKA: horizontalni scroll sa snapom ----- */
.wpi-gal-strip {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: 10px;
	scrollbar-width: thin;
}
.wpi-gal-strip .wpi-gallery-item {
	flex: 0 0 auto;
	width: min(340px, 78vw);
	scroll-snap-align: start;
}
.wpi-gal-strip .wpi-gallery-item img { aspect-ratio: 3 / 2; }

/* ----- POLAROID: bijeli okviri s natpisom, blago zarotirani ----- */
.wpi-gal-polaroid { gap: calc(var(--wpi-ggap, 14px) + 12px); }
.wpi-gal-polaroid .wpi-gallery-item {
	background: #fff;
	padding: 10px 10px 14px;
	border-radius: 4px !important;
	box-shadow: 0 8px 22px rgba(15, 23, 42, .16);
	transform: rotate(-1.6deg);
	transition: transform .22s ease, box-shadow .22s ease;
	overflow: visible;
}
.wpi-gal-polaroid .wpi-gallery-item:nth-child(even) { transform: rotate(1.8deg); }
.wpi-gal-polaroid .wpi-gallery-item:hover { transform: rotate(0) scale(1.04); box-shadow: 0 18px 40px rgba(15, 23, 42, .24); z-index: 2; }
.wpi-gal-polaroid .wpi-gallery-item img { aspect-ratio: 1 / 1; border-radius: 2px; }
.wpi-gal-polaroid .wpi-gal-cap {
	position: static;
	display: block;
	opacity: 1;
	transform: none;
	background: none;
	color: var(--wpi-color-text);
	text-align: center;
	padding: 10px 4px 0;
	font-size: .8rem;
}
.wpi-gal-polaroid .wpi-gallery-item::after { content: none !important; }

/* Mobitel: traka ostaje traka, ostalo pada na 2 stupca (postojeće pravilo) */
@media (max-width: 640px) {
	.wpi-gal-masonry { columns: 2; }
	.wpi-gal-mosaic { grid-auto-rows: 150px; }
}

/* ---------- Video ---------- */
.wpi-video { border-radius: var(--wpi-radius); overflow: hidden; box-shadow: var(--wpi-shadow); }
.wpi-video iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; display: block; }

/* ---------- Harmonika / FAQ ---------- */
.wpi-accordion { display: grid; gap: 10px; }
.wpi-acc-item {
	background: var(--wpi-color-bg);
	border: 1px solid var(--wpi-color-border);
	border-radius: var(--wpi-radius-sm);
	overflow: hidden;
}
.wpi-acc-item summary {
	cursor: pointer;
	padding: 16px 20px;
	font-weight: 600;
	color: var(--wpi-color-heading);
	list-style: none;
	position: relative;
	padding-right: 44px;
}
.wpi-acc-item summary::-webkit-details-marker { display: none; }
.wpi-acc-item summary::after {
	content: '+';
	position: absolute;
	right: 18px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.3rem;
	color: var(--wpi-color-primary);
	transition: transform .2s ease;
}
.wpi-acc-item[open] summary::after { content: '−'; }
.wpi-acc-item[open] summary { border-bottom: 1px solid var(--wpi-color-border); }
.wpi-acc-body { padding: 16px 20px; color: var(--wpi-color-text-muted); }

/* ---------- Citat ---------- */
.wpi-quote {
	margin: 0;
	padding: 32px 36px 32px 56px;
	background: var(--wpi-color-bg-alt);
	border-left: 5px solid var(--wpi-color-primary);
	border-radius: var(--wpi-radius);
	position: relative;
	font-size: 1.15rem;
	font-style: italic;
}
.wpi-quote::before {
	content: '\201C';
	position: absolute;
	left: 18px;
	top: 10px;
	font-size: 3rem;
	color: var(--wpi-color-primary);
	font-family: Georgia, serif;
	font-style: normal;
	line-height: 1;
}
.wpi-quote p { margin: 0 0 12px; }
.wpi-quote-author { font-style: normal; font-weight: 700; color: var(--wpi-color-heading); }
.wpi-quote-role { display: block; font-weight: 400; font-size: .85rem; color: var(--wpi-color-text-muted); }

/* ---------- Gumb s ikonom (akcija) ---------- */
.wpi-actionwrap { margin-block: 4px; }
.wpi-action-card {
	display: inline-flex;
	align-items: center;
	gap: 18px;
	background: var(--wpi-color-bg);
	border: 1px solid var(--wpi-color-border);
	border-radius: var(--wpi-radius);
	padding: 18px 22px;
	max-width: 100%;
	min-width: min(340px, 100%);
	text-align: left;
	transition: transform var(--wpi-transition), box-shadow var(--wpi-transition), border-color var(--wpi-transition);
}
.wpi-action-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--wpi-shadow-hover);
	border-color: color-mix(in srgb, var(--wpi-color-primary) 45%, var(--wpi-color-border));
}
.wpi-action-ico {
	flex: 0 0 auto;
	width: 54px; height: 54px;
	border-radius: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: color-mix(in srgb, var(--wpi-color-primary) 12%, transparent);
	color: var(--wpi-color-primary);
	transition: all var(--wpi-transition);
}
.wpi-action-ico svg { width: 26px; height: 26px; }
.wpi-action-card:hover .wpi-action-ico {
	background: linear-gradient(135deg, var(--wpi-color-primary), var(--wpi-color-accent));
	color: #fff;
}
.wpi-action-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wpi-action-body strong { color: var(--wpi-color-heading); font-size: 1.02rem; line-height: 1.3; }
.wpi-action-body em { font-style: normal; color: var(--wpi-color-text-muted); font-size: .86rem; }
.wpi-action-meta {
	font-size: .7rem;
	font-weight: 800;
	letter-spacing: .06em;
	color: var(--wpi-color-primary);
	margin-top: 3px;
}
.wpi-action-arrow {
	margin-left: auto;
	padding-left: 10px;
	color: var(--wpi-color-text-muted);
	font-size: 1.2rem;
	transition: transform var(--wpi-transition), color var(--wpi-transition);
}
.wpi-action-card:hover .wpi-action-arrow { transform: translateX(5px); color: var(--wpi-color-primary); }
/* Kartica u stupcu — rastegni na punu širinu I VISINU stupca, pa su sve
   kartice u redu jednako visoke bez obzira na duljinu teksta. Sadržaj
   (ikona, naslov, strelica) poravnat po vrhu za uredan mrežni izgled. */
.wpi-col .wpi-action-card { display: flex; width: 100%; min-width: 0; height: 100%; align-items: flex-start; }
.wpi-col .wpi-action-card .wpi-action-ico { margin-top: 2px; }

/* Inline varijante (puni gumb / obrub) */
.wpi-action-inline svg { width: 18px; height: 18px; flex: 0 0 auto; }
.wpi-action-badge {
	background: rgba(255, 255, 255, .22);
	padding: 2px 9px;
	border-radius: 999px;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .04em;
}
.wpi-btn-outline .wpi-action-badge { background: color-mix(in srgb, var(--wpi-color-primary) 12%, transparent); }

/* ---------- Cjenik (price kartice) ---------- */
.wpi-price {
	position: relative;
	background: var(--wpi-color-bg);
	border: 1px solid var(--wpi-color-border);
	border-radius: var(--wpi-radius);
	padding: 34px 28px;
	text-align: center;
	height: 100%;
	display: flex;
	flex-direction: column;
	transition: transform var(--wpi-transition), box-shadow var(--wpi-transition);
}
.wpi-price:hover { transform: translateY(-4px); box-shadow: var(--wpi-shadow-hover); }
.wpi-price-featured {
	border: 2px solid var(--wpi-color-primary);
	box-shadow: var(--wpi-shadow);
}
.wpi-price-badge {
	position: absolute;
	top: -13px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--wpi-color-primary);
	color: #fff;
	font-size: .72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	padding: 5px 16px;
	border-radius: 999px;
	white-space: nowrap;
}
.wpi-price h3 { margin-bottom: 6px; }
.wpi-price-amount {
	font-size: 2.6rem;
	font-weight: 800;
	color: var(--wpi-color-primary);
	margin-bottom: 18px;
	letter-spacing: -.02em;
}
.wpi-price-amount span { font-size: 1rem; font-weight: 500; color: var(--wpi-color-text-muted); }
.wpi-price ul { list-style: none; padding: 0; margin: 0 0 24px; flex: 1; }
.wpi-price li { padding: 9px 0; border-bottom: 1px dashed var(--wpi-color-border); font-size: .95rem; }
.wpi-price li:last-child { border-bottom: none; }
.wpi-price .wpi-btn { justify-content: center; }
.wpi-price-featured .wpi-btn { background: var(--wpi-color-primary); }

/* ---------- Karta placeholder (kontakt) ---------- */
.wpi-map-ph {
	height: 340px;
	border-radius: var(--wpi-radius);
	background:
		linear-gradient(45deg, var(--wpi-color-bg-alt) 25%, transparent 25%, transparent 75%, var(--wpi-color-bg-alt) 75%),
		linear-gradient(45deg, var(--wpi-color-bg-alt) 25%, var(--wpi-color-bg) 25%, var(--wpi-color-bg) 75%, var(--wpi-color-bg-alt) 75%);
	background-size: 28px 28px;
	background-position: 0 0, 14px 14px;
	border: 1px solid var(--wpi-color-border);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--wpi-color-text-muted);
	font-size: .95rem;
	text-align: center;
	padding: 20px;
}
.wpi-map-ph iframe { width: 100%; height: 100%; border: 0; border-radius: var(--wpi-radius); }

/* ---------- Razdjelnik ---------- */
.wpi-divider { border: none; margin: 8px 0; }
.wpi-divider-line { height: 1px; background: var(--wpi-color-border); }
.wpi-divider-gradient { height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--wpi-color-primary), var(--wpi-color-accent)); }
.wpi-divider-dots { height: 6px; background: radial-gradient(circle, var(--wpi-color-border) 2px, transparent 2.5px); background-size: 18px 6px; background-repeat: repeat-x; background-position: center; }

/* ---------- Stupci (columns modul) ---------- */
/* Omjeri dolaze kroz --wpi-bct varijablu (npr. "2fr 1fr" za 66/33). */
.wpi-bcols { display: grid; grid-template-columns: var(--wpi-bct, repeat(2, minmax(0, 1fr))); }
.wpi-gap-none   { gap: 0; }
.wpi-gap-small  { gap: 16px; }
.wpi-gap-normal { gap: 28px; }
.wpi-gap-large  { gap: 44px; }
.wpi-col > * + * { margin-top: 22px; }
.wpi-col > *:last-child { margin-bottom: 0; }
/* Okomiti razmak djece u stupcu prati odabrani razmak stupaca */
.wpi-gap-none .wpi-col > * + * { margin-top: 0; }
.wpi-gap-small .wpi-col > * + * { margin-top: 12px; }
.wpi-gap-large .wpi-col > * + * { margin-top: 32px; }

@media (max-width: 1024px) {
	.wpi-stack-tablet.wpi-bcols-2 { grid-template-columns: 1fr; }
	.wpi-stack-tablet.wpi-bcols-3,
	.wpi-stack-tablet.wpi-bcols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 781px) {
	.wpi-stack-mobile.wpi-bcols { grid-template-columns: 1fr; }
	.wpi-stack-tablet.wpi-bcols { grid-template-columns: 1fr; }
}

/* ---------- Page builder full-width wrap ---------- */
.wpi-page-builder-wrap { width: 100%; }

/* ---------- Komentari ---------- */
.wpi-comments { max-width: 760px; margin: 48px auto; }
.wpi-comment-list { list-style: none; padding: 0; }
.wpi-comment-list .comment-body { padding: 20px 0; border-bottom: 1px solid var(--wpi-color-border); }

@media (max-width: 640px) {
	.wpi-pad-large  { padding-block: 56px; }
	.wpi-pad-normal { padding-block: 40px; }
	.wpi-cta { padding: 28px; justify-content: center; text-align: center; }
	.wpi-gallery { grid-template-columns: repeat(2, 1fr) !important; }
	.wpi-hero-small, .wpi-hero-normal { min-height: 300px; }
	.wpi-hero-large { min-height: 420px; }
	.wpi-quote { padding: 24px 22px 24px 44px; }
}

/* ---------- Forme (form builder) ---------- */
.wpi-form { max-width: 760px; }
.wpi-form-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 18px 20px;
}
.wpi-form-field { grid-column: span 6; display: flex; flex-direction: column; gap: 7px; }
.wpi-form-field.wpi-ffw-half { grid-column: span 3; }
.wpi-form-field.wpi-ffw-third { grid-column: span 2; }
.wpi-form-field label,
.wpi-form-field legend {
	font-weight: 600;
	font-size: .92rem;
	color: var(--wpi-color-heading);
}
.wpi-req { color: #dc2626; }
.wpi-form-field input[type="text"],
.wpi-form-field input[type="email"],
.wpi-form-field input[type="tel"],
.wpi-form-field input[type="number"],
.wpi-form-field input[type="date"],
.wpi-form-field select,
.wpi-form-field textarea {
	width: 100%;
	padding: 13px 16px;
	border: 1px solid var(--wpi-color-border);
	border-radius: var(--wpi-radius-sm);
	background: var(--wpi-color-bg);
	color: var(--wpi-color-text);
	font-size: 1rem;
	font-family: inherit;
	transition: border-color var(--wpi-transition), box-shadow var(--wpi-transition);
}
.wpi-form-field input:focus,
.wpi-form-field select:focus,
.wpi-form-field textarea:focus {
	outline: none;
	border-color: var(--wpi-color-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wpi-color-primary) 18%, transparent);
}
.wpi-form-field fieldset { border: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.wpi-choice { display: flex; align-items: flex-start; gap: 10px; font-weight: 400 !important; cursor: pointer; }
.wpi-choice input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--wpi-color-primary); flex: 0 0 auto; }
.wpi-form-heading { margin: 10px 0 0; padding-bottom: 6px; border-bottom: 2px solid var(--wpi-color-border); }
.wpi-ff-error { font-size: .8rem; color: #dc2626; min-height: 0; }
.wpi-ff-invalid input, .wpi-ff-invalid select, .wpi-ff-invalid textarea { border-color: #dc2626; }
.wpi-form-footer { display: flex; align-items: center; gap: 16px; margin-top: 22px; }
.wpi-form-submit { padding: 14px 36px; font-size: 1rem; }
.wpi-form-status-err { color: #dc2626; font-size: .9rem; }
.wpi-form-msg {
	padding: 16px 20px;
	border-radius: var(--wpi-radius-sm);
	margin-bottom: 20px;
	font-weight: 600;
}
.wpi-form-ok { background: #ecfdf5; border: 1px solid #6ee7b7; color: #065f46; }
.wpi-form-err { background: #fef2f2; border: 1px solid #fca5a5; color: #991b1b; }
/* Honeypot — vizualno skriveno, dostupno botovima */
.wpi-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px; height: 1px;
	overflow: hidden;
}
@media (max-width: 640px) {
	.wpi-form-field.wpi-ffw-half,
	.wpi-form-field.wpi-ffw-third { grid-column: span 6; }
}

/* =====================================================================
   PERSONALIZACIJA PRO — boxed layout, efekti, single dodaci
   ===================================================================== */

/* Boxed layout — uokvireni site */
body.wpi-boxed { background: color-mix(in srgb, var(--wpi-color-secondary) 10%, var(--wpi-color-bg-alt)); }
body.wpi-boxed .wpi-site-header,
body.wpi-boxed .wpi-site-main,
body.wpi-boxed .wpi-site-footer,
body.wpi-boxed .wpi-topbar {
	max-width: 1400px;
	margin-inline: auto;
	box-shadow: 0 0 50px rgba(15, 23, 42, .12);
}
body.wpi-boxed .wpi-site-footer { margin-inline: auto; }

/* Scroll progress traka */
.wpi-progress {
	position: fixed;
	top: 0; left: 0;
	height: 3px;
	width: 0;
	background: linear-gradient(90deg, var(--wpi-color-primary), var(--wpi-color-accent));
	z-index: 100001;
	transition: width .08s linear;
}

/* Tematski scrollbar */
html:has(body.wpi-fx-scrollbar) { scrollbar-width: thin; scrollbar-color: var(--wpi-color-primary) transparent; }
html:has(body.wpi-fx-scrollbar)::-webkit-scrollbar { width: 11px; }
html:has(body.wpi-fx-scrollbar)::-webkit-scrollbar-track { background: var(--wpi-color-bg-alt); }
html:has(body.wpi-fx-scrollbar)::-webkit-scrollbar-thumb {
	background: linear-gradient(180deg, var(--wpi-color-primary), var(--wpi-color-accent));
	border-radius: 99px;
	border: 2px solid var(--wpi-color-bg-alt);
}

/* Isključivanje efekata */
body.wpi-noreveal .wpi-fade-up { opacity: 1 !important; transform: none !important; }
body.wpi-nozoom .wpi-card:hover .wpi-card-thumb img,
body.wpi-nozoom .wpi-gallery-item:hover img { transform: none; }

/* Animirani podcrtaj linkova u sadržaju */
body.wpi-fx-links .wpi-entry-content a:not(.wpi-btn),
body.wpi-fx-links .wpi-text-module a:not(.wpi-btn) {
	background: linear-gradient(currentColor, currentColor) 0 100% / 0% 2px no-repeat;
	transition: background-size .3s ease;
	padding-bottom: 2px;
}
body.wpi-fx-links .wpi-entry-content a:not(.wpi-btn):hover,
body.wpi-fx-links .wpi-text-module a:not(.wpi-btn):hover { background-size: 100% 2px; }

/* Lightbox za slike i galerije */
.wpi-lb {
	position: fixed;
	inset: 0;
	z-index: 100002;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(8, 12, 22, .92);
	backdrop-filter: blur(6px);
	animation: wpiLbFade .22s ease;
}
.wpi-lb[hidden] { display: none; }
@keyframes wpiLbFade { from { opacity: 0; } to { opacity: 1; } }
.wpi-lb-fig {
	margin: 0;
	max-width: min(92vw, 1400px);
	max-height: 88vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}
.wpi-lb-fig img {
	max-width: 100%;
	max-height: 80vh;
	object-fit: contain;
	border-radius: 10px;
	box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
}
.wpi-lb-fig img.wpi-lb-in { animation: wpiLbImg .28s ease; }
@keyframes wpiLbImg { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }
.wpi-lb-fig figcaption {
	color: rgba(255, 255, 255, .85);
	font-size: .95rem;
	text-align: center;
	max-width: 640px;
}
.wpi-lb-fig figcaption[hidden] { display: none; }
.wpi-lb-close,
.wpi-lb-prev,
.wpi-lb-next {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, .1);
	color: #fff;
	font-size: 22px;
	cursor: pointer;
	transition: background .2s ease, transform .2s ease;
	z-index: 2;
}
.wpi-lb-close:hover,
.wpi-lb-prev:hover,
.wpi-lb-next:hover { background: var(--wpi-color-primary); transform: scale(1.08); }
.wpi-lb-close { top: 18px; right: 18px; font-size: 30px; }
.wpi-lb-prev { left: 14px; top: 50%; transform: translateY(-50%); }
.wpi-lb-next { right: 14px; top: 50%; transform: translateY(-50%); }
.wpi-lb-prev:hover, .wpi-lb-next:hover { transform: translateY(-50%) scale(1.08); }
.wpi-lb-prev[hidden], .wpi-lb-next[hidden] { display: none; }
.wpi-lb-count {
	position: absolute;
	bottom: 16px;
	left: 50%;
	transform: translateX(-50%);
	color: rgba(255, 255, 255, .7);
	font-size: .85rem;
	letter-spacing: .08em;
}
body.wpi-lightbox-on .wpi-gallery-item,
body.wpi-lightbox-on .wpi-entry-content a > img,
body.wpi-lightbox-on .wp-block-gallery img,
body.wpi-lightbox-on .gallery img { cursor: zoom-in; }
@media (max-width: 640px) {
	.wpi-lb-prev, .wpi-lb-next { width: 40px; height: 40px; font-size: 18px; }
	.wpi-lb-close { top: 10px; right: 10px; }
}

/* Prethodni / sljedeći članak */
.wpi-post-nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	max-width: 760px;
	margin: 36px auto;
}
.wpi-post-nav a {
	display: block;
	padding: 18px 20px;
	border: 1px solid var(--wpi-color-border);
	border-radius: var(--wpi-radius);
	transition: all var(--wpi-transition);
}
.wpi-post-nav a:hover { border-color: var(--wpi-color-primary); box-shadow: var(--wpi-shadow); transform: translateY(-2px); }
.wpi-post-nav .wpi-pn-dir { display: block; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--wpi-color-text-muted); margin-bottom: 4px; }
.wpi-post-nav .wpi-pn-title { font-weight: 700; color: var(--wpi-color-heading); font-size: .95rem; }
.wpi-post-nav .wpi-pn-next { text-align: right; }
@media (max-width: 640px) { .wpi-post-nav { grid-template-columns: 1fr; } }

/* Povezani članci */
.wpi-related { max-width: 1100px; margin: 44px auto 0; }
.wpi-related > h2 { text-align: center; margin-bottom: 26px; font-size: 1.5rem; }

/* =====================================================================
   DESIGN SKINOVI — karakter dizajna (postavka "design_skin")
   Svaki skin mijenja jezik oblika: zaobljenja, dekoracije, animacije.
   ===================================================================== */

/* ---------- SKIN: PLAYFUL (vrtići — zaigrano) ---------- */
.wpi-skin-playful { --wpi-radius: 26px; --wpi-radius-sm: 18px; }
.wpi-skin-playful .wpi-btn { border-radius: 999px; font-weight: 700; }
.wpi-skin-playful .wpi-btn:hover { transform: translateY(-3px) rotate(-1.5deg) scale(1.04); }
/* Blob ikone koje "dišu" */
.wpi-skin-playful .wpi-iconbox-ico {
	width: 78px; height: 78px;
	border-radius: 46% 54% 55% 45% / 55% 46% 54% 45%;
	animation: wpiBlob 7s ease-in-out infinite;
}
.wpi-skin-playful .wpi-iconbox-ico svg { width: 34px; height: 34px; }
@keyframes wpiBlob {
	50% { border-radius: 55% 45% 44% 56% / 44% 56% 45% 55%; transform: rotate(4deg); }
}
/* Zarotirane kartice — kao dječji kolaž */
.wpi-skin-playful .wpi-col:nth-child(odd) .wpi-iconbox-card { transform: rotate(-1.3deg); }
.wpi-skin-playful .wpi-col:nth-child(even) .wpi-iconbox-card { transform: rotate(1.3deg); }
.wpi-skin-playful .wpi-iconbox-card { border-radius: 30px; border-width: 2px; }
.wpi-skin-playful .wpi-iconbox-card:hover { transform: rotate(0deg) translateY(-8px) scale(1.02); }
.wpi-skin-playful .wpi-iconbox-card::before { height: 6px; border-radius: 0 0 8px 8px; }
/* Točkasti podcrtaj naslova */
.wpi-skin-playful .wpi-heading-module h2::after,
.wpi-skin-playful .wpi-section-heading h2::after {
	content: '';
	display: block;
	width: 128px; height: 10px;
	margin: 12px auto 0;
	background: radial-gradient(circle, var(--wpi-color-accent) 3.2px, transparent 3.8px) repeat-x;
	background-size: 17px 10px;
}
/* Konfeti-točkice na alt pozadinama */
.wpi-skin-playful .wpi-bg-alt {
	background-image: radial-gradient(color-mix(in srgb, var(--wpi-color-primary) 9%, transparent) 2.2px, transparent 2.8px);
	background-size: 26px 26px;
}
/* Hero: veseli kicker + veći naslov */
.wpi-skin-playful .wpi-hero-kicker {
	background: #fff;
	color: var(--wpi-color-primary);
	border: none;
	font-size: .88rem;
	transform: rotate(-2deg);
	box-shadow: 0 8px 22px rgba(0, 0, 0, .18);
}
.wpi-skin-playful .wpi-hero-title { letter-spacing: -.01em; }
/* Brojači kao razigrane pločice */
.wpi-skin-playful .wpi-stat {
	background: var(--wpi-color-bg);
	border-radius: 26px;
	padding: 26px 14px;
	box-shadow: var(--wpi-shadow);
}
.wpi-skin-playful .wpi-stat:nth-child(odd) { transform: rotate(-1.4deg); }
.wpi-skin-playful .wpi-stat:nth-child(even) { transform: rotate(1.4deg); }
.wpi-skin-playful .wpi-card:hover { transform: translateY(-6px) rotate(-.7deg); }
.wpi-skin-playful .wpi-acc-item { border-radius: 22px; border-width: 2px; }
.wpi-skin-playful .wpi-cta { border-radius: 34px; }
.wpi-skin-playful .wpi-testi-avatar { border-radius: 46% 54% 55% 45% / 55% 46% 54% 45%; }

/* ---------- SKIN: ELEGANT (svečano, serif, whitespace) ---------- */
.wpi-skin-elegant { --wpi-radius: 4px; --wpi-radius-sm: 2px; }
.wpi-skin-elegant .wpi-btn {
	border-radius: 0;
	text-transform: uppercase;
	letter-spacing: .16em;
	font-size: .76rem;
	padding: 15px 32px;
}
.wpi-skin-elegant .wpi-iconbox-card {
	background: transparent;
	border: none;
	border-top: 1px solid var(--wpi-color-border);
	border-radius: 0;
	box-shadow: none;
}
.wpi-skin-elegant .wpi-iconbox-card::before { display: none; }
.wpi-skin-elegant .wpi-iconbox-card:hover { transform: none; box-shadow: none; border-top-color: var(--wpi-color-accent); }
.wpi-skin-elegant .wpi-iconbox-ico {
	background: transparent;
	border: 1px solid var(--wpi-color-primary);
	border-radius: 0;
}
.wpi-skin-elegant .wpi-iconbox-card:hover .wpi-iconbox-ico { background: var(--wpi-color-primary); color: #fff; }
.wpi-skin-elegant .wpi-heading-module h2,
.wpi-skin-elegant .wpi-section-heading h2 { font-weight: 400; }
.wpi-skin-elegant .wpi-heading-module h2::after,
.wpi-skin-elegant .wpi-section-heading h2::after {
	content: '';
	display: block;
	width: 54px; height: 1px;
	background: var(--wpi-color-accent);
	margin: 18px auto 0;
}
.wpi-skin-elegant .wpi-hero-kicker {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, .55);
	border-radius: 0;
	letter-spacing: .3em;
	font-weight: 500;
	backdrop-filter: none;
}
.wpi-skin-elegant .wpi-stat-num {
	background: none;
	-webkit-background-clip: initial;
	background-clip: initial;
	-webkit-text-fill-color: currentColor;
	color: var(--wpi-color-heading);
	font-weight: 300;
}
.wpi-skin-elegant .wpi-stat-label { letter-spacing: .18em; font-size: .72rem; }
.wpi-skin-elegant .wpi-card, .wpi-skin-elegant .wpi-acc-item, .wpi-skin-elegant .wpi-action-card { border-radius: 0; }
.wpi-skin-elegant .wpi-cta { border-radius: 0; background: var(--wpi-color-secondary); }
.wpi-skin-elegant .wpi-testi-quote { font-family: Georgia, 'Times New Roman', serif; font-size: clamp(1.3rem, 2.6vw, 1.7rem); font-weight: 400; }
.wpi-skin-elegant .wpi-testi-avatar { border-radius: 0; }
.wpi-skin-elegant .wpi-divider-gradient { height: 1px; background: var(--wpi-color-accent); }

/* ---------- SKIN: CIVIC (uprava, škola — službeno i pregledno) ---------- */
.wpi-skin-civic { --wpi-radius: 8px; --wpi-radius-sm: 6px; }
.wpi-skin-civic .wpi-iconbox { text-align: left !important; }
.wpi-skin-civic .wpi-iconbox-card {
	border-left: 4px solid var(--wpi-color-primary);
	border-radius: 8px;
	padding: 24px 22px;
}
.wpi-skin-civic .wpi-iconbox-card::before { display: none; }
.wpi-skin-civic .wpi-iconbox-card:hover { transform: translateY(-3px); border-left-color: var(--wpi-color-accent); }
.wpi-skin-civic .wpi-iconbox-ico { width: 50px; height: 50px; border-radius: 10px; margin-bottom: 12px; }
.wpi-skin-civic .wpi-iconbox-ico svg { width: 24px; height: 24px; }
.wpi-skin-civic .wpi-heading-module h2::after,
.wpi-skin-civic .wpi-section-heading h2::after {
	content: '';
	display: block;
	width: 46px; height: 4px;
	background: var(--wpi-color-primary);
	border-radius: 2px;
	margin: 14px auto 0;
}
.wpi-skin-civic .wpi-btn { border-radius: 6px; font-size: .9rem; }
.wpi-skin-civic .wpi-hero-kicker { border-radius: 4px; letter-spacing: .08em; }
.wpi-skin-civic .wpi-acc-item summary { padding: 14px 44px 14px 18px; font-size: .96rem; }
.wpi-skin-civic .wpi-acc-body { padding: 14px 18px; }
.wpi-skin-civic .wpi-cta { border-radius: 10px; }

/* ---------- SKIN: TECH (gradijentni obrubi, glow) ---------- */
.wpi-skin-tech .wpi-iconbox-card {
	border: 1.5px solid transparent;
	background:
		linear-gradient(var(--wpi-color-bg), var(--wpi-color-bg)) padding-box,
		linear-gradient(135deg,
			color-mix(in srgb, var(--wpi-color-primary) 55%, transparent),
			color-mix(in srgb, var(--wpi-color-accent) 55%, transparent)) border-box;
}
.wpi-skin-tech .wpi-iconbox-card::before { display: none; }
.wpi-skin-tech .wpi-iconbox-card:hover {
	box-shadow: 0 14px 44px color-mix(in srgb, var(--wpi-color-primary) 30%, transparent);
}
.wpi-skin-tech .wpi-btn {
	background: linear-gradient(135deg, var(--wpi-color-primary), color-mix(in srgb, var(--wpi-color-accent) 75%, var(--wpi-color-primary)));
	box-shadow: 0 8px 26px color-mix(in srgb, var(--wpi-color-primary) 38%, transparent);
	border: none;
}
.wpi-skin-tech .wpi-btn-outline {
	background: transparent;
	border: 2px solid var(--wpi-color-primary);
	box-shadow: none;
}
.wpi-skin-tech .wpi-stat-num { filter: drop-shadow(0 5px 16px color-mix(in srgb, var(--wpi-color-primary) 40%, transparent)); }
.wpi-skin-tech .wpi-ticker-badge { box-shadow: 0 0 22px color-mix(in srgb, var(--wpi-color-accent) 55%, transparent); }
.wpi-skin-tech .wpi-acc-item { border-color: color-mix(in srgb, var(--wpi-color-primary) 22%, var(--wpi-color-border)); }
.wpi-skin-tech .wpi-acc-item[open] { box-shadow: 0 8px 30px color-mix(in srgb, var(--wpi-color-primary) 16%, transparent); }
.wpi-skin-tech .wpi-action-card:hover { box-shadow: 0 14px 44px color-mix(in srgb, var(--wpi-color-primary) 26%, transparent); }
.wpi-skin-tech .wpi-cta {
	background: linear-gradient(135deg, var(--wpi-color-secondary), color-mix(in srgb, var(--wpi-color-primary) 70%, var(--wpi-color-secondary)));
	box-shadow: inset 0 0 80px color-mix(in srgb, var(--wpi-color-accent) 10%, transparent);
}

/* ---------- SKIN: EDITORIAL (news portal — novinski) ---------- */
.wpi-skin-editorial { --wpi-radius: 6px; --wpi-radius-sm: 4px; }
.wpi-skin-editorial .wpi-heading-module h2,
.wpi-skin-editorial .wpi-section-heading h2 {
	display: flex;
	align-items: center;
	gap: 16px;
	text-transform: uppercase;
	font-size: 1.25rem;
	letter-spacing: .07em;
}
.wpi-skin-editorial .wpi-heading-module h2::before,
.wpi-skin-editorial .wpi-heading-module h2::after,
.wpi-skin-editorial .wpi-section-heading h2::before,
.wpi-skin-editorial .wpi-section-heading h2::after {
	content: '';
	flex: 1;
	height: 3px;
	background: linear-gradient(90deg, var(--wpi-color-primary), transparent);
}
.wpi-skin-editorial .wpi-heading-module h2::before,
.wpi-skin-editorial .wpi-section-heading h2::before {
	background: linear-gradient(270deg, var(--wpi-color-primary), transparent);
}
.wpi-skin-editorial .wpi-card { border-bottom: 3px solid var(--wpi-color-primary); }
.wpi-skin-editorial .wpi-card-title { font-family: Georgia, 'Times New Roman', serif; font-size: 1.28rem; }
.wpi-skin-editorial .wpi-cat-badge {
	border-radius: 3px;
	background: var(--wpi-color-primary);
	color: #fff;
	letter-spacing: .07em;
}
.wpi-skin-editorial .wpi-btn { border-radius: 4px; text-transform: uppercase; font-size: .8rem; letter-spacing: .07em; }
.wpi-skin-editorial .wpi-card-meta { text-transform: uppercase; font-size: .7rem; letter-spacing: .05em; }
.wpi-skin-editorial .wpi-stat-num {
	background: none;
	-webkit-background-clip: initial;
	background-clip: initial;
	-webkit-text-fill-color: currentColor;
	color: var(--wpi-color-primary);
}

/* =====================================================================
   MODUL: VREMENSKA PROGNOZA (Open-Meteo)
   Stilovi: cards (kartice po danu) | strip (kompaktna traka) | panel
   (veliki "danas" + mali dani). Boje prate paletu teme.
   ===================================================================== */
.wpi-weather {
	background: linear-gradient(
		135deg,
		color-mix(in srgb, var(--wpi-color-primary) 9%, var(--wpi-color-bg)),
		color-mix(in srgb, var(--wpi-color-accent) 7%, var(--wpi-color-bg))
	);
	border: 1px solid var(--wpi-color-border);
	border-radius: var(--wpi-radius);
	padding: 24px;
}
.wpi-weather-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	flex-wrap: wrap;
	margin-bottom: 18px;
}
.wpi-weather-title { margin: 0 0 2px; font-size: 1.25rem; }
.wpi-weather-city { font-size: .88rem; font-weight: 600; color: var(--wpi-color-text-muted); }
.wpi-weather-now { display: flex; align-items: center; gap: 12px; }
.wpi-weather-now-ico { font-size: 2.4rem; line-height: 1; }
.wpi-weather-now-temp { font-size: 2.4rem; font-weight: 800; color: var(--wpi-color-heading); letter-spacing: -0.02em; }
.wpi-weather-now-text { display: flex; flex-direction: column; gap: 2px; font-weight: 600; color: var(--wpi-color-text); }
.wpi-weather-now-text small { font-weight: 500; color: var(--wpi-color-text-muted); }

.wpi-weather-days {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
	gap: 10px;
}
.wpi-weather-day {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	background: var(--wpi-color-bg);
	border: 1px solid var(--wpi-color-border);
	border-radius: var(--wpi-radius-sm);
	padding: 14px 8px;
	text-align: center;
	transition: transform .16s ease, box-shadow .16s ease;
}
.wpi-weather-day:hover { transform: translateY(-2px); box-shadow: 0 8px 18px color-mix(in srgb, var(--wpi-color-primary) 12%, transparent); }
.wpi-weather-day.is-today {
	border-color: color-mix(in srgb, var(--wpi-color-primary) 45%, var(--wpi-color-border));
	box-shadow: inset 0 3px 0 var(--wpi-color-primary);
}
.wpi-wd-name { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--wpi-color-text-muted); }
.wpi-weather-day.is-today .wpi-wd-name { color: var(--wpi-color-primary); }
.wpi-wd-ico { font-size: 1.9rem; line-height: 1.2; }
.wpi-wd-temp { font-size: .95rem; color: var(--wpi-color-text-muted); }
.wpi-wd-temp b { color: var(--wpi-color-heading); font-size: 1.05rem; }
.wpi-wd-extra { font-size: .75rem; color: var(--wpi-color-text-muted); }

/* Stil: strip — sve u jednom kompaktnom redu */
.wpi-weather-strip { padding: 14px 18px; }
.wpi-weather-strip .wpi-weather-head { margin-bottom: 10px; }
.wpi-weather-strip .wpi-weather-now-ico,
.wpi-weather-strip .wpi-weather-now-temp { font-size: 1.6rem; }
.wpi-weather-strip .wpi-weather-days { display: flex; overflow-x: auto; padding-bottom: 4px; }
.wpi-weather-strip .wpi-weather-day { flex: 1 0 86px; padding: 10px 6px; }
.wpi-weather-strip .wpi-wd-ico { font-size: 1.4rem; }
.wpi-weather-strip .wpi-wd-extra { display: none; }

/* Stil: panel — veliki danas lijevo, ostali dani desno */
.wpi-weather-panel .wpi-weather-head { flex-direction: column; align-items: flex-start; gap: 8px; }
@media (min-width: 720px) {
	.wpi-weather-panel { display: grid; grid-template-columns: 260px 1fr; gap: 22px; align-items: center; }
	.wpi-weather-panel .wpi-weather-head { margin-bottom: 0; }
	.wpi-weather-panel .wpi-weather-now { flex-direction: column; align-items: flex-start; gap: 4px; }
	.wpi-weather-panel .wpi-weather-now-ico { font-size: 3.4rem; }
	.wpi-weather-panel .wpi-weather-now-temp { font-size: 3.2rem; }
}

/* Greška (samo urednici) */
.wpi-weather-error {
	background: #fef3cd;
	border: 1px solid #f0d000;
	border-radius: 10px;
	padding: 14px 18px;
	font-size: .92rem;
}

@media (max-width: 560px) {
	.wpi-weather { padding: 16px; }
	.wpi-weather-days { grid-template-columns: repeat(3, 1fr); }
	.wpi-weather-day:nth-child(n+7) { display: none; }
}

/* =====================================================================
   NOVOSTI — PORTAL STILOVI (featured | mosaic | magazine | ranked)
   ===================================================================== */

/* Zajedničko: meta redak (kategorija pilula + datum) i placeholder slike */
.wpi-np-meta {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: .78rem;
	color: var(--wpi-color-text-muted);
}
.wpi-np-cat {
	background: var(--wpi-color-primary);
	color: #fff !important;
	font-weight: 700;
	font-size: .68rem;
	text-transform: uppercase;
	letter-spacing: .07em;
	padding: 3px 10px;
	border-radius: 4px;
	text-decoration: none !important;
	transition: background .15s ease;
}
.wpi-np-cat:hover { background: var(--wpi-color-accent); }
.wpi-np-ph {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	min-height: 72px;
	font-weight: 800;
	font-size: 1.6rem;
	color: #fff;
	background: linear-gradient(135deg, var(--wpi-color-primary), var(--wpi-color-secondary));
}

/* ---------- FEATURED: velika istaknuta + kompaktni popis desno ---------- */
.wpi-news-featured {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	gap: 32px;
	align-items: start;
}
.wpi-nf-main { display: flex; flex-direction: column; }
.wpi-nf-thumb {
	display: block;
	border-radius: var(--wpi-radius);
	overflow: hidden;
	aspect-ratio: 16 / 9;
	margin-bottom: 18px;
}
.wpi-nf-thumb img, .wpi-nf-thumb .wpi-np-ph { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s ease; }
.wpi-nf-main:hover .wpi-nf-thumb img { transform: scale(1.04); }
.wpi-nf-body .wpi-np-meta { margin-bottom: 10px; }
.wpi-nf-title { margin: 0 0 10px; font-size: clamp(1.25rem, 2.2vw, 1.7rem); line-height: 1.25; }
.wpi-nf-title a { color: var(--wpi-color-heading); text-decoration: none; transition: color .15s ease; }
.wpi-nf-title a:hover { color: var(--wpi-color-primary); }
.wpi-nf-excerpt { margin: 0; color: var(--wpi-color-text-muted); line-height: 1.65; }

.wpi-nf-side { display: flex; flex-direction: column; }
.wpi-nf-item {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	padding-block: 14px;
	border-bottom: 1px solid var(--wpi-color-border);
}
.wpi-nf-item:first-child { padding-top: 0; }
.wpi-nf-item:last-child { border-bottom: none; padding-bottom: 0; }
.wpi-nf-item-thumb {
	flex: 0 0 96px;
	height: 70px;
	border-radius: var(--wpi-radius-sm);
	overflow: hidden;
	display: block;
}
.wpi-nf-item-thumb img, .wpi-nf-item-thumb .wpi-np-ph { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; min-height: 0; font-size: 1.1rem; }
.wpi-nf-item:hover .wpi-nf-item-thumb img { transform: scale(1.06); }
.wpi-nf-item-body { min-width: 0; }
.wpi-nf-item h4 { margin: 0 0 6px; font-size: .95rem; line-height: 1.35; }
.wpi-nf-item h4 a {
	color: var(--wpi-color-heading);
	text-decoration: none;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	transition: color .15s ease;
}
.wpi-nf-item h4 a:hover { color: var(--wpi-color-primary); }

@media (max-width: 860px) {
	.wpi-news-featured { grid-template-columns: 1fr; gap: 24px; }
}

/* ---------- MOSAIC: naslovi preko slika, prva pločica 2×2 ---------- */
.wpi-news-mosaic {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 175px;
	gap: 14px;
}
.wpi-nm-tile { position: relative; border-radius: var(--wpi-radius); overflow: hidden; }
.wpi-nm-tile.is-lead { grid-column: span 2; grid-row: span 2; }
.wpi-nm-tile > a { display: block; position: absolute; inset: 0; color: #fff; text-decoration: none; }
.wpi-nm-media { position: absolute; inset: 0; }
.wpi-nm-media img, .wpi-nm-media .wpi-np-ph { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.wpi-nm-tile:hover .wpi-nm-media img { transform: scale(1.06); }
.wpi-nm-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 7px;
	padding: 18px;
	background: linear-gradient(180deg, rgba(2, 6, 23, 0) 35%, rgba(2, 6, 23, .82));
	transition: background .25s ease;
}
.wpi-nm-tile:hover .wpi-nm-overlay { background: linear-gradient(180deg, rgba(2, 6, 23, .08) 20%, rgba(2, 6, 23, .9)); }
.wpi-nm-overlay .wpi-np-meta { color: rgba(255, 255, 255, .85); }
.wpi-nm-title {
	font-weight: 700;
	line-height: 1.3;
	font-size: .95rem;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-shadow: 0 1px 8px rgba(0, 0, 0, .4);
}
.wpi-nm-tile.is-lead .wpi-nm-title { font-size: clamp(1.1rem, 1.8vw, 1.45rem); -webkit-line-clamp: 3; }

@media (max-width: 1024px) { .wpi-news-mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 165px; } }
@media (max-width: 560px) {
	.wpi-news-mosaic { grid-template-columns: 1fr; }
	.wpi-nm-tile.is-lead { grid-column: auto; grid-row: span 2; }
}

/* ---------- MAGAZINE: 2 velike gore + male horizontalne ispod ---------- */
.wpi-news-mag-top {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 28px;
	margin-bottom: 26px;
}
.wpi-nmg-card { display: flex; flex-direction: column; }
.wpi-nmg-thumb {
	display: block;
	border-radius: var(--wpi-radius);
	overflow: hidden;
	aspect-ratio: 16 / 9;
	margin-bottom: 14px;
}
.wpi-nmg-thumb img, .wpi-nmg-thumb .wpi-np-ph { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s ease; }
.wpi-nmg-card:hover .wpi-nmg-thumb img { transform: scale(1.04); }
.wpi-nmg-body .wpi-np-meta { margin-bottom: 8px; }
.wpi-nmg-body h3 { margin: 0 0 8px; font-size: 1.2rem; line-height: 1.3; }
.wpi-nmg-body h3 a { color: var(--wpi-color-heading); text-decoration: none; transition: color .15s ease; }
.wpi-nmg-body h3 a:hover { color: var(--wpi-color-primary); }
.wpi-nmg-body p { margin: 0; font-size: .92rem; color: var(--wpi-color-text-muted); line-height: 1.6; }

.wpi-news-mag-rest {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px 28px;
	padding-top: 22px;
	border-top: 1px solid var(--wpi-color-border);
}
.wpi-nmg-mini { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
.wpi-nmg-mini-thumb { flex: 0 0 78px; height: 58px; border-radius: var(--wpi-radius-sm); overflow: hidden; display: block; }
.wpi-nmg-mini-thumb img, .wpi-nmg-mini-thumb .wpi-np-ph { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 0; font-size: 1rem; }
.wpi-nmg-mini h4 { margin: 0 0 4px; font-size: .88rem; line-height: 1.35; }
.wpi-nmg-mini h4 a {
	color: var(--wpi-color-heading);
	text-decoration: none;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.wpi-nmg-mini h4 a:hover { color: var(--wpi-color-primary); }

@media (max-width: 860px) {
	.wpi-news-mag-top { grid-template-columns: 1fr; gap: 22px; }
	.wpi-news-mag-rest { grid-template-columns: 1fr; }
}

/* ---------- RANKED: top lista s velikim brojevima ---------- */
.wpi-news-ranked {
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: 720px;
}
.wpi-nr-item {
	display: flex;
	gap: 20px;
	align-items: flex-start;
	padding-block: 16px;
	border-bottom: 1px solid var(--wpi-color-border);
}
.wpi-nr-item:last-child { border-bottom: none; }
.wpi-nr-num {
	flex: 0 0 auto;
	font-size: 2.2rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.02em;
	background: linear-gradient(160deg, var(--wpi-color-primary), var(--wpi-color-accent));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	opacity: .9;
	min-width: 56px;
}
.wpi-nr-body { min-width: 0; padding-top: 4px; }
.wpi-nr-body h4 { margin: 0 0 5px; font-size: 1.02rem; line-height: 1.35; }
.wpi-nr-body h4 a { color: var(--wpi-color-heading); text-decoration: none; transition: color .15s ease; }
.wpi-nr-body h4 a:hover { color: var(--wpi-color-primary); }

/* ---------- "Učitaj više" — moderna ikona učitavanja ---------- */
.wpi-loadmore {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-width: 170px;
}
.wpi-lm-ico { display: none; flex: 0 0 auto; }
.wpi-lm-loading .wpi-lm-ico { display: inline-block; }
.wpi-lm-loading .wpi-lm-label { opacity: .8; }
.wpi-loadmore:disabled { cursor: progress; }

/* Kružić (spinner) */
.wpi-loadmore[data-lmicon="spinner"] .wpi-lm-ico {
	width: 16px;
	height: 16px;
	border: 2px solid color-mix(in srgb, currentColor 30%, transparent);
	border-top-color: currentColor;
	border-radius: 50%;
	animation: wpiLmSpin .7s linear infinite;
}
@keyframes wpiLmSpin { to { transform: rotate(360deg); } }

/* Tri točkice */
.wpi-loadmore[data-lmicon="dots"] .wpi-lm-ico {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	box-shadow: 10px 0 0 currentColor, 20px 0 0 currentColor;
	margin-right: 20px;
	animation: wpiLmDots .8s ease-in-out infinite;
}
@keyframes wpiLmDots { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* Nove stavke se lagano pojave */
.wpi-lm-new { animation: wpiLmIn .4s ease both; }
@keyframes wpiLmIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- "Prikaži manje" — ikona uz gumb Učitaj više ---------- */
.wpi-loadmore-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}
.wpi-lm-collapse {
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 1.5px solid var(--wpi-color-border);
	border-radius: 12px;
	color: var(--wpi-color-text-muted);
	cursor: pointer;
	transition: all .16s ease;
}
.wpi-lm-collapse:hover {
	border-color: var(--wpi-color-primary);
	color: var(--wpi-color-primary);
	transform: translateY(-2px);
	box-shadow: 0 6px 16px color-mix(in srgb, var(--wpi-color-primary) 18%, transparent);
}
.wpi-lm-collapse svg { width: 17px; height: 17px; }
.wpi-lm-collapse[hidden] { display: none; }

/* =====================================================================
   MODUL: NOVOSTI — INDEX (3 STUPCA)
   Velika priča | srednje vijesti | najnovije s relativnim vremenom.
   Boje prate paletu (primarna umjesto Index-crvene na tuđim shemama).
   ===================================================================== */
.wpi-nix {
	display: grid;
	grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr) minmax(0, .95fr);
	gap: 0;
}
.wpi-nix > * { min-width: 0; padding-inline: 26px; }
.wpi-nix > *:first-child { padding-left: 0; }
.wpi-nix > *:last-child { padding-right: 0; }
.wpi-nix-mid, .wpi-nix-latest { border-left: 1px solid var(--wpi-color-border); }

/* Stupac 1: velika priča */
.wpi-nix-lead-thumb { display: block; overflow: hidden; border-radius: var(--wpi-radius-sm); aspect-ratio: 16 / 10; margin-bottom: 18px; }
.wpi-nix-lead-thumb img, .wpi-nix-lead-thumb .wpi-np-ph { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s ease; }
.wpi-nix-lead:hover .wpi-nix-lead-thumb img { transform: scale(1.03); }
.wpi-nix-lead-title { margin: 0 0 12px; font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.22; font-weight: 800; letter-spacing: -.01em; }
.wpi-nix-lead-title a { color: var(--wpi-color-heading); text-decoration: none; }
.wpi-nix-lead-title a:hover { color: var(--wpi-color-primary); }
.wpi-nix-lead-excerpt { margin: 0; color: var(--wpi-color-text-muted); line-height: 1.65; }

/* Stupac 2: srednja + male */
.wpi-nix-mid-thumb { display: block; overflow: hidden; border-radius: var(--wpi-radius-sm); aspect-ratio: 16 / 10; margin-bottom: 12px; }
.wpi-nix-mid-thumb img, .wpi-nix-mid-thumb .wpi-np-ph { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.wpi-nix-mid-main:hover .wpi-nix-mid-thumb img { transform: scale(1.04); }
.wpi-nix-mid-main h3 { margin: 0 0 6px; font-size: 1.15rem; line-height: 1.3; font-weight: 700; }
.wpi-nix-mid-main h3 a { color: var(--wpi-color-heading); text-decoration: none; }
.wpi-nix-mid-main h3 a:hover { color: var(--wpi-color-primary); }
.wpi-nix-mid-main { padding-bottom: 16px; border-bottom: 1px solid var(--wpi-color-border); margin-bottom: 4px; }
.wpi-nix-mid-item {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding-block: 13px;
	border-bottom: 1px solid var(--wpi-color-border);
}
.wpi-nix-mid-item:last-child { border-bottom: none; padding-bottom: 0; }
.wpi-nix-mid-item-thumb { flex: 0 0 92px; height: 66px; border-radius: var(--wpi-radius-sm); overflow: hidden; display: block; }
.wpi-nix-mid-item-thumb img, .wpi-nix-mid-item-thumb .wpi-np-ph { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 0; font-size: 1rem; }
.wpi-nix-mid-item h4 { margin: 0; font-size: .92rem; line-height: 1.35; font-weight: 700; min-width: 0; }
.wpi-nix-mid-item h4 a {
	color: var(--wpi-color-heading);
	text-decoration: none;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.wpi-nix-mid-item h4 a:hover { color: var(--wpi-color-primary); }

/* Stupac 3: najnovije (timeline s relativnim vremenom) */
.wpi-nix-latest-title {
	margin: 0 0 14px;
	font-size: .82rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .1em;
	padding-bottom: 9px;
	border-bottom: 3px solid var(--wpi-color-primary);
	display: inline-block;
}
.wpi-nix-latest-list { list-style: none; margin: 0; padding: 0; }
.wpi-nix-latest-list li {
	position: relative;
	display: flex;
	gap: 16px;
	align-items: flex-start;
	padding-block: 13px;
}
/* Tanka linija koja povezuje vremena (timeline) */
.wpi-nix-latest-list li:not(:last-child)::before {
	content: '';
	position: absolute;
	left: 21px;
	top: 40px;
	bottom: -8px;
	width: 1px;
	background: var(--wpi-color-border);
}
.wpi-nix-time {
	flex: 0 0 44px;
	text-align: center;
	line-height: 1.05;
}
.wpi-nix-time b { display: block; font-size: 1.15rem; font-weight: 800; color: var(--wpi-color-primary); }
.wpi-nix-time small { font-size: .68rem; font-weight: 700; color: var(--wpi-color-primary); text-transform: uppercase; }
.wpi-nix-latest-list a {
	color: var(--wpi-color-heading);
	text-decoration: none;
	font-weight: 600;
	font-size: .92rem;
	line-height: 1.4;
	min-width: 0;
}
.wpi-nix-latest-list a:hover { color: var(--wpi-color-primary); }
.wpi-nix-more {
	display: block;
	margin-top: 16px;
	padding: 13px 16px;
	text-align: center;
	border: 1px solid var(--wpi-color-border);
	border-radius: var(--wpi-radius-sm);
	font-size: .8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--wpi-color-text-muted);
	text-decoration: none;
	transition: all .16s ease;
}
.wpi-nix-more:hover { border-color: var(--wpi-color-primary); color: var(--wpi-color-primary); background: color-mix(in srgb, var(--wpi-color-primary) 5%, transparent); }

@media (max-width: 1024px) {
	.wpi-nix { grid-template-columns: 1fr 1fr; }
	.wpi-nix-lead { grid-column: 1 / -1; padding: 0 0 22px; margin-bottom: 4px; border-bottom: 1px solid var(--wpi-color-border); }
	.wpi-nix-mid { border-left: none; padding-left: 0; }
}
@media (max-width: 680px) {
	.wpi-nix { grid-template-columns: 1fr; }
	.wpi-nix > * { padding-inline: 0; border-left: none; }
	.wpi-nix-latest { border-top: 1px solid var(--wpi-color-border); padding-top: 20px; }
}

/* Index modul — datumi objave (d.m.Y.) na svim stavkama */
.wpi-nix-date { display: block; font-size: .76rem; color: var(--wpi-color-text-muted); }
.wpi-nix-lead .wpi-nix-date { margin: 2px 0 10px; }
.wpi-nix-mid-main .wpi-nix-date { margin-top: 4px; }
.wpi-nix-mid-item-body { min-width: 0; }
.wpi-nix-mid-item-body .wpi-nix-date { margin-top: 4px; }

/* Oznaka ljepljive (sticky) objave u portal stilovima */
.wpi-np-pin { font-size: .82rem; line-height: 1; filter: saturate(1.2); }

/* =====================================================================
   MODUL: NEWS SCROLL (beskonačna traka u jednom redu)
   13 shema (CSS varijable) × 4 varijante oblika = 52 stila.
   ===================================================================== */
.wpi-nsc {
	display: flex;
	align-items: center;
	gap: 0;
	overflow: hidden;
	border-radius: var(--wpi-radius-sm);
}
.wpi-nsc-label {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	font-size: .74rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	background: var(--nsc-accent);
	color: var(--nsc-contrast);
	align-self: stretch;
}
.wpi-nsc-pulse {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
	animation: nscPulse 1.2s ease-in-out infinite;
}
@keyframes nscPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.7); } }

.wpi-nsc-view { display: flex; overflow: hidden; flex: 1; min-width: 0; }
.wpi-nsc-track {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	min-width: 100%;
	list-style: none;
	margin: 0;
	padding: 0;
	animation: nscScroll var(--nsc-dur, 60s) linear infinite;
}
@keyframes nscScroll { to { transform: translateX(-100%); } }
.wpi-nsc-rev .wpi-nsc-track { animation-direction: reverse; }
.wpi-nsc-pause:hover .wpi-nsc-track { animation-play-state: paused; }

.wpi-nsc-item { flex: 0 0 auto; display: inline-flex; align-items: center; }
.wpi-nsc-item a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding-block: 10px;
	font-size: .9rem;
	font-weight: 600;
	color: var(--nsc-text);
	text-decoration: none;
	white-space: nowrap;
	transition: color .15s ease;
}
.wpi-nsc-item a:hover { color: var(--nsc-accent-hover, var(--nsc-accent)); }
.wpi-nsc-item time { font-size: .74rem; opacity: .65; font-weight: 700; }
.wpi-nsc-pin { font-size: .8rem; }

/* Razmak + razdjelnici */
.wpi-nsc-gap-small .wpi-nsc-item { padding-inline: 12px; }
.wpi-nsc-gap-normal .wpi-nsc-item { padding-inline: 20px; }
.wpi-nsc-gap-large .wpi-nsc-item { padding-inline: 32px; }
.wpi-nsc-item::after {
	color: var(--nsc-text);
	opacity: .35;
	font-weight: 700;
	margin-left: calc(2 * var(--nsc-pad, 20px) * 0);
}
.wpi-nsc-sep-dot .wpi-nsc-item::after { content: '•'; margin-left: 20px; }
.wpi-nsc-sep-line .wpi-nsc-item::after { content: '|'; margin-left: 20px; }
.wpi-nsc-sep-slash .wpi-nsc-item::after { content: '/'; margin-left: 20px; }
.wpi-nsc-sep-arrow .wpi-nsc-item::after { content: '→'; margin-left: 20px; }
.wpi-nsc-gap-small.wpi-nsc-sep-dot .wpi-nsc-item::after,
.wpi-nsc-gap-small.wpi-nsc-sep-line .wpi-nsc-item::after,
.wpi-nsc-gap-small.wpi-nsc-sep-slash .wpi-nsc-item::after,
.wpi-nsc-gap-small.wpi-nsc-sep-arrow .wpi-nsc-item::after { margin-left: 12px; }

/* ---------- 13 SHEMA (CSS varijable) ---------- */
.wpi-nsc-c-light    { --nsc-accent: var(--wpi-color-primary); --nsc-contrast: #fff; --nsc-solid-bg: var(--wpi-color-bg-alt); --nsc-text: var(--wpi-color-heading); --nsc-soft: color-mix(in srgb, var(--wpi-color-primary) 8%, var(--wpi-color-bg)); }
.wpi-nsc-c-dark     { --nsc-accent: var(--wpi-color-accent); --nsc-contrast: #0f172a; --nsc-solid-bg: var(--wpi-color-secondary); --nsc-text: #fff; --nsc-soft: var(--wpi-color-secondary); }
.wpi-nsc-c-primary  { --nsc-accent: color-mix(in srgb, var(--wpi-color-primary) 70%, #000); --nsc-contrast: #fff; --nsc-solid-bg: var(--wpi-color-primary); --nsc-text: #fff; --nsc-soft: color-mix(in srgb, var(--wpi-color-primary) 12%, var(--wpi-color-bg)); }
.wpi-nsc-c-gradient { --nsc-accent: var(--wpi-color-accent); --nsc-contrast: #fff; --nsc-solid-bg: linear-gradient(90deg, var(--wpi-color-primary), var(--wpi-color-secondary)); --nsc-text: #fff; --nsc-soft: color-mix(in srgb, var(--wpi-color-primary) 10%, var(--wpi-color-bg)); }
.wpi-nsc-c-breaking { --nsc-accent: #b91c1c; --nsc-contrast: #fff; --nsc-solid-bg: #dc2626; --nsc-text: #fff; --nsc-soft: #fee2e2; }
.wpi-nsc-c-amber    { --nsc-accent: #b45309; --nsc-contrast: #fff; --nsc-solid-bg: #f59e0b; --nsc-text: #451a03; --nsc-soft: #fef3c7; }
.wpi-nsc-c-green    { --nsc-accent: #047857; --nsc-contrast: #fff; --nsc-solid-bg: #059669; --nsc-text: #fff; --nsc-soft: #d1fae5; }
.wpi-nsc-c-sky      { --nsc-accent: #0369a1; --nsc-contrast: #fff; --nsc-solid-bg: #0284c7; --nsc-text: #fff; --nsc-soft: #e0f2fe; }
.wpi-nsc-c-violet   { --nsc-accent: #5b21b6; --nsc-contrast: #fff; --nsc-solid-bg: #7c3aed; --nsc-text: #fff; --nsc-soft: #ede9fe; }
.wpi-nsc-c-rose     { --nsc-accent: #9f1239; --nsc-contrast: #fff; --nsc-solid-bg: #e11d48; --nsc-text: #fff; --nsc-soft: #ffe4e6; }
.wpi-nsc-c-mono     { --nsc-accent: #111827; --nsc-contrast: #fff; --nsc-solid-bg: #111827; --nsc-text: #fff; --nsc-soft: #f3f4f6; }
.wpi-nsc-c-soft     { --nsc-accent: var(--wpi-color-primary); --nsc-contrast: #fff; --nsc-solid-bg: color-mix(in srgb, var(--wpi-color-primary) 10%, var(--wpi-color-bg)); --nsc-text: var(--wpi-color-heading); --nsc-soft: color-mix(in srgb, var(--wpi-color-primary) 6%, var(--wpi-color-bg)); }
.wpi-nsc-c-glass    { --nsc-accent: var(--wpi-color-primary); --nsc-contrast: #fff; --nsc-solid-bg: rgba(255, 255, 255, .5); --nsc-text: var(--wpi-color-heading); --nsc-soft: rgba(255, 255, 255, .55); }

/* ---------- 4 VARIJANTE OBLIKA ---------- */
/* solid — puna traka u boji sheme */
.wpi-nsc-v-solid { background: var(--nsc-solid-bg); }
.wpi-nsc-c-glass.wpi-nsc-v-solid { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, .45); }

/* outline — proziran s obrubom u akcentnoj */
.wpi-nsc-v-outline { background: transparent; border: 1.5px solid var(--nsc-accent); --nsc-text: var(--wpi-color-heading); }
.wpi-nsc-c-dark.wpi-nsc-v-outline,
.wpi-nsc-c-mono.wpi-nsc-v-outline { --nsc-text: var(--wpi-color-heading); }

/* pill — svaka vijest u zaobljenoj pilulici */
.wpi-nsc-v-pill { background: transparent; --nsc-text: var(--wpi-color-heading); }
.wpi-nsc-v-pill .wpi-nsc-label { border-radius: 999px; }
.wpi-nsc-v-pill .wpi-nsc-item a {
	background: var(--nsc-soft);
	border-radius: 999px;
	padding: 7px 16px;
	margin-block: 6px;
}
.wpi-nsc-c-dark.wpi-nsc-v-pill .wpi-nsc-item a { color: #fff; }
.wpi-nsc-v-pill .wpi-nsc-item::after { content: none !important; }

/* line — minimal: samo donja linija u akcentnoj boji */
/* ---------- Oblik rubova trake (shape) ---------- */
/* Kockast — oštri rubovi cijele trake, oznake i pill stavki. */
.wpi-nsc-shape-square { border-radius: 0; }
.wpi-nsc-shape-square .wpi-nsc-label,
.wpi-nsc-shape-square .wpi-nsc-item a { border-radius: 0; }
/* Zaobljen — mekana kapsula; lijeva oznaka prati zaobljenje. */
.wpi-nsc-shape-round { border-radius: 999px; }
.wpi-nsc-shape-round .wpi-nsc-label { padding-left: 20px; }

.wpi-nsc-v-line { background: transparent; border-radius: 0; border-bottom: 2px solid var(--nsc-accent); --nsc-text: var(--wpi-color-heading); }
.wpi-nsc-v-line .wpi-nsc-label { background: transparent; color: var(--nsc-accent); padding-left: 0; }

/* Pristupačnost: bez animacije → obična traka s ručnim scrollom */
@media (prefers-reduced-motion: reduce) {
	.wpi-nsc-track { animation: none; }
	.wpi-nsc-view { overflow-x: auto; }
	.wpi-nsc-track[aria-hidden="true"] { display: none; }
}

/* =====================================================
   NOVOSTI — SEKTOR (slider + kartice | popis | paneli)
   ===================================================== */
.wpi-nsk {
	display: grid;
	grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr) minmax(0, 1fr);
	gap: calc(28px * var(--wpi-sscale, 1));
	align-items: start;
}

/* ---- Slider ---- */
.wpi-nsk-slider { position: relative; }
.wpi-nsk-slides { display: grid; }
.wpi-nsk-slide {
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.55s ease, visibility 0.55s ease;
}
.wpi-nsk-slide.is-active { opacity: 1; visibility: visible; }
.wpi-nsk-slide > a { display: block; position: relative; color: inherit; text-decoration: none; }
.wpi-nsk-slide-media { display: block; aspect-ratio: 16 / 9.4; overflow: hidden; border-radius: var(--wpi-radius, 8px); background: var(--wpi-color-bg-alt); }
.wpi-nsk-slide-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wpi-nsk-slide-title {
	position: absolute;
	left: 0;
	right: 18%;
	bottom: 8%;
	padding: 0.7em 1em 0.7em 1.15em;
	background: rgba(255, 255, 255, 0.88);
	backdrop-filter: blur(4px);
	color: var(--wpi-color-text, #16222e);
	font-size: clamp(1.15rem, 1.9vw, 1.7rem);
	font-weight: 600;
	line-height: 1.3;
	border-radius: 0 var(--wpi-radius, 8px) var(--wpi-radius, 8px) 0;
}
.wpi-nsk-slide:hover .wpi-nsk-slide-title { background: rgba(255, 255, 255, 0.97); }

/* Točkice */
.wpi-nsk-dots { display: flex; justify-content: center; gap: 9px; padding: 14px 0 0; }
.wpi-nsk-dot {
	width: 11px;
	height: 11px;
	padding: 0;
	border: 0;
	border-radius: 2px;
	background: color-mix(in srgb, var(--wpi-color-primary) 25%, transparent);
	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease;
}
.wpi-nsk-dot:hover { background: color-mix(in srgb, var(--wpi-color-primary) 55%, transparent); }
.wpi-nsk-dot.is-active { background: var(--wpi-color-primary); transform: scale(1.15); }

/* ---- Kartice ispod slidera ---- */
.wpi-nsk-cards {
	display: grid;
	grid-template-columns: repeat(var(--nsk-cards, 3), minmax(0, 1fr));
	gap: calc(22px * var(--wpi-sscale, 1));
	margin-top: calc(26px * var(--wpi-sscale, 1));
}
.wpi-nsk-card-thumb { display: block; aspect-ratio: 16 / 10.5; overflow: hidden; border-radius: var(--wpi-radius, 8px); background: var(--wpi-color-bg-alt); }
.wpi-nsk-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.35s ease; }
.wpi-nsk-card:hover .wpi-nsk-card-thumb img { transform: scale(1.05); }
.wpi-nsk-pub { display: block; margin: 0.7em 0 0.25em; font-size: 0.82rem; color: var(--wpi-color-text-muted); }
.wpi-nsk-card-title { margin: 0; font-size: 1.06rem; line-height: 1.4; font-weight: 600; }
.wpi-nsk-card-title a { color: inherit; text-decoration: none; }
.wpi-nsk-card-title a:hover { color: var(--wpi-color-primary); }

/* ---- Srednji stupac: popis datum + naslov ---- */
.wpi-nsk-list-title {
	margin: 0 0 0.9em;
	font-size: 0.88rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--wpi-color-primary);
}
.wpi-nsk-items { list-style: none; margin: 0; padding: 0; }
.wpi-nsk-item { padding: 0.85em 0; border-bottom: 1px solid var(--wpi-color-border); }
.wpi-nsk-item:first-child { padding-top: 0; }
.wpi-nsk-date { display: block; margin-bottom: 0.3em; font-size: 0.8rem; color: var(--wpi-color-text-muted); }
.wpi-nsk-item > a {
	display: block;
	font-size: 1.02rem;
	font-weight: 500;
	line-height: 1.42;
	color: var(--wpi-color-text);
	text-decoration: none;
	transition: color 0.2s ease;
}
.wpi-nsk-item > a:hover { color: var(--wpi-color-primary); }

/* ---- Desni stupac: paneli ---- */
.wpi-nsk-side { display: grid; gap: calc(20px * var(--wpi-sscale, 1)); align-content: start; }
.wpi-nsk-panel {
	display: block;
	overflow: hidden;
	border-radius: var(--wpi-radius, 8px);
	text-decoration: none;
	--nskp-bg: var(--wpi-color-primary);
	--nskp-text: #fff;
}
.wpi-nskp-accent { --nskp-bg: var(--wpi-color-accent, var(--wpi-color-secondary)); }
.wpi-nskp-dark { --nskp-bg: #16222e; }
.wpi-nskp-light { --nskp-bg: var(--wpi-color-bg-alt); --nskp-text: var(--wpi-color-text); }

/* Slikovni panel: traka u boji + slika */
.wpi-nsk-panel-head {
	display: block;
	padding: 0.75em 1.1em;
	background: var(--nskp-bg);
	color: var(--nskp-text);
	font-size: 0.92rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-align: center;
}
.wpi-nsk-panel-media { display: block; background: var(--wpi-color-bg-alt); }
.wpi-nsk-panel-media img { width: 100%; height: auto; display: block; transition: transform 0.35s ease; }
a.wpi-nsk-panel-image:hover .wpi-nsk-panel-media img { transform: scale(1.04); }
.wpi-nsk-panel-image .wpi-nsk-panel-sub {
	display: block;
	padding: 0.6em 1.1em;
	background: var(--nskp-bg);
	color: var(--nskp-text);
	font-size: 0.85rem;
	text-align: center;
}

/* Ikonski panel: pločica na boji */
.wpi-nsk-panel-icon {
	display: grid;
	justify-items: center;
	align-content: center;
	gap: 0.55em;
	min-height: 190px;
	padding: 1.6em 1.2em;
	background: var(--nskp-bg);
	color: var(--nskp-text);
	text-align: center;
	transition: filter 0.2s ease, transform 0.2s ease;
}
a.wpi-nsk-panel-icon:hover { filter: brightness(1.08); transform: translateY(-2px); }
.wpi-nsk-panel-ico { display: block; width: 54px; height: 54px; }
.wpi-nsk-panel-ico svg { width: 100%; height: 100%; }
.wpi-nsk-panel-title { font-size: 1.05rem; font-weight: 700; letter-spacing: 0.04em; }
.wpi-nsk-panel-icon .wpi-nsk-panel-sub { font-size: 0.85rem; opacity: 0.85; }

/* ---- Responzivno ---- */
@media (max-width: 1100px) {
	.wpi-nsk { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); }
	.wpi-nsk-side {
		grid-column: 1 / -1;
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
		align-items: start;
	}
}
@media (max-width: 760px) {
	.wpi-nsk { grid-template-columns: minmax(0, 1fr); }
	.wpi-nsk-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.wpi-nsk-side { grid-template-columns: minmax(0, 1fr); }
	.wpi-nsk-slide-title { right: 6%; font-size: 1.05rem; }
}

/* Pristupačnost: bez automatske izmjene slajdova */
@media (prefers-reduced-motion: reduce) {
	.wpi-nsk-slide { transition: none; }
}

/* ---- Puna širina modula Novosti — Sektor ----
   Tekstualni sadržaj (popis, naslovi) ne smije lijepiti za rub ekrana:
   umjesto globalnih 5px dajemo udoban gutter koji raste s ekranom. */
.wpi-module-newssektor .wpi-full-width { padding-inline: clamp(14px, 2.6vw, 48px); }

/* Na vrlo širokim ekranima raspored diše: veći razmaci, veći naslovi popisa */
@media (min-width: 1600px) {
	.wpi-module-newssektor .wpi-full-width .wpi-nsk { gap: calc(38px * var(--wpi-sscale, 1)); }
	.wpi-module-newssektor .wpi-full-width .wpi-nsk-item > a { font-size: 1.08rem; }
	.wpi-module-newssektor .wpi-full-width .wpi-nsk-card-title { font-size: 1.12rem; }
}

/* ---- Novosti — Sektor: datum na slajdu + izbor ruba slika ---- */
.wpi-nsk-slide-date {
	display: block;
	margin-bottom: 0.35em;
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--wpi-color-text-muted);
}

/* Ravni rub: slider, kartice, paneli i naslovna traka bez zaobljenja */
.wpi-nsk-sq .wpi-nsk-slide-media,
.wpi-nsk-sq .wpi-nsk-slide-title,
.wpi-nsk-sq .wpi-nsk-card-thumb,
.wpi-nsk-sq .wpi-nsk-panel { border-radius: 0; }

/* Slikovni panel bez slike: jasan placeholder (uključen panel ne smije nestati) */
.wpi-nsk-panel-ph {
	display: grid;
	place-items: center;
	min-height: 120px;
	background: var(--wpi-color-bg-alt);
	color: color-mix(in srgb, var(--wpi-color-text-muted) 55%, transparent);
	border: 1px dashed var(--wpi-color-border);
}
.wpi-nsk-panel-ph svg { width: 34px; height: 34px; }

/* =====================================================
   SLIDER (rotator slika) — hero slideshow
   ===================================================== */
.wpi-slider {
	position: relative;
	overflow: hidden;
	border-radius: var(--wpi-radius, 8px);
	background: #0b0f14;
	isolation: isolate;
}
.wpi-slider-sq { border-radius: 0; }
/* U punoj širini rub uvijek ravni (ide od ruba do ruba) */
.wpi-module-slider .wpi-full-width .wpi-slider { border-radius: 0; }

.wpi-slider-track { position: relative; width: 100%; height: 100%; }

/* ---- Visine ---- */
.wpi-slider-h-small  { height: clamp(300px, 42vw, 380px); }
.wpi-slider-h-medium { height: clamp(380px, 52vw, 500px); }
.wpi-slider-h-large  { height: clamp(460px, 62vw, 640px); }
.wpi-slider-h-full   { height: 100vh; height: 100svh; }
.wpi-slider-h-auto   { height: auto; }
.wpi-slider-h-auto .wpi-slider-track { display: grid; }
.wpi-slider-h-auto .wpi-slide { position: relative; }
.wpi-slider-h-auto .wpi-slide:not(.is-active) { display: none; }
/* "Prema slici (bez rezanja)": okvir slajda poprimi STVARNI omjer slike
   (--wpi-slide-ar postavljen inline iz dimenzija slike), pa cover prikaže
   cijelu sliku bez rezanja. Fallback 16/7 kad omjer nije poznat (npr. URL slika). */
.wpi-slider-h-auto .wpi-slide-has-img { aspect-ratio: var(--wpi-slide-ar, 16 / 7); }

/* ---- Slajd (osim auto висине: apsolutno slaganje) ---- */
.wpi-slider:not(.wpi-slider-h-auto) .wpi-slide {
	position: absolute;
	inset: 0;
}
.wpi-slide {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.wpi-slide:not(.wpi-slide-has-img) { background: linear-gradient(135deg, var(--wpi-color-primary), color-mix(in srgb, var(--wpi-color-primary) 55%, #000)); }

/* ---- Prijelaz FADE ---- */
.wpi-slider-fade .wpi-slide {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.7s ease, visibility 0.7s ease;
	z-index: 1;
}
.wpi-slider-fade .wpi-slide.is-active { opacity: 1; visibility: visible; z-index: 2; }

/* ---- Prijelaz SLIDE (klizanje) ---- */
.wpi-slider-slide .wpi-slider-track { display: flex; transition: transform 0.6s cubic-bezier(.4,.0,.2,1); }
.wpi-slider-slide .wpi-slide { position: relative; inset: auto; flex: 0 0 100%; width: 100%; }
.wpi-slider-slide.wpi-slider-h-auto .wpi-slider-track { display: flex; }
.wpi-slider-slide.wpi-slider-h-auto .wpi-slide:not(.is-active) { display: block; }

/* ---- Ken Burns (suptilni zoom aktivnog slajda) ---- */
.wpi-slider-kb .wpi-slide.is-active.wpi-slide-has-img { animation: wpi-kenburns 9s ease-out both; }
@keyframes wpi-kenburns { from { background-size: 108%; } to { background-size: 118%; } }

/* ---- Overlay varijante ---- */
.wpi-slide-overlay { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.wpi-slider-ov-dark    .wpi-slide-overlay { background: rgba(10, 15, 22, 0.48); }
.wpi-slider-ov-bottom  .wpi-slide-overlay { background: linear-gradient(to top, rgba(8,12,18,0.82) 0%, rgba(8,12,18,0.15) 45%, transparent 70%); }
.wpi-slider-ov-primary .wpi-slide-overlay { background: color-mix(in srgb, var(--wpi-color-primary) 62%, transparent); }
.wpi-slider-ov-gradient .wpi-slide-overlay { background: linear-gradient(115deg, rgba(8,12,18,0.78) 0%, rgba(8,12,18,0.30) 48%, transparent 78%); }

/* ---- Sadržaj slajda ---- */
.wpi-slide-inner {
	position: absolute;
	inset: 0;
	z-index: 4;
	display: flex;
	padding: clamp(24px, 5vw, 76px);
}
.wpi-slider-tp-top    .wpi-slide-inner { align-items: flex-start; }
.wpi-slider-tp-center .wpi-slide-inner { align-items: center; }
.wpi-slider-tp-bottom .wpi-slide-inner { align-items: flex-end; }
.wpi-slider-ta-left   .wpi-slide-inner { justify-content: flex-start; text-align: left; }
.wpi-slider-ta-center .wpi-slide-inner { justify-content: center; text-align: center; }
.wpi-slider-ta-right  .wpi-slide-inner { justify-content: flex-end; text-align: right; }

.wpi-slide-content {
	max-width: 680px;
	color: #fff;
	text-shadow: 0 2px 20px rgba(0,0,0,0.35);
}
.wpi-slider-ta-center .wpi-slide-content { margin-inline: auto; }

/* Ulazna animacija sadržaja aktivnog slajda */
.wpi-slide.is-active .wpi-slide-content > * { animation: wpi-slide-up 0.7s cubic-bezier(.2,.7,.2,1) both; }
.wpi-slide.is-active .wpi-slide-content > *:nth-child(2) { animation-delay: 0.09s; }
.wpi-slide.is-active .wpi-slide-content > *:nth-child(3) { animation-delay: 0.18s; }
.wpi-slide.is-active .wpi-slide-content > *:nth-child(4) { animation-delay: 0.27s; }
@keyframes wpi-slide-up { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

.wpi-slide-kicker {
	display: inline-block;
	margin-bottom: 0.8em;
	padding: 0.4em 1em;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	background: color-mix(in srgb, var(--wpi-color-primary) 88%, transparent);
	border-radius: 100px;
}
.wpi-slide-title {
	margin: 0 0 0.35em;
	font-size: clamp(1.8rem, 4.4vw, 3.4rem);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.01em;
	color: #fff;
}
.wpi-slide-sub {
	margin: 0;
	font-size: clamp(1rem, 1.7vw, 1.28rem);
	line-height: 1.55;
	opacity: 0.94;
}
.wpi-slide-btn { margin-top: 1.5em; }

/* ---- Strelice ---- */
.wpi-slider-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 6;
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255,255,255,0.16);
	color: #fff;
	backdrop-filter: blur(6px);
	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease;
}
.wpi-slider-arrow:hover { background: var(--wpi-color-primary); transform: translateY(-50%) scale(1.06); }
.wpi-slider-arrow svg { width: 24px; height: 24px; }
.wpi-slider-prev { left: clamp(10px, 2vw, 26px); }
.wpi-slider-next { right: clamp(10px, 2vw, 26px); }

/* ---- Točkice ---- */
.wpi-slider-dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: clamp(14px, 2.4vw, 26px);
	z-index: 6;
	display: flex;
	justify-content: center;
	gap: 10px;
}
.wpi-slider-ta-left  .wpi-slider-dots { justify-content: flex-start; padding-left: clamp(24px, 5vw, 76px); }
.wpi-slider-ta-right .wpi-slider-dots { justify-content: flex-end; padding-right: clamp(24px, 5vw, 76px); }
.wpi-slider-dot {
	width: 12px;
	height: 12px;
	padding: 0;
	border: 0;
	border-radius: 100px;
	background: rgba(255,255,255,0.5);
	cursor: pointer;
	transition: background 0.25s ease, width 0.25s ease;
}
.wpi-slider-dot:hover { background: rgba(255,255,255,0.8); }
.wpi-slider-dot.is-active { width: 30px; background: #fff; }

/* ---- Jedan slajd: bez navigacije ---- */
.wpi-slider-single .wpi-slider-arrow,
.wpi-slider-single .wpi-slider-dots { display: none; }

/* ---- Responzivno ---- */
@media (max-width: 680px) {
	.wpi-slider-arrow { width: 42px; height: 42px; }
	.wpi-slider-arrow svg { width: 20px; height: 20px; }
	.wpi-slide-inner { padding: 22px; }
	.wpi-slider-h-full { height: 78vh; height: 78svh; }
}

/* ---- Pristupačnost: bez pokreta ---- */
@media (prefers-reduced-motion: reduce) {
	.wpi-slider-fade .wpi-slide { transition: none; }
	.wpi-slider-slide .wpi-slider-track { transition: none; }
	.wpi-slider-kb .wpi-slide.is-active.wpi-slide-has-img { animation: none; }
	.wpi-slide.is-active .wpi-slide-content > * { animation: none; }
}

/* =====================================================
   RADNA VREMENA I KONTAKTI — 8 rasporeda × 6 shema
   ===================================================== */
.wpi-wh {
	--wh-card: #fff;
	--wh-text: var(--wpi-color-text, #1a2330);
	--wh-muted: var(--wpi-color-text-muted, #647084);
	--wh-border: var(--wpi-color-border, #e6eaf0);
	--wh-accent: var(--wpi-color-primary);
	--wh-head-bg: var(--wpi-color-primary);
	--wh-head-text: #fff;
	--wh-radius: var(--wpi-radius, 10px);
	color: var(--wh-text);
}
.wpi-wh-heading {
	margin: 0 0 1.1em;
	font-size: clamp(1.4rem, 2.5vw, 1.9rem);
	font-weight: 800;
	letter-spacing: -0.01em;
}

/* ---- Sheme boja (samo varijable) ---- */
.wpi-whs-soft {
	--wh-card: color-mix(in srgb, var(--wpi-color-primary) 6%, #fff);
	--wh-border: color-mix(in srgb, var(--wpi-color-primary) 18%, #fff);
}
.wpi-whs-primary {
	--wh-card: color-mix(in srgb, var(--wpi-color-primary) 8%, #fff);
	--wh-border: color-mix(in srgb, var(--wpi-color-primary) 22%, #fff);
	--wh-head-bg: var(--wpi-color-primary);
}
.wpi-whs-dark {
	--wh-card: #1b2532;
	--wh-text: #eef2f7;
	--wh-muted: #9fb0c3;
	--wh-border: #2b3a4d;
	--wh-accent: color-mix(in srgb, var(--wpi-color-primary) 70%, #fff);
	--wh-head-bg: #0f1722;
	--wh-head-text: #fff;
}
.wpi-whs-glass {
	--wh-card: rgba(255,255,255,0.55);
	--wh-border: rgba(255,255,255,0.7);
}
.wpi-whs-glass .wpi-wh-dept,
.wpi-whs-glass .wpi-wh-person,
.wpi-whs-glass .wpi-wh-object { backdrop-filter: blur(9px); }
.wpi-whs-accent {
	--wh-accent: var(--wpi-color-accent, var(--wpi-color-secondary));
	--wh-head-bg: var(--wpi-color-accent, var(--wpi-color-secondary));
	--wh-card: color-mix(in srgb, var(--wpi-color-accent, var(--wpi-color-secondary)) 7%, #fff);
	--wh-border: color-mix(in srgb, var(--wpi-color-accent, var(--wpi-color-secondary)) 20%, #fff);
}

/* ---- Zaglavlje institucije ---- */
.wpi-wh-object {
	display: flex;
	align-items: center;
	gap: clamp(16px, 3vw, 32px);
	padding: clamp(18px, 2.6vw, 30px);
	margin-bottom: 26px;
	background: var(--wh-card);
	border: 1px solid var(--wh-border);
	border-radius: var(--wh-radius);
}
.wpi-wh-logo { flex: 0 0 auto; }
.wpi-wh-logo-img { display: block; width: clamp(64px, 9vw, 104px); height: auto; }
.wpi-wh-object-body { min-width: 0; }
.wpi-wh-object-name { margin: 0 0 0.5em; font-size: clamp(1.15rem, 2vw, 1.55rem); font-weight: 800; }
.wpi-wh-object-meta { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; }
.wpi-wh-object-meta li { display: flex; align-items: center; gap: 8px; font-size: 0.95rem; color: var(--wh-muted); }
.wpi-wh-object-meta a { color: inherit; text-decoration: none; }
.wpi-wh-object-meta a:hover { color: var(--wh-accent); }
.wpi-wh-object-note { margin: 0.8em 0 0; font-size: 0.9rem; color: var(--wh-muted); }

.wpi-wh-ico { display: inline-flex; flex: 0 0 auto; width: 17px; height: 17px; color: var(--wh-accent); }
.wpi-wh-ico svg { width: 100%; height: 100%; }

/* ---- Zajednička mreža hours + people ---- */
.wpi-wh-grid { display: grid; gap: clamp(18px, 2.6vw, 30px); }

/* Odjeli i osobe kao kartice (osnova) */
.wpi-wh-hours, .wpi-wh-people {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.wpi-wh-cols-1 .wpi-wh-hours, .wpi-wh-cols-1 .wpi-wh-people { grid-template-columns: 1fr; }
.wpi-wh-cols-2 .wpi-wh-hours, .wpi-wh-cols-2 .wpi-wh-people { grid-template-columns: repeat(2, 1fr); }
.wpi-wh-cols-3 .wpi-wh-hours, .wpi-wh-cols-3 .wpi-wh-people { grid-template-columns: repeat(3, 1fr); }

.wpi-wh-dept, .wpi-wh-person {
	background: var(--wh-card);
	border: 1px solid var(--wh-border);
	border-radius: var(--wh-radius);
	padding: clamp(16px, 2vw, 22px);
}
.wpi-wh-dept-name {
	display: flex; align-items: center; gap: 9px;
	margin: 0 0 0.9em; font-size: 1.08rem; font-weight: 700;
}
.wpi-wh-days { margin: 0; }
.wpi-wh-day {
	display: flex; justify-content: space-between; gap: 14px;
	padding: 0.5em 0; border-bottom: 1px dashed var(--wh-border);
}
.wpi-wh-day:last-child { border-bottom: 0; }
.wpi-wh-day dt { margin: 0; color: var(--wh-muted); font-size: 0.92rem; }
.wpi-wh-day dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.wpi-wh-day.is-closed dd { color: #d1495b; font-weight: 600; }
.wpi-wh-dept-note { margin: 0.8em 0 0; font-size: 0.84rem; color: var(--wh-muted); font-style: italic; }

/* Osobe */
.wpi-wh-person-head { margin-bottom: 0.7em; }
.wpi-wh-person-name { display: block; font-size: 1.06rem; font-weight: 700; }
.wpi-wh-person-role { display: block; font-size: 0.9rem; color: var(--wh-accent); font-weight: 600; margin-top: 2px; }
.wpi-wh-person-dept { display: block; font-size: 0.82rem; color: var(--wh-muted); margin-top: 2px; }
.wpi-wh-person-meta { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.wpi-wh-person-meta li { display: flex; align-items: center; gap: 8px; font-size: 0.92rem; }
.wpi-wh-person-meta a { color: var(--wh-text); text-decoration: none; font-variant-numeric: tabular-nums; }
.wpi-wh-person-meta a:hover { color: var(--wh-accent); }

/* =========== RASPOREDI =========== */

/* --- TABLICA: dani kao redovi tablice, bez kartica po danu --- */
.wpi-wh-table .wpi-wh-dept, .wpi-wh-table .wpi-wh-person {
	border-width: 0; border-top: 3px solid var(--wh-accent);
	border-radius: 0; background: var(--wh-card);
	box-shadow: 0 1px 0 var(--wh-border), inset 0 0 0 1px var(--wh-border);
}
.wpi-wh-table .wpi-wh-day { border-bottom: 1px solid var(--wh-border); }

/* --- LISTA: bez kartica, samo linije --- */
.wpi-wh-list .wpi-wh-hours, .wpi-wh-list .wpi-wh-people { grid-template-columns: 1fr; gap: 0; }
.wpi-wh-list .wpi-wh-dept, .wpi-wh-list .wpi-wh-person {
	background: transparent; border: 0; border-top: 1px solid var(--wh-border);
	border-radius: 0; padding: 18px 4px;
}
.wpi-wh-list .wpi-wh-dept:first-child, .wpi-wh-list .wpi-wh-person:first-child { border-top: 0; }

/* --- PODIJELJENO: radno vrijeme | kontakti --- */
@media (min-width: 861px) {
	.wpi-wh-split .wpi-wh-grid { grid-template-columns: 1fr 1fr; align-items: start; }
}

/* --- BANNER: veliko zaglavlje u boji --- */
.wpi-wh-banner .wpi-wh-object {
	background: var(--wh-head-bg); color: var(--wh-head-text);
	border: 0; border-radius: var(--wh-radius);
}
.wpi-wh-banner .wpi-wh-object-name { color: var(--wh-head-text); }
.wpi-wh-banner .wpi-wh-object-meta li { color: color-mix(in srgb, var(--wh-head-text) 82%, transparent); }
.wpi-wh-banner .wpi-wh-object-meta a:hover { color: var(--wh-head-text); }
.wpi-wh-banner .wpi-wh-ico { color: color-mix(in srgb, var(--wh-head-text) 85%, transparent); }
.wpi-wh-banner .wpi-wh-object-note { color: color-mix(in srgb, var(--wh-head-text) 78%, transparent); }

/* --- KOMPAKTNO: zbijeno za bočni stupac --- */
.wpi-wh-compact .wpi-wh-grid { gap: 14px; }
.wpi-wh-compact .wpi-wh-hours, .wpi-wh-compact .wpi-wh-people { grid-template-columns: 1fr; gap: 12px; }
.wpi-wh-compact .wpi-wh-object { flex-direction: column; text-align: center; gap: 12px; padding: 18px; }
.wpi-wh-compact .wpi-wh-dept, .wpi-wh-compact .wpi-wh-person { padding: 14px 16px; }
.wpi-wh-compact .wpi-wh-day { padding: 0.35em 0; font-size: 0.88rem; }
.wpi-wh-compact .wpi-wh-object-meta { flex-direction: column; gap: 5px; }

/* --- VREMENSKA CRTA: dani kao os s točkama --- */
.wpi-wh-timeline .wpi-wh-days { position: relative; padding-left: 20px; }
.wpi-wh-timeline .wpi-wh-days::before {
	content: ""; position: absolute; left: 4px; top: 6px; bottom: 6px;
	width: 2px; background: var(--wh-border);
}
.wpi-wh-timeline .wpi-wh-day { position: relative; border-bottom: 0; padding: 0.55em 0; }
.wpi-wh-timeline .wpi-wh-day::before {
	content: ""; position: absolute; left: -20px; top: 0.95em;
	width: 10px; height: 10px; border-radius: 50%;
	background: var(--wh-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--wh-accent) 22%, transparent);
}
.wpi-wh-timeline .wpi-wh-day.is-closed::before { background: #d1495b; box-shadow: 0 0 0 3px rgba(209,73,91,0.2); }

/* --- PANEL: bočna akcentna traka --- */
.wpi-wh-panel .wpi-wh-dept, .wpi-wh-panel .wpi-wh-person {
	border-left: 4px solid var(--wh-accent);
	box-shadow: 0 6px 24px -14px rgba(15,30,55,0.35);
}
.wpi-wh-panel .wpi-wh-object { border-left: 4px solid var(--wh-accent); }

/* ---- Hover na karticama (osim list/table) ---- */
.wpi-wh-cards .wpi-wh-dept, .wpi-wh-cards .wpi-wh-person,
.wpi-wh-panel .wpi-wh-dept, .wpi-wh-panel .wpi-wh-person {
	transition: transform .2s ease, box-shadow .2s ease;
}
.wpi-wh-cards .wpi-wh-person:hover, .wpi-wh-panel .wpi-wh-person:hover,
.wpi-wh-cards .wpi-wh-dept:hover, .wpi-wh-panel .wpi-wh-dept:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 34px -18px rgba(15,30,55,0.45);
}

/* ---- Responzivno ---- */
@media (max-width: 680px) {
	.wpi-wh-object { flex-direction: column; text-align: center; }
	.wpi-wh-object-meta { justify-content: center; }
	.wpi-wh-hours, .wpi-wh-people, .wpi-wh-cols-2 .wpi-wh-hours, .wpi-wh-cols-3 .wpi-wh-hours,
	.wpi-wh-cols-2 .wpi-wh-people, .wpi-wh-cols-3 .wpi-wh-people { grid-template-columns: 1fr; }
}

/* =====================================================
   OBAVIJEST / UPOZORENJE — popup modal
   ===================================================== */
body.wpi-alert-lock { overflow: hidden; }

.wpi-alert-overlay {
	position: fixed;
	inset: 0;
	z-index: 100050;
	display: grid;
	place-items: center;
	padding: 20px;
	background: rgba(12, 17, 26, 0);
	backdrop-filter: blur(0px);
	transition: background .32s ease, backdrop-filter .32s ease;
}
.wpi-alert-overlay.is-open {
	background: rgba(12, 17, 26, 0.62);
	backdrop-filter: blur(5px);
}

.wpi-alert {
	--al-accent: var(--wpi-color-primary);
	--al-soft: color-mix(in srgb, var(--wpi-color-primary) 12%, #fff);
	position: relative;
	width: min(480px, 100%);
	max-height: 88vh;
	overflow: auto;
	padding: clamp(28px, 5vw, 44px) clamp(24px, 5vw, 40px) clamp(24px, 4vw, 34px);
	text-align: center;
	background: #fff;
	border-radius: 20px;
	box-shadow: 0 30px 80px -20px rgba(10, 20, 40, 0.55), 0 0 0 1px rgba(255,255,255,0.04);
	transform: translateY(18px) scale(0.96);
	opacity: 0;
	transition: transform .38s cubic-bezier(.2,.8,.2,1), opacity .38s ease;
}
.wpi-alert-overlay.is-open .wpi-alert {
	transform: none;
	opacity: 1;
}

/* Tanka traka u boji na vrhu */
.wpi-alert::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 5px;
	background: var(--al-accent);
	border-radius: 20px 20px 0 0;
}

/* Ikona u krugu */
.wpi-alert-ico {
	display: grid;
	place-items: center;
	width: 74px;
	height: 74px;
	margin: 6px auto 18px;
	border-radius: 50%;
	color: var(--al-accent);
	background: var(--al-soft);
}
.wpi-alert-ico svg { width: 36px; height: 36px; }
/* Blagi puls prstena oko ikone */
.wpi-alert-ico::after {
	content: "";
	position: absolute;
	width: 74px; height: 74px;
	border-radius: 50%;
	border: 2px solid var(--al-accent);
	opacity: 0;
}
.wpi-alert-overlay.is-open .wpi-alert-ico::after { animation: wpi-alert-ring 1.6s ease-out .3s 2; }
@keyframes wpi-alert-ring {
	0% { transform: scale(1); opacity: .5; }
	100% { transform: scale(1.5); opacity: 0; }
}

.wpi-alert-title {
	margin: 0 0 0.5em;
	font-size: clamp(1.35rem, 3vw, 1.7rem);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--wpi-color-heading, #16202e);
}
.wpi-alert-text {
	margin: 0 auto;
	max-width: 42ch;
	color: var(--wpi-color-text-muted, #5b6675);
	font-size: 1.02rem;
	line-height: 1.62;
}
.wpi-alert-text p { margin: 0 0 0.7em; }
.wpi-alert-text p:last-child { margin-bottom: 0; }
.wpi-alert-text a { color: var(--al-accent); text-decoration: underline; text-underline-offset: 2px; }

.wpi-alert-actions {
	margin-top: clamp(20px, 3vw, 28px);
	display: flex;
	justify-content: center;
	gap: 12px;
}
.wpi-alert-btn {
	background: var(--al-accent);
	border-color: var(--al-accent);
	color: #fff;
	min-width: 140px;
	padding-inline: 26px;
	font-weight: 600;
}
.wpi-alert-btn:hover {
	filter: brightness(1.06);
	transform: translateY(-1px);
}

/* Zatvaranje (×) */
.wpi-alert-close {
	position: absolute;
	top: 14px;
	right: 14px;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: color-mix(in srgb, var(--wpi-color-text, #16202e) 6%, transparent);
	color: var(--wpi-color-text-muted, #5b6675);
	cursor: pointer;
	transition: background .18s ease, color .18s ease, transform .18s ease;
}
.wpi-alert-close:hover {
	background: color-mix(in srgb, var(--wpi-color-text, #16202e) 12%, transparent);
	color: var(--wpi-color-text, #16202e);
	transform: rotate(90deg);
}
.wpi-alert-close svg { width: 18px; height: 18px; }

/* ---- Sheme boja (postavi --al-accent i --al-soft) ---- */
.wpi-alert-info    { --al-accent: #2563eb; --al-soft: #e7effe; }
.wpi-alert-warning { --al-accent: #d97706; --al-soft: #fdf0da; }
.wpi-alert-danger  { --al-accent: #dc2626; --al-soft: #fdE4e4; }
.wpi-alert-success { --al-accent: #16a34a; --al-soft: #e3f6ea; }
.wpi-alert-neutral { --al-accent: #4b5563; --al-soft: #eef0f3; }
.wpi-alert-brand   { --al-accent: var(--wpi-color-primary); --al-soft: color-mix(in srgb, var(--wpi-color-primary) 12%, #fff); }

/* Tamna pozadina teme — kartica ostaje svijetla i čitljiva */
@media (prefers-color-scheme: dark) {
	.wpi-alert { background: #fff; }
}

/* Pristupačnost: bez animacija */
@media (prefers-reduced-motion: reduce) {
	.wpi-alert-overlay, .wpi-alert { transition: opacity .2s ease; }
	.wpi-alert { transform: none; }
	.wpi-alert-ico::after { animation: none !important; }
	.wpi-alert-close:hover { transform: none; }
}

@media (max-width: 480px) {
	.wpi-alert-actions { flex-direction: column; }
	.wpi-alert-btn { width: 100%; }
}

/* ---- Slider: YouTube video pozadina (cover, bez kontrola) ---- */
.wpi-slide-video {
	position: absolute;
	inset: 0;
	z-index: 1;
	overflow: hidden;
	pointer-events: none;
	container-type: size;
}
/* Cover: iframe uvijek prekriva slajd zadržavajući 16:9 (container query units) */
.wpi-slide-yt-frame {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: max(100cqw, calc(100cqh * 16 / 9));
	height: max(100cqh, calc(100cqw * 9 / 16));
	border: 0;
	pointer-events: none;
}
/* Fallback za preglednike bez container query jedinica */
@supports not (width: 100cqw) {
	.wpi-slide-yt-frame { width: 100%; height: 100%; }
}
/* Video slajd: preklop i sadržaj iznad iframea */
.wpi-slide-has-video .wpi-slide-overlay { z-index: 3; }
.wpi-slide-has-video .wpi-slide-inner { z-index: 4; }
/* Dodatna zatamnjenja specifična za video (nadjačavaju preklop slidera) */
.wpi-slide-vov-light  { background: rgba(8,12,18,0.28) !important; }
.wpi-slide-vov-medium { background: rgba(8,12,18,0.48) !important; }
.wpi-slide-vov-strong { background: rgba(8,12,18,0.66) !important; }

/* =====================================================
   Native WordPress [gallery] shortcode — moderni grid
   Poštuje odabrani broj stupaca (gallery-columns-1..9),
   nadjačava zastarjeli WP inline float raspored.
   ===================================================== */
.gallery {
	display: grid;
	gap: 12px;
	margin: 28px 0;
	grid-template-columns: repeat(3, 1fr);
}
.gallery-columns-1 { grid-template-columns: 1fr; }
.gallery-columns-2 { grid-template-columns: repeat(2, 1fr); }
.gallery-columns-3 { grid-template-columns: repeat(3, 1fr); }
.gallery-columns-4 { grid-template-columns: repeat(4, 1fr); }
.gallery-columns-5 { grid-template-columns: repeat(5, 1fr); }
.gallery-columns-6 { grid-template-columns: repeat(6, 1fr); }
.gallery-columns-7 { grid-template-columns: repeat(7, 1fr); }
.gallery-columns-8 { grid-template-columns: repeat(8, 1fr); }
.gallery-columns-9 { grid-template-columns: repeat(9, 1fr); }

/* Neutraliziraj WP inline širine/margine (koje lome grid). */
.gallery .gallery-item {
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	text-align: center;
}
.gallery .gallery-icon { margin: 0; line-height: 0; }
.gallery .gallery-icon img {
	width: 100% !important;
	height: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
	border: 0 !important;
	border-radius: var(--wpi-radius, 8px);
	box-shadow: 0 1px 3px rgba(15, 23, 42, .1);
	transition: transform .3s ease, box-shadow .3s ease;
}
.gallery .gallery-icon a { display: block; }
.gallery .gallery-icon a:hover img {
	transform: translateY(-3px);
	box-shadow: 0 12px 30px rgba(15, 23, 42, .2);
}
.gallery .gallery-caption {
	display: block;
	margin-top: 7px;
	font-size: .82rem;
	line-height: 1.45;
	color: var(--wpi-color-text-muted);
}

/* Responzivno — smanji broj stupaca na užim ekranima. */
@media (max-width: 782px) {
	.gallery-columns-4,
	.gallery-columns-5,
	.gallery-columns-6,
	.gallery-columns-7,
	.gallery-columns-8,
	.gallery-columns-9 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 520px) {
	.gallery { grid-template-columns: repeat(2, 1fr); }
	.gallery-columns-1 { grid-template-columns: 1fr; }
}

/* =====================================================
   Download-kartice za linkove na dokumente (PDF/DOCX/XLS…)
   ===================================================== */
.wpi-doc-link {
	--doc-color: var(--wpi-color-primary);
	display: flex;
	align-items: center;
	gap: 15px;
	max-width: 540px;
	margin: 18px 0;
	padding: 14px 16px;
	background: var(--wpi-color-bg-alt);
	border: 1px solid var(--wpi-color-border);
	border-left: 4px solid var(--doc-color);
	border-radius: var(--wpi-radius, 10px);
	text-decoration: none !important;
	box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.wpi-doc-link:hover {
	transform: translateY(-2px);
	border-color: var(--doc-color);
	box-shadow: 0 12px 28px -12px color-mix(in srgb, var(--doc-color) 55%, transparent);
}

/* Ikona datoteke + oznaka tipa */
.wpi-doc-ico {
	position: relative;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	color: var(--doc-color);
}
.wpi-doc-ico svg { width: 100%; height: 100%; }
.wpi-doc-badge {
	position: absolute;
	left: 50%;
	bottom: 5px;
	transform: translateX(-50%);
	padding: 1px 4px;
	font-size: 8px;
	font-weight: 800;
	letter-spacing: .02em;
	line-height: 1.2;
	color: #fff;
	background: var(--doc-color);
	border-radius: 3px;
	max-width: 40px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Tekst */
.wpi-doc-body { flex: 1; min-width: 0; }
.wpi-doc-name {
	display: block;
	font-weight: 600;
	line-height: 1.35;
	color: var(--wpi-color-heading, #16202e);
}
.wpi-doc-link:hover .wpi-doc-name { color: var(--doc-color); }
.wpi-doc-meta {
	display: block;
	margin-top: 2px;
	font-size: .82rem;
	color: var(--wpi-color-text-muted);
}

/* Download strelica */
.wpi-doc-dl {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	color: var(--doc-color);
	background: color-mix(in srgb, var(--doc-color) 12%, transparent);
	transition: background .18s ease, transform .18s ease;
}
.wpi-doc-dl svg { width: 19px; height: 19px; }
.wpi-doc-link:hover .wpi-doc-dl {
	background: var(--doc-color);
	color: #fff;
	transform: translateY(2px);
}

/* Boje po tipu datoteke (za prepoznatljivost) — kartica ostaje u stilu teme */
.wpi-doc-pdf     { --doc-color: #dc2626; }
.wpi-doc-word    { --doc-color: #2563eb; }
.wpi-doc-excel   { --doc-color: #16a34a; }
.wpi-doc-ppt     { --doc-color: #ea580c; }
.wpi-doc-archive { --doc-color: #6b7280; }
.wpi-doc-text    { --doc-color: #0891b2; }
.wpi-doc-generic { --doc-color: var(--wpi-color-primary); }

@media (max-width: 520px) {
	.wpi-doc-link { max-width: 100%; }
}

/* Radna vremena — prilagođeni redovi (duge labele): naziv gore, vrijeme ispod */
.wpi-wh-day-c { display: block; padding: 0.6em 0; }
.wpi-wh-day-c dt { display: block; margin-bottom: 3px; color: var(--wh-muted); font-size: .9rem; line-height: 1.4; }
.wpi-wh-day-c dd { display: block; margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* =====================================================
   Korisne poveznice — moderna mreža linkova s ikonom
   ===================================================== */
.wpi-links-title {
	margin: 0 0 1em;
	font-size: clamp(1.3rem, 2.4vw, 1.7rem);
	font-weight: 800;
	letter-spacing: -0.01em;
}
.wpi-links-grid { display: grid; gap: 12px; }

/* Kartice — mreža */
.wpi-links-cards .wpi-links-grid { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.wpi-links-cols-2 .wpi-links-grid { grid-template-columns: repeat(2, 1fr); }
.wpi-links-cols-3 .wpi-links-grid { grid-template-columns: repeat(3, 1fr); }
.wpi-links-cols-4 .wpi-links-grid { grid-template-columns: repeat(4, 1fr); }

/* Lista — jedan stupac */
.wpi-links-list .wpi-links-grid { grid-template-columns: 1fr; gap: 8px; }

/* Dugmad — kompaktno, u redu */
.wpi-links-buttons .wpi-links-grid { display: flex; flex-wrap: wrap; gap: 10px; }

/* Stavka (zajedničko) */
.wpi-links-item {
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 13px 16px;
	background: var(--wpi-color-bg-alt);
	border: 1px solid var(--wpi-color-border);
	border-radius: var(--wpi-radius, 10px);
	text-decoration: none !important;
	color: var(--wpi-color-heading, #16202e);
	box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.wpi-links-item:hover {
	transform: translateY(-2px);
	border-color: var(--wpi-color-primary);
	box-shadow: 0 12px 26px -14px color-mix(in srgb, var(--wpi-color-primary) 55%, transparent);
	color: var(--wpi-color-primary);
}

/* Ikona / favicon */
.wpi-links-ico {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 9px;
	background: color-mix(in srgb, var(--wpi-color-primary) 8%, #fff);
	color: var(--wpi-color-primary);
	overflow: hidden;
}
.wpi-links-ico img { width: 26px; height: 26px; object-fit: contain; display: block; }
.wpi-links-ico-svg svg { width: 22px; height: 22px; }

.wpi-links-name {
	flex: 1;
	min-width: 0;
	font-weight: 600;
	line-height: 1.35;
}
.wpi-links-arrow {
	flex: 0 0 auto;
	color: var(--wpi-color-text-muted);
	transition: transform .18s ease, color .18s ease;
}
.wpi-links-arrow svg { width: 18px; height: 18px; display: block; }
.wpi-links-item:hover .wpi-links-arrow { color: var(--wpi-color-primary); transform: translate(2px, -2px); }

/* Lista — malo tanje */
.wpi-links-list .wpi-links-item { padding: 11px 15px; }

/* Dugmad — kompaktna pilula */
.wpi-links-buttons .wpi-links-item {
	padding: 9px 15px;
	border-radius: 100px;
}
.wpi-links-buttons .wpi-links-ico { width: 24px; height: 24px; border-radius: 50%; background: transparent; }
.wpi-links-buttons .wpi-links-ico img { width: 20px; height: 20px; }
.wpi-links-buttons .wpi-links-arrow { display: none; }

/* Bez ikone */
.wpi-links-ico-none .wpi-links-ico { display: none; }

@media (max-width: 640px) {
	.wpi-links-cols-2 .wpi-links-grid,
	.wpi-links-cols-3 .wpi-links-grid,
	.wpi-links-cols-4 .wpi-links-grid { grid-template-columns: 1fr; }
}

/* Korisne poveznice — 5/6 stupaca, vlastiti logo, stil "logotipi" */
.wpi-links-cols-5 .wpi-links-grid { grid-template-columns: repeat(5, 1fr); }
.wpi-links-cols-6 .wpi-links-grid { grid-template-columns: repeat(6, 1fr); }

/* Vlastiti logo (treći dio reda) — veći, bez obojene pozadine */
.wpi-links-ico-logo { width: auto; min-width: 42px; max-width: 60px; height: 44px; background: transparent; }
.wpi-links-ico-logo img { width: auto; max-width: 100%; height: 100%; object-fit: contain; }

/* Stil "logotipi" — mreža logotipa, naziv ispod, bez strelice */
.wpi-links-logos .wpi-links-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.wpi-links-logos.wpi-links-cols-5 .wpi-links-grid { grid-template-columns: repeat(5, 1fr); }
.wpi-links-logos.wpi-links-cols-6 .wpi-links-grid { grid-template-columns: repeat(6, 1fr); }
.wpi-links-logos .wpi-links-item { flex-direction: column; text-align: center; gap: 11px; padding: 20px 14px; }
.wpi-links-logos .wpi-links-ico {
	width: 100%;
	height: 64px;
	max-width: none;
	background: transparent;
	border-radius: 0;
}
.wpi-links-logos .wpi-links-ico img { max-width: 88%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.wpi-links-logos .wpi-links-ico-svg svg { width: 36px; height: 36px; }
.wpi-links-logos .wpi-links-name { flex: none; font-size: .86rem; line-height: 1.35; }
.wpi-links-logos .wpi-links-arrow { display: none; }

/* Responzivno za 5/6 stupaca */
@media (max-width: 1000px) {
	.wpi-links-cols-5 .wpi-links-grid,
	.wpi-links-cols-6 .wpi-links-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
	.wpi-links-cols-5 .wpi-links-grid,
	.wpi-links-cols-6 .wpi-links-grid { grid-template-columns: repeat(2, 1fr); }
	.wpi-links-logos .wpi-links-grid { grid-template-columns: repeat(2, 1fr); }
}

/* =====================================================
   Kadrovi / Osoblje — organizacijska struktura u grupama
   ===================================================== */
.wpi-staff-heading {
	margin: 0 0 1.1em;
	font-size: clamp(1.4rem, 2.5vw, 1.9rem);
	font-weight: 800;
	letter-spacing: -0.01em;
}
/* Masonry raspored (CSS kolone) — grupe se pakiraju odozgo u stupce ravnomjerne
   visine. column-count (fiksni broj) rasteže stupce da popune CIJELU širinu,
   pa nema praznine ni desno ni ispod kratkih grupa. */
.wpi-staff-grid { column-gap: clamp(16px, 2vw, 24px); }
.wpi-staff-cards .wpi-staff-grid { column-count: 3; }
.wpi-staff-cols-2 .wpi-staff-grid { column-count: 2; }
.wpi-staff-cols-3 .wpi-staff-grid { column-count: 3; }
.wpi-staff-cols-4 .wpi-staff-grid { column-count: 4; }
.wpi-staff-list .wpi-staff-grid { column-count: 1; }

/* Kartica grupe */
.wpi-staff-group {
	background: var(--wpi-color-bg-alt);
	border: 1px solid var(--wpi-color-border);
	border-radius: var(--wpi-radius, 12px);
	padding: clamp(18px, 2vw, 24px);
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	margin-bottom: clamp(16px, 2vw, 24px);
}
.wpi-staff-group-title {
	margin: 0 0 0.9em;
	padding-bottom: 0.6em;
	font-size: 0.9rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wpi-color-primary);
	border-bottom: 2px solid color-mix(in srgb, var(--wpi-color-primary) 22%, transparent);
	position: relative;
}
.wpi-staff-group-title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 44px;
	height: 2px;
	background: var(--wpi-color-primary);
}

/* Popis osoba */
.wpi-staff-people { list-style: none; margin: 0; padding: 0; }
.wpi-staff-person {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 9px 0;
	border-bottom: 1px solid color-mix(in srgb, var(--wpi-color-border) 60%, transparent);
}
.wpi-staff-person:last-child { border-bottom: 0; }

/* Avatar inicijal */
.wpi-staff-av-ico {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--wpi-color-primary), var(--wpi-color-accent, var(--wpi-color-primary)));
	color: #fff;
	font-weight: 700;
	font-size: 0.95rem;
	line-height: 1;
}

.wpi-staff-person-body { min-width: 0; display: flex; flex-direction: column; }
.wpi-staff-role {
	font-size: 0.78rem;
	color: var(--wpi-color-text-muted);
	line-height: 1.3;
}
.wpi-staff-name {
	font-weight: 600;
	line-height: 1.35;
	color: var(--wpi-color-heading, #16202e);
}
/* Kad nema funkcije (samo ime) — ime je glavno */
.wpi-staff-person:not(:has(.wpi-staff-role)) .wpi-staff-name { font-weight: 600; }

/* Lista stil — malo zbijenije, dvije kolone osoba unutar grupe na širokom */
.wpi-staff-list .wpi-staff-group-title { font-size: 1rem; }

@media (max-width: 900px) {
	.wpi-staff-cards .wpi-staff-grid,
	.wpi-staff-cols-3 .wpi-staff-grid,
	.wpi-staff-cols-4 .wpi-staff-grid { column-count: 2; }
}
@media (max-width: 600px) {
	.wpi-staff-cards .wpi-staff-grid,
	.wpi-staff-cols-2 .wpi-staff-grid,
	.wpi-staff-cols-3 .wpi-staff-grid,
	.wpi-staff-cols-4 .wpi-staff-grid { column-count: 1; }
}