/*
Theme Name: Savska
Theme URI: https://savska.hr/
Author: gzubak
Author URI: https://savska.hr/
Description: Digitalni vodič kroz Savsku cestu u Zagrebu, zgrada po zgrada. Sestrinski projekt Mapiranja Trešnjevke.
Version: 1.2.1
Requires at least: 6.4
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: savska
Tags: blog, two-columns, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* ================================================================
   Root tokens — paleta iz prototipa (tramvajska plava)
   ================================================================ */
:root {
	--sv-bg: #F4F5F7;
	--sv-surface: #FFFFFF;
	--sv-ink: #001F40;
	--sv-primary: #003F7F;
	--sv-primary-mid: #3D6BA3;
	--sv-border: #DCE3ED;
	--sv-accent: #E85D4C;
	--sv-accent-dark: #B8332A;
	--sv-text: #3D4858;
	--sv-text-mid: #5A6270;
	--sv-text-meta: #7788A0;
	--sv-text-light: #8A93A0;
	--sv-placeholder: #B4BBC5;
	--sv-bg-warning: #FFE8E4;

	--sv-font-sans: 'DM Sans', system-ui, -apple-system, Helvetica, Arial, sans-serif;
	--sv-font-serif: 'DM Serif Display', Georgia, 'Times New Roman', serif;
	--sv-font-mono: 'JetBrains Mono', ui-monospace, 'Courier New', monospace;

	--sv-container: 1200px;
	--sv-container-narrow: 960px;
	--sv-radius: 10px;
	--sv-radius-sm: 6px;
	--sv-shadow-soft: 0 2px 8px rgba(0, 31, 64, 0.06);
	--sv-shadow-pop: 0 8px 24px rgba(0, 31, 64, 0.12);
	--sv-section-gap: 96px;
}
@media (max-width: 768px) {
	:root { --sv-section-gap: 64px; }
}

/* ================================================================
   Reset
   ================================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: clip; }
html { font-size: 120%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	font-family: var(--sv-font-sans);
	font-size: 1rem;
	line-height: 1.6;
	color: var(--sv-ink);
	background: var(--sv-bg);
	min-height: 100vh;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--sv-primary); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--sv-ink); }
h1, h2, h3, h4 { font-family: var(--sv-font-serif); color: var(--sv-ink); line-height: 1.2; margin: 0 0 .5em; font-weight: 400; }
h1 { font-size: clamp(2rem, 5vw, 3.25rem); }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.25rem); }
h3 { font-size: 1.35rem; }
p { margin: 0 0 1em; }
code, kbd, pre { font-family: var(--sv-font-mono); font-size: .92em; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--sv-border); }
::-webkit-scrollbar-thumb { background: var(--sv-primary-mid); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--sv-primary); }

/* ================================================================
   Layout primitives
   ================================================================ */
.sv-site { display: flex; flex-direction: column; min-height: 100vh; }
.sv-main { flex: 1; padding: 32px 0 96px; }
.home .sv-main { padding-top: 0; }
.sv-container { max-width: var(--sv-container); margin: 0 auto; padding: 0 24px; }
.sv-container--narrow { max-width: var(--sv-container-narrow); margin: 0 auto; padding: 0 24px; }

/* ================================================================
   Nav
   ================================================================ */
.sv-nav {
	position: sticky; top: 0; z-index: 50;
	background: rgba(244, 245, 247, 0.82);
	backdrop-filter: saturate(180%) blur(14px);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	border-bottom: 1px solid var(--sv-border);
}
.sv-nav__inner {
	max-width: var(--sv-container);
	margin: 0 auto;
	padding: 14px 24px;
	display: flex;
	align-items: center;
	gap: 16px;
}
.sv-nav__brand { margin-right: auto; }
.sv-nav__brand {
	display: inline-flex; align-items: baseline; gap: 1px;
	font-family: var(--sv-font-serif);
	font-size: 1.75rem;
	color: var(--sv-ink);
	line-height: 1;
}
.sv-nav__brand:hover { color: var(--sv-primary); }
.sv-nav__brand-tld {
	font-family: var(--sv-font-mono);
	font-size: .9rem;
	color: var(--sv-primary);
	font-weight: 500;
}
.sv-nav__menu { display: flex; gap: 12px; align-items: center; list-style: none; margin: 0; padding: 0; }
.sv-nav__menu a {
	position: relative;
	color: var(--sv-text);
	font-size: .82rem;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	padding: 10px 20px;
	border-radius: 999px;
	transition: color .18s ease, background-color .18s ease, transform .18s ease;
	z-index: 0;
}
.sv-nav__menu a::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: var(--sv-surface);
	box-shadow: 0 2px 10px rgba(0, 31, 64, 0.08);
	transform: scale(0.85);
	opacity: 0;
	transition: transform .22s cubic-bezier(.5, 1.6, .5, 1), opacity .18s ease;
	z-index: -1;
}
.sv-nav__menu a:hover::before,
.sv-nav__menu a:focus-visible::before,
.sv-nav__menu .current-menu-item a::before,
.sv-nav__menu a[aria-current="page"]::before {
	transform: scale(1);
	opacity: 1;
}
.sv-nav__menu a:hover,
.sv-nav__menu a:focus-visible,
.sv-nav__menu .current-menu-item a,
.sv-nav__menu a[aria-current="page"] {
	color: var(--sv-ink);
	outline: none;
}
.sv-nav__toggle {
	display: none;
	background: transparent;
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-sm);
	padding: 8px 10px;
	cursor: pointer;
	color: var(--sv-ink);
	font-size: 1.15rem;
	line-height: 1;
}
/* Akcije (search + social) — desna strana nav bara */
.sv-nav__actions {
	display: inline-flex;
	gap: 4px;
	align-items: center;
	margin-left: 16px;
	padding-left: 16px;
	border-left: 1px solid var(--sv-border);
}
.sv-nav__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: transparent;
	border: 0;
	color: var(--sv-text);
	cursor: pointer;
	padding: 0;
	transition: background .15s, color .15s, transform .15s, box-shadow .15s;
}
.sv-nav__icon:hover,
.sv-nav__icon:focus-visible {
	background: var(--sv-surface);
	color: var(--sv-ink);
	outline: none;
	transform: translateY(-1px);
	box-shadow: 0 2px 8px rgba(0, 31, 64, 0.08);
}
.sv-nav.is-search-open [data-sv-search-toggle] {
	background: var(--sv-ink);
	color: #fff;
}

/* Search form dropdown ispod nav bara */
.sv-nav__search-form {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: var(--sv-surface);
	border-bottom: 1px solid var(--sv-border);
	padding: 18px 24px;
	display: flex;
	align-items: center;
	gap: 10px;
	transform: translateY(-10px);
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s ease, transform .2s ease, visibility .2s;
	box-shadow: 0 6px 18px rgba(0, 31, 64, 0.06);
	z-index: 1;
}
.sv-nav.is-search-open .sv-nav__search-form {
	transform: translateY(0);
	opacity: 1;
	visibility: visible;
}
.sv-nav__search-form input[type="search"] {
	flex: 1;
	min-width: 0;
	padding: 10px 16px;
	border: 1px solid var(--sv-border);
	border-radius: 999px;
	font: inherit;
	background: var(--sv-bg);
	color: var(--sv-ink);
}
.sv-nav__search-form input[type="search"]:focus {
	outline: none;
	border-color: var(--sv-primary-mid);
	background: #fff;
}
.sv-nav__search-submit {
	padding: 10px 18px;
	border-radius: 999px;
	border: 0;
	background: var(--sv-accent);
	color: #fff;
	font: inherit;
	font-weight: 500;
	cursor: pointer;
	transition: background .15s;
}
.sv-nav__search-submit:hover { background: var(--sv-accent-dark); }
.sv-nav__search-close {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 0;
	background: transparent;
	color: var(--sv-text-meta);
	cursor: pointer;
	font-size: 1rem;
	line-height: 1;
}
.sv-nav__search-close:hover { background: var(--sv-border); color: var(--sv-ink); }

@media (max-width: 540px) {
	.sv-nav__search-submit { display: none; }
}
@media (max-width: 768px) {
	.sv-nav__toggle { display: inline-flex; }
	.sv-nav__menu {
		position: absolute; top: 100%; left: 0; right: 0;
		flex-direction: column; gap: 0;
		background: var(--sv-surface);
		border-bottom: 1px solid var(--sv-border);
		padding: 8px 24px 16px;
		display: none;
	}
	.sv-nav.is-open .sv-nav__menu { display: flex; }
	.sv-nav__menu a { padding: 12px 0; border-bottom: 1px solid var(--sv-border); width: 100%; }
	.sv-nav__menu li:last-child a { border-bottom: 0; }
}
/* Uski viewporti: zbij nav da stane bez horizontalnog scrolla. */
@media (max-width: 480px) {
	.sv-nav__inner { padding: 12px 16px; gap: 8px; }
	.sv-nav__brand { font-size: 1.4rem; }
	.sv-nav__brand-tld { font-size: .78rem; }
	.sv-nav__actions { margin-left: 4px; padding-left: 8px; gap: 2px; }
	.sv-nav__icon { width: 32px; height: 32px; }
}
@media (max-width: 380px) {
	.sv-nav__actions { border-left: 0; padding-left: 0; margin-left: 4px; }
	.sv-nav__actions a { display: none; } /* socials skriveni — već su u footeru */
}

/* ================================================================
   Footer
   ================================================================ */
.sv-footer {
	background: var(--sv-ink);
	color: rgba(255,255,255,.78);
	padding: 28px 0;
	font-size: .9rem;
}
.sv-footer__inner {
	max-width: var(--sv-container);
	margin: 0 auto;
	padding: 0 24px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px 24px;
	flex-wrap: wrap;
}
.sv-footer a { color: #fff; }
.sv-footer__legal { display: inline-flex; gap: 8px; align-items: center; color: rgba(255, 255, 255, 0.6); font-size: .85rem; }
.sv-footer__legal a { color: rgba(255, 255, 255, 0.78); }
.sv-footer__legal a:hover { color: #fff; }
.sv-footer__sep { opacity: 0.5; }

.sv-footer__social { display: inline-flex; gap: 8px; align-items: center; }
.sv-footer__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	color: rgba(255, 255, 255, 0.78);
	background: rgba(255, 255, 255, 0.06);
	transition: background .15s, color .15s, transform .15s;
}
.sv-footer__social a:hover,
.sv-footer__social a:focus-visible {
	background: rgba(255, 255, 255, 0.16);
	color: #fff;
	transform: translateY(-1px);
	outline: none;
}

/* ================================================================
   Article / single
   ================================================================ */
.sv-article { background: var(--sv-surface); border: 1px solid var(--sv-border); border-radius: var(--sv-radius); padding: 28px; margin-bottom: 20px; }
.sv-article__title { margin-bottom: 8px; }
.sv-article__title a { color: var(--sv-ink); }
.sv-article__title a:hover { color: var(--sv-primary); }
.sv-article__meta { font-family: var(--sv-font-mono); font-size: .82rem; color: var(--sv-text-meta); margin-bottom: 12px; }
.sv-article__body { font-size: 1.05rem; color: var(--sv-text); }
.sv-article__body img { border-radius: var(--sv-radius-sm); }
.sv-article__body h2, .sv-article__body h3 { margin-top: 1.6em; color: var(--sv-ink); }
.sv-article__body blockquote {
	border-left: 4px solid var(--sv-primary);
	padding: 4px 20px;
	margin: 1.5em 0;
	color: var(--sv-text-mid);
	font-style: italic;
}

/* ================================================================
   Breadcrumbs
   ================================================================ */
.sv-breadcrumb {
	font-family: var(--sv-font-mono);
	font-size: .82rem;
	color: var(--sv-text-meta);
	margin-bottom: 16px;
	text-transform: lowercase;
}
.sv-breadcrumb a { color: var(--sv-text-mid); }
.sv-breadcrumb a:hover { color: var(--sv-primary); }
.sv-breadcrumb__sep { margin: 0 8px; color: var(--sv-text-light); }

/* ================================================================
   Hero (post/zgrada)
   ================================================================ */
.sv-hero { padding: 56px 0 36px; border-bottom: 1px solid var(--sv-border); margin-bottom: 32px; }
.sv-hero__eyebrow { font-family: var(--sv-font-mono); text-transform: uppercase; font-size: .8rem; color: var(--sv-primary); letter-spacing: .1em; margin-bottom: 12px; }
.sv-hero__title { margin: 0 0 16px; }
.sv-hero__meta { font-family: var(--sv-font-mono); color: var(--sv-text-meta); font-size: .9rem; }
.sv-hero__badges { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.sv-badge {
	display: inline-block;
	font-family: var(--sv-font-mono);
	font-size: .72rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--sv-border);
	color: var(--sv-ink);
}
.sv-badge--accent { background: var(--sv-accent); color: #fff; }
.sv-badge--primary { background: var(--sv-primary); color: #fff; }
.sv-badge--warn { background: var(--sv-bg-warning); color: var(--sv-accent-dark); }

/* ================================================================
   Cards
   ================================================================ */
.sv-grid { display: grid; gap: 24px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .sv-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .sv-grid { grid-template-columns: 1fr; } }
.sv-card {
	background: var(--sv-surface);
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform .2s ease, box-shadow .2s ease;
}
.sv-card:hover { transform: translateY(-2px); box-shadow: var(--sv-shadow-pop); }
.sv-card__thumb { aspect-ratio: 16/9; background: var(--sv-border); overflow: hidden; }
.sv-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sv-card__body { padding: 18px 20px; flex: 1; display: flex; flex-direction: column; }
.sv-card__meta { font-family: var(--sv-font-mono); font-size: .78rem; color: var(--sv-text-meta); margin-bottom: 10px; }
.sv-card__title {
	font-family: var(--sv-font-serif);
	font-size: 1.2rem;
	margin: 0 0 8px;
	color: var(--sv-ink);
	line-height: 1.3;
	/* line-clamp: 2 linije da sve kartice imaju isti visinski budžet za naslov */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: calc(1.3em * 2);
}
.sv-card__excerpt {
	color: var(--sv-text);
	font-size: .95rem;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.sv-card a { color: inherit; }

/* "Pogledaj sve" kartica — zadnja u featured grid-u */
.sv-card--more {
	background: var(--sv-primary);
	border-color: var(--sv-primary);
	color: #fff;
}
.sv-card--more:hover {
	background: var(--sv-ink);
	border-color: var(--sv-ink);
}
.sv-card__thumb--more {
	background: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 18px 24px 0;
	color: rgba(255, 255, 255, 0.92);
	overflow: visible;
}
.sv-card__thumb--more svg {
	width: 100%;
	max-width: 220px;
	height: auto;
	transition: transform .25s ease;
}
.sv-card--more:hover .sv-card__thumb--more svg { transform: translate(4px, -4px); }
.sv-card--more .sv-card__body {
	background: var(--sv-primary);
	transition: background .15s;
}
.sv-card--more:hover .sv-card__body { background: var(--sv-ink); }
.sv-card--more .sv-card__title { color: #fff; }
.sv-card--more .sv-card__meta { color: rgba(255, 255, 255, 0.68); }
.sv-card--more .sv-card__excerpt {
	color: rgba(255, 255, 255, 0.82);
	-webkit-line-clamp: 2;
}

/* ================================================================
   Front page hero — photo bg + dark overlay
   ================================================================ */
.sv-front-hero {
	padding: 140px 0 120px;
	text-align: center;
	position: relative;
	overflow: hidden;
	background-color: var(--sv-ink);
	background-image: url('images/hero-bg.jpg');
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	color: #fff;
	isolation: isolate;
}
.sv-front-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(0, 31, 64, 0.72) 0%,
		rgba(0, 31, 64, 0.55) 45%,
		rgba(0, 31, 64, 0.80) 100%
	);
	z-index: 1;
}
.sv-front-hero .sv-container { position: relative; z-index: 2; }
.sv-front-hero__title {
	font-size: clamp(2.5rem, 6vw, 4.25rem);
	margin: 0 0 16px;
	color: #fff;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}
.sv-front-hero__tagline {
	font-size: clamp(1.05rem, 2vw, 1.25rem);
	color: rgba(255, 255, 255, 0.88);
	max-width: 640px;
	margin: 0 auto 32px;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
}
.sv-front-hero__cta { display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

.sv-front-hero__credit {
	position: absolute;
	right: 20px;
	bottom: 16px;
	z-index: 2;
	font-family: var(--sv-font-mono);
	font-size: .7rem;
	letter-spacing: .06em;
	color: rgba(255, 255, 255, 0.55);
}
.sv-front-hero__credit a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
	padding-bottom: 1px;
}
.sv-front-hero__credit a:hover { color: rgba(255, 255, 255, 0.9); border-bottom-color: rgba(255, 255, 255, 0.5); }

@media (max-width: 768px) {
	.sv-front-hero { padding: 100px 0 90px; }
	.sv-front-hero__credit { font-size: .65rem; right: 12px; bottom: 10px; }
}

/* Progress u hero: text i bar inverted za tamnu pozadinu */
.sv-progress--in-hero .sv-progress__label { color: rgba(255, 255, 255, 0.88); }
.sv-progress--in-hero .sv-progress__bar { background: rgba(255, 255, 255, 0.22); }
.sv-progress--in-hero .sv-progress__fill { background: linear-gradient(90deg, #fff, rgba(255, 255, 255, 0.72)); }
.sv-btn {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 12px 22px;
	border-radius: 999px;
	font-weight: 500;
	font-size: .95rem;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background .15s, color .15s, border-color .15s;
}
.sv-btn--primary { background: var(--sv-accent); color: #fff; }
.sv-btn--primary:hover { background: var(--sv-accent-dark); color: #fff; }
.sv-btn--ghost { background: var(--sv-surface); color: var(--sv-ink); border-color: var(--sv-border); }
.sv-btn--ghost:hover { background: var(--sv-bg); border-color: var(--sv-primary-mid); color: var(--sv-primary); }

/* ================================================================
   Progress bar (X od Y objavljeno)
   ================================================================ */
.sv-progress { margin: var(--sv-section-gap) auto; max-width: 720px; padding: 24px; background: var(--sv-surface); border: 1px solid var(--sv-border); border-radius: var(--sv-radius); }
/* In-hero varijanta — bez boxa, odmah ispod CTA gumba */
.sv-progress--in-hero {
	margin: 40px auto 0;
	padding: 0;
	background: transparent;
	border: 0;
	max-width: 520px;
}
.sv-progress__label { font-family: var(--sv-font-mono); font-size: .85rem; color: var(--sv-text-meta); margin-bottom: 10px; display: flex; justify-content: space-between; }
.sv-progress__bar { height: 8px; background: var(--sv-border); border-radius: 999px; overflow: hidden; }
.sv-progress__fill { height: 100%; background: linear-gradient(90deg, var(--sv-primary), var(--sv-primary-mid)); transition: width .4s ease; }

/* ================================================================
   Dionice Savske (4 kartice, gateway u /ulica/)
   ================================================================ */
.sv-dionice { margin: var(--sv-section-gap) 0; }
.sv-dionice__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.sv-dionice__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
}
@media (max-width: 860px) { .sv-dionice__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .sv-dionice__grid { grid-template-columns: 1fr; } }

.sv-dionica {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 22px 22px 60px;
	background: var(--sv-surface);
	border: 1px solid var(--sv-border);
	border-left: 4px solid var(--sv-border);
	border-radius: var(--sv-radius-sm);
	color: var(--sv-ink);
	min-height: 180px;
	overflow: hidden;
	transition: border-color .15s, transform .15s, box-shadow .15s;
}
.sv-dionica:hover { transform: translateY(-2px); box-shadow: var(--sv-shadow-pop); color: var(--sv-primary); }
.sv-dionica__bg {
	position: absolute;
	right: -10px;
	bottom: -30px;
	font-family: var(--sv-font-serif);
	font-size: 9rem;
	line-height: 0.82;
	color: var(--sv-primary);
	opacity: 0.08;
	pointer-events: none;
	user-select: none;
	transition: opacity .2s, transform .2s;
}
.sv-dionica:hover .sv-dionica__bg { opacity: 0.14; transform: translateY(-4px); }
.sv-dionica__eyebrow,
.sv-dionica__name,
.sv-dionica__count,
.sv-dionica__arrow { position: relative; z-index: 1; }
/* Bonus (+) koristi accent boju */
.sv-dionica--accent .sv-dionica__bg { color: var(--sv-accent); }
.sv-dionica__eyebrow {
	font-family: var(--sv-font-mono);
	font-size: .74rem;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--sv-text-meta);
}
.sv-dionica__name {
	font-family: var(--sv-font-serif);
	font-size: 1.15rem;
	margin: 0;
	color: var(--sv-ink);
	line-height: 1.25;
}
.sv-dionica__count {
	font-family: var(--sv-font-mono);
	font-size: .82rem;
	color: var(--sv-text-meta);
	margin-top: auto;
}
.sv-dionica__arrow {
	position: absolute;
	right: 18px;
	bottom: 16px;
	font-size: 1.25rem;
	color: var(--sv-primary);
	transition: transform .2s;
}
.sv-dionica:hover .sv-dionica__arrow { transform: translateX(4px); }

/* Tone-specific left accent bar */
.sv-dionica--accent      { border-left-color: var(--sv-accent); }
.sv-dionica--primary     { border-left-color: var(--sv-primary); }
.sv-dionica--primary-mid { border-left-color: var(--sv-primary-mid); }
.sv-dionica--ink         { border-left-color: var(--sv-ink); }

/* ================================================================
   Themes grid (front)
   ================================================================ */
.sv-themes { margin: var(--sv-section-gap) 0; }
.sv-themes__grid { display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .sv-themes__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .sv-themes__grid { grid-template-columns: repeat(2, 1fr); } }
.sv-theme {
	display: flex; flex-direction: column; gap: 10px;
	padding: 24px;
	background: var(--sv-surface);
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius);
	color: var(--sv-ink);
	transition: background .15s, border-color .15s, transform .15s;
}
.sv-theme:hover { background: var(--sv-primary); color: #fff; border-color: var(--sv-primary); transform: translateY(-2px); }
.sv-theme:hover .sv-theme__count { color: rgba(255,255,255,.8); }
.sv-theme:hover .sv-theme__icon { color: #fff; }
.sv-theme__icon { color: var(--sv-primary); line-height: 1; transition: color .15s; display: inline-flex; }
.sv-theme__icon svg { display: block; }
.sv-theme__name { font-family: var(--sv-font-serif); font-size: 1.25rem; }
.sv-theme__count { font-family: var(--sv-font-mono); font-size: .82rem; color: var(--sv-text-meta); }

/* ================================================================
   Kronologija (horizontalna vremenska crta)
   — puna širina s blagim surface bg i tankim borderima
   ================================================================ */
.sv-timeline {
	margin: var(--sv-section-gap) 0;
	padding: 112px 0;
	background: var(--sv-surface);
	color: var(--sv-ink);
	border-block: 1px solid var(--sv-border);
}
@media (max-width: 768px) {
	.sv-timeline { padding: 64px 0; }
}
.sv-timeline__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.sv-timeline__controls {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 4px;
	border: 1px solid var(--sv-border);
	border-radius: 999px;
	background: transparent;
}
.sv-timeline__controls-label {
	font-family: var(--sv-font-mono);
	font-size: .72rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--sv-text-meta);
	padding: 0 10px;
	user-select: none;
}
.sv-timeline__nav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: transparent;
	border: 0;
	color: var(--sv-primary);
	cursor: pointer;
	font-family: var(--sv-font-serif);
	font-size: 1.1rem;
	line-height: 1;
	padding: 0 0 2px;
	transition: background .15s, color .15s, transform .15s;
}
.sv-timeline__nav:hover,
.sv-timeline__nav:focus-visible {
	background: var(--sv-primary);
	color: #fff;
	outline: none;
	transform: scale(1.08);
}
.sv-timeline__nav:disabled {
	color: var(--sv-text-light);
	cursor: not-allowed;
}
.sv-timeline__nav:disabled:hover {
	background: transparent;
	color: var(--sv-text-light);
	transform: none;
}
.sv-timeline__list.is-grabbing { cursor: grabbing; }
.sv-timeline__list { cursor: grab; user-select: none; }
.sv-timeline__list {
	list-style: none;
	margin: 0;
	padding: 8px 48px 24px;
	display: flex;
	align-items: flex-start;
	gap: 120px;
	overflow-x: auto;
	overflow-y: hidden;
	position: relative;
	scrollbar-width: thin;
	scroll-snap-type: x proximity;
	scroll-padding-inline: 48px;
	-webkit-overflow-scrolling: touch;
	scrollbar-color: var(--sv-primary-mid) transparent;
	/* Soft fade at both ends — hints at horizontal scroll. */
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
	        mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
}
.sv-timeline__list::-webkit-scrollbar { height: 6px; }
.sv-timeline__list::-webkit-scrollbar-track { background: transparent; }
.sv-timeline__list::-webkit-scrollbar-thumb { background: var(--sv-border); border-radius: 3px; }
.sv-timeline__list::-webkit-scrollbar-thumb:hover { background: var(--sv-primary-mid); }
.sv-timeline__list::before {
	content: "";
	position: absolute;
	/* runs through dot centers */
	top: 48px;
	left: 12px;
	right: 12px;
	height: 2px;
	background: var(--sv-border);
	z-index: 0;
}
.sv-timeline__item {
	flex: 0 0 200px;
	min-width: 200px;
	max-width: none;
	position: relative;
	scroll-snap-align: start;
}
.sv-timeline__item a {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 0 8px;
	color: inherit;
}
.sv-timeline__year {
	font-family: var(--sv-font-mono);
	font-size: 1rem;
	font-weight: 500;
	color: var(--sv-primary);
	min-height: 24px;
	margin-bottom: 8px;
}
.sv-timeline__dot {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--sv-bg);
	border: 2px solid var(--sv-primary);
	position: relative;
	z-index: 1;
	transition: transform .15s, background .15s;
	margin-bottom: 14px;
}
.sv-timeline__item a:hover .sv-timeline__dot {
	background: var(--sv-primary);
	transform: scale(1.25);
}
.sv-timeline__title {
	font-family: var(--sv-font-serif);
	font-size: 1rem;
	color: var(--sv-ink);
	margin: 0 0 4px;
	line-height: 1.3;
}
.sv-timeline__item a:hover .sv-timeline__title { color: var(--sv-primary); }
.sv-timeline__addr {
	font-family: var(--sv-font-mono);
	font-size: .78rem;
	color: var(--sv-text-meta);
}

/* Mobile: vertikalna kompaktna lista, bez horizontal linije */
@media (max-width: 640px) {
	.sv-timeline__list { flex-direction: column; gap: 0; overflow: visible; padding: 0 24px; mask-image: none; -webkit-mask-image: none; }
	.sv-timeline__list::before { display: none; }
	.sv-timeline__item { max-width: none; min-width: 0; flex: 1 1 auto; }
	.sv-timeline__item a {
		flex-direction: row;
		align-items: baseline;
		text-align: left;
		gap: 14px;
		padding: 12px 0;
		border-bottom: 1px solid rgba(255, 255, 255, 0.15);
	}
	.sv-timeline__item:last-child a { border-bottom: 0; }
	.sv-timeline__year { min-width: 64px; margin: 0; }
	.sv-timeline__dot { display: none; }
	.sv-timeline__title { flex: 1; font-size: .98rem; margin: 0; }
	.sv-timeline__addr { font-size: .76rem; flex-shrink: 0; }
}

/* ================================================================
   Izabrani odlomak — carousel (1 centriran, sljedeći poluvidljiv desno)
   ================================================================ */
.sv-quotes-carousel {
	--slide-w: 750px;
	--slide-gap: 200px;
	position: relative;
	margin: var(--sv-section-gap) 0;
	/* full viewport width — escapes any parent container padding */
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	overflow: hidden;
}
.sv-quotes-carousel__track {
	display: flex;
	gap: var(--slide-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	/* Padding centers first slide in viewport. */
	padding: 30px calc((100vw - var(--slide-w)) / 2);
}
.sv-quotes-carousel__track::-webkit-scrollbar { display: none; }

.sv-quote {
	flex: 0 0 750px;
	max-width: none;
	margin: 0;
	scroll-snap-align: center;
	text-align: center;
	position: relative;
	padding: 16px 8px;
}
.sv-quote__mark {
	font-family: var(--sv-font-serif);
	font-size: clamp(5rem, 10vw, 7rem);
	line-height: 1;
	color: var(--sv-primary-mid);
	opacity: .35;
	display: block;
	margin-bottom: -32px;
}
.sv-quote__text {
	font-family: var(--sv-font-serif);
	font-size: clamp(1.35rem, 2.4vw, 1.75rem);
	line-height: 1.45;
	color: var(--sv-ink);
	font-style: italic;
	margin: 0 0 24px;
	quotes: none;
}
.sv-quote__credit {
	display: inline-block;
	font-family: var(--sv-font-mono);
	font-size: .95rem;
	font-style: normal;
	margin-top: 4px;
}
.sv-quote__credit a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 20px;
	background: transparent;
	border: 1.5px solid var(--sv-primary);
	border-radius: 999px;
	color: var(--sv-primary);
	font-weight: 500;
	text-decoration: none;
	transition: background .15s, color .15s, border-color .15s, transform .15s;
}
.sv-quote__credit a:hover {
	background: var(--sv-primary);
	color: #fff;
	border-color: var(--sv-primary);
	transform: translateY(-1px);
}

/* Paginacija (dots ispod) — aktivan dot je elongirani pill */
.sv-quotes-carousel__pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	margin-top: 24px;
	padding: 0 24px;
}
.sv-quotes-carousel__dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--sv-border);
	border: 0;
	padding: 0;
	cursor: pointer;
	transition: background .2s ease, width .2s ease, border-radius .2s ease;
}
.sv-quotes-carousel__dot:hover,
.sv-quotes-carousel__dot:focus-visible {
	background: var(--sv-primary-mid);
	outline: none;
}
.sv-quotes-carousel__dot.is-active {
	background: var(--sv-accent);
	width: 32px;
	border-radius: 5px;
}

/* Arrows */
.sv-quotes-carousel__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 56px;
	height: 56px;
	background: var(--sv-surface);
	border: 1px solid var(--sv-border);
	border-radius: 50%;
	font-family: var(--sv-font-serif);
	font-size: 2rem;
	line-height: 1;
	color: var(--sv-primary);
	cursor: pointer;
	z-index: 2;
	box-shadow: 0 4px 14px rgba(0, 31, 64, 0.1);
	transition: background .15s, color .15s, border-color .15s, transform .15s;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 0 4px;
}
.sv-quotes-carousel__prev { left: 8px; }
.sv-quotes-carousel__next { right: 8px; }
.sv-quotes-carousel__arrow:hover,
.sv-quotes-carousel__arrow:focus-visible {
	background: var(--sv-accent);
	color: #fff;
	border-color: var(--sv-accent);
	outline: none;
	transform: translateY(-50%) scale(1.05);
}
.sv-quotes-carousel__arrow {
	transition: background .15s, color .15s, border-color .15s, transform .2s, opacity .2s;
}
.sv-quotes-carousel__arrow:disabled {
	opacity: 0;
	pointer-events: none;
	transform: translateY(-50%) scale(0.8);
}

@media (max-width: 1100px) {
	.sv-quotes-carousel { --slide-w: 82vw; --slide-gap: 60px; }
	.sv-quote { flex: 0 0 82vw; }
}
@media (max-width: 768px) {
	.sv-quotes-carousel { --slide-w: 88vw; --slide-gap: 36px; }
	.sv-quote { flex: 0 0 88vw; }
	.sv-quotes-carousel__track { padding: 24px calc((100vw - var(--slide-w)) / 2); }
	.sv-quotes-carousel__arrow { width: 44px; height: 44px; font-size: 1.5rem; }
	.sv-quotes-carousel__prev { left: 6px; }
	.sv-quotes-carousel__next { right: 6px; }
}

/* ================================================================
   Poziv na suradnju (CTA card)
   ================================================================ */
.sv-cta {
	margin: var(--sv-section-gap) 0;
	padding: 40px 32px;
	text-align: center;
	background: var(--sv-border);
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius);
	position: relative;
	overflow: hidden;
}
.sv-cta::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--sv-primary), var(--sv-accent));
}
.sv-cta__eyebrow {
	font-family: var(--sv-font-mono);
	font-size: .78rem;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--sv-primary);
	margin-bottom: 12px;
}
.sv-cta__title {
	font-family: var(--sv-font-serif);
	font-size: clamp(1.5rem, 3vw, 2rem);
	margin: 0 0 12px;
	color: var(--sv-ink);
}
.sv-cta__body {
	max-width: 540px;
	margin: 0 auto 24px;
	color: var(--sv-text-mid);
	font-size: 1.02rem;
}
.sv-cta__actions { display: inline-flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* ================================================================
   Single zgrada
   ================================================================ */
.sv-zgrada-hero { padding: 56px 0 36px; color: #fff; border-radius: var(--sv-radius); margin-bottom: 40px; padding-left: 32px; padding-right: 32px; }
.sv-zgrada-hero__number { font-family: var(--sv-font-serif); font-size: clamp(3rem, 10vw, 6rem); line-height: 1; margin: 0 0 8px; }
.sv-zgrada-hero__title { font-family: var(--sv-font-serif); font-size: clamp(1.8rem, 4vw, 2.5rem); color: #fff; margin: 0 0 16px; }
.sv-zgrada-hero__title--italic { font-style: italic; }
.sv-zgrada-hero__meta { font-family: var(--sv-font-mono); font-size: .85rem; color: rgba(255,255,255,.75); }

/* Povezane priče */
.sv-related { margin-top: 48px; }
.sv-related__title { font-family: var(--sv-font-serif); font-size: 1.5rem; margin-bottom: 20px; color: var(--sv-ink); }

/* ================================================================
   Tema pills (na postu)
   ================================================================ */
.sv-pills { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0; }
.sv-pill {
	display: inline-block;
	padding: 4px 12px;
	font-size: .82rem;
	border-radius: 999px;
	background: var(--sv-border);
	color: var(--sv-ink);
}
.sv-pill:hover { background: var(--sv-primary); color: #fff; }

/* ================================================================
   Share
   ================================================================ */
.sv-share { display: flex; gap: 8px; align-items: center; margin: 32px 0; padding: 16px 0; border-top: 1px solid var(--sv-border); border-bottom: 1px solid var(--sv-border); font-family: var(--sv-font-mono); font-size: .82rem; color: var(--sv-text-meta); }
.sv-share__label { margin-right: 4px; }
.sv-share a {
	display: inline-flex; align-items: center; justify-content: center;
	width: 32px; height: 32px;
	border-radius: 50%;
	background: var(--sv-border);
	color: var(--sv-ink);
}
.sv-share a:hover { background: var(--sv-primary); color: #fff; }

/* ================================================================
   /ulica — kralježnica
   ================================================================ */
.sv-ulica { padding: 24px 0 80px; }
.sv-ulica__header { max-width: var(--sv-container); margin: 0 auto 24px; padding: 0 24px; }
.sv-ulica__title { font-size: clamp(1.75rem, 4vw, 2.5rem); margin: 0; }
.sv-ulica__subtitle { color: var(--sv-text-mid); font-size: 1.05rem; margin: 6px 0 0; }

.sv-ulica__tabs {
	max-width: var(--sv-container);
	margin: 0 auto 24px;
	padding: 0 24px;
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.sv-ulica__tab {
	font-family: var(--sv-font-mono);
	font-size: .82rem;
	background: var(--sv-surface);
	border: 1px solid var(--sv-border);
	color: var(--sv-text);
	padding: 8px 16px;
	border-radius: 999px;
	cursor: pointer;
	text-transform: lowercase;
	transition: all .15s;
}
.sv-ulica__tab:hover { border-color: var(--sv-primary-mid); color: var(--sv-ink); }
.sv-ulica__tab.is-active { background: var(--sv-primary); border-color: var(--sv-primary); color: #fff; }

.sv-ulica__controls {
	max-width: var(--sv-container); margin: 0 auto 24px; padding: 0 24px;
	display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
}
.sv-ulica__search {
	flex: 1; min-width: 220px;
	padding: 10px 14px;
	border: 1px solid var(--sv-border);
	border-radius: 999px;
	font: inherit;
	background: var(--sv-surface);
	color: var(--sv-ink);
}
.sv-ulica__search::placeholder { color: var(--sv-placeholder); }
.sv-ulica__search:focus { outline: none; border-color: var(--sv-primary-mid); }
.sv-ulica__toggle { display: inline-flex; border: 1px solid var(--sv-border); border-radius: 999px; overflow: hidden; font-family: var(--sv-font-mono); font-size: .82rem; }
.sv-ulica__toggle button { background: transparent; border: 0; padding: 8px 16px; cursor: pointer; color: var(--sv-text); }
.sv-ulica__toggle button.is-active { background: var(--sv-primary); color: #fff; }

/* Kralježnica layout */
.sv-ulica__spine {
	max-width: var(--sv-container);
	margin: 0 auto;
	padding: 0 24px;
	display: grid;
	grid-template-columns: 1fr 64px 1fr;
	gap: 0;
	position: relative;
}
.sv-ulica__side { display: flex; flex-direction: column; }
/* Parna (left column) hugs spine on its right; neparna (right column) hugs spine on its left. */
.sv-ulica__side--even { align-items: flex-end; text-align: right; }
.sv-ulica__side--odd { align-items: flex-start; text-align: left; }
.sv-ulica__center {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.sv-ulica__center::before {
	content: "";
	position: absolute;
	top: 0; bottom: 0;
	left: 50%;
	width: 2px;
	background: var(--sv-primary-mid);
	transform: translateX(-1px);
}
.sv-ulica__cap { font-family: var(--sv-font-mono); font-size: .72rem; letter-spacing: .08em; color: var(--sv-text-meta); text-transform: uppercase; padding: 8px 4px; text-align: center; background: var(--sv-bg); z-index: 1; }
.sv-ulica__divider {
	font-family: var(--sv-font-mono);
	font-size: .72rem;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--sv-primary);
	padding: 10px 12px;
	background: var(--sv-bg);
	z-index: 1;
	border: 1px dashed var(--sv-primary-mid);
	border-radius: 999px;
	white-space: nowrap;
}

.sv-ulica__row { display: contents; }
.sv-ulica__building {
	display: block;
	padding: 10px 14px;
	margin: 6px 0;
	background: var(--sv-surface);
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-sm);
	color: var(--sv-ink);
	cursor: pointer;
	transition: transform .15s, background .15s, color .15s;
	min-width: 0;
	max-width: 100%;
	font-size: .9rem;
}
.sv-ulica__building:hover, .sv-ulica__building:focus-visible { background: var(--sv-primary); color: #fff; outline: none; transform: translateY(-1px); }
.sv-ulica__building-number { font-family: var(--sv-font-serif); font-size: 1.05rem; display: block; }
.sv-ulica__building-name { display: block; font-size: .82rem; color: var(--sv-text-meta); margin-top: 2px; }
.sv-ulica__building:hover .sv-ulica__building-name,
.sv-ulica__building:focus-visible .sv-ulica__building-name { color: rgba(255,255,255,.85); }
.sv-ulica__building.is-published { border-color: var(--sv-primary-mid); }
.sv-ulica__building.is-bonus { border-color: var(--sv-accent); background: var(--sv-bg-warning); color: var(--sv-accent-dark); }

.sv-ulica__offset { display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: transparent; border: 1px dashed var(--sv-primary-mid); border-radius: var(--sv-radius-sm); margin: 6px 0; font-size: .82rem; font-style: italic; color: var(--sv-text-mid); }

/* Mobile: stack sides */
@media (max-width: 768px) {
	.sv-ulica__spine { grid-template-columns: 1fr; }
	.sv-ulica__side--odd, .sv-ulica__side--even { align-items: stretch; text-align: left; }
	.sv-ulica__center { display: none; }
}

/* List view */
.sv-ulica__list { max-width: var(--sv-container-narrow); margin: 0 auto; padding: 0 24px; }
.sv-ulica__list-row {
	display: flex; align-items: center; gap: 16px;
	padding: 14px 16px;
	border-bottom: 1px solid var(--sv-border);
	font-size: .95rem;
}
.sv-ulica__list-row:hover { background: var(--sv-surface); }
.sv-ulica__list-num { font-family: var(--sv-font-serif); font-size: 1.25rem; min-width: 50px; color: var(--sv-primary); }
.sv-ulica__list-name { flex: 1; color: var(--sv-ink); }
.sv-ulica__list-meta { font-family: var(--sv-font-mono); font-size: .78rem; color: var(--sv-text-meta); }

/* Detail modal */
.sv-modal { position: fixed; inset: 0; background: rgba(0, 31, 64, 0.6); display: none; align-items: center; justify-content: center; z-index: 100; padding: 24px; }
.sv-modal.is-open { display: flex; }
.sv-modal__body { background: var(--sv-surface); border-radius: var(--sv-radius); max-width: 520px; width: 100%; padding: 32px; position: relative; box-shadow: var(--sv-shadow-pop); }
.sv-modal__close { position: absolute; top: 12px; right: 12px; background: transparent; border: 0; font-size: 1.5rem; color: var(--sv-text-mid); cursor: pointer; line-height: 1; }
.sv-modal__num { font-family: var(--sv-font-serif); font-size: 3rem; color: var(--sv-primary); margin: 0 0 4px; line-height: 1; }
.sv-modal__title { font-family: var(--sv-font-serif); font-size: 1.5rem; margin: 0 0 8px; color: var(--sv-ink); }
.sv-modal__meta { font-family: var(--sv-font-mono); font-size: .82rem; color: var(--sv-text-meta); margin-bottom: 14px; }
.sv-modal__note { color: var(--sv-text); margin-bottom: 20px; }

/* ================================================================
   Comments
   ================================================================ */
.sv-comments { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--sv-border); }
.sv-comments__title { font-family: var(--sv-font-serif); font-size: 1.4rem; margin-bottom: 18px; }
.comment-list { list-style: none; padding: 0; margin: 0 0 24px; }
.comment-list .comment { padding: 16px; background: var(--sv-surface); border: 1px solid var(--sv-border); border-radius: var(--sv-radius-sm); margin-bottom: 12px; }
.comment-list .children { list-style: none; padding-left: 24px; margin-top: 12px; }
.comment-author { font-weight: 500; }
.comment-metadata { font-family: var(--sv-font-mono); font-size: .78rem; color: var(--sv-text-meta); margin-bottom: 8px; }
.comment-form label { display: block; margin-top: 12px; font-size: .9rem; color: var(--sv-text-mid); }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--sv-border); border-radius: var(--sv-radius-sm); font: inherit; background: var(--sv-surface); }
.comment-form textarea { min-height: 120px; }
.comment-form input[type="submit"] { background: var(--sv-accent); color: #fff; border: 0; padding: 12px 22px; border-radius: 999px; cursor: pointer; margin-top: 12px; transition: background .15s; }
.comment-form input[type="submit"]:hover { background: var(--sv-accent-dark); }

/* ================================================================
   Pagination
   ================================================================ */
.pagination, .navigation.pagination { display: flex; justify-content: center; gap: 6px; margin: 32px 0; }
.page-numbers { display: inline-block; padding: 8px 14px; background: var(--sv-surface); border: 1px solid var(--sv-border); border-radius: var(--sv-radius-sm); color: var(--sv-ink); font-family: var(--sv-font-mono); font-size: .85rem; }
.page-numbers.current { background: var(--sv-primary); color: #fff; border-color: var(--sv-primary); }
.page-numbers:hover { border-color: var(--sv-primary-mid); }

/* ================================================================
   WP gallery (osnovno)
   ================================================================ */
.gallery { display: grid; gap: 12px; margin: 1.5em 0; }
.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); }
@media (max-width: 559px) { .gallery { grid-template-columns: repeat(2, 1fr) !important; } }
.gallery-item { margin: 0; }
.gallery-item img { width: 100%; height: auto; border-radius: var(--sv-radius-sm); }
.gallery-caption { font-family: var(--sv-font-mono); font-size: .78rem; color: var(--sv-text-meta); margin-top: 6px; }

/* ================================================================
   Utilities
   ================================================================ */
.sv-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.sv-section-title { font-family: var(--sv-font-serif); font-size: 1.5rem; margin: 0 0 24px; color: var(--sv-ink); }
.sv-featured, .sv-latest { margin: var(--sv-section-gap) 0; }
.sv-muted { color: var(--sv-text-meta); font-family: var(--sv-font-mono); font-size: .85rem; }

/* ================================================================
   Kontakt stranica
   ================================================================ */
.sv-kontakt { padding-bottom: 96px; }
.sv-kontakt__grid {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
	gap: 64px;
	align-items: start;
	margin-top: 8px;
}
.sv-kontakt__info { font-size: 1.02rem; color: var(--sv-text); }
.sv-kontakt__intro { margin-bottom: 28px; }
.sv-kontakt__intro p:first-child { margin-top: 0; }
.sv-kontakt__intro p:last-child { margin-bottom: 0; }

/* Channels — icon-led rows. */
.sv-kontakt__channels {
	list-style: none;
	margin: 0;
	padding: 8px 0 0;
	border-top: 1px solid var(--sv-border);
}
.sv-kontakt__channels li {
	display: grid;
	grid-template-columns: 40px 1fr;
	column-gap: 16px;
	align-items: center;
	padding: 18px 0;
	border-bottom: 1px solid var(--sv-border);
}
.sv-kontakt__channels li:last-child { border-bottom: 0; }
.sv-kontakt__channel-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--sv-bg);
	color: var(--sv-primary);
	flex-shrink: 0;
}
.sv-kontakt__channel-icon svg { width: 18px; height: 18px; display: block; }
.sv-kontakt__channel-body { display: flex; flex-direction: column; min-width: 0; }
.sv-kontakt__channel-label {
	font-family: var(--sv-font-mono);
	font-size: .7rem;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--sv-text-meta);
	margin-bottom: 2px;
}
.sv-kontakt__channel-value {
	font-size: 1rem;
	color: var(--sv-ink);
	font-weight: 500;
	word-break: break-word;
}
.sv-kontakt__channel-value a { color: inherit; }
.sv-kontakt__channel-value a:hover { color: var(--sv-primary); }

/* Form card — modern feel: accent strip + soft shadow + generous padding. */
.sv-kontakt__form-wrap {
	position: relative;
	background: var(--sv-surface);
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius);
	padding: 44px;
	box-shadow: var(--sv-shadow-soft);
	overflow: hidden;
}
.sv-kontakt__form-wrap::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 4px;
	background: linear-gradient(90deg, var(--sv-ink) 0%, var(--sv-primary) 50%, var(--sv-accent) 100%);
}
.sv-kontakt__form-eyebrow {
	font-family: var(--sv-font-mono);
	font-size: .72rem;
	text-transform: uppercase;
	letter-spacing: .14em;
	color: var(--sv-primary);
	margin-bottom: 8px;
}
.sv-kontakt__form-title {
	font-family: var(--sv-font-serif);
	font-size: clamp(1.6rem, 1.2rem + 1vw, 2rem);
	line-height: 1.15;
	margin: 0 0 28px;
	color: var(--sv-ink);
}

/* CF7 form — grid layout for fields. */
.sv-kontakt .wpcf7 { max-width: none; }
.sv-kontakt .wpcf7-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 22px 18px;
}
.sv-kontakt .wpcf7-form > * { grid-column: 1 / -1; margin: 0; min-width: 0; }
.sv-kontakt .wpcf7-form > p:nth-of-type(1),
.sv-kontakt .wpcf7-form > p:nth-of-type(2) { grid-column: span 1; }
.sv-kontakt .wpcf7-form .hidden-fields-container { display: none; }

/* Hide CF7's built-in <br> after label text — we use .wpcf7-form-control-wrap spacing instead. */
.sv-kontakt .wpcf7-form label br { display: none; }

.sv-kontakt .wpcf7-form label {
	display: block;
	font-family: var(--sv-font-mono);
	font-size: .72rem;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--sv-text-mid);
	font-weight: 500;
}
.sv-kontakt .wpcf7-form-control-wrap {
	display: block;
	margin-top: 8px;
}

/* Inputs — taller, calmer, Tailwind-ish. */
.sv-kontakt .wpcf7-form input[type="text"],
.sv-kontakt .wpcf7-form input[type="email"],
.sv-kontakt .wpcf7-form input[type="url"],
.sv-kontakt .wpcf7-form input[type="tel"],
.sv-kontakt .wpcf7-form select,
.sv-kontakt .wpcf7-form textarea {
	width: 100%;
	min-width: 0;
	padding: 14px 16px;
	font-family: var(--sv-font-sans);
	font-size: 1rem;
	line-height: 1.4;
	color: var(--sv-ink);
	background: var(--sv-bg);
	border: 1px solid transparent;
	border-radius: var(--sv-radius-sm);
	transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
	text-transform: none;
	letter-spacing: normal;
}
.sv-kontakt .wpcf7-form input::placeholder,
.sv-kontakt .wpcf7-form textarea::placeholder { color: var(--sv-placeholder); }
.sv-kontakt .wpcf7-form input:hover,
.sv-kontakt .wpcf7-form select:hover,
.sv-kontakt .wpcf7-form textarea:hover { background: #EBEEF3; }
.sv-kontakt .wpcf7-form input:focus,
.sv-kontakt .wpcf7-form select:focus,
.sv-kontakt .wpcf7-form textarea:focus {
	outline: none;
	background: var(--sv-surface);
	border-color: var(--sv-primary-mid);
	box-shadow: 0 0 0 4px rgba(61, 107, 163, 0.16);
}
.sv-kontakt .wpcf7-form textarea { resize: vertical; min-height: 150px; line-height: 1.55; }

/* Custom select arrow. */
.sv-kontakt .wpcf7-form select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23001F40' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	padding-right: 42px;
	cursor: pointer;
}

/* Submit row — keep submit on its own line, full width on small screens. */
.sv-kontakt .wpcf7-form .sv-submit-row {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 8px;
}
.sv-kontakt .wpcf7-form input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 180px;
	padding: 16px 30px;
	background: var(--sv-ink);
	color: #fff;
	font-family: var(--sv-font-sans);
	font-size: 1rem;
	font-weight: 500;
	letter-spacing: .02em;
	border: 0;
	border-radius: var(--sv-radius-sm);
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(0, 31, 64, 0.18);
	transition: background .18s ease, transform .12s ease, box-shadow .18s ease;
}
.sv-kontakt .wpcf7-form input[type="submit"]:hover {
	background: var(--sv-primary);
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(0, 63, 127, 0.28);
}
.sv-kontakt .wpcf7-form input[type="submit"]:active { transform: translateY(0); }
.sv-kontakt .wpcf7-form input[type="submit"]:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }

.sv-kontakt__submit-hint {
	font-family: var(--sv-font-mono);
	font-size: .75rem;
	color: var(--sv-text-meta);
	letter-spacing: .04em;
}

.sv-kontakt .wpcf7-spinner {
	display: inline-block;
	margin: 0 0 0 4px;
	vertical-align: middle;
}

/* CF7 validation/messages. */
.sv-kontakt .wpcf7-form .wpcf7-not-valid {
	border-color: var(--sv-accent);
	background: var(--sv-bg-warning);
}
.sv-kontakt .wpcf7-not-valid-tip {
	display: block;
	margin-top: 6px;
	font-family: var(--sv-font-sans);
	font-size: .82rem;
	color: var(--sv-accent-dark);
	text-transform: none;
	letter-spacing: normal;
}
.sv-kontakt .wpcf7-response-output {
	grid-column: 1 / -1;
	margin: 0 !important;
	padding: 14px 18px !important;
	border-radius: var(--sv-radius-sm);
	border: 1px solid var(--sv-border) !important;
	font-family: var(--sv-font-sans);
	font-size: .92rem;
	background: var(--sv-bg);
	color: var(--sv-text);
}
.sv-kontakt .wpcf7 form.sent .wpcf7-response-output {
	border-color: #2E7D5B !important;
	background: #E6F4EC;
	color: #1F5A41;
}
.sv-kontakt .wpcf7 form.invalid .wpcf7-response-output,
.sv-kontakt .wpcf7 form.failed .wpcf7-response-output,
.sv-kontakt .wpcf7 form.spam .wpcf7-response-output {
	border-color: var(--sv-accent) !important;
	background: var(--sv-bg-warning);
	color: var(--sv-accent-dark);
}

/* Responsive. */
@media (max-width: 1023px) {
	.sv-kontakt__grid { grid-template-columns: 1fr; gap: 32px; }
	.sv-kontakt__form-wrap { padding: 32px; }
}
@media (max-width: 559px) {
	.sv-kontakt { padding-bottom: 64px; }
	.sv-kontakt__form-wrap { padding: 24px 20px; }
	.sv-kontakt__form-title { margin-bottom: 22px; }
	.sv-kontakt .wpcf7-form { gap: 18px 16px; }
	.sv-kontakt .wpcf7-form > p:nth-of-type(1),
	.sv-kontakt .wpcf7-form > p:nth-of-type(2) { grid-column: 1 / -1; }
	.sv-kontakt .wpcf7-form input[type="submit"] { width: 100%; min-width: 0; }
	.sv-kontakt .wpcf7-form .sv-submit-row { flex-direction: column; align-items: stretch; }
	.sv-kontakt__submit-hint { text-align: center; }
}
.sv-kontakt__socials { display: inline-flex; flex-wrap: wrap; gap: 14px; }
.sv-kontakt__socials a { color: var(--sv-primary); }

/* ================================================================
   Teme — index (lista svih tema)
   ================================================================ */
.sv-teme-index {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 24px;
	margin-bottom: 80px;
}
.sv-tema-card {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 28px 24px;
	background: var(--sv-surface);
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius);
	box-shadow: var(--sv-shadow-soft);
	color: var(--sv-text);
	text-decoration: none;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
	position: relative;
	overflow: hidden;
}
.sv-tema-card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: linear-gradient(90deg, var(--sv-primary) 0%, var(--sv-accent) 100%);
	opacity: 0;
	transition: opacity .18s ease;
}
.sv-tema-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--sv-shadow-pop);
	border-color: transparent;
	color: var(--sv-text);
}
.sv-tema-card:hover::before { opacity: 1; }
.sv-tema-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.sv-tema-card__icon {
	display: inline-flex;
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: var(--sv-bg);
	color: var(--sv-primary);
	align-items: center;
	justify-content: center;
}
.sv-tema-card__icon svg { width: 26px; height: 26px; }
.sv-tema-card__count {
	font-family: var(--sv-font-mono);
	font-size: .82rem;
	color: var(--sv-text-meta);
	letter-spacing: .04em;
	text-align: right;
}
.sv-tema-card__count strong {
	display: block;
	font-family: var(--sv-font-serif);
	font-size: 1.85rem;
	color: var(--sv-ink);
	font-weight: 400;
	line-height: 1;
}
.sv-tema-card__title {
	font-family: var(--sv-font-serif);
	font-size: 1.4rem;
	margin: 0;
	color: var(--sv-ink);
	line-height: 1.15;
}
.sv-tema-card__desc {
	font-size: .95rem;
	margin: 0;
	color: var(--sv-text-mid);
	line-height: 1.5;
}
.sv-tema-card__latest {
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px dashed var(--sv-border);
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.sv-tema-card__latest-label {
	font-family: var(--sv-font-mono);
	font-size: .68rem;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--sv-text-meta);
}
.sv-tema-card__latest-title {
	font-size: .92rem;
	color: var(--sv-ink);
	font-weight: 500;
}
.sv-tema-card__latest-date {
	font-family: var(--sv-font-mono);
	font-size: .74rem;
	color: var(--sv-text-meta);
}
.sv-tema-card__more {
	font-family: var(--sv-font-mono);
	font-size: .8rem;
	color: var(--sv-primary);
	letter-spacing: .04em;
}
.sv-tema-card:hover .sv-tema-card__more { color: var(--sv-accent); }

/* ================================================================
   404 stranica — fun
   ================================================================ */
.sv-404 {
	position: relative;
	padding: 100px 0 0;
	overflow: hidden;
	background: linear-gradient(180deg, var(--sv-bg) 0%, var(--sv-surface) 100%);
}
.sv-404__inner {
	position: relative;
	text-align: center;
	max-width: 720px;
	z-index: 2;
}
.sv-404__code {
	font-family: var(--sv-font-serif);
	font-size: clamp(7rem, 18vw, 13rem);
	line-height: 1;
	color: var(--sv-ink);
	opacity: .07;
	letter-spacing: -.04em;
	margin: 0;
	user-select: none;
}
.sv-404__eyebrow {
	margin-top: -1em;
	font-family: var(--sv-font-mono);
	text-transform: uppercase;
	letter-spacing: .14em;
	font-size: .82rem;
	color: var(--sv-accent);
}
.sv-404__title {
	font-family: var(--sv-font-serif);
	font-size: clamp(2.2rem, 5vw, 3.4rem);
	color: var(--sv-ink);
	margin: 12px 0 14px;
	line-height: 1.1;
}
.sv-404__text {
	font-size: 1.05rem;
	color: var(--sv-text);
	max-width: 560px;
	margin: 0 auto 28px;
	line-height: 1.55;
}
.sv-404__actions {
	display: flex;
	gap: 14px;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 32px;
}
.sv-404__search {
	display: flex;
	max-width: 520px;
	margin: 0 auto 96px;
	background: var(--sv-surface);
	border: 1px solid var(--sv-border);
	border-radius: 999px;
	overflow: hidden;
	box-shadow: var(--sv-shadow-soft);
	transition: box-shadow .15s ease, border-color .15s ease;
}
.sv-404__search:focus-within {
	border-color: var(--sv-primary-mid);
	box-shadow: 0 0 0 4px rgba(61, 107, 163, 0.16);
}
.sv-404__search input {
	flex: 1;
	border: 0;
	padding: 14px 22px;
	font-family: var(--sv-font-sans);
	font-size: 1rem;
	color: var(--sv-ink);
	background: transparent;
	outline: none;
}
.sv-404__search button {
	border: 0;
	padding: 0 24px;
	background: var(--sv-ink);
	color: #fff;
	font-family: var(--sv-font-sans);
	font-size: .95rem;
	cursor: pointer;
	transition: background .15s ease;
}
.sv-404__search button:hover { background: var(--sv-primary); }

/* Tračnice + tramvaj animacija */
.sv-404__rails {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 90px;
	pointer-events: none;
	z-index: 1;
}
.sv-404__rail {
	position: absolute;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--sv-border);
}
.sv-404__rail--1 { bottom: 32px; }
.sv-404__rail--2 { bottom: 24px; }
.sv-404__tram {
	position: absolute;
	bottom: 18px;
	left: -160px;
	width: 120px;
	color: var(--sv-ink);
	animation: sv-404-tram 16s linear infinite;
	will-change: transform;
}
.sv-404__tram svg { display: block; width: 100%; height: auto; }

@keyframes sv-404-tram {
	0%   { transform: translateX(0); }
	100% { transform: translateX(calc(100vw + 160px)); }
}
@media (prefers-reduced-motion: reduce) {
	.sv-404__tram { animation: none; left: 50%; transform: translateX(-50%); }
}

/* Suggestions panel */
.sv-404__panel {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
	padding: 48px 24px 96px;
}
.sv-404__col {
	background: var(--sv-surface);
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius);
	padding: 24px;
	box-shadow: var(--sv-shadow-soft);
}
.sv-404__col-title {
	font-family: var(--sv-font-mono);
	font-size: .78rem;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--sv-primary);
	margin: 0 0 16px;
	font-weight: 500;
}
.sv-404__list { list-style: none; margin: 0; padding: 0; }
.sv-404__list li { border-bottom: 1px dashed var(--sv-border); }
.sv-404__list li:last-child { border-bottom: 0; }
.sv-404__list a {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 12px 0;
	color: var(--sv-ink);
	text-decoration: none;
	transition: color .12s ease;
}
.sv-404__list a:hover { color: var(--sv-primary); }
.sv-404__list-title { font-size: .98rem; font-weight: 500; }
.sv-404__list-meta {
	font-family: var(--sv-font-mono);
	font-size: .76rem;
	color: var(--sv-text-meta);
	letter-spacing: .04em;
}

@media (max-width: 768px) {
	.sv-404 { padding-top: 64px; }
	.sv-404__panel { grid-template-columns: 1fr; gap: 18px; padding-bottom: 64px; }
	.sv-404__rails { height: 70px; }
}