/* ================================================================
   ERA Kutjevo — main stylesheet
   Organizacija (od vrha prema dnu):
   1. Tokens (varijable)
   2. Reset
   3. Tipografija
   4. Layout (container, grid)
   5. Utility (sr-only, skip-link)
   6. Components (button, badge, card, search, pagination, breadcrumbs)
   7. Topbar
   8. Site header + nav
   9. Site footer
   10. Hero (placeholder za sada)
   11. Sections
   12. Page / Post article
   13. Archive header
   14. 404
   15. Print
   ================================================================ */

/* ============ 1. TOKENS ============ */
:root {
	--era-red:        #E30613;
	--era-red-dark:   #B30410;
	--era-black:      #0A0A0F;
	--era-deep:       #0E1124;
	--era-blue:       #1E4FE0;
	--era-cyan:       #00D9FF;
	--era-text:       #1A1A1F;
	--era-muted:      #6B7280;
	--era-line:       #E5E7EB;
	--era-bg:         #FFFFFF;
	--era-bg-soft:    #F7F7FB;
	--era-bg-deep:    #0E1124;
	--era-post-link-accent: #deaa25;

	--font-heading:   'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--font-body:      'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

	/* Fluid skala */
	--fs-xs:    clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem);
	--fs-sm:    clamp(0.875rem, 0.85rem + 0.25vw, 0.9375rem);
	--fs-base:  clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
	--fs-lg:    clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem);
	--fs-xl:    clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
	--fs-2xl:   clamp(1.5rem, 1.3rem + 1vw, 2rem);
	--fs-3xl:   clamp(1.875rem, 1.5rem + 1.875vw, 2.75rem);
	--fs-4xl:   clamp(2.5rem, 1.8rem + 3.5vw, 4rem);
	--fs-5xl:   clamp(3rem, 2rem + 5vw, 5.5rem);
	--fs-hero:  clamp(3.5rem, 2rem + 7.5vw, 7.5rem);

	/* Hero tipografija (izvor: Suvenirnica / page-hero — category-hero) */
	--hero-eyebrow-font-family: var(--font-heading);
	--hero-eyebrow-font-size: var(--fs-xs);
	--hero-eyebrow-font-weight: 600;
	--hero-eyebrow-letter-spacing: 0.18em;
	--hero-eyebrow-line-height: 1;
	--hero-title-font-family: var(--font-heading);
	--hero-title-font-size: clamp(2.25rem, 4vw + 1rem, 4rem);
	--hero-title-font-weight: 800;
	--hero-title-letter-spacing: 0.4px;
	--hero-title-line-height: 1.02;
	--hero-lead-font-family: var(--font-body);
	--hero-lead-font-size: var(--fs-base);
	--hero-lead-font-weight: 400;
	--hero-lead-line-height: 1.55;
	--hero-lead-letter-spacing: normal;

	--radius-sm:      4px;
	--radius:         8px;
	--radius-lg:      14px;
	--radius-xl:      22px;
	--radius-pill:    999px;

	--shadow-sm:  0 1px 2px rgb(15 17 36 / 6%);
	--shadow:     0 4px 16px -4px rgb(15 17 36 / 10%);
	--shadow-lg:  0 24px 60px -20px rgb(15 17 36 / 20%);
	--shadow-glow: 0 0 0 1px rgb(30 79 224 / 25%), 0 8px 24px -8px rgb(30 79 224 / 35%);

	--container-max:  1280px;
	--container-pad:  clamp(1rem, 4vw, 2.5rem);

	--header-h:       80px;
	--topbar-h:       40px;

	--ease-out:       cubic-bezier(0.22, 1, 0.36, 1);
	--ease-in-out:    cubic-bezier(0.65, 0.05, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ============ 2. RESET ============ */
*, *::before, *::after { box-sizing: border-box; }

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

body {
	margin: 0;
	min-height: 100vh;
	background: var(--era-bg);
	color: var(--era-text);
	font-family: var(--font-body);
	font-size: var(--fs-base);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

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

button {
	font: inherit;
	cursor: pointer;
}

a {
	color: var(--era-red);
	text-decoration: none;
	transition: color 150ms var(--ease-out);
}
a:hover { color: var(--era-red-dark); }

ul, ol { padding: 0; margin: 0; }

/* ============ 3. TIPOGRAFIJA ============ */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	margin: 0 0 0.5em;
	color: var(--era-text);
	line-height: 1.15;
	letter-spacing: -0.02em;
	/* Balanced line-breaks - sprječava "ERA-" / "e" u zasebnim retcima na zadnjem retku.
	   Browser sam raspoređuje riječi ravnomjerno. Podržano u svim modernim browserima. */
	text-wrap: balance;
}
/* Long-word fix - "ERA-e" se neće više lomiti unutar same riječi */
h1, h2, h3, .hero__title, .category-hero__title, .section__title {
	overflow-wrap: break-word;
	word-break: keep-all; /* hr ne dijeli riječi po crticama */
	hyphens: manual;
}
h1 { font-weight: 800; font-size: var(--fs-4xl); letter-spacing: -0.03em; }
h2 { font-weight: 700; font-size: var(--fs-3xl); }
h3 { font-weight: 700; font-size: var(--fs-2xl); }
h4 { font-weight: 600; font-size: var(--fs-xl); }
h5 { font-weight: 600; font-size: var(--fs-lg); }
h6 { font-weight: 600; font-size: var(--fs-base); }

p { margin: 0 0 1em; }
strong, b { font-weight: 600; }

.eyebrow {
	display: inline-block;
	font-family: var(--font-heading);
	font-size: var(--fs-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--era-red);
	margin-bottom: 0.75rem;
}

.muted { color: var(--era-muted); }

/* ============ 4. LAYOUT ============ */
.container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad);
}

.cards-grid {
	display: grid;
	gap: clamp(1rem, 2vw, 1.5rem);
	grid-template-columns: 1fr;
}
/* Default (bez modifier-a) - bazna pravila prvo, modifier-i NAKON da override-aju */
@media (min-width: 640px) {
	.cards-grid    { grid-template-columns: repeat(2, 1fr); }
	.cards-grid--3 { grid-template-columns: repeat(2, 1fr); }
	.cards-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
	.cards-grid    { grid-template-columns: repeat(3, 1fr); }
	.cards-grid--3 { grid-template-columns: repeat(3, 1fr); }
	.cards-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.section {
	padding-block: clamp(3rem, 6vw, 6rem);
}
.section--news { background: var(--era-bg-soft); }

.section__header {
	max-width: 720px;
	margin-bottom: clamp(2rem, 4vw, 3rem);
}
.section__title {
	font-size: var(--fs-3xl);
	margin: 0;
}

/* Modifier - accent bar iznad naslova (zlato→crveno + shimmer) */
.section__title--accent {
	position: relative;
	padding-top: 1.25rem;
}
.section__title--accent::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 56px;
	height: 4px;
	background: linear-gradient(90deg, #deaa25 0%, #E30613 100%);
	border-radius: 99px;
	overflow: hidden;
}
.section__title--accent::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 56px;
	height: 4px;
	border-radius: 99px;
	background: linear-gradient(90deg, transparent 0%, rgb(255 255 255 / 80%) 50%, transparent 100%);
	-webkit-mask-image: linear-gradient(90deg, #000, #000);
	mask-image: linear-gradient(90deg, #000, #000);
	animation: era-accent-shimmer 2.8s ease-in-out infinite;
	transform: translateX(-100%);
	pointer-events: none;
}
@keyframes era-accent-shimmer {
	0%   { transform: translateX(-100%); }
	60%  { transform: translateX(100%); }
	100% { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
	.section__title--accent::after { animation: none; opacity: 0; }
}
.section__lead {
	margin-top: 0.625rem;
	color: var(--era-muted);
	max-width: 60ch;
	line-height: 1.55;
}
.section__cta-row {
	margin-top: clamp(2rem, 4vw, 3rem);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
}

/* Section header u row layoutu (heading lijevo + akcija desno) */
.section__header--row {
	max-width: 100%;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.25rem;
	flex-wrap: wrap;
}
.section__header--row > div:first-child {
	min-width: 280px;
	flex: 1 1 480px;
}
.section__filters {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}
.section__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.625rem 1rem;
	color: var(--era-text);
	background: var(--era-bg-soft);
	border: 1px solid var(--era-line);
	border-radius: var(--radius-pill);
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: var(--fs-sm);
	text-decoration: none;
	transition: all 200ms var(--ease-out);
}
.section__link:hover {
	background: var(--era-text);
	color: #fff;
	border-color: var(--era-text);
	transform: translateX(2px);
}

/* Chips - inline pill linkovi */
.chip {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.875rem;
	background: var(--era-bg);
	color: var(--era-text);
	border: 1px solid var(--era-line);
	border-radius: var(--radius-pill);
	font-family: var(--font-heading);
	font-size: var(--fs-sm);
	font-weight: 600;
	text-decoration: none;
	transition: all 150ms var(--ease-out);
}
.chip:hover {
	background: var(--era-red);
	color: #fff;
	border-color: var(--era-red);
}
.chip__count {
	display: inline-flex;
	align-items: center;
	padding: 0.05rem 0.5rem;
	background: var(--era-bg-soft);
	color: var(--era-muted);
	border-radius: var(--radius-pill);
	font-size: var(--fs-xs);
	font-weight: 600;
}
.chip:hover .chip__count {
	background: rgb(255 255 255 / 22%);
	color: #fff;
}
.section__link .chip__count {
	background: rgb(0 0 0 / 8%);
}
.section__link:hover .chip__count {
	background: rgb(255 255 255 / 18%);
	color: #fff;
}

/* ============ 5. UTILITY ============ */
.sr-only {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.sr-only-focusable:focus,
.sr-only-focusable:focus-visible {
	position: fixed !important;
	top: 1rem; left: 1rem;
	width: auto; height: auto;
	padding: 0.75rem 1.25rem;
	margin: 0;
	overflow: visible;
	clip: auto;
	white-space: normal;
	background: var(--era-red);
	color: #fff;
	border-radius: var(--radius);
	z-index: 9999;
}

.skip-link {
	position: absolute;
	left: -10000px;
	top: auto;
	width: 1px; height: 1px;
}
.skip-link:focus {
	position: fixed;
	left: 1rem; top: 1rem;
	width: auto; height: auto;
	z-index: 9999;
	background: var(--era-red);
	color: #fff;
	padding: 0.75rem 1.25rem;
	border-radius: var(--radius);
}

.hidden-mobile { display: none; }
@media (min-width: 768px) { .hidden-mobile { display: list-item; } }

/* ============ 6. COMPONENTS ============ */
.btn {
	--btn-bg:  var(--era-red);
	--btn-fg:  #fff;
	--btn-bd:  var(--era-red);

	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.875rem 1.75rem;
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: var(--fs-base);
	letter-spacing: -0.01em;
	color: var(--btn-fg);
	background: var(--btn-bg);
	border: 1.5px solid var(--btn-bd);
	border-radius: var(--radius-pill);
	cursor: pointer;
	transition: transform 150ms var(--ease-out), background 150ms var(--ease-out), color 150ms var(--ease-out);
}
.btn:hover {
	background: var(--era-red-dark);
	border-color: var(--era-red-dark);
	color: #fff;
	transform: translateY(-1px);
}
.btn--ghost {
	--btn-bg: transparent;
	--btn-fg: var(--era-text);
	--btn-bd: var(--era-line);
}
.btn--ghost:hover {
	--btn-bg: var(--era-text);
	--btn-fg: #fff;
	--btn-bd: var(--era-text);
}
.btn--dark {
	--btn-bg: var(--era-deep);
	--btn-bd: var(--era-deep);
}

.badge {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.35rem 0.75rem;
	font-family: var(--font-heading);
	font-size: var(--fs-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	border-radius: var(--radius-pill);
	background: var(--era-bg-soft);
	color: var(--era-text);
}
.badge--category {
	background: var(--era-red);
	color: #fff;
}

/* CARD */
.card {
	background: var(--era-bg);
	border: 1px solid var(--era-line);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: transform 250ms var(--ease-out), box-shadow 250ms var(--ease-out), border-color 250ms var(--ease-out);
}
.card:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-lg);
	border-color: transparent;
}
.card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
}
.card__link:hover { color: inherit; }

/* Kartica — stretched link (post) + kontakt linkovi iznad click layera */
.card--stretched-link {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}
.card--stretched-link:is(.card--post, .projekt-card).card--media-overlay {
	container-type: inline-size;
	container-name: card-stretch;
}
.card--stretched-link .card__link {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: block;
	width: 100%;
	height: 100%;
	min-height: 0;
}
.card--stretched-link:is(.card--post, .projekt-card).card--media-overlay .card__link {
	z-index: 1;
}
.card--stretched-link .card__media {
	grid-column: 1;
	grid-row: 1;
	position: relative;
	z-index: 0;
	min-width: 0;
}
.card--stretched-link:is(.card--post, .projekt-card).card--media-overlay .card__media {
	z-index: 2;
	pointer-events: none;
}
.card--stretched-link .card__body {
	grid-column: 1;
	grid-row: 2;
	position: relative;
	z-index: 0;
}
.card--stretched-link .card__media > .card__contact-bar {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 3;
	width: 100%;
	pointer-events: none;
	--overlay-contact-link: #fff;
	--overlay-contact-link-hover: var(--era-post-link-accent, #deaa25);
}
.card--stretched-link .card__media > .card__contact-bar .post-media-overlay__chip-link {
	position: relative;
	z-index: 1;
	pointer-events: auto;
	cursor: pointer;
	color: var(--overlay-contact-link);
	text-decoration: none;
	transition: color 180ms var(--ease-out);
}
.card--stretched-link .card__media > .card__contact-bar .post-media-overlay__chip-link:hover,
.card--stretched-link .card__media > .card__contact-bar .post-media-overlay__chip-link:focus-visible {
	color: var(--overlay-contact-link-hover, #deaa25);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.card--stretched-link .card__media > .card__contact-bar .post-media-overlay__chip:has(.post-media-overlay__chip-link:hover) .post-media-overlay__chip-icon,
.card--stretched-link .card__media > .card__contact-bar .post-media-overlay__chip:has(.post-media-overlay__chip-link:focus-visible) .post-media-overlay__chip-icon {
	color: var(--overlay-contact-link-hover);
	transition: color 180ms var(--ease-out);
}
.card--stretched-link:is(.card--post, .projekt-card).card--media-overlay .card__media > .card__contact-bar {
	z-index: 3;
}

.card__media {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--era-bg-soft);
	container-type: inline-size;
	container-name: card-media;
}
:is(.card--post, .projekt-card).card--media-overlay .card__media {
	--card-media-edge: 0.875rem;
	--card-pill-h: 2rem;
	--card-logo-slot-w: 5.5rem;
	--card-logo-slot-h: var(--card-pill-h);
	aspect-ratio: 4 / 3;
	min-height: clamp(200px, 32vw, 280px);
	min-width: 0;
}

/* Header zona: badge lijevo + logo slot desno, uvijek unutar širine .card__media */
:is(.card--post, .projekt-card).card--media-overlay .card__media-header {
	position: absolute;
	top: var(--card-media-edge);
	right: var(--card-media-edge);
	left: var(--card-media-edge);
	width: calc(100% - 2 * var(--card-media-edge));
	max-width: calc(100% - 2 * var(--card-media-edge));
	min-width: 0;
	box-sizing: border-box;
	overflow: visible;
	z-index: 3;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 0.375rem;
	pointer-events: none;
}
:is(.card--post, .projekt-card).card--media-overlay .card__media-zone--category {
	flex: 1 1 0;
	min-width: 0;
	overflow: hidden;
}
:is(.card--post, .projekt-card).card--media-overlay .card__media-zone--category .card__category {
	position: static;
	top: auto;
	left: auto;
	z-index: auto;
	display: inline-block;
	max-width: 100%;
	box-sizing: border-box;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	vertical-align: top;
}
:is(.card--post, .projekt-card).card--media-overlay .card__media-zone--logo {
	flex: 0 1 var(--card-logo-slot-w);
	width: var(--card-logo-slot-w);
	min-width: 0;
	max-width: var(--card-logo-slot-w);
	margin-left: auto;
	position: relative;
	z-index: 1;
}
:is(.card--post, .projekt-card).card--media-overlay .card__logo-slot {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	height: var(--card-logo-slot-h);
	min-height: var(--card-logo-slot-h);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	padding: 0.15rem 0.25rem;
	border-radius: var(--radius-pill);
	background: rgb(255 255 255 / 94%);
	border: 1px solid rgb(255 255 255 / 85%);
	box-shadow: 0 4px 16px rgb(0 0 0 / 12%);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	pointer-events: none;
}
:is(.card--post, .projekt-card).card--media-overlay .card__logo-slot .post-media-overlay__logo-img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	object-position: center center;
}
.card__image, .card__placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	display: block;
	transition: transform 600ms var(--ease-out);
}
.card__placeholder {
	background: linear-gradient(135deg, var(--era-bg-soft), var(--era-line));
}
.card:hover .card__image,
.card:hover .card__media-inner .card__image { transform: scale(1.04); }

.card__category {
	position: absolute;
	top: 0.875rem;
	left: 0.875rem;
	z-index: 3;
	min-height: var(--card-pill-h, 2rem);
	padding: 0.3rem 0.625rem;
	box-sizing: border-box;
	font-family: var(--font-heading);
	font-size: var(--fs-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	background: var(--era-red);
	color: #fff;
	border-radius: var(--radius-pill);
	pointer-events: none;
}
/* Po-kategorija boje → inc/category-colors.php (dinamički inline CSS) */

.card__body {
	padding: 1.25rem 1.25rem 1.5rem;
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 0.75rem;
}
.card__title {
	font-size: var(--fs-lg);
	font-weight: 700;
	line-height: 1.3;
	margin: 0;
	color: var(--era-text);
	/* Max 3 retka, uvijek rezervira tu visinu da se kartice poravnaju */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: calc(1.3em * 3);
}
.card__excerpt {
	margin: 0;
	font-size: var(--fs-sm);
	color: var(--era-muted);
	line-height: 1.55;
	/* Max 2 retka, uvijek rezervira tu visinu */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: calc(1.55em * 2);
}
.card__meta {
	margin-top: auto;
	font-size: var(--fs-xs);
	color: var(--era-muted);
}

/* Card media — overlay layer */
.card__media-inner {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.card__media-inner .card__image {
	width: 100%;
	height: 100%;
	object-position: center center;
}
:is(.card--post, .projekt-card).card--media-overlay .card__media-inner > .card__image,
:is(.card--post, .projekt-card).card--media-overlay .card__media-inner > .card__placeholder {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	display: block;
}
.post-article__media-inner {
	position: relative;
	container-type: inline-size;
	container-name: card-media;
}

/* Overlay — kartice objava (gradient + strip kontakt) */
.post-media-overlay {
	--overlay-pad: clamp(0.55rem, 2.5cqi, 0.9rem);
	--overlay-font: clamp(0.8125rem, 3cqi, 0.9375rem);
	--overlay-icon: clamp(15px, 3.6cqi, 18px);
	--overlay-deep: 14 17 36;
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
}
.post-media-overlay--compact {
	--overlay-font: clamp(0.78125rem, 2.85cqi, 0.875rem);
}
.post-media-overlay--grid {
	--overlay-font: clamp(0.8125rem, 2.9cqi, 0.9375rem);
}
.post-media-overlay--comfortable {
	--overlay-font: clamp(0.875rem, 2.6cqi, 1rem);
}

/* Donji gradient — tamnoplavi (--era-deep), smooth fade */
.post-media-overlay__gradient,
.post-media-overlay__shade {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(
		180deg,
		rgb(var(--overlay-deep) / 0%) 0%,
		rgb(var(--overlay-deep) / 0%) 28%,
		rgb(var(--overlay-deep) / 22%) 52%,
		rgb(var(--overlay-deep) / 58%) 72%,
		rgb(var(--overlay-deep) / 88%) 100%
	);
	transition: opacity 280ms var(--ease-out);
}
.is-light-image .post-media-overlay__gradient,
.is-light-image .post-media-overlay__shade {
	background: linear-gradient(
		180deg,
		rgb(var(--overlay-deep) / 0%) 0%,
		rgb(var(--overlay-deep) / 8%) 22%,
		rgb(var(--overlay-deep) / 38%) 48%,
		rgb(var(--overlay-deep) / 72%) 70%,
		rgb(var(--overlay-deep) / 94%) 100%
	);
}
.is-dark-image .post-media-overlay__gradient,
.is-dark-image .post-media-overlay__shade {
	background: linear-gradient(
		180deg,
		rgb(var(--overlay-deep) / 0%) 0%,
		rgb(var(--overlay-deep) / 0%) 32%,
		rgb(var(--overlay-deep) / 28%) 55%,
		rgb(var(--overlay-deep) / 65%) 75%,
		rgb(var(--overlay-deep) / 92%) 100%
	);
}
.card:hover .post-media-overlay--has-contact .post-media-overlay__gradient {
	opacity: 1;
}

/* Single hero — logo u gornjem desnom kutu (fiksni slot, ne % overlay širine) */
.post-media-overlay--single-media .post-media-overlay__logo {
	position: absolute;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	max-width: var(--overlay-logo-max-w, clamp(72px, 10vw, 120px));
	height: auto;
	max-height: var(--overlay-logo-max-h, clamp(28px, 4vw, 48px));
	padding: 0.3rem 0.5rem;
	border-radius: var(--radius-pill);
	background: rgb(255 255 255 / 94%);
	border: 1px solid rgb(255 255 255 / 85%);
	box-shadow: 0 4px 16px rgb(0 0 0 / 12%);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	box-sizing: border-box;
	overflow: hidden;
	pointer-events: none;
}
.post-media-overlay--single-media .post-media-overlay__logo-img {
	display: block;
	width: auto;
	height: auto;
	max-width: var(--overlay-logo-max-w, clamp(72px, 10vw, 120px));
	max-height: var(--overlay-logo-max-h, clamp(28px, 4vw, 48px));
	object-fit: contain;
	object-position: center center;
}

/* Kontakt strip — dolje, bez boxa */
.post-media-overlay__footer {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	padding: clamp(2.25rem, 18cqi, 3.25rem) var(--overlay-pad) var(--overlay-pad);
	pointer-events: auto;
}
.card--stretched-link .card__media > .card__contact-bar.post-media-overlay__footer {
	padding: clamp(2.25rem, 18cqi, 3.25rem) var(--overlay-pad) var(--overlay-pad);
	pointer-events: none;
}
.card--stretched-link .card__media > .card__contact-bar.post-media-overlay--compact {
	--overlay-pad: clamp(0.55rem, 2.5cqi, 0.9rem);
	--overlay-font: clamp(0.78125rem, 2.85cqi, 0.875rem);
	--overlay-icon: clamp(14px, 3.2cqi, 17px);
}
.card--stretched-link .card__media > .card__contact-bar.post-media-overlay--grid {
	--overlay-pad: clamp(0.55rem, 2.5cqi, 0.9rem);
	--overlay-font: clamp(0.8125rem, 2.9cqi, 0.9375rem);
	--overlay-icon: clamp(15px, 3.6cqi, 18px);
}
.card--stretched-link .card__media > .card__contact-bar.post-media-overlay--comfortable {
	--overlay-pad: clamp(0.55rem, 2.5cqi, 0.9rem);
	--overlay-font: clamp(0.875rem, 2.6cqi, 1rem);
	--overlay-icon: clamp(16px, 3.8cqi, 19px);
}
.post-media-overlay__strip {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.45em;
	width: 100%;
	font-family: var(--font-body);
	font-size: var(--overlay-font);
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.01em;
	color: rgb(255 255 255 / 97%);
	text-shadow: 0 1px 3px rgb(var(--overlay-deep) / 40%);
}
.post-media-overlay__row--inline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35em 0.15em;
	width: 100%;
}
.post-media-overlay__row--address {
	width: 100%;
}
.post-media-overlay__chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	min-width: 0;
}
.post-media-overlay__chip--address {
	display: flex;
	align-items: flex-start;
	width: 100%;
	gap: 0.45em;
}
.post-media-overlay__chip-icon {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	margin-top: 0.1em;
	color: rgb(255 255 255 / 90%);
}
.post-media-overlay__chip--address .post-media-overlay__chip-icon {
	margin-top: 0.15em;
}
.post-media-overlay__chip-icon svg {
	display: block;
	width: var(--overlay-icon);
	height: var(--overlay-icon);
}
.post-media-overlay__row--inline .post-media-overlay__chip-text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: min(100%, 20ch);
}
.post-media-overlay__chip--address .post-media-overlay__chip-text {
	flex: 1;
	min-width: 0;
	overflow: visible;
	text-overflow: unset;
	white-space: normal;
	word-break: break-word;
	max-width: none;
	line-height: 1.45;
}
.post-media-overlay__chip-link {
	cursor: pointer;
	color: #fff;
	text-decoration: none;
	transition: color 180ms var(--ease-out);
}
.post-media-overlay__chip-link:hover,
.post-media-overlay__chip-link:focus-visible {
	color: var(--era-post-link-accent, #deaa25);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.post-media-overlay__chip:has(.post-media-overlay__chip-link:hover) .post-media-overlay__chip-icon,
.post-media-overlay__chip:has(.post-media-overlay__chip-link:focus-visible) .post-media-overlay__chip-icon {
	color: var(--era-post-link-accent, #deaa25);
	transition: color 180ms var(--ease-out);
}
.post-media-overlay__sep {
	flex-shrink: 0;
	padding: 0 0.2em;
	color: rgb(255 255 255 / 52%);
	font-size: 0.85em;
	font-weight: 400;
	user-select: none;
}

/* Kontakt strip — responsive: uži red → stack, adresa uvijek vidljiva */
.post-media-overlay__row--address {
	display: flex;
}

/* Uska kartica / mobil: kontakt u stupcu (email, telefon, adresa) */
@media (max-width: 639px) {
	.card--stretched-link:is(.card--post, .projekt-card).card--media-overlay .card__media > .card__contact-bar .post-media-overlay__row--inline {
		flex-direction: column;
		align-items: flex-start;
		flex-wrap: nowrap;
		gap: 0.2em;
		width: 100%;
	}

	.card--stretched-link:is(.card--post, .projekt-card).card--media-overlay .card__media > .card__contact-bar .post-media-overlay__sep {
		display: none;
	}

	.card--stretched-link:is(.card--post, .projekt-card).card--media-overlay .card__media > .card__contact-bar .post-media-overlay__row--inline .post-media-overlay__chip {
		display: flex;
		width: 100%;
		max-width: 100%;
	}

	.card--stretched-link:is(.card--post, .projekt-card).card--media-overlay .card__media > .card__contact-bar .post-media-overlay__row--inline .post-media-overlay__chip-text {
		flex: 1;
		min-width: 0;
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}

@supports (container-type: inline-size) {
	/* Category @1024 (~3 kolone): kontakt u stupcu */
	@container card-stretch (max-width: 20rem) {
		.card--stretched-link:is(.card--post, .projekt-card).card--media-overlay .card__media > .card__contact-bar .post-media-overlay__row--inline {
			flex-direction: column;
			align-items: flex-start;
			flex-wrap: nowrap;
			gap: 0.2em;
			width: 100%;
		}

		.card--stretched-link:is(.card--post, .projekt-card).card--media-overlay .card__media > .card__contact-bar .post-media-overlay__sep {
			display: none;
		}

		.card--stretched-link:is(.card--post, .projekt-card).card--media-overlay .card__media > .card__contact-bar .post-media-overlay__row--inline .post-media-overlay__chip {
			display: flex;
			width: 100%;
			max-width: 100%;
		}

		.card--stretched-link:is(.card--post, .projekt-card).card--media-overlay .card__media > .card__contact-bar .post-media-overlay__row--inline .post-media-overlay__chip-text {
			flex: 1;
			min-width: 0;
			max-width: 100%;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}
}

/* Desktop — fiksni slotovi po gridu (bez cqi) */
@media (min-width: 1024px) {
	:is(.card--post, .projekt-card).card--media-overlay .card__media {
		--card-media-edge: 0.625rem;
		--card-pill-h: 1.875rem;
		/* min-height: clamp(200px, 32vw, 280px); */
		min-height: unset;
	}

	.cards-grid--4 :is(.card--post, .projekt-card).card--media-overlay .card__media {
		--card-logo-slot-w: 5.25rem;
		--card-logo-slot-h: var(--card-pill-h);
	}

	.cards-grid--3 :is(.card--post, .projekt-card).card--media-overlay .card__media,
	.projekt-grid :is(.card--post, .projekt-card).card--media-overlay .card__media {
		--card-logo-slot-w: 5.5rem;
		--card-logo-slot-h: var(--card-pill-h);
	}

	.cards-grid--4 :is(.card--post, .projekt-card).card--media-overlay .card__media-header,
	.cards-grid--3 :is(.card--post, .projekt-card).card--media-overlay .card__media-header,
	.projekt-grid :is(.card--post, .projekt-card).card--media-overlay .card__media-header {
		gap: 0.375rem;
	}

	.cards-grid--4 .card--media-overlay .post-media-overlay--compact,
	.cards-grid--4 .card--stretched-link .card__media > .card__contact-bar.post-media-overlay--compact {
		--overlay-pad: clamp(0.45rem, 2cqi, 0.7rem);
		--overlay-font: clamp(0.6875rem, 2.4cqi, 0.8125rem);
		--overlay-icon: clamp(12px, 2.8cqi, 15px);
	}

	.cards-grid--4 .card--stretched-link .card__media > .card__contact-bar.post-media-overlay--compact {
		padding: clamp(1.15rem, 9cqi, 1.85rem) var(--overlay-pad) var(--overlay-pad);
	}
}

@media (min-width: 1440px) {
	.cards-grid--4 :is(.card--post, .projekt-card).card--media-overlay .card__media,
	.projekt-grid :is(.card--post, .projekt-card).card--media-overlay .card__media {
		--card-logo-slot-w: 5.25rem;
		--card-pill-h: 2rem;
	}
}

@supports (container-type: inline-size) {
	@container card-stretch (max-width: 17.5rem) {
		.card--stretched-link:is(.card--post, .projekt-card).card--media-overlay .card__media > .card__contact-bar .post-media-overlay__strip {
			gap: 0.25em;
		}
	}
}
@container card-media (min-width: 400px) {
	.post-media-overlay--comfortable .post-media-overlay__row--inline .post-media-overlay__chip-text {
		max-width: min(100%, 24ch);
	}
	.post-media-overlay--comfortable .post-media-overlay__strip {
		gap: 0.5em;
	}
}

/* Single post — hero slika + info bar ispod (flow, ne overlay) */
.post-article__hero-block {
	display: flex;
	flex-direction: column;
}
.post-article__media-inner {
	position: relative;
	display: block;
	container-type: inline-size;
	container-name: card-media;
}
.post-article__hero-block:has(.post-media-overlay__footer--below-hero) .post-article__media-inner::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	height: clamp(2rem, 8%, 3.5rem);
	pointer-events: none;
	background: linear-gradient(180deg, rgb(14 17 36 / 0%) 0%, rgb(14 17 36 / 28%) 100%);
}
.post-media-overlay--single-media {
	--overlay-pad: clamp(0.875rem, 2vw, 1.25rem);
	--overlay-logo-max-w: clamp(72px, 10vw, 120px);
	--overlay-logo-max-h: clamp(28px, 4vw, 48px);
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
}
:is(.card--post, .projekt-card).card--media-overlay .card__media,
.post-article__hero-block {
	--card-media-edge: 0.875rem;
}
.post-media-overlay--single-media .post-media-overlay__category {
	position: absolute;
	top: var(--card-media-edge, 0.875rem);
	left: var(--card-media-edge, 0.875rem);
	z-index: 4;
	pointer-events: none;
}
.post-media-overlay--single-media .post-media-overlay__logo {
	top: var(--card-media-edge, 0.875rem);
	right: var(--card-media-edge, 0.875rem);
	left: auto;
	bottom: auto;
	z-index: 4;
}
.post-media-overlay__footer--below-hero {
	position: static;
	width: 100%;
	margin: 0;
	padding: 0;
	pointer-events: auto;
}
.post-media-overlay__footer--below-hero .post-media-overlay__infobar {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	width: 100%;
	padding: clamp(0.9rem, 2vw, 1.2rem) clamp(1rem, 2.5vw, 1.4rem);
	background: rgb(var(--overlay-deep, 14 17 36) / 96%);
	border-top: 1px solid rgb(255 255 255 / 10%);
	box-shadow: inset 0 1px 0 rgb(255 255 255 / 6%);
	color: rgb(255 255 255 / 97%);
	font-family: var(--font-body);
	font-size: clamp(0.875rem, 1vw, 1rem);
	font-weight: 600;
	line-height: 1.5;
}
.post-media-overlay__footer--below-hero .post-media-overlay__chip-icon {
	margin-top: 0;
	color: rgb(255 255 255 / 88%);
}
.post-media-overlay__footer--below-hero .post-media-overlay__chip-link {
	color: #fff;
	text-decoration: none;
	transition: color 180ms var(--ease-out);
}
.post-media-overlay__footer--below-hero .post-media-overlay__chip-link:hover,
.post-media-overlay__footer--below-hero .post-media-overlay__chip-link:focus-visible {
	color: var(--era-post-link-accent, #deaa25);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.post-media-overlay__footer--below-hero .post-media-overlay__chip:has(.post-media-overlay__chip-link:hover) .post-media-overlay__chip-icon,
.post-media-overlay__footer--below-hero .post-media-overlay__chip:has(.post-media-overlay__chip-link:focus-visible) .post-media-overlay__chip-icon {
	color: var(--era-post-link-accent, #deaa25);
	transition: color 180ms var(--ease-out);
}
@media (min-width: 768px) {
	.post-media-overlay__footer--below-hero .post-media-overlay__infobar {
		justify-content: space-between;
		gap: 1rem 1.5rem;
		overflow: visible;
	}
	.post-media-overlay__footer--below-hero .post-media-overlay__chip {
		display: inline-flex;
		flex: 1 1 0;
		align-items: center;
		justify-content: center;
		gap: 0.4em;
		min-width: 0;
		width: auto;
		max-width: 100%;
	}
	.post-media-overlay__footer--below-hero .post-media-overlay__chip--address {
		display: inline-flex;
		flex: 1 1 0;
		align-items: center;
		width: auto;
	}
	.post-media-overlay__footer--below-hero .post-media-overlay__chip--address .post-media-overlay__chip-icon {
		margin-top: 0;
		flex-shrink: 0;
	}
	.post-media-overlay__footer--below-hero .post-media-overlay__chip--address .post-media-overlay__chip-text {
		flex: 0 1 auto;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		word-break: normal;
		max-width: 100%;
		line-height: 1.5;
	}
	.post-media-overlay__footer--below-hero .post-media-overlay__chip-text {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		max-width: 100%;
		word-break: normal;
	}
	.post-media-overlay__footer--below-hero .post-media-overlay__sep {
		display: inline-flex;
		flex: 0 0 auto;
		align-items: center;
		align-self: center;
		justify-content: center;
		padding: 0 0.625rem;
		margin: 0;
		line-height: 1;
		font-size: 0.9em;
		color: rgb(255 255 255 / 45%);
	}
}
@media (max-width: 767px) {
	.post-media-overlay__footer--below-hero .post-media-overlay__infobar {
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: flex-start;
		gap: 0.65em;
		padding: clamp(1rem, 3.5vw, 1.2rem) clamp(1rem, 4vw, 1.3rem);
	}
	.post-media-overlay__footer--below-hero .post-media-overlay__sep {
		display: none;
	}
	.post-media-overlay__footer--below-hero .post-media-overlay__chip {
		display: inline-flex;
		width: 100%;
		flex: 0 0 auto;
		align-items: center;
		min-width: 0;
	}
	.post-media-overlay__footer--below-hero .post-media-overlay__chip--address {
		display: inline-flex;
		width: 100%;
		align-items: flex-start;
	}
	.post-media-overlay__footer--below-hero .post-media-overlay__chip--address .post-media-overlay__chip-text {
		flex: 1;
		min-width: 0;
		overflow: visible;
		text-overflow: unset;
		white-space: normal;
		word-break: break-word;
		max-width: none;
	}
	.post-media-overlay__footer--below-hero .post-media-overlay__chip-text {
		white-space: normal;
		word-break: break-word;
	}
}

/* SEARCH FORM */
.search-form {
	display: flex;
	gap: 0.5rem;
	max-width: 480px;
	margin-block: 1rem;
}
.search-form__input {
	flex: 1;
	padding: 0.75rem 1.125rem;
	font: inherit;
	color: var(--era-text);
	background: var(--era-bg);
	border: 1.5px solid var(--era-line);
	border-radius: var(--radius-pill);
	transition: border-color 150ms var(--ease-out);
}
.search-form__input:focus {
	outline: none;
	border-color: var(--era-red);
}
.search-form__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	aspect-ratio: 1;
	color: #fff;
	background: var(--era-text);
	border: none;
	border-radius: 999px;
	transition: background 150ms var(--ease-out);
}
.search-form__submit:hover { background: var(--era-red); }

/* PAGINATION */
.pagination, .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.375rem;
	margin-top: 3rem;
}
.pagination .page-numbers,
.nav-links .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	padding: 0.5rem 0.875rem;
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: var(--fs-sm);
	color: var(--era-text);
	background: var(--era-bg);
	border: 1px solid var(--era-line);
	border-radius: var(--radius-pill);
	transition: all 150ms var(--ease-out);
}
.pagination .page-numbers:hover,
.nav-links .page-numbers:hover {
	background: var(--era-red);
	color: #fff;
	border-color: var(--era-red);
}
.pagination .current,
.nav-links .current {
	background: var(--era-text);
	color: #fff;
	border-color: var(--era-text);
}

/* ============ 7. TOPBAR ============ */
.topbar {
	background: var(--era-deep);
	color: rgb(255 255 255 / 80%);
	font-size: var(--fs-xs);
	border-bottom: 1px solid rgb(255 255 255 / 6%);
}
.topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: var(--topbar-h);
}
.topbar__contact,
.topbar__utility {
	display: flex;
	align-items: center;
	gap: 0;
	list-style: none;
	flex-wrap: wrap;
	margin: 0;
}
/* Vertikalni separator između stavki - delikatniji od pipe znaka */
.topbar__contact > li + li,
.topbar__utility > li + li {
	border-left: 1px solid rgb(255 255 255 / 12%);
}
.topbar__link,
.topbar__meta,
.topbar__icon {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.875rem;
	color: rgb(255 255 255 / 75%);
	text-decoration: none;
	font-weight: 500;
	letter-spacing: 0.005em;
	transition: color 150ms var(--ease-out), background 150ms var(--ease-out);
}
.topbar__link:hover,
.topbar__icon:hover {
	color: var(--era-cyan);
	background: rgb(255 255 255 / 4%);
}
.topbar__icon { padding-inline: 0.625rem; }
.topbar__icon svg { transition: transform 200ms var(--ease-out); }
.topbar__icon:hover svg { transform: scale(1.1); }

/* Manji external link arrow */
.topbar__utility svg[viewBox="0 0 12 12"] {
	opacity: 0.6;
	transition: opacity 150ms var(--ease-out);
}
.topbar__utility a:hover svg[viewBox="0 0 12 12"] {
	opacity: 1;
}

@media (max-width: 1024px) {
	.topbar__inner { font-size: var(--fs-xs); }
	.topbar__contact li:nth-child(n+3) { display: none; }
	.topbar__utility li:not(:last-child) { display: none; } /* ostavi samo FB ikonu */
}
@media (max-width: 540px) {
	.topbar { display: none; } /* na vrlo malim ekranima skrij topbar - nudi se u footeru */
	/* Kad topbar nestane, sruši --topbar-h na 0 da header sjedne na vrh,
	   a hero padding/min-height ne računa fantomskih 40px. */
	:root { --topbar-h: 0px; }
	/* Kompaktniji header na mobilu (logo + hamburger ne trebaju 80px). */
	:root { --header-h: 64px; }
}

/* ============ 8. SITE HEADER ============ */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--era-bg);
	border-bottom: 1px solid var(--era-line);
	transition: box-shadow 200ms var(--ease-out), background 250ms var(--ease-out), border-color 250ms var(--ease-out);
}
.site-header.is-scrolled {
	box-shadow: var(--shadow);
}

/* === OVERLAY MODE - hero stranice (frontpage i sl.) ===
   Topbar + header lebde nad hero sekcijom (transparent, svijetli text).
   Pri scrollu: topbar nestaje, header postaje solid bijeli i fiksni na vrh. */

body.has-overlay-header {
	/* Topbar i header su out-of-flow, hero kreće od top: 0 */
}

body.has-overlay-header .topbar {
	position: absolute;
	top: 0; left: 0; right: 0;
	z-index: 100;
	background: rgb(14 17 36 / 60%);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-bottom-color: rgb(255 255 255 / 8%);
	transition: transform 300ms var(--ease-out), opacity 250ms var(--ease-out);
}

body.has-overlay-header .site-header {
	position: absolute;
	top: var(--topbar-h);
	left: 0; right: 0;
	z-index: 99;
	background: transparent;
	border-bottom-color: transparent;
	box-shadow: none;
}

/* Header u overlay modu - svijetli text/logo (samo top-level nav, ne submenu!).
   SAMO desktop — mobile nav je fullscreen tamni overlay s vlastitim svjetlim tekstom. */
@media (min-width: 1024px) {
	body.has-overlay-header:not(.is-scrolled) .site-header .nav__list > .nav__item > .nav__link { color: #fff; }
	body.has-overlay-header:not(.is-scrolled) .site-header .nav__list > .nav__item > .nav__link:hover { color: var(--era-cyan); }
	body.has-overlay-header:not(.is-scrolled) .site-header .nav__list > .nav__item > .nav__submenu-toggle .nav__chevron { color: #fff; }
	body.has-overlay-header:not(.is-scrolled) .site-header .site-header__toggle {
		border-color: rgb(255 255 255 / 30%);
	}
	body.has-overlay-header:not(.is-scrolled) .site-header .site-header__toggle-bar {
		background: #fff;
	}

	/* Submenu u overlay modu uvijek ima svoju shemu (svjetla pozadina, tamni text) */
	body.has-overlay-header:not(.is-scrolled) .site-header .nav__submenu .nav__link {
		color: var(--era-text);
	}
	body.has-overlay-header:not(.is-scrolled) .site-header .nav__submenu .nav__link:hover {
		color: var(--era-red);
		background: var(--era-bg-soft);
	}
	body.has-overlay-header:not(.is-scrolled) .site-header .nav__submenu .nav__chevron {
		color: var(--era-muted);
	}
}

/* === SCROLLED STATE u overlay modu ===
   Topbar slide-up, header postaje fixed solid bijeli na vrh. */
body.has-overlay-header.is-scrolled .topbar {
	transform: translateY(-100%);
	opacity: 0;
	pointer-events: none;
}
body.has-overlay-header.is-scrolled .site-header {
	position: fixed;
	top: 0;
	background: var(--era-bg);
	border-bottom-color: var(--era-line);
	box-shadow: var(--shadow);
	animation: era-slide-down 280ms var(--ease-out);
}

@keyframes era-slide-down {
	from { transform: translateY(-100%); }
	to   { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	body.has-overlay-header.is-scrolled .site-header { animation: none; }
}
.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	min-height: var(--header-h);
}

.site-header__brand .logo,
.site-footer__brand .logo { display: block; }

/* Header — dual logo swap (Site Identity + sticky_logo) */
.site-header__brand .logo--has-sticky {
	display: block;
	line-height: 0;
}
.site-header__brand .logo--has-sticky .logo__default,
.site-header__brand .logo--has-sticky .logo__sticky {
	display: block;
	width: auto;
	height: auto;
	max-height: calc(var(--header-h) - 24px);
	max-width: min(240px, 45vw);
}
.site-header:not(.is-scrolled) .logo--has-sticky .logo__sticky {
	display: none;
}
.site-header:not(.is-scrolled) .logo--has-sticky .logo__default {
	display: block;
}
.site-header.is-scrolled .logo--has-sticky .logo__default {
	display: none;
}
.site-header.is-scrolled .logo--has-sticky .logo__sticky {
	display: block;
}

.logo-svg {
	width: clamp(160px, 20vw, 230px);
	height: auto;
}
.logo-svg__star, .logo-svg__arrow { fill: var(--era-red); }
.logo-svg__title { fill: var(--era-red); }
.logo-svg__sub   { fill: var(--era-text); }

/* footer logo varijanta na tamnoj pozadini */
.site-footer .logo-svg__sub { fill: rgb(255 255 255 / 70%); }

/* NAV (primary) */
.nav__list {
	display: flex;
	align-items: center;
	gap: clamp(0.5rem, 1.5vw, 1.75rem);
	list-style: none;
}
.nav__item { position: relative; }
.nav__link {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 1.25rem 0.25rem;
	font-family: var(--font-heading);
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--era-text);
	white-space: nowrap;
	transition: color 150ms var(--ease-out);
}
.nav__link::after {
	content: '';
	position: absolute;
	left: 0; right: 0; bottom: -1px;
	height: 2px;
	background: var(--era-red);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 200ms var(--ease-out);
}
.nav__link:hover { color: var(--era-red); }
.nav__item.is-current > .nav__link,
.nav__link:hover { color: var(--era-red); }
.nav__item.is-current > .nav__link::after,
.nav__link:hover::after { transform: scaleX(1); }

.nav__chevron { transition: transform 200ms var(--ease-out); }
.nav__submenu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	margin: 0;
	border: none;
	background: transparent;
	color: inherit;
	font: inherit;
	line-height: 1;
	cursor: pointer;
}
@media (min-width: 1024px) {
	.nav__item--has-children { display: inline-flex; align-items: center; gap: 0.125rem; }
	.nav__list > .nav__item--has-children > .nav__submenu-toggle {
		pointer-events: none;
		cursor: default;
		flex-shrink: 0;
		margin-left: 0;
		padding: 1.25rem 0;
		color: var(--era-text);
	}
	.nav__list > .nav__item--has-children > .nav__submenu-toggle .nav__chevron {
		display: inline-flex;
		flex-shrink: 0;
		width: 14px;
		height: 14px;
		color: currentColor;
	}
	.nav__list > .nav__item--has-children > .nav__submenu-toggle .nav__chevron svg {
		width: 14px;
		height: 14px;
	}
	.nav__item--has-children:hover > .nav__submenu-toggle { color: var(--era-red); }
	.nav__item--has-children:hover .nav__chevron { transform: rotate(180deg); }
}

/* Submenu (dropdown) */
.nav__submenu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 240px;
	background: var(--era-bg);
	border: 1px solid var(--era-line);
	border-radius: var(--radius);
	box-shadow: var(--shadow-lg);
	list-style: none;
	padding: 0.5rem;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out), visibility 0s linear 200ms;
	z-index: 110;
}
.nav__item--has-children:hover > .nav__submenu,
.nav__item--has-children:focus-within > .nav__submenu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition-delay: 0s;
}
.nav__submenu .nav__link {
	display: flex;
	width: 100%;
	padding: 0.625rem 0.875rem;
	border-radius: var(--radius-sm);
}
.nav__submenu .nav__link::after { display: none; }
.nav__submenu .nav__link:hover {
	background: var(--era-bg-soft);
	color: var(--era-red);
}
.nav__submenu .nav__submenu {
	top: 0;
	left: 100%;
	margin-left: 4px;
}

/* MOBILE TOGGLE */
.site-header__toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px; height: 44px;
	padding: 10px;
	background: transparent;
	border: 1.5px solid var(--era-line);
	border-radius: var(--radius);
}
.site-header__toggle-bar {
	width: 100%;
	height: 2px;
	background: var(--era-text);
	transition: transform 200ms var(--ease-out), opacity 200ms var(--ease-out);
}
.site-header__toggle[aria-expanded="true"] .site-header__toggle-bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}
.site-header__toggle[aria-expanded="true"] .site-header__toggle-bar:nth-child(2) {
	opacity: 0;
}
.site-header__toggle[aria-expanded="true"] .site-header__toggle-bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* ============ MOBILE NAV — premium fullscreen overlay ============ */
@media (max-width: 1023px) {

	:root {
		--nav-footer-h: 17rem; /* visina apsolutnog footera u mobile nav-u (3 contact + fb btn) */
	}

	/* === Hamburger toggle — minimalan, samo bars (bez box/borda) ===
	   Boja se prilagođava kontekstu (overlay → bijela, scrolled → tamna). */
	.site-header__toggle {
		display: inline-flex;
		position: relative;
		z-index: 120;
		width: 44px; height: 44px;
		padding: 12px 9px;
		background: transparent;
		border: none;
		border-radius: 0;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		transition: transform 200ms var(--ease-out);
	}
	.site-header__toggle:active { transform: scale(0.92); }
	.site-header__toggle-bar {
		width: 100%; height: 2px;
		background: var(--era-text);
		border-radius: 2px;
		transform-origin: center;
		transition: transform 320ms var(--ease-out), opacity 200ms var(--ease-out), background 200ms var(--ease-out);
	}
	/* Open state — uvijek bijele bars (na deep nav backgroundu) */
	.site-header__toggle[aria-expanded="true"] .site-header__toggle-bar { background: #fff; }
	.site-header__toggle[aria-expanded="true"] .site-header__toggle-bar:nth-child(1) {
		transform: translateY(7px) rotate(45deg);
	}
	.site-header__toggle[aria-expanded="true"] .site-header__toggle-bar:nth-child(2) {
		opacity: 0;
		transform: scaleX(0);
	}
	.site-header__toggle[aria-expanded="true"] .site-header__toggle-bar:nth-child(3) {
		transform: translateY(-7px) rotate(-45deg);
	}
	/* Hero overlay (header lebdi nad tamnom hero pozadinom) → bijele bars */
	body.has-overlay-header:not(.is-scrolled) .site-header__toggle-bar {
		background: #fff;
	}

	/* === Fullscreen nav panel === */
	.nav--primary {
		position: fixed;
		inset: 0;
		display: flex;
		flex-direction: column;
		background:
			radial-gradient(ellipse 80% 60% at 100% 100%, rgb(99 102 241 / 18%) 0%, transparent 60%),
			radial-gradient(ellipse 90% 70% at 0% 0%, rgb(192 132 252 / 14%) 0%, transparent 55%),
			linear-gradient(180deg, #0E1124 0%, #14182f 60%, #0a0d1c 100%);
		color: #fff;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-12px) scale(0.985);
		transform-origin: top center;
		transition: opacity 320ms var(--ease-out), transform 380ms var(--ease-out), visibility 0s linear 380ms;
		z-index: 115;
		overflow: hidden;
	}
	.nav--primary.is-open {
		opacity: 1;
		visibility: visible;
		transform: translateY(0) scale(1);
		transition: opacity 280ms var(--ease-out), transform 420ms cubic-bezier(0.22, 1.2, 0.36, 1), visibility 0s linear 0s;
	}

	/* === Brand background (SVG gradijent + watermark) === */
	.nav__bg {
		position: absolute;
		inset: 0;
		pointer-events: none;
		overflow: hidden;
	}
	.nav__bg-svg {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
		transition: opacity 700ms var(--ease-out) 100ms;
	}
	.nav--primary.is-open .nav__bg-svg {
		opacity: 1;
		animation: nav-hue 28s linear infinite;
	}
	@keyframes nav-hue {
		0%   { filter: hue-rotate(0deg); }
		100% { filter: hue-rotate(360deg); }
	}
	.nav__bg-watermark {
		position: absolute;
		right: -8%;
		bottom: -6%;
		font-family: var(--font-heading);
		font-size: clamp(14rem, 50vw, 22rem);
		font-weight: 800;
		letter-spacing: -0.04em;
		line-height: 0.85;
		background: linear-gradient(135deg, #C084FC 0%, #6366F1 50%, #06B6D4 100%);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		opacity: 0;
		transform: translateY(20px);
		transition: opacity 600ms var(--ease-out) 200ms, transform 600ms var(--ease-out) 200ms;
		pointer-events: none;
	}
	.nav--primary.is-open .nav__bg-watermark {
		opacity: 0.08;
		transform: translateY(0);
	}

	/* === Inner panels container ===
	   Stage za sliding panels — root list i sve flatened submenu sjede direktno
	   ovdje kao apsolutni layeri jednake veličine. */
	.nav__inner {
		position: absolute;
		inset: 0;
		z-index: 1;
		overflow: hidden;
	}
	/* Da panels apsolutni od inner-a, nav__item ne smije biti pozicioniran */
	.nav--primary .nav__item { position: static; }

	.nav__placeholder {
		color: rgb(255 255 255 / 60%);
		font-size: var(--fs-sm);
	}

	/* === Root menu list = baseline panel ===
	   `bottom: var(--nav-footer-h)` rezervira prostor za apsolutni footer pa root list
	   ima vlastiti scroll unutar svoje zone (ne overlap-a kontakte). */
	.nav__list {
		position: absolute;
		top: calc(var(--header-h) + 1.5rem);
		bottom: var(--nav-footer-h, 17rem);
		left: 0; right: 0;
		padding: 0 var(--container-pad);
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0.125rem;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
		transform: translateX(0);
		opacity: 1;
		transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1), opacity 280ms var(--ease-out), filter 280ms var(--ease-out);
	}
	.nav__list.is-pushed {
		transform: translateX(-22%);
		opacity: 0.15;
		pointer-events: none;
		filter: blur(2px);
	}
	.nav__item { border-bottom: none; }

	/* Staggered entrance — top-level itemi se "ulijevaju" odozgo */
	.nav--primary .nav__list > .nav__item {
		opacity: 0;
		transform: translateY(-14px);
		transition: opacity 360ms var(--ease-out), transform 420ms var(--ease-out);
	}
	.nav--primary.is-open .nav__list > .nav__item {
		opacity: 1;
		transform: translateY(0);
	}
	.nav--primary.is-open .nav__list > .nav__item:nth-child(1) { transition-delay: 80ms; }
	.nav--primary.is-open .nav__list > .nav__item:nth-child(2) { transition-delay: 130ms; }
	.nav--primary.is-open .nav__list > .nav__item:nth-child(3) { transition-delay: 180ms; }
	.nav--primary.is-open .nav__list > .nav__item:nth-child(4) { transition-delay: 230ms; }
	.nav--primary.is-open .nav__list > .nav__item:nth-child(5) { transition-delay: 280ms; }
	.nav--primary.is-open .nav__list > .nav__item:nth-child(6) { transition-delay: 330ms; }
	.nav--primary.is-open .nav__list > .nav__item:nth-child(7) { transition-delay: 380ms; }
	.nav--primary.is-open .nav__list > .nav__item:nth-child(8) { transition-delay: 430ms; }
	.nav--primary.is-open .nav__list > .nav__item:nth-child(n+9) { transition-delay: 480ms; }

	/* === Top-level link === */
	.nav__list > .nav__item > .nav__link {
		position: relative;
		display: flex;
		width: 100%;
		justify-content: space-between;
		align-items: center;
		gap: 0.75rem;
		padding: 0.95rem 0.875rem;
		border-radius: 12px;
		font-family: var(--font-heading);
		font-size: 1.5rem;
		font-weight: 700;
		letter-spacing: -0.02em;
		line-height: 1.15;
		color: #fff;
		background: transparent;
		border: 1px solid transparent;
		transition: background 200ms var(--ease-out), border-color 200ms var(--ease-out), color 200ms var(--ease-out), transform 200ms var(--ease-out);
	}
	.nav__list > .nav__item > .nav__link::after { display: none; }
	.nav__list > .nav__item > .nav__link::before {
		content: '';
		position: absolute;
		left: -2px; top: 50%;
		width: 3px; height: 0;
		background: linear-gradient(180deg, #C084FC, #06B6D4);
		border-radius: 4px;
		transform: translateY(-50%);
		transition: height 250ms var(--ease-out);
	}
	.nav__list > .nav__item > .nav__link:hover,
	.nav__list > .nav__item > .nav__link:focus-visible,
	.nav__list > .nav__item.is-expanded > .nav__link {
		background: rgb(255 255 255 / 6%);
		border-color: rgb(255 255 255 / 8%);
	}
	.nav__list > .nav__item.is-current > .nav__link,
	.nav__list > .nav__item:has(.is-current) > .nav__link {
		color: #fff;
		background: rgb(255 255 255 / 4%);
	}
	.nav__list > .nav__item.is-current > .nav__link::before,
	.nav__list > .nav__item:has(.is-current) > .nav__link::before {
		height: 60%;
	}

	/* Parent s djecom: link + odvojeni toggle (podizbornik) */
	.nav__list > .nav__item--has-children,
	.nav__submenu .nav__item--has-children {
		display: flex;
		align-items: stretch;
		gap: 0.375rem;
	}
	.nav__list > .nav__item--has-children > .nav__link,
	.nav__submenu .nav__item--has-children > .nav__link {
		flex: 1;
		min-width: 0;
		width: auto;
	}
	.nav__submenu-toggle {
		flex-shrink: 0;
		align-self: center;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		min-height: 44px;
		padding: 0.5rem;
		margin: 0;
		margin-left: 0.125rem;
		border: none;
		border-left: 1px solid rgb(255 255 255 / 12%);
		border-radius: 0 12px 12px 0;
		background: transparent;
		color: #fff;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}
	/* Chevron premium — krug s "→" strelicom (panel navigation indikator) */
	.nav__list > .nav__item--has-children > .nav__submenu-toggle .nav__chevron,
	.nav__submenu .nav__item--has-children > .nav__submenu-toggle .nav__chevron {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 30px; height: 30px;
		border-radius: 50%;
		background: rgb(255 255 255 / 8%);
		color: #fff;
		flex-shrink: 0;
		transition: background 200ms var(--ease-out), transform 200ms var(--ease-out);
	}
	.nav__submenu .nav__item--has-children > .nav__submenu-toggle .nav__chevron {
		width: 28px; height: 28px;
	}
	.nav__list > .nav__item--has-children > .nav__submenu-toggle .nav__chevron svg,
	.nav__submenu .nav__item--has-children > .nav__submenu-toggle .nav__chevron svg {
		width: 12px; height: 12px;
		transform: rotate(-90deg); /* down → right arrow */
	}
	.nav__list > .nav__item--has-children > .nav__submenu-toggle:hover .nav__chevron,
	.nav__list > .nav__item--has-children > .nav__submenu-toggle:focus-visible .nav__chevron,
	.nav__submenu .nav__item--has-children > .nav__submenu-toggle:hover .nav__chevron,
	.nav__submenu .nav__item--has-children > .nav__submenu-toggle:focus-visible .nav__chevron {
		background: linear-gradient(135deg, #6366F1, #06B6D4);
		transform: translateX(2px);
	}
	.nav__list > .nav__item--has-children > .nav__submenu-toggle:hover .nav__chevron svg,
	.nav__list > .nav__item--has-children > .nav__submenu-toggle:focus-visible .nav__chevron svg,
	.nav__submenu .nav__item--has-children > .nav__submenu-toggle:hover .nav__chevron svg,
	.nav__submenu .nav__item--has-children > .nav__submenu-toggle:focus-visible .nav__chevron svg {
		transform: rotate(-90deg) translateX(0);
	}

	/* === Submenu = sliding panel (iOS settings stil) ===
	   JS flatten-uje sve submenu-e na razinu .nav__inner pa imaju isti containing block
	   kao root list. Klizenjem ulaze s desne strane. */
	.nav__submenu {
		position: absolute;
		top: calc(var(--header-h) + 1.5rem);
		bottom: var(--nav-footer-h, 17rem);
		left: 0; right: 0;
		margin: 0;
		padding: 0 var(--container-pad);
		list-style: none;
		display: flex;
		flex-direction: column;
		gap: 0.125rem;
		background: transparent;
		border: none;
		border-radius: 0;
		box-shadow: none;
		min-width: 0;
		opacity: 1;
		visibility: visible;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
		transform: translateX(105%);
		transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1), opacity 280ms var(--ease-out), filter 280ms var(--ease-out);
		pointer-events: none;
		z-index: 2;
	}
	.nav__submenu.is-active {
		transform: translateX(0);
		pointer-events: auto;
	}
	/* Nested panel — kad je dijete pushed dalje udesno */
	.nav__submenu.is-pushed {
		transform: translateX(-22%);
		opacity: 0.15;
		pointer-events: none;
		filter: blur(2px);
	}

	.nav__submenu .nav__item { border-bottom: none; }

	/* Panel header — "Natrag" gumb + parent label */
	.nav__panel-header {
		display: flex;
		align-items: center;
		gap: 1rem;
		padding: 0 0 1.25rem;
		margin-bottom: 0.5rem;
		border-bottom: 1px solid rgb(255 255 255 / 8%);
	}
	.nav__back {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		padding: 0.5rem 0.875rem 0.5rem 0.625rem;
		background: rgb(255 255 255 / 6%);
		border: 1px solid rgb(255 255 255 / 12%);
		border-radius: 999px;
		color: #fff;
		font-family: var(--font-heading);
		font-size: 0.85rem;
		font-weight: 600;
		cursor: pointer;
		flex-shrink: 0;
		transition: background 180ms var(--ease-out), border-color 180ms var(--ease-out), transform 180ms var(--ease-out);
	}
	.nav__back:hover {
		background: rgb(255 255 255 / 12%);
		border-color: rgb(255 255 255 / 22%);
	}
	.nav__back:active { transform: scale(0.96); }
	.nav__back svg { color: #06B6D4; }
	.nav__panel-title {
		font-family: var(--font-heading);
		font-weight: 700;
		font-size: 1.05rem;
		letter-spacing: -0.01em;
		color: #fff;
		background: linear-gradient(135deg, #fff 0%, #C084FC 60%, #06B6D4 100%);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	a.nav__panel-title {
		text-decoration: none;
	}
	a.nav__panel-title:hover,
	a.nav__panel-title:focus-visible {
		text-decoration: underline;
		text-underline-offset: 0.15em;
	}

	/* Submenu links unutar slide panela — ista premium tipografija kao top-level */
	.nav__submenu .nav__link {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 0.75rem;
		padding: 0.875rem 0.875rem;
		border-radius: 12px;
		font-family: var(--font-heading);
		font-size: 1.15rem;
		font-weight: 600;
		letter-spacing: -0.01em;
		color: #fff;
		border: 1px solid transparent;
		transition: background 180ms var(--ease-out), border-color 180ms var(--ease-out), transform 180ms var(--ease-out);
	}
	.nav__submenu .nav__link::after { display: none; }
	.nav__submenu .nav__link:hover,
	.nav__submenu .nav__link:focus-visible {
		background: rgb(255 255 255 / 6%);
		border-color: rgb(255 255 255 / 8%);
		transform: translateX(2px);
	}
	.nav__submenu .nav__item.is-current > .nav__link {
		background: linear-gradient(90deg, rgb(192 132 252 / 18%), rgb(6 182 212 / 8%));
		border-color: rgb(255 255 255 / 10%);
	}
	/* Kad je nav u nested stanju → sakrij footer (više prostora za panel) */
	.nav--primary.is-nested .nav__footer {
		opacity: 0;
		pointer-events: none;
		transform: translateY(16px);
	}

	/* === Scroll affordance ===
	   Sticky pseudo-element na dnu/vrhu panela. Pojavljuje se SAMO kad JS detektira
	   da postoji više sadržaja u tom smjeru (`.is-scrollable-bottom` / `-top`).
	   Animirani chevron + gradient fade jasno signalizira "ima još". */
	/* Suptilni separator na dnu scrollable panela — vizualni "bottom edge" */
	.nav__list,
	.nav__submenu {
		border-bottom: 1px solid rgb(255 255 255 / 10%);
	}

	/* Scroll cue uklonjen — dropdown chevroni ostaju na .nav__chevron */
	.nav__scroll-cue {
		display: none !important;
	}

	/* === Mobile-only footer (kontakt + social) ===
	   Apsolutno pozicioniran na dnu nav-a tako da slide paneli klizenu iznad njega. */
	.nav__footer {
		position: absolute;
		bottom: 0;
		left: 0; right: 0;
		z-index: 3;
		padding: 1.25rem var(--container-pad) 1.5rem;
		background: linear-gradient(180deg, transparent 0%, rgb(10 13 28 / 85%) 35%, rgb(10 13 28 / 100%) 100%);
		opacity: 0;
		transform: translateY(16px);
		transition: opacity 400ms var(--ease-out) 380ms, transform 480ms var(--ease-out) 380ms;
		pointer-events: none;
	}
	.nav--primary.is-open .nav__footer {
		opacity: 1;
		transform: translateY(0);
		pointer-events: auto;
	}
	.nav__footer-eyebrow {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		margin: 0 0 1rem;
		padding: 0.375rem 0.75rem;
		background: rgb(255 255 255 / 5%);
		border: 1px solid rgb(255 255 255 / 8%);
		border-radius: 999px;
		color: rgb(255 255 255 / 75%);
		font-size: 0.7rem;
		font-weight: 600;
		letter-spacing: 0.1em;
		text-transform: uppercase;
	}
	.nav__footer-pulse {
		width: 6px; height: 6px;
		background: #06B6D4;
		border-radius: 50%;
		box-shadow: 0 0 0 0 rgb(6 182 212 / 60%);
		animation: nav-pulse 2s var(--ease-out) infinite;
	}
	@keyframes nav-pulse {
		0%   { box-shadow: 0 0 0 0   rgb(6 182 212 / 50%); }
		70%  { box-shadow: 0 0 0 8px rgb(6 182 212 / 0%); }
		100% { box-shadow: 0 0 0 0   rgb(6 182 212 / 0%); }
	}
	.nav__contact {
		list-style: none;
		display: grid;
		gap: 0.5rem;
		margin: 0 0 1rem;
	}
	.nav__contact a,
	.nav__contact > li {
		display: flex;
		align-items: center;
		gap: 0.875rem;
		padding: 0.5rem 0.25rem;
		background: transparent;
		border: none;
		color: #fff;
		text-decoration: none;
		transition: transform 180ms var(--ease-out), color 180ms var(--ease-out);
	}
	.nav__contact a:hover {
		transform: translateX(2px);
	}
	.nav__contact a:hover .nav__contact-value {
		color: #06B6D4;
	}
	.nav__contact-icon {
		width: 32px; height: 32px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		border-radius: 8px;
		background: linear-gradient(135deg, rgb(192 132 252 / 22%), rgb(6 182 212 / 22%));
		color: #fff;
		flex-shrink: 0;
	}
	.nav__contact-text {
		display: flex;
		flex-direction: column;
		min-width: 0;
		flex: 1;
	}
	.nav__contact-label {
		font-size: 0.7rem;
		font-weight: 500;
		color: rgb(255 255 255 / 55%);
		text-transform: uppercase;
		letter-spacing: 0.05em;
		line-height: 1.2;
	}
	.nav__contact-value {
		font-family: var(--font-heading);
		font-size: 0.95rem;
		font-weight: 600;
		color: #fff;
		line-height: 1.3;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.nav__social {
		display: flex;
		align-items: center;
		gap: 0.75rem;
		padding: 0.875rem 1rem;
		background: linear-gradient(135deg, rgb(192 132 252 / 16%), rgb(6 182 212 / 16%));
		border: 1px solid rgb(255 255 255 / 12%);
		border-radius: 10px;
		color: #fff;
		font-weight: 600;
		font-size: 0.9rem;
		text-decoration: none;
		transition: background 200ms var(--ease-out), transform 180ms var(--ease-out);
	}
	.nav__social:hover {
		background: linear-gradient(135deg, rgb(192 132 252 / 26%), rgb(6 182 212 / 26%));
		transform: translateY(-1px);
	}
	.nav__social-arrow { margin-left: auto; opacity: 0.7; }

	/* === Mobile menu — scoped layout (.nav-mobile-menu samo u hamburger overlayu) === */
	:root {
		--nav-menu-viewport-h: 260px;
	}

	.nav--primary .nav-mobile-menu {
		position: relative;
		z-index: 1;
		flex: 1;
		min-height: 0;
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}

	.nav--primary .nav-mobile-menu__scroll {
		flex: 1;
		min-height: 0;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
		padding: calc(var(--header-h) + 0.75rem) var(--container-pad) max(1rem, env(safe-area-inset-bottom));
	}

	.nav--primary .nav-mobile-menu .menu-section-title {
		margin: 0 0 0.5rem;
		font-size: 0.65rem;
		font-weight: 700;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: rgb(255 255 255 / 42%);
		line-height: 1.2;
	}

	.nav--primary .nav-mobile-menu__section {
		padding-block: 0.875rem;
		border-top: 1px solid rgb(255 255 255 / 10%);
	}

	.nav--primary .nav-mobile-menu__section--nav {
		padding-top: 0;
		border-top: none;
	}

	.nav--primary .nav-mobile-menu .nav__inner {
		position: relative;
		inset: auto;
		height: var(--nav-menu-viewport-h, 260px);
		min-height: 200px;
		max-height: min(40vh, 340px);
		overflow: hidden;
	}

	.nav--primary .nav-mobile-menu .nav__list,
	.nav--primary .nav-mobile-menu .nav__submenu {
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 0;
		border-bottom: none;
	}

	.nav--primary .nav-mobile-menu .nav__list > .nav__item > .nav__link {
		padding: 0.6rem 0.7rem;
		font-size: 1.0625rem;
		line-height: 1.25;
		gap: 0.5rem;
		border-radius: 8px;
	}

	.nav--primary .nav-mobile-menu .nav__submenu .nav__link {
		padding: 0.5rem 0.65rem;
		font-size: 0.9375rem;
		line-height: 1.3;
		border-radius: 8px;
	}

	.nav--primary .nav-mobile-menu .nav__submenu .nav__item--depth-1 > .nav__link {
		margin-left: 0.25rem;
		padding-left: 0.85rem;
		border-left: 2px solid rgb(255 255 255 / 14%);
	}

	.nav--primary .nav-mobile-menu .nav__panel-header {
		padding-bottom: 0.75rem;
		margin-bottom: 0.35rem;
	}

	.nav--primary .nav-mobile-menu .nav__footer {
		display: none !important;
	}

	.nav--primary.is-nested .nav-mobile-menu__extras {
		display: none;
	}

	.nav--primary .nav-mobile-menu__links {
		list-style: none;
		margin: 0 0 0.625rem;
		padding: 0;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.35rem;
	}

	.nav--primary .nav-mobile-menu__link-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 0.35rem;
		min-height: 2.35rem;
		padding: 0.45rem 0.6rem;
		border-radius: 8px;
		background: rgb(255 255 255 / 5%);
		border: 1px solid rgb(255 255 255 / 8%);
		color: rgb(255 255 255 / 88%);
		font-size: 0.78rem;
		font-weight: 600;
		line-height: 1.25;
		text-decoration: none;
	}

	.nav--primary .nav-mobile-menu__link-item:hover {
		background: rgb(255 255 255 / 9%);
		color: #fff;
	}

	.nav--primary .nav-mobile-menu__link-item svg {
		opacity: 0.55;
		flex-shrink: 0;
	}

	.nav--primary .nav-mobile-menu__social {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-wrap: wrap;
		gap: 0.4rem;
	}

	.nav--primary .nav-mobile-menu__social-link {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 36px;
		height: 36px;
		border-radius: 50%;
		background: rgb(255 255 255 / 7%);
		border: 1px solid rgb(255 255 255 / 10%);
		color: #fff;
		text-decoration: none;
	}

	.nav--primary .nav-mobile-menu__contact {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
		gap: 0.15rem;
	}

	.nav--primary .nav-mobile-menu__contact-item {
		display: flex;
		align-items: center;
		gap: 0.55rem;
		padding: 0.35rem 0.2rem;
		color: #fff;
		text-decoration: none;
		border-radius: 8px;
	}

	.nav--primary .nav-mobile-menu a.nav-mobile-menu__contact-item:hover {
		background: rgb(255 255 255 / 5%);
	}

	.nav--primary .nav-mobile-menu__contact-item--static {
		cursor: default;
	}

	.nav--primary .nav-mobile-menu__contact-icon {
		width: 26px;
		height: 26px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		border-radius: 6px;
		background: rgb(255 255 255 / 8%);
		flex-shrink: 0;
	}

	.nav--primary .nav-mobile-menu__contact-body {
		display: flex;
		flex-direction: column;
		gap: 0.05rem;
		min-width: 0;
	}

	.nav--primary .nav-mobile-menu__contact-label {
		font-size: 0.6rem;
		font-weight: 600;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: rgb(255 255 255 / 42%);
		line-height: 1.15;
	}

	.nav--primary .nav-mobile-menu__contact-value {
		font-family: var(--font-heading);
		font-size: 0.8125rem;
		font-weight: 600;
		line-height: 1.3;
		word-break: break-word;
	}

	@media (max-width: 380px) {
		.nav--primary .nav-mobile-menu__links {
			grid-template-columns: 1fr;
		}
	}

	/* === Sakrij hero scroll arrow + lock body === */
	html.is-nav-open,
	html.is-nav-open body { overflow: hidden; }
	html.is-nav-open .hero__scroll { display: none; }

	/* === Overlay header — logo + toggle ostaju vidljivi preko fullscreen nav-a === */
	html.is-nav-open .topbar {
		opacity: 0;
		pointer-events: none;
		transform: translateY(-100%);
	}
	html.is-nav-open .site-header {
		position: fixed;
		top: 0;
		z-index: 118;
		background: transparent !important;
		border-bottom: none !important;
		box-shadow: none !important;
		animation: none !important;
	}
	/* Logo postaje bijeli preko tamnog nav-a */
	html.is-nav-open .logo-svg__star,
	html.is-nav-open .logo-svg__arrow,
	html.is-nav-open .logo-svg__title { fill: #fff; transition: fill 240ms var(--ease-out); }
	html.is-nav-open .logo-svg__sub   { fill: rgb(255 255 255 / 75%); transition: fill 240ms var(--ease-out); }
}

/* Desktop / tablet (≥1024px) — sakrij mobile-only blokove */
@media (min-width: 1024px) {
	.nav__bg,
	.nav-mobile-menu__extras,
	.nav--primary .nav-mobile-menu .menu-section-title { display: none; }

	/* Wrapperi prozirni — wp_nav_menu(primary) ostaje u header flex redu */
	.nav--primary .nav-mobile-menu,
	.nav--primary .nav-mobile-menu__scroll,
	.nav--primary .nav-mobile-menu__section--nav,
	.nav__inner { display: contents; }
}

/* ============ 9. SITE FOOTER ============ */
.site-footer {
	background: var(--era-deep);
	color: rgb(255 255 255 / 80%);
	margin-top: clamp(3rem, 6vw, 6rem);
}
.site-footer__inner {
	display: grid;
	gap: clamp(2rem, 4vw, 3rem);
	padding-block: clamp(3rem, 6vw, 5rem);
	grid-template-columns: 1fr;
}
@media (min-width: 768px)  { .site-footer__inner { grid-template-columns: 1.4fr 1fr 1fr 0.8fr; } }
.site-footer__brand .logo-svg__star,
.site-footer__brand .logo-svg__arrow { fill: var(--era-red); }
.site-footer__brand .logo-svg__title { fill: #fff; }
.site-footer__tagline {
	margin-top: 1rem;
	font-size: var(--fs-sm);
	color: rgb(255 255 255 / 65%);
	max-width: 32ch;
}
.site-footer__heading {
	font-size: var(--fs-base);
	font-weight: 600;
	color: var(--era-footer-heading-color);
	margin-bottom: 1rem;
	letter-spacing: -0.01em;
}
.site-footer__tagline--desc {
	margin-top: 0.75rem;
}
.site-footer__address {
	font-style: normal;
	font-size: var(--fs-sm);
	color: rgb(255 255 255 / 75%);
	line-height: 1.7;
}
.site-footer__address p { margin: 0 0 0.5rem; }
.site-footer__address a { color: #fff; }
.site-footer__address a:hover { color: var(--era-cyan); }

.site-footer__menu {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	font-size: var(--fs-sm);
}
.site-footer__menu a {
	color: rgb(255 255 255 / 75%);
}
.site-footer__menu a:hover { color: #fff; }

.site-footer__social {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0.625rem 1rem;
	background: rgb(255 255 255 / 8%);
	color: #fff;
	border-radius: var(--radius-pill);
	font-size: var(--fs-sm);
	font-weight: 500;
}
.site-footer__social:hover {
	background: var(--era-red);
	color: #fff;
}

.site-footer__bottom {
	border-top: 1px solid rgb(255 255 255 / 10%);
	padding-block: 1.5rem;
	font-size: var(--fs-xs);
	color: rgb(255 255 255 / 60%);
}
.site-footer__bottom p { margin: 0; }

/* ============ 10. HERO (placeholder) ============ */
.hero {
	position: relative;
	overflow: hidden;
	padding-block: clamp(3rem, 6vw, 5rem);
	min-height: clamp(480px, 60vh, 700px);
	display: flex;
	align-items: center;
	background: var(--era-deep);
	color: #fff;
}

/* U overlay modu hero kreće od samog vrha (topbar+header lebde nad njim).
   Padding kompenzira njihove visine + ekstra disanje.
   Max ~800px - ne želimo full viewport. */
body.has-overlay-header .hero {
	padding-top: calc(var(--topbar-h) + var(--header-h) + clamp(2rem, 4vw, 3rem));
	padding-bottom: clamp(3rem, 6vw, 5rem);
	min-height: clamp(560px, 70vh, 800px);
	max-height: 800px;
}
.hero__bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
	background:
		radial-gradient(ellipse at 80% 40%, rgb(139 92 246 / 22%), transparent 60%),
		radial-gradient(ellipse at 10% 90%, rgb(6 182 212 / 14%), transparent 60%);
}

/* Wireframe SVG kao pozadina hero-a */
.hero-wireframe-svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	user-select: none;
}

/* PNG image (3D render zgrade) - statički 30% opacity, brzi fade-in pri load-u. */
.hero-wireframe-svg image {
	opacity: 0.3;
	animation: era-hero-bitmap-in 0.6s ease-out backwards;
}
@keyframes era-hero-bitmap-in {
	from { opacity: 0; }
	to   { opacity: 0.3; }
}

/* Linije zgrade - dvije nezavisne animacije:
     1) Drawing (jednom): stroke-dashoffset 800 → 0, sa stagger delay-em
     2) Hue rotate (beskonačno): suptilan pomak gradijenta u purple/indigo/cyan tonovima
   Linije ostaju opacity 1 (ne blijede). */
.hero-wireframe-svg path {
	fill: none !important;
	stroke: url(#eraWireGrad) !important;
	stroke-width: 0.35 !important;
	stroke-linecap: round;
	stroke-linejoin: round;
	filter: url(#eraWireGlow) drop-shadow(0 0 0.6px rgb(139 92 246 / 60%));
	stroke-dasharray: 800;
	stroke-dashoffset: 800;
	opacity: 1;
	animation:
		era-hero-draw 2.4s cubic-bezier(0.65, 0, 0.35, 1) forwards,
		era-hero-hue  16s ease-in-out infinite;
	animation-delay: var(--draw-delay, 0s), 0s;
}
@keyframes era-hero-draw {
	to { stroke-dashoffset: 0; }
}
/* Suptilni gradient shift - hue rotate ±25°, drop-shadow varira u tim tonovima */
@keyframes era-hero-hue {
	0%, 100% {
		filter: url(#eraWireGlow) drop-shadow(0 0 0.6px rgb(139 92 246 / 60%)) hue-rotate(0deg);
	}
	33% {
		filter: url(#eraWireGlow) drop-shadow(0 0 0.8px rgb(99 102 241 / 65%)) hue-rotate(15deg);
	}
	66% {
		filter: url(#eraWireGlow) drop-shadow(0 0 0.8px rgb(6 182 212 / 60%)) hue-rotate(-12deg);
	}
}

/* Stagger animation za pojedine paths - svaka path malo kasnije */
.hero-wireframe-svg path:nth-child(1)  { --draw-delay: 0s;     }
.hero-wireframe-svg path:nth-child(2)  { --draw-delay: 0.05s;  }
.hero-wireframe-svg path:nth-child(3)  { --draw-delay: 0.1s;   }
.hero-wireframe-svg path:nth-child(4)  { --draw-delay: 0.15s;  }
.hero-wireframe-svg path:nth-child(5)  { --draw-delay: 0.2s;   }
.hero-wireframe-svg path:nth-child(6)  { --draw-delay: 0.25s;  }
.hero-wireframe-svg path:nth-child(7)  { --draw-delay: 0.3s;   }
.hero-wireframe-svg path:nth-child(8)  { --draw-delay: 0.35s;  }
.hero-wireframe-svg path:nth-child(9)  { --draw-delay: 0.4s;   }
.hero-wireframe-svg path:nth-child(10) { --draw-delay: 0.45s;  }
.hero-wireframe-svg path:nth-child(n+11) { --draw-delay: 0.5s; }
.hero-wireframe-svg path:nth-child(n+20) { --draw-delay: 0.7s; }
.hero-wireframe-svg path:nth-child(n+30) { --draw-delay: 0.9s; }
.hero-wireframe-svg path:nth-child(n+40) { --draw-delay: 1.1s; }
.hero-wireframe-svg path:nth-child(n+50) { --draw-delay: 1.3s; }

/* Hero foreground - dark scrim za čitljivost teksta nad svjetlim mjestima wireframe-a */
.hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgb(14 17 36 / 65%) 0%, rgb(14 17 36 / 30%) 50%, rgb(14 17 36 / 10%) 100%);
	pointer-events: none;
	z-index: 1;
}
.hero__inner { position: relative; z-index: 2; }

@media (prefers-reduced-motion: reduce) {
	.hero-wireframe-svg path,
	.hero-wireframe-svg image { animation: none; }
	.hero-wireframe-svg path  { stroke-dashoffset: 0; opacity: 1; }
	.hero-wireframe-svg image { opacity: 0.3; }
}
.hero__inner {
	position: relative;
	display: grid;
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: center;
	grid-template-columns: 1fr;
	width: 100%;
}
@media (min-width: 960px) {
	.hero__inner { grid-template-columns: 1.15fr 1fr; }
}

.hero__copy {
	max-width: 640px;
	text-align: left;
}
.hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	font-family: var(--hero-eyebrow-font-family);
	font-size: var(--hero-eyebrow-font-size);
	font-weight: var(--hero-eyebrow-font-weight);
	line-height: var(--hero-eyebrow-line-height);
	text-transform: uppercase;
	letter-spacing: var(--hero-eyebrow-letter-spacing);
	color: var(--era-cyan);
	margin: 0 0 1.5rem;
}
.hero__eyebrow-dot {
	display: inline-block;
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--era-cyan);
	box-shadow: 0 0 0 0 rgb(6 182 212 / 60%);
	animation: era-eyebrow-pulse 2s ease-in-out infinite;
}
@keyframes era-eyebrow-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgb(6 182 212 / 60%); }
	50%      { box-shadow: 0 0 0 8px rgb(6 182 212 / 0%); }
}

.hero__title {
	font-family: var(--hero-title-font-family);
	font-size: var(--hero-title-font-size);
	font-weight: var(--hero-title-font-weight);
	line-height: var(--hero-title-line-height);
	letter-spacing: var(--hero-title-letter-spacing);
	color: #fff;
	margin: 0 0 1.25rem;
}
/* Urezana slova u zlatni box (letterpress / debossed effect) */
.hero__title-accent {
	font-family: inherit;
	display: inline-block;
	background: #deaa25;
	color: #00258d;
	-webkit-text-fill-color: #00258d;
	padding: 0 0.25em;
	border-radius: 0.08em;
	margin-top: 0.1em;

	/* Text "urezana" iluzija - tamni rub iznad slova + svijetli ispod (kao da svjetlo pada odozgo) */
	text-shadow:
		0 1px 0 rgb(255 255 255 / 45%),
		0 -1px 1px rgb(0 0 40 / 35%);

	/* Inset box-shadow - daje boxu dubinu, kao da je urezan u površinu */
	box-shadow:
		inset 0 3px 5px rgb(0 0 0 / 28%),
		inset 0 -1px 0 rgb(255 255 255 / 45%);
}
.hero__lead {
	font-family: var(--hero-lead-font-family);
	font-size: var(--hero-lead-font-size);
	font-weight: var(--hero-lead-font-weight);
	line-height: var(--hero-lead-line-height);
	letter-spacing: var(--hero-lead-letter-spacing);
	color: rgb(255 255 255 / 80%);
	margin: 0 0 2rem;
	max-width: 56ch;
}
.hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

/* Hero CTA - prilagođene boje (zlatna + plava) umjesto default red/ghost */
.hero__cta .btn--primary {
	--btn-bg: #deaa25;
	--btn-fg: #000;
	--btn-bd: #deaa25;
}
.hero__cta .btn--primary:hover {
	--btn-bg: #c4951a;
	--btn-fg: #000;
	--btn-bd: #c4951a;
}

.hero__cta .btn--ghost {
	--btn-bg: #00258d;
	--btn-fg: #fff;
	--btn-bd: #00258d;
}
.hero__cta .btn--ghost:hover {
	--btn-bg: #001a66;
	--btn-fg: #fff;
	--btn-bd: #001a66;
}

/* Scroll indicator at bottom of hero */
.hero__scroll {
	position: absolute;
	bottom: 1.5rem;
	left: 50%;
	transform: translateX(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px; height: 44px;
	color: rgb(255 255 255 / 70%);
	border: 1.5px solid rgb(255 255 255 / 25%);
	border-radius: 999px;
	animation: era-scroll-bounce 2.4s ease-in-out infinite;
	transition: all 200ms var(--ease-out);
	z-index: 3;
}
.hero__scroll:hover {
	color: #fff;
	border-color: var(--era-cyan);
	background: rgb(6 182 212 / 10%);
}
@keyframes era-scroll-bounce {
	0%, 100% { transform: translate(-50%, 0); opacity: 0.7; }
	50%      { transform: translate(-50%, 6px); opacity: 1; }
}

/* === HERO VISUAL (right side) === */
.hero__visual {
	position: relative;
	width: 100%;
	min-height: 380px;
	max-height: 520px;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-inline: auto;
	z-index: 2;
}

.hv-rings {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}

/* Ring rotation - znatno usporeno (skoro neprimjetno) */
.hv-ring--outer {
	transform-origin: 200px 200px;
	animation: era-rotate-cw 90s linear infinite;
}
.hv-ring--middle {
	transform-origin: 200px 200px;
	animation: era-rotate-ccw 70s linear infinite;
}
.hv-ring--inner {
	transform-origin: 200px 200px;
	animation: era-rotate-cw 50s linear infinite;
}
@keyframes era-rotate-cw  { to { transform: rotate(360deg); } }
@keyframes era-rotate-ccw { to { transform: rotate(-360deg); } }

/* Pulse dots - jedva primjetni */
.hv-dot {
	filter: drop-shadow(0 0 2px currentColor);
	opacity: 0.2;
	animation: era-dot-pulse 4s ease-in-out infinite;
}
.hv-dot--cyan { animation-delay: 1s; }
.hv-ring--outer .hv-dot:nth-child(2) { animation-delay: 2s; }
.hv-ring--outer .hv-dot:nth-child(3) { animation-delay: 3s; }

@keyframes era-dot-pulse {
	0%, 100% { opacity: 0.15; }
	50%      { opacity: 0.3; }
}

/* Single pulse wave - jedva primjetan */
.hv-pulse {
	transform-origin: 200px 200px;
	transform-box: fill-box;
	animation: era-pulse-wave 11s ease-out infinite;
	opacity: 0;
}
.hv-pulse--2,
.hv-pulse--3 { display: none; }

@keyframes era-pulse-wave {
	0%   { transform: scale(0.5); opacity: 0; }
	30%  { opacity: 0.08; }
	100% { transform: scale(2.4); opacity: 0; }
}

/* Core - jedva primjetan disanje */
.hv-core {
	transform-origin: 200px 200px;
	transform-box: fill-box;
	animation: era-core-pulse 5s ease-in-out infinite;
}
@keyframes era-core-pulse {
	0%, 100% { transform: scale(1); opacity: 0.9; }
	50%      { transform: scale(1.08); opacity: 1; }
}

/* Floating glass cards */
.hv-cards {
	position: relative;
	width: 100%; height: 100%;
	pointer-events: none;
}
.hv-card {
	position: absolute;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 1rem;
	background: rgb(14 17 36 / 65%);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border: 1px solid rgb(255 255 255 / 12%);
	border-radius: var(--radius-lg);
	box-shadow: 0 8px 32px -8px rgb(0 0 0 / 50%), 0 0 0 1px rgb(255 255 255 / 5%) inset;
	color: #fff;
	text-decoration: none;
	cursor: pointer;
	pointer-events: auto;
	min-width: 160px;
	opacity: 0;
	animation: era-card-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
	animation-delay: calc(var(--i, 0) * 0.2s + 0.5s);
}
.hv-card:hover {
	transform: translateY(-2px) !important;
	border-color: rgb(6 182 212 / 40%);
	box-shadow: 0 12px 40px -8px rgb(0 0 0 / 60%), 0 0 24px -4px rgb(6 182 212 / 30%);
	transition: all 250ms var(--ease-out);
}
.hv-card:focus-visible {
	outline: 2px solid var(--era-cyan);
	outline-offset: 3px;
}

/* Floating animacija - svaka kartica blago njiše */
.hv-card--1 {
	top: 8%; left: -8%;
	animation-name: era-card-in, era-float-1;
	animation-duration: 0.8s, 6s;
	animation-iteration-count: 1, infinite;
	animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1), ease-in-out;
	animation-fill-mode: forwards, none;
}
.hv-card--2 {
	top: 38%; right: -8%;
	animation-name: era-card-in, era-float-2;
	animation-duration: 0.8s, 7s;
	animation-iteration-count: 1, infinite;
	animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1), ease-in-out;
	animation-fill-mode: forwards, none;
}
.hv-card--3 {
	bottom: 6%; left: 6%;
	animation-name: era-card-in, era-float-3;
	animation-duration: 0.8s, 8s;
	animation-iteration-count: 1, infinite;
	animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1), ease-in-out;
	animation-fill-mode: forwards, none;
	min-width: 200px;
}

@keyframes era-card-in {
	from { opacity: 0; transform: translateY(20px) scale(0.96); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes era-float-1 {
	0%, 100% { transform: translate(0, 0); }
	50%      { transform: translate(0, -8px); }
}
@keyframes era-float-2 {
	0%, 100% { transform: translate(0, 0); }
	50%      { transform: translate(0, 10px); }
}
@keyframes era-float-3 {
	0%, 100% { transform: translate(0, 0); }
	50%      { transform: translate(6px, -4px); }
}

.hv-card__icon {
	display: inline-flex;
	width: 36px; aspect-ratio: 1;
	align-items: center;
	justify-content: center;
	background: rgb(6 182 212 / 15%);
	color: var(--era-cyan);
	border-radius: var(--radius-sm);
	flex-shrink: 0;
}
.hv-card__icon--live {
	background: rgb(227 6 19 / 18%);
	color: var(--era-red);
}
.hv-pulse-dot {
	width: 10px; height: 10px;
	border-radius: 50%;
	background: var(--era-red);
	box-shadow: 0 0 0 0 rgb(227 6 19 / 60%);
	animation: era-eyebrow-pulse 1.6s ease-in-out infinite;
}

.hv-card__num {
	font-family: var(--font-heading);
	font-size: var(--fs-2xl);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
	color: #fff;
}
.hv-card__label,
.hv-card__label-sm {
	font-size: var(--fs-xs);
	color: rgb(255 255 255 / 70%);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 500;
	margin-top: 0.125rem;
}
.hv-card__title {
	font-family: var(--font-heading);
	font-size: var(--fs-sm);
	font-weight: 600;
	color: #fff;
	margin-top: 0.125rem;
	letter-spacing: -0.01em;
	line-height: 1.3;
}

@media (max-width: 959px) {
	.hero__visual {
		max-height: 360px;
		min-height: 320px;
	}
	.hv-card { font-size: var(--fs-xs); padding: 0.625rem 0.875rem; }
	.hv-card__num { font-size: var(--fs-xl); }
}
@media (max-width: 540px) {
	.hero__visual { display: none; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.hv-ring--outer,
	.hv-ring--middle,
	.hv-ring--inner,
	.hv-dot, .hv-pulse, .hv-core,
	.hero__eyebrow-dot, .hv-pulse-dot,
	.hero__scroll,
	.hv-card { animation: none !important; opacity: 1 !important; }
}

/* Btn count badge */
.btn__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.5em;
	padding: 0 0.4em;
	margin-left: 0.375rem;
	background: rgb(255 255 255 / 12%);
	border-radius: 999px;
	font-size: 0.85em;
	font-weight: 500;
}
.btn--primary .btn__count { background: rgb(0 0 0 / 18%); }

/* Archive filter count */
.archive-filter__count {
	display: inline-flex;
	margin-left: 0.5rem;
	padding: 0.125rem 0.5rem;
	background: var(--era-bg-soft);
	color: var(--era-muted);
	border-radius: var(--radius-pill);
	font-size: 0.85em;
	font-weight: 500;
}
.archive-filter.is-active .archive-filter__count {
	background: rgb(255 255 255 / 22%);
	color: #fff;
}

/* ============ 11. SECTIONS ============ */

/* About section - 2-col grid (copy + stats) */
.section--about { background: var(--era-bg); }
.about {
	display: grid;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}
@media (min-width: 900px) {
	.about { grid-template-columns: 1.2fr 1fr; }
}
.about__lead {
	font-size: var(--fs-lg);
	color: var(--era-muted);
	margin-block: 1rem 1.75rem;
	max-width: 56ch;
	line-height: 1.65;
}
.about__stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.5rem;
}
.stat {
	padding: 1.5rem 1rem;
	background: var(--era-bg-soft);
	border-radius: var(--radius-lg);
	text-align: center;
	border: 1px solid var(--era-line);
}
.stat__num {
	font-family: var(--font-heading);
	font-size: clamp(2rem, 5vw, 3rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--era-text);
}
.stat__plus { color: var(--era-red); }
.stat__label {
	margin-top: 0.5rem;
	font-size: var(--fs-xs);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--era-muted);
}

/* === Pozadinske varijante za sekcije početne === */
.section--news-white          { background: var(--era-bg); }
.section--opportunities-flat  { background: var(--era-bg); }
.section--activities          { background: var(--era-bg-soft); padding-top: clamp(3rem, 5vw, 5rem); padding-bottom: clamp(3rem, 5vw, 5rem); }

/* === ACTIVITIES (Naše djelatnosti) - 4 boxa različitih pozadina, 4 u redu === */
.activities-grid {
	display: grid;
	gap: clamp(1rem, 2vw, 1.5rem);
	grid-template-columns: 1fr;
	align-items: stretch;
}
@media (min-width: 640px)  { .activities-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .activities-grid { grid-template-columns: repeat(4, 1fr); } }

.activity-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	padding: clamp(1.5rem, 2.5vw, 2rem);
	border-radius: var(--radius-xl);
	overflow: hidden;
	transition: transform 280ms var(--ease-out), box-shadow 280ms var(--ease-out);
}
.activity-card:hover {
	transform: translateY(-4px);
}

/* Box 1 - svijetla varijanta */
.activity-card--light {
	background: var(--era-bg);
	border: 1px solid var(--era-line);
	color: var(--era-text);
}
.activity-card--light:hover {
	box-shadow: 0 20px 40px -16px rgb(15 17 36 / 16%);
	border-color: transparent;
}
.activity-card--light .activity-card__icon {
	background: rgb(30 79 224 / 10%);
	color: var(--era-blue);
	border: 1px solid rgb(30 79 224 / 18%);
}
.activity-card--light .activity-card__eyebrow {
	color: var(--era-blue);
}

/* Box 3 - GOLD heritage (svjetla varijanta s zlatnim accentom) */
.activity-card--gold {
	background: var(--era-bg);
	border: 1px solid var(--era-line);
	color: var(--era-text);
	position: relative;
	overflow: hidden;
}
.activity-card--gold::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse at 100% 0%, rgb(222 170 37 / 12%), transparent 55%),
		radial-gradient(ellipse at 0% 100%, rgb(222 170 37 / 6%), transparent 55%);
	pointer-events: none;
	z-index: 0;
}
.activity-card--gold > * { position: relative; z-index: 1; }
.activity-card--gold:hover {
	box-shadow: 0 20px 40px -16px rgb(222 170 37 / 28%);
	border-color: rgb(222 170 37 / 35%);
}
.activity-card--gold .activity-card__icon {
	background: rgb(222 170 37 / 15%);
	color: #b08820;
	border: 1px solid rgb(222 170 37 / 30%);
}
.activity-card--gold .activity-card__eyebrow { color: #b08820; }
.activity-card--gold .activity-card__link {
	color: #b08820;
}
.activity-card--gold .activity-card__link:hover { color: #8a6914; }

/* Box 4 - TEAL portal (tamna varijanta s cyan/teal accentom) */
.activity-card--teal {
	background: #0a2a3f;
	color: #fff;
	border: 1px solid rgb(255 255 255 / 8%);
}
.activity-card--teal::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse at 100% 0%, rgb(6 182 212 / 28%), transparent 55%),
		radial-gradient(ellipse at 0% 100%, rgb(8 145 178 / 18%), transparent 55%);
	pointer-events: none;
	z-index: 0;
}
.activity-card--teal > * { position: relative; z-index: 1; }
.activity-card--teal:hover {
	box-shadow: 0 24px 48px -16px rgb(6 182 212 / 35%);
}
.activity-card--teal .activity-card__icon {
	background: rgb(255 255 255 / 10%);
	color: var(--era-cyan);
	border: 1px solid rgb(255 255 255 / 12%);
}
.activity-card--teal .activity-card__eyebrow { color: var(--era-cyan); }
.activity-card--teal .activity-card__title  { color: #fff; }
.activity-card--teal .activity-card__desc   { color: rgb(255 255 255 / 78%); }
.activity-card--teal .activity-card__link   { color: var(--era-cyan); }
.activity-card--teal .activity-card__link:hover { color: #fff; }

/* Box 2 - tamna premium varijanta */
.activity-card--dark {
	background: var(--era-deep);
	color: #fff;
	border: 1px solid rgb(255 255 255 / 8%);
}
.activity-card--dark::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse at 100% 0%, rgb(139 92 246 / 30%), transparent 55%),
		radial-gradient(ellipse at 0% 100%, rgb(227 6 19 / 18%), transparent 55%);
	pointer-events: none;
	z-index: 0;
}
.activity-card--dark > * { position: relative; z-index: 1; }
.activity-card--dark:hover {
	box-shadow: 0 24px 48px -16px rgb(0 0 0 / 50%);
}
.activity-card--dark .activity-card__icon {
	background: rgb(255 255 255 / 10%);
	color: var(--era-cyan);
	border: 1px solid rgb(255 255 255 / 12%);
}
.activity-card--dark .activity-card__eyebrow {
	color: var(--era-cyan);
}
.activity-card--dark .activity-card__title { color: #fff; }
.activity-card--dark .activity-card__desc  { color: rgb(255 255 255 / 78%); }
.activity-card--dark .activity-card__link  { color: var(--era-cyan); }
.activity-card--dark .activity-card__link:hover { color: #fff; }

/* Activity card unutrašnji elementi */
.activity-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px; height: 56px;
	border-radius: var(--radius-lg);
	flex-shrink: 0;
	transition: transform 280ms var(--ease-out);
}
.activity-card:hover .activity-card__icon {
	transform: scale(1.06) rotate(-3deg);
}
.activity-card__body {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	flex: 1;
}
.activity-card__eyebrow {
	font-family: var(--font-heading);
	font-size: var(--fs-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	margin: 0;
}
.activity-card__title {
	font-size: var(--fs-xl);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.25;
	margin: 0;
}
.activity-card__desc {
	font-size: var(--fs-sm);
	line-height: 1.55;
	margin: 0;
	color: var(--era-muted);
}
.activity-card__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: auto;
	padding-top: 0.5rem;
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: var(--fs-sm);
	text-decoration: none;
	color: var(--era-blue);
	transition: gap 200ms var(--ease-out), color 150ms var(--ease-out);
}
.activity-card__link:hover {
	gap: 0.75rem;
	color: var(--era-blue);
}
.activity-card__link svg {
	transition: transform 200ms var(--ease-out);
}
.activity-card__link:hover svg {
	transform: translateX(2px);
}

/* === Legacy: stari .section--opportunities (zadržan ako neki template još koristi) === */
.section--opportunities {
	background: var(--era-bg);
	padding-top: clamp(2rem, 4vw, 3.5rem);
}

.opp-grid {
	display: grid;
	gap: clamp(1rem, 2vw, 1.5rem);
	grid-template-columns: 1fr;
}
@media (min-width: 900px) {
	.opp-grid { grid-template-columns: 1.5fr 1fr; align-items: stretch; }
}

/* Featured card (lijevo, veliki) */
.opp-featured {
	background: var(--era-bg);
	border: 1px solid var(--era-line);
	border-radius: var(--radius-xl);
	overflow: hidden;
	transition: transform 280ms var(--ease-out), box-shadow 280ms var(--ease-out), border-color 280ms var(--ease-out);
}
.opp-featured:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-lg);
	border-color: transparent;
}
.opp-featured__link {
	display: grid;
	height: 100%;
	color: inherit;
	text-decoration: none;
	grid-template-columns: 1fr;
}
@media (min-width: 720px) {
	.opp-featured__link { grid-template-columns: 1.1fr 1fr; }
}

.opp-featured__media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--era-bg-soft);
}
@media (min-width: 720px) {
	.opp-featured__media { aspect-ratio: auto; min-height: 100%; }
}
.opp-featured__img,
.opp-featured__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 600ms var(--ease-out);
}
.opp-featured:hover .opp-featured__img,
.opp-featured:hover .opp-featured__media img {
	transform: scale(1.04);
}
.opp-featured__placeholder {
	width: 100%; height: 100%;
	background: linear-gradient(135deg, var(--era-bg-soft), var(--era-line));
}

.opp-featured__body {
	padding: clamp(1.5rem, 3vw, 2.25rem);
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}
.opp-featured__eyebrow {
	font-family: var(--font-heading);
	font-size: var(--fs-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--era-red);
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}
.opp-featured__eyebrow::before {
	content: '';
	width: 24px; height: 2px;
	background: var(--era-red);
	display: inline-block;
}
.opp-featured__title {
	font-size: var(--fs-2xl);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.2;
	margin: 0;
	color: var(--era-text);
}
.opp-featured__excerpt {
	font-size: var(--fs-base);
	color: var(--era-muted);
	line-height: 1.55;
	margin: 0;
}
.opp-featured__meta {
	margin-top: auto;
	padding-top: 1rem;
	border-top: 1px solid var(--era-line);
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: var(--fs-sm);
	gap: 1rem;
	flex-wrap: wrap;
}
.opp-featured__meta time { color: var(--era-muted); }
.opp-featured__cta {
	font-family: var(--font-heading);
	font-weight: 600;
	color: var(--era-red);
	transition: transform 200ms var(--ease-out);
}
.opp-featured:hover .opp-featured__cta { transform: translateX(3px); }

/* Badge na featured i mini cards */
.opp-badge {
	position: absolute;
	top: 1rem; left: 1rem;
	padding: 0.35rem 0.75rem;
	background: var(--era-text);
	color: #fff;
	border-radius: var(--radius-pill);
	font-family: var(--font-heading);
	font-size: var(--fs-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	z-index: 2;
}
/* Po-kategorija boje → inc/category-colors.php */

/* Mini lista (desno) */
.opp-list {
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
}

.opp-mini {
	background: var(--era-bg);
	border: 1px solid var(--era-line);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: all 220ms var(--ease-out);
	flex: 1 1 0;
}
.opp-mini:hover {
	border-color: var(--era-red);
	box-shadow: var(--shadow);
	transform: translateY(-1px);
}
.opp-mini__link {
	display: grid;
	grid-template-columns: 110px 1fr;
	height: 100%;
	color: inherit;
	text-decoration: none;
}
.opp-mini__media {
	position: relative;
	overflow: hidden;
	background: var(--era-bg-soft);
}
.opp-mini__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 400ms var(--ease-out);
}
.opp-mini:hover .opp-mini__media img { transform: scale(1.08); }
.opp-mini__placeholder {
	width: 100%; height: 100%;
	background: linear-gradient(135deg, var(--era-bg-soft), var(--era-line));
}
.opp-mini__body {
	padding: 0.875rem 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	justify-content: center;
}
.opp-mini__cat {
	display: inline-flex;
	align-self: flex-start;
	padding: 0.15rem 0.5rem;
	background: var(--era-bg-soft);
	color: var(--era-muted);
	border-radius: var(--radius-pill);
	font-family: var(--font-heading);
	font-size: var(--fs-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
/* Po-kategorija tint → inc/category-colors.php */

.opp-mini__title {
	font-size: var(--fs-sm);
	font-weight: 700;
	margin: 0;
	letter-spacing: -0.01em;
	line-height: 1.35;
	color: var(--era-text);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.opp-mini__date {
	font-size: var(--fs-xs);
	color: var(--era-muted);
}

/* Ispod 900px opp-grid je single-col, opp-list nema fiksne visine →
   flex: 1 1 0 bi sve mini kartice srušio na visinu 0 (vidjeli bi se samo borderi
   kao "fantomske linije"). Vraćamo content-based visinu. */
@media (max-width: 899px) {
	.opp-mini { flex: initial; min-height: 90px; }
}

@media (max-width: 480px) {
	.opp-mini__link { grid-template-columns: 90px 1fr; }
	.opp-mini__body { padding: 0.625rem 0.75rem; }
}

/* Services section */
.section--services { background: var(--era-bg-soft); }
.section__header--center { text-align: center; margin-inline: auto; max-width: 720px; }
.services-grid {
	display: grid;
	gap: clamp(1rem, 2vw, 1.5rem);
	grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .services-grid { grid-template-columns: repeat(4, 1fr); } }

.service-card {
	background: var(--era-bg);
	padding: clamp(1.5rem, 3vw, 2rem);
	border-radius: var(--radius-lg);
	border: 1px solid var(--era-line);
	transition: transform 250ms var(--ease-out), border-color 250ms var(--ease-out), box-shadow 250ms var(--ease-out);
	position: relative;
	overflow: hidden;
}
.service-card::before {
	content: '';
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: var(--era-red);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 350ms var(--ease-out);
}
.service-card:hover {
	transform: translateY(-4px);
	border-color: transparent;
	box-shadow: var(--shadow-lg);
}
.service-card:hover::before { transform: scaleX(1); }

.service-card__icon {
	display: inline-flex;
	width: 48px; aspect-ratio: 1;
	align-items: center;
	justify-content: center;
	background: rgb(227 6 19 / 8%);
	color: var(--era-red);
	border-radius: var(--radius);
	margin-bottom: 1.25rem;
}
.service-card__icon svg { width: 24px; height: 24px; }
.service-card__title {
	font-size: var(--fs-lg);
	font-weight: 700;
	margin: 0 0 0.5rem;
	letter-spacing: -0.02em;
}
.service-card__desc {
	margin: 0;
	font-size: var(--fs-sm);
	color: var(--era-muted);
	line-height: 1.6;
}

/* CTA banner section */
.section--cta { background: var(--era-bg); padding-block: clamp(2rem, 4vw, 4rem); }
.cta-banner {
	background: var(--era-deep);
	color: #fff;
	padding-block: clamp(2rem, 5vw, 4rem);
	padding-inline: clamp(1.5rem, 4vw, 3rem);
	border-radius: var(--radius-xl);
	display: grid;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	align-items: center;
	background-image:
		radial-gradient(ellipse at 100% 0%, rgb(30 79 224 / 30%), transparent 50%),
		radial-gradient(ellipse at 0% 100%, rgb(227 6 19 / 18%), transparent 50%);
}
@media (min-width: 900px) {
	.cta-banner { grid-template-columns: 2fr 1fr; }
}
.cta-banner__title {
	font-size: var(--fs-3xl);
	color: #fff;
	margin: 0.75rem 0 1rem;
	letter-spacing: -0.03em;
}
.cta-banner__lead {
	margin: 0;
	font-size: var(--fs-base);
	color: rgb(255 255 255 / 80%);
	max-width: 60ch;
}
.cta-banner__action { justify-self: end; }
@media (max-width: 899px) {
	/* Outer gutters: .container padding is overridden by .cta-banner, so inset the banner box */
	.section--cta { padding-inline: var(--container-pad); }
	.cta-banner__action { justify-self: start; }
}
.eyebrow--inverted { color: var(--era-cyan); }

/* === PARTNERS - dual marquee s suptilnom pozadinom === */
.section--partners {
	background: var(--era-bg-soft);
	position: relative;
	overflow: hidden;
}

/* Dekorativna pozadina - dva blurred radial gradient kruga */
.partners-bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(circle at 15% 30%, rgb(139 92 246 / 8%), transparent 45%),
		radial-gradient(circle at 85% 70%, rgb(6 182 212 / 8%), transparent 45%);
	z-index: 0;
}
.section--partners > .container,
.section--partners > .marquee { position: relative; z-index: 1; }

/* Marquee track - 2 reda u suprotnim smjerovima */
.marquee {
	overflow: hidden;
	margin-top: clamp(1.25rem, 2vw, 1.75rem);
	-webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
	mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}
.marquee__track {
	display: flex;
	gap: 1rem;
	width: max-content;
	will-change: transform;
}
.marquee--left .marquee__track {
	animation: era-marquee-left 60s linear infinite;
}
.marquee--right .marquee__track {
	animation: era-marquee-right 60s linear infinite;
}
@keyframes era-marquee-left {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
@keyframes era-marquee-right {
	from { transform: translateX(-50%); }
	to   { transform: translateX(0); }
}
/* Pause on hover */
.marquee:hover .marquee__track {
	animation-play-state: paused;
}

/* Partner tile */
.partner-tile {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 0.875rem;
	min-width: 240px;
	max-width: 320px;
	height: 88px;
	padding: 0 1.25rem;
	background: var(--era-bg);
	border: 1px solid var(--era-line);
	border-radius: var(--radius-lg);
	color: var(--era-text);
	text-decoration: none;
	transition: transform 250ms var(--ease-out), box-shadow 250ms var(--ease-out), border-color 250ms var(--ease-out);
	box-shadow: var(--shadow-sm);
}
.partner-tile:hover {
	border-color: var(--era-red);
	transform: translateY(-3px);
	box-shadow: var(--shadow);
}
.partner-tile:hover .partner-tile__mono {
	background: var(--era-red);
	color: #fff;
	border-color: var(--era-red);
}

.partner-tile__mono {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 44px; height: 44px;
	background: linear-gradient(135deg, var(--era-bg-soft), var(--era-line));
	color: var(--era-text);
	border: 1px solid var(--era-line);
	border-radius: var(--radius);
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: var(--fs-base);
	letter-spacing: -0.04em;
	transition: all 250ms var(--ease-out);
}
.partner-tile__name {
	flex: 1;
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: var(--fs-sm);
	color: var(--era-text);
	letter-spacing: -0.01em;
	line-height: 1.3;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

@media (max-width: 640px) {
	.partner-tile {
		min-width: 200px;
		max-width: 260px;
		height: 78px;
		padding: 0 1rem;
		gap: 0.75rem;
	}
	.partner-tile__mono { width: 38px; height: 38px; font-size: var(--fs-sm); }
	.partner-tile__name { font-size: var(--fs-xs); }
}

/* Reduced motion - statically display, ne marquee */
@media (prefers-reduced-motion: reduce) {
	.marquee__track {
		animation: none !important;
		transform: none !important;
		flex-wrap: wrap;
		justify-content: center;
		width: 100%;
	}
	.marquee {
		mask-image: none;
		-webkit-mask-image: none;
		padding: 0 var(--container-pad);
	}
}

/* Tim card (member) */
.tim-card {
	background: var(--era-bg);
	border: 1px solid var(--era-line);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: transform 250ms var(--ease-out), box-shadow 250ms var(--ease-out), border-color 250ms var(--ease-out);
}
.tim-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-lg);
	border-color: transparent;
}
.tim-card__media {
	aspect-ratio: 4 / 5;
	background: linear-gradient(135deg, var(--era-bg-soft), var(--era-line));
	overflow: hidden;
	position: relative;
}
.tim-card__media img {
	width: 100%; height: 100%; object-fit: cover;
}
.tim-card__placeholder {
	display: flex; align-items: center; justify-content: center;
	width: 100%; height: 100%;
	font-family: var(--font-heading); font-size: var(--fs-5xl); font-weight: 800;
	color: var(--era-line);
}
.tim-card__body {
	padding: 1.25rem 1.25rem 1.5rem;
}
.tim-card__name {
	font-size: var(--fs-xl);
	font-weight: 700;
	margin: 0 0 0.25rem;
	letter-spacing: -0.02em;
}
.tim-card__position {
	font-size: var(--fs-sm);
	color: var(--era-red);
	font-weight: 500;
	margin: 0 0 1rem;
}
.tim-card__bio {
	font-size: var(--fs-sm);
	color: var(--era-muted);
	line-height: 1.6;
	margin: 0 0 1.25rem;
}
.tim-card__contact {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	font-size: var(--fs-sm);
	border-top: 1px solid var(--era-line);
	padding-top: 1rem;
}
.tim-card__contact li {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: 0.5rem;
}
.tim-card__contact a {
	display: inline-flex;
	align-items: center;
	flex: 1 1 auto;
	min-width: 0;
	gap: 0.5rem;
	color: var(--era-text);
}
.tim-card__contact li > span {
	flex: 1 1 auto;
	min-width: 0;
}
.tim-card__contact a:hover { color: var(--era-red); }
.tim-card__contact svg {
	flex: 0 0 auto;
	width: 1.25rem;
	height: 1.25rem;
	color: var(--era-red);
	stroke: var(--era-red);
}

.tim-grid {
	display: grid;
	gap: clamp(1.25rem, 2.5vw, 2rem);
	grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .tim-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .tim-grid { grid-template-columns: repeat(3, 1fr); } }

/* Projekt grid */
.projekt-card {
	background: var(--era-bg);
	border: 1px solid var(--era-line);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: transform 250ms var(--ease-out), box-shadow 250ms var(--ease-out);
}
.projekt-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-lg);
}
.projekt-card__media {
	position: relative;
	aspect-ratio: 16 / 10;
	background: var(--era-bg-soft);
	overflow: hidden;
}
.projekt-card:not(.card--media-overlay) .projekt-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	display: block;
	transition: transform 400ms var(--ease-out);
}
.projekt-card:not(.card--media-overlay):hover .projekt-card__media img {
	transform: scale(1.04);
}
.projekt-card:not(.card--media-overlay) .projekt-card__media .projekt-card__meta-badges {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
	align-items: center;
	max-width: calc(100% - 1.5rem);
}
.projekt-card:not(.card--media-overlay) .projekt-card__media .projekt-card__tip {
	position: static;
	top: auto;
	left: auto;
	z-index: auto;
	margin: 0;
	box-shadow: 0 4px 12px rgb(0 0 0 / 18%);
}
/* Tip u header zoni (lijevo) kad je aktivan overlay — kao kategorija na objavama */
:is(.card--post, .projekt-card).card--media-overlay .card__media-zone--category .projekt-card__tip {
	position: static;
	top: auto;
	left: auto;
	z-index: auto;
	margin: 0;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	box-shadow: 0 4px 12px rgb(0 0 0 / 18%);
}
.projekt-card.card--stretched-link .projekt-card__body {
	grid-column: 1;
	grid-row: 2;
	position: relative;
	z-index: 0;
}
.projekt-card.card--stretched-link .projekt-card__fields {
	grid-column: 1;
	grid-row: 3;
	position: relative;
	z-index: 2;
}
.projekt-card__body { padding: 1.25rem 1.25rem 1.5rem; }
.projekt-card__tip {
	display: inline-block;
	padding: 0.25rem 0.625rem;
	background: var(--era-bg-soft);
	color: var(--era-text);
	font-family: var(--font-heading);
	font-size: var(--fs-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	border-radius: var(--radius-pill);
	margin-bottom: 0.625rem;
}
.projekt-card__tip--eu { background: var(--era-blue); color: #fff; }
.projekt-card__tip--nacionalni { background: var(--era-red); color: #fff; }
.projekt-card__media .projekt-card__year {
	position: absolute;
	bottom: 0.75rem;
	right: 0.75rem;
	z-index: 3;
	margin: 0;
	pointer-events: none;
}
:is(.card--post, .projekt-card).card--media-overlay .card__media .projekt-card__year {
	bottom: var(--card-media-edge);
	right: var(--card-media-edge);
}
.projekt-card__year {
	display: inline-block;
	padding: 0.2rem 0.5rem;
	background: rgb(255 255 255 / 88%);
	color: var(--era-muted);
	font-family: var(--font-heading);
	font-size: var(--fs-xs);
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: 1.2;
	border-radius: var(--radius-pill);
	border: 1px solid rgb(255 255 255 / 85%);
	box-shadow: 0 2px 10px rgb(0 0 0 / 10%);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.projekt-grid-group + .projekt-grid-group {
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
.projekt-grid-group__heading {
	margin: 0 0 clamp(1rem, 2.5vw, 1.35rem);
	font-size: clamp(1.35rem, 2.5vw, 1.75rem);
	font-weight: 700;
	letter-spacing: -0.02em;
}
.projekt-card__title {
	font-size: var(--fs-lg);
	font-weight: 700;
	margin: 0 0 0.5rem;
	letter-spacing: -0.02em;
}
.projekt-card__excerpt {
	font-size: var(--fs-sm);
	color: var(--era-muted);
	line-height: 1.55;
	margin: 0;
}
.projekt-card__link {
	display: block;
	color: inherit;
	text-decoration: none;
}
.projekt-card__link:focus-visible {
	outline: 2px solid var(--era-red);
	outline-offset: 3px;
	border-radius: var(--radius-lg);
}
.projekt-card__media-placeholder {
	width: 100%;
	height: 100%;
	min-height: 12rem;
	background: linear-gradient(135deg, var(--era-bg-soft), var(--era-line));
}

.projekt-card__fields {
	padding: 0 1.25rem 1.25rem;
	border-top: 1px solid var(--era-line);
}
.projekt-card__meta {
	margin: 0.75rem 0 0;
	display: grid;
	gap: 0.5rem;
}
.projekt-card__meta-row {
	display: grid;
	gap: 0.15rem;
}
.projekt-card__meta-key {
	font-size: var(--fs-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--era-muted);
	margin: 0;
}
.projekt-card__meta-val {
	font-size: var(--fs-sm);
	margin: 0;
	color: var(--era-text);
}

.projekt-grid {
	display: grid;
	gap: clamp(1.25rem, 2.5vw, 2rem);
	grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .projekt-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .projekt-grid { grid-template-columns: repeat(3, 1fr); } }

.section--projekt-list-intro {
	padding-block: clamp(2rem, 4vw, 3rem) 0;
}
.section--projekt-list {
	padding-block: clamp(2rem, 4vw, 4rem);
}

/* Intro + grid — isti horizontalni box kao globalni .container */
.section--projekt-list-intro .container,
.section--projekt-list .container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad);
}

/* Istaknuta slika — single CPT projekt (uniforman image frame) */
body.single-projekt .single-projekt__figure {
	margin: 0 0 clamp(1.25rem, 3vw, 2rem);
	width: 100%;
}

body.single-projekt .single-projekt__media-wrap .post-article__hero-block.single-projekt__figure {
	margin: 0;
	border-radius: var(--radius-xl);
	overflow: hidden;
	box-shadow: var(--shadow-lg);
}

/* Single projekt — ratio-based image frame (contain + suptilni blur, samo detalj) */
body.single-projekt .single-projekt-media-frame {
	position: relative;
	overflow: hidden;
	background: var(--era-bg-soft);
	display: flex;
	align-items: center;
	justify-content: center;
	isolation: isolate;
	width: 100%;
	line-height: 0;
	padding: clamp(0.5rem, 2vw, 1rem);
}

body.single-projekt .single-projekt-media-frame::before {
	content: '';
	position: absolute;
	inset: -12%;
	z-index: 0;
	background-color: var(--era-bg-soft);
	background-image: var(--projekt-frame-bg, none);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	filter: blur(22px) saturate(1.06);
	transform: scale(1.04);
	opacity: 0.5;
	pointer-events: none;
}

body.single-projekt .single-projekt-media-frame > .single-projekt__image {
	position: relative;
	z-index: 1;
	width: auto;
	height: auto;
	max-width: 100%;
	object-fit: contain;
	object-position: center center;
	display: block;
	border-radius: var(--radius-lg);
}

/* Landscape — široka slika, minimalan vertical padding */
body.single-projekt .single-projekt-media-frame.is-landscape {
	padding: clamp(0.25rem, 1vw, 0.65rem) clamp(0.5rem, 2vw, 1rem);
}

body.single-projekt .single-projekt-media-frame.is-landscape::before {
	inset: -8%;
	opacity: 0.45;
	filter: blur(18px) saturate(1.05);
}

body.single-projekt .single-projekt-media-frame.is-landscape > .single-projekt__image {
	max-width: 100%;
	max-height: clamp(280px, 44vw, 600px);
}

/* Portrait — kompaktan okvir, blur suptilan */
body.single-projekt .single-projekt-media-frame.is-portrait {
	padding: clamp(0.65rem, 2.5vw, 1.15rem) clamp(1rem, 4vw, 1.75rem);
}

body.single-projekt .single-projekt-media-frame.is-portrait::before {
	inset: -10%;
	opacity: 0.38;
	filter: blur(16px) saturate(1.04);
}

body.single-projekt .single-projekt-media-frame.is-portrait > .single-projekt__image {
	max-width: min(100%, 380px);
	max-height: clamp(220px, 50vw, 440px);
}

/* Square — balans */
body.single-projekt .single-projekt-media-frame.is-square {
	padding: clamp(0.45rem, 1.75vw, 0.9rem) clamp(0.75rem, 3vw, 1.35rem);
}

body.single-projekt .single-projekt-media-frame.is-square::before {
	opacity: 0.42;
}

body.single-projekt .single-projekt-media-frame.is-square > .single-projekt__image {
	max-width: min(100%, 480px);
	max-height: clamp(240px, 46vw, 500px);
}

body.single-projekt .post-article__media-inner > .post-media-overlay--single-media {
	z-index: 2;
}

/* Single projekt — tip badge (scoped; grid .projekt-card__tip ostaje netaknut) */
body.single-projekt .post-media-overlay--single-media .projekt-card__tip {
	display: inline-block;
	margin: 0;
	padding: 0.25rem 0.625rem;
	box-sizing: border-box;
	font-family: var(--font-heading);
	font-size: var(--fs-xs);
	font-weight: 600;
	line-height: 1.25;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	border-radius: var(--radius-pill);
	box-shadow: 0 4px 12px rgb(0 0 0 / 18%);
	max-width: calc(100% - 2 * var(--card-media-edge, 0.875rem));
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.single-projekt__content {
	max-width: 48rem;
}
.single-projekt .projekt-card__meta {
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--era-line);
}

/* Single projekt — outro CTA (prije footera) */
body.single-projekt .section--projekt-outro {
	padding-block: clamp(2rem, 4vw, 3rem) clamp(2.5rem, 5vw, 4rem);
	background: var(--era-bg);
}

body.single-projekt .section--projekt-outro--after-gallery {
	background: linear-gradient(180deg, var(--era-bg-soft) 0%, var(--era-bg) 55%);
}

body.single-projekt .site-footer {
	margin-top: 0;
}

body.single-projekt .projekt-outro-card {
	position: relative;
	max-width: 40rem;
	margin-inline: auto;
	padding: clamp(1.75rem, 4vw, 2.5rem);
	text-align: center;
	border-radius: var(--radius-xl);
	border: 1px solid var(--era-line);
	background: rgb(255 255 255 / 78%);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	box-shadow: var(--shadow);
	isolation: isolate;
}

body.single-projekt .projekt-outro-card::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background:
		radial-gradient(ellipse at 20% 0%, rgb(30 79 224 / 6%), transparent 55%),
		radial-gradient(ellipse at 80% 100%, rgb(0 217 255 / 4%), transparent 50%);
	pointer-events: none;
	z-index: -1;
}

body.single-projekt .projekt-outro-card__title {
	font-size: var(--fs-xl);
	font-weight: 700;
	letter-spacing: -0.02em;
	margin: 0 0 0.65rem;
}

body.single-projekt .projekt-outro-card__lead {
	margin: 0 auto 1.25rem;
	max-width: 42ch;
	font-size: var(--fs-sm);
	line-height: 1.6;
}

body.single-projekt .projekt-outro-card__cta {
	margin-top: 0.25rem;
}

@media (max-width: 768px) {
	body.single-projekt .projekt-outro-card__cta {
		width: 100%;
		max-width: 280px;
	}
}

/* Tip filter (toolbar buttons) */
.archive-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.archive-filter {
	display: inline-flex;
	align-items: center;
	padding: 0.5rem 1rem;
	background: var(--era-bg);
	color: var(--era-text);
	border: 1.5px solid var(--era-line);
	border-radius: var(--radius-pill);
	font-family: var(--font-heading);
	font-size: var(--fs-sm);
	font-weight: 600;
	cursor: pointer;
	transition: all 150ms var(--ease-out);
}
.archive-filter:hover { border-color: var(--era-red); color: var(--era-red); }
.archive-filter.is-active {
	background: var(--era-red);
	border-color: var(--era-red);
	color: #fff;
}

/* Archive toolbar (cat filter + search) */
.archive-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: space-between;
	align-items: center;
	margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--era-line);
}
.archive-toolbar .archive-filters { margin-bottom: 0; }

.archive-search {
	display: flex;
	align-items: center;
	gap: 0;
	background: var(--era-bg);
	border: 1.5px solid var(--era-line);
	border-radius: var(--radius-pill);
	padding: 0.125rem;
	transition: border-color 150ms var(--ease-out);
}
.archive-search:focus-within { border-color: var(--era-red); }
.archive-search__input {
	flex: 1;
	min-width: 180px;
	padding: 0.5rem 0.75rem 0.5rem 1rem;
	background: transparent;
	border: none;
	font: inherit;
	font-size: var(--fs-sm);
	color: var(--era-text);
}
.archive-search__input:focus { outline: none; }
.archive-search__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px; height: 36px;
	background: var(--era-red);
	color: #fff;
	border: none;
	border-radius: 999px;
	cursor: pointer;
	transition: background 150ms var(--ease-out);
}
.archive-search__submit:hover { background: var(--era-red-dark); }

.archive-search-status {
	margin: 0 0 1.25rem;
	font-size: var(--fs-sm);
	line-height: 1.5;
}
.archive-search-status em {
	font-style: normal;
	font-weight: 600;
	color: var(--era-text);
}

.archive-empty { padding: 3rem 0; text-align: center; }

/* === DOKUMENTI list === */
.section--dokumenti-content {
	padding-block: clamp(1.75rem, 3vw, 2.75rem) clamp(1.25rem, 2.5vw, 2rem);
	border-bottom: 1px solid var(--era-line);
}
.section--dokumenti-content .docs-page-content {
	max-width: 72ch;
	margin-inline: 0;
}
.section--dokumenti-content + .section--dokumenti {
	padding-top: clamp(1.5rem, 3vw, 2.5rem);
}
.section--dokumenti { padding-block: clamp(2rem, 4vw, 3.5rem); }

.docs-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.875rem 1.25rem;
	margin-bottom: clamp(1.5rem, 3vw, 2rem);
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--era-line);
}
.docs-toolbar__label {
	font-family: var(--font-heading);
	font-size: var(--fs-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--era-muted);
	margin: 0;
}
.docs-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
}
.docs-filter {
	display: inline-flex;
	align-items: center;
	padding: 0.4rem 0.875rem;
	background: var(--era-bg);
	color: var(--era-text);
	border: 1px solid var(--era-line);
	border-radius: var(--radius-pill);
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: var(--fs-xs);
	text-decoration: none;
	transition: all 150ms var(--ease-out);
}
.docs-filter:hover { border-color: var(--era-red); color: var(--era-red); }
.docs-filter.is-active {
	background: var(--era-red);
	color: #fff;
	border-color: var(--era-red);
}

/* Lista dokumenata */
.docs-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
}
.doc-row {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 1rem;
	padding: 1rem 1.25rem;
	background: var(--era-bg);
	border: 1px solid var(--era-line);
	border-radius: var(--radius-lg);
	transition: all 200ms var(--ease-out);
}
.doc-row:hover {
	border-color: var(--era-red);
	transform: translateY(-1px);
	box-shadow: var(--shadow);
}

/* File icon */
.doc-row__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px; height: 44px;
	border-radius: var(--radius);
	flex-shrink: 0;
	background: var(--era-bg-soft);
	color: var(--era-muted);
	border: 1px solid var(--era-line);
}
/* File-type boje za ikone */
.doc-file--pdf  .doc-row__icon { background: rgb(220 38 38 / 8%);  color: #DC2626; border-color: rgb(220 38 38 / 18%); }
.doc-file--doc  .doc-row__icon,
.doc-file--docx .doc-row__icon { background: rgb(30 79 224 / 8%);  color: #1E4FE0; border-color: rgb(30 79 224 / 18%); }
.doc-file--xls  .doc-row__icon,
.doc-file--xlsx .doc-row__icon,
.doc-file--csv  .doc-row__icon { background: rgb(0 178 102 / 10%); color: #00B266; border-color: rgb(0 178 102 / 22%); }
.doc-file--ppt  .doc-row__icon,
.doc-file--pptx .doc-row__icon { background: rgb(245 158 11 / 10%); color: #D97706; border-color: rgb(245 158 11 / 24%); }

/* Body - title + meta */
.doc-row__body { min-width: 0; }
.doc-row__title {
	font-family: var(--font-heading);
	font-size: var(--fs-base);
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--era-text);
	margin: 0 0 0.375rem;
	line-height: 1.35;
}
.doc-row__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.875rem;
	font-size: var(--fs-xs);
	color: var(--era-muted);
}
.doc-row__pill {
	display: inline-flex;
	padding: 0.15rem 0.5rem;
	background: var(--era-bg-soft);
	color: var(--era-text);
	border: 1px solid var(--era-line);
	border-radius: var(--radius-pill);
	font-weight: 600;
	font-family: var(--font-heading);
}
.doc-row__type {
	display: inline-flex;
	padding: 0.05rem 0.4rem;
	background: var(--era-text);
	color: #fff;
	border-radius: var(--radius-sm);
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 0.65rem;
	letter-spacing: 0.05em;
}
.doc-file--pdf  .doc-row__type { background: #DC2626; }
.doc-file--doc  .doc-row__type,
.doc-file--docx .doc-row__type { background: #1E4FE0; }
.doc-file--xls  .doc-row__type,
.doc-file--xlsx .doc-row__type,
.doc-file--csv  .doc-row__type { background: #00B266; }
.doc-file--ppt  .doc-row__type,
.doc-file--pptx .doc-row__type { background: #D97706; }

.doc-row__date {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	color: var(--era-muted);
}
.doc-row__size { font-weight: 500; color: var(--era-muted); }

/* Actions */
.doc-row__actions {
	display: flex;
	gap: 0.5rem;
	flex-shrink: 0;
}
.doc-row__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.5rem 0.875rem;
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: var(--fs-xs);
	border: 1.5px solid var(--era-line);
	border-radius: var(--radius);
	text-decoration: none;
	transition: all 150ms var(--ease-out);
}
.doc-row__btn--view {
	background: transparent;
	color: var(--era-text);
}
.doc-row__btn--view:hover {
	background: var(--era-bg-soft);
	color: var(--era-text);
	border-color: var(--era-text);
}
.doc-row__btn--download {
	background: var(--era-red);
	color: #fff;
	border-color: var(--era-red);
}
.doc-row__btn--download:hover {
	background: var(--era-red-dark);
	border-color: var(--era-red-dark);
	color: #fff;
}

/* Empty state */
.docs-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	padding: 3rem 1rem;
	color: var(--era-muted);
	text-align: center;
}
.docs-empty svg { color: var(--era-line); }
.docs-empty p { font-size: var(--fs-sm); margin: 0; }

/* Mobile */
@media (max-width: 640px) {
	.doc-row {
		grid-template-columns: auto 1fr;
		gap: 0.75rem;
	}
	.doc-row__actions {
		grid-column: 1 / -1;
		justify-content: flex-end;
		padding-top: 0.5rem;
		border-top: 1px solid var(--era-line);
	}
	.doc-row__btn span { display: none; }
	.doc-row__btn { padding: 0.5rem 0.75rem; }
}

/* === KONTAKT page === */
.kontakt-grid {
	display: grid;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	grid-template-columns: 1fr;
	margin-bottom: clamp(2rem, 4vw, 3rem);
}
@media (min-width: 900px) { .kontakt-grid { grid-template-columns: 1fr 1.2fr; } }

.kontakt-card {
	background: var(--era-bg);
	padding: clamp(1.5rem, 3vw, 2.5rem);
	border: 1px solid var(--era-line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
}
.kontakt-card--secondary { background: var(--era-bg-soft); }
.kontakt-card__eyebrow {
	font-size: var(--fs-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--era-red);
	margin: 0 0 0.5rem;
}
.kontakt-card__title {
	font-size: var(--fs-xl);
	margin: 0 0 1.5rem;
	letter-spacing: -0.02em;
}
.kontakt-card__cta { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--era-line); }

.kontakt-list {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
	font-size: var(--fs-sm);
}
.kontakt-list li {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
}
.kontakt-list svg {
	flex-shrink: 0;
	color: var(--era-red);
	margin-top: 0.125em;
}
.kontakt-list a {
	color: var(--era-text);
	font-weight: 500;
	transition: color 150ms var(--ease-out);
}
.kontakt-list a:hover { color: var(--era-red); }

.kontakt-map {
	min-height: 480px;
	border-radius: var(--radius-lg);
	overflow: hidden;
	border: 1px solid var(--era-line);
	background: var(--era-bg-soft);
}
.kontakt-map iframe { display: block; height: 100%; min-height: 480px; }

/* === O NAMA / Mission Vision Values === */
.section--mvc { background: var(--era-bg); }
.mvc-grid {
	display: grid;
	gap: clamp(1.25rem, 2.5vw, 2rem);
	grid-template-columns: 1fr;
}
@media (min-width: 700px)  { .mvc-grid { grid-template-columns: repeat(3, 1fr); } }

.mvc-card {
	padding: clamp(1.5rem, 3vw, 2.5rem);
	background: var(--era-bg-soft);
	border-radius: var(--radius-lg);
	border: 1px solid var(--era-line);
	transition: transform 250ms var(--ease-out), box-shadow 250ms var(--ease-out);
}
.mvc-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.mvc-card__icon {
	display: inline-flex;
	width: 56px; aspect-ratio: 1;
	align-items: center; justify-content: center;
	color: var(--era-red);
	background: rgb(227 6 19 / 8%);
	border-radius: var(--radius);
	margin-bottom: 1.25rem;
}
.mvc-card__icon svg { width: 28px; height: 28px; }
.mvc-card__title { font-size: var(--fs-xl); margin: 0 0 0.5rem; letter-spacing: -0.02em; }
.mvc-card__desc { font-size: var(--fs-sm); color: var(--era-muted); line-height: 1.6; margin: 0; }

.section--tim-teaser { background: var(--era-bg-soft); }

/* === USLUGE / 2-col grid for inner page (prošireni grid) === */
.services-grid--2col { grid-template-columns: 1fr; }
@media (min-width: 700px)  { .services-grid--2col { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .services-grid--2col { grid-template-columns: repeat(3, 1fr); } }

/* === USLUGE / Process steps === */
.section--process { background: var(--era-bg); }
.process-steps {
	list-style: none;
	display: grid;
	gap: clamp(1.25rem, 2.5vw, 2rem);
	grid-template-columns: 1fr;
	counter-reset: step;
}
@media (min-width: 700px)  { .process-steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .process-steps { grid-template-columns: repeat(4, 1fr); } }

.process-step {
	position: relative;
	padding: 2rem 1.5rem 1.5rem;
	background: var(--era-bg-soft);
	border-radius: var(--radius-lg);
	border: 1px solid var(--era-line);
}
.process-step__num {
	font-family: var(--font-heading);
	font-size: var(--fs-3xl);
	font-weight: 800;
	color: var(--era-red);
	line-height: 1;
	letter-spacing: -0.04em;
	margin-bottom: 0.75rem;
	opacity: 0.6;
}
.process-step__title {
	font-size: var(--fs-lg);
	margin: 0 0 0.5rem;
	letter-spacing: -0.02em;
}
.process-step p {
	font-size: var(--fs-sm);
	color: var(--era-muted);
	line-height: 1.55;
	margin: 0;
}

/* === SUVENIRNICA === */
.suvenirnica-social {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.625rem;
	margin-top: 1rem;
}
.suvenirnica-social__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	color: rgb(255 255 255 / 78%);
	background: rgb(255 255 255 / 8%);
	border: 1px solid rgb(255 255 255 / 14%);
	transition:
		color 200ms var(--ease-out),
		background 200ms var(--ease-out),
		border-color 200ms var(--ease-out),
		transform 200ms var(--ease-out),
		opacity 200ms var(--ease-out);
}
.suvenirnica-social__link:hover,
.suvenirnica-social__link:focus-visible {
	color: var(--era-cyan);
	background: rgb(255 255 255 / 14%);
	border-color: rgb(6 182 212 / 40%);
	transform: scale(1.06);
	opacity: 1;
}
.suvenirnica-social__link:focus-visible {
	outline: 2px solid var(--era-cyan);
	outline-offset: 2px;
}

.suvenirnica-grid {
	display: grid;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	grid-template-columns: 1fr;
}
@media (min-width: 900px) { .suvenirnica-grid { grid-template-columns: 1fr 1fr; align-items: stretch; } }

.suvenirnica-copy h2 {
	font-size: var(--fs-2xl);
	letter-spacing: -0.02em;
	margin: 0 0 1rem;
}
.suvenirnica-copy h3 {
	margin-top: 1.75rem;
	font-size: var(--fs-base);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--era-muted);
	font-weight: 600;
}

.section--suvenirnica .kontakt-list li {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
}

.section--suvenirnica .kontakt-list svg {
	flex: 0 0 auto;
	width: 1.375rem;
	height: 1.375rem;
	color: var(--era-red);
	stroke: var(--era-red);
	margin-top: 0.1em;
}

.section--suvenirnica .kontakt-list li > a,
.section--suvenirnica .kontakt-list li > span {
	flex: 1 1 auto;
	min-width: 0;
}

.suvenirnica-map {
	min-height: 420px;
	border-radius: var(--radius-lg);
	overflow: hidden;
	border: 1px solid var(--era-line);
}
.suvenirnica-map iframe { display: block; height: 100%; min-height: 420px; }

.suvenirnica-copy__editor { margin-bottom: 0; }
.suvenirnica-copy__editor > *:last-child { margin-bottom: 0; }

/* Galerija ispod sadržaja + karte */
.section--suvenirnica-gallery,
.section--projekt-gallery {
	padding-block: clamp(2.5rem, 5vw, 4rem);
	background: var(--era-bg-soft);
	border-top: 1px solid var(--era-line);
}

.projekt-gallery__lead {
	max-width: 42rem;
	margin-inline: auto;
}

.suvenirnica-gallery__header {
	margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.suvenirnica-gallery-grid {
	display: grid;
	gap: clamp(0.75rem, 2vw, 1.25rem);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 640px) {
	.suvenirnica-gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
	.suvenirnica-gallery-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.suvenirnica-gallery-grid__item {
	margin: 0;
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
}

.suvenirnica-gallery-grid__img {
	width: 100%;
	height: auto;
	display: block;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 0.35s ease;
}

.suvenirnica-gallery-grid__item:hover .suvenirnica-gallery-grid__img {
	transform: scale(1.03);
}

.suvenirnica-gallery-grid__trigger {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
	font: inherit;
	color: inherit;
	border-radius: inherit;
}

.suvenirnica-gallery-grid__trigger:focus-visible {
	outline: 2px solid var(--era-red);
	outline-offset: 3px;
}

/* Galerija → CTA: meki prijelaz u glass panel sekciju */
.section--suvenirnica-gallery:has(+ .cta-suvenirnica-social) {
	padding-bottom: clamp(3.5rem, 7vw, 5rem);
	border-bottom: none;
}

@keyframes cta-suvenirnica-enter {
	from {
		opacity: 0;
		transform: translateY(1.25rem);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Suvenirnica — social CTA (Koncept 2: unified glass panel) */
.cta-suvenirnica-social {
	--cta-suvenirnica-fb: #1877f2;
	--cta-suvenirnica-ig: #dd2a7b;
	--cta-suvenirnica-ig-gradient: linear-gradient(180deg, #f58529 0%, #dd2a7b 52%, #8134af 100%);
	position: relative;
	isolation: isolate;
	padding-block: clamp(3.5rem, 7vw, 5.5rem) clamp(4rem, 8vw, 5.5rem);
	background:
		radial-gradient(ellipse 90% 55% at 50% 0%, rgb(30 79 224 / 7%), transparent 68%),
		radial-gradient(ellipse 55% 45% at 92% 88%, rgb(221 42 123 / 5%), transparent 62%),
		radial-gradient(ellipse 45% 40% at 8% 75%, rgb(0 217 255 / 5%), transparent 58%),
		linear-gradient(180deg, var(--era-bg-soft) 0%, var(--era-bg) 62%, var(--era-bg) 100%);
	border-top: 1px solid rgb(0 0 0 / 5%);
}

.cta-suvenirnica-social::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 70% 50% at 50% 45%, rgb(255 255 255 / 55%), transparent 72%);
	pointer-events: none;
	z-index: 0;
}

.cta-suvenirnica-social > .container {
	position: relative;
	z-index: 1;
}

.cta-suvenirnica-social--after-gallery {
	background:
		radial-gradient(ellipse 90% 55% at 50% 0%, rgb(30 79 224 / 7%), transparent 68%),
		radial-gradient(ellipse 55% 45% at 92% 88%, rgb(221 42 123 / 5%), transparent 62%),
		radial-gradient(ellipse 45% 40% at 8% 75%, rgb(0 217 255 / 5%), transparent 58%),
		linear-gradient(180deg, var(--era-bg-soft) 0%, var(--era-bg) 62%, var(--era-bg) 100%);
}

.section--suvenirnica + .cta-suvenirnica-social {
	margin-top: clamp(1.5rem, 4vw, 2.5rem);
}

body.page-template-suvenirnica:has(.cta-suvenirnica-social) .site-footer,
body.page-template-page-templates-suvenirnica-php:has(.cta-suvenirnica-social) .site-footer {
	margin-top: 0;
}

/* Unified glass panel — grid kao jedan blok */
.cta-suvenirnica-social__grid {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
	max-width: 56rem;
	margin-inline: auto;
	border: 1px solid rgb(255 255 255 / 85%);
	border-radius: var(--radius-xl);
	background: rgb(255 255 255 / 92%);
	-webkit-backdrop-filter: blur(20px) saturate(1.15);
	backdrop-filter: blur(20px) saturate(1.15);
	box-shadow:
		0 0 0 1px rgb(0 0 0 / 4%),
		0 4px 16px -4px rgb(15 17 36 / 6%),
		0 20px 56px -16px rgb(15 17 36 / 12%);
	isolation: isolate;
	overflow: hidden;
	transition: box-shadow 320ms var(--ease-out);
}

@supports (animation-timeline: view()) {
	.cta-suvenirnica-social__grid {
		animation: cta-suvenirnica-enter 0.7s var(--ease-out) both;
		animation-timeline: view();
		animation-range: entry 8% entry 42%;
	}
}

.cta-suvenirnica-social__grid::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background:
		radial-gradient(ellipse at 16% 0%, rgb(30 79 224 / 9%), transparent 50%),
		radial-gradient(ellipse at 84% 100%, rgb(0 217 255 / 7%), transparent 46%),
		radial-gradient(ellipse at 72% 18%, rgb(221 42 123 / 5%), transparent 42%);
	pointer-events: none;
	z-index: 0;
}

.cta-suvenirnica-social__grid:has(.cta-suvenirnica-social__card:hover),
.cta-suvenirnica-social__grid:has(.cta-suvenirnica-social__card:focus-visible) {
	box-shadow:
		0 0 0 1px rgb(0 0 0 / 5%),
		0 8px 24px -6px rgb(15 17 36 / 8%),
		0 28px 64px -18px rgb(15 17 36 / 16%);
}

@media (min-width: 768px) {
	.cta-suvenirnica-social__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Kartice unutar panela — bez vlastitog okvira */
.cta-suvenirnica-social__card {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	width: 100%;
	max-width: none;
	min-height: 100%;
	padding: clamp(1.5rem, 3vw, 2.125rem);
	border: none;
	border-radius: 0;
	background: transparent;
	color: var(--era-text);
	text-decoration: none;
	box-shadow: none;
	overflow: hidden;
	transition: background 220ms var(--ease-out);
}

.cta-suvenirnica-social__card > * {
	position: relative;
	z-index: 1;
}

.cta-suvenirnica-social__card--facebook::before,
.cta-suvenirnica-social__card--instagram::before {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
}

.cta-suvenirnica-social__card--facebook::before {
	background: radial-gradient(ellipse at 0% 100%, rgb(24 119 242 / 7%), transparent 58%);
}

.cta-suvenirnica-social__card--instagram::before {
	background:
		radial-gradient(ellipse at 100% 0%, rgb(245 133 41 / 8%), transparent 52%),
		radial-gradient(ellipse at 85% 85%, rgb(129 52 175 / 6%), transparent 48%);
}

.cta-suvenirnica-social__card:not(:last-child) {
	border-bottom: 1px solid rgb(0 0 0 / 6%);
}

@media (min-width: 768px) {
	.cta-suvenirnica-social__card:not(:last-child) {
		border-bottom: none;
		border-right: 1px solid rgb(0 0 0 / 6%);
	}
}

.cta-suvenirnica-social__card:hover,
.cta-suvenirnica-social__card:focus-visible {
	transform: none;
	box-shadow: none;
}

.cta-suvenirnica-social__card--facebook:hover,
.cta-suvenirnica-social__card--facebook:focus-visible {
	background: rgb(24 119 242 / 6%);
}

.cta-suvenirnica-social__card--instagram:hover,
.cta-suvenirnica-social__card--instagram:focus-visible {
	background: rgb(221 42 123 / 6%);
}

.cta-suvenirnica-social__card:focus-visible {
	outline: none;
}

.cta-suvenirnica-social__card:focus-visible::after {
	content: '';
	position: absolute;
	inset: 3px;
	border: 2px solid var(--era-red);
	border-radius: calc(var(--radius-xl) - 4px);
	pointer-events: none;
	z-index: 2;
}

@media (min-width: 768px) {
	.cta-suvenirnica-social__card:first-child:focus-visible::after {
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
	}

	.cta-suvenirnica-social__card:last-child:focus-visible::after {
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;
	}
}

/* Lijevi stripe → brand dot pored network labela */
.cta-suvenirnica-social__accent {
	display: none;
}

.cta-suvenirnica-social__top {
	display: flex;
	align-items: center;
	gap: 0.625rem;
}

.cta-suvenirnica-social__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 2.375rem;
	height: 2.375rem;
	border-radius: 50%;
	border: none;
	transition:
		color 220ms var(--ease-out),
		transform 220ms var(--ease-out),
		background 220ms var(--ease-out),
		box-shadow 220ms var(--ease-out);
}

.cta-suvenirnica-social__card--facebook .cta-suvenirnica-social__icon {
	color: var(--cta-suvenirnica-fb);
	background: rgb(24 119 242 / 10%);
}

.cta-suvenirnica-social__card--instagram .cta-suvenirnica-social__icon {
	color: #c13584;
	background: linear-gradient(135deg, rgb(245 133 41 / 12%), rgb(221 42 123 / 12%) 52%, rgb(129 52 175 / 12%));
}

.cta-suvenirnica-social__card:hover .cta-suvenirnica-social__icon,
.cta-suvenirnica-social__card:focus-visible .cta-suvenirnica-social__icon {
	transform: scale(1.06);
}

.cta-suvenirnica-social__card--facebook:hover .cta-suvenirnica-social__icon,
.cta-suvenirnica-social__card--facebook:focus-visible .cta-suvenirnica-social__icon {
	color: var(--cta-suvenirnica-fb);
	background: rgb(24 119 242 / 14%);
	box-shadow: 0 0 0 1px rgb(24 119 242 / 18%);
}

.cta-suvenirnica-social__card--instagram:hover .cta-suvenirnica-social__icon,
.cta-suvenirnica-social__card--instagram:focus-visible .cta-suvenirnica-social__icon {
	color: #dd2a7b;
	background: linear-gradient(135deg, rgb(245 133 41 / 16%), rgb(221 42 123 / 16%) 52%, rgb(129 52 175 / 16%));
	box-shadow: 0 0 0 1px rgb(221 42 123 / 16%);
}

/* Customizer icon stilovi — prilagođeni glass panelu */
.cta-suvenirnica-social__card--icon-filled .cta-suvenirnica-social__icon {
	color: var(--era-muted);
	background: rgb(0 0 0 / 5%);
	box-shadow: none;
}

.cta-suvenirnica-social__card--icon-outline .cta-suvenirnica-social__icon {
	color: var(--era-text);
	background: transparent;
	border: 1.5px solid var(--era-line);
	box-shadow: none;
}

.cta-suvenirnica-social__card--icon-circle .cta-suvenirnica-social__icon {
	background: rgb(0 0 0 / 4%);
	border: 1px solid var(--era-line);
	box-shadow: none;
}

.cta-suvenirnica-social__card--instagram.cta-suvenirnica-social__card--icon-gradient .cta-suvenirnica-social__icon {
	color: #c13584;
	background: linear-gradient(135deg, rgb(245 133 41 / 12%), rgb(221 42 123 / 12%) 52%, rgb(129 52 175 / 12%));
	box-shadow: none;
}

.cta-suvenirnica-social__card--icon-filled.cta-suvenirnica-social__card--facebook .cta-suvenirnica-social__icon {
	color: var(--cta-suvenirnica-fb);
	background: rgb(24 119 242 / 10%);
}

.cta-suvenirnica-social__card--icon-filled.cta-suvenirnica-social__card--instagram .cta-suvenirnica-social__icon {
	color: #c13584;
	background: linear-gradient(135deg, rgb(245 133 41 / 12%), rgb(221 42 123 / 12%) 52%, rgb(129 52 175 / 12%));
}

.cta-suvenirnica-social__card--icon-filled.cta-suvenirnica-social__card--facebook:hover .cta-suvenirnica-social__icon,
.cta-suvenirnica-social__card--icon-filled.cta-suvenirnica-social__card--facebook:focus-visible .cta-suvenirnica-social__icon {
	color: #fff;
	background: var(--cta-suvenirnica-fb);
	box-shadow: 0 0 0 1px rgb(24 119 242 / 22%);
}

.cta-suvenirnica-social__card--icon-filled.cta-suvenirnica-social__card--instagram:hover .cta-suvenirnica-social__icon,
.cta-suvenirnica-social__card--icon-filled.cta-suvenirnica-social__card--instagram:focus-visible .cta-suvenirnica-social__icon {
	color: #fff;
	background: var(--cta-suvenirnica-ig-gradient);
	box-shadow: 0 0 0 1px rgb(221 42 123 / 20%);
}

.cta-suvenirnica-social__card--instagram.cta-suvenirnica-social__card--icon-gradient:hover .cta-suvenirnica-social__icon,
.cta-suvenirnica-social__card--instagram.cta-suvenirnica-social__card--icon-gradient:focus-visible .cta-suvenirnica-social__icon {
	color: #fff;
	background: var(--cta-suvenirnica-ig-gradient);
	box-shadow: 0 0 0 1px rgb(221 42 123 / 20%);
}

.cta-suvenirnica-social__body {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	flex: 1;
}

.cta-suvenirnica-social__network {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-family: var(--font-heading);
	font-size: var(--fs-xs);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--era-muted);
}

.cta-suvenirnica-social__network::before {
	content: '';
	flex-shrink: 0;
	width: 7px;
	height: 7px;
	border-radius: 50%;
}

.cta-suvenirnica-social__card--facebook .cta-suvenirnica-social__network::before {
	background: var(--cta-suvenirnica-fb);
	box-shadow: 0 0 0 2px rgb(24 119 242 / 14%);
}

.cta-suvenirnica-social__card--instagram .cta-suvenirnica-social__network::before {
	background: var(--cta-suvenirnica-ig-gradient);
	box-shadow: 0 0 0 2px rgb(221 42 123 / 12%);
}

.cta-suvenirnica-social__title {
	font-family: var(--font-heading);
	font-size: clamp(1.125rem, 2vw, 1.3125rem);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.015em;
	color: var(--era-black);
}

.cta-suvenirnica-social__text {
	font-size: var(--fs-sm);
	line-height: 1.65;
	color: var(--era-muted);
	max-width: 38ch;
}

.cta-suvenirnica-social__cta {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 0.4rem;
	margin-top: 0.35rem;
	padding-block: 0.15rem;
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--era-text);
	text-decoration: none;
	border-bottom: 1.5px solid rgb(0 0 0 / 12%);
	transition:
		color 200ms var(--ease-out),
		gap 200ms var(--ease-out),
		border-color 200ms var(--ease-out),
		transform 200ms var(--ease-out);
}

.cta-suvenirnica-social__card--facebook:hover .cta-suvenirnica-social__cta,
.cta-suvenirnica-social__card--facebook:focus-visible .cta-suvenirnica-social__cta {
	color: var(--cta-suvenirnica-fb);
	gap: 0.55rem;
	border-bottom-color: var(--cta-suvenirnica-fb);
	transform: translateX(2px);
}

.cta-suvenirnica-social__card--instagram:hover .cta-suvenirnica-social__cta,
.cta-suvenirnica-social__card--instagram:focus-visible .cta-suvenirnica-social__cta {
	color: var(--cta-suvenirnica-ig);
	gap: 0.55rem;
	border-bottom-color: var(--cta-suvenirnica-ig);
	transform: translateX(2px);
}

@media (prefers-reduced-motion: reduce) {
	.cta-suvenirnica-social__grid {
		animation: none;
	}

	.cta-suvenirnica-social__card:hover .cta-suvenirnica-social__cta,
	.cta-suvenirnica-social__card:focus-visible .cta-suvenirnica-social__cta {
		transform: none;
	}
}

/* Lightbox overlay (Suvenirnica galerija) */
.suvenirnica-lightbox {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.28s ease, visibility 0.28s ease;
}

.suvenirnica-lightbox.is-open {
	opacity: 1;
	visibility: visible;
}

.suvenirnica-lightbox[hidden] {
	display: none !important;
}

body.has-suvenirnica-lightbox {
	overflow: hidden;
}

.suvenirnica-lightbox__backdrop {
	position: absolute;
	inset: 0;
	background: rgb(10 10 15 / 88%);
	backdrop-filter: blur(4px);
	cursor: pointer;
}

.suvenirnica-lightbox__dialog {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: min(96vw, 1200px);
	height: min(92vh, 900px);
	padding: clamp(3rem, 6vw, 4.5rem) clamp(3.5rem, 8vw, 5rem);
	pointer-events: none;
}

.suvenirnica-lightbox__dialog > * {
	pointer-events: auto;
}

.suvenirnica-lightbox__figure {
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	max-width: 100%;
	max-height: 100%;
}

.suvenirnica-lightbox__img {
	display: block;
	max-width: 100%;
	max-height: min(78vh, 820px);
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: var(--radius-lg);
	box-shadow: 0 24px 80px rgb(0 0 0 / 45%);
	transform: scale(0.96);
	transition: transform 0.28s ease, opacity 0.28s ease;
}

.suvenirnica-lightbox.is-open .suvenirnica-lightbox__img {
	transform: scale(1);
}

.suvenirnica-lightbox__counter {
	font-size: var(--fs-sm);
	color: rgb(255 255 255 / 75%);
	letter-spacing: 0.04em;
}

.suvenirnica-lightbox__close,
.suvenirnica-lightbox__nav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgb(255 255 255 / 12%);
	color: #fff;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease;
}

.suvenirnica-lightbox__close {
	position: absolute;
	top: clamp(0.75rem, 2vw, 1.25rem);
	right: clamp(0.75rem, 2vw, 1.25rem);
	z-index: 4;
}

.suvenirnica-lightbox__close:hover,
.suvenirnica-lightbox__nav:hover:not(:disabled) {
	background: rgb(255 255 255 / 22%);
}

.suvenirnica-lightbox__close:focus-visible,
.suvenirnica-lightbox__nav:focus-visible {
	outline: 2px solid var(--era-cyan);
	outline-offset: 2px;
}

.suvenirnica-lightbox__nav:disabled {
	opacity: 0.35;
	cursor: default;
}

/* Desktop lightbox — strelice izvan figure (grid prilagođen širini slike) */
@media (min-width: 769px) {
	.suvenirnica-lightbox__stage {
		--lb-nav-col: 52px;
		--lb-nav-gap: clamp(0.75rem, 2vw, 1.25rem);
		position: relative;
		display: grid;
		grid-template-columns: var(--lb-nav-col) minmax(0, max-content) var(--lb-nav-col);
		column-gap: var(--lb-nav-gap);
		align-items: center;
		justify-content: center;
		width: fit-content;
		max-width: 100%;
		height: 100%;
		min-height: 0;
		margin-inline: auto;
	}

	.suvenirnica-lightbox__figure {
		grid-column: 2;
		grid-row: 1;
		max-width: 100%;
	}

	.suvenirnica-lightbox__nav-bar {
		grid-column: 1 / -1;
		grid-row: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
		inset: auto;
		width: 100%;
		height: 100%;
		align-self: stretch;
		margin: 0;
		padding: 0;
		pointer-events: none;
		z-index: 2;
	}

	.suvenirnica-lightbox__nav-bar .suvenirnica-lightbox__nav {
		position: relative;
		inset: auto;
		top: auto;
		right: auto;
		bottom: auto;
		left: auto;
		transform: none;
		pointer-events: auto;
		flex-shrink: 0;
		align-self: center;
	}

	.suvenirnica-lightbox__nav-bar .suvenirnica-lightbox__nav:hover:not(:disabled),
	.suvenirnica-lightbox__nav-bar .suvenirnica-lightbox__nav:focus-visible {
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.suvenirnica-lightbox,
	.suvenirnica-lightbox__img {
		transition: none;
	}
}

/* Galerija — mobile (≤768px): veći thumbs + fullscreen lightbox */
@media (max-width: 768px) {
	.section--suvenirnica-gallery > .container,
	.section--projekt-gallery > .container {
		padding-inline: 0.75rem;
	}

	.section--suvenirnica-gallery,
	.section--projekt-gallery {
		padding-block: clamp(1.75rem, 4vw, 2.5rem);
	}

	.suvenirnica-gallery__header,
	.projekt-gallery__header {
		margin-bottom: 1.25rem;
	}

	.suvenirnica-gallery-grid {
		grid-template-columns: 1fr;
		gap: 0.75rem;
	}

	.suvenirnica-gallery-grid__item {
		border-radius: var(--radius);
	}

	.suvenirnica-gallery-grid__img {
		aspect-ratio: 3 / 2;
		min-height: 200px;
	}

	.section--suvenirnica-gallery:has(+ .cta-suvenirnica-social) {
		padding-bottom: clamp(2.75rem, 6vw, 4rem);
	}

	.cta-suvenirnica-social {
		padding-block: clamp(2.75rem, 6vw, 4rem) clamp(3rem, 7vw, 4.5rem);
	}

	.section--suvenirnica + .cta-suvenirnica-social {
		margin-top: clamp(1.25rem, 3.5vw, 2rem);
	}

	.suvenirnica-lightbox__dialog {
		width: 100vw;
		height: 100vh;
		height: 100dvh;
		max-width: none;
		max-height: none;
		padding:
			max(0.5rem, env(safe-area-inset-top))
			max(12px, env(safe-area-inset-right))
			max(0.75rem, env(safe-area-inset-bottom))
			max(12px, env(safe-area-inset-left));
		box-sizing: border-box;
		flex-direction: column;
		align-items: stretch;
		justify-content: center;
	}

	.suvenirnica-lightbox__stage {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		flex: 1;
		min-height: 0;
		width: 100%;
	}

	.suvenirnica-lightbox__figure {
		flex: 0 1 auto;
		width: 100%;
		max-height: calc(100dvh - 132px);
		justify-content: center;
		gap: 0.5rem;
		padding: 0;
		min-height: 0;
	}

	.suvenirnica-lightbox__img {
		max-width: 100%;
		max-height: calc(100dvh - 160px);
		width: auto;
		height: auto;
		border-radius: 0;
		box-shadow: none;
		object-fit: contain;
		transform: none;
	}

	.suvenirnica-lightbox.is-open .suvenirnica-lightbox__img {
		transform: none;
	}

	.suvenirnica-lightbox__nav-bar {
		position: static;
		inset: auto;
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 24px;
		margin-top: 12px;
		flex-shrink: 0;
		width: 100%;
		padding-inline: 0;
		pointer-events: auto;
		z-index: auto;
	}

	.suvenirnica-lightbox__nav-bar:not(:has(.suvenirnica-lightbox__nav:not([hidden]))) {
		display: none;
	}

	.suvenirnica-lightbox__nav-bar .suvenirnica-lightbox__nav,
	.suvenirnica-lightbox__nav-bar .suvenirnica-lightbox__nav--prev,
	.suvenirnica-lightbox__nav-bar .suvenirnica-lightbox__nav--next {
		position: static;
		inset: auto;
		top: auto;
		right: auto;
		bottom: auto;
		left: auto;
		display: inline-flex;
		width: 44px;
		height: 44px;
		min-width: 44px;
		min-height: 44px;
		margin: 0;
		transform: none;
		pointer-events: auto;
		background: rgb(0 0 0 / 48%);
		-webkit-backdrop-filter: blur(8px);
		backdrop-filter: blur(8px);
		border: 1px solid rgb(255 255 255 / 18%);
	}

	.suvenirnica-lightbox__nav-bar .suvenirnica-lightbox__nav:hover:not(:disabled),
	.suvenirnica-lightbox__nav-bar .suvenirnica-lightbox__nav:focus-visible {
		background: rgb(0 0 0 / 62%);
		transform: none;
	}

	.suvenirnica-lightbox__close {
		top: max(0.625rem, env(safe-area-inset-top));
		right: max(0.625rem, env(safe-area-inset-right));
		width: 40px;
		height: 40px;
		background: rgb(0 0 0 / 50%);
		z-index: 4;
	}

	.suvenirnica-lightbox__counter {
		position: static;
		left: auto;
		bottom: auto;
		transform: none;
		margin: 0;
		padding: 0;
		border-radius: 0;
		background: transparent;
		font-size: var(--fs-xs);
	}
}

/* Touch uređaji — isti mobile lightbox nav layout (real device fallback) */
@media (hover: none) and (pointer: coarse) and (max-width: 1024px) {
	.suvenirnica-lightbox__stage {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		flex: 1;
		min-height: 0;
		width: 100%;
		position: relative;
	}

	.suvenirnica-lightbox__nav-bar {
		position: static;
		inset: auto;
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 24px;
		margin-top: 12px;
		flex-shrink: 0;
		width: 100%;
		padding-inline: 0;
		pointer-events: auto;
	}

	.suvenirnica-lightbox__nav-bar .suvenirnica-lightbox__nav,
	.suvenirnica-lightbox__nav-bar .suvenirnica-lightbox__nav--prev,
	.suvenirnica-lightbox__nav-bar .suvenirnica-lightbox__nav--next {
		position: static;
		inset: auto;
		top: auto;
		right: auto;
		bottom: auto;
		left: auto;
		transform: none;
		pointer-events: auto;
	}
}

/* Hero cover (featured image) + CTA */
.category-hero--has-cover {
	background-image: none;
}

.category-hero__cover {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.38;
	z-index: 0;
}

.category-hero--has-cover .category-hero__pattern {
	opacity: 0.92;
}

.category-hero--has-cover::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgb(14 17 36 / 72%) 0%, rgb(14 17 36 / 45%) 50%, rgb(14 17 36 / 65%) 100%);
	z-index: 0;
	pointer-events: none;
}

.category-hero--has-cover .category-hero__inner {
	position: relative;
	z-index: 1;
}

.category-hero__actions {
	margin: 1.25rem 0 0;
}

.category-hero__actions--group {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
}

.category-hero__actions--group .btn--ghost {
	border-color: rgb(255 255 255 / 35%);
	color: #fff;
}

.category-hero__actions--group .btn--ghost:hover {
	border-color: #fff;
	background: rgb(255 255 255 / 10%);
	color: #fff;
}

.category-hero__actions .btn--hero-cta {
	box-shadow: 0 4px 20px rgb(227 6 19 / 35%);
}

.section--projekti-page {
	padding-block: clamp(2.5rem, 5vw, 4.5rem);
}

/* Intro */
.projekti-intro {
	margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.projekti-intro__box {
	max-width: 50rem;
	margin-inline: auto;
	padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 3vw, 2rem);
	background: var(--era-bg);
	border: 1px solid var(--era-line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
	font-size: var(--fs-md);
	line-height: 1.7;
	color: var(--era-text);
}

.projekti-intro__box > :first-child { margin-top: 0; }
.projekti-intro__box > :last-child { margin-bottom: 0; }
.projekti-intro__box p + p { margin-top: 1em; }

/* Showcase grid */
.projekti-showcase {
	margin-bottom: clamp(3rem, 6vw, 5rem);
}

.projekti-showcase__header {
	text-align: center;
	max-width: 40rem;
	margin-inline: auto;
	margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}

.projekti-showcase__header .eyebrow {
	margin-bottom: 0.5rem;
}

.projekti-showcase__header .section__title {
	margin: 0 0 0.75rem;
}

.projekti-showcase__header .section__lead {
	margin: 0;
}

.projekti-page__preview {
	margin-top: 0;
}

.projekt-grid--preview {
	gap: clamp(1.5rem, 3vw, 2.25rem);
}

.projekt-grid--preview .projekt-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 16px 40px rgb(15 23 42 / 12%);
}

/* CTA kartice */
.projekti-cta-band {
	padding-top: clamp(2rem, 4vw, 3rem);
	border-top: 1px solid var(--era-line);
}

.projekti-cta-band__header {
	text-align: center;
	max-width: 36rem;
	margin-inline: auto;
	margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.projekti-cta-band__header .section__title {
	margin: 0 0 0.65rem;
}

.projekti-cta-band__header .section__lead {
	margin: 0;
}

.projekti-cta-cards {
	display: grid;
	gap: clamp(1rem, 2.5vw, 1.5rem);
	grid-template-columns: 1fr;
}

@media (min-width: 768px) {
	.projekti-cta-cards {
		grid-template-columns: repeat(2, 1fr);
	}
}

.projekti-cta-card {
	border-radius: var(--radius-lg);
	border: 1px solid var(--era-line);
	background: var(--era-bg);
	overflow: hidden;
	transition: transform 250ms var(--ease-out), box-shadow 250ms var(--ease-out);
}

.projekti-cta-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg);
}

.projekti-cta-card--eu {
	border-top: 4px solid var(--era-blue);
}

.projekti-cta-card--nacionalni {
	border-top: 4px solid var(--era-red);
}

.projekti-cta-card__inner {
	padding: clamp(1.35rem, 3vw, 1.75rem);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.75rem;
	height: 100%;
}

.projekti-cta-card__eyebrow {
	margin: 0;
}

.projekti-cta-card__title {
	font-size: var(--fs-xl);
	font-weight: 700;
	margin: 0;
	letter-spacing: -0.02em;
}

.projekti-cta-card__lead {
	margin: 0;
	font-size: var(--fs-sm);
	color: var(--era-muted);
	line-height: 1.6;
	flex: 1;
}

.projekti-cta-card__btn {
	margin-top: auto;
}

/* Scroll reveal (Projekti landing) */
.projekti-page [data-reveal],
.projekti-page [data-reveal-stagger] > * {
	opacity: 0;
	transform: translateY(1.25rem);
	transition:
		opacity 0.55s var(--ease-out),
		transform 0.55s var(--ease-out);
	transition-delay: var(--reveal-delay, 0ms);
}

.projekti-page [data-reveal].is-visible,
.projekti-page [data-reveal-stagger] > *.is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.projekti-page [data-reveal],
	.projekti-page [data-reveal-stagger] > * {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

.section--o-nama-editor {
	padding-block: clamp(2rem, 4vw, 3.5rem);
}

.o-nama-page__content {
	max-width: 780px;
	margin-inline: auto;
}

.section--nase-usluge-editor {
	padding-block: clamp(2rem, 4vw, 3.5rem);
}

.nase-usluge-page__content {
	max-width: 780px;
	margin-inline: auto;
}

.section--nas-tim-editor {
	padding-block: clamp(2rem, 4vw, 3.5rem);
}

.nas-tim-page__content {
	max-width: 780px;
	margin-inline: auto;
}

/* ============ 12. PAGE / POST ARTICLE ============ */
.page-content {
	max-width: 780px;
	padding-block: clamp(2rem, 4vw, 3.5rem);
}
.page-content > * { margin-bottom: 1.25em; }
.page-content img { border-radius: var(--radius); }

/* === SINGLE POST 2-col layout === */
.post-article__media-wrap {
	background: linear-gradient(180deg, transparent 0%, var(--era-bg-soft) 100%);
	padding-top: clamp(1.5rem, 3vw, 2.5rem);
	padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.post-article__media-wrap .container {
	max-width: 1100px;
}
.post-article__hero-block {
	margin: 0 auto;
	border-radius: var(--radius-xl);
	overflow: hidden;
	box-shadow: var(--shadow-lg);
}
.post-article__image {
	width: 100%;
	height: auto;
	display: block;
}
.post-layout {
	display: grid;
	gap: clamp(2rem, 4vw, 3.5rem);
	padding-block: clamp(2.5rem, 5vw, 4rem);
	grid-template-columns: 1fr;
}
@media (min-width: 980px) {
	.post-layout { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
}
@media (min-width: 1280px) {
	.post-layout { grid-template-columns: minmax(0, 1fr) 360px; gap: 4rem; }
}

.post-layout__main { min-width: 0; }

.post-content {
	font-size: clamp(1.0625rem, 0.9rem + 0.4vw, 1.15rem);
	line-height: 1.7;
	color: var(--era-text);
	min-width: 0;
	max-width: 100%;
	overflow-wrap: break-word;
	word-break: break-word;
}

/* Kad je .post-content na istom elementu kao .container, ne gazi max-width kontejnera */
.container.post-content {
	max-width: var(--container-max);
}
.post-content > * { margin-bottom: 1.25em; }
.post-content > *:first-child { margin-top: 0; }
.post-content > *:last-child  { margin-bottom: 0; }
.post-content h2 {
	margin-top: 2em;
	margin-bottom: 0.6em;
	font-size: var(--fs-2xl);
	letter-spacing: -0.025em;
	scroll-margin-top: calc(var(--header-h) + 1rem);
}
.post-content h3 {
	margin-top: 1.6em;
	font-size: var(--fs-xl);
	letter-spacing: -0.02em;
	scroll-margin-top: calc(var(--header-h) + 1rem);
}
.post-content p { margin-bottom: 1em; }
.post-content a {
	color: var(--era-red);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	overflow-wrap: anywhere;
	word-break: break-word;
}
.post-content a:hover { color: var(--era-red-dark); }
.post-content img {
	border-radius: var(--radius-lg);
	margin-block: 1.5em;
}
.post-content blockquote {
	margin: 2em 0;
	padding: 1.5rem 1.75rem;
	border-left: 4px solid var(--era-red);
	background: var(--era-bg-soft);
	border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
	font-style: italic;
	font-size: 1.05em;
	color: var(--era-text);
}
.post-content blockquote p:last-child { margin-bottom: 0; }
.post-content ul, .post-content ol {
	padding-left: 1.5em;
	margin-bottom: 1.25em;
}
.post-content li { margin-bottom: 0.5em; }
.post-content code {
	padding: 0.15em 0.4em;
	background: var(--era-bg-soft);
	border-radius: var(--radius-sm);
	font-family: var(--font-mono, ui-monospace, monospace);
	font-size: 0.9em;
}
.post-content pre {
	padding: 1.25rem;
	background: var(--era-deep);
	color: #fff;
	border-radius: var(--radius-lg);
	overflow-x: auto;
}

.post-footer {
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--era-line);
}
.post-footer .tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	font-size: var(--fs-sm);
	color: var(--era-muted);
}
.post-footer .tags a {
	padding: 0.2rem 0.6rem;
	background: var(--era-bg-soft);
	color: var(--era-text);
	border-radius: var(--radius-pill);
	font-weight: 500;
	text-decoration: none;
}
.post-footer .tags a:hover { background: var(--era-red); color: #fff; }

.post-bottom {
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--era-line);
	display: flex;
	gap: 1rem;
}

/* === READING PROGRESS BAR (fixed top) === */
.reading-progress {
	position: fixed;
	top: 0; left: 0; right: 0;
	height: 3px;
	z-index: 200;
	background: transparent;
	pointer-events: none;
}
.reading-progress__bar {
	height: 100%;
	width: 0;
	background: linear-gradient(90deg, var(--era-red) 0%, #C084FC 100%);
	transition: width 80ms linear;
	box-shadow: 0 0 8px rgb(227 6 19 / 30%);
}

/* === POST SIDEBAR (premium clean redesign) === */
.post-sidebar {
	display: flex;
	flex-direction: column;
	gap: 0;
	/* nije sticky - sidebar skrolla zajedno s contentom */
}

/* Widget - bez box border-a; razdvajanje kroz padding-block + soft separator */
.widget {
	padding-block: 1.75rem;
	position: relative;
}
.widget[hidden] { display: none; }
.widget + .widget { border-top: 1px solid var(--era-line); }

/* CTA widget je samo pozicija, kartica je unutra */
.widget--cta-bare { padding-block: 1.5rem 0; border-top: 0 !important; }

/* Widget head - mali eyebrow s ikonom + naslov + opcionalni link */
.widget__head {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 1rem;
}
.widget__head-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px; height: 26px;
	color: var(--era-red);
	background: rgb(227 6 19 / 8%);
	border-radius: var(--radius-sm);
	flex-shrink: 0;
}
.widget__label {
	font-family: var(--font-heading);
	font-size: var(--fs-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--era-text);
	flex: 1;
	min-width: 0;
}
.widget__head-link {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	font-family: var(--font-heading);
	font-size: var(--fs-xs);
	font-weight: 600;
	color: var(--era-red);
	text-decoration: none;
	transition: gap 150ms var(--ease-out);
}
.widget__head-link:hover { gap: 0.5rem; color: var(--era-red-dark); }

.widget__intro {
	font-size: var(--fs-sm);
	color: var(--era-muted);
	line-height: 1.55;
	margin: 0 0 0.875rem;
}

/* === TOC widget - clean list s side accent === */
.widget-toc__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.0625rem;
	font-size: var(--fs-sm);
	counter-reset: toc;
	position: relative;
}
.widget-toc__list::before {
	content: '';
	position: absolute;
	top: 0; bottom: 0;
	left: 1.05rem;
	width: 1px;
	background: var(--era-line);
}
.widget-toc__list li { position: relative; }
.widget-toc__list a {
	display: block;
	padding: 0.5rem 0.5rem 0.5rem 2.25rem;
	color: var(--era-text);
	text-decoration: none;
	transition: all 150ms var(--ease-out);
	line-height: 1.45;
	position: relative;
	border-radius: var(--radius-sm);
}
.widget-toc__list a::before {
	counter-increment: toc;
	content: counter(toc, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 0.55rem;
	width: 2.1rem;
	text-align: center;
	font-family: var(--font-heading);
	font-size: 0.7rem;
	font-weight: 700;
	color: var(--era-muted);
	letter-spacing: -0.02em;
	background: var(--era-bg);
	z-index: 1;
}
.widget-toc__list a:hover {
	background: var(--era-bg-soft);
	color: var(--era-red);
}
.widget-toc__list a.is-active {
	color: var(--era-red);
	font-weight: 600;
	background: linear-gradient(90deg, rgb(227 6 19 / 6%), transparent);
}
.widget-toc__list a.is-active::before {
	background: var(--era-red);
	color: #fff;
	border-radius: var(--radius-sm);
	padding: 0.05rem 0;
}
.widget-toc__list li.toc--h3 a { padding-left: 2.75rem; font-size: 0.92em; opacity: 0.85; }
.widget-toc__list li.toc--h3 a::before { content: '·'; font-size: 1rem; }

/* === SHARE - kompaktni pillovi sa brand bojama === */
.share-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}
.share-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px; height: 42px;
	background: var(--era-bg-soft);
	color: var(--era-muted);
	border: 1.5px solid transparent;
	border-radius: var(--radius);
	cursor: pointer;
	transition: all 200ms var(--ease-out);
	position: relative;
}
.share-pill:hover {
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 6px 16px -6px rgb(0 0 0 / 25%);
}
.share-pill--fb:hover    { background: #1877F2; }
.share-pill--x:hover     { background: #000; }
.share-pill--li:hover    { background: #0A66C2; }
.share-pill--mail:hover  { background: var(--era-red); }
.share-pill--copy { border-style: dashed; border-color: var(--era-line); }
.share-pill--copy:hover  { background: var(--era-text); border-style: solid; border-color: var(--era-text); }

/* Copy success check overlay */
.share-pill__check {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #00B266;
	color: #fff;
	border-radius: inherit;
	opacity: 0;
	transform: scale(0.6);
	pointer-events: none;
	transition: all 200ms var(--ease-out);
}
.share-pill--copy.is-copied {
	background: #00B266 !important;
	border-color: #00B266 !important;
}
.share-pill--copy.is-copied .share-pill__check {
	opacity: 1;
	transform: scale(1);
}

/* === RELATED LIST V2 === */
.related-list-v2 {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
}

.related-item-v2 a {
	display: grid;
	grid-template-columns: 72px 1fr;
	gap: 0.875rem;
	color: inherit;
	text-decoration: none;
	padding: 0.5rem;
	margin: -0.5rem;
	border-radius: var(--radius);
	transition: background 200ms var(--ease-out);
}
.related-item-v2 a:hover { background: var(--era-bg-soft); }
.related-item-v2 a:hover .related-item-v2__title { color: var(--era-red); }
.related-item-v2 a:hover .related-item-v2__media img { transform: scale(1.06); }

.related-item-v2__media {
	aspect-ratio: 1;
	border-radius: var(--radius);
	overflow: hidden;
	background: linear-gradient(135deg, var(--era-bg-soft), var(--era-line));
	display: flex;
	align-items: center;
	justify-content: center;
}
.related-item-v2__media img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform 400ms var(--ease-out);
}
.related-item-v2__media--placeholder { color: var(--era-muted); }
.related-item-v2__body {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	min-width: 0;
	justify-content: center;
}
.related-item-v2__title {
	font-family: var(--font-heading);
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--era-text);
	margin: 0;
	letter-spacing: -0.01em;
	line-height: 1.35;
	transition: color 150ms var(--ease-out);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.related-item-v2__date {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-size: var(--fs-xs);
	color: var(--era-muted);
}

/* Featured (prvi) - veći thumb, full-width */
.related-item-v2--featured {
	margin-bottom: 0.5rem;
	padding-bottom: 0.875rem;
	border-bottom: 1px dashed var(--era-line);
}
.related-item-v2--featured a {
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
}
.related-item-v2--featured .related-item-v2__media {
	aspect-ratio: 16 / 10;
	width: 100%;
}
.related-item-v2--featured .related-item-v2__title {
	font-size: var(--fs-base);
	-webkit-line-clamp: 3;
	font-weight: 700;
	letter-spacing: -0.015em;
}

/* === SIBLING LIST (page) === */
.sibling-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.0625rem;
}
.sibling-list a {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 0.625rem;
	align-items: center;
	padding: 0.625rem 0.5rem;
	color: var(--era-text);
	text-decoration: none;
	font-family: var(--font-heading);
	font-size: var(--fs-sm);
	font-weight: 500;
	border-radius: var(--radius-sm);
	transition: all 200ms var(--ease-out);
}
.sibling-list a:hover {
	background: var(--era-bg-soft);
	color: var(--era-red);
}
.sibling-list__bullet {
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--era-line);
	transition: all 200ms var(--ease-out);
}
.sibling-list a:hover .sibling-list__bullet {
	background: var(--era-red);
	transform: scale(1.5);
}
.sibling-list__arrow {
	color: var(--era-line);
	transition: all 200ms var(--ease-out);
}
.sibling-list a:hover .sibling-list__arrow {
	color: var(--era-red);
	transform: translateX(3px);
}

/* CTA card */
.widget--cta { padding: 0; background: transparent; border: none; }
.cta-card {
	padding: 1.5rem 1.25rem;
	background: linear-gradient(135deg, var(--era-deep) 0%, #181D40 100%);
	color: #fff;
	border-radius: var(--radius-lg);
	border: 1px solid rgb(255 255 255 / 8%);
	position: relative;
	overflow: hidden;
}
.cta-card::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 100% 0%, rgb(139 92 246 / 25%), transparent 60%),
		radial-gradient(circle at 0% 100%, rgb(227 6 19 / 18%), transparent 60%);
	pointer-events: none;
}
.cta-card > * { position: relative; }
.cta-card__icon {
	display: inline-flex;
	width: 44px; height: 44px;
	align-items: center;
	justify-content: center;
	background: rgb(255 255 255 / 10%);
	border: 1px solid rgb(255 255 255 / 10%);
	border-radius: var(--radius);
	color: var(--era-cyan);
	margin-bottom: 0.875rem;
}
.cta-card__title {
	font-size: var(--fs-lg);
	font-weight: 700;
	color: #fff;
	margin: 0 0 0.375rem;
	letter-spacing: -0.02em;
}
.cta-card__desc {
	font-size: var(--fs-sm);
	color: rgb(255 255 255 / 75%);
	line-height: 1.55;
	margin: 0 0 1rem;
}
.cta-card__contacts {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	margin-bottom: 1rem;
	padding-block: 0.75rem;
	border-block: 1px solid rgb(255 255 255 / 10%);
}
.cta-card__line {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: rgb(255 255 255 / 85%);
	font-size: var(--fs-sm);
	text-decoration: none;
	transition: color 150ms var(--ease-out);
}
.cta-card__line:hover { color: var(--era-cyan); }
.cta-card__line svg { color: var(--era-cyan); }
.cta-card__btn {
	width: 100%;
	justify-content: center;
}

/* ============ 13. ARCHIVE HEADER ============ */
.archive-header {
	padding-block: clamp(2rem, 4vw, 3rem);
	background: var(--era-bg-soft);
}
.archive-header__title {
	margin: 0;
	font-family: var(--hero-title-font-family);
	font-size: var(--hero-title-font-size);
	font-weight: var(--hero-title-font-weight);
	line-height: var(--hero-title-line-height);
	letter-spacing: var(--hero-title-letter-spacing);
}
.archive-header__desc {
	margin-top: 1rem;
	max-width: 60ch;
	color: var(--era-muted);
}

/* === PAGE HERO (~360px, varijante - svi imaju istu visinu) ===
   Varijante: .page-hero--{default|wave|dots|minimal|kkc}.
   Template part dodaje obe klase: .category-hero .page-hero .page-hero--variant */
.category-hero {
	position: relative;
	overflow: hidden;
	min-height: 340px;
	max-height: 380px;
	display: flex;
	align-items: center;
	background: var(--era-deep);
	color: #fff;
	background-image:
		radial-gradient(ellipse at 80% 0%, rgb(139 92 246 / 18%), transparent 60%),
		radial-gradient(ellipse at 0% 100%, rgb(6 182 212 / 14%), transparent 55%),
		radial-gradient(ellipse at 100% 100%, rgb(227 6 19 / 10%), transparent 55%);
	padding-block: clamp(1.75rem, 3.5vw, 2.5rem);
}

/* U overlay modu (topbar + header lebde nad hero), kompenziraj padding-top.
   Ujednačena visina za sve varijante. */
body.has-overlay-header .category-hero {
	padding-top: calc(var(--topbar-h) + var(--header-h) + clamp(1rem, 2.5vw, 1.75rem));
	min-height: calc(240px + var(--topbar-h) + var(--header-h));
	max-height: none;
}
/* Ujednači minimal varijantu (više nije manja) */
body.has-overlay-header .page-hero--minimal {
	min-height: calc(240px + var(--topbar-h) + var(--header-h));
}
.page-hero--minimal {
	min-height: 340px;
	max-height: 380px;
}

.category-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}
.category-hero__pattern {
	width: 100%;
	height: 100%;
	display: block;
}

/* Animirana data linija */
.category-hero__line {
	stroke-dasharray: 2200;
	stroke-dashoffset: 2200;
	animation: era-cat-line 2.5s cubic-bezier(0.65, 0, 0.35, 1) 0.2s forwards;
}
@keyframes era-cat-line {
	to { stroke-dashoffset: 0; }
}

/* Pulse dots na liniji */
.category-hero__dot {
	transform-origin: center;
	transform-box: fill-box;
	filter: drop-shadow(0 0 6px currentColor);
	animation: era-cat-dot 3s ease-in-out infinite;
	opacity: 0;
	animation-delay: 2.5s, 2.5s;
}
.category-hero__dot--1 { animation-delay: 2.5s; }
.category-hero__dot--2 { animation-delay: 3s; }
.category-hero__dot--3 { animation-delay: 3.5s; }
@keyframes era-cat-dot {
	0%   { opacity: 0; transform: scale(0.5); }
	30%  { opacity: 1; transform: scale(1); }
	70%  { opacity: 0.6; transform: scale(1.4); }
	100% { opacity: 0.6; transform: scale(1); }
}

/* ERA brand - veliki gradient-text watermark koji se prelijeva.
   HTML span (background-clip: text) jer SVG gradient ne dozvoljava
   smooth offset animaciju kroz CSS. */
.category-hero__brand {
	position: absolute;
	right: clamp(-1rem, 0vw, 1rem);
	bottom: clamp(-1.5rem, -2vw, 0rem);
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: clamp(160px, 24vw, 360px);
	line-height: 0.85;
	letter-spacing: -0.06em;
	pointer-events: none;
	user-select: none;
	z-index: 0;

	/* Gradient text mask */
	background-image: linear-gradient(
		100deg,
		#C084FC  0%,
		#8B5CF6 18%,
		#6366F1 35%,
		#06B6D4 52%,
		#8B5CF6 68%,
		#C084FC 85%,
		#06B6D4 100%
	);
	background-size: 240% auto;
	background-position: 0% center;
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;

	/* Jedva primjetno - daje samo nagovještaj boje */
	opacity: 0.06;

	/* Suptilan glow */
	filter: drop-shadow(0 8px 16px rgb(139 92 246 / 10%));

	/* Continuous flow + entry fade */
	animation:
		era-brand-fade 1.2s ease-out 0.3s backwards,
		era-brand-flow 9s linear infinite;
}

@keyframes era-brand-fade {
	from { opacity: 0; transform: translateY(20px); }
	to   { opacity: 0.06; transform: translateY(0); }
}
@keyframes era-brand-flow {
	to { background-position: 240% center; }
}

/* Stari watermark fallback */
.category-hero__watermark { opacity: 0.03; }

/* Inner content (over decorative bg) */
.category-hero__inner {
	position: relative;
	z-index: 1;
	display: grid;
	gap: clamp(1.25rem, 3vw, 2rem);
}
@media (min-width: 900px) {
	.category-hero__inner {
		grid-template-columns: 1fr auto;
		grid-template-areas:
			"breadcrumbs breadcrumbs"
			"main         meta";
		align-items: end;
	}
	.category-hero__breadcrumbs { grid-area: breadcrumbs; }
	.category-hero__main        { grid-area: main; }
	.category-hero__meta        { grid-area: meta; }
	.category-hero__aside       { grid-area: meta; }
}

/* Breadcrumbs */
.category-hero__breadcrumbs {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--font-heading);
	font-size: var(--fs-xs);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: rgb(255 255 255 / 60%);
}
.category-hero__breadcrumbs a {
	color: rgb(255 255 255 / 60%);
	transition: color 150ms var(--ease-out);
}
.category-hero__breadcrumbs a:hover { color: var(--era-cyan); }
.category-hero__breadcrumbs span:last-child { color: #fff; }

/* Eyebrow + naslov */
.category-hero__main {
	max-width: 720px;
}
.category-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	font-family: var(--hero-eyebrow-font-family);
	font-size: var(--hero-eyebrow-font-size);
	font-weight: var(--hero-eyebrow-font-weight);
	line-height: var(--hero-eyebrow-line-height);
	text-transform: uppercase;
	letter-spacing: var(--hero-eyebrow-letter-spacing);
	color: var(--era-cyan);
	margin: 0 0 1rem;
}
.category-hero__pulse {
	display: inline-block;
	width: 8px; height: 8px;
	background: var(--era-cyan);
	border-radius: 50%;
	box-shadow: 0 0 0 0 rgb(6 182 212 / 60%);
	animation: era-eyebrow-pulse 2s ease-in-out infinite;
}
.category-hero__title {
	font-family: var(--hero-title-font-family);
	font-size: var(--hero-title-font-size);
	font-weight: var(--hero-title-font-weight);
	letter-spacing: var(--hero-title-letter-spacing);
	line-height: var(--hero-title-line-height);
	color: #fff;
	margin: 0;
}

/* Single post — hero naslov (bez skraćivanja) */
body.single .category-hero[data-hero-context="single"] .category-hero__title {
	font-family: var(--hero-title-font-family);
	font-size: clamp(1.5rem, 1.4rem + 1vw, 2.4rem);
	line-height: 1.2;
	font-weight: 700;
	max-width: 720px;
	background: linear-gradient(135deg, #FFFFFF 0%, #E0E7FF 60%, #C7D2FE 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}
body.single .category-hero[data-hero-context="single"] .category-hero__main {
	max-width: 760px;
}
.category-hero__lead {
	margin-top: 0.875rem;
	font-family: var(--hero-lead-font-family);
	font-size: var(--hero-lead-font-size);
	font-weight: var(--hero-lead-font-weight);
	line-height: var(--hero-lead-line-height);
	letter-spacing: var(--hero-lead-letter-spacing);
	color: rgb(255 255 255 / 75%);
	max-width: 60ch;
}

/* Hero aside (logo + meta — Suvenirnica) */
.category-hero__aside {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: clamp(0.75rem, 1.5vw, 1rem);
	width: 100%;
	max-width: 100%;
}
@media (max-width: 899px) {
	.category-hero__aside {
		align-items: flex-start;
	}
}

.category-hero__logo-wrap {
	display: flex;
	justify-content: flex-end;
	width: 100%;
}
@media (max-width: 899px) {
	.category-hero__logo-wrap {
		justify-content: flex-start;
	}
}

.category-hero__logo-card {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: clamp(0.65rem, 1.25vw, 0.85rem) clamp(0.85rem, 1.75vw, 1.1rem);
	border-radius: var(--radius-lg);
	background: rgb(255 255 255 / 96%);
	border: 1px solid rgb(255 255 255 / 90%);
	box-shadow:
		0 6px 20px rgb(15 23 42 / 14%),
		0 0 0 1px rgb(255 255 255 / 70%) inset;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.category-hero__logo-img {
	display: block;
	width: auto;
	height: auto;
	max-width: min(112px, 32vw);
	max-height: 64px;
	object-fit: contain;
}
@media (min-width: 900px) {
	.category-hero__logo-img {
		max-width: 132px;
		max-height: 80px;
	}
}

/* Meta block (count, latest, status) */
.category-hero__meta {
	display: flex;
	gap: clamp(1rem, 2vw, 2rem);
	flex-wrap: wrap;
	padding: 1rem 1.25rem;
	background: rgb(255 255 255 / 5%);
	border: 1px solid rgb(255 255 255 / 10%);
	border-radius: var(--radius-lg);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}
.category-hero__meta > div {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	min-width: 0;
}
.category-hero__meta dt {
	font-size: var(--fs-xs);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: rgb(255 255 255 / 55%);
}
.category-hero__meta dd {
	font-family: var(--font-heading);
	font-size: var(--fs-xl);
	font-weight: 700;
	color: #fff;
	margin: 0;
	letter-spacing: -0.02em;
}
.category-hero__meta a {
	color: #fff;
	text-decoration: none;
	transition: color 150ms var(--ease-out);
}
.category-hero__meta a:hover {
	color: var(--era-red);
}
.category-hero__status {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: var(--fs-base) !important;
}
.category-hero__status-dot {
	width: 8px; height: 8px;
	background: #00ff88;
	border-radius: 50%;
	box-shadow: 0 0 0 0 rgb(0 255 136 / 60%);
	animation: era-eyebrow-pulse 2s ease-in-out infinite;
}

/* Mobile */
@media (max-width: 540px) {
	.category-hero { min-height: 260px; max-height: none; }
	.category-hero__meta { font-size: 0.9em; padding: 0.75rem 1rem; }
}

/* === KONTAKT HERO VISUAL - 2-layer: karta (bg) + tekst (fg) === */
.page-hero--kontakt .category-hero__brand { display: none; }

.page-hero--kontakt.category-hero {
	overflow: hidden;
}

/* LAYER 2 — foreground grid (tekst) */
.page-hero--kontakt .category-hero__inner {
	position: relative;
	z-index: 2;
	display: grid;
}

.page-hero--kontakt .category-hero__breadcrumbs,
.page-hero--kontakt .category-hero__main,
.page-hero--kontakt .category-hero__meta,
.page-hero--kontakt .category-hero__aside {
	position: relative;
	z-index: 2;
}

/* LAYER 1 — karta kao pozadina unutar heroa (__bg, ne utječe na flow teksta) */
.page-hero--kontakt .kontakt-visual {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	opacity: 1;
	filter: none;
	mix-blend-mode: normal;
}

.page-hero--kontakt .kontakt-visual .kontakt-map-svg {
	position: absolute;
	top: 50%;
	right: 0;
	width: min(700px, 45vw);
	height: auto;
	transform: translateY(-50%) rotate(-90deg);
	transform-origin: center;
}

/* Tablet (≤1024px) — samo layout (centar), boje ne mijenjati */
@media (max-width: 1024px) {
	.page-hero--kontakt .kontakt-visual .kontakt-map-svg {
		right: auto;
		left: 50%;
		transform: translate(-50%, -50%) rotate(-90deg);
	}
}

/* Mobile (≤768px) — samo layout (veličina/pozicija + vertical offset) */
@media (max-width: 768px) {
	.page-hero--kontakt .kontakt-visual {
		top: -40px;
		transform: translateY(-10px);
	}

	.page-hero--kontakt .kontakt-visual .kontakt-map-svg {
		top: auto;
		bottom: clamp(0.5rem, 2vw, 1rem);
		width: 90vw;
		max-width: 90vw;
		transform: translateX(-50%) rotate(-90deg);
	}
}

@media (max-width: 375px) {
	.page-hero--kontakt .kontakt-visual {
		top: -55px;
		transform: translateY(-15px);
	}
}

@media (max-width: 320px) {
	.page-hero--kontakt .kontakt-visual {
		top: -65px;
		transform: translateY(-20px);
	}
}

/* Skini originalne crne fillove na obje instance */
.kontakt-map-svg path {
	fill: none !important;
	fill-opacity: 0;
	stroke: #fff !important;
	stroke-opacity: 0.35;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* BAZNI sloj - sve ceste uvijek vidljive */
.kontakt-map-svg:not(.kontakt-map-svg--signal) path {
	stroke-width: 0.4 !important;
}

/* SIGNAL sloj - puls klizi po cestama preko
   JS (initKontaktSignals) postavlja random animation-delay + duration per path */
.kontakt-map-svg--signal path {
	stroke-width: 0.7 !important;
	stroke-opacity: 0.8;
	filter: drop-shadow(0 0 3px rgb(255 255 255 / 80%));
	stroke-dasharray: 10 500;
	animation: era-kontakt-signal 8s linear infinite;
}

@keyframes era-kontakt-signal {
	to { stroke-dashoffset: -510; }
}

@media (prefers-reduced-motion: reduce) {
	.kontakt-map-svg--signal path {
		animation: none !important;
		stroke-dasharray: none;
		stroke-opacity: 0.8;
	}
}

/* === KKC HERO VISUAL - wireframe zgrade Kulturnog centra === */
.page-hero--kkc .category-hero__brand { display: none; }

.kkc-visual {
	position: absolute;
	right: -15%;
	top: 50%;
	transform: translateY(calc(-50% + 121px));
	width: 95%;
	max-width: 1200px;
	height: 400%;
	pointer-events: none;
	z-index: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0.1;  /* primjenjuje se na CIJELI SVG (i sve linije), ne samo na path */
}
@media (max-width: 900px) { .kkc-visual { display: none; } }

.kkc-wireframe-svg {
	width: 100%;
	height: 100%;
	max-height: 100%;
}

/* PNG bitmap sakriven - samo wireframe linije */
.kkc-wireframe-svg image { display: none; }

/* Linije zgrade - sav stroke uniformno (opacity je na .kkc-visual wrapperu) */
.kkc-wireframe-svg path,
.kkc-wireframe-svg rect,
.kkc-wireframe-svg line,
.kkc-wireframe-svg polygon,
.kkc-wireframe-svg polyline,
.kkc-wireframe-svg circle {
	fill: none !important;
	stroke: url(#kkcWireGrad) !important;
	stroke-width: 0.35 !important;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.kkc-wireframe-svg {
	filter: url(#kkcWireGlow) drop-shadow(0 0 0.3px rgb(139 92 246 / 20%));
	animation: era-kkc-hue 36s linear infinite;
}
@keyframes era-kkc-hue {
	from { filter: url(#kkcWireGlow) drop-shadow(0 0 0.3px rgb(139 92 246 / 20%)) hue-rotate(0deg); }
	to   { filter: url(#kkcWireGlow) drop-shadow(0 0 0.3px rgb(139 92 246 / 20%)) hue-rotate(360deg); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.kkc-wireframe-svg { animation: none !important; }
}

/* === VARIJANTE === */

/* WAVE - dvije meke krivulje koje se crtaju paralelno */
.category-hero__wave {
	stroke-dasharray: 2400;
	stroke-dashoffset: 2400;
	animation: era-cat-line 3s cubic-bezier(0.65, 0, 0.35, 1) 0.2s forwards;
}
.category-hero__wave--2 {
	animation-delay: 0.6s;
	animation-duration: 3.5s;
}

/* DOTS - constellation, svaka dotica polako pulsira sa stagger delay */
.category-hero__constellation circle {
	opacity: 0;
	transform-origin: center;
	transform-box: fill-box;
	filter: drop-shadow(0 0 4px currentColor);
	animation: era-constellation-in 0.8s ease-out forwards, era-dot-twinkle 4s ease-in-out infinite;
}
.category-hero__constellation circle:nth-child(1) { animation-delay: 0.5s, 1.5s; }
.category-hero__constellation circle:nth-child(2) { animation-delay: 0.7s, 1.7s; }
.category-hero__constellation circle:nth-child(3) { animation-delay: 0.9s, 2s;   }
.category-hero__constellation circle:nth-child(4) { animation-delay: 1.1s, 2.3s; }
.category-hero__constellation circle:nth-child(5) { animation-delay: 1.3s, 2.6s; }
.category-hero__constellation circle:nth-child(6) { animation-delay: 1.5s, 2.9s; }

@keyframes era-constellation-in {
	from { opacity: 0; transform: scale(0); }
	to   { opacity: 0.7; transform: scale(1); }
}
@keyframes era-dot-twinkle {
	0%, 100% { opacity: 0.4; }
	50%      { opacity: 0.85; }
}

/* MINIMAL varijanta - blob radial gradient stil (visina ujednačena u glavnom .category-hero pravilu) */

/* DOTS variant - lakši ton */
.page-hero--dots .category-hero__main { max-width: 800px; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.category-hero__line,
	.category-hero__wave    { stroke-dashoffset: 0; animation: none !important; }
	.category-hero__brand   { animation: none !important; opacity: 0.06 !important; }
	.category-hero__dot,
	.category-hero__pulse,
	.category-hero__status-dot,
	.category-hero__watermark,
	.category-hero__constellation circle { animation: none !important; opacity: 0.7 !important; }
}

/* Stari kompaktni archive-intro (čuvamo za fallback archive.php) */
.archive-intro {
	margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
	padding-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
	border-bottom: 1px solid var(--era-line);
}
.archive-breadcrumbs {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	font-size: var(--fs-xs);
	color: var(--era-muted);
	margin-bottom: 0.75rem;
	font-family: var(--font-heading);
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.archive-breadcrumbs a {
	color: var(--era-muted);
	transition: color 150ms var(--ease-out);
}
.archive-breadcrumbs a:hover { color: var(--era-red); }
.archive-breadcrumbs__sep    { opacity: 0.5; }
.archive-breadcrumbs__current{ color: var(--era-text); }

.archive-intro__row {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.875rem;
}
.archive-intro__title {
	font-size: var(--fs-3xl);
	margin: 0;
	letter-spacing: -0.025em;
	line-height: 1.1;
}
.archive-intro__count {
	display: inline-flex;
	align-items: center;
	padding: 0.25rem 0.75rem;
	background: var(--era-bg-soft);
	color: var(--era-muted);
	border: 1px solid var(--era-line);
	border-radius: var(--radius-pill);
	font-family: var(--font-heading);
	font-size: var(--fs-sm);
	font-weight: 600;
	letter-spacing: -0.01em;
}
.archive-intro__lead {
	margin-top: 0.875rem;
	max-width: 60ch;
	color: var(--era-muted);
	font-size: var(--fs-base);
	line-height: 1.55;
}

/* Smanji vertikalni padding sekcije za arhive (ne treba "hero" prostor) */
.section--archive {
	padding-block: clamp(2rem, 4vw, 3rem);
}

/* ============ 13b. KULTURNI CENTAR TLOCRT V2 ============ */

/* Stats banner na vrhu */
.tlocrt-stats {
	display: grid;
	gap: 0.75rem;
	margin-block: clamp(1.5rem, 3vw, 2.5rem);
	grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 720px)  { .tlocrt-stats { grid-template-columns: repeat(4, 1fr); } }

.tlocrt-stat {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	padding: 1rem 1.25rem;
	background: var(--era-bg);
	border: 1px solid var(--era-line);
	border-radius: var(--radius-lg);
}
.tlocrt-stat--icon { color: var(--era-red); }
.tlocrt-stat--icon svg { flex-shrink: 0; }
.tlocrt-stat__num {
	font-family: var(--font-heading);
	font-size: var(--fs-2xl);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--era-text);
}
.tlocrt-stat__label {
	font-size: var(--fs-xs);
	color: var(--era-muted);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 500;
	margin-top: 0.25rem;
}
.tlocrt-stat--icon > div { display: flex; flex-direction: column; }

/* Main view: 2-col mapa + detail panel */
.tlocrt-main {
	display: grid;
	gap: clamp(1.25rem, 2.5vw, 2rem);
	margin-bottom: clamp(2rem, 4vw, 3rem);
	grid-template-columns: 1fr;
	scroll-margin-top: calc(var(--topbar-h, 0px) + var(--header-h, 80px) + 1rem);
}
/* Override default `min-width: auto` na grid djeci — bez ovoga širi sadržaj
   (SVG s negativnim marginom, dugačke linije teksta) razvuče cijeli stupac
   preko viewporta i opis stanara curi van ekrana na mobile-u. */
.tlocrt-main > * { min-width: 0; }

@media (min-width: 980px) {
	.tlocrt-main { grid-template-columns: 1.4fr 1fr; align-items: start; }
}

/* Lijevi blok - mapa + tabs + legenda */
.tlocrt-map-section {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	scroll-margin-top: calc(var(--topbar-h, 0px) + var(--header-h, 80px) + 1rem);
}

/* Tabs - više vizualne hijerarhije */
.tlocrt-tabs {
	display: flex;
	gap: 0.5rem;
	background: var(--era-bg-soft);
	padding: 0.375rem;
	border-radius: var(--radius-lg);
	border: 1px solid var(--era-line);
	align-self: flex-start;
}
.tlocrt-tab {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0.625rem 1.25rem;
	background: transparent;
	border: none;
	border-radius: var(--radius);
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: var(--fs-sm);
	color: var(--era-text);
	cursor: pointer;
	transition: all 200ms var(--ease-out);
}
.tlocrt-tab:hover { color: var(--era-red); }
.tlocrt-tab.is-active {
	background: var(--era-text);
	color: #fff;
	box-shadow: var(--shadow-sm);
}
.tlocrt-tab__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px; height: 22px;
	background: rgb(255 255 255 / 12%);
	border: 1px solid rgb(0 0 0 / 8%);
	border-radius: var(--radius-sm);
	font-size: var(--fs-xs);
	font-weight: 700;
}
.tlocrt-tab.is-active .tlocrt-tab__num {
	background: var(--era-red);
	border-color: var(--era-red);
	color: #fff;
}
.tlocrt-tab__count {
	padding: 0.125rem 0.5rem;
	background: rgb(0 0 0 / 6%);
	border-radius: var(--radius-pill);
	font-size: var(--fs-xs);
	font-weight: 600;
}
.tlocrt-tab.is-active .tlocrt-tab__count {
	background: rgb(255 255 255 / 18%);
}

/* Mapa - transparent, bez okvira (sirov SVG) */
.tlocrt-maps {
	position: relative;
	background: transparent;
	border: none;
	box-shadow: none;
	overflow: auto;
	padding: 0.5rem 0;
	min-height: 540px;
}
.tlocrt-map {
	display: none;
	margin-inline: auto;
	max-width: 100%;
	width: max-content;
}
.tlocrt-map.is-active { display: block; }
.tlocrt-map svg {
	display: block;
	max-width: 100%;
	height: auto;
	max-height: min(80vh, 1000px);
	margin-inline: auto;
}

/* Sobe na mapi - hover/active state */
.tlocrt-map svg g.room {
	cursor: pointer;
	transition: opacity 200ms var(--ease-out);
}
.tlocrt-map svg g.room * {
	transition: fill 200ms var(--ease-out), stroke 200ms var(--ease-out);
}
.tlocrt-map svg g.room:hover rect,
.tlocrt-map svg g.room.is-active rect,
.tlocrt-map svg g.room:hover path,
.tlocrt-map svg g.room.is-active path {
	fill: var(--era-red) !important;
	fill-opacity: 0.22 !important;
	stroke: var(--era-red) !important;
	stroke-width: 0.5 !important;
}
.tlocrt-map svg g.room:hover text,
.tlocrt-map svg g.room.is-active text,
.tlocrt-map svg g.room:hover tspan,
.tlocrt-map svg g.room.is-active tspan {
	fill: var(--era-red-dark) !important;
	font-weight: 700 !important;
}
.tlocrt-map svg g.room.is-active rect {
	stroke-width: 0.8 !important;
	filter: drop-shadow(0 0 4px rgb(227 6 19 / 40%));
}

/* Legenda - jedan red, kompaktno (boje točno preuzete iz SVG tlocrta) */
.tlocrt-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	margin-bottom: 1.5rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px dashed var(--era-line);
	font-size: var(--fs-xs);
	color: var(--era-muted);
	line-height: 1.3;
}
.tlocrt-legend__item {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}
.tlocrt-color {
	display: inline-block;
	width: 14px; height: 14px;
	border-radius: 3px;
	flex-shrink: 0;
	box-shadow: 0 0 0 1px rgb(0 0 0 / 8%) inset;
}
/* Točne boje sa SVG tlocrta (Inkscape swatch33, swatch34) */
.tlocrt-color--business { background: #322de8; }  /* indigo - javni/društveni prostor */
.tlocrt-color--gastro   { background: #d21ae2; }  /* magenta - ugostiteljski */

/* === DETAIL PANEL (desno) - transparent, samo border-left za odvajanje
   NIJE sticky - skrolla zajedno s page-om (lista može biti bilo koje duljine) */
.tlocrt-detail {
	position: relative;
	background: transparent;
	border: none;
	border-radius: 0;
	box-shadow: none;
	padding: 0 0 0 clamp(1.25rem, 2.5vw, 2rem);
	border-left: 1px solid var(--era-line);
	min-height: 360px;
}

/* Empty state - direktorij stanara (default view) */
.tlocrt-detail__empty {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.tlocrt-detail__empty[hidden] { display: none; }

.tlocrt-directory__header {
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--era-line);
}
.tlocrt-directory__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--font-heading);
	font-size: var(--fs-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--era-red);
	margin: 0 0 0.5rem;
}
.tlocrt-directory__title {
	font-size: var(--fs-xl);
	margin: 0 0 0.5rem;
	letter-spacing: -0.02em;
}
.tlocrt-directory__hint {
	font-size: var(--fs-sm);
	color: var(--era-muted);
	line-height: 1.5;
	margin: 0;
}

/* Lista stanara - bez vlastitog scrolla, koristi page scroll */
.tlocrt-directory {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	margin: 0;
	padding: 0;
}

.tlocrt-directory__btn {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	width: 100%;
	padding: 0.75rem 0.875rem;
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--radius);
	cursor: pointer;
	text-align: left;
	transition: all 150ms var(--ease-out);
	color: var(--era-text);
}
.tlocrt-directory__btn:hover,
.tlocrt-directory__btn:focus-visible {
	background: var(--era-bg-soft);
	border-color: var(--era-line);
}
.tlocrt-directory__btn:hover .tlocrt-directory__avatar {
	background: var(--era-red);
	color: #fff;
}
.tlocrt-directory__btn:hover .tlocrt-directory__name {
	color: var(--era-red);
}
.tlocrt-directory__btn:hover .tlocrt-directory__arrow {
	transform: translateX(3px);
	color: var(--era-red);
}

.tlocrt-directory__avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px; height: 36px;
	background: linear-gradient(135deg, var(--era-bg-soft), var(--era-line));
	color: var(--era-text);
	border-radius: var(--radius-sm);
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: var(--fs-base);
	letter-spacing: -0.04em;
	flex-shrink: 0;
	transition: all 200ms var(--ease-out);
	overflow: hidden;
}
.tlocrt-directory__avatar img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 3px;
	box-sizing: border-box;
}
.tlocrt-directory__avatar:has(> img) {
	background: #fff;
}
.tlocrt-directory__btn:hover .tlocrt-directory__avatar:has(> img) {
	background: var(--era-bg-soft);
	color: var(--era-text);
}
.tlocrt-directory__body {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	flex: 1;
	min-width: 0;
}
.tlocrt-directory__name {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: var(--fs-sm);
	color: var(--era-text);
	letter-spacing: -0.01em;
	line-height: 1.3;
	transition: color 150ms var(--ease-out);
}
.tlocrt-directory__meta {
	font-size: var(--fs-xs);
	color: var(--era-muted);
	font-weight: 500;
}
.tlocrt-directory__arrow {
	flex-shrink: 0;
	color: var(--era-muted);
	transition: transform 200ms var(--ease-out), color 150ms var(--ease-out);
}

/* Filled state - selected room */
.tlocrt-detail__card {
	animation: era-detail-in 300ms var(--ease-out);
}
.tlocrt-detail__card[hidden] { display: none; }
@keyframes era-detail-in {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

.tlocrt-detail__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1rem;
}
.tlocrt-detail__floor {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.375rem 0.75rem;
	background: var(--era-text);
	color: #fff;
	border-radius: var(--radius-pill);
	font-family: var(--font-heading);
	font-size: var(--fs-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
.tlocrt-detail__floor::before {
	content: '';
	width: 6px; height: 6px;
	background: var(--era-red);
	border-radius: 50%;
	box-shadow: 0 0 0 2px rgb(227 6 19 / 30%);
}
.tlocrt-detail__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px; height: 30px;
	background: transparent;
	color: var(--era-muted);
	border: 1px solid var(--era-line);
	border-radius: 50%;
	cursor: pointer;
	transition: all 150ms var(--ease-out);
}
.tlocrt-detail__close:hover {
	background: var(--era-text);
	color: #fff;
	border-color: var(--era-text);
	transform: rotate(90deg);
}

.tlocrt-detail__logo {
	width: 56px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin: 0 0 0.5rem;
	padding: 4px;
	box-sizing: border-box;
	background: #fff;
	border: 1px solid var(--era-line);
	border-radius: var(--radius-sm);
}
.tlocrt-detail__logo[hidden] {
	display: none;
}
.tlocrt-detail__logo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.tlocrt-detail__title {
	font-size: var(--fs-2xl);
	letter-spacing: -0.025em;
	margin: 0 0 0.25rem;
	line-height: 1.15;
}
.tlocrt-detail__subtitle {
	font-size: var(--fs-sm);
	color: var(--era-red);
	font-weight: 500;
	margin: 0 0 1.25rem;
}
.tlocrt-detail__desc {
	font-size: var(--fs-sm);
	color: var(--era-text);
	line-height: 1.6;
	overflow-wrap: break-word;
	word-break: break-word;
}
.tlocrt-detail__desc a { color: var(--era-red); }
.tlocrt-detail__desc a:hover { color: var(--era-red-dark); text-decoration: underline; }
.tlocrt-detail__desc strong { color: var(--era-text); }

/* === STANARI CARDS GRID === */
.tlocrt-stanari {
	margin-top: clamp(2rem, 4vw, 3.5rem);
}
.tlocrt-stanari__header {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1.5rem;
}
.tlocrt-stanari__heading {
	font-size: var(--fs-xl);
	margin: 0;
	letter-spacing: -0.02em;
}

.tlocrt-stanari__filters {
	display: flex;
	gap: 0.375rem;
	background: var(--era-bg-soft);
	padding: 0.25rem;
	border-radius: var(--radius-pill);
	border: 1px solid var(--era-line);
}
.tlocrt-filter {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1rem;
	background: transparent;
	border: none;
	border-radius: var(--radius-pill);
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: var(--fs-sm);
	color: var(--era-text);
	cursor: pointer;
	transition: all 150ms var(--ease-out);
}
.tlocrt-filter:hover { color: var(--era-red); }
.tlocrt-filter.is-active {
	background: var(--era-red);
	color: #fff;
	box-shadow: var(--shadow-sm);
}
.tlocrt-filter__count {
	padding: 0.05rem 0.5rem;
	background: rgb(0 0 0 / 6%);
	border-radius: var(--radius-pill);
	font-size: var(--fs-xs);
}
.tlocrt-filter.is-active .tlocrt-filter__count {
	background: rgb(255 255 255 / 22%);
}

.tlocrt-stanari__grid {
	display: grid;
	gap: clamp(1rem, 2vw, 1.25rem);
	grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .tlocrt-stanari__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .tlocrt-stanari__grid { grid-template-columns: repeat(3, 1fr); } }

.stanar-card {
	background: var(--era-bg);
	padding: 1.25rem;
	border: 1px solid var(--era-line);
	border-radius: var(--radius-lg);
	cursor: pointer;
	transition: all 220ms var(--ease-out);
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	position: relative;
}
.stanar-card.is-hidden { display: none; }
.stanar-card:hover {
	border-color: var(--era-red);
	transform: translateY(-2px);
	box-shadow: var(--shadow-lg);
}
.stanar-card:hover .stanar-card__view { color: var(--era-red); }
.stanar-card:hover .stanar-card__avatar {
	background: var(--era-red);
	color: #fff;
}

.stanar-card__top {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}
.stanar-card__avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px; height: 44px;
	background: linear-gradient(135deg, var(--era-bg-soft), var(--era-line));
	color: var(--era-text);
	border-radius: var(--radius);
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: var(--fs-lg);
	letter-spacing: -0.04em;
	transition: all 200ms var(--ease-out);
	flex-shrink: 0;
	overflow: hidden;
}
.stanar-card__avatar img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 4px;
	box-sizing: border-box;
}
.stanar-card__avatar:has(> img) {
	background: #fff;
}
.stanar-card:hover .stanar-card__avatar:has(> img) {
	background: var(--era-bg-soft);
	color: var(--era-text);
}
.stanar-card__floor {
	font-size: var(--fs-xs);
	color: var(--era-muted);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
.stanar-card__title {
	font-size: var(--fs-base);
	font-weight: 700;
	margin: 0;
	letter-spacing: -0.015em;
	line-height: 1.3;
	color: var(--era-text);
}
.stanar-card__desc {
	font-size: var(--fs-sm);
	color: var(--era-muted);
	line-height: 1.5;
	margin: 0;
	flex: 1;
}
.stanar-card__contacts {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: auto;
	padding-top: 0.75rem;
	border-top: 1px solid var(--era-line);
}
.stanar-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px; height: 30px;
	background: var(--era-bg-soft);
	color: var(--era-muted);
	border-radius: var(--radius-sm);
	transition: all 150ms var(--ease-out);
}
.stanar-card__icon:hover {
	background: var(--era-red);
	color: #fff;
}
.stanar-card__view {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	font-family: var(--font-heading);
	font-size: var(--fs-xs);
	font-weight: 600;
	color: var(--era-muted);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	transition: color 150ms var(--ease-out);
}

/* Mobile: detail panel ne sticky + border-top umjesto left */
@media (max-width: 979px) {
	.tlocrt-detail {
		position: static;
		padding: clamp(1.5rem, 3vw, 2rem) 0 0;
		border-left: none;
		border-top: 1px solid var(--era-line);
		/* Da sticky header ne prekrije naslov kad JS skrolla na detail panel */
		scroll-margin-top: calc(var(--header-h, 64px) + 1rem);
	}

	/* Sigurnosna mreža za horizontalni scroll na mobile-u — bilo što unutar
	   tlocrt sekcije (npr. wide SVG) ne smije razvući stranicu u stranu. */
	.tlocrt-v2  { overflow-x: clip; }
	.tlocrt-maps { overflow: hidden; }
}
.tlocrt__heading {
	font-size: var(--fs-base);
	font-weight: 700;
	letter-spacing: -0.01em;
	margin: 0 0 1rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--era-line);
	text-transform: uppercase;
	font-size: var(--fs-xs);
	letter-spacing: 0.1em;
	color: var(--era-muted);
}
.tlocrt__org-list {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	margin: 0 0 1.5rem;
	max-height: 320px;
	overflow-y: auto;
}
.tlocrt__org-btn {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.125rem;
	width: 100%;
	padding: 0.625rem 0.75rem;
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--radius);
	cursor: pointer;
	text-align: left;
	transition: background 150ms var(--ease-out), border-color 150ms var(--ease-out);
}
.tlocrt__org-btn:hover {
	background: var(--era-bg-soft);
	border-color: var(--era-line);
}
.tlocrt__org-name {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: var(--fs-sm);
	color: var(--era-text);
	letter-spacing: -0.01em;
	line-height: 1.3;
}
.tlocrt__org-sub {
	font-size: var(--fs-xs);
	color: var(--era-muted);
}

/* Info box */
.tlocrt__info-box {
	padding: 1rem 1.25rem;
	background: var(--era-bg-soft);
	border-radius: var(--radius);
	border: 1px solid var(--era-line);
}
.tlocrt__info-eyebrow {
	font-size: var(--fs-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--era-red);
	margin-bottom: 0.5rem;
}
.tlocrt__info-title {
	font-size: var(--fs-base);
	font-weight: 700;
	margin: 0 0 0.25rem;
	letter-spacing: -0.01em;
	min-height: 1.5em;
}
.tlocrt__info-subtitle {
	font-size: var(--fs-xs);
	color: var(--era-muted);
	margin: 0 0 0.75rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
.tlocrt__info-desc {
	font-size: var(--fs-sm);
	color: var(--era-text);
	line-height: 1.55;
}
.tlocrt__info-desc:empty::after {
	content: '';
}
.tlocrt__info-desc a { color: var(--era-red); }
.tlocrt__info-desc a:hover { color: var(--era-red-dark); }

/* MAIN AREA */
.tlocrt__main {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

/* Tabs */
.tlocrt__tabs {
	display: inline-flex;
	background: var(--era-bg-soft);
	border: 1px solid var(--era-line);
	border-radius: var(--radius-pill);
	padding: 0.25rem;
	gap: 0.25rem;
	align-self: flex-start;
}
.tlocrt__tab {
	padding: 0.5rem 1.25rem;
	background: transparent;
	border: none;
	border-radius: var(--radius-pill);
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: var(--fs-sm);
	color: var(--era-text);
	cursor: pointer;
	transition: all 150ms var(--ease-out);
}
.tlocrt__tab:hover { color: var(--era-red); }
.tlocrt__tab.is-active {
	background: var(--era-red);
	color: #fff;
	box-shadow: 0 4px 12px -4px rgb(227 6 19 / 50%);
}

/* Legenda */
.tlocrt__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 1.5rem;
	font-size: var(--fs-xs);
	color: var(--era-muted);
	padding: 0.75rem 1rem;
	background: var(--era-bg-soft);
	border-radius: var(--radius);
}
.tlocrt__legend-item {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}
.tlocrt__color {
	display: inline-block;
	width: 14px; height: 14px;
	border-radius: 3px;
	flex-shrink: 0;
}
.tlocrt__color--business { background: #1E4FE0; }
.tlocrt__color--gastro   { background: #00B266; }

/* Maps wrapper */
.tlocrt__maps {
	position: relative;
	background: var(--era-bg);
	border: 1px solid var(--era-line);
	border-radius: var(--radius-lg);
	overflow: auto;
	padding: 1rem;
	min-height: 600px;
}
.tlocrt__map {
	display: none;
	max-width: 100%;
	width: max-content;
	margin-inline: auto;
}
.tlocrt__map.is-active { display: block; }
.tlocrt__map svg {
	display: block;
	max-width: 100%;
	height: auto;
	max-height: min(85vh, 1100px);
	margin-inline: auto;
}

/* SVG room interakcija */
.tlocrt__map svg g.room {
	cursor: pointer;
	transition: opacity 200ms var(--ease-out);
}
.tlocrt__map svg g.room * {
	transition: fill 200ms var(--ease-out), stroke 200ms var(--ease-out);
}
/* Hover/active rect (room shape) */
.tlocrt__map svg g.room:hover rect,
.tlocrt__map svg g.room.is-active rect,
.tlocrt__map svg g.room:hover path,
.tlocrt__map svg g.room.is-active path {
	fill: var(--era-red) !important;
	fill-opacity: 0.2 !important;
	stroke: var(--era-red) !important;
	stroke-width: 0.5 !important;
}
/* Active text labels (ime sobe) */
.tlocrt__map svg g.room:hover text,
.tlocrt__map svg g.room.is-active text,
.tlocrt__map svg g.room:hover tspan,
.tlocrt__map svg g.room.is-active tspan {
	fill: var(--era-red-dark) !important;
	font-weight: 700 !important;
}

/* Mobile: smanjuj sidebar i staviti ga ispod */
@media (max-width: 979px) {
	.tlocrt__sidebar { position: static; }
	.tlocrt__org-list { max-height: 240px; }
}

/* ============ 14. 404 ============ */
.error-404 {
	padding-block: clamp(4rem, 10vw, 8rem);
	min-height: 70vh;
	display: flex;
	align-items: center;
}
.error-404__inner {
	text-align: center;
	max-width: 600px;
	margin-inline: auto;
}
.error-404__code {
	font-family: var(--font-heading);
	font-size: clamp(6rem, 16vw, 12rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.05em;
	color: var(--era-red);
	margin: 0 0 1rem;
	-webkit-text-stroke: 1px var(--era-red);
}
.error-404__title { font-size: var(--fs-3xl); margin: 0 0 1rem; }
.error-404__lead  { color: var(--era-muted); margin-bottom: 2rem; }
.error-404__cta   { margin-top: 2rem; }
.error-404 .search-form { margin-inline: auto; }

/* ============ 15. PRINT ============ */
@media print {
	.site-header, .topbar, .site-footer, .hero__bg { display: none; }
	body { color: #000; background: #fff; }
	a { color: #000; text-decoration: underline; }
}