/* Generated bundle — do not edit. Source: inc/enqueue.php manifest. */

/* --- assets/css/tokens.css --- */
/**
 * Design tokens.
 *
 * Global variables consumed by every atom, molecule, organism and section.
 * Override these per-site, per-brand, or per-theme to re-skin everything
 * downstream without touching component CSS.
 *
 * Component-level tokens (--mt-button-*, --mt-card-*, etc.) live in the
 * component's own CSS and fall back to these globals.
 *
 * @package OpcinaTema
 */

:root {
	/* -- Brand colors -- */
	/* Generic default brand: primary = institutional blue, secondary accent =  */
	/* teal (--mt-color-accent below). Override per-site via the Colors admin    */
	/* picker (DB) or a child theme (opcina_tema/color_defaults + tokens).       */
	--mt-color-primary: #2c5282;
	--mt-color-primary-hover: #335f97;
	--mt-color-primary-contrast: #ffffff;
	--mt-color-primary-soft: rgba(44, 82, 130, 0.1);
	--mt-color-primary-deep: #1f3c5e;
	--mt-color-primary-bright: #3a69a3;
	--mt-color-primary-light: #6e96c2;
	--mt-color-primary-100: #e8eff6;
	--mt-color-primary-tint: #f1f5fa;
	--mt-color-primary-rgb: 44, 82, 130;

	/* Shared glyph colour for masked/inline SVG icons — a lighter primary so
	   icons read softer than primary text/links. Change here to retint sitewide. */
	--mt-color-icon: var(--mt-color-primary-bright);

	/* Secondary accent: teal. */
	--mt-color-accent: #2c7a7b;
	--mt-color-accent-bright: #379492;
	--mt-color-accent-100: #e3f0ef;
	--mt-color-accent-rgb: 44, 122, 123;

	--mt-color-secondary: #ffffff;
	--mt-color-secondary-hover: rgba(44, 82, 130, 0.1);
	--mt-color-secondary-contrast: #0f1612;

	--mt-color-danger: #d7153a;
	--mt-color-danger-hover: #b1102f;
	--mt-color-danger-contrast: #ffffff;

	--mt-color-warning: #c89020;
	--mt-color-info: #4d7eaf;

	/* -- Neutrals -- */
	/* Ink scale, dark -> light: text > text-muted > text-soft > text-subtle */
	--mt-color-text: #0f1612;
	--mt-color-text-muted: #2c3530;
	--mt-color-text-soft: #5b6660;
	--mt-color-text-muted-soft: rgba(56, 70, 81, 0.1);
	--mt-color-text-subtle: #8a938d;
	--mt-color-surface: #ffffff;
	--mt-color-surface-muted: #f6f6f4;
	--mt-color-surface-dark: #0e1814;
	--mt-color-border: #e5e5e3;
	--mt-color-border-soft: #ededeb;
	--mt-color-border-strong: rgba(16, 42, 56, 0.18);
	--mt-color-focus: #3b82d6;

	/* -- Category tag palette -- */
	--mt-color-tag-natjecaj:        #a05514;
	--mt-color-tag-natjecaj-bg:     #faecd5;
	--mt-color-tag-poziv:           #a5364a;
	--mt-color-tag-poziv-bg:        #f7dfe0;
	--mt-color-tag-odluka:          #8a6a14;
	--mt-color-tag-odluka-bg:       #f5e9bf;
	--mt-color-tag-savjetovanje:    #5d3e8c;
	--mt-color-tag-savjetovanje-bg: #ebe2f4;
	--mt-color-tag-obavijest:       var(--mt-color-primary-bright);
	--mt-color-tag-obavijest-bg:    var(--mt-color-primary-100);

	/* -- Overlay / scrim -- */
	--mt-color-overlay: rgba(0, 0, 0, 0.55);

	/* -- Spacing scale -- */
	--mt-space-xs: 0.25rem;
	--mt-space-sm: 0.5rem;
	--mt-space-md: 1rem;
	--mt-space-lg: 1.5rem;
	--mt-space-xl: 2rem;
	--mt-space-2xl: 3rem;
	--mt-space-3xl: 4rem;
	--mt-space-4xl: 5.5rem;

	/* -- Section frame -- */
	/* Contained page width — the single width EVERY page's content uses (homepage,
	   content pages, archives, hubs, contact, …) so the whole site lines up. The
	   per-container `min(100% - gutter, …)` keeps a margin off the screen edges.
	   The header/footer chrome is wider (see --mt-home-max-width). */
	--mt-section-max-width: 1260px;
	--mt-section-gutter: 2.5rem;
	/* Chrome (header nav, contact bar, footer) width — the SAME width as the page
	   content (1260px, 2rem gutter) so the header, footer and content all line up
	   at one width on every page. */
	--mt-home-max-width: 1260px;
	--mt-chrome-gutter: 2rem;
	/* Legacy aliases — migrating consumers off these */
	--section-max-width: var(--mt-section-max-width);
	--section-gutter: var(--mt-section-gutter);

	/* -- Typography -- */
	/* Public Sans (USWDS-designed for government sites) is the single   */
	/* font used across the whole site — body, UI, headlines, brand,     */
	/* eyebrows, meta and numerals. The --mt-font-serif and --mt-font-   */
	/* mono slots are kept in the contract but alias sans, so a child    */
	/* theme can repoint them at a serif / monospace for a multi-font    */
	/* system without touching component CSS.                            */
	--mt-font-sans: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	--mt-font-serif: var(--mt-font-sans);
	--mt-font-mono: var(--mt-font-sans);
	/* --mt-font-brand kept for backward-compat; aliases sans by default */
	--mt-font-brand: var(--mt-font-sans);

	--mt-font-size-2xs: 0.6875rem;
	--mt-font-size-xs: 0.75rem;
	--mt-font-size-sm: 0.875rem;
	--mt-font-size-body: 0.9375rem;
	--mt-font-size-md: 1rem;
	--mt-font-size-intro: 1.0625rem;
	--mt-font-size-lg: 1.125rem;
	--mt-font-size-xl: 1.25rem;
	--mt-font-size-2xl: 1.5rem;
	--mt-font-size-3xl: 1.875rem;
	--mt-font-size-4xl: 2.25rem;
	--mt-font-size-5xl: 3rem;

	/* Heading scale (fluid) */
	--mt-heading-size-1: clamp(2.25rem, 4vw, 3rem);
	--mt-heading-size-2: clamp(1.75rem, 2.5vw, 2rem);
	--mt-heading-size-3: clamp(1.375rem, 2vw, 1.5rem);
	--mt-heading-size-4: clamp(1.125rem, 1.5vw, 1.25rem);
	--mt-heading-size-5: var(--mt-font-size-md);
	--mt-heading-size-6: var(--mt-font-size-sm);

	/* Display heading (hero) — fluid 36px mobile → 72px desktop */
	--mt-heading-display-1: clamp(2.25rem, 5.5vw, 4.5rem);
	--mt-heading-letter-spacing: -0.02em;

	/* Legacy --mt-type-* aliases */
	/* Used by per-component CSS (cards, hero content, section heads). */
	--mt-type-small: 0.875rem;
	--mt-type-body: 1rem;
	--mt-type-intro: clamp(1.125rem, 1.3vw, 1.25rem);
	--mt-type-h1: var(--mt-heading-size-1);
	--mt-type-h2: var(--mt-heading-size-2);
	--mt-type-h3: var(--mt-heading-size-3);
	--mt-type-h4: var(--mt-heading-size-4);

	/* Eyebrow / overline */
	--mt-eyebrow-size: var(--mt-font-size-2xs);
	--mt-eyebrow-letter-spacing: 0.08em;
	--mt-eyebrow-letter-spacing-wide: 0.14em;

	--mt-font-weight-regular: 400;
	--mt-font-weight-medium: 500;
	--mt-font-weight-bold: 700;

	--mt-line-height-tight: 1.2;
	--mt-line-height-base: 1.5;
	--mt-line-height-relaxed: 1.7;
	--mt-line-height-display: 1.05;

	/* -- Radii -- */
	--mt-radius-sm: 4px;
	--mt-radius-md: 8px;
	--mt-radius-lg: 12px;
	--mt-radius-xl: 18px;
	--mt-radius-card: 14px;
	--mt-radius-input: 10px;
	--mt-radius-pill: 999px;
	--mt-radius-circle: 50%;

	/* -- Aspect ratios -- */
	--mt-aspect-square: 1 / 1;
	--mt-aspect-landscape: 16 / 10;
	--mt-aspect-video: 16 / 9;

	/* -- Motion -- */
	--mt-motion-fast: 160ms ease;
	--mt-motion-base: 200ms ease;
	--mt-motion-slow: 300ms ease;

	/* -- Shadows -- */
	--mt-shadow-none: none;
	--mt-shadow-sm: 0 1px 0 rgba(15, 22, 18, 0.04), 0 1px 2px rgba(15, 22, 18, 0.04);
	--mt-shadow-md: 0 4px 8px rgba(15, 22, 18, 0.12);
	--mt-shadow-lg: 0 12px 24px rgba(15, 22, 18, 0.18);
	--mt-shadow-elevated: 0 1px 0 rgba(15, 22, 18, 0.04), 0 8px 24px -8px rgba(15, 22, 18, 0.10);
	--mt-shadow-overlay: 0 14px 40px -10px rgba(15, 22, 18, 0.25);

	/* -- Focus ring -- */
	--mt-focus-ring-width: 3px;
	--mt-focus-ring-offset: 2px;
	--mt-focus-ring-color: var(--mt-color-focus);

	/* -- Legacy palette aliases -- */
	/* Consumed throughout the per-component CSS. Values mirror the */
	/* canonical --mt-color-* tokens above. Migrate consumers to */
	/* canonical names incrementally, then drop these. */
	--mt-ink: var(--mt-color-text);
	--mt-ink-soft: var(--mt-color-text-muted);
	--mt-paper: var(--mt-color-surface);
	--mt-surface: var(--mt-color-surface-muted);
	--mt-line: var(--mt-color-border);
	--mt-red: var(--mt-color-danger);
	--mt-yellow: #f7c948;
	--mt-teal: #00756f;
	--mt-page-background: var(--mt-paper);

	/* -- Home-page-context tokens -- */
	/* Scoped here for now; could move to a page-context block later. */
	--mt-home-content-width: var(--section-max-width);
	--mt-home-section-title: clamp(2.25rem, 3vw, 3rem);
	--mt-home-section-title-mobile: clamp(2rem, 9vw, 2.5rem);
	--mt-home-section-rule-width: 3rem;
	--mt-home-section-rule-height: 0.25rem;
}


/* --- assets/css/base.css --- */
/**
 * Base layer — element defaults and resets.
 *
 * Targets raw HTML elements (no class hooks). Consumes design tokens from
 * tokens.css. Components inherit these defaults and override only what
 * their UI specifically needs.
 *
 * @package OpcinaTema
 */

*,
*::before,
*::after {
	box-sizing: border-box;
	-ms-overflow-style: none;
	scrollbar-width: none;
}

*::-webkit-scrollbar {
	display: none;
	width: 0;
	height: 0;
}

html {
	min-height: 100%;
	overflow-x: hidden;
	scroll-behavior: smooth;
}

body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
	margin: 0;
	overflow-x: clip;
	background: var(--mt-page-background);
	color: var(--mt-ink);
	font-family: var(--mt-font-sans);
	font-size: var(--mt-type-body);
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0;
}

@supports not (overflow: clip) {
	body {
		overflow-x: hidden;
	}
}

body > main {
	flex: 1 0 auto;
}

a {
	color: inherit;
	text-decoration-thickness: 0.1em;
	text-underline-offset: 0.16em;
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
	outline: 3px solid var(--mt-color-primary-bright);
	outline-offset: 3px;
}

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

p {
	margin-block: 0 var(--mt-space-md);
}

p:last-child {
	margin-block-end: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin-block: 0 var(--mt-space-md);
	font-weight: 700;
	line-height: 1.25;
}

h1 { font-size: var(--mt-heading-size-1); }
h2 { font-size: var(--mt-heading-size-2); }
h3 { font-size: var(--mt-heading-size-3); }
h4 { font-size: var(--mt-heading-size-4); }
h5 { font-size: var(--mt-heading-size-5); }
h6 { font-size: var(--mt-heading-size-6); }

ul,
ol {
	margin-block: 0 var(--mt-space-md);
	padding-inline-start: var(--mt-space-xl);
}

ul ul,
ul ol,
ol ol,
ol ul {
	margin-block-end: 0;
}

li {
	margin-block: var(--mt-space-xs) 0;
}

blockquote {
	margin: 0 0 var(--mt-space-lg);
	padding-inline-start: var(--mt-space-md);
	border-inline-start: 3px solid var(--mt-color-border, #d9dde1);
}

hr {
	border: 0;
	border-top: 1px solid var(--mt-color-border, #d9dde1);
	margin-block: var(--mt-space-lg);
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

button {
	cursor: pointer;
	background: transparent;
	border: 0;
	padding: 0;
}

label {
	display: inline-block;
}

figure {
	margin: 0;
}

table {
	border-collapse: collapse;
	width: 100%;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.screen-reader-text:focus {
	z-index: 1000;
	top: 1rem;
	left: 1rem;
	width: auto;
	height: auto;
	padding: 0.75rem 1rem;
	clip: auto;
	background: var(--mt-ink);
	color: var(--mt-paper);
}

/*
 * Respect the OS "reduce motion" preference: neutralise transitions, animations,
 * and smooth scrolling for users who request it (WCAG 2.3.3). Near-zero rather
 * than 0 so animation/transition end events still fire.
 */
@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;
	}
}


/* --- assets/css/utilities.css --- */
/**
 * Utilities — reusable, generic layout helpers.
 *
 * Arrange components on pages without each component reinventing layout.
 * No component-specific concerns: a class that only ever holds one kind
 * of component belongs in that component's CSS, not here.
 *
 * All values reference design tokens from tokens.css.
 *
 * @package OpcinaTema
 */

/* -- Container -- */

.mt-container {
	--mt-container-max-width: var(--mt-section-max-width);
	/* 1rem each side (2rem total) — matches the .mt-content column so every page
	   lines up at the same width. */
	--mt-container-gutter: 1rem;
	width: min(100% - var(--mt-container-gutter) * 2, var(--mt-container-max-width));
	margin-inline: auto;
}

/* Narrower content container for prose-heavy pages (single posts, etc.) */
.mt-container--narrow {
	--mt-container-max-width: 75ch;
}

/* -- Grid -- */

.mt-grid {
	display: grid;
	gap: var(--mt-space-lg);
}

.mt-grid--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mt-grid--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mt-grid--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* -- Stack — vertical rhythm -- */

.mt-stack {
	display: flex;
	flex-direction: column;
	gap: var(--mt-space-md);
}

.mt-stack--sm { gap: var(--mt-space-sm); }
.mt-stack--lg { gap: var(--mt-space-lg); }
.mt-stack--xl { gap: var(--mt-space-xl); }

/* -- Split — two-column horizontal layout -- */

.mt-split {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mt-space-lg);
	align-items: flex-start;
}

.mt-split > * {
	flex: 1 1 auto;
	min-width: 0;
}

/* -- Visibility toggles -- */

.mt-hidden {
	display: none !important;
}

@media (max-width: 768px) {
	.mt-hidden-mobile {
		display: none !important;
	}
}

@media (min-width: 769px) {
	.mt-hidden-desktop {
		display: none !important;
	}
}

/* -- Scroll reveal -------------------------------------------------------- */
/* Sections fade up as they enter the viewport. The hidden state applies ONLY
   under .mt-reveal-ready (added by assets/js/mt-reveal.js), so without JS — or
   under reduced motion, where the script bails — content is always visible. */

.mt-reveal-ready .mt-reveal {
	opacity: 0;
	transform: translateY(1.5rem);
	transition: opacity 0.6s ease, transform 0.6s ease;
	will-change: opacity, transform;
}

.mt-reveal-ready .mt-reveal.is-revealed {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.mt-reveal-ready .mt-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* -- Staggered reveal ----------------------------------------------------- */
/* The children of a [data-stagger] grid fade up one after another as the grid
   scrolls in (assets/js/mt-stagger.js sets the per-item delay). Hidden state
   applies only under .mt-stagger-ready, so without JS everything is visible. */

.mt-stagger-ready [data-stagger] > * {
	opacity: 0;
	transform: translateY(0.875rem);
	transition: opacity 0.5s ease, transform 0.5s ease;
	will-change: opacity, transform;
}

.mt-stagger-ready [data-stagger] > .mt-stagger-in {
	opacity: 1;
	transform: none;
}

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


/* --- assets/css/atoms/avatar.css --- */
/**
 * Avatar atom — user/author image with optional initials fallback.
 *
 *   Shape : (circle, default) | --square
 *
 * Composes the image atom for the photo, wrapped in a sized fixed-aspect box
 * that clips the image to the shape. When no attachment is provided and the
 * `initials` arg is set, an initials fallback renders inside the same box.
 *
 * @package OpcinaTema
 */

.mt-avatar {
	/* -- Component-level tokens -- */
	--mt-avatar-size: 2.5rem;
	--mt-avatar-radius: 50%;
	--mt-avatar-bg: var(--mt-color-surface-muted);
	--mt-avatar-fallback-color: var(--mt-color-text-muted);
	--mt-avatar-fallback-weight: var(--mt-font-weight-bold);

	/* -- Structural rules (not tokenized) -- */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: var(--mt-avatar-size);
	height: var(--mt-avatar-size);
	overflow: hidden;
	background: var(--mt-avatar-bg);
	border-radius: var(--mt-avatar-radius);
}

/* -- Inner image (delegated to image atom) -- */

.mt-avatar .mt-image {
	width: 100%;
	height: 100%;
}

.mt-avatar .mt-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* -- Initials fallback -- */

.mt-avatar__initials {
	color: var(--mt-avatar-fallback-color);
	font-family: var(--mt-font-sans);
	font-size: calc(var(--mt-avatar-size) * 0.4);
	font-weight: var(--mt-avatar-fallback-weight);
	line-height: 1;
	text-transform: uppercase;
	user-select: none;
}

/* -- Square variant -- */

.mt-avatar--square {
	--mt-avatar-radius: var(--mt-radius-sm);
}


/* --- assets/css/atoms/badge.css --- */
/**
 * Badge atom — small uppercase pill for status / category / type labels.
 *
 *   Tone : (primary, default) | --muted
 *
 * Single-element atom; renders as a <span>. The host can override any
 * --mt-badge-* token from outside (e.g. a compact card override
 * `--mt-badge-font-size: 0.66rem;`) without needing an atom-level variant.
 *
 * Variants override tokens, not rules.
 *
 * @package OpcinaTema
 */

.mt-badge {
	/* -- Component-level tokens -- */
	--mt-badge-padding-block: 0.28rem;
	--mt-badge-padding-inline: 0.62rem;
	--mt-badge-radius: var(--mt-radius-pill);
	--mt-badge-font-size: 0.72rem;
	--mt-badge-font-weight: var(--mt-font-weight-bold);
	--mt-badge-line-height: 1;
	--mt-badge-letter-spacing: 0.04em;
	--mt-badge-text-transform: uppercase;
	--mt-badge-bg: var(--mt-color-primary-soft);
	--mt-badge-color: var(--mt-color-primary);

	/* -- Structural rules (not tokenized) -- */
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	max-width: 100%;
	overflow: hidden;

	padding: var(--mt-badge-padding-block) var(--mt-badge-padding-inline);
	background: var(--mt-badge-bg);
	border-radius: var(--mt-badge-radius);
	color: var(--mt-badge-color);
	font-family: var(--mt-font-sans);
	font-size: var(--mt-badge-font-size);
	font-weight: var(--mt-badge-font-weight);
	line-height: var(--mt-badge-line-height);
	letter-spacing: var(--mt-badge-letter-spacing);
	text-transform: var(--mt-badge-text-transform);
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* -- Muted tone (for past / inactive content). -- */

.mt-badge--muted {
	--mt-badge-bg: var(--mt-color-text-muted-soft);
	--mt-badge-color: var(--mt-color-text-muted);
}


/* --- assets/css/atoms/button.css --- */
/**
 * Button atom — token-driven skeleton.
 *
 * All themeable values flow through component-level tokens with global-token
 * fallbacks. Variants override tokens, not rules.
 *
 *   Variants : --primary (default) | --secondary | --ghost | --danger
 *   Sizes    : --sm | --md (default) | --lg
 *   Shapes   : (default) | --pill | --circle | --block
 *   Modifier : --icon-only  (auto-applied when icon_position === 'only')
 *   States   : :hover, :focus-visible, :disabled, [aria-pressed="true"]
 *
 * @package OpcinaTema
 */

.mt-button {
	/* -- Spacing & sizing -- */
	--mt-button-padding-x: var(--mt-space-md);
	--mt-button-padding-y: var(--mt-space-sm);
	--mt-button-gap: var(--mt-space-sm);
	--mt-button-min-height: 2.5rem;
	--mt-button-icon-size: 1.25em;

	/* -- Typography -- */
	--mt-button-font-family: inherit;
	--mt-button-font-size: var(--mt-font-size-md);
	--mt-button-font-weight: var(--mt-font-weight-bold);
	--mt-button-line-height: var(--mt-line-height-tight);
	--mt-button-text-transform: none;

	/* -- Shape -- */
	--mt-button-radius: var(--mt-radius-md);
	--mt-button-border-width: 1px;
	--mt-button-border-style: solid;

	/* -- Default colors (primary variant baseline) -- */
	--mt-button-bg: var(--mt-color-primary);
	--mt-button-color: var(--mt-color-primary-contrast);
	--mt-button-border-color: transparent;

	--mt-button-bg-hover: var(--mt-color-primary-hover);
	--mt-button-color-hover: var(--mt-color-primary-contrast);
	--mt-button-border-color-hover: transparent;

	/* -- Effects -- */
	--mt-button-shadow: var(--mt-shadow-none);
	--mt-button-shadow-hover: var(--mt-button-shadow);
	--mt-button-transition: var(--mt-motion-fast);

	/* -- Structural rules (not tokenized) -- */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--mt-button-gap);
	min-height: var(--mt-button-min-height);
	padding: var(--mt-button-padding-y) var(--mt-button-padding-x);
	border: var(--mt-button-border-width) var(--mt-button-border-style) var(--mt-button-border-color);
	border-radius: var(--mt-button-radius);
	background: var(--mt-button-bg);
	color: var(--mt-button-color);
	font-family: var(--mt-button-font-family);
	font-size: var(--mt-button-font-size);
	font-weight: var(--mt-button-font-weight);
	line-height: var(--mt-button-line-height);
	text-transform: var(--mt-button-text-transform);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: var(--mt-button-shadow);
	transition:
		background var(--mt-button-transition),
		color var(--mt-button-transition),
		border-color var(--mt-button-transition),
		box-shadow var(--mt-button-transition);
}

.mt-button:hover,
.mt-button:focus-visible {
	background: var(--mt-button-bg-hover);
	color: var(--mt-button-color-hover);
	border-color: var(--mt-button-border-color-hover);
	box-shadow: var(--mt-button-shadow-hover);
}

.mt-button:focus-visible {
	outline: var(--mt-focus-ring-width) solid var(--mt-focus-ring-color);
	outline-offset: var(--mt-focus-ring-offset);
}

.mt-button:disabled,
.mt-button[aria-disabled="true"] {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}

/* -- Elements -- */

.mt-button__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: var(--mt-button-icon-size);
	height: var(--mt-button-icon-size);
	font-size: var(--mt-button-icon-size);
	line-height: 1;
}

.mt-button__icon img,
.mt-button__icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

.mt-button__label {
	/* Hook for label-specific styling later (truncation, alignment, etc.). */
}

/* -- Variants -- */

.mt-button--secondary {
	--mt-button-bg: var(--mt-color-secondary);
	--mt-button-color: var(--mt-color-secondary-contrast);
	--mt-button-border-color: var(--mt-color-border-strong);
	--mt-button-bg-hover: var(--mt-color-secondary-hover);
	--mt-button-color-hover: var(--mt-color-text);
	--mt-button-border-color-hover: var(--mt-color-focus);
}

.mt-button--ghost {
	--mt-button-bg: transparent;
	--mt-button-color: var(--mt-color-text);
	--mt-button-border-color: transparent;
	--mt-button-bg-hover: transparent;
	--mt-button-color-hover: var(--mt-color-primary);
	--mt-button-border-color-hover: transparent;
}

.mt-button--danger {
	--mt-button-bg: var(--mt-color-danger);
	--mt-button-color: var(--mt-color-danger-contrast);
	--mt-button-bg-hover: var(--mt-color-danger-hover);
	--mt-button-color-hover: var(--mt-color-danger-contrast);
}

/* Section-link: outlined pill used in section heads as the "See all"  */
/* affordance. Compact, primary-colored, transparent fill, soft tint   */
/* on hover.                                                            */
.mt-button--section-link {
	--mt-button-padding-x: calc(var(--mt-space-sm) + var(--mt-space-xs));
	--mt-button-padding-y: var(--mt-space-sm);
	--mt-button-min-height: auto;
	--mt-button-font-size: var(--mt-font-size-sm);
	--mt-button-font-weight: var(--mt-font-weight-medium);
	--mt-button-radius: var(--mt-radius-pill);
	--mt-button-bg: transparent;
	--mt-button-color: var(--mt-color-primary);
	--mt-button-border-color: var(--mt-color-primary);
	--mt-button-bg-hover: var(--mt-color-primary-tint);
	--mt-button-color-hover: var(--mt-color-primary);
	--mt-button-border-color-hover: var(--mt-color-primary);
}

/* Modifier, not a variant: re-points the same tokens for a button sitting on a
   dark band (the featured-projects and gallery sections), where the primary-blue
   outline would be invisible. Geometry stays identical to the variant it
   modifies, so those CTAs read as the same control as every other section's. */
.mt-button--on-dark {
	--mt-button-bg: transparent;
	--mt-button-color: var(--mt-color-primary-contrast);
	--mt-button-border-color: rgba(255, 255, 255, 0.55);
	--mt-button-bg-hover: rgba(255, 255, 255, 0.14);
	--mt-button-color-hover: var(--mt-color-primary-contrast);
	--mt-button-border-color-hover: var(--mt-color-primary-contrast);
}

/* -- Sizes -- */

.mt-button--sm {
	--mt-button-padding-x: var(--mt-space-sm);
	--mt-button-padding-y: var(--mt-space-xs);
	--mt-button-min-height: 2rem;
	--mt-button-font-size: var(--mt-font-size-sm);
	--mt-button-icon-size: 1rem;
}

.mt-button--lg {
	--mt-button-padding-x: var(--mt-space-lg);
	--mt-button-padding-y: var(--mt-space-md);
	--mt-button-min-height: 3rem;
	--mt-button-font-size: var(--mt-font-size-lg);
	--mt-button-icon-size: 1.5rem;
}

/* -- Shape modifiers -- */

.mt-button--pill {
	--mt-button-radius: var(--mt-radius-pill);
}

.mt-button--circle {
	--mt-button-radius: var(--mt-radius-circle);
	--mt-button-padding-x: 0;
	--mt-button-padding-y: 0;
	width: var(--mt-button-min-height);
	min-width: var(--mt-button-min-height);
	aspect-ratio: 1;
}

.mt-button--block {
	display: flex;
	width: 100%;
}

.mt-button--icon-only {
	--mt-button-padding-x: var(--mt-button-padding-y);
}

/* -- Toggle state -- */

.mt-button[aria-pressed="true"] {
	--mt-button-bg: var(--mt-color-primary);
	--mt-button-color: var(--mt-color-primary-contrast);
	--mt-button-border-color: var(--mt-color-primary);
}


/* --- assets/css/atoms/card-label.css --- */
/**
 * Card label atom.
 *
 * Small uppercase label used inside cards and section heads to mark
 * eyebrows / category badges. Red text on transparent background.
 *
 * @package OpcinaTema
 */

.mt-card-label {
  margin: 0;
  color: var(--mt-red);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}


/* --- assets/css/atoms/checkbox.css --- */
/**
 * Checkbox atom — custom-styled single checkbox.
 *
 * Renders the native <input type="checkbox"> with appearance:none, then draws
 * the visible box via the input's own background/border. The check-mark is
 * drawn as a CSS-mask shape on the input's ::before pseudo. The native input
 * remains in the accessibility tree (keyboard, screen readers, form submit).
 *
 *   States (no variants):
 *     :checked              → filled box with check-mark
 *     :focus-visible        → focus ring (border colour + soft shadow)
 *     [disabled]            → muted + cursor:not-allowed
 *     [aria-invalid="true"] → danger border (JS-driven; never fires on first paint)
 *
 * @package OpcinaTema
 */

.mt-checkbox {
	/* -- Component-level tokens -- */
	--mt-checkbox-size: 1.125rem;
	--mt-checkbox-bg: var(--mt-color-surface);
	--mt-checkbox-border-color: var(--mt-color-border);
	--mt-checkbox-border-width: 1px;
	--mt-checkbox-radius: var(--mt-radius-sm);
	--mt-checkbox-checked-bg: var(--mt-color-primary);
	--mt-checkbox-checked-border: var(--mt-color-primary);
	--mt-checkbox-check-color: var(--mt-color-primary-contrast);
	--mt-checkbox-focus-ring: var(--mt-color-focus);

	/* -- Structural rules (not tokenized) -- */
	appearance: none;
	display: inline-block;
	flex: 0 0 auto;
	width: var(--mt-checkbox-size);
	height: var(--mt-checkbox-size);
	margin: 0;
	padding: 0;
	background: var(--mt-checkbox-bg);
	border: var(--mt-checkbox-border-width) solid var(--mt-checkbox-border-color);
	border-radius: var(--mt-checkbox-radius);
	cursor: pointer;
	position: relative;
	transition:
		background var(--mt-motion-fast),
		border-color var(--mt-motion-fast),
		box-shadow var(--mt-motion-fast);
}

/* -- Check-mark, drawn via CSS mask on ::before. -- */

.mt-checkbox::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--mt-checkbox-check-color);
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-7'/></svg>") center / 70% no-repeat;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-7'/></svg>") center / 70% no-repeat;
	opacity: 0;
	transition: opacity var(--mt-motion-fast);
}

/* -- Checked state. -- */

.mt-checkbox:checked {
	--mt-checkbox-bg: var(--mt-checkbox-checked-bg);
	--mt-checkbox-border-color: var(--mt-checkbox-checked-border);
}

.mt-checkbox:checked::before {
	opacity: 1;
}

/* -- Focus state. -- */

.mt-checkbox:focus-visible {
	--mt-checkbox-border-color: var(--mt-checkbox-focus-ring);
	outline: 0;
	box-shadow: 0 0 0 3px rgba(54, 201, 87, 0.2);
}

/* -- Disabled state. -- */

.mt-checkbox[disabled] {
	--mt-checkbox-bg: var(--mt-color-surface-muted);
	--mt-checkbox-border-color: var(--mt-color-border);
	cursor: not-allowed;
	opacity: 0.6;
}

.mt-checkbox[disabled]:checked {
	--mt-checkbox-bg: var(--mt-color-text-muted);
	--mt-checkbox-border-color: var(--mt-color-text-muted);
}

/* -- Invalid state (JS-driven; never fires on first paint). -- */

.mt-checkbox[aria-invalid="true"] {
	--mt-checkbox-border-color: var(--mt-color-danger);
}


/* --- assets/css/atoms/divider.css --- */
/**
 * Divider atom — horizontal or vertical line separator.
 *
 *   Orientation : (horizontal, default — <hr>) | --vertical (<span role="separator">)
 *
 * The line is drawn by a sized box with --mt-divider-color as its background.
 * Switching orientation swaps width↔height and margin-block↔margin-inline
 * (structural carve-out — these properties can't be tokenized per the working
 * rules).
 *
 * @package OpcinaTema
 */

.mt-divider {
	/* -- Component-level tokens -- */
	--mt-divider-color: var(--mt-color-border);
	--mt-divider-thickness: 1px;
	--mt-divider-spacing: var(--mt-space-md);

	/* -- Structural rules (not tokenized) -- */
	display: block;
	width: 100%;
	height: var(--mt-divider-thickness);
	margin: 0;
	margin-block: var(--mt-divider-spacing);
	padding: 0;
	border: 0;
	background-color: var(--mt-divider-color);
}

/* -- Vertical variant.
 *    Structural carve-out: swaps width↔height and margin-block↔margin-inline. -- */

.mt-divider--vertical {
	display: inline-block;
	width: var(--mt-divider-thickness);
	height: 100%;
	margin-block: 0;
	margin-inline: var(--mt-divider-spacing);
	align-self: stretch;
}


/* --- assets/css/atoms/eyebrow.css --- */
/**
 * Eyebrow atom — small uppercase monospace kicker.
 *
 * Variants:
 *   default (plain)     just the label text
 *   --dot               leading primary-color circle
 *   --rule              leading short horizontal rule
 *
 * Tones (set via .mt-eyebrow--muted / --inverse):
 *   default (primary)   primary-color text
 *   --muted             text-soft (warm mid gray)
 *   --inverse           white (for dark backdrops like footer)
 *
 * All visual values flow through component tokens with fallbacks to
 * global tokens; variants change tokens, not rules.
 *
 * @package OpcinaTema
 */

.mt-eyebrow {
	--mt-eyebrow-color: var(--mt-color-primary);
	--mt-eyebrow-font: var(--mt-font-mono);
	--mt-eyebrow-size: var(--mt-font-size-2xs);
	--mt-eyebrow-weight: var(--mt-font-weight-medium);
	--mt-eyebrow-tracking: var(--mt-eyebrow-letter-spacing-wide);
	--mt-eyebrow-line-height: 1;
	--mt-eyebrow-gap: var(--mt-space-sm);
	--mt-eyebrow-mark-color: var(--mt-color-primary-bright);
	--mt-eyebrow-mark-size: 0.4rem;
	--mt-eyebrow-mark-rule-length: 1.5rem;

	display: inline-flex;
	align-items: center;
	gap: var(--mt-eyebrow-gap);
	margin: 0;
	color: var(--mt-eyebrow-color);
	font-family: var(--mt-eyebrow-font);
	font-size: var(--mt-eyebrow-size);
	font-weight: var(--mt-eyebrow-weight);
	letter-spacing: var(--mt-eyebrow-tracking);
	line-height: var(--mt-eyebrow-line-height);
	text-transform: uppercase;
}

.mt-eyebrow__text {
	display: inline-block;
}

/* -- Variants: leading mark -- */

.mt-eyebrow__mark {
	display: inline-block;
	flex: 0 0 auto;
	background: var(--mt-eyebrow-mark-color);
}

.mt-eyebrow--dot .mt-eyebrow__mark {
	width: var(--mt-eyebrow-mark-size);
	height: var(--mt-eyebrow-mark-size);
	border-radius: 50%;
}

.mt-eyebrow--rule .mt-eyebrow__mark {
	width: var(--mt-eyebrow-mark-rule-length);
	height: 1px;
}

/* -- Tones -- */

.mt-eyebrow--muted {
	--mt-eyebrow-color: var(--mt-color-text-soft);
	--mt-eyebrow-mark-color: var(--mt-color-text-subtle);
}

.mt-eyebrow--inverse {
	--mt-eyebrow-color: #ffffff;
	--mt-eyebrow-mark-color: #ffffff;
}


/* --- assets/css/atoms/figure.css --- */
/**
 * Figure atom — image + optional <figcaption>.
 *
 *   Caption position : (below, default) | --caption-overlay
 *   Frame            : (squared, default) | --rounded
 *
 * Variants override tokens, not rules. Two structural carve-outs (`position`,
 * `overflow` aren't in the tokenizable property list, so they appear directly
 * on the variant rules):
 *   - --caption-overlay needs position: relative on the figure and absolute
 *     on the caption, plus overflow: hidden to clip the overlay to the
 *     figure's border-radius.
 *   - --rounded needs overflow: hidden so the inner <img> is clipped to the
 *     figure's border-radius.
 *
 * The atom composes the image atom (template-parts/atoms/image.php) for the
 * media; it does not redeclare any image-level rules.
 *
 * @package OpcinaTema
 */

.mt-figure {
	/* -- Component-level tokens -- */
	--mt-figure-margin-block: var(--mt-space-md);
	--mt-figure-radius: 0;
	--mt-figure-caption-gap: var(--mt-space-sm);
	--mt-figure-caption-size: var(--mt-font-size-sm);
	--mt-figure-caption-color: var(--mt-color-text-muted);
	--mt-figure-caption-line-height: var(--mt-line-height-base);
	--mt-figure-caption-padding: 0;
	--mt-figure-overlay-bg: var(--mt-color-overlay);
	--mt-figure-overlay-color: var(--mt-color-surface);

	/* -- Structural rules (not tokenized) -- */
	display: block;
	margin: 0;
	margin-block: var(--mt-figure-margin-block);
	border-radius: var(--mt-figure-radius);
}

/* -- Elements -- */

.mt-figure__media-link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.mt-figure__caption {
	display: block;
	margin: 0;
	margin-top: var(--mt-figure-caption-gap);
	padding: var(--mt-figure-caption-padding);
	font-family: var(--mt-font-sans);
	font-size: var(--mt-figure-caption-size);
	line-height: var(--mt-figure-caption-line-height);
	color: var(--mt-figure-caption-color);
}

/* -- Rounded frame.
 *    Structural carve-out: overflow:hidden clips the inner image to the
 *    figure's border-radius. -- */

.mt-figure--rounded {
	--mt-figure-radius: var(--mt-radius-md);
	overflow: hidden;
}

/* -- Overlay caption.
 *    Structural carve-out: position rules for the absolute caption, plus
 *    overflow:hidden so the scrim respects the figure's border-radius when
 *    --rounded is also applied. -- */

.mt-figure--caption-overlay {
	position: relative;
	overflow: hidden;
}

.mt-figure--caption-overlay .mt-figure__caption {
	position: absolute;
	inset: auto 0 0 0;
	margin: 0;
	background: var(--mt-figure-overlay-bg);
	--mt-figure-caption-color: var(--mt-figure-overlay-color);
	--mt-figure-caption-padding: var(--mt-space-md);
}


/* --- assets/css/atoms/heading.css --- */
/**
 * Heading atom — semantic h1–h6 with token-driven visual scale.
 *
 *   Display  : --display-1 .. --display-6 (visual size; decoupled from semantic level)
 *   Align    : --align-left | --align-center | --align-right
 *   Tone     : (default) | --tone-muted | --tone-inverse
 *   Weight   : --weight-regular | --weight-medium | --weight-bold (default)
 *   Family   : --family-sans (default) | --family-brand
 *
 * Variants override tokens, not rules.
 *
 * @package OpcinaTema
 */

.mt-heading {
	/* -- Size & spacing -- */
	--mt-heading-size: var(--mt-heading-size-2);
	--mt-heading-line-height: var(--mt-line-height-tight);
	--mt-heading-letter-spacing: 0;
	--mt-heading-margin-top: 0;
	--mt-heading-margin-bottom: var(--mt-space-sm);

	/* -- Color -- */
	--mt-heading-color: var(--mt-color-text);

	/* -- Typography -- */
	--mt-heading-font-family: var(--mt-font-sans);
	--mt-heading-font-weight: var(--mt-font-weight-bold);
	--mt-heading-text-align: left;
	--mt-heading-text-transform: none;

	/* -- Structural -- */
	display: block;
	margin-top: var(--mt-heading-margin-top);
	margin-bottom: var(--mt-heading-margin-bottom);
	color: var(--mt-heading-color);
	font-family: var(--mt-heading-font-family);
	font-size: var(--mt-heading-size);
	font-weight: var(--mt-heading-font-weight);
	line-height: var(--mt-heading-line-height);
	letter-spacing: var(--mt-heading-letter-spacing);
	text-align: var(--mt-heading-text-align);
	text-transform: var(--mt-heading-text-transform);
	text-wrap: balance;
}

/* -- Elements -- */

.mt-heading__eyebrow {
	display: block;
	margin-bottom: var(--mt-space-xs);
	color: var(--mt-color-text-muted);
	font-family: var(--mt-font-sans);
	font-size: var(--mt-eyebrow-size);
	font-weight: var(--mt-font-weight-medium);
	letter-spacing: var(--mt-eyebrow-letter-spacing);
	line-height: var(--mt-line-height-tight);
	text-transform: uppercase;
}

.mt-heading__text {
	/* Hook for text-specific styling later. */
}

/* -- Display sizes -- */

.mt-heading--display-1 {
	--mt-heading-size: var(--mt-heading-size-1);
}

.mt-heading--display-2 {
	--mt-heading-size: var(--mt-heading-size-2);
}

.mt-heading--display-3 {
	--mt-heading-size: var(--mt-heading-size-3);
}

.mt-heading--display-4 {
	--mt-heading-size: var(--mt-heading-size-4);
}

.mt-heading--display-5 {
	--mt-heading-size: var(--mt-heading-size-5);
}

.mt-heading--display-6 {
	--mt-heading-size: var(--mt-heading-size-6);
}

/* -- Alignment -- */

.mt-heading--align-left {
	--mt-heading-text-align: left;
}

.mt-heading--align-center {
	--mt-heading-text-align: center;
}

.mt-heading--align-right {
	--mt-heading-text-align: right;
}

/* -- Weight -- */

.mt-heading--weight-regular {
	--mt-heading-font-weight: var(--mt-font-weight-regular);
}

.mt-heading--weight-medium {
	--mt-heading-font-weight: var(--mt-font-weight-medium);
}

.mt-heading--weight-bold {
	--mt-heading-font-weight: var(--mt-font-weight-bold);
}

/* -- Family -- */

.mt-heading--family-sans {
	--mt-heading-font-family: var(--mt-font-sans);
}

.mt-heading--family-brand {
	--mt-heading-font-family: var(--mt-font-brand);
}

/* -- Tone -- */

.mt-heading--tone-muted {
	--mt-heading-color: var(--mt-color-text-muted);
}

.mt-heading--tone-inverse {
	--mt-heading-color: var(--mt-color-surface);
}


/* --- assets/css/atoms/icon.css --- */
/**
 * Icon atom — token-driven icon container.
 *
 *   Sizes : --sm | --md (default) | --lg | custom inline via --mt-icon-size
 *   Lib   : --svg | --dashicons | --raw  (class hint; no visual difference by default)
 *
 * The wrapper sets a single 1:1 box (width = height = --mt-icon-size). Inline
 * SVGs scale to fill, dashicons inherit the wrapper's font-size, raw content
 * inherits both.
 *
 * @package OpcinaTema
 */

.mt-icon {
	--mt-icon-size: 1em;
	--mt-icon-color: currentColor;

	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: var(--mt-icon-size);
	height: var(--mt-icon-size);
	font-size: var(--mt-icon-size);
	line-height: 1;
	color: var(--mt-icon-color);
	vertical-align: middle;
}

/* -- Inline SVG -- */

.mt-icon svg {
	display: block;
	width: 100%;
	height: 100%;
	fill: currentColor;
}

.mt-icon svg :where([stroke]:not([stroke="none"])) {
	stroke: currentColor;
}

/* -- Dashicons -- */

.mt-icon .dashicons {
	display: block;
	width: 1em;
	height: 1em;
	font-size: 1em;
	line-height: 1;
}

/* -- Raw library: child contents fill the box -- */

.mt-icon--raw > img,
.mt-icon--raw > svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* -- Sizes -- */

.mt-icon--sm {
	--mt-icon-size: var(--mt-font-size-sm);
}

.mt-icon--md {
	--mt-icon-size: var(--mt-font-size-md);
}

.mt-icon--lg {
	--mt-icon-size: var(--mt-font-size-xl);
}


/* --- assets/css/atoms/image.css --- */
/**
 * Image atom — token-driven responsive image with optional fill, aspect ratio,
 * radius, and hover-zoom.
 *
 *   Fill          : --fill (width/height: 100%; for card thumbnail slots)
 *   Aspect ratio  : --square | --landscape | --video (or inline
 *                   --mt-image-aspect-ratio for one-offs like '4 / 3')
 *   Radius        : --rounded | --circle
 *   Fit           : (cover default) | --contain
 *   Hover         : --zoom-on-hover
 *   Fallback      : --fallback (object-fit: contain + padding + opacity)
 *   Inverse       : --inverse (filter: brightness(0) invert(1))
 *
 * Variants override tokens, not rules. One exception, called out below:
 * .mt-image--inverse uses `filter` directly because `filter` is intentionally
 * not in the tokenizable property list (rule #3 — tokens are limited to
 * colors, spacing, typography, radii, shadows, motion, aspect ratios).
 *
 * @package OpcinaTema
 */

.mt-image {
	/* -- Component-level tokens -- */
	--mt-image-aspect-ratio: auto;
	--mt-image-radius: 0;
	--mt-image-fit: cover;
	--mt-image-position: center;
	--mt-image-bg: transparent;
	--mt-image-transition: var(--mt-motion-base);
	--mt-image-hover-scale: 1;
	--mt-image-fallback-padding: var(--mt-space-2xl);
	--mt-image-fallback-opacity: 0.9;

	/* -- Structural rules (not tokenized) -- */
	display: block;
	max-width: 100%;
	height: auto;
	aspect-ratio: var(--mt-image-aspect-ratio);
	object-fit: var(--mt-image-fit);
	object-position: var(--mt-image-position);
	border-radius: var(--mt-image-radius);
	background-color: var(--mt-image-bg);
}

/* -- Fill: image consumes its parent slot completely (card thumbnail mode) -- */

.mt-image--fill {
	width: 100%;
	height: 100%;
}

/* -- Aspect ratio variants -- */

.mt-image--square {
	--mt-image-aspect-ratio: var(--mt-aspect-square);
}

.mt-image--landscape {
	--mt-image-aspect-ratio: var(--mt-aspect-landscape);
}

.mt-image--video {
	--mt-image-aspect-ratio: var(--mt-aspect-video);
}

/* -- Radius -- */

.mt-image--rounded {
	--mt-image-radius: var(--mt-radius-md);
}

.mt-image--circle {
	--mt-image-radius: var(--mt-radius-circle);
}

/* -- Fit -- */

.mt-image--cover {
	--mt-image-fit: cover;
}

.mt-image--contain {
	--mt-image-fit: contain;
}

/* -- Hover zoom. Hover on the image itself; parent containers can also
 *    forward focus-visible state at integration time if needed. -- */

.mt-image--zoom-on-hover {
	transition: transform var(--mt-image-transition);
}

.mt-image--zoom-on-hover:hover {
	transform: scale(var(--mt-image-hover-scale));
	--mt-image-hover-scale: 1.035;
}

/* -- Fallback presentation when the image is a stand-in icon rather than
 *    real content. Always paired with --fill in practice. -- */

.mt-image--fallback {
	--mt-image-fit: contain;
	box-sizing: border-box;
	padding: var(--mt-image-fallback-padding);
	opacity: var(--mt-image-fallback-opacity);
}

/* -- Inverse: invert a dark fallback SVG to white. Carved out from rule #5
 *    because `filter` is not in the tokenizable property list. -- */

.mt-image--inverse {
	filter: brightness(0) invert(1);
}


/* --- assets/css/atoms/input.css --- */
/**
 * Input atom — text-style form input.
 *
 *   Types : text (default) | search | email | url | tel | password |
 *           number | date | time
 *
 *   States (no variants needed — driven by element attributes):
 *     :focus-visible        → focus ring (border colour + soft shadow)
 *     [disabled]            → muted bg/colour + cursor:not-allowed
 *     [aria-invalid="true"] → danger border (set by JS after submit attempt;
 *                             never fires on first paint)
 *
 * Host containers (e.g. .mt-search-form) override the chrome tokens
 * (border-color, bg, radius) from outside to neutralise the default look
 * when the parent owns the visible chrome.
 *
 * @package OpcinaTema
 */

.mt-input {
	/* -- Component-level tokens -- */
	--mt-input-bg: var(--mt-color-surface);
	--mt-input-color: var(--mt-color-text);
	--mt-input-placeholder: var(--mt-color-text-muted);
	--mt-input-border-color: var(--mt-color-border);
	--mt-input-border-width: 1px;
	--mt-input-radius: var(--mt-radius-sm);
	--mt-input-padding-block: 0.625rem;
	--mt-input-padding-inline: 0.875rem;
	--mt-input-font-size: var(--mt-font-size-md);
	--mt-input-line-height: var(--mt-line-height-base);
	--mt-input-focus-ring: var(--mt-color-focus);

	/* -- Structural rules (not tokenized) -- */
	display: block;
	width: 100%;
	min-width: 0;
	margin: 0;
	padding: var(--mt-input-padding-block) var(--mt-input-padding-inline);
	background: var(--mt-input-bg);
	color: var(--mt-input-color);
	border: var(--mt-input-border-width) solid var(--mt-input-border-color);
	border-radius: var(--mt-input-radius);
	font-family: var(--mt-font-sans);
	font-size: var(--mt-input-font-size);
	line-height: var(--mt-input-line-height);
	transition:
		border-color var(--mt-motion-fast),
		box-shadow var(--mt-motion-fast);
}

.mt-input::placeholder {
	color: var(--mt-input-placeholder);
	opacity: 1; /* reset Firefox's default 0.54 */
}

/* -- Focus state -- */

.mt-input:focus-visible {
	--mt-input-border-color: var(--mt-input-focus-ring);
	outline: 0;
	box-shadow: 0 0 0 3px rgba(54, 201, 87, 0.2);
}

/* -- Disabled state -- */

.mt-input[disabled] {
	--mt-input-bg: var(--mt-color-surface-muted);
	--mt-input-color: var(--mt-color-text-muted);
	cursor: not-allowed;
}

/* -- Invalid state (JS-driven; never fires on first paint) -- */

.mt-input[aria-invalid="true"] {
	--mt-input-border-color: var(--mt-color-danger);
}

/* -- Search-type browser chrome -- */

.mt-input[type="search"]::-webkit-search-cancel-button {
	cursor: pointer;
}


/* --- assets/css/atoms/label.css --- */
/**
 * Label atom — form-field label, with optional required indicator.
 *
 * Pair with a form control via `for=""`. Hosts that need a layout override
 * (e.g. text-align: center, custom margin) target `.mt-label` directly from
 * their parent context.
 *
 * The screen-reader-only variant (hidden=true) piggybacks on WordPress's
 * `.screen-reader-text` utility provided by the html5 theme support; no
 * additional CSS is needed in this atom for that case.
 *
 * @package OpcinaTema
 */

.mt-label {
	/* -- Component-level tokens -- */
	--mt-label-color: var(--mt-color-text);
	--mt-label-font-size: 0.95rem;
	--mt-label-font-weight: 800;
	--mt-label-line-height: 1.2;
	--mt-label-required-color: var(--mt-color-danger);
	--mt-label-required-margin: 0.25em;

	/* -- Structural rules (not tokenized) -- */
	display: block;
	color: var(--mt-label-color);
	font-family: var(--mt-font-sans);
	font-size: var(--mt-label-font-size);
	font-weight: var(--mt-label-font-weight);
	line-height: var(--mt-label-line-height);
}

.mt-label__required {
	margin-inline-start: var(--mt-label-required-margin);
	color: var(--mt-label-required-color);
}


/* --- assets/css/atoms/link.css --- */
/**
 * Link atom — token-driven inline text link.
 *
 *   Variants : --default | --muted | --inverse | --external
 *   States   : :hover, :focus-visible, :visited
 *
 * Variants override tokens, not rules.
 *
 * @package OpcinaTema
 */

.mt-link {
	/* -- Colors -- */
	--mt-link-color: var(--mt-color-primary);
	--mt-link-color-hover: var(--mt-color-primary-hover);
	--mt-link-color-visited: var(--mt-link-color);

	/* -- Decoration -- */
	--mt-link-decoration: underline;
	--mt-link-decoration-hover: underline;
	--mt-link-decoration-thickness: 0.1em;
	--mt-link-decoration-offset: 0.16em;

	/* -- Typography -- */
	--mt-link-font-weight: inherit;

	/* -- Layout -- */
	--mt-link-gap: var(--mt-space-xs);
	--mt-link-icon-size: 1em;

	/* -- Motion -- */
	--mt-link-transition: var(--mt-motion-fast);

	/* -- Structural rules (not tokenized) -- */
	display: inline-flex;
	align-items: baseline;
	gap: var(--mt-link-gap);
	color: var(--mt-link-color);
	font-weight: var(--mt-link-font-weight);
	text-decoration-line: var(--mt-link-decoration);
	text-decoration-thickness: var(--mt-link-decoration-thickness);
	text-underline-offset: var(--mt-link-decoration-offset);
	transition:
		color var(--mt-link-transition),
		text-decoration-color var(--mt-link-transition);
}

.mt-link:visited {
	color: var(--mt-link-color-visited);
}

.mt-link:hover,
.mt-link:focus-visible {
	color: var(--mt-link-color-hover);
	text-decoration-line: var(--mt-link-decoration-hover);
}

.mt-link:focus-visible {
	outline: var(--mt-focus-ring-width) solid var(--mt-focus-ring-color);
	outline-offset: var(--mt-focus-ring-offset);
}

/* -- Elements -- */

.mt-link__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: var(--mt-link-icon-size);
	height: var(--mt-link-icon-size);
	font-size: var(--mt-link-icon-size);
	line-height: 1;
}

.mt-link__icon img,
.mt-link__icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

.mt-link__label {
	/* Hook for label-specific styling later (truncation, italics, etc.). */
}

/* -- Variants -- */

.mt-link--muted {
	--mt-link-color: var(--mt-color-text-muted);
	--mt-link-color-hover: var(--mt-color-text);
	--mt-link-color-visited: var(--mt-color-text-muted);
}

.mt-link--inverse {
	--mt-link-color: var(--mt-color-surface);
	--mt-link-color-hover: var(--mt-color-surface);
	--mt-link-color-visited: var(--mt-color-surface);
	--mt-link-decoration: underline;
}

.mt-link--external {
	/* Reserved for future styling (external arrow icon, etc.). */
}


/* --- assets/css/atoms/logo.css --- */
/**
 * Logo atom — site logo (image or wordmark text).
 *
 * Renders an image (via the image atom) when an attachment ID is supplied,
 * otherwise renders a brand-font wordmark. Hosts wrap this in an anchor when
 * the logo links somewhere (the anchor and any adjacent name/seal markup
 * are organism-tier concerns).
 *
 * @package OpcinaTema
 */

.mt-logo {
	/* -- Component-level tokens -- */
	--mt-logo-image-size: 3rem;
	--mt-logo-color: var(--mt-color-text);
	--mt-logo-font: var(--mt-font-brand);
	--mt-logo-font-size: var(--mt-font-size-2xl);
	--mt-logo-font-weight: var(--mt-font-weight-bold);
	--mt-logo-letter-spacing: 0.02em;

	/* -- Structural rules (not tokenized) -- */
	display: inline-flex;
	align-items: center;
	color: var(--mt-logo-color);
}

/* -- Image variant: clip image to the logo's size box. -- */

.mt-logo--image {
	width: var(--mt-logo-image-size);
	height: var(--mt-logo-image-size);
}

.mt-logo--image .mt-image,
.mt-logo--image .mt-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* -- Wordmark variant: brand-font text. -- */

.mt-logo--wordmark {
	font-family: var(--mt-logo-font);
	font-size: var(--mt-logo-font-size);
	font-weight: var(--mt-logo-font-weight);
	letter-spacing: var(--mt-logo-letter-spacing);
	line-height: 1;
	text-transform: uppercase;
}


/* --- assets/css/atoms/paragraph.css --- */
/**
 * Paragraph atom — body copy with controllable size, tone, and measure.
 *
 *   Sizes   : --size-sm | --size-md (default) | --size-lg | --size-intro
 *   Tone    : (default) | --tone-muted | --tone-inverse
 *   Align   : --align-left (default) | --align-center | --align-right
 *   Weight  : --weight-regular (default) | --weight-medium | --weight-bold
 *   Measure : --measure-narrow | --measure-default | --measure-wide | --measure-full
 *   Leading : --leading-tight | --leading-base (default) | --leading-relaxed
 *
 * Variants override tokens, not rules.
 *
 * @package OpcinaTema
 */

.mt-paragraph {
	/* -- Component-level tokens -- */
	--mt-paragraph-size: var(--mt-font-size-md);
	--mt-paragraph-line-height: var(--mt-line-height-base);
	--mt-paragraph-color: var(--mt-color-text);
	--mt-paragraph-font-family: var(--mt-font-sans);
	--mt-paragraph-font-weight: var(--mt-font-weight-regular);
	--mt-paragraph-text-align: left;
	--mt-paragraph-max-width: 70ch;
	--mt-paragraph-margin-top: 0;
	--mt-paragraph-margin-bottom: var(--mt-space-md);

	/* -- Structural -- */
	display: block;
	max-width: var(--mt-paragraph-max-width);
	margin-top: var(--mt-paragraph-margin-top);
	margin-bottom: var(--mt-paragraph-margin-bottom);
	color: var(--mt-paragraph-color);
	font-family: var(--mt-paragraph-font-family);
	font-size: var(--mt-paragraph-size);
	font-weight: var(--mt-paragraph-font-weight);
	line-height: var(--mt-paragraph-line-height);
	text-align: var(--mt-paragraph-text-align);
	text-wrap: pretty;
}

/* When centered, ensure the constrained measure also centers in its container. */
.mt-paragraph--align-center {
	margin-inline: auto;
}

/* -- Sizes -- */

.mt-paragraph--size-sm {
	--mt-paragraph-size: var(--mt-font-size-sm);
}

.mt-paragraph--size-md {
	--mt-paragraph-size: var(--mt-font-size-md);
}

.mt-paragraph--size-lg {
	--mt-paragraph-size: var(--mt-font-size-lg);
}

.mt-paragraph--size-intro {
	--mt-paragraph-size: clamp(1.125rem, 1.3vw, 1.25rem);
}

/* -- Alignment -- */

.mt-paragraph--align-left {
	--mt-paragraph-text-align: left;
}

.mt-paragraph--align-center {
	--mt-paragraph-text-align: center;
}

.mt-paragraph--align-right {
	--mt-paragraph-text-align: right;
}

/* -- Weight -- */

.mt-paragraph--weight-regular {
	--mt-paragraph-font-weight: var(--mt-font-weight-regular);
}

.mt-paragraph--weight-medium {
	--mt-paragraph-font-weight: var(--mt-font-weight-medium);
}

.mt-paragraph--weight-bold {
	--mt-paragraph-font-weight: var(--mt-font-weight-bold);
}

/* -- Leading -- */

.mt-paragraph--leading-tight {
	--mt-paragraph-line-height: var(--mt-line-height-tight);
}

.mt-paragraph--leading-base {
	--mt-paragraph-line-height: var(--mt-line-height-base);
}

.mt-paragraph--leading-relaxed {
	--mt-paragraph-line-height: var(--mt-line-height-relaxed);
}

/* -- Measure (line length) -- */

.mt-paragraph--measure-narrow {
	--mt-paragraph-max-width: 50ch;
}

.mt-paragraph--measure-default {
	--mt-paragraph-max-width: 70ch;
}

.mt-paragraph--measure-wide {
	--mt-paragraph-max-width: 90ch;
}

.mt-paragraph--measure-full {
	--mt-paragraph-max-width: none;
}

/* -- Tone -- */

.mt-paragraph--tone-muted {
	--mt-paragraph-color: var(--mt-color-text-muted);
}

.mt-paragraph--tone-inverse {
	--mt-paragraph-color: var(--mt-color-surface);
}


/* --- assets/css/atoms/radio.css --- */
/**
 * Radio atom — custom-styled single radio button.
 *
 * Renders <input type="radio"> with appearance:none, draws a circular box,
 * and shows a filled center-dot when checked. Native input stays in the
 * accessibility tree.
 *
 *   States (no variants):
 *     :checked              → filled centre dot
 *     :focus-visible        → focus ring (border colour + soft shadow)
 *     [disabled]            → muted + cursor:not-allowed
 *     [aria-invalid="true"] → danger border
 *
 * @package OpcinaTema
 */

.mt-radio {
	/* -- Component-level tokens -- */
	--mt-radio-size: 1.125rem;
	--mt-radio-bg: var(--mt-color-surface);
	--mt-radio-border-color: var(--mt-color-border);
	--mt-radio-border-width: 1px;
	--mt-radio-checked-color: var(--mt-color-primary);
	--mt-radio-dot-size: 0.5rem;
	--mt-radio-focus-ring: var(--mt-color-focus);

	/* -- Structural rules (not tokenized) -- */
	appearance: none;
	display: inline-block;
	flex: 0 0 auto;
	width: var(--mt-radio-size);
	height: var(--mt-radio-size);
	margin: 0;
	padding: 0;
	background: var(--mt-radio-bg);
	border: var(--mt-radio-border-width) solid var(--mt-radio-border-color);
	border-radius: 50%;
	cursor: pointer;
	position: relative;
	transition:
		background var(--mt-motion-fast),
		border-color var(--mt-motion-fast),
		box-shadow var(--mt-motion-fast);
}

/* -- Centre dot, scaled in on :checked. -- */

.mt-radio::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--mt-radio-dot-size);
	height: var(--mt-radio-dot-size);
	margin-top: calc(var(--mt-radio-dot-size) / -2);
	margin-left: calc(var(--mt-radio-dot-size) / -2);
	background: var(--mt-radio-checked-color);
	border-radius: 50%;
	transform: scale(0);
	transition: transform var(--mt-motion-fast);
}

.mt-radio:checked {
	--mt-radio-border-color: var(--mt-radio-checked-color);
}

.mt-radio:checked::before {
	transform: scale(1);
}

/* -- Focus state. -- */

.mt-radio:focus-visible {
	--mt-radio-border-color: var(--mt-radio-focus-ring);
	outline: 0;
	box-shadow: 0 0 0 3px rgba(54, 201, 87, 0.2);
}

/* -- Disabled state. -- */

.mt-radio[disabled] {
	--mt-radio-bg: var(--mt-color-surface-muted);
	cursor: not-allowed;
	opacity: 0.6;
}

.mt-radio[disabled]:checked {
	--mt-radio-checked-color: var(--mt-color-text-muted);
}

/* -- Invalid state. -- */

.mt-radio[aria-invalid="true"] {
	--mt-radio-border-color: var(--mt-color-danger);
}


/* --- assets/css/atoms/select.css --- */
/**
 * Select atom — single-choice dropdown.
 *
 * Surface unified with the input atom (same border / radius / focus chrome).
 * A custom chevron (appearance:none) sits inset from the right edge via
 * --mt-select-arrow-inset; --mt-select-padding-end keeps the text clear of it.
 *
 *   States (no variants, driven by element attributes):
 *     :focus-visible        → focus ring (border colour + soft shadow)
 *     [disabled]            → muted bg/colour + cursor:not-allowed
 *     [aria-invalid="true"] → danger border (set by JS after submit attempt)
 *
 * @package OpcinaTema
 */

.mt-select {
	/* -- Component-level tokens (direct defaults; hosts override by setting
	 *    them at higher specificity). -- */
	--mt-select-bg:             var(--mt-color-surface);
	--mt-select-color:          var(--mt-color-text);
	--mt-select-border-color:   var(--mt-color-border);
	--mt-select-border-width:   1px;
	--mt-select-radius:         var(--mt-radius-sm);
	--mt-select-padding-block:  0;
	--mt-select-padding-inline: 0.875rem;
	--mt-select-padding-end:    2.6rem;
	--mt-select-arrow-inset:    1rem;
	--mt-select-min-height:     2.75rem;
	--mt-select-font-size:      var(--mt-font-size-md);
	--mt-select-font-weight:    500;
	--mt-select-line-height:    var(--mt-line-height-base);
	--mt-select-focus-ring:     var(--mt-color-focus);

	/* -- Structural rules (not tokenized; every var() has a literal
	 *    fallback so the property remains valid even if a custom property
	 *    fails to resolve). -- */
	display: block;
	width: 100%;
	min-width: 0;
	min-height: var(--mt-select-min-height, 2.75rem);
	margin: 0;
	padding: var(--mt-select-padding-block, 0) var(--mt-select-padding-end, 2.6rem) var(--mt-select-padding-block, 0) var(--mt-select-padding-inline, 0.875rem);
	/* Custom chevron (appearance:none) so the arrow sits inset from the edge and
	   is consistent across browsers, instead of the cramped native arrow. */
	appearance: none;
	-webkit-appearance: none;
	background-color: var(--mt-select-bg, #ffffff);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%235b6660' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--mt-select-arrow-inset, 1rem) center;
	background-size: 1.05rem;
	color: var(--mt-select-color, #031927);
	border: var(--mt-select-border-width, 1px) solid var(--mt-select-border-color, #d9dde1);
	border-radius: var(--mt-select-radius, 4px);
	font-family: var(--mt-font-sans);
	font-size: var(--mt-select-font-size, 1rem);
	font-weight: var(--mt-select-font-weight, 500);
	line-height: var(--mt-select-line-height, 1.5);
	cursor: pointer;
	transition:
		border-color var(--mt-motion-fast),
		box-shadow var(--mt-motion-fast);
}

.mt-select option {
	font-weight: 400;
}

/* -- Focus state -- */

.mt-select:focus-visible {
	--mt-select-border-color: var(--mt-select-focus-ring, #36c957);
	outline: 0;
	box-shadow: 0 0 0 3px rgba(54, 201, 87, 0.2);
}

/* -- Disabled state -- */

.mt-select[disabled] {
	--mt-select-bg: var(--mt-color-surface-muted);
	--mt-select-color: var(--mt-color-text-muted);
	cursor: not-allowed;
}

/* -- Invalid state (JS-driven; never fires on first paint) -- */

.mt-select[aria-invalid="true"] {
	--mt-select-border-color: var(--mt-color-danger);
}

/* -- Larger, more finger-friendly control + text on phones -- */

@media (max-width: 768px) {
	.mt-select {
		--mt-select-min-height: 3.25rem;
		--mt-select-font-size: 1.05rem;
	}
}


/* --- assets/css/atoms/spinner.css --- */
/**
 * Spinner atom — loading indicator.
 *
 * Drawn as a CSS-only ring: a circular border whose top edge is the brand
 * colour and whose rest of the ring is the muted track colour, rotated
 * continuously. The spinning border edge gives the visual progress cue.
 *
 *   prefers-reduced-motion: the animation slows down to 2s rather than
 *   stopping entirely, so users still see that something is loading.
 *
 * @package OpcinaTema
 */

.mt-spinner {
	/* -- Component-level tokens -- */
	--mt-spinner-size: 1.25rem;
	--mt-spinner-thickness: 2px;
	--mt-spinner-color: var(--mt-color-primary);
	--mt-spinner-track-color: var(--mt-color-border);
	--mt-spinner-duration: 0.8s;

	/* -- Structural rules (not tokenized) -- */
	display: inline-block;
	flex: 0 0 auto;
	width: var(--mt-spinner-size);
	height: var(--mt-spinner-size);
	border: var(--mt-spinner-thickness) solid var(--mt-spinner-track-color);
	border-top-color: var(--mt-spinner-color);
	border-radius: 50%;
	animation: mt-spinner-rotate var(--mt-spinner-duration) linear infinite;
}

@keyframes mt-spinner-rotate {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.mt-spinner {
		--mt-spinner-duration: 2s;
	}
}


/* --- assets/css/atoms/stat.css --- */
/**
 * Stat atom — label + value pair.
 *
 * Two size variants:
 *   default (md)     hero meta size, ~1.125rem value
 *   --display        servisne metric size, ~1.875rem value
 *
 * Label position:
 *   default (top)    label sits above the value
 *   --label-bottom   label sits below the value (servisne pattern)
 *
 * Tones:
 *   default          text color value, text-soft caption
 *   --primary        primary-green value, text-soft caption
 *
 * All visual values flow through component tokens with fallbacks to
 * global tokens; variants change tokens, not rules.
 *
 * @package OpcinaTema
 */

.mt-stat {
	--mt-stat-gap: var(--mt-space-xs);
	--mt-stat-label-color: var(--mt-color-text-soft);
	--mt-stat-label-font: var(--mt-font-mono);
	--mt-stat-label-size: var(--mt-font-size-2xs);
	--mt-stat-label-tracking: var(--mt-eyebrow-letter-spacing-wide);
	--mt-stat-value-color: var(--mt-color-text);
	--mt-stat-value-font: var(--mt-font-sans);
	--mt-stat-value-size: var(--mt-font-size-lg);
	--mt-stat-value-weight: var(--mt-font-weight-medium);
	--mt-stat-value-line-height: 1.1;

	display: flex;
	flex-direction: column;
	gap: var(--mt-stat-gap);
	min-width: 0;
}

.mt-stat__label {
	display: block;
	color: var(--mt-stat-label-color);
	font-family: var(--mt-stat-label-font);
	font-size: var(--mt-stat-label-size);
	font-weight: var(--mt-font-weight-medium);
	letter-spacing: var(--mt-stat-label-tracking);
	line-height: 1;
	text-transform: uppercase;
}

.mt-stat__value {
	display: block;
	color: var(--mt-stat-value-color);
	font-family: var(--mt-stat-value-font);
	font-size: var(--mt-stat-value-size);
	font-weight: var(--mt-stat-value-weight);
	line-height: var(--mt-stat-value-line-height);
}

/* -- Size: --display (larger metric block) -- */

.mt-stat--display {
	--mt-stat-value-size: var(--mt-font-size-3xl);
	--mt-stat-value-line-height: 1;
}

/* -- Label position: --label-bottom (value leads, label follows) -- */
/* Implemented via flex order so the source order stays               */
/* label -> value for screen readers and machine consumers.           */

.mt-stat--label-bottom {
	--mt-stat-gap: calc(var(--mt-space-xs) + 2px);
}

.mt-stat--label-bottom .mt-stat__label {
	order: 2;
}

.mt-stat--label-bottom .mt-stat__value {
	order: 1;
}

/* -- Tones -- */

.mt-stat--primary {
	--mt-stat-value-color: var(--mt-color-primary);
}


/* --- assets/css/atoms/tag.css --- */
/**
 * Tag atom — taxonomy term chip.
 *
 * Renders as <a> when an href is supplied; otherwise <span>. Hover/focus
 * styling applies only to the anchor variant so non-link tags stay
 * visually inert.
 *
 * Variants (set via `variant` arg on tag.php):
 *
 *   ''  | 'text'         pure typography, no chrome (default; backward-
 *                        compatible with existing call sites)
 *   'natjecaj'           orange-on-cream chip
 *   'poziv'              red-on-pink chip
 *   'odluka'             gold-on-cream chip
 *   'savjetovanje'       purple-on-lavender chip
 *   'obavijest'          green-on-mint chip
 *
 * The 5 category variants share the same chip chrome (padding, radius,
 * caps) and differ only in the color tokens they set.
 *
 * @package OpcinaTema
 */

.mt-tag {
	/* -- Component-level tokens -- */
	--mt-tag-font-size: var(--mt-font-size-2xs);
	--mt-tag-font-weight: var(--mt-font-weight-bold);
	--mt-tag-line-height: 1;
	--mt-tag-letter-spacing: var(--mt-eyebrow-letter-spacing);
	--mt-tag-text-transform: uppercase;
	--mt-tag-color: var(--mt-color-primary);
	--mt-tag-hover-color: var(--mt-color-primary-hover);

	/* -- Structural rules (not tokenized) -- */
	display: inline-flex;
	align-items: center;
	gap: var(--mt-space-xs);
	max-width: 100%;
	overflow: hidden;

	color: var(--mt-tag-color);
	font-family: var(--mt-font-sans);
	font-size: var(--mt-tag-font-size);
	font-weight: var(--mt-tag-font-weight);
	line-height: var(--mt-tag-line-height);
	letter-spacing: var(--mt-tag-letter-spacing);
	text-transform: var(--mt-tag-text-transform);
	text-overflow: ellipsis;
	text-decoration: none;
	white-space: nowrap;
}

/* -- Hover / focus state (anchor variant only). */
/*    Non-link tags stay visually inert.        */

a.mt-tag:hover,
a.mt-tag:focus-visible {
	--mt-tag-color: var(--mt-tag-hover-color);
	text-decoration: none;
}

/* -- Category-chip chrome -- */
/* Shared shape for the 5 category variants. Each variant below sets    */
/* only its color tokens; this block sets padding/radius/bg.            */

.mt-tag--natjecaj,
.mt-tag--poziv,
.mt-tag--odluka,
.mt-tag--savjetovanje,
.mt-tag--obavijest {
	--mt-tag-padding-block: var(--mt-space-xs);
	--mt-tag-padding-inline: calc(var(--mt-space-sm) + var(--mt-space-xs));
	--mt-tag-radius: var(--mt-radius-sm);
	--mt-tag-bg: transparent;
	padding: var(--mt-tag-padding-block) var(--mt-tag-padding-inline);
	background: var(--mt-tag-bg);
	border-radius: var(--mt-tag-radius);
	width: max-content;
}

/* Hover/focus on category chips: deepen the bg slightly via the same */
/* color tokens (no separate hover-bg token to keep the surface       */
/* relationship intact).                                              */
a.mt-tag--natjecaj:hover,
a.mt-tag--natjecaj:focus-visible,
a.mt-tag--poziv:hover,
a.mt-tag--poziv:focus-visible,
a.mt-tag--odluka:hover,
a.mt-tag--odluka:focus-visible,
a.mt-tag--savjetovanje:hover,
a.mt-tag--savjetovanje:focus-visible,
a.mt-tag--obavijest:hover,
a.mt-tag--obavijest:focus-visible {
	filter: brightness(0.96);
	text-decoration: none;
}

/* -- Category color tokens -- */

.mt-tag--natjecaj {
	--mt-tag-color: var(--mt-color-tag-natjecaj);
	--mt-tag-bg: var(--mt-color-tag-natjecaj-bg);
}

.mt-tag--poziv {
	--mt-tag-color: var(--mt-color-tag-poziv);
	--mt-tag-bg: var(--mt-color-tag-poziv-bg);
}

.mt-tag--odluka {
	--mt-tag-color: var(--mt-color-tag-odluka);
	--mt-tag-bg: var(--mt-color-tag-odluka-bg);
}

.mt-tag--savjetovanje {
	--mt-tag-color: var(--mt-color-tag-savjetovanje);
	--mt-tag-bg: var(--mt-color-tag-savjetovanje-bg);
}

.mt-tag--obavijest {
	--mt-tag-color: var(--mt-color-tag-obavijest);
	--mt-tag-bg: var(--mt-color-tag-obavijest-bg);
}


/* --- assets/css/atoms/textarea.css --- */
/**
 * Textarea atom — multi-line text input.
 *
 * Surface mirrors the input atom (same chrome, focus / disabled / invalid
 * states) so consumers can predict the override API. The two atoms have
 * independent tokens so hosts can theme them separately if needed.
 *
 *   States (no variants, driven by element attributes):
 *     :focus-visible        → focus ring (border colour + soft shadow)
 *     [disabled]            → muted bg/colour + cursor:not-allowed
 *     [aria-invalid="true"] → danger border (set by JS after submit attempt)
 *
 * @package OpcinaTema
 */

.mt-textarea {
	/* -- Component-level tokens -- */
	--mt-textarea-bg: var(--mt-color-surface);
	--mt-textarea-color: var(--mt-color-text);
	--mt-textarea-placeholder: var(--mt-color-text-muted);
	--mt-textarea-border-color: var(--mt-color-border);
	--mt-textarea-border-width: 1px;
	--mt-textarea-radius: var(--mt-radius-sm);
	--mt-textarea-padding-block: 0.625rem;
	--mt-textarea-padding-inline: 0.875rem;
	--mt-textarea-font-size: var(--mt-font-size-md);
	--mt-textarea-line-height: var(--mt-line-height-base);
	--mt-textarea-focus-ring: var(--mt-color-focus);
	--mt-textarea-min-height: none;

	/* -- Structural rules (not tokenized) -- */
	display: block;
	width: 100%;
	min-width: 0;
	min-height: var(--mt-textarea-min-height);
	margin: 0;
	padding: var(--mt-textarea-padding-block) var(--mt-textarea-padding-inline);
	background: var(--mt-textarea-bg);
	color: var(--mt-textarea-color);
	border: var(--mt-textarea-border-width) solid var(--mt-textarea-border-color);
	border-radius: var(--mt-textarea-radius);
	font-family: var(--mt-font-sans);
	font-size: var(--mt-textarea-font-size);
	line-height: var(--mt-textarea-line-height);
	resize: vertical;
	transition:
		border-color var(--mt-motion-fast),
		box-shadow var(--mt-motion-fast);
}

.mt-textarea::placeholder {
	color: var(--mt-textarea-placeholder);
	opacity: 1; /* reset Firefox's default 0.54 */
}

/* -- Focus state -- */

.mt-textarea:focus-visible {
	--mt-textarea-border-color: var(--mt-textarea-focus-ring);
	outline: 0;
	box-shadow: 0 0 0 3px rgba(54, 201, 87, 0.2);
}

/* -- Disabled state -- */

.mt-textarea[disabled] {
	--mt-textarea-bg: var(--mt-color-surface-muted);
	--mt-textarea-color: var(--mt-color-text-muted);
	cursor: not-allowed;
	resize: none;
}

/* -- Invalid state (JS-driven; never fires on first paint) -- */

.mt-textarea[aria-invalid="true"] {
	--mt-textarea-border-color: var(--mt-color-danger);
}


/* --- assets/css/molecules/accordion-item.css --- */
/**
 * accordion-item molecule — single collapsible row with title + content.
 *
 * Built on top of native <details>/<summary> for no-JS-required behavior.
 * Hosts can wire JS for animations or ARIA tab-style accordions on top.
 *
 *   States (driven by native [open] attribute):
 *     [open]  → chevron rotates 180°, content reveals
 *
 * @package OpcinaTema
 */

.mt-accordion-item {
	/* -- Component-level tokens -- */
	--mt-accordion-item-border-color: var(--mt-color-border);
	--mt-accordion-item-padding: var(--mt-space-md);
	--mt-accordion-item-gap: var(--mt-space-sm);
	--mt-accordion-item-radius: var(--mt-radius-md);
	--mt-accordion-item-bg: transparent;
	--mt-accordion-item-summary-color: var(--mt-color-text);
	--mt-accordion-item-summary-weight: var(--mt-font-weight-bold);
	--mt-accordion-item-content-color: var(--mt-color-text);
	--mt-accordion-item-chevron-size: 0.6em;

	/* -- Structural rules (not tokenized) -- */
	border: 1px solid var(--mt-accordion-item-border-color);
	border-radius: var(--mt-accordion-item-radius);
	background: var(--mt-accordion-item-bg);
	overflow: hidden;
}

.mt-accordion-item__summary {
	display: flex;
	align-items: center;
	gap: var(--mt-accordion-item-gap);
	padding: var(--mt-accordion-item-padding);
	color: var(--mt-accordion-item-summary-color);
	font-family: var(--mt-font-sans);
	font-weight: var(--mt-accordion-item-summary-weight);
	cursor: pointer;
	list-style: none;
}

.mt-accordion-item__summary::-webkit-details-marker {
	display: none;
}

.mt-accordion-item__title {
	flex: 1 1 auto;
	min-width: 0;
}

.mt-accordion-item__chevron {
	display: inline-block;
	flex: 0 0 auto;
	width: var(--mt-accordion-item-chevron-size);
	height: var(--mt-accordion-item-chevron-size);
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform var(--mt-motion-fast);
}

.mt-accordion-item[open] .mt-accordion-item__chevron {
	transform: rotate(225deg);
}

.mt-accordion-item__content {
	padding: 0 var(--mt-accordion-item-padding) var(--mt-accordion-item-padding);
	color: var(--mt-accordion-item-content-color);
}


/* --- assets/css/molecules/breadcrumbs.css --- */
/**
 * breadcrumbs molecule — home → section → page chain.
 *
 * Renders a <nav aria-label> containing an ordered list. Each non-current
 * item is a link; the current item is a <span aria-current="page">. The
 * separator between items is a CSS-drawn chevron on li + li::before.
 *
 * @package OpcinaTema
 */

.mt-breadcrumbs {
	/* -- Component-level tokens (direct defaults). -- */
	--mt-breadcrumbs-color:           var(--mt-color-text-muted);
	--mt-breadcrumbs-current-color:   var(--mt-color-text);
	--mt-breadcrumbs-link-color:      var(--mt-color-primary);
	--mt-breadcrumbs-link-hover:      var(--mt-color-primary-hover);
	--mt-breadcrumbs-link-underline:  rgba(54, 201, 87, 0.72);
	--mt-breadcrumbs-font-size:       var(--mt-font-size-sm);
	--mt-breadcrumbs-font-weight:     850;
	--mt-breadcrumbs-line-height:     1.35;
	--mt-breadcrumbs-gap:             var(--mt-space-sm);
	--mt-breadcrumbs-margin-bottom:   var(--mt-space-md);

	/* -- Structural rules (not tokenized) -- */
	margin: 0 0 var(--mt-breadcrumbs-margin-bottom, 1rem);
	color: var(--mt-breadcrumbs-color, #384651);
	font-family: var(--mt-font-sans);
	font-size: var(--mt-breadcrumbs-font-size, 0.875rem);
	font-weight: var(--mt-breadcrumbs-font-weight, 850);
	line-height: var(--mt-breadcrumbs-line-height, 1.35);
}

.mt-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mt-breadcrumbs-gap, 0.5rem);
	align-items: center;
	padding: 0;
	margin: 0;
	list-style: none;
}

.mt-breadcrumbs li {
	display: inline-flex;
	gap: var(--mt-breadcrumbs-gap, 0.5rem);
	align-items: center;
	min-width: 0;
}

/* -- Chevron separator drawn between items. -- */

.mt-breadcrumbs li + li::before {
	content: "";
	width: 0.42rem;
	aspect-ratio: 1;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	opacity: 0.55;
	transform: rotate(45deg);
}

.mt-breadcrumbs a {
	color: var(--mt-breadcrumbs-link-color, #168b3a);
	text-decoration: none;
	border-bottom: 2px solid var(--mt-breadcrumbs-link-underline, rgba(54, 201, 87, 0.72));
	transition: color var(--mt-motion-fast), border-color var(--mt-motion-fast);
}

.mt-breadcrumbs a:hover,
.mt-breadcrumbs a:focus-visible {
	color: var(--mt-breadcrumbs-link-hover, #0057a8);
	border-color: currentColor;
	outline: none;
}

.mt-breadcrumbs span[aria-current="page"] {
	color: var(--mt-breadcrumbs-current-color, #031927);
}


/* --- assets/css/molecules/card-header.css --- */
/**
 * card-header molecule — icon + title + optional subtitle.
 *
 * Renders an icon on the left (optional) and a vertical stack of title +
 * subtitle on the right. Title is rendered via the heading atom; subtitle
 * via the paragraph atom.
 *
 * @package OpcinaTema
 */

.mt-card-header {
	/* -- Component-level tokens -- */
	--mt-card-header-gap: var(--mt-space-md);
	--mt-card-header-stack-gap: var(--mt-space-xs);
	--mt-card-header-icon-size: 2.5rem;

	/* -- Structural rules (not tokenized) -- */
	display: flex;
	align-items: flex-start;
	gap: var(--mt-card-header-gap);
}

.mt-card-header--align-center {
	align-items: center;
}

.mt-card-header__icon {
	display: inline-flex;
	flex: 0 0 var(--mt-card-header-icon-size);
	width: var(--mt-card-header-icon-size);
	height: var(--mt-card-header-icon-size);
	align-items: center;
	justify-content: center;
}

.mt-card-header__text {
	display: flex;
	flex-direction: column;
	gap: var(--mt-card-header-stack-gap);
	min-width: 0;
	flex: 1 1 auto;
}

/* Title and subtitle are rendered by heading + paragraph atoms — no
   additional rules needed here. */


/* --- assets/css/molecules/card-meta.css --- */
/**
 * card-meta molecule — horizontal row of meta items (date · author · category).
 *
 * Renders a <p class="mt-card-meta"> containing the items separated by a
 * configurable separator character (default middle-dot). Each item is
 * arbitrary HTML supplied by the host (a <time>, the badge atom, a span,
 * etc.) — the molecule controls layout, typography, and the separator.
 *
 * @package OpcinaTema
 */

.mt-card-meta {
	/* -- Component-level tokens -- */
	--mt-card-meta-gap: var(--mt-space-sm);
	--mt-card-meta-color: var(--mt-color-text-muted);
	--mt-card-meta-font-size: var(--mt-font-size-sm);
	--mt-card-meta-font-weight: var(--mt-font-weight-regular);
	--mt-card-meta-line-height: 1.25;
	--mt-card-meta-separator: "\00b7"; /* · middle dot */
	--mt-card-meta-separator-opacity: 0.6;

	/* -- Structural rules (not tokenized) -- */
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--mt-card-meta-gap);
	margin: 0;
	color: var(--mt-card-meta-color);
	font-family: var(--mt-font-sans);
	font-size: var(--mt-card-meta-font-size);
	font-weight: var(--mt-card-meta-font-weight);
	line-height: var(--mt-card-meta-line-height);
}

.mt-card-meta__item {
	display: inline-flex;
	align-items: baseline;
	gap: var(--mt-card-meta-gap);
}

/* -- Separator between items, drawn on item + item::before. -- */

.mt-card-meta__item + .mt-card-meta__item::before {
	content: var(--mt-card-meta-separator);
	opacity: var(--mt-card-meta-separator-opacity);
}

/* -- Variant: no separator. -- */

.mt-card-meta--no-separator .mt-card-meta__item + .mt-card-meta__item::before {
	content: none;
}


/* --- assets/css/molecules/contact-info.css --- */
/**
 * contact-info molecule — phone / email / address / hours grouped vertically.
 *
 * Renders a <ul> of contact rows. Each row has an icon, a small label
 * ("Phone:", "Email:"), and the value (linked for tel/mailto, plain text
 * for address/hours).
 *
 * @package OpcinaTema
 */

.mt-contact-info {
	/* -- Component-level tokens -- */
	--mt-contact-info-gap: var(--mt-space-md);
	--mt-contact-info-row-gap: var(--mt-space-sm);
	--mt-contact-info-icon-size: 1.25rem;
	--mt-contact-info-label-color: var(--mt-color-text-muted);
	--mt-contact-info-label-size: var(--mt-font-size-sm);
	--mt-contact-info-value-color: var(--mt-color-text);
	--mt-contact-info-link-color: var(--mt-color-primary);

	/* -- Structural rules (not tokenized) -- */
	display: flex;
	flex-direction: column;
	gap: var(--mt-contact-info-gap);
	padding: 0;
	margin: 0;
	list-style: none;
}

.mt-contact-info__item {
	display: grid;
	grid-template-columns: var(--mt-contact-info-icon-size) minmax(0, 1fr);
	gap: var(--mt-contact-info-row-gap);
	align-items: flex-start;
}

.mt-contact-info__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--mt-contact-info-icon-size);
	height: var(--mt-contact-info-icon-size);
	color: var(--mt-contact-info-link-color);
}

.mt-contact-info__body {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.mt-contact-info__label {
	color: var(--mt-contact-info-label-color);
	font-family: var(--mt-font-sans);
	font-size: var(--mt-contact-info-label-size);
	line-height: 1.2;
}

.mt-contact-info__value {
	color: var(--mt-contact-info-value-color);
	font-family: var(--mt-font-sans);
}

.mt-contact-info__value a {
	color: var(--mt-contact-info-link-color);
	text-decoration: none;
}

.mt-contact-info__value a:hover,
.mt-contact-info__value a:focus-visible {
	text-decoration: underline;
}


/* --- assets/css/molecules/count-list.css --- */
/**
 * Count-list molecule — vertical list of "label + count" rows.
 *
 * Rows are separated by a dashed hairline divider (border-top on every
 * row except the first). Rows render as anchors when the host supplies
 * a url; hover tints the label primary.
 *
 * @package OpcinaTema
 */

.mt-count-list {
	--mt-count-list-gap: var(--mt-space-sm);
	--mt-count-list-row-padding: var(--mt-space-xs) 0;
	--mt-count-list-divider-color: var(--mt-color-border-soft);
	--mt-count-list-divider-style: dashed;
	--mt-count-list-label-color: var(--mt-color-text-soft);
	--mt-count-list-label-size: var(--mt-font-size-sm);
	--mt-count-list-count-color: var(--mt-color-text-muted);
	--mt-count-list-count-size: var(--mt-font-size-sm);
	--mt-count-list-link-hover-color: var(--mt-color-primary);

	display: flex;
	flex-direction: column;
	gap: var(--mt-count-list-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mt-count-list__row {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mt-count-list__row + .mt-count-list__row {
	padding-top: var(--mt-count-list-gap);
	border-top: 1px var(--mt-count-list-divider-style) var(--mt-count-list-divider-color);
}

/* Inner content: label left, count right. Both anchor and bare span    */
/* variants share these rules.                                          */

.mt-count-list__row > a,
.mt-count-list__row > .mt-count-list__label {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--mt-space-md);
	padding: var(--mt-count-list-row-padding);
	color: inherit;
	text-decoration: none;
	transition: color var(--mt-motion-fast);
}

.mt-count-list__link:hover,
.mt-count-list__link:focus-visible {
	outline: none;
}

.mt-count-list__link:hover .mt-count-list__label,
.mt-count-list__link:focus-visible .mt-count-list__label {
	color: var(--mt-count-list-link-hover-color);
}

.mt-count-list__label {
	color: var(--mt-count-list-label-color);
	font-family: var(--mt-font-sans);
	font-size: var(--mt-count-list-label-size);
	line-height: var(--mt-line-height-base);
	transition: color var(--mt-motion-fast);
}

.mt-count-list__count {
	color: var(--mt-count-list-count-color);
	font-family: var(--mt-font-mono);
	font-size: var(--mt-count-list-count-size);
	font-weight: var(--mt-font-weight-medium);
	line-height: var(--mt-line-height-base);
	white-space: nowrap;
}


/* --- assets/css/molecules/custom-select.css --- */
/**
 * Custom select molecule — finger-friendly dropdown built over a native
 * <select> by assets/js/mt-custom-select.js (progressive enhancement).
 *
 * The native <select> stays in the DOM as the value source but is hidden once
 * enhanced; the trigger mirrors the select's look and the panel lists large,
 * tappable option rows. Falls back to the plain native control when JS is off
 * (the wrapper only gets `--ready` after enhancement).
 *
 * @package OpcinaTema
 */

.mt-cselect {
	position: relative;
	display: block;
	width: 100%;
	min-width: 0;
}

/* Hide the native control once enhanced (kept for value/form/change events). */
.mt-cselect--ready > select {
	display: none;
}

/* -- Trigger (mirrors the select atom's chrome) -- */

.mt-cselect__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	width: 100%;
	min-height: var(--mt-select-min-height, 2.75rem);
	padding: 0 var(--mt-select-padding-inline, 0.875rem);
	background: var(--mt-color-surface);
	border: 1px solid var(--mt-color-border);
	border-radius: var(--mt-radius-sm);
	color: var(--mt-color-text);
	font-family: var(--mt-font-sans);
	font-size: var(--mt-select-font-size, var(--mt-font-size-md));
	font-weight: 500;
	line-height: 1.2;
	text-align: left;
	cursor: pointer;
	transition: border-color var(--mt-motion-fast), box-shadow var(--mt-motion-fast);
}

.mt-cselect__trigger:focus-visible {
	outline: 0;
	border-color: var(--mt-color-focus);
	box-shadow: 0 0 0 3px rgba(59, 130, 214, 0.2);
}

.mt-cselect__value {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mt-cselect__chevron {
	flex: 0 0 auto;
	width: 1.05rem;
	height: 1.05rem;
	background: var(--mt-color-text-soft);
	transition: transform var(--mt-motion-fast);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / contain no-repeat;
}

.mt-cselect.is-open .mt-cselect__chevron {
	transform: rotate(180deg);
}

/* -- Panel + option rows -- */

.mt-cselect__panel {
	position: absolute;
	top: calc(100% + 0.35rem);
	left: 0;
	right: 0;
	z-index: 60;
	max-height: 17rem;
	margin: 0;
	padding: 0.35rem;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	list-style: none;
	background: var(--mt-color-surface);
	border: 1px solid var(--mt-color-border);
	border-radius: var(--mt-radius-md);
	box-shadow: var(--mt-shadow-lg);
}

.mt-cselect__panel[hidden] {
	display: none;
}

.mt-cselect__option {
	display: flex;
	align-items: center;
	min-height: 2.75rem;
	padding: 0.7rem 0.85rem;
	border-radius: var(--mt-radius-sm);
	color: var(--mt-color-text);
	font-size: 1rem;
	line-height: 1.3;
	cursor: pointer;
}

.mt-cselect__option:hover,
.mt-cselect__option.is-active {
	background: var(--mt-color-surface-muted);
}

.mt-cselect__option.is-selected {
	background: var(--mt-color-primary-100);
	color: var(--mt-color-primary);
	font-weight: 600;
}

/* Bigger, easier-to-tap rows on phones. */
@media (max-width: 768px) {
	.mt-cselect__option {
		min-height: 3.25rem;
		padding: 0.95rem 1rem;
		font-size: 1.05rem;
	}
}


/* --- assets/css/molecules/empty-state.css --- */
/**
 * empty-state — centered "no results" card.
 *
 * Emitted by the empty-state molecule. The wrapper class is
 * .mt-empty-state.
 *
 * @package OpcinaTema
 */

.mt-empty-state {
	display: grid;
	justify-items: center;
	gap: 0.45rem;
	max-width: 44rem;
	margin-inline: auto;
	padding: 2.5rem;
	background: var(--mt-paper);
	border: 1px solid rgba(217, 221, 225, 0.95);
	border-radius: 10px;
	text-align: center;
	box-shadow: 0 0.9rem 2rem rgba(3, 25, 39, 0.08);
}

.mt-empty-state :is(h1, h2),
.mt-empty-state p {
	margin: 0;
}

.mt-empty-state :is(h1, h2) {
	font-size: 1.7rem;
	line-height: 1.1;
}

.mt-empty-state p {
	color: var(--mt-ink-soft);
}

/* Overline (e.g. the "404" code). */
.mt-empty-state__eyebrow {
	color: var(--mt-color-primary);
	font-size: var(--mt-eyebrow-size);
	font-weight: var(--mt-font-weight-bold);
	letter-spacing: var(--mt-eyebrow-letter-spacing-wide);
	text-transform: uppercase;
}

/* Optional actions block (buttons, search, quick links) below the body. */
.mt-empty-state__actions {
	display: grid;
	justify-items: center;
	gap: 1.25rem;
	width: 100%;
	margin-top: 1.35rem;
}

.mt-empty-state__search {
	width: min(100%, 28rem);
}

.mt-empty-state__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.4rem 1.25rem;
	font-size: var(--mt-font-size-sm);
}

.mt-empty-state__links a {
	color: var(--mt-color-primary);
	font-weight: var(--mt-font-weight-medium);
}


/* --- assets/css/molecules/footer-brand-block.css --- */
/**
 * Footer brand-block molecule — name + sub + badge chips.
 *
 * Inverse-tinted by default (light text on the footer's dark surface).
 * All visual values flow through component tokens so child themes /
 * brand variants can re-skin without touching structure.
 *
 * @package OpcinaTema
 */

.mt-footer-brand-block {
	--mt-footer-brand-block-gap: var(--mt-space-md);
	--mt-footer-brand-block-name-color: #ffffff;
	--mt-footer-brand-block-name-size: var(--mt-font-size-xl);
	--mt-footer-brand-block-name-weight: var(--mt-font-weight-medium);
	--mt-footer-brand-block-name-line-height: 1.15;
	--mt-footer-brand-block-sub-color: rgba(255, 255, 255, 0.6);
	--mt-footer-brand-block-sub-size: var(--mt-font-size-sm);
	--mt-footer-brand-block-sub-max-width: 24rem;
	--mt-footer-brand-block-badges-gap: var(--mt-space-sm);
	--mt-footer-brand-block-badge-color: rgba(255, 255, 255, 0.7);
	--mt-footer-brand-block-badge-border: 1px solid rgba(255, 255, 255, 0.2);
	--mt-footer-brand-block-badge-radius: var(--mt-radius-sm);
	--mt-footer-brand-block-badge-padding: var(--mt-space-xs) calc(var(--mt-space-sm) + var(--mt-space-xs));

	/* Crest on the left, brand text column on the right. */
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--mt-footer-brand-block-gap);
	min-width: 0;
}

.mt-footer-brand-block__text {
	display: flex;
	flex-direction: column;
	gap: var(--mt-footer-brand-block-gap);
	min-width: 0;
}

.mt-footer-brand-block__name {
	margin: 0;
	color: var(--mt-footer-brand-block-name-color);
	font-family: var(--mt-font-sans);
	font-size: var(--mt-footer-brand-block-name-size);
	font-weight: var(--mt-footer-brand-block-name-weight);
	line-height: var(--mt-footer-brand-block-name-line-height);
	letter-spacing: var(--mt-heading-letter-spacing);
}

.mt-footer-brand-block__sub {
	margin: 0;
	max-width: var(--mt-footer-brand-block-sub-max-width);
	color: var(--mt-footer-brand-block-sub-color);
	font-family: var(--mt-font-sans);
	font-size: var(--mt-footer-brand-block-sub-size);
	line-height: var(--mt-line-height-base);
}

/* -- Badge row -- */

.mt-footer-brand-block__badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mt-footer-brand-block-badges-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mt-footer-brand-block__badge {
	display: inline-flex;
	align-items: center;
	padding: var(--mt-footer-brand-block-badge-padding);
	border: var(--mt-footer-brand-block-badge-border);
	border-radius: var(--mt-footer-brand-block-badge-radius);
	color: var(--mt-footer-brand-block-badge-color);
	font-family: var(--mt-font-mono);
	font-size: var(--mt-font-size-2xs);
	font-weight: var(--mt-font-weight-medium);
	letter-spacing: var(--mt-eyebrow-letter-spacing-wide);
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
}

/* -- Crest -- pushed to the bottom of the (stretched) brand column so it sits
 * low near the footer divider without adding a new row / growing the footer. */
.mt-footer-brand-block__logo {
	flex: 0 0 auto;
}

.mt-footer-brand-block__logo .mt-logo {
	--mt-logo-image-size: clamp(4.5rem, 6vw, 6rem);
}

/* The shield is portrait, so `contain` would centre it inside its square box and
 * leave it inset from the left. Pin it to the left so its edge lines up with the
 * text above. (The image atom puts the .mt-image class on the <img> itself.) */
.mt-footer-brand-block__logo img.mt-image {
	object-position: left center;
}


/* --- assets/css/molecules/form-field.css --- */
/**
 * form-field molecule — label + control + optional helper + optional error.
 *
 * Composes one of: input, textarea, select, checkbox, radio (atom layer).
 * The molecule provides the vertical stack layout and the helper / error
 * text slots; chrome on the control itself stays in each control atom.
 *
 *   When an error is present, the molecule sets aria-invalid="true" on the
 *   control (the atom's [aria-invalid] state styling kicks in) and wires
 *   aria-describedby to point at the error + helper IDs so screen readers
 *   announce them as part of the field.
 *
 * @package OpcinaTema
 */

.mt-form-field {
	/* -- Component-level tokens -- */
	--mt-form-field-gap: var(--mt-space-sm);
	--mt-form-field-helper-color: var(--mt-color-text-muted);
	--mt-form-field-helper-size: var(--mt-font-size-sm);
	--mt-form-field-helper-line: var(--mt-line-height-base);
	--mt-form-field-error-color: var(--mt-color-danger);
	--mt-form-field-error-size: var(--mt-font-size-sm);
	--mt-form-field-error-line: var(--mt-line-height-base);

	/* -- Structural rules (not tokenized) -- */
	display: flex;
	flex-direction: column;
	gap: var(--mt-form-field-gap);
}

.mt-form-field__helper {
	margin: 0;
	color: var(--mt-form-field-helper-color);
	font-family: var(--mt-font-sans);
	font-size: var(--mt-form-field-helper-size);
	line-height: var(--mt-form-field-helper-line);
}

.mt-form-field__error {
	margin: 0;
	color: var(--mt-form-field-error-color);
	font-family: var(--mt-font-sans);
	font-size: var(--mt-form-field-error-size);
	line-height: var(--mt-form-field-error-line);
}


/* --- assets/css/molecules/mini-card.css --- */
/**
 * Mini-card molecule — compact icon + name + desc + CTA tile.
 *
 * Renders as a single anchor — entire surface is clickable. The CTA
 * text at the bottom is a visual affordance, not an inner link. Lifts
 * slightly on hover via the shadow token.
 *
 * Variants:
 *   default          primary-tint icon chip + primary glyph + primary CTA
 *   --muted          neutral chip + ink glyph (for non-action emphasis)
 *
 * @package OpcinaTema
 */

.mt-mini-card {
	--mt-mini-card-bg: var(--mt-color-surface);
	--mt-mini-card-color: var(--mt-color-text);
	--mt-mini-card-radius: var(--mt-radius-lg);
	--mt-mini-card-padding: var(--mt-space-md);
	--mt-mini-card-gap: var(--mt-space-sm);
	--mt-mini-card-shadow: var(--mt-shadow-overlay);
	--mt-mini-card-shadow-hover: var(--mt-shadow-lg);
	--mt-mini-card-icon-size: 1.875rem;
	--mt-mini-card-icon-radius: var(--mt-radius-circle);
	--mt-mini-card-icon-bg: var(--mt-color-primary-tint);
	--mt-mini-card-icon-color: var(--mt-color-icon);
	--mt-mini-card-icon-bg-hover: var(--mt-color-primary);
	--mt-mini-card-icon-color-hover: var(--mt-color-primary-contrast);
	--mt-mini-card-icon-glyph-size: 1rem;
	--mt-mini-card-name-size: var(--mt-font-size-sm);
	--mt-mini-card-name-weight: var(--mt-font-weight-medium);
	--mt-mini-card-desc-color: var(--mt-color-text-soft);
	--mt-mini-card-desc-size: var(--mt-font-size-xs);
	--mt-mini-card-cta-color: var(--mt-color-primary);
	--mt-mini-card-cta-size: var(--mt-font-size-xs);

	display: flex;
	flex-direction: column;
	gap: var(--mt-mini-card-gap);
	padding: var(--mt-mini-card-padding);
	background: var(--mt-mini-card-bg);
	color: var(--mt-mini-card-color);
	border-radius: var(--mt-mini-card-radius);
	box-shadow: var(--mt-mini-card-shadow);
	text-decoration: none;
	transition: box-shadow var(--mt-motion-fast), transform var(--mt-motion-fast);
}

.mt-mini-card:hover,
.mt-mini-card:focus-visible {
	box-shadow: var(--mt-mini-card-shadow-hover);
	transform: translateY(-2px);
	outline: none;
}

/* -- Icon chip -- */

.mt-mini-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--mt-mini-card-icon-size);
	height: var(--mt-mini-card-icon-size);
	background: var(--mt-mini-card-icon-bg);
	color: var(--mt-mini-card-icon-color);
	border-radius: var(--mt-mini-card-icon-radius);
	flex: 0 0 auto;
	transition: background var(--mt-motion-fast), color var(--mt-motion-fast);
}

/* Duotone chip fills with solid primary on hover/focus, matching the tile. */
.mt-mini-card:hover .mt-mini-card__icon,
.mt-mini-card:focus-visible .mt-mini-card__icon {
	background: var(--mt-mini-card-icon-bg-hover);
	color: var(--mt-mini-card-icon-color-hover);
}

.mt-mini-card__icon > * {
	width: var(--mt-mini-card-icon-glyph-size);
	height: var(--mt-mini-card-icon-glyph-size);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: var(--mt-mini-card-icon-glyph-size);
	line-height: 1;
}

.mt-mini-card__icon svg {
	width: 100%;
	height: 100%;
	color: inherit;
}

/* -- Text content -- */

.mt-mini-card__name {
	font-family: var(--mt-font-sans);
	font-size: var(--mt-mini-card-name-size);
	font-weight: var(--mt-mini-card-name-weight);
	line-height: var(--mt-line-height-tight);
	color: var(--mt-mini-card-color);
}

.mt-mini-card__desc {
	color: var(--mt-mini-card-desc-color);
	font-family: var(--mt-font-sans);
	font-size: var(--mt-mini-card-desc-size);
	line-height: var(--mt-line-height-base);
}

/* -- CTA affordance -- */

/* `margin-top: auto` pins the CTA to the bottom of the (stretched) card, so it
   lines up across cards no matter how long the name/description runs. The card's
   flex `gap` still guarantees a minimum space above it. */
.mt-mini-card__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--mt-space-xs);
	margin-top: auto;
	color: var(--mt-mini-card-cta-color);
	font-family: var(--mt-font-sans);
	font-size: var(--mt-mini-card-cta-size);
	font-weight: var(--mt-font-weight-medium);
	line-height: 1;
}

.mt-mini-card__cta-arrow {
	width: 0.65rem;
	height: 0.65rem;
	background: currentColor;
	-webkit-mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/arrow-right.svg") center / contain no-repeat;
	mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/arrow-right.svg") center / contain no-repeat;
	transition: transform var(--mt-motion-fast);
}

.mt-mini-card:hover .mt-mini-card__cta-arrow,
.mt-mini-card:focus-visible .mt-mini-card__cta-arrow {
	transform: translateX(0.14rem);
}

/* -- Tone: --muted -- */

.mt-mini-card--muted {
	--mt-mini-card-icon-bg: var(--mt-color-surface-muted);
	--mt-mini-card-icon-color: var(--mt-color-text);
	--mt-mini-card-cta-color: var(--mt-color-text);
}


/* --- assets/css/molecules/nav-item-with-children.css --- */
/**
 * nav-item-with-children molecule — nav-item with a chevron indicator and
 * a child submenu.
 *
 * Composes the nav-item molecule (top-level link) and adds a chevron after
 * the text plus a <ul class="mt-nav-item-with-children__submenu"> container
 * for child nav-items. The molecule does NOT include any open/close JS —
 * hosts wire that up via the aria-expanded attribute on the trigger.
 *
 *   data-mt-nav-open="true" on the wrapper reveals the submenu (a CSS-only
 *   default; hosts can override or supplement with their own JS).
 *
 * @package OpcinaTema
 */

.mt-nav-item-with-children {
	/* -- Component-level tokens -- */
	--mt-nav-children-submenu-bg: var(--mt-color-surface);
	--mt-nav-children-submenu-radius: var(--mt-radius-md);
	--mt-nav-children-submenu-shadow: var(--mt-shadow-md);
	--mt-nav-children-submenu-gap: var(--mt-space-xs);
	--mt-nav-children-submenu-padding: var(--mt-space-sm);
	--mt-nav-children-chevron-size: 0.6em;

	/* -- Structural rules (not tokenized) -- */
	position: relative;
}

.mt-nav-item-with-children__chevron {
	display: inline-block;
	width: var(--mt-nav-children-chevron-size);
	height: var(--mt-nav-children-chevron-size);
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	transition: transform var(--mt-motion-fast);
}

.mt-nav-item-with-children[data-mt-nav-open="true"] .mt-nav-item-with-children__chevron {
	transform: rotate(225deg);
}

.mt-nav-item-with-children__submenu {
	display: none;
	flex-direction: column;
	gap: var(--mt-nav-children-submenu-gap);
	margin: 0;
	padding: var(--mt-nav-children-submenu-padding);
	background: var(--mt-nav-children-submenu-bg);
	border-radius: var(--mt-nav-children-submenu-radius);
	box-shadow: var(--mt-nav-children-submenu-shadow);
	list-style: none;
}

.mt-nav-item-with-children[data-mt-nav-open="true"] .mt-nav-item-with-children__submenu {
	display: flex;
}


/* --- assets/css/molecules/nav-item.css --- */
/**
 * nav-item molecule — link with optional icon + optional badge.
 *
 * Renders as <a class="mt-nav-item">. Composes an icon (passed as HTML) on
 * the left and an optional badge atom on the right. Active state is
 * driven by aria-current (set when `active` arg is true) and an explicit
 * .mt-nav-item--active modifier class.
 *
 * @package OpcinaTema
 */

.mt-nav-item {
	/* -- Component-level tokens -- */
	--mt-nav-item-gap: var(--mt-space-xs);
	--mt-nav-item-color: var(--mt-color-text);
	--mt-nav-item-hover-color: var(--mt-color-primary);
	--mt-nav-item-active-color: var(--mt-color-primary);
	--mt-nav-item-font-size: var(--mt-font-size-md);
	--mt-nav-item-font-weight: var(--mt-font-weight-medium);
	--mt-nav-item-active-weight: var(--mt-font-weight-bold);
	--mt-nav-item-padding-block: var(--mt-space-xs);
	--mt-nav-item-padding-inline: var(--mt-space-sm);

	/* -- Structural rules (not tokenized) -- */
	display: inline-flex;
	align-items: center;
	gap: var(--mt-nav-item-gap);
	padding: var(--mt-nav-item-padding-block) var(--mt-nav-item-padding-inline);
	color: var(--mt-nav-item-color);
	font-family: var(--mt-font-sans);
	font-size: var(--mt-nav-item-font-size);
	font-weight: var(--mt-nav-item-font-weight);
	line-height: 1.25;
	text-decoration: none;
	transition: color var(--mt-motion-fast);
}

.mt-nav-item:hover,
.mt-nav-item:focus-visible {
	--mt-nav-item-color: var(--mt-nav-item-hover-color);
}

.mt-nav-item--active,
.mt-nav-item[aria-current] {
	--mt-nav-item-color: var(--mt-nav-item-active-color);
	font-weight: var(--mt-nav-item-active-weight);
}

.mt-nav-item__icon {
	display: inline-flex;
	flex: 0 0 auto;
}


/* --- assets/css/molecules/news-list-item.css --- */
/**
 * News-list-item molecule — one row of a horizontal news list.
 *
 * 4-col grid: icon chip | body (tag + title) | date | chevron. Renders
 * as a single anchor wrapping all four columns. Hover/focus tints
 * the surface and slides the chevron right.
 *
 * @package OpcinaTema
 */

.mt-news-list-item {
	--mt-news-list-item-padding-block: var(--mt-space-md);
	--mt-news-list-item-padding-inline: var(--mt-space-lg);
	--mt-news-list-item-gap: var(--mt-space-md);
	--mt-news-list-item-divider-color: var(--mt-color-border-soft);
	--mt-news-list-item-hover-bg: var(--mt-color-surface-muted);
	--mt-news-list-item-color: var(--mt-color-text);
	--mt-news-list-item-icon-size: 2.25rem;
	--mt-news-list-item-icon-bg: var(--mt-color-primary-tint);
	--mt-news-list-item-icon-color: var(--mt-color-icon);
	--mt-news-list-item-icon-radius: var(--mt-radius-md);
	--mt-news-list-item-icon-glyph-size: 1.125rem;
	--mt-news-list-item-title-size: var(--mt-font-size-sm);
	--mt-news-list-item-title-weight: var(--mt-font-weight-medium);
	--mt-news-list-item-title-line-height: 1.3;
	--mt-news-list-item-date-color: var(--mt-color-text-soft);
	--mt-news-list-item-chevron-color: var(--mt-color-primary);
	--mt-news-list-item-chevron-size: 0.875rem;

	display: grid;
	grid-template-columns: var(--mt-news-list-item-icon-size) minmax(0, 1fr) auto auto;
	align-items: center;
	gap: var(--mt-news-list-item-gap);
	padding: var(--mt-news-list-item-padding-block) var(--mt-news-list-item-padding-inline);
	color: var(--mt-news-list-item-color);
	text-decoration: none;
	border-bottom: 1px solid var(--mt-news-list-item-divider-color);
	transition: background var(--mt-motion-fast);
}

.mt-news-list-item:last-child {
	border-bottom: 0;
}

.mt-news-list-item:hover,
.mt-news-list-item:focus-visible {
	background: var(--mt-news-list-item-hover-bg);
	outline: none;
}

.mt-news-list-item:hover .mt-news-list-item__chevron,
.mt-news-list-item:focus-visible .mt-news-list-item__chevron {
	transform: translateX(0.18rem);
}

/* -- Icon chip -- */

.mt-news-list-item__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--mt-news-list-item-icon-size);
	height: var(--mt-news-list-item-icon-size);
	background: var(--mt-news-list-item-icon-bg);
	color: var(--mt-news-list-item-icon-color);
	border-radius: var(--mt-news-list-item-icon-radius);
	flex: 0 0 auto;
}

.mt-news-list-item__icon > * {
	width: var(--mt-news-list-item-icon-glyph-size);
	height: var(--mt-news-list-item-icon-glyph-size);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: var(--mt-news-list-item-icon-glyph-size);
	line-height: 1;
}

.mt-news-list-item__icon svg {
	width: 100%;
	height: 100%;
	color: inherit;
}

/* -- Body (tag + title) -- */

.mt-news-list-item__body {
	display: flex;
	flex-direction: column;
	gap: var(--mt-space-xs);
	min-width: 0;
}

.mt-news-list-item__title {
	display: block;
	font-family: var(--mt-font-sans);
	font-size: var(--mt-news-list-item-title-size);
	font-weight: var(--mt-news-list-item-title-weight);
	line-height: var(--mt-news-list-item-title-line-height);
	color: var(--mt-news-list-item-color);
}

/* -- Date -- */

.mt-news-list-item__date {
	color: var(--mt-news-list-item-date-color);
	font-family: var(--mt-font-mono);
	font-size: var(--mt-font-size-2xs);
	font-weight: var(--mt-font-weight-regular);
	letter-spacing: var(--mt-eyebrow-letter-spacing);
	line-height: 1;
	white-space: nowrap;
	text-transform: uppercase;
}

/* -- Chevron -- */

.mt-news-list-item__chevron {
	display: inline-block;
	width: var(--mt-news-list-item-chevron-size);
	height: var(--mt-news-list-item-chevron-size);
	background: var(--mt-news-list-item-chevron-color);
	-webkit-mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/arrow-right.svg") center / contain no-repeat;
	mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/arrow-right.svg") center / contain no-repeat;
	transition: transform var(--mt-motion-fast);
}

/* -- Responsive -- */

@media (max-width: 560px) {
	.mt-news-list-item {
		grid-template-columns: var(--mt-news-list-item-icon-size) minmax(0, 1fr) auto;
		gap: var(--mt-space-sm);
		padding-inline: var(--mt-space-md);
	}

	.mt-news-list-item__date {
		grid-column: 2 / -1;
		grid-row: 2;
		justify-self: start;
	}

	.mt-news-list-item__chevron {
		grid-column: 3;
		grid-row: 1;
	}
}


/* --- assets/css/molecules/news-more.css --- */
/**
 * News-more link molecule.
 *
 * "Read more" / "View more" pill-link button with arrow icon. Used to
 * link from section heads (news, projects, etc.) to their full archive.
 *
 * @package OpcinaTema
 */

.mt-news-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 2.4rem;
  margin-top: 2rem;
  padding: 0.55rem 0.95rem;
  background: transparent;
  border: 1.5px solid var(--mt-color-primary);
  border-radius: 999px;
  color: var(--mt-color-primary);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}
.mt-news-more span {
  width: 0.9rem;
  height: 0.9rem;
  margin-top: 0;
  background: currentColor;
  border: 0;
  transform: none;
  -webkit-mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/arrow-right.svg") center/contain no-repeat;
  mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/arrow-right.svg") center/contain no-repeat;
}
.mt-news-more:hover, .mt-news-more:focus-visible {
  background: var(--mt-color-primary);
  border-color: var(--mt-color-primary);
  color: var(--mt-paper);
  transform: translateY(-1px);
}


/* --- assets/css/molecules/newsletter-input.css --- */
/**
 * newsletter-input molecule — compact email + subscribe button row.
 *
 * Composes the input atom (type=email by default) and the button atom
 * (with a visible "Subscribe" label, or whatever the host passes). Layout
 * is a flex row at default; the molecule stacks vertically below the
 * --mt-newsletter-input-stack-below breakpoint (default 480px).
 *
 * The atoms keep their own chrome — the molecule provides spacing only.
 *
 * @package OpcinaTema
 */

.mt-newsletter-input {
	/* -- Component-level tokens -- */
	--mt-newsletter-input-gap: var(--mt-space-xs);

	/* -- Structural rules (not tokenized) -- */
	display: flex;
	align-items: stretch;
	gap: var(--mt-newsletter-input-gap);
	width: 100%;
}

.mt-newsletter-input .mt-input {
	flex: 1 1 auto;
	min-width: 0;
}

.mt-newsletter-input .mt-button {
	flex: 0 0 auto;
}

/* -- Stack vertically on narrow viewports. -- */

@media (max-width: 480px) {
	.mt-newsletter-input {
		flex-direction: column;
	}
}


/* --- assets/css/molecules/pagination.css --- */
/**
 * pagination molecule — prev / page numbers / next.
 *
 * Wraps a <nav aria-label> around HTML produced by WordPress's
 * paginate_links() helper. The inner .page-numbers / .current / .prev /
 * .next classes are provided by WP — the molecule only styles them.
 *
 * @package OpcinaTema
 */

.mt-pagination {
	/* -- Component-level tokens -- */
	--mt-pagination-gap: var(--mt-space-sm);
	--mt-pagination-margin-top: var(--mt-space-2xl);
	--mt-pagination-item-size: 2.25rem;
	--mt-pagination-padding-block: var(--mt-space-xs);
	--mt-pagination-padding-inline: var(--mt-space-sm);
	--mt-pagination-border-color: var(--mt-color-border);
	--mt-pagination-color: var(--mt-color-text);
	--mt-pagination-font-weight: var(--mt-font-weight-bold);
	--mt-pagination-current-bg: var(--mt-color-primary);
	--mt-pagination-current-color: var(--mt-color-primary-contrast);

	/* -- Structural rules (not tokenized) -- */
	display: flex;
	flex-wrap: wrap;
	gap: var(--mt-pagination-gap);
	margin-top: var(--mt-pagination-margin-top);
}

.mt-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--mt-pagination-item-size);
	min-height: var(--mt-pagination-item-size);
	padding: var(--mt-pagination-padding-block) var(--mt-pagination-padding-inline);
	border: 1px solid var(--mt-pagination-border-color);
	color: var(--mt-pagination-color);
	font-family: var(--mt-font-sans);
	font-weight: var(--mt-pagination-font-weight);
	text-decoration: none;
}

.mt-pagination .current {
	background: var(--mt-pagination-current-bg);
	border-color: var(--mt-pagination-current-bg);
	color: var(--mt-pagination-current-color);
}


/* --- assets/css/molecules/rating.css --- */
/**
 * rating molecule — star rating display (read-only).
 *
 * Renders a row of star glyphs with `aria-label="3 out of 5 stars"`. The
 * filled portion is the actual rating; the empty portion is the remainder.
 * Display-only — not an interactive input.
 *
 * @package OpcinaTema
 */

.mt-rating {
	/* -- Component-level tokens -- */
	--mt-rating-color: var(--mt-color-primary);
	--mt-rating-empty-color: var(--mt-color-border);
	--mt-rating-size: 1rem;
	--mt-rating-gap: 0.125rem;

	/* -- Structural rules (not tokenized) -- */
	display: inline-flex;
	align-items: center;
	gap: var(--mt-rating-gap);
	font-size: var(--mt-rating-size);
	line-height: 1;
}

.mt-rating__star {
	display: inline-block;
	width: 1em;
	height: 1em;
	color: var(--mt-rating-empty-color);
	font-size: inherit;
	line-height: 1;
}

.mt-rating__star--filled {
	color: var(--mt-rating-color);
}


/* --- assets/css/molecules/search-form.css --- */
/**
 * search-form molecule — input + submit button inside a bordered row.
 *
 * Composes the input atom (left cell) and the button atom (right cell, with
 * icon_position='only'). The molecule's wrapper provides the green 4px
 * outline, the rounded corners, and the grid layout. The input atom's
 * chrome is neutralised to transparent so the wrapper's border is the
 * visible chrome.
 *
 * @package OpcinaTema
 */

.mt-search-form {
	/* -- Component-level tokens (direct defaults; host overrides by setting
	 *    them at higher specificity). -- */
	--mt-search-form-bg:             var(--mt-color-surface);
	--mt-search-form-border-color:   var(--mt-color-primary);
	--mt-search-form-border-width:   4px;
	--mt-search-form-radius:         7px;
	--mt-search-form-min-height:     3rem;
	--mt-search-form-submit-width:   3.1rem;
	--mt-search-form-submit-bg:      #e7ecef;
	--mt-search-form-submit-color:   var(--mt-color-text);
	--mt-search-form-submit-divider: #ccd2d8;

	/* -- Structural rules (not tokenized) — grid-template-columns has a
	 *    literal fallback so it remains valid even if a custom property
	 *    fails to resolve. -- */
	display: grid;
	grid-template-columns: minmax(0, 1fr) 3.1rem;
	grid-template-columns: minmax(0, 1fr) var(--mt-search-form-submit-width, 3.1rem);
	min-height: var(--mt-search-form-min-height, 3rem);
	overflow: hidden;
	background: var(--mt-search-form-bg, #ffffff);
	border: var(--mt-search-form-border-width, 4px) solid var(--mt-search-form-border-color, #168b3a);
	border-radius: var(--mt-search-form-radius, 7px);
}

/* -- Neutralise the input atom's chrome inside the row. -- */

.mt-search-form .mt-input {
	--mt-input-bg: transparent;
	--mt-input-border-color: transparent;
	--mt-input-border-width: 0;
	--mt-input-radius: 0;
	--mt-input-padding-block: 0;
	--mt-input-padding-inline: 1rem;
	--mt-input-font-size: 1.05rem;
	--mt-input-color: var(--mt-color-text);
	font-weight: 400;
}

.mt-search-form .mt-input:focus-visible {
	box-shadow: none;
}

/* -- Submit button styling.
 *    Neutralises the button atom's tokens AND its structural defaults so
 *    the button fills its grid cell as a borderless square. -- */

.mt-search-form .mt-button {
	--mt-button-bg: var(--mt-search-form-submit-bg, #e7ecef);
	--mt-button-color: var(--mt-search-form-submit-color, #031927);
	--mt-button-bg-hover: var(--mt-search-form-submit-bg, #e7ecef);
	--mt-button-color-hover: var(--mt-search-form-submit-color, #031927);
	--mt-button-border-color: transparent;
	--mt-button-border-color-hover: transparent;
	--mt-button-radius: 0;
	--mt-button-padding-x: 0;
	--mt-button-padding-y: 0;
	--mt-button-min-height: 0;
	--mt-button-shadow: none;
	/* Force the button to fill its grid cell — no inline-flex sizing. */
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	width: 100%;
	height: 100%;
	border: 0;
	border-left: 1px solid var(--mt-search-form-submit-divider, #ccd2d8);
	border-radius: 0;
	cursor: pointer;
}

.mt-search-form .mt-button:focus-visible {
	outline: 0;
}

.mt-search-form .mt-button .dashicons {
	width: 1.25rem;
	height: 1.25rem;
	font-size: 1.25rem;
	line-height: 1;
}

.mt-search-form .mt-button svg {
	display: block;
	width: 1.25rem;
	height: 1.25rem;
}


/* --- assets/css/molecules/section-head.css --- */
/**
 * Section-head molecule — opens every page section.
 *
 * Composes atoms/eyebrow + atoms/heading + atoms/paragraph +
 * atoms/button (section-link variant). Layout is a flex row with the
 * eyebrow/title/sub block on the left and an optional CTA pill aligned
 * to the end of the row.
 *
 * Variants:
 *   default (between)   left block + right CTA, justified between
 *   --stacked           CTA drops below the left block
 *   --no-cta            auto-applied when no CTA — strips the row gap
 *
 * @package OpcinaTema
 */

.mt-section-head {
	--mt-section-head-gap: var(--mt-space-xl);
	--mt-section-head-block-gap: var(--mt-space-sm);
	--mt-section-head-margin-bottom: var(--mt-space-2xl);
	--mt-section-head-title-color: var(--mt-color-text);
	--mt-section-head-sub-color: var(--mt-color-text-muted);
	--mt-section-head-sub-max-width: 38rem;
	--mt-section-head-accent-color: var(--mt-color-primary);
	--mt-section-head-accent-width: 2.25rem;
	--mt-section-head-accent-height: 3px;

	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--mt-section-head-gap);
	margin-bottom: var(--mt-section-head-margin-bottom);
}

.mt-section-head__block {
	display: flex;
	flex-direction: column;
	gap: var(--mt-section-head-block-gap);
	min-width: 0;
	max-width: 56rem;
}

.mt-section-head__eyebrow {
	margin-bottom: var(--mt-space-xs);
}

.mt-section-head__title {
	margin: 0;
	color: var(--mt-section-head-title-color);
	line-height: var(--mt-line-height-tight);
	letter-spacing: var(--mt-heading-letter-spacing);
}

/* Short brand accent rule under the title, for section rhythm. Add
   .mt-section-head--no-accent to opt a section out. */
.mt-section-head__title::after {
	content: "";
	display: block;
	width: var(--mt-section-head-accent-width);
	height: var(--mt-section-head-accent-height);
	margin-top: var(--mt-space-md);
	background: var(--mt-section-head-accent-color);
	border-radius: 999px;
}

.mt-section-head--no-accent .mt-section-head__title::after {
	display: none;
}

.mt-section-head__sub {
	margin: 0;
	max-width: var(--mt-section-head-sub-max-width);
	color: var(--mt-section-head-sub-color);
}

.mt-section-head__cta {
	flex: 0 0 auto;
}

/* The CTA's trailing arrow when host doesn't pass a custom icon. */
.mt-section-head__cta-arrow {
	width: 0.75rem;
	height: 0.75rem;
	background: currentColor;
	-webkit-mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/arrow-right.svg") center / contain no-repeat;
	mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/arrow-right.svg") center / contain no-repeat;
}

/* -- Variants -- */

.mt-section-head--stacked {
	flex-direction: column;
	align-items: flex-start;
}

.mt-section-head--no-cta {
	--mt-section-head-gap: 0;
}

/* -- Responsive: stack on narrow viewports -- */

@media (max-width: 720px) {
	.mt-section-head {
		flex-direction: column;
		align-items: flex-start;
	}

	/* Homepage two-col heads (Lokalne vijesti / Projekti) stay a row on phones —
	   the CTA sits to the right of the title instead of dropping to its own line,
	   saving vertical space. Centre it against the block: the accent rule under the
	   title balances the eyebrow above, so the CTA lands on the title text (not the
	   accent line, where flex-end would push it too low). */
	.mt-section-head.mt-two-col__head {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: var(--mt-space-md);
	}
}


/* --- assets/css/molecules/share-buttons.css --- */
/**
 * share-buttons molecule — share-to-platform action strip.
 *
 * Renders a horizontal row of share buttons (Facebook, X, LinkedIn,
 * copy-link, etc.). Visually similar to social-links but the action
 * semantics differ — these open share-intent URLs in new tabs, or run
 * a clipboard-copy on click.
 *
 * @package OpcinaTema
 */

.mt-share-buttons {
	/* -- Component-level tokens -- */
	--mt-share-buttons-gap: var(--mt-space-sm);
	--mt-share-buttons-size: 2.5rem;
	--mt-share-buttons-color: var(--mt-color-text);
	--mt-share-buttons-hover-color: var(--mt-color-primary-contrast);
	--mt-share-buttons-bg: var(--mt-color-surface-muted);
	--mt-share-buttons-hover-bg: var(--mt-color-primary);
	--mt-share-buttons-radius: var(--mt-radius-md);

	/* -- Structural rules (not tokenized) -- */
	display: flex;
	flex-wrap: wrap;
	gap: var(--mt-share-buttons-gap);
	padding: 0;
	margin: 0;
	list-style: none;
}

.mt-share-buttons__action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--mt-share-buttons-size);
	height: var(--mt-share-buttons-size);
	color: var(--mt-share-buttons-color);
	background: var(--mt-share-buttons-bg);
	border: 0;
	border-radius: var(--mt-share-buttons-radius);
	text-decoration: none;
	cursor: pointer;
	transition: color var(--mt-motion-fast), background var(--mt-motion-fast);
}

.mt-share-buttons__action:hover,
.mt-share-buttons__action:focus-visible {
	color: var(--mt-share-buttons-hover-color);
	background: var(--mt-share-buttons-hover-bg);
}


/* --- assets/css/molecules/social-links.css --- */
/**
 * social-links molecule — horizontal row of social-profile icon links.
 *
 * Renders <ul role="list"> with each item containing an <a aria-label>
 * wrapping the platform icon (host-supplied HTML).
 *
 * @package OpcinaTema
 */

.mt-social-links {
	/* -- Component-level tokens -- */
	--mt-social-links-gap: var(--mt-space-sm);
	--mt-social-links-size: 2.25rem;
	--mt-social-links-color: var(--mt-color-text);
	--mt-social-links-hover-color: var(--mt-color-primary);
	--mt-social-links-bg: transparent;
	--mt-social-links-hover-bg: var(--mt-color-surface-muted);
	--mt-social-links-radius: var(--mt-radius-circle);

	/* -- Structural rules (not tokenized) -- */
	display: flex;
	flex-wrap: wrap;
	gap: var(--mt-social-links-gap);
	padding: 0;
	margin: 0;
	list-style: none;
}

.mt-social-links__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--mt-social-links-size);
	height: var(--mt-social-links-size);
	color: var(--mt-social-links-color);
	background: var(--mt-social-links-bg);
	border-radius: var(--mt-social-links-radius);
	text-decoration: none;
	transition: color var(--mt-motion-fast), background var(--mt-motion-fast);
}

.mt-social-links__link:hover,
.mt-social-links__link:focus-visible {
	color: var(--mt-social-links-hover-color);
	background: var(--mt-social-links-hover-bg);
}


/* --- assets/css/molecules/stat-row.css --- */
/**
 * Stat-row molecule — horizontal row of stats with vertical dividers.
 *
 * Composes the .mt-stat atom; .mt-stat-row__divider is the divider
 * atom retuned to a thin 1px line that matches the row's typographic
 * scale.
 *
 * Variants:
 *   default              left-aligned (start)
 *   --center             center-aligned
 *   --end                right-aligned
 *
 * @package OpcinaTema
 */

.mt-stat-row {
	--mt-stat-row-gap: var(--mt-space-xl);
	--mt-stat-row-divider-color: var(--mt-color-border);
	--mt-stat-row-divider-height: 1.75rem;
	--mt-stat-row-divider-width: 1px;

	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mt-stat-row-gap);
}

.mt-stat-row--center {
	justify-content: center;
}

.mt-stat-row--end {
	justify-content: flex-end;
}

/* Divider atom retune scoped to this molecule. The atom renders as a   */
/* <span role="separator"> with its own base styling; the wrapping      */
/* .mt-stat-row__divider class overrides size + color via tokens.       */

.mt-stat-row__divider {
	display: inline-block;
	flex: 0 0 auto;
	width: var(--mt-stat-row-divider-width);
	height: var(--mt-stat-row-divider-height);
	background: var(--mt-stat-row-divider-color);
	border: 0;
	margin: 0;
	padding: 0;
}

/* On narrow viewports collapse the row to vertical stacking and hide   */
/* the dividers — vertical dividers between stacked items don't make    */
/* sense.                                                               */

@media (max-width: 560px) {
	.mt-stat-row {
		--mt-stat-row-gap: var(--mt-space-md);
		flex-direction: column;
		align-items: flex-start;
	}

	.mt-stat-row--center {
		align-items: center;
	}

	.mt-stat-row--end {
		align-items: flex-end;
	}

	.mt-stat-row__divider {
		display: none;
	}
}


/* --- assets/css/molecules/toc.css --- */
/**
 * Table-of-contents molecule — "Na ovoj stranici" in-page jump nav.
 *
 * Built and injected by assets/js/mt-toc.js above long article bodies. A numbered
 * list of the page's h2 sections; the current section's link is highlighted by
 * the scroll-spy (.is-active).
 *
 * @package OpcinaTema
 */

.mt-toc {
	margin: 0 0 2rem;
	padding: 1.1rem 1.35rem 1.25rem;
	background: var(--mt-color-surface-muted);
	border: 1px solid var(--mt-color-border);
	border-radius: var(--mt-radius-card);
}

.mt-toc__title {
	margin: 0 0 0.65rem;
	color: var(--mt-color-text-soft);
	font-family: var(--mt-font-mono);
	font-size: var(--mt-font-size-2xs);
	font-weight: var(--mt-font-weight-medium);
	letter-spacing: var(--mt-eyebrow-letter-spacing-wide);
	line-height: 1;
	text-transform: uppercase;
}

.mt-toc__list {
	display: grid;
	gap: 0.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: mt-toc;
}

.mt-toc__item {
	counter-increment: mt-toc;
	min-width: 0;
}

.mt-toc__link {
	display: flex;
	gap: 0.65rem;
	align-items: baseline;
	padding: 0.25rem 0;
	color: var(--mt-color-text-muted);
	font-size: var(--mt-font-size-sm);
	line-height: 1.4;
	text-decoration: none;
	transition: color var(--mt-motion-fast);
}

.mt-toc__link::before {
	content: counter(mt-toc, decimal-leading-zero);
	flex: 0 0 auto;
	color: var(--mt-color-primary);
	font-family: var(--mt-font-mono);
	font-size: var(--mt-font-size-2xs);
	font-weight: var(--mt-font-weight-medium);
}

.mt-toc__link:hover,
.mt-toc__link:focus-visible,
.mt-toc__link.is-active {
	color: var(--mt-color-primary);
	outline: none;
}

.mt-toc__link.is-active {
	font-weight: var(--mt-font-weight-medium);
}

/* Anchored headings clear any sticky header when jumped to. */
.mt-editor-content :where(h2, h3) {
	scroll-margin-top: 5.5rem;
}


/* --- assets/css/organisms/back-to-top.css --- */
/**
 * Back-to-top organism — floating scroll-to-top control.
 *
 * Injected by assets/js/mt-back-to-top.js. Fades in once the page is scrolled.
 * Sits in the bottom-right — above the accessibility widget on desktop, and
 * above the fixed bottom tab bar on mobile.
 *
 * @package OpcinaTema
 */

.mt-back-to-top {
	position: fixed;
	right: var(--mt-space-lg);
	bottom: 5.5rem;
	z-index: 90;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Matches the OneTap accessibility widget button (52px) so the two floating
	   controls read as the same size. */
	width: 3.25rem;
	height: 3.25rem;
	padding: 0;
	background: var(--mt-color-primary);
	border: 0;
	border-radius: var(--mt-radius-circle);
	box-shadow: var(--mt-shadow-md);
	color: var(--mt-color-primary-contrast);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(0.5rem);
	transition: opacity var(--mt-motion-base), transform var(--mt-motion-base),
		visibility var(--mt-motion-base), background var(--mt-motion-fast);
}

.mt-back-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: none;
}

/* The mobile menu overlay owns the screen — hide the button while it's open
   (the header JS adds this root class when the menu opens). */
.mt-site-header-menu-is-open .mt-back-to-top {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.mt-back-to-top:hover,
.mt-back-to-top:focus-visible {
	background: var(--mt-color-primary-hover);
	transform: translateY(-2px);
	outline: none;
}

.mt-back-to-top:focus-visible {
	outline: var(--mt-focus-ring-width) solid var(--mt-focus-ring-color);
	outline-offset: var(--mt-focus-ring-offset);
}

.mt-back-to-top svg {
	width: 1.4rem;
	height: 1.4rem;
}

/* On mobile the fixed bottom tab bar occupies the lower edge, so float the
   button just above it (the accessibility widget is hidden at this width). */
@media (max-width: 768px) {
	.mt-back-to-top {
		right: var(--mt-space-md);
		bottom: calc(7rem + env(safe-area-inset-bottom, 0px));
	}
}

@media (prefers-reduced-motion: reduce) {
	.mt-back-to-top {
		transition: opacity var(--mt-motion-base), visibility var(--mt-motion-base);
		transform: none;
	}

	.mt-back-to-top.is-visible,
	.mt-back-to-top:hover,
	.mt-back-to-top:focus-visible {
		transform: none;
	}
}


/* --- assets/css/organisms/card-event.css --- */
/**
 * card-event organism — media + body card used across event / tender /
 * notice / project / news / search archives.
 *
 * Variants — set via the `extra_class` arg on the template-part:
 *   --past                       — muted "past event" treatment
 *   --project-archive            — project archives (swap to screw icon)
 *   --local-news                 — local-news archives (megaphone icon)
 *   --tenders                    — tender archives (no media)
 *   --elections                  — elections archive (no media)
 *   --service-info-archive       — service-info archive (no media)
 *   --official-notice-archive    — official-notice archive (no media)
 *   --search-result              — search results (file-text icon + blue
 *                                  backdrop gradient)
 *
 * Variants override --mt-event-card-* tokens — no new structural rules
 * inside variants. Compound modifiers (e.g.
 * `mt-event-card--local-news mt-event-card--elections`) are supported
 * because each modifier only sets tokens / visibility.
 *
 * @package OpcinaTema
 */

.mt-event-card {
	/* -- Component-level tokens -- */
	--mt-event-card-bg: var(--mt-paper, #ffffff);
	--mt-event-card-color: var(--mt-ink, #031927);
	--mt-event-card-color-soft: #1d2c38;
	--mt-event-card-border: 1px solid rgba(217, 221, 225, 0.95);
	--mt-event-card-radius: var(--mt-radius-card);
	--mt-event-card-shadow: 0 0.45rem 1.1rem rgba(3, 25, 39, 0.07);
	--mt-event-card-padding: 1rem;
	--mt-event-card-gap: 0.65rem;
	--mt-event-card-accent: var(--mt-color-primary, #168b3a);
	--mt-event-card-accent-hover: var(--mt-color-primary-bright, #36c957);

	--mt-event-card-media-aspect: 16 / 10;
	--mt-event-card-media-bg: linear-gradient(135deg, rgba(54, 201, 87, 0.18), rgba(22, 139, 58, 0.08));
	--mt-event-card-media-icon-color: var(--mt-color-icon);
	--mt-event-card-media-icon-url: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/event-svgrepo-com.svg");

	/* -- Structural rules -- */
	/* Positioning context for the stretched title link (whole-card click). */
	position: relative;
	display: grid;
	/* Media keeps its natural (aspect-ratio) height; the body takes the slack,
	   so the text sits flush under the media and equal-height cards push their
	   empty space to the bottom instead of opening a gap above the text. */
	grid-template-rows: auto 1fr;
	min-height: 100%;
	overflow: hidden;
	background: var(--mt-event-card-bg);
	border: var(--mt-event-card-border);
	border-radius: var(--mt-event-card-radius);
	box-shadow: var(--mt-event-card-shadow);
	transition: box-shadow var(--mt-motion-fast), transform var(--mt-motion-fast);
}

/* Whole-card affordance — identical to the homepage media-card hover: a subtle
   lift + elevated shadow. Uses :focus-within (the card itself is not a link) so
   keyboard users get the same affordance. Respects prefers-reduced-motion. The
   --pill variant keeps its own hover (defined later, wins by source order). */
.mt-event-card:hover,
.mt-event-card:focus-within {
	box-shadow: var(--mt-shadow-elevated);
	transform: translateY(-2px);
}

/* -- Media -- */

.mt-event-card__media {
	position: relative;
	display: block;
	aspect-ratio: var(--mt-event-card-media-aspect);
	overflow: hidden;
	background: var(--mt-event-card-media-bg);
}

.mt-event-card__media > span {
	position: absolute;
	inset: 50% auto auto 50%;
	width: 2.75rem;
	height: 2.75rem;
	color: var(--mt-event-card-media-icon-color);
	background: currentColor;
	transform: translate(-50%, -50%);
	-webkit-mask: var(--mt-event-card-media-icon-url) center / contain no-repeat;
	mask: var(--mt-event-card-media-icon-url) center / contain no-repeat;
}

.mt-event-card__media img {
	transition: transform var(--mt-motion-base);
}

/* Photo zoom on hover, matching news/media-card (the centered fallback icon is
   a <span>, so it's unaffected). The media's overflow:hidden clips it. */
.mt-event-card:hover .mt-event-card__media img,
.mt-event-card:focus-within .mt-event-card__media img {
	transform: scale(1.05);
}

/* -- Body -- */

.mt-event-card__body {
	/* Always the 1fr track — also fills the card on no-media variants, where the
	   media element is display:none and the auto row collapses to zero. */
	grid-row: 2;
	display: flex;
	flex-direction: column;
	gap: var(--mt-event-card-gap);
	padding: var(--mt-event-card-padding);
}

.mt-event-card__body h2 {
	display: -webkit-box;
	overflow: hidden;
	margin: 0;
	color: var(--mt-event-card-color);
	font-size: clamp(1.125rem, 1.45vw, 1.25rem);
	font-weight: 700;
	line-height: 1.28;
	overflow-wrap: anywhere;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

.mt-event-card__body h2 a {
	color: inherit;
	text-decoration: none;
	transition: color 180ms ease;
}

.mt-event-card__body h2 a:hover,
.mt-event-card__body h2 a:focus-visible {
	color: var(--mt-event-card-accent);
}

/* Whole-card click target: the title link stretches over the entire card, so a
   click anywhere on it (media, excerpt, arrow) follows the same link. Mirrors
   the --pill variant; the card already carries the hover/focus lift affordance. */
.mt-event-card:not(.mt-event-card--pill) .mt-event-card__body h2 a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.mt-event-card__body p {
	display: -webkit-box;
	overflow: hidden;
	margin: 0;
	color: var(--mt-event-card-color-soft);
	font-size: 0.95rem;
	line-height: 1.45;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

.mt-event-card__body time {
	color: var(--mt-event-card-color);
	font-size: 0.875rem;
	font-weight: 500;
}

/* -- More link -- */

.mt-event-card__more {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	margin-top: auto;
	color: var(--mt-event-card-accent);
	font-size: 0.95rem;
	font-weight: 700;
	text-decoration: none;
	transition: color 180ms ease, transform 180ms ease;
}

.mt-event-card__more:hover,
.mt-event-card__more:focus-visible {
	color: var(--mt-event-card-accent-hover);
	transform: translateX(0.15rem);
}

/* Nudge the arrow when hovering anywhere on the (now whole-clickable) card — the
   stretched title link otherwise swallows the more-link's own hover. */
.mt-event-card:not(.mt-event-card--pill):hover .mt-event-card__more,
.mt-event-card:not(.mt-event-card--pill):focus-within .mt-event-card__more {
	color: var(--mt-event-card-accent-hover);
	transform: translateX(0.15rem);
}

.mt-event-card__more span {
	width: 1.05rem;
	height: 1.05rem;
	background: currentColor;
	-webkit-mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/arrow-right.svg") center / contain no-repeat;
	mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/arrow-right.svg") center / contain no-repeat;
}

/* -- Variant: --pill (compact horizontal overlay) -- */
/* Used as a hero-overlay event teaser. Different markup tree from the   */
/* default media+body card; the variant uses its own __date-block /       */
/* __body / __more children rendered by the pill branch in card-event.php. */

.mt-event-card--pill {
	--mt-event-card-pill-bg: var(--mt-color-surface);
	--mt-event-card-pill-color: var(--mt-color-text);
	--mt-event-card-pill-radius: var(--mt-radius-card);
	--mt-event-card-pill-shadow: var(--mt-shadow-overlay);
	--mt-event-card-pill-padding: var(--mt-space-md) var(--mt-space-xl) var(--mt-space-md) var(--mt-space-md);
	--mt-event-card-pill-gap: var(--mt-space-lg);
	--mt-event-card-pill-max-width: 26rem;
	--mt-event-card-pill-date-bg: var(--mt-color-primary-100);
	--mt-event-card-pill-date-color: var(--mt-color-primary);
	--mt-event-card-pill-date-size: 4rem;
	--mt-event-card-pill-eyebrow-color: var(--mt-color-text-soft);
	--mt-event-card-pill-title-size: var(--mt-font-size-lg);
	--mt-event-card-pill-more-color: var(--mt-color-primary);

	position: relative;
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	gap: var(--mt-event-card-pill-gap);
	min-height: 0;
	max-width: var(--mt-event-card-pill-max-width);
	padding: var(--mt-event-card-pill-padding);
	background: var(--mt-event-card-pill-bg);
	color: var(--mt-event-card-pill-color);
	border: 0;
	border-radius: var(--mt-event-card-pill-radius);
	box-shadow: var(--mt-event-card-pill-shadow);
	transition: box-shadow var(--mt-motion-fast), transform var(--mt-motion-fast);
}

/* Whole-card click target: the title link stretches over the entire pill   */
/* (date block, body and arrow are all covered), so the card is one link.   */
.mt-event-card--pill:hover,
.mt-event-card--pill:focus-within {
	box-shadow: var(--mt-shadow-lg);
	transform: translateY(-2px);
}

.mt-event-card--pill .mt-event-card__body h2 a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.mt-event-card--pill .mt-event-card__date-block {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: var(--mt-event-card-pill-date-size);
	height: var(--mt-event-card-pill-date-size);
	background: var(--mt-event-card-pill-date-bg);
	color: var(--mt-event-card-pill-date-color);
	border-radius: var(--mt-radius-md);
	line-height: 1;
}

.mt-event-card--pill .mt-event-card__date-day {
	font-size: var(--mt-font-size-3xl);
	font-weight: var(--mt-font-weight-medium);
	line-height: 1;
}

.mt-event-card--pill .mt-event-card__date-month {
	margin-top: 0.2rem;
	font-family: var(--mt-font-mono);
	font-size: var(--mt-font-size-2xs);
	font-weight: var(--mt-font-weight-medium);
	letter-spacing: var(--mt-eyebrow-letter-spacing);
	line-height: 1;
	text-transform: uppercase;
}

.mt-event-card--pill .mt-event-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--mt-space-xs);
	padding: 0;
	min-width: 0;
}

.mt-event-card--pill .mt-event-card__eyebrow-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--mt-space-sm);
}

.mt-event-card--pill .mt-event-card__eyebrow {
	display: block;
	color: var(--mt-event-card-pill-eyebrow-color);
	font-family: var(--mt-font-mono);
	font-size: var(--mt-font-size-2xs);
	font-weight: var(--mt-font-weight-medium);
	letter-spacing: var(--mt-eyebrow-letter-spacing);
	line-height: 1;
	text-transform: uppercase;
}

/* Live countdown chip ("za 3 dana") next to the eyebrow; filled by
   assets/js/mt-countdown.js — hidden until then so no-JS shows just the date. */
.mt-event-card--pill .mt-event-card__countdown {
	display: inline-flex;
	align-items: center;
	padding: 0.12rem 0.5rem;
	background: var(--mt-color-primary-soft);
	border-radius: var(--mt-radius-pill);
	color: var(--mt-color-primary);
	font-family: var(--mt-font-sans);
	font-size: var(--mt-font-size-2xs);
	font-weight: var(--mt-font-weight-bold);
	line-height: 1.45;
}

.mt-event-card__countdown:empty {
	display: none;
}

.mt-event-card--pill .mt-event-card__body h2 {
	margin: 0;
	color: var(--mt-color-text);
	font-family: var(--mt-font-sans);
	font-size: var(--mt-event-card-pill-title-size);
	font-weight: var(--mt-font-weight-medium);
	line-height: var(--mt-line-height-tight);
	display: block;
	-webkit-line-clamp: unset;
	overflow: visible;
}

.mt-event-card--pill .mt-event-card__body h2 a {
	color: inherit;
	text-decoration: none;
}

/* Single decorative arrow (the pill is one stretched link; this is just an */
/* affordance, not a second link). Sits at the far right of the card.       */
.mt-event-card--pill .mt-event-card__more {
	flex: 0 0 auto;
	display: block;
	width: 1.15rem;
	height: 1.15rem;
	margin: 0 0 0 auto;
	background: currentColor;
	color: var(--mt-event-card-pill-more-color);
	-webkit-mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/arrow-right.svg") center / contain no-repeat;
	mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/arrow-right.svg") center / contain no-repeat;
	transition: transform var(--mt-motion-fast), color var(--mt-motion-fast);
}

.mt-event-card--pill:hover .mt-event-card__more,
.mt-event-card--pill:focus-within .mt-event-card__more {
	color: var(--mt-color-primary-hover);
	transform: translateX(0.15rem);
}

/* -- Variants: archive-icon swaps -- */

.mt-event-card--project-archive {
	--mt-event-card-media-icon-url: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/screw-svgrepo-com.svg");
}

.mt-event-card--local-news {
	--mt-event-card-media-icon-url: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/megaphone.svg");
}

/* Document register cards: the media area shows the file/document icon (no
   photo), so the registar-dokumenata archive uses the same card as every other
   archive. */
/* Document register + search-result cards share the same media background and
   icon colour as every other archive card (inherit the green base); only the
   file icon differs. */
.mt-event-card--document {
	--mt-event-card-media-icon-url: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/file-text.svg");
}

.mt-event-card--search-result {
	--mt-event-card-media-icon-url: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/file-text.svg");
}

/* Service-info archive cards: photo when available, else the megaphone icon. */
.mt-event-card--service-info-archive {
	--mt-event-card-media-icon-url: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/megaphone.svg");
}

/* -- Variants: media hidden (tender/election archives) -- */
/* Notice & service-info archive cards now show a featured image when available,
   else a fallback icon; the renderer omits the media element entirely only for
   archives that don't opt into media. */

.mt-event-card--elections .mt-event-card__media,
.mt-event-card--tenders .mt-event-card__media {
	display: none;
}


/* --- assets/css/organisms/card-file.css --- */
/**
 * card-file organism — file download card injected into the_content for
 * standalone document links.
 *
 * Type modifiers `--{ext}` set --mt-file-card-icon-color which the SVG
 * uses via currentColor. Override `--mt-file-card-*` tokens from a host
 * scope (e.g. `.mt-editor-content .mt-file-card { --mt-file-card-padding: ... }`)
 * to retheme without copying selectors.
 *
 * @package OpcinaTema
 */

.mt-file-card {
	/* -- Component-level tokens -- */
	--mt-file-card-bg: var(--mt-paper, #ffffff);
	--mt-file-card-color: var(--mt-ink, #031927);
	--mt-file-card-border-color: rgba(255, 255, 255, 0.28);
	--mt-file-card-accent: var(--mt-color-primary, #168b3a);
	--mt-file-card-radius: 8px;
	--mt-file-card-padding: 0.72rem 0.85rem;
	--mt-file-card-icon-size: 2.65rem;
	--mt-file-card-icon-color: var(--mt-color-icon);

	/* -- Structural rules -- */
	display: grid;
	grid-template-columns: var(--mt-file-card-icon-size) minmax(0, 1fr) auto;
	align-items: center;
	gap: 0.8rem;
	width: min(100%, 38rem);
	min-height: 4rem;
	padding: var(--mt-file-card-padding);
	margin: 0.85rem 0;
	background: var(--mt-file-card-bg);
	border: 1px solid var(--mt-file-card-border-color);
	border-left: 0.35rem solid var(--mt-file-card-accent);
	border-radius: var(--mt-file-card-radius);
	box-shadow: none;
	color: var(--mt-file-card-color);
	font-weight: 400;
	line-height: 1.35;
	text-decoration: none;
	transform: none;
	transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.mt-editor-content .mt-file-card {
	/* Same grid + border treatment when nested inside editor content;
	   the editor-content link-styling reset needs to be overridden here. */
	display: grid;
	grid-template-columns: var(--mt-file-card-icon-size) minmax(0, 1fr) auto;
	gap: 0.8rem;
	width: min(100%, 38rem);
	min-height: 4rem;
	padding: var(--mt-file-card-padding);
	margin: 0.85rem 0;
	background: var(--mt-file-card-bg);
	border: 1px solid var(--mt-file-card-border-color);
	border-left: 0.35rem solid var(--mt-file-card-accent);
	border-radius: var(--mt-file-card-radius);
	box-shadow: none;
	color: var(--mt-file-card-color);
	font-weight: 400;
	line-height: 1.35;
	text-decoration: none;
	transform: none;
}

.mt-editor-content p > .mt-file-card {
	margin-top: 0.85rem;
}

.mt-file-card:hover,
.mt-file-card:focus-visible,
.mt-editor-content .mt-file-card:hover,
.mt-editor-content .mt-file-card:focus-visible {
	border-color: var(--mt-file-card-accent);
	background: rgba(54, 201, 87, 0.08);
	color: var(--mt-file-card-color);
	transform: translateY(-1px);
}

/* -- Per-type icon color modifiers -- */

.mt-file-card--pdf {
	--mt-file-card-icon-color: var(--mt-red, #d7153a);
}

.mt-file-card--doc,
.mt-file-card--docx {
	--mt-file-card-icon-color: var(--mt-color-accent, #0057a8);
}

.mt-file-card--xls,
.mt-file-card--xlsx,
.mt-file-card--csv {
	--mt-file-card-icon-color: var(--mt-color-icon);
}

.mt-file-card--ppt,
.mt-file-card--pptx,
.mt-file-card--pps,
.mt-file-card--ppsx {
	--mt-file-card-icon-color: var(--mt-yellow, #f7c948);
}

.mt-file-card--zip,
.mt-file-card--rar,
.mt-file-card--7z {
	--mt-file-card-icon-color: var(--mt-teal, #00756f);
}

/* -- Icon -- */

.mt-file-card__icon {
	display: block;
	width: var(--mt-file-card-icon-size);
	height: var(--mt-file-card-icon-size);
	color: var(--mt-file-card-icon-color);
}

.mt-file-card__icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

.mt-file-card__icon-sheet {
	fill: rgba(54, 201, 87, 0.1);
	stroke: currentColor;
	stroke-width: 2;
}

.mt-file-card__icon-fold {
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 2;
}

.mt-file-card__icon-label {
	fill: currentColor;
}

.mt-file-card__icon-type {
	fill: var(--mt-paper, #ffffff);
	font-family: var(--mt-font-sans, "Helvetica Now Display", Helvetica, sans-serif);
	font-size: 10px !important;
	font-weight: 800;
	letter-spacing: 0.02em;
}

/* -- Body / title / meta / action -- */

.mt-file-card__body {
	min-width: 0;
}

.mt-file-card__title,
.mt-file-card__meta {
	display: block;
}

.mt-file-card__title {
	color: var(--mt-file-card-color);
	font-size: 0.95rem !important;
	font-weight: 700;
	line-height: 1.3;
	overflow-wrap: anywhere;
	word-break: break-word;
}

.mt-file-card__meta {
	margin-top: 0.15rem;
	color: var(--mt-file-card-accent);
	font-size: 0.78rem !important;
	font-weight: 700;
	line-height: 1.25;
	text-transform: uppercase;
}

.mt-file-card__action {
	color: var(--mt-file-card-accent);
	font-size: 0.84rem !important;
	font-weight: 700;
	white-space: nowrap;
}

/* -- Narrow viewport -- */

@media (max-width: 560px) {
	.mt-file-card,
	.mt-editor-content .mt-file-card {
		grid-template-columns: 2.5rem minmax(0, 1fr);
		gap: 0.7rem;
		padding: 0.75rem;
		--mt-file-card-icon-size: 2.5rem;
	}

	.mt-file-card__action {
		grid-column: 2;
		justify-self: start;
		margin-top: 0.2rem;
	}
}


/* --- assets/css/organisms/card-news.css --- */
/**
 * card-news organism — base "Lokalne vijesti" card.
 *
 * Base treatment: large horizontal card with circular tone-tinted media
 * on the left, body on the right. Tone variants (`__media--red`,
 * `__media--yellow`, `__media--blue`, `__media--teal`) override the
 * media background; `--empty` collapses the media column.
 *
 * The in-page card-grid applies additional context-specific overrides
 * (different layout, thumbnails, typography, hover treatment).
 *
 * @package OpcinaTema
 */

.mt-news-card {
	/* -- Component-level tokens -- */
	--mt-news-card-bg: var(--mt-paper, #ffffff);
	--mt-news-card-color: var(--mt-ink, #031927);
	--mt-news-card-color-muted: var(--mt-ink-soft, #384651);
	--mt-news-card-accent: var(--mt-color-primary, #168b3a);
	--mt-news-card-border-color: var(--mt-line, #d9dde1);
	--mt-news-card-media-size: 10rem;
	--mt-news-card-media-bg: linear-gradient(135deg, rgba(17, 17, 17, 0.18), transparent), var(--mt-teal, #00756f);
	--mt-news-card-gap: 2.35rem;
	--mt-news-card-padding-block: 2.45rem;

	/* -- Structural rules -- */
	display: grid;
	grid-template-columns: var(--mt-news-card-media-size) minmax(0, 1fr);
	align-items: start;
	gap: var(--mt-news-card-gap);
	padding-block: var(--mt-news-card-padding-block);
	background: var(--mt-news-card-bg);
	border-bottom: 1px dashed var(--mt-news-card-border-color);
	border-radius: 0;
	overflow: visible;
}

.mt-news-card:first-child {
	padding-top: 0;
}

.mt-news-card--empty {
	grid-template-columns: minmax(0, 1fr);
}

/* -- Media -- */

.mt-news-card__media {
	display: block;
	width: var(--mt-news-card-media-size);
	aspect-ratio: 1;
	min-height: 0;
	overflow: hidden;
	background: var(--mt-news-card-media-bg);
	border-radius: 50%;
	text-decoration: none;
}

/* Editorial list row (flat, dashed separator) — a lift would look wrong, so the
   circular thumbnail subtly zooms on hover/focus instead. */
.mt-news-card__media img {
	transition: transform 240ms ease;
}

.mt-news-card:hover .mt-news-card__media img,
.mt-news-card:focus-within .mt-news-card__media img {
	transform: scale(1.05);
}

.mt-news-card__image--fallback {
	box-sizing: border-box;
	object-fit: contain;
	padding: 2.4rem;
}

/* -- Media tone variants (override --mt-news-card-media-bg) -- */

.mt-news-card__media--red {
	--mt-news-card-media-bg: linear-gradient(135deg, rgba(17, 17, 17, 0.16), transparent), var(--mt-red, #d7153a);
}

.mt-news-card__media--yellow {
	--mt-news-card-media-bg: linear-gradient(135deg, rgba(17, 17, 17, 0.12), transparent), var(--mt-yellow, #f7c948);
}

.mt-news-card__media--blue {
	--mt-news-card-media-bg: linear-gradient(135deg, rgba(17, 17, 17, 0.14), transparent), var(--mt-color-accent, #0057a8);
}

.mt-news-card__media--teal {
	--mt-news-card-media-bg: linear-gradient(135deg, rgba(17, 17, 17, 0.14), transparent), var(--mt-teal, #00756f);
}

/* -- Body -- */

.mt-news-card__body {
	display: block;
	padding: 0;
}

.mt-news-card__body h3,
.mt-news-card__body p {
	margin: 0;
}

.mt-news-card__body .mt-card-label {
	margin-bottom: 0.35rem;
	color: var(--mt-news-card-color);
	font-size: 0.82rem;
	line-height: 1.2;
}

.mt-news-card__body h3 {
	display: -webkit-box;
	position: relative;
	overflow: hidden;
	padding-right: 1.65rem;
	font-size: clamp(1.65rem, 2.4vw, 2rem);
	font-weight: 800;
	line-height: 1.16;
	overflow-wrap: anywhere;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

.mt-news-card__body h3 a {
	position: static;
	text-decoration: none;
}

.mt-news-card__body h3 a::after {
	position: absolute;
	right: 0;
	bottom: 0.1em;
	width: 1.12rem;
	height: 1.12rem;
	background: var(--mt-news-card-accent);
	content: "";
	-webkit-mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/more.svg") center / contain no-repeat;
	mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/more.svg") center / contain no-repeat;
}

.mt-news-card__body p:not(.mt-card-label) {
	margin-top: 0.95rem;
	color: var(--mt-news-card-color-muted);
	font-size: 1.2rem;
	line-height: 1.5;
}

.mt-news-card__body time {
	display: block;
	margin-top: 0.7rem;
	color: var(--mt-news-card-color-muted);
	font-size: 1.1rem;
	font-weight: 400;
}

/* -- Variant: --mini (compact tile, no media) -- */
/* Used in the homepage news-mix block alongside the main featured news */
/* card. Vertical tile with bordered container, a monospace meta row    */
/* (category left, date right), and a condensed h3 title.               */

.mt-news-card--mini {
	--mt-news-card-mini-bg: var(--mt-color-surface);
	--mt-news-card-mini-color: var(--mt-color-text);
	--mt-news-card-mini-border: 1px solid var(--mt-color-border);
	--mt-news-card-mini-radius: var(--mt-radius-card);
	--mt-news-card-mini-padding: var(--mt-space-lg);
	--mt-news-card-mini-gap: var(--mt-space-sm);
	--mt-news-card-mini-meta-color: var(--mt-color-text-soft);
	--mt-news-card-mini-meta-accent: var(--mt-color-primary);
	--mt-news-card-mini-title-size: var(--mt-font-size-md);

	display: block;
	padding: var(--mt-news-card-mini-padding);
	background: var(--mt-news-card-mini-bg);
	color: var(--mt-news-card-mini-color);
	border: var(--mt-news-card-mini-border);
	border-radius: var(--mt-news-card-mini-radius);
	border-bottom: var(--mt-news-card-mini-border);
}

.mt-news-card--mini .mt-news-card__link {
	display: flex;
	flex-direction: column;
	gap: var(--mt-news-card-mini-gap);
	color: inherit;
	text-decoration: none;
	transition: color var(--mt-motion-fast);
}

.mt-news-card--mini .mt-news-card__link:hover,
.mt-news-card--mini .mt-news-card__link:focus-visible {
	color: var(--mt-news-card-mini-meta-accent);
	outline: none;
}

/* Hide media + arrow in the mini variant — markup is preserved so this  */
/* is a pure CSS override.                                               */
.mt-news-card--mini .mt-news-card__media,
.mt-news-card--mini .mt-news-card__arrow,
.mt-news-card--mini .mt-news-card__excerpt,
.mt-news-card--mini .mt-news-card__action,
.mt-news-card--mini .mt-news-card__body h3 a::after {
	display: none;
}

.mt-news-card--mini .mt-news-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--mt-news-card-mini-gap);
	padding: 0;
}

.mt-news-card--mini .mt-news-card__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0;
	padding: 0;
	gap: var(--mt-space-md);
	color: var(--mt-news-card-mini-meta-color);
	font-family: var(--mt-font-mono);
	font-size: var(--mt-font-size-2xs);
	font-weight: var(--mt-font-weight-medium);
	letter-spacing: var(--mt-eyebrow-letter-spacing);
	line-height: 1;
	text-transform: uppercase;
}

.mt-news-card--mini .mt-news-card__meta .mt-card-label {
	margin: 0;
	color: var(--mt-news-card-mini-meta-accent);
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	letter-spacing: inherit;
	line-height: inherit;
	text-transform: inherit;
}

.mt-news-card--mini .mt-news-card__meta-separator {
	display: none;
}

.mt-news-card--mini .mt-news-card__meta time {
	display: inline;
	margin: 0;
	padding: 0;
	color: inherit;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	letter-spacing: inherit;
}

.mt-news-card--mini .mt-news-card__body h3 {
	display: block;
	margin: 0;
	padding: 0;
	overflow: visible;
	color: inherit;
	font-family: var(--mt-font-sans);
	font-size: var(--mt-news-card-mini-title-size);
	font-weight: var(--mt-font-weight-medium);
	line-height: var(--mt-line-height-tight);
	-webkit-line-clamp: unset;
}


/* --- assets/css/organisms/card-official-notice.css --- */
/**
 * card-official-notice organism — homepage "Službene obavijesti" card.
 *
 * Two main variants:
 *   --featured  — large card with excerpt + action link, spans 4 grid rows
 *   --compact   — narrow card, badge + date + title + trailing arrow
 *
 * Plus an --empty fallback used when no notices are published.
 *
 * @package OpcinaTema
 */

.mt-official-notice-card {
	/* -- Component-level tokens -- */
	--mt-official-notice-card-bg: var(--mt-paper, #ffffff);
	--mt-official-notice-card-color: var(--mt-ink, #031927);
	--mt-official-notice-card-color-muted: var(--mt-ink-soft, #384651);
	--mt-official-notice-card-accent: var(--mt-color-primary, #168b3a);
	--mt-official-notice-card-border-color: rgba(217, 221, 225, 0.96);
	--mt-official-notice-card-border-hover: rgba(22, 139, 58, 0.34);
	--mt-official-notice-card-radius: var(--mt-radius-card);
	--mt-official-notice-card-shadow: 0 0.45rem 1.1rem rgba(3, 25, 39, 0.07);
	--mt-official-notice-card-shadow-hover: var(--mt-shadow-elevated);

	/* -- Structural rules -- */
	min-width: 0;
	background: var(--mt-official-notice-card-bg);
	border: 1px solid var(--mt-official-notice-card-border-color);
	border-radius: var(--mt-official-notice-card-radius);
	box-shadow: var(--mt-official-notice-card-shadow);
	overflow: hidden;
	transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.mt-official-notice-card:hover,
.mt-official-notice-card:focus-within {
	border-color: var(--mt-official-notice-card-border-hover);
	box-shadow: var(--mt-official-notice-card-shadow-hover);
	transform: translateY(-2px);
}

.mt-official-notice-card__link {
	display: grid;
	min-height: 100%;
	color: inherit;
	text-decoration: none;
}

.mt-official-notice-card__body {
	display: flex;
	min-width: 0;
	flex-direction: column;
}

.mt-official-notice-card__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.45rem;
	color: var(--mt-official-notice-card-color-muted);
	font-size: 0.86rem;
	line-height: 1.2;
}

.mt-official-notice-card__meta time {
	color: var(--mt-official-notice-card-color-muted);
	font-size: 0.86rem;
	font-weight: 500;
	line-height: 1.25;
}

.mt-official-notice-card h3,
.mt-official-notice-card p {
	margin: 0;
}

.mt-official-notice-card h3 {
	display: -webkit-box;
	overflow: hidden;
	color: var(--mt-official-notice-card-color);
	font-weight: 800;
	overflow-wrap: anywhere;
	transition: color 160ms ease;
	-webkit-box-orient: vertical;
}

.mt-official-notice-card:hover h3,
.mt-official-notice-card:focus-within h3 {
	color: var(--mt-official-notice-card-accent);
}

.mt-official-notice-card__excerpt {
	display: -webkit-box;
	overflow: hidden;
	color: var(--mt-official-notice-card-color-muted);
	line-height: 1.55;
	-webkit-box-orient: vertical;
}

.mt-official-notice-card__action {
	display: inline-flex;
	align-items: center;
	gap: 0.42rem;
	width: fit-content;
	margin-top: auto;
	color: var(--mt-official-notice-card-accent);
	font-size: 0.96rem;
	font-weight: 800;
	line-height: 1.2;
}

.mt-official-notice-card__action span,
.mt-official-notice-card__arrow {
	background: currentColor;
	-webkit-mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/arrow-right.svg") center / contain no-repeat;
	mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/arrow-right.svg") center / contain no-repeat;
}

.mt-official-notice-card__action span {
	width: 0.86rem;
	height: 0.86rem;
}

/* -- Featured variant -- */

.mt-official-notice-card--featured {
	--mt-official-notice-card-featured-bg: var(--mt-color-primary-tint);
	--mt-official-notice-card-featured-border-color: var(--mt-color-primary-100);
	--mt-official-notice-card-featured-radius: var(--mt-radius-xl);
	--mt-official-notice-card-featured-padding: var(--mt-space-xl);
	--mt-official-notice-card-featured-gap: var(--mt-space-md);
	--mt-official-notice-card-featured-min-height: clamp(16rem, 24vw, 23rem);
	--mt-official-notice-card-featured-title-size: var(--mt-font-size-3xl);
	--mt-official-notice-card-featured-title-weight: var(--mt-font-weight-medium);
	--mt-official-notice-card-featured-title-line-height: 1.15;
	--mt-official-notice-card-featured-excerpt-size: var(--mt-font-size-sm);
	--mt-official-notice-card-featured-decor-size: 14rem;
	--mt-official-notice-card-featured-decor-color: var(--mt-color-primary-100);
	--mt-official-notice-card-featured-decor-opacity: 0.5;

	position: relative;
	grid-row: span 4;
	background: var(--mt-official-notice-card-featured-bg);
	border-color: var(--mt-official-notice-card-featured-border-color);
	border-radius: var(--mt-official-notice-card-featured-radius);
	box-shadow: var(--mt-shadow-none);
}

.mt-official-notice-card--featured::after {
	position: absolute;
	right: calc(var(--mt-official-notice-card-featured-decor-size) * -0.3);
	bottom: calc(var(--mt-official-notice-card-featured-decor-size) * -0.3);
	width: var(--mt-official-notice-card-featured-decor-size);
	height: var(--mt-official-notice-card-featured-decor-size);
	background: var(--mt-official-notice-card-featured-decor-color);
	border-radius: 50%;
	opacity: var(--mt-official-notice-card-featured-decor-opacity);
	pointer-events: none;
	content: "";
}

.mt-official-notice-card--featured .mt-official-notice-card__link {
	position: relative;
	z-index: 1;
	padding: var(--mt-official-notice-card-featured-padding);
}

.mt-official-notice-card--featured .mt-official-notice-card__body {
	gap: var(--mt-official-notice-card-featured-gap);
	min-height: var(--mt-official-notice-card-featured-min-height);
}

.mt-official-notice-card--featured h3 {
	max-width: 35rem;
	font-size: var(--mt-official-notice-card-featured-title-size);
	font-weight: var(--mt-official-notice-card-featured-title-weight);
	line-height: var(--mt-official-notice-card-featured-title-line-height);
	letter-spacing: var(--mt-heading-letter-spacing);
	-webkit-line-clamp: 4;
}

.mt-official-notice-card--featured .mt-official-notice-card__excerpt {
	max-width: 36rem;
	font-size: var(--mt-official-notice-card-featured-excerpt-size);
	color: var(--mt-color-text-muted);
	-webkit-line-clamp: 3;
}

.mt-official-notice-card--featured .mt-official-notice-card__action {
	margin-top: var(--mt-space-md);
	padding-top: var(--mt-space-md);
	border-top: 1px solid var(--mt-official-notice-card-featured-border-color);
	color: var(--mt-color-primary);
	font-size: var(--mt-font-size-sm);
	font-weight: var(--mt-font-weight-medium);
	width: 100%;
	justify-content: space-between;
}

.mt-official-notice-card--featured .mt-official-notice-card__arrow {
	display: none;
}

/* Tone down the lift / accent-border on hover for the softer featured */
/* aesthetic; the green-tint backdrop already telegraphs the surface.   */
.mt-official-notice-card--featured:hover,
.mt-official-notice-card--featured:focus-within {
	border-color: var(--mt-official-notice-card-featured-border-color);
	box-shadow: var(--mt-shadow-elevated);
	transform: none;
}

/* -- Compact variant -- */

.mt-official-notice-card--compact .mt-official-notice-card__link {
	position: relative;
	grid-template-columns: minmax(0, 1fr) 1rem;
	align-items: center;
	gap: 0.85rem;
	padding: 1rem 1.05rem;
}

.mt-official-notice-card--compact .mt-official-notice-card__body {
	grid-column: 1;
	gap: 0.5rem;
	padding-right: 0.4rem;
}

.mt-official-notice-card--compact h3 {
	font-size: clamp(1rem, 1.2vw, 1.16rem);
	line-height: 1.3;
	-webkit-line-clamp: 2;
}

.mt-official-notice-card--compact .mt-badge {
	--mt-badge-font-size: 0.66rem;
}

.mt-official-notice-card--compact .mt-official-notice-card__meta time {
	font-size: 0.82rem;
}

.mt-official-notice-card--compact .mt-official-notice-card__arrow {
	grid-column: 2;
	grid-row: 1;
	width: 1rem;
	height: 1rem;
	color: var(--mt-official-notice-card-accent);
	opacity: 0.72;
	transition: opacity 160ms ease, transform 160ms ease;
}

.mt-official-notice-card--compact:hover .mt-official-notice-card__arrow,
.mt-official-notice-card--compact:focus-within .mt-official-notice-card__arrow {
	opacity: 1;
	transform: translateX(0.14rem);
}

/* -- Empty fallback -- */

.mt-official-notice-card--empty {
	padding: clamp(1.25rem, 2vw, 1.65rem);
}

/* -- Responsive -- */

@media (max-width: 960px) {
	.mt-official-notice-card--featured {
		grid-row: auto;
	}

	.mt-official-notice-card--featured .mt-official-notice-card__body {
		min-height: 0;
	}
}

@media (max-width: 560px) {
	.mt-official-notice-card--featured .mt-official-notice-card__link {
		padding: 1.15rem;
	}

	.mt-official-notice-card--featured h3 {
		font-size: 1.42rem;
	}

	.mt-official-notice-card--compact .mt-official-notice-card__link {
		padding: 0.95rem;
	}

	.mt-official-notice-card__meta {
		gap: 0.38rem;
	}
}


/* --- assets/css/organisms/card-person.css --- */
/**
 * Person card organism + people grid.
 *
 * A photo (or avatar-silhouette fallback) above a name + optional description.
 * Used to list the "osobe" people (e.g. on the Upravni odjel page). Visual
 * values flow through component tokens with global-token fallbacks.
 *
 * @package OpcinaTema
 */

/* Space the people grid from the content/title above it (sits in the content
   column, after .mt-content__body). */
.mt-people {
	margin-top: clamp(1.75rem, 3vw, 2.75rem);
}

.mt-people-grid {
	display: grid;
	/* Same footprint as the homepage media-card grid. */
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	gap: clamp(1.1rem, 2vw, 1.6rem);
}

/* A grid of horizontal cards needs wider columns than a grid of photo tiles —
   otherwise the photo/body split has nothing to work with. */
.mt-people-grid:has(> .mt-person-card--horizontal) {
	grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
}

/* One column, for a group of one or two people (e.g. the zamjenik načelnika).
   In the grid above, a lone card is stranded in a 15rem column; stacked, it can
   take the horizontal shape the načelnik's card has. */
.mt-people-stack {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(1.1rem, 2vw, 1.6rem);
}

.mt-person-card {
	--mt-person-card-bg: var(--mt-paper);
	--mt-person-card-border: 1px solid var(--mt-line);
	--mt-person-card-radius: var(--mt-radius-card, 8px);
	--mt-person-card-photo-bg: var(--mt-color-surface-muted);
	--mt-person-card-avatar-color: var(--mt-color-text-subtle);
	--mt-person-card-name-color: var(--mt-ink);
	--mt-person-card-desc-color: var(--mt-ink-soft);
	--mt-person-card-accent: var(--mt-color-primary-bright);

	position: relative;
	display: grid;
	grid-template-rows: auto 1fr;
	overflow: hidden;
	background: var(--mt-person-card-bg);
	border: var(--mt-person-card-border);
	border-radius: var(--mt-person-card-radius);
	transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.mt-person-card__photo {
	aspect-ratio: 1 / 1;
	background: var(--mt-person-card-photo-bg);
}

.mt-person-card__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mt-person-card__photo--fallback {
	display: grid;
	place-items: center;
}

.mt-person-card__avatar {
	display: block;
	width: 42%;
	max-width: 6.5rem;
	color: var(--mt-person-card-avatar-color);
}

.mt-person-card__avatar svg {
	display: block;
	width: 100%;
	height: auto;
	fill: currentColor;
}

.mt-person-card__body {
	display: grid;
	gap: 0.3rem;
	align-content: start;
	padding: 0.95rem 1.1rem 1.15rem;
}

.mt-person-card__name {
	margin: 0;
	color: var(--mt-person-card-name-color);
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.3;
}

.mt-person-card__name a {
	color: inherit;
	text-decoration: none;
	transition: color var(--mt-motion-fast, 160ms ease);
}

.mt-person-card__name a:hover,
.mt-person-card__name a:focus-visible {
	color: var(--mt-person-card-accent);
}

/* Stretch the name link over the whole card so the entire surface is clickable. */
.mt-person-card__name a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.mt-person-card:hover,
.mt-person-card:focus-within {
	border-color: var(--mt-person-card-accent);
	box-shadow: var(--mt-shadow-elevated);
	transform: translateY(-2px);
}

.mt-person-card:hover .mt-person-card__name a,
.mt-person-card:focus-within .mt-person-card__name a {
	color: var(--mt-person-card-accent);
}

.mt-person-card__desc {
	margin: 0;
	color: var(--mt-person-card-desc-color);
	font-size: 0.95rem;
	line-height: 1.5;
}

/* -- Contact (tel: / mailto:) -- */

.mt-person-card__contact {
	/* The name link is stretched over the whole card (::after, inset: 0), so
	   these must be lifted above it or they are unclickable. */
	position: relative;
	z-index: 1;
	display: grid;
	gap: 0.35rem;
	margin: 0.55rem 0 0;
	padding: 0;
	list-style: none;
}

.mt-person-card__contact-item {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	min-width: 0;
	font-size: 0.9rem;
	line-height: 1.3;
}

.mt-person-card__contact-item .mt-mask-icon {
	flex: 0 0 auto;
	width: 0.95rem;
	height: 0.95rem;
	background-color: var(--mt-person-card-accent);
}

.mt-person-card__contact-item a {
	overflow: hidden;
	color: var(--mt-person-card-desc-color);
	text-decoration: none;
	text-overflow: ellipsis;
	white-space: nowrap;
	transition: color var(--mt-motion-fast, 160ms ease);
}

.mt-person-card__contact-item a:hover,
.mt-person-card__contact-item a:focus-visible {
	color: var(--mt-person-card-accent);
	text-decoration: underline;
}

/* -- Horizontal: photo beside the body instead of above it. Used for the people
      who are shown on their own rather than as one tile among many — the
      načelnik, his zamjenik, the pročelnik — so they don't read as a lone card
      stranded in a grid column. -- */

.mt-person-card--horizontal {
	grid-template-rows: none;
	/* Proportional, not a fixed 13rem: the same card then works both at the
	   lead's full 34rem and in a narrower grid column (the djelatnici), where a
	   fixed photo column would crowd the name and contact lines out. */
	grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
	align-items: stretch;
	max-width: 34rem;
}

.mt-person-card--horizontal .mt-person-card__photo {
	aspect-ratio: 4 / 5;
	height: 100%;
}

.mt-person-card--horizontal .mt-person-card__body {
	align-content: center;
	padding: 1.25rem 1.4rem;
}

.mt-person-card--horizontal .mt-person-card__name {
	font-size: 1.3rem;
}

@media (max-width: 480px) {
	.mt-person-card--horizontal {
		grid-template-rows: auto 1fr;
		grid-template-columns: minmax(0, 1fr);
	}

	.mt-person-card--horizontal .mt-person-card__photo {
		aspect-ratio: 1 / 1;
	}
}


/* --- assets/css/organisms/card-project.css --- */
/**
 * card-project organism — homepage "Projekti" card.
 *
 * Layout: a tall card with media on top + body below (h3, status/category
 * meta, excerpt, more-link). Media has --fallback variant for cards
 * without an image. The full `.mt-home .mt-section--projects`
 * section-context overrides currently live in mt-home.scss and will
 * move into section-projects.css later in this CSS-extraction pass.
 *
 * @package OpcinaTema
 */

.mt-project-card {
	/* -- Component-level tokens -- */
	--mt-project-card-bg: var(--mt-paper, #ffffff);
	--mt-project-card-color: var(--mt-ink, #031927);
	--mt-project-card-color-muted: var(--mt-ink-soft, #384651);
	--mt-project-card-accent: var(--mt-color-primary, #168b3a);
	--mt-project-card-accent-bright: var(--mt-color-primary-bright, #36c957);
	--mt-project-card-border-color: var(--mt-line, #d9dde1);
	--mt-project-card-radius: var(--mt-radius-card);
	--mt-project-card-shadow: 0 0.45rem 1.1rem rgba(3, 25, 39, 0.07);
	--mt-project-card-shadow-hover: var(--mt-shadow-elevated);
	--mt-project-card-padding: 1.55rem;
	--mt-project-card-media-height: clamp(13.5rem, 20vw, 17rem);
	--mt-project-card-media-bg: linear-gradient(135deg, rgba(3, 25, 39, 0.12), transparent), var(--mt-color-accent, #0057a8);
	--mt-project-card-media-fallback-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.14), transparent), var(--mt-teal, #00756f);

	/* -- Structural rules -- */
	display: block;
	height: 100%;
	min-width: 0;
	scroll-snap-align: start;
}

.mt-project-card__inner,
.mt-project-card--empty {
	display: grid;
	grid-template-rows: auto minmax(0, 1fr);
	height: clamp(34rem, 42vw, 37rem);
	background: var(--mt-project-card-bg);
	border: 1px solid var(--mt-project-card-border-color);
	border-radius: var(--mt-project-card-radius);
	box-shadow: var(--mt-project-card-shadow);
	overflow: hidden;
	text-decoration: none;
	transition: box-shadow 180ms ease, transform 180ms ease;
}

.mt-project-card__inner:hover,
.mt-project-card__inner:focus-within {
	box-shadow: var(--mt-project-card-shadow-hover);
	transform: translateY(-2px);
}

/* -- Media -- */

.mt-project-card__media {
	display: block;
	height: var(--mt-project-card-media-height);
	background: var(--mt-project-card-media-bg);
	overflow: hidden;
}

.mt-project-card__media img {
	transition: transform var(--mt-motion-base);
}

/* Photo zoom on hover, matching news/media-card (the fallback logo is excluded
   so it doesn't scale oddly). The media's overflow:hidden clips it. */
.mt-project-card__inner:hover .mt-project-card__media img:not(.mt-project-card__image--fallback),
.mt-project-card__inner:focus-within .mt-project-card__media img:not(.mt-project-card__image--fallback) {
	transform: scale(1.05);
}

.mt-project-card__media--fallback {
	background: var(--mt-project-card-media-fallback-bg);
}

.mt-project-card__image--fallback {
	box-sizing: border-box;
	filter: brightness(0) invert(1);
	object-fit: contain;
	opacity: 0.92;
	padding: 4.25rem;
}

/* -- Body -- */

.mt-project-card__body {
	display: grid;
	grid-template-rows: auto minmax(0, 1fr) auto auto;
	gap: 1rem;
	min-height: 0;
	padding: var(--mt-project-card-padding);
}

.mt-project-card__body h3,
.mt-project-card__body p,
.mt-project-card__body time,
.mt-project-card__body a {
	margin: 0;
}

.mt-project-card__body h3 {
	display: -webkit-box;
	color: var(--mt-project-card-color);
	font-size: clamp(1.65rem, 2.4vw, 2rem);
	font-weight: 800;
	line-height: 1.12;
	overflow: hidden;
	overflow-wrap: anywhere;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.mt-project-card__body h3 a {
	color: inherit;
	text-decoration: none;
}

.mt-project-card__body p {
	color: var(--mt-project-card-color-muted);
	font-size: 1.2rem;
	line-height: 1.5;
}

.mt-project-card__excerpt {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

.mt-project-card__body time {
	color: var(--mt-project-card-color-muted);
	font-size: 1.1rem;
	font-weight: 800;
	line-height: 1.2;
}

/* -- More link + arrow icon -- */

.mt-project-card__more {
	display: inline-flex;
	align-items: center;
	align-self: end;
	gap: 0.45rem;
	color: var(--mt-project-card-accent);
	font-size: 1rem;
	font-weight: 800;
	line-height: 1.2;
	text-decoration-color: var(--mt-project-card-accent-bright);
	text-decoration-thickness: 0.16rem;
	text-underline-offset: 0.14rem;
}

.mt-project-card__arrow {
	width: 1.25rem;
	height: 1.25rem;
	background: var(--mt-project-card-accent);
	-webkit-mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/arrow-right.svg") center / contain no-repeat;
	mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/arrow-right.svg") center / contain no-repeat;
}

/* -- Variant: --horizontal (image-left, body-right) -- */
/* Used in two-col project layouts where a wider image-beside-body tile */
/* reads better than the default media-over-body stack.                 */

.mt-project-card--horizontal {
	--mt-project-card-horizontal-media-width: clamp(11rem, 26vw, 16rem);
	--mt-project-card-horizontal-height: auto;
	--mt-project-card-horizontal-media-height: 100%;
}

.mt-project-card--horizontal .mt-project-card__inner {
	grid-template-rows: none;
	grid-template-columns: var(--mt-project-card-horizontal-media-width) minmax(0, 1fr);
	height: var(--mt-project-card-horizontal-height);
	align-items: stretch;
}

.mt-project-card--horizontal .mt-project-card__media {
	height: var(--mt-project-card-horizontal-media-height);
	min-height: 12rem;
}

.mt-project-card--horizontal .mt-project-card__body {
	gap: var(--mt-space-sm);
}

.mt-project-card--horizontal .mt-project-card__body h3 {
	font-size: var(--mt-font-size-lg);
	font-weight: var(--mt-font-weight-medium);
	-webkit-line-clamp: 3;
}

.mt-project-card--horizontal .mt-project-card__body p {
	font-size: var(--mt-font-size-sm);
	color: var(--mt-color-text-muted);
}

.mt-project-card--horizontal .mt-project-card__more {
	font-size: var(--mt-font-size-sm);
	font-weight: var(--mt-font-weight-medium);
}

@media (max-width: 560px) {
	.mt-project-card--horizontal .mt-project-card__inner {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto minmax(0, 1fr);
	}
	.mt-project-card--horizontal .mt-project-card__media {
		height: var(--mt-project-card-media-height);
		min-height: 0;
	}
}

/* -- Variant: --with-status (status pill overlaid on the media) -- */
/* The status badge renders inside the .mt-project-card__media link    */
/* when the host passes status_overlay: true on card-project.php.       */

.mt-project-card--with-status {
	--mt-project-card-status-bg: rgba(255, 255, 255, 0.95);
	--mt-project-card-status-color: var(--mt-color-text);
	--mt-project-card-status-padding: var(--mt-space-xs) calc(var(--mt-space-xs) + 2px);
	--mt-project-card-status-radius: var(--mt-radius-sm);
	--mt-project-card-status-offset: var(--mt-space-sm);
	--mt-project-card-status-font-size: var(--mt-font-size-2xs);
}

.mt-project-card--with-status .mt-project-card__media {
	position: relative;
}

.mt-project-card--with-status .mt-project-card__status {
	position: absolute;
	top: var(--mt-project-card-status-offset);
	left: var(--mt-project-card-status-offset);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: var(--mt-space-xs);
	padding: var(--mt-project-card-status-padding);
	background: var(--mt-project-card-status-bg);
	color: var(--mt-project-card-status-color);
	border-radius: var(--mt-project-card-status-radius);
	font-family: var(--mt-font-sans);
	font-size: var(--mt-project-card-status-font-size);
	font-weight: var(--mt-font-weight-bold);
	letter-spacing: var(--mt-eyebrow-letter-spacing);
	line-height: 1;
	text-transform: uppercase;
	box-shadow: var(--mt-shadow-sm);
	pointer-events: none;
}

/* Inherited badge inside the overlay shouldn't add its own chrome — */
/* the .mt-project-card__status wrapper provides padding/bg.          */
.mt-project-card--with-status .mt-project-card__status .mt-badge {
	padding: 0;
	background: transparent;
	color: inherit;
	font-size: inherit;
	letter-spacing: inherit;
	line-height: inherit;
	text-transform: inherit;
	box-shadow: none;
}


/* --- assets/css/organisms/card-service-info.css --- */
/**
 * card-service-info organism — homepage "Servisne informacije" hero card.
 *
 * Single variant card (no --featured/--compact split). Renders a
 * terms eyebrow, h3 title with trailing arrow icon, and a meta row
 * with calendar icon + date.
 *
 * @package OpcinaTema
 */

.mt-service-info-card {
	/* -- Component-level tokens -- */
	--mt-service-info-card-bg: var(--mt-paper, #ffffff);
	--mt-service-info-card-color: var(--mt-ink, #031927);
	--mt-service-info-card-color-muted: var(--mt-ink-soft, #384651);
	--mt-service-info-card-accent: var(--mt-color-primary, #168b3a);
	--mt-service-info-card-accent-bright: var(--mt-color-primary-bright, #36c957);
	--mt-service-info-card-border-color: var(--mt-line, #d9dde1);
	--mt-service-info-card-border-hover: rgba(54, 201, 87, 0.55);
	--mt-service-info-card-radius: var(--mt-radius-card);
	--mt-service-info-card-shadow: 0 0.45rem 1.1rem rgba(3, 25, 39, 0.07);
	--mt-service-info-card-shadow-hover: var(--mt-shadow-elevated);
	--mt-service-info-card-padding: 1.45rem;
	--mt-service-info-card-min-height: 11.75rem;

	/* -- Structural rules -- */
	display: flex;
	flex-direction: column;
	min-height: var(--mt-service-info-card-min-height);
	padding: var(--mt-service-info-card-padding);
	background: var(--mt-service-info-card-bg);
	border: 1px solid var(--mt-service-info-card-border-color);
	border-radius: var(--mt-service-info-card-radius);
	box-shadow: var(--mt-service-info-card-shadow);
	overflow-wrap: anywhere;
	transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.mt-service-info-card:hover,
.mt-service-info-card:focus-within {
	border-color: var(--mt-service-info-card-border-hover);
	box-shadow: var(--mt-service-info-card-shadow-hover);
	transform: translateY(-2px);
}

.mt-service-info-card:focus-within {
	outline: 3px solid var(--mt-service-info-card-accent-bright);
	outline-offset: 4px;
}

/* -- Inner text -- */

.mt-service-info-card .mt-card-label,
.mt-service-info-card h3,
.mt-service-info-card p {
	margin: 0;
}

.mt-service-info-card .mt-card-label {
	color: var(--mt-service-info-card-color);
	font-size: 0.76rem;
	font-weight: 700;
	line-height: 1.25;
}

.mt-service-info-card h3 {
	display: -webkit-box;
	overflow: hidden;
	margin-top: 0.6rem;
	font-size: clamp(1.16rem, 1.45vw, 1.32rem);
	font-weight: 700;
	line-height: 1.28;
	overflow-wrap: anywhere;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.mt-service-info-card:hover h3,
.mt-service-info-card:focus-within h3 {
	color: var(--mt-service-info-card-accent);
}

.mt-service-info-card h3::after {
	display: inline-block;
	width: 1.05rem;
	height: 1.05rem;
	margin-left: 0.45rem;
	background: var(--mt-service-info-card-accent);
	content: "";
	-webkit-mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/arrow-right.svg") center / contain no-repeat;
	mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/arrow-right.svg") center / contain no-repeat;
	vertical-align: -0.03em;
}

/* -- Terms eyebrow -- */

.mt-service-info-card__terms {
	display: block;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* -- Link wrapper -- */

.mt-service-info-card__link {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.mt-service-info-card__link:focus-visible {
	outline: 0;
}

/* -- Meta (calendar + date) -- */

.mt-service-info-card__meta {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	margin-top: auto;
	padding-top: 1rem;
	color: var(--mt-service-info-card-color-muted);
	font-size: 0.9rem;
	font-weight: 400;
	line-height: 1.35;
}

.mt-service-info-card__meta .dashicons {
	width: 1rem;
	height: 1rem;
	font-size: 1rem;
	line-height: 1;
}

/* -- Responsive -- */

@media (max-width: 560px) {
	.mt-service-info-card {
		min-height: 0;
		padding: 1.25rem;
	}
}


/* --- assets/css/organisms/contact.css --- */
/**
 * Contact page organism.
 *
 * Covers the Kontakt page layout: page wrapper, layout with related,
 * contact panel + grid + cards (with icon variants), contact social links,
 * empty state, plus the floating contact-tab CTA pinned to the viewport
 * edge on every page.
 *
 * Includes responsive @media adjustments for the layout, grid, and tab.
 *
 * @package OpcinaTema
 */

.mt-contact-page {
  padding-block: clamp(3.25rem, 6vw, 5rem);
}

.mt-contact-page__layout {
  width: 100%;
  max-width: 860px;
  margin-inline: auto;
}

.mt-contact-page__layout--with-related {
  display: grid;
  /* Fill the content frame (L330 / 1260px) so the title lines up with every
     other single page. max-width:none drops the 860px cap the base rule sets for
     the plain (no-sidebar) layout — otherwise the grid stays boxed at 860px and
     the whole page sits inset from the fixed width. */
  max-width: none;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 23.5rem);
  column-gap: clamp(3rem, 4vw, 4rem);
  row-gap: 2rem;
  align-items: start;
}

.mt-contact-page__layout--with-related > .mt-contact-page__article {
  display: contents;
}

.mt-contact-page__layout--with-related > .mt-contact-page__article > .mt-contact-page__header {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}

.mt-contact-page__layout--with-related > .mt-contact-page__article > .mt-contact-page__body {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
}

.mt-contact-page__layout--with-related > .mt-related-posts {
  grid-column: 2;
  grid-row: 2;
  justify-self: stretch;
  width: 100%;
}

.mt-contact-page__body {
  min-width: 0;
}

.mt-contact-page__content {
  margin-bottom: clamp(2rem, 4vw, 3rem);
  font-size: 1.13rem;
  line-height: 1.78;
}

.mt-contact-panel {
  display: grid;
  gap: 1.35rem;
}

.mt-contact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.mt-contact-card {
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr);
  gap: 0.8rem;
  align-items: start;
  min-height: 6rem;
  padding: 0.9rem;
  background: var(--mt-paper);
  border: 1px solid var(--mt-line);
  border-left: 0.3rem solid var(--mt-color-primary);
  border-radius: 8px;
  box-shadow: 0 0.75rem 1.5rem rgba(3, 25, 39, 0.06);
}

.mt-contact-card__icon {
  display: inline-grid;
  width: 2.2rem;
  height: 2.2rem;
  place-items: center;
  background: rgba(54, 201, 87, 0.14);
  border-radius: 8px;
  color: var(--mt-color-primary);
  font-size: 1.25rem;
  line-height: 1;
}

.mt-contact-card__body {
  min-width: 0;
}
.mt-contact-card__body h3,
.mt-contact-card__body p {
  margin: 0;
}
.mt-contact-card__body h3 {
  color: var(--mt-ink);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.25;
  text-transform: uppercase;
}
.mt-contact-card__body a,
.mt-contact-card__body p {
  display: block;
  margin-top: 0.25rem;
  color: var(--mt-ink);
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.mt-contact-card__body a {
  text-decoration-color: var(--mt-color-primary-bright);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.16em;
}
.mt-contact-card__body a:hover, .mt-contact-card__body a:focus-visible {
  color: var(--mt-color-primary);
}

.mt-contact-panel__empty {
  margin: 0;
  padding: 1rem 1.1rem;
  background: var(--mt-paper);
  border: 1px solid var(--mt-line);
  border-radius: 8px;
  color: var(--mt-ink-soft);
  font-size: 1rem;
  line-height: 1.5;
}

.mt-contact-social {
  padding-top: 1.25rem;
  border-top: 1px solid var(--mt-line);
}
.mt-contact-social h3 {
  margin: 0 0 0.85rem;
  color: var(--mt-color-primary);
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.25;
  text-transform: uppercase;
}
.mt-contact-social ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  padding: 0;
  margin: 0;
  list-style: none;
}
.mt-contact-social a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.55rem;
  padding: 0.55rem 0.9rem;
  background: var(--mt-paper);
  border: 1px solid var(--mt-line);
  border-radius: 999px;
  color: var(--mt-ink);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition: border-color 160ms ease, color 160ms ease, transform 160ms ease;
}
.mt-contact-social a:hover, .mt-contact-social a:focus-visible {
  border-color: var(--mt-color-primary);
  color: var(--mt-color-primary);
  transform: translateY(-1px);
}
.mt-contact-social .dashicons {
  width: 1.15rem;
  height: 1.15rem;
  font-size: 1.15rem;
  line-height: 1;
}

@media (max-width: 960px) {
  .mt-contact-page__layout--with-related {
    grid-template-columns: minmax(0, 1fr);
  }
  .mt-contact-page__layout--with-related > .mt-contact-page__article,
  .mt-contact-page__layout--with-related > .mt-contact-page__article > .mt-contact-page__header,
  .mt-contact-page__layout--with-related > .mt-contact-page__article > .mt-contact-page__body,
  .mt-contact-page__layout--with-related > .mt-related-posts {
    grid-column: auto;
    grid-row: auto;
    width: 100%;
  }
}
@media (max-width: 640px) {
  .mt-contact-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .mt-contact-card {
    min-height: 0;
  }
}


/* --- assets/css/organisms/content-lightbox.css --- */
/**
 * Content lightbox organism.
 *
 * Click-to-zoom image overlay used inside editor/post content.
 *
 * The .single-news__content img cursor selector lives in mt-home.css
 * because it cross-cuts with the single-news component.
 *
 * @package OpcinaTema
 */

.mt-content-lightbox-trigger {
  cursor: zoom-in;
}

.mt-content-lightbox-is-open {
  overflow: hidden;
}

.mt-content-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 3vw, 2rem);
  background: rgba(3, 25, 39, 0.92);
  backdrop-filter: blur(10px);
}

.mt-content-lightbox[hidden] {
  display: none;
}

.mt-content-lightbox__image {
  display: block;
  width: auto;
  height: auto;
  max-width: calc(100vw - clamp(2rem, 6vw, 4rem));
  max-height: calc(100vh - clamp(5rem, 12vw, 8rem));
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.35);
}

.mt-content-lightbox__close {
  position: fixed;
  top: clamp(1rem, 2vw, 1.5rem);
  right: clamp(1rem, 2vw, 1.5rem);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.mt-content-lightbox__close:hover,
.mt-content-lightbox__close:focus-visible {
  background: rgba(255, 255, 255, 0.22);
  transform: translateY(-1px);
}


/* --- assets/css/organisms/content.css --- */
/**
 * Content + editor-content organism.
 *
 * Layout and typography for content pages and Gutenberg/classic editor
 * output. Covers:
 * - .mt-content__article + .mt-content__body layout
 * - .mt-content__layout--with-related grid with sidebar
 * - .mt-content__header, .mt-budget-documents
 * - .mt-editor-content link styling for body links, tel:/mailto:, and
 *   inline image links
 *
 * Shared selectors with .single-news__content remain in mt-home.css
 * because they cross-cut between this component and single-news.
 *
 * @package OpcinaTema
 */

.mt-content--with-related {
  width: min(100% - 2rem, 1260px);
}
.mt-content__layout--with-related {
  display: grid;
  /* Fill the content frame (article grows, sidebar keeps its track) so the
     breadcrumb + title + body line up at the same left edge (L330 / full 1260px
     width) as the hub pages — they were inset ~20px by a centred 1220px cap. */
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 23.5rem);
  column-gap: clamp(3rem, 4vw, 4rem);
  row-gap: 2rem;
  align-items: start;
  width: 100%;
}

/* Single-column content pages with no related sidebar (the selectable
   page-default / page-legal templates) keep a centered reading width instead of
   stretching to the full .mt-container width. Every sidebar'd content page gets
   .mt-content__layout--with-related, so this only targets the no-sidebar case. */
.mt-content__layout:not(.mt-content__layout--with-related) {
  width: 100%;
  max-width: 780px;
  margin-inline: auto;
}

/* The people page (Upravni odjel) shows a card grid, not a prose column, so it
   fills the full content frame (title at L330 / 1260px) like every other single
   page — not the narrow centred 780px reading column. */
.mt-people-page .mt-content__layout {
  max-width: none;
  margin-inline: 0;
}

.single-news__layout--with-related > .single-news__content {
  grid-column: 1;
}

.mt-content__layout--with-related > .mt-content__article {
  grid-column: 1;
  display: contents;
}

.mt-content__layout--with-related > .mt-content__article > .mt-content__header {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}

.mt-content__layout--with-related > .mt-content__article > .mt-content__body {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
}

.single-news__layout--with-related > .mt-related-posts {
  grid-column: 2;
  grid-row: 1;
  justify-self: stretch;
  width: 100%;
}

.mt-content__layout--with-related > .mt-related-posts {
  grid-column: 2;
  grid-row: 2;
  justify-self: stretch;
  width: 100%;
}
.mt-content__body > *:first-child,
.mt-editor-content > *:first-child {
  margin-top: 0;
}

.single-news__content > :not(.single-document-files),
.single-news__content > :not(.single-document-files) *,
.mt-content__body,
.mt-content__body * {
  font-family: inherit !important;
  font-size: inherit !important;
}

.single-news__content :where(h2, h3, h4, h5, h6),
.mt-content__body :where(h2, h3, h4, h5, h6) {
  margin: 2rem 0 0.75rem;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: 0;
}

.single-news__content :where(p, ul, ol, blockquote, figure),
.mt-content__body :where(p, ul, ol, blockquote, figure) {
  margin-block: 1.1rem;
}

.mt-editor-content a:not(.mt-file-card):not([href^="tel:"]):not([href^="mailto:"]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 2.55rem;
  padding: 0.54rem 0.95rem;
  margin-block: 0.12rem;
  border: 1px solid rgba(22, 139, 58, 0.42);
  border-radius: 999px;
  background: rgba(54, 201, 87, 0.12);
  box-shadow: none;
  color: var(--mt-color-primary);
  font-weight: 900;
  line-height: 1.2;
  text-decoration: none;
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, color 160ms ease, transform 160ms ease;
}

.mt-editor-content a:not(.mt-file-card):not([href^="tel:"]):not([href^="mailto:"]):hover,
.mt-editor-content a:not(.mt-file-card):not([href^="tel:"]):not([href^="mailto:"]):focus-visible {
  border-color: var(--mt-color-primary);
  background: var(--mt-color-primary);
  box-shadow: none;
  color: var(--mt-paper);
  transform: translateY(-1px);
  outline: none;
}

.mt-editor-content a:not(.mt-file-card):not([href^="tel:"]):not([href^="mailto:"]):focus-visible {
  outline: 3px solid rgba(54, 201, 87, 0.45);
  outline-offset: 3px;
}

.mt-editor-content a:is([href^="tel:"], [href^="mailto:"]) {
  color: var(--mt-color-primary);
  font-weight: 900;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.16em;
}

.mt-editor-content a:is([href^="tel:"], [href^="mailto:"]):hover,
.mt-editor-content a:is([href^="tel:"], [href^="mailto:"]):focus-visible {
  color: var(--mt-color-accent);
  outline: none;
}

.mt-editor-content a:has(img) {
  display: inline;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
  transform: none;
}
.mt-content {
  /* Top matches the hub pages' .mt-page-hero-section so single content pages sit
     the same distance below the header (was a flat 3rem, ~29px less). */
  padding-block: clamp(3.2rem, 5vw, 4.8rem) 3rem;
}

.mt-content__article + .mt-content__article {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--mt-line);
}

.mt-content__header h1,
.mt-content__header h2 {
  margin: 0 0 1rem;
  font-size: 2.4rem;
  line-height: 1.1;
}

.mt-budget-documents {
  margin-top: 2rem;
}

.mt-content__body > .mt-budget-documents:first-child {
  margin-top: 0;
}

/* -- Reading polish ------------------------------------------------------- */
/* Applies to all rendered article/page body content. NB: the normalize rule
   above forces `font-size: inherit !important` on body descendants, so custom
   sizes here must also use !important to win. */

/* Lede: the opening paragraph reads a touch larger as a clear entry point.
   The article body sits in .mt-editor-content (single) / .mt-content__body
   (pages), so target the first paragraph there. */
.mt-editor-content > p:first-of-type,
.mt-content__body > p:first-of-type {
  color: var(--mt-color-text-muted);
  font-size: 1.18em !important;
  line-height: 1.65;
}

/* Blockquote: a branded pull-quote with an accent rule. */
.single-news__content blockquote,
.mt-content__body blockquote {
  padding: 0.35rem 0 0.35rem 1.5rem;
  border-left: 3px solid var(--mt-color-accent);
  color: var(--mt-color-text-muted);
  font-size: 1.15em !important;
  font-style: italic;
  line-height: 1.6;
}

.single-news__content blockquote > :last-child,
.mt-content__body blockquote > :last-child {
  margin-bottom: 0;
}

/* Figures + captions. */
.single-news__content figure img,
.mt-content__body figure img,
.mt-editor-content figure img {
  border-radius: var(--mt-radius-md);
}

.single-news__content figcaption,
.mt-content__body figcaption,
.mt-editor-content figcaption {
  margin-top: 0.55rem;
  color: var(--mt-color-text-soft);
  font-style: italic;
  line-height: 1.4;
  text-align: center;
}

/* CTA button below the page copy (e.g. "Pogledaj dokumente"). */
.mt-content__cta {
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
}


/* --- assets/css/organisms/council-sazivi.css --- */
/*
 * council-sazivi — the saziv switcher in the Općinsko vijeće archive hero.
 *
 * Each saziv page lists only its own mandate's notices, so this row is the only
 * way between them (the menus link to the newest saziv). Shaped like the year
 * pills below it in the filter panel, so the two read as one family of controls.
 */

.mt-council-sazivi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.75rem;
  margin-top: 1.15rem;
}

.mt-council-sazivi__label {
  flex: 0 0 auto;
  color: var(--mt-ink-soft);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.mt-council-sazivi__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mt-council-sazivi__link {
  display: inline-flex;
  align-items: center;
  min-height: 2.35rem;
  padding: 0.48rem 0.82rem;
  background: var(--mt-paper);
  border: 1px solid rgba(16, 42, 56, 0.18);
  border-radius: 999px;
  color: var(--mt-ink);
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.1;
  text-decoration: none;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.mt-council-sazivi__link:hover,
.mt-council-sazivi__link:focus-visible {
  background: var(--mt-color-primary-soft);
  border-color: var(--mt-color-primary-bright);
  color: var(--mt-color-primary);
}

.mt-council-sazivi__link.is-active {
  background: var(--mt-color-primary);
  border-color: var(--mt-color-primary);
  color: var(--mt-paper);
}


/* --- assets/css/organisms/doc-table.css --- */
/**
 * Doc-table organism — bordered table of latest documents.
 *
 * Container owns the surface chrome (white bg, hairline border,
 * rounded corners, overflow clip). Header row uses the same grid
 * template as body rows so columns line up exactly; cell labels
 * render as monospaced caps on a muted alt-surface.
 *
 * @package OpcinaTema
 */

.mt-doc-table {
	--mt-doc-table-bg: var(--mt-color-surface);
	--mt-doc-table-border: 1px solid var(--mt-color-border);
	--mt-doc-table-radius: var(--mt-radius-xl);
	--mt-doc-table-divider: 1px solid var(--mt-color-border-soft);
	--mt-doc-table-grid: 1.75rem minmax(0, 1fr) 10rem 8rem;
	--mt-doc-table-row-gap: var(--mt-space-sm);
	--mt-doc-table-row-padding: calc(var(--mt-space-md) + 0.3rem) var(--mt-space-lg);
	--mt-doc-table-row-hover-bg: var(--mt-color-surface-muted);
	--mt-doc-table-head-bg: transparent;
	--mt-doc-table-head-color: var(--mt-color-text-soft);
	--mt-doc-table-head-padding: var(--mt-space-sm) var(--mt-space-lg);
	--mt-doc-table-icon-color: var(--mt-color-icon);
	--mt-doc-table-icon-size: 1.3rem;
	--mt-doc-table-name-color: var(--mt-color-text);
	--mt-doc-table-name-size: var(--mt-font-size-md);
	--mt-doc-table-name-weight: var(--mt-font-weight-medium);
	--mt-doc-table-type-color: var(--mt-color-text-soft);
	--mt-doc-table-type-size: var(--mt-font-size-sm);
	--mt-doc-table-date-color: var(--mt-color-text-soft);
	--mt-doc-table-date-size: var(--mt-font-size-xs);
	--mt-doc-table-empty-padding: var(--mt-space-xl);

	display: block;
	background: var(--mt-doc-table-bg);
	border: var(--mt-doc-table-border);
	border-radius: var(--mt-doc-table-radius);
	overflow: hidden;
}

/* -- Row layout (shared by head + body rows) -- */

.mt-doc-table__row {
	display: grid;
	grid-template-columns: var(--mt-doc-table-grid);
	align-items: center;
	gap: var(--mt-doc-table-row-gap);
	padding: var(--mt-doc-table-row-padding);
	color: inherit;
	text-decoration: none;
	border-bottom: var(--mt-doc-table-divider);
	transition: background var(--mt-motion-fast);
}

.mt-doc-table__row:last-child {
	border-bottom: 0;
}

/* Anchors only — head row has its own hover-disabled treatment. */
a.mt-doc-table__row:hover,
a.mt-doc-table__row:focus-visible {
	background: var(--mt-doc-table-row-hover-bg);
	outline: none;
}

/* -- Head row -- */

.mt-doc-table__row--head {
	padding: var(--mt-doc-table-head-padding);
	background: var(--mt-doc-table-head-bg);
	border-bottom-color: var(--mt-color-border);
	color: var(--mt-doc-table-head-color);
	font-family: var(--mt-font-mono);
	font-size: var(--mt-font-size-2xs);
	font-weight: var(--mt-font-weight-medium);
	letter-spacing: var(--mt-eyebrow-letter-spacing-wide);
	line-height: 1;
	text-transform: uppercase;
}

.mt-doc-table__head-cell--col4 {
	text-align: right;
}

/* -- Body cells -- */

.mt-doc-table__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--mt-doc-table-icon-size);
	height: var(--mt-doc-table-icon-size);
	color: var(--mt-doc-table-icon-color);
	flex: 0 0 auto;
}

.mt-doc-table__icon svg,
.mt-doc-table__icon > .dashicons {
	width: 100%;
	height: 100%;
	font-size: var(--mt-doc-table-icon-size);
	line-height: 1;
	color: inherit;
}

/* Default document glyph when the caller supplies no icon_html. */
.mt-doc-table__icon--default {
	background: currentColor;
	-webkit-mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/file-text.svg") center / contain no-repeat;
	mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/file-text.svg") center / contain no-repeat;
}

.mt-doc-table__name {
	display: block;
	min-width: 0;
	color: var(--mt-doc-table-name-color);
	font-family: var(--mt-font-sans);
	font-size: var(--mt-doc-table-name-size);
	font-weight: var(--mt-doc-table-name-weight);
	line-height: var(--mt-line-height-tight);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mt-doc-table__type {
	color: var(--mt-doc-table-type-color);
	font-family: var(--mt-font-sans);
	font-size: var(--mt-doc-table-type-size);
	line-height: var(--mt-line-height-tight);
}

.mt-doc-table__date {
	color: var(--mt-doc-table-date-color);
	font-family: var(--mt-font-mono);
	font-size: var(--mt-doc-table-date-size);
	font-weight: var(--mt-font-weight-regular);
	line-height: 1;
	text-align: right;
	white-space: nowrap;
}

/* -- Empty state -- */

.mt-doc-table__empty {
	margin: 0;
	padding: var(--mt-doc-table-empty-padding);
	color: var(--mt-color-text-soft);
	font-family: var(--mt-font-sans);
	font-size: var(--mt-font-size-sm);
	line-height: var(--mt-line-height-base);
	text-align: center;
}

/* -- Responsive -- */

@media (max-width: 720px) {
	.mt-doc-table {
		--mt-doc-table-grid: 1.5rem minmax(0, 1fr) auto;
		--mt-doc-table-row-padding: var(--mt-space-md);
		--mt-doc-table-head-padding: var(--mt-space-sm) var(--mt-space-md);
	}
	.mt-doc-table__type {
		display: none;
	}
	.mt-doc-table__head-cell--col3 {
		display: none;
	}
}

@media (max-width: 480px) {
	.mt-doc-table {
		--mt-doc-table-grid: 1.5rem minmax(0, 1fr);
	}
	.mt-doc-table__date {
		grid-column: 2;
		grid-row: 2;
		text-align: left;
		justify-self: start;
	}
	.mt-doc-table__head-cell--col4 {
		display: none;
	}
}


/* --- assets/css/organisms/document-archive.css --- */
/**
 * Document archive organism.
 *
 * Full document archive page: search bar, year filter slider, grouped
 * file lists, pagination/load-more. Used on the registar-dokumenata
 * archive route.
 *
 * @package OpcinaTema
 */

.mt-document-archive .mt-events-archive__section .mt-container {
  width: min(100% - 2rem, 1260px);
}

/* Filter panel: a single grouped surface. Row 1 is a search toolbar — category
   dropdown + search field on one line, all the same height. Row 2 is the year
   pills, on their own line under a hairline divider. Replaces the old tall,
   centered, stacked layout. The `.mt-search.` prefix outranks generic
   `.mt-search` width/margin. */
.mt-search.mt-document-archive__search {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  width: 100%;
  margin: 0 0 clamp(2rem, 4vw, 3.2rem);
  padding: clamp(0.95rem, 2vw, 1.35rem);
  background: var(--mt-color-surface);
  border: 1px solid var(--mt-color-border);
  border-radius: var(--mt-radius-card);
}

/* The dropdown default ("Sve kategorije") and the input placeholder already name
   each control, so hide the verbose labels visually (kept for screen readers). */
.mt-document-archive__filter .mt-label,
.mt-document-archive__search-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.mt-document-archive__filter {
  flex: 0 1 15rem;
  width: auto;
  margin: 0;
}

/* On mobile the category dropdown wraps onto its own line; stretch it to the
   full width of the panel so it lines up with the search field below it (the
   15rem flex-basis otherwise leaves it short — a plain width:100% is ignored on
   a flex item, so this overrides the basis). */
@media (max-width: 768px) {
  .mt-document-archive__filter {
    flex: 1 1 100%;
  }
}

.mt-document-archive__search-field {
  flex: 1 1 17rem;
  min-width: 0;
}

/* One consistent control height so the row reads as a single toolbar. The
   search-form's input + submit fill it and self-center, so they're not forced
   here (forcing their own height made them overflow the 4px-bordered box and
   knocked the placeholder + icon off-center). */
.mt-document-archive__filter select,
.mt-document-archive__filter .mt-select,
.mt-document-archive__filter .mt-cselect__trigger,
.mt-document-archive__search-field .mt-search-form {
  height: 3rem;
}

/* Taller filter controls on mobile — easier to tap with a finger. */
@media (max-width: 768px) {
  .mt-document-archive__filter select,
  .mt-document-archive__filter .mt-select,
  .mt-document-archive__filter .mt-cselect__trigger,
  .mt-document-archive__search-field .mt-search-form {
    height: 3.5rem;
  }
}

/* Year row: full width on its own line, separated by a hairline; the "Godina"
   label sits inline before the pills. */
.mt-document-archive__years {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  flex: 1 1 100%;
  width: 100%;
  margin: 0.15rem 0 0;
  padding-top: 0.95rem;
  border-top: 1px solid var(--mt-color-border);
  text-align: left;
}

.mt-document-archive__years-label {
  flex: 0 0 auto;
  color: var(--mt-ink-soft);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.mt-document-archive__year-slider {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.45rem;
  flex: 1 1 16rem;
  width: auto;
  min-width: 0;
  margin: 0;
}

.mt-document-archive__year-track {
  min-width: 0;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.mt-document-archive__year-track::-webkit-scrollbar {
  display: none;
}

.mt-document-archive__year-list {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 0.45rem;
  min-width: 100%;
  padding: 0.05rem 0;
}

.mt-document-archive__year-slider.has-overflow .mt-document-archive__year-list {
  justify-content: flex-start;
  width: max-content;
  min-width: max-content;
}

.mt-document-archive__year-control {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  padding: 0;
  background: var(--mt-paper);
  border: 1px solid rgba(16, 42, 56, 0.18);
  border-radius: 999px;
  color: var(--mt-ink);
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, opacity 160ms ease;
}
.mt-document-archive__year-control:hover, .mt-document-archive__year-control:focus-visible {
  background: rgba(54, 201, 87, 0.1);
  border-color: var(--mt-color-primary-bright);
  color: var(--mt-color-primary);
  outline: none;
}
.mt-document-archive__year-control:disabled {
  opacity: 0.35;
  cursor: default;
}
.mt-document-archive__year-control .dashicons {
  width: 1rem;
  height: 1rem;
  font-size: 1rem;
  line-height: 1;
}

.mt-document-archive__year-slider.has-overflow .mt-document-archive__year-control {
  display: inline-flex;
}

.mt-document-archive__year {
  flex: 0 0 auto;
  min-height: 2.35rem;
  padding: 0.48rem 0.82rem;
  background: var(--mt-paper);
  border: 1px solid rgba(16, 42, 56, 0.18);
  border-radius: 999px;
  color: var(--mt-ink);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.1;
  scroll-snap-align: start;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.mt-document-archive__year:hover, .mt-document-archive__year:focus-visible {
  background: rgba(54, 201, 87, 0.1);
  border-color: var(--mt-color-primary-bright);
  color: var(--mt-color-primary);
  outline: none;
}
.mt-document-archive__year.is-active {
  background: var(--mt-color-primary);
  border-color: var(--mt-color-primary);
  color: var(--mt-paper);
}

/* Filter-update announcement kept for screen readers (aria-live) but hidden
   visually — the on-screen "Popis dokumenata je ažuriran." message was noise.
   The "Kategorija: …" search summary was removed with it. */
.mt-document-archive__status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.mt-document-archive__results {
  transition: opacity 160ms ease;
}

.mt-document-archive .is-loading .mt-document-archive__results {
  opacity: 0.56;
  pointer-events: none;
}

.mt-document-archive__groups {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
}

/* Lightened group: just a labelled heading over a card grid — the cards carry
   the visual chrome now, like every other archive. */
.mt-document-archive__group {
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.mt-document-archive__group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.15rem;
  padding: 0 0 0.85rem;
  background: transparent;
  border-bottom: 1px solid rgba(217, 221, 225, 0.95);
}

/* Document cards reuse .mt-events-grid (1-col by default); give them the
   standard multi-up archive grid. The compound selector outranks the base
   `.mt-events-grid` rule that loads later in the bundle. */
.mt-events-grid.mt-document-archive__grid {
  /* auto-fill (not auto-fit): a single result keeps a normal card width instead
     of stretching to fill the whole row. */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
}
.mt-document-archive__group-head h2,
.mt-document-archive__group-head p {
  margin: 0;
}
.mt-document-archive__group-head h2 {
  color: var(--mt-ink);
  font-size: clamp(1.125rem, 1.5vw, 1.25rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
}
.mt-document-archive__group-head p {
  flex: 0 0 auto;
  padding: 0.34rem 0.62rem;
  background: rgba(22, 139, 58, 0.1);
  border-radius: 999px;
  color: var(--mt-color-primary);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.mt-document-archive__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 0;
  margin: 0;
  list-style: none;
}
.mt-document-archive__list li {
  border-bottom: 1px solid rgba(217, 221, 225, 0.78);
  border-top: 1px solid rgba(217, 221, 225, 0.78);
}
.mt-document-archive__list li:nth-child(1),
.mt-document-archive__list li:nth-child(2) {
  border-top: 0;
}
.mt-document-archive__list li:nth-child(even) {
  border-left: 1px solid rgba(217, 221, 225, 0.78);
}
.mt-document-archive__list a {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  gap: 0.7rem;
  align-items: start;
  padding: 0.82rem 1rem;
  color: var(--mt-ink);
  text-decoration: none;
  transition: background 160ms ease, color 160ms ease;
}
.mt-document-archive__list a:hover,
.mt-document-archive__list a:focus-visible {
  background: rgba(54, 201, 87, 0.1);
  color: var(--mt-color-primary);
  outline: none;
}

@media (max-width: 720px) {
  .mt-document-archive__list {
    grid-template-columns: 1fr;
  }
  .mt-document-archive__list li:nth-child(2) {
    border-top: 1px solid rgba(217, 221, 225, 0.78);
  }
  .mt-document-archive__list li:nth-child(even) {
    border-left: 0;
  }
}
.mt-document-archive__file {
  display: inline-block;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.12rem;
  background: currentColor;
  -webkit-mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/file-text.svg") center/contain no-repeat;
  mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/file-text.svg") center/contain no-repeat;
}

.mt-document-archive__item-content,
.mt-document-archive__item-title {
  display: block;
  min-width: 0;
}

.mt-document-archive__item-title {
  font-size: 0.96rem;
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.mt-document-archive__item-excerpt {
  display: block;
  margin-top: 0.3rem;
  color: var(--mt-ink);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.45;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.mt-document-archive__item-content time {
  display: block;
  margin-top: 0.2rem;
  color: var(--mt-ink-soft);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.35;
}

.mt-document-archive__pagination {
  display: grid;
  justify-items: center;
  gap: 0.55rem;
  margin-top: 1.25rem;
}

.mt-document-archive__load-more {
  min-height: 44px;
  padding: 0.55rem 1.35rem;
  background: var(--mt-color-primary);
  border: 1px solid var(--mt-color-primary);
  border-radius: 999px;
  color: var(--mt-paper);
  cursor: pointer;
  font: inherit;
  font-size: 0.96rem;
  font-weight: 700;
  line-height: 1.2;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.mt-document-archive__load-more:hover,
.mt-document-archive__load-more:focus-visible {
  background: var(--mt-color-primary-bright);
  border-color: var(--mt-color-primary-bright);
  outline: none;
  transform: translateY(-1px);
}

.mt-document-archive__load-more:disabled,
.mt-document-archive.is-loading-more .mt-document-archive__load-more {
  cursor: progress;
  opacity: 0.68;
  transform: none;
}

.mt-document-archive__pagination-summary {
  margin: 0;
  color: var(--mt-ink-soft);
  font-size: 0.86rem;
  font-weight: 500;
  line-height: 1.35;
  text-align: center;
}

/* Scope toggle (e.g. upcoming/past events) — pill tabs above the filter panel. */
.mt-archive-filter__scope {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.mt-archive-filter__scope-link {
  display: inline-flex;
  align-items: center;
  padding: 0.55rem 1.15rem;
  border: 1px solid var(--mt-color-border);
  border-radius: 999px;
  background: var(--mt-color-surface);
  color: var(--mt-color-text);
  font: inherit;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.mt-archive-filter__scope-link:hover,
.mt-archive-filter__scope-link:focus-visible {
  border-color: var(--mt-color-primary);
  color: var(--mt-color-primary);
}

.mt-archive-filter__scope-link.is-active {
  background: var(--mt-color-primary);
  border-color: var(--mt-color-primary);
  color: #fff;
}


/* --- assets/css/organisms/document-register.css --- */
/**
 * Document register organism.
 *
 * Compact list of latest documents grouped by category. Used in the
 * homepage and other landing pages to surface recent official documents.
 *
 * @package OpcinaTema
 */

.mt-document-register {
  align-self: start;
  justify-self: center;
  display: grid;
  gap: 1.45rem;
  width: min(100%, 24rem);
  max-width: 24rem;
  padding: clamp(1.35rem, 2vw, 1.85rem);
  background: var(--mt-paper);
  border: 1px solid rgba(217, 221, 225, 0.95);
  border-top: 0.35rem solid var(--mt-color-primary);
  border-radius: 8px;
  box-shadow: 0 1rem 2.35rem rgba(3, 25, 39, 0.1);
}

.mt-document-register__head {
  display: grid;
  gap: 0.55rem;
}
.mt-document-register__head .mt-card-label {
  margin-bottom: 0;
  color: var(--mt-color-primary);
}
.mt-document-register__head h2,
.mt-document-register__head p {
  margin: 0;
}
.mt-document-register__head h2 {
  color: var(--mt-ink);
  font-size: clamp(1.75rem, 2.8vw, 2.35rem);
  font-weight: 800;
  line-height: 1.08;
}
.mt-document-register__head p:not(.mt-card-label) {
  color: var(--mt-ink-soft);
  font-size: 1.02rem;
  line-height: 1.55;
}

.mt-document-register__top {
  display: block;
  margin-bottom: 0.15rem;
}

.mt-document-register__icon {
  display: grid;
  width: 3.7rem;
  height: 3.7rem;
  place-items: center;
  background: rgba(15, 143, 64, 0.11);
  border-radius: 8px;
}
.mt-document-register__icon::before {
  width: 1.85rem;
  height: 1.85rem;
  background: var(--mt-color-primary);
  content: "";
  -webkit-mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/file-text.svg") center/contain no-repeat;
  mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/file-text.svg") center/contain no-repeat;
}

.mt-document-register__groups {
  display: grid;
  gap: 0.85rem;
}

.mt-document-register__group {
  height: 100%;
  background: #fff;
  border: 1px solid var(--mt-line);
  border-radius: 8px;
  overflow: hidden;
  transition: background 160ms ease, border-color 160ms ease;
}
.mt-document-register__group summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: start;
  column-gap: 0.8rem;
  row-gap: 0.7rem;
  min-height: 5.75rem;
  padding: 1rem 1.05rem;
  color: var(--mt-ink);
  cursor: pointer;
  font-weight: 800;
  list-style: none;
}
.mt-document-register__group summary::-webkit-details-marker {
  display: none;
}
.mt-document-register__group summary:focus {
  outline: none;
}
.mt-document-register__group summary:focus-visible {
  outline: 2px solid rgba(54, 201, 87, 0.52);
  outline-offset: -2px;
}
.mt-document-register__group summary::after {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  width: 0.58rem;
  height: 0.58rem;
  margin-top: 0.25rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  content: "";
  transform: rotate(45deg);
  transition: transform 180ms ease;
}
.mt-document-register__group:not([open]):hover, .mt-document-register__group:not([open]):focus-within {
  background: #fbfffc;
  border-color: rgba(54, 201, 87, 0.42);
}
.mt-document-register__group[open] {
  background: #f7fcf9;
  border-color: rgba(54, 201, 87, 0.46);
}
.mt-document-register__group[open] summary::after {
  transform: rotate(225deg);
}
.mt-document-register__group ul {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0.35rem 1.05rem 1rem;
  list-style: none;
}
.mt-document-register__group li {
  padding-top: 0.75rem;
  border-top: 1px solid rgba(217, 221, 225, 0.78);
}
.mt-document-register__group li:first-child {
  padding-top: 0;
  border-top: 0;
}
.mt-document-register__group li a {
  display: grid;
  grid-template-columns: 1rem minmax(0, 1fr);
  align-items: start;
  gap: 0.62rem;
  color: var(--mt-ink);
  font-size: 0.92rem;
  font-weight: 400;
  line-height: 1.35;
  text-decoration: none;
}
.mt-document-register__group li a span:last-child {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.mt-document-register__group li a:hover,
.mt-document-register__group li a:focus-visible {
  color: var(--mt-color-primary);
}

.mt-document-register__dropdown {
  display: grid;
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #f7fcf9 0, #f7fcf9 0.6rem, #fff 3.6rem, #fff 100%);
}

.mt-document-register__dropdown > * {
  position: relative;
  z-index: 1;
}

.mt-document-register__summary-main {
  display: block;
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  line-height: 1.18;
  text-align: left;
}
.mt-document-register__summary-main span {
  display: block;
  min-width: 0;
  overflow-wrap: break-word;
}

.mt-document-register__folder,
.mt-document-register__file {
  display: inline-block;
  background: var(--mt-color-primary);
  flex: 0 0 auto;
}

.mt-document-register__folder {
  width: 1.2rem;
  height: 1.2rem;
  -webkit-mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/folder-open.svg") center/contain no-repeat;
  mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/folder-open.svg") center/contain no-repeat;
}

.mt-document-register__file {
  width: 1rem;
  height: 1rem;
  margin-top: 0.18rem;
  -webkit-mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/file-text.svg") center/contain no-repeat;
  mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/file-text.svg") center/contain no-repeat;
}

.mt-document-register__count {
  display: inline-flex;
  grid-column: 1/-1;
  grid-row: 2;
  align-items: center;
  justify-self: start;
  gap: 0.48rem;
  color: var(--mt-color-primary);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
}

.mt-document-register__more {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 1.05rem 1.05rem;
  color: var(--mt-color-primary);
  font-size: 0.92rem;
  font-weight: 400;
  text-decoration: none;
}
.mt-document-register__more span {
  width: 0.9rem;
  height: 0.9rem;
  background: currentColor;
  -webkit-mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/more.svg") center/contain no-repeat;
  mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/more.svg") center/contain no-repeat;
}

.mt-document-register__archive-link {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 0.55rem;
  margin-top: 0.45rem;
  padding: 0.68rem 0.9rem;
  background: var(--mt-color-primary);
  border: 1px solid var(--mt-color-primary);
  border-radius: 7px;
  color: var(--mt-paper);
  font-size: 0.96rem;
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
  transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
}
.mt-document-register__archive-link span {
  width: 0.95rem;
  height: 0.95rem;
  background: currentColor;
  -webkit-mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/arrow-right.svg") center/contain no-repeat;
  mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/arrow-right.svg") center/contain no-repeat;
}
.mt-document-register__archive-link:hover, .mt-document-register__archive-link:focus-visible {
  background: #0f6f2f;
  border-color: #0f6f2f;
  transform: translateX(0.12rem);
}

.mt-document-register__empty {
  margin: 0;
  color: var(--mt-muted);
  font-weight: 700;
  line-height: 1.45;
}

.mt-document-register__latest {
  display: grid;
  gap: 0.85rem;
  padding-top: 1.05rem;
  border-top: 1px solid rgba(217, 221, 225, 0.88);
}

.mt-document-register__latest-head {
  display: grid;
  gap: 0.28rem;
}
.mt-document-register__latest-head h3,
.mt-document-register__latest-head p {
  margin: 0;
}
.mt-document-register__latest-head h3 {
  color: var(--mt-ink);
  font-size: clamp(1.02rem, 1.1vw, 1.14rem);
  font-weight: 800;
  line-height: 1.25;
}
.mt-document-register__latest-head p {
  color: var(--mt-ink-soft);
  font-size: 0.88rem;
  line-height: 1.4;
}

.mt-document-register__latest-action {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  color: var(--mt-color-primary);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: color 160ms ease, transform 160ms ease;
}
.mt-document-register__latest-action span {
  width: 0.78rem;
  height: 0.78rem;
  background: currentColor;
  -webkit-mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/arrow-right.svg") center/contain no-repeat;
  mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/arrow-right.svg") center/contain no-repeat;
}
.mt-document-register__latest-action:hover, .mt-document-register__latest-action:focus-visible {
  color: #0f6f2f;
  transform: translateX(0.08rem);
}

.mt-document-register__latest-grid {
  display: grid;
  gap: 0.62rem;
}

.mt-document-register__latest-item {
  display: grid;
  grid-template-columns: 1.08rem minmax(0, 1fr) auto;
  align-items: start;
  column-gap: 0.68rem;
  row-gap: 0.3rem;
  padding: 0.68rem 0.75rem;
  background: #fff;
  border: 1px solid var(--mt-line);
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.mt-document-register__latest-item:hover, .mt-document-register__latest-item:focus-visible {
  border-color: rgba(54, 201, 87, 0.58);
  box-shadow: 0 0.45rem 1rem rgba(3, 25, 39, 0.08);
  transform: translateY(-1px);
}
.mt-document-register__latest-item:hover .mt-document-register__latest-title, .mt-document-register__latest-item:focus-visible .mt-document-register__latest-title {
  color: var(--mt-color-primary);
}

.mt-document-register__latest-icon {
  width: 1.05rem;
  height: 1.05rem;
  margin-top: 0.16rem;
  background: var(--mt-color-primary);
  -webkit-mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/file-text.svg") center/contain no-repeat;
  mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/file-text.svg") center/contain no-repeat;
}

.mt-document-register__latest-content {
  display: grid;
  min-width: 0;
  gap: 0.24rem;
}

.mt-document-register__latest-title {
  display: -webkit-box;
  overflow: hidden;
  color: var(--mt-ink);
  font-size: 0.91rem;
  font-weight: 800;
  line-height: 1.27;
  text-decoration: none;
  text-transform: none;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow-wrap: break-word;
  transition: color 160ms ease;
}

.mt-document-register__latest-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  margin: 0;
  color: var(--mt-ink-soft);
  font-size: 0.76rem;
  line-height: 1.3;
}

.mt-document-register__latest-category {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 0.12rem 0.4rem;
  background: rgba(54, 201, 87, 0.12);
  border-radius: 999px;
  color: var(--mt-color-primary);
  font-weight: 700;
}

.mt-document-register__latest-action {
  justify-self: end;
  margin-top: 0.12rem;
  font-size: 0.82rem;
}

@media (max-width: 640px) {
  .mt-document-register__latest-item {
    grid-template-columns: 1.08rem minmax(0, 1fr);
  }
  .mt-document-register__latest-action {
    grid-column: 2;
    justify-self: start;
    margin-top: 0.05rem;
  }
}


/* --- assets/css/organisms/events-archive.css --- */
/**
 * Events archive organism.
 *
 * Container, grid, action bar, past-events link, and empty-state for the
 * Dogadanja (events) archive page. Also covers the shared section padding
 * with projects-archive and the projects-archive footer pagination block.
 *
 * @package OpcinaTema
 */

.mt-events-archive__section,
.mt-projects-archive__section {
  padding-block: 1rem clamp(4.5rem, 7vw, 6.8rem);
}

.mt-events-archive {
  background: var(--mt-page-background);
}

.mt-events-archive .mt-page-hero-section,
.mt-events-archive__section {
  background: transparent;
}

.mt-events-archive {
  min-height: 100vh;
}

.mt-events-archive__section .mt-container,
.mt-projects-archive__section .mt-container {
  width: min(100% - 2rem, 1260px);
}

/* Every archive card is the same height regardless of content: the grid rows are
   equalised and the card fills its row, so short cards match the tallest. The
   title (3 lines) and excerpt (3 lines) are clamped with an ellipsis in
   card-event.css, so no single card can blow the height out. */
.mt-events-grid,
.mt-events-archive__grid,
.mt-projects-archive__grid {
  grid-auto-rows: 1fr;
}

/* Align the hero (title + intro) with the 1260px content column below it, so
   the title's left edge lines up with the cards. The content container above is
   capped at 1260px while the hero kept the full-width default, leaving the
   centered title floating wider than the grid. Match the hero container to the
   same column and left-align it — the static page-type heroes (.mt-opcina-page
   etc. in pages.css) already do this; archives never got the same treatment. */
.mt-events-archive .mt-page-hero-section .mt-container,
.mt-projects-archive .mt-page-hero-section .mt-container,
.mt-document-archive .mt-page-hero-section .mt-container {
  width: min(100% - 2rem, 1260px);
}

.mt-events-archive .mt-page-hero,
.mt-projects-archive .mt-page-hero,
.mt-document-archive .mt-page-hero {
  justify-items: start;
  text-align: left;
}

.mt-events-archive .mt-page-hero .mt-breadcrumbs,
.mt-projects-archive .mt-page-hero .mt-breadcrumbs,
.mt-document-archive .mt-page-hero .mt-breadcrumbs {
  justify-items: start;
}

.mt-events-archive .mt-page-hero .mt-breadcrumbs ol,
.mt-projects-archive .mt-page-hero .mt-breadcrumbs ol,
.mt-document-archive .mt-page-hero .mt-breadcrumbs ol {
  justify-content: flex-start;
}

.mt-search-results-page__intro {
  display: grid;
  justify-items: center;
  gap: 0.55rem;
}

.mt-search-results-page__intro p {
  margin: 0;
}

.mt-search-results-page__count {
  color: var(--mt-ink-soft);
  font-size: 1rem;
  font-weight: 700;
}

.mt-search-results-page__form {
  margin-top: 0.85rem;
}

.mt-projects-archive__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin-top: 3.2rem;
}
.mt-projects-archive__footer .mt-pagination,
.mt-projects-archive__footer .mt-news-more {
  margin-top: 0;
}

.mt-projects-archive__other-link {
  margin-left: auto;
}

.mt-elections-page .mt-events-archive__section .mt-container,
.mt-tenders-page .mt-events-archive__section .mt-container {
  width: min(100% - 2rem, 1920px);
}

.mt-tenders-archive-page .mt-events-archive__section .mt-container {
  width: min(100% - 2rem, 1920px);
}

.mt-elections-layout,
.mt-tenders-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1020px) minmax(0, 1fr);
  column-gap: clamp(3rem, 3vw, 3.5rem);
  row-gap: 2rem;
  align-items: start;
}

.mt-tenders-archive-page .mt-tenders-layout,
.mt-association-tenders-page .mt-tenders-layout,
.mt-employment-tenders-page .mt-tenders-layout,
.mt-other-tenders-page .mt-tenders-layout,
.mt-consultations-page .mt-tenders-layout,
.mt-public-calls-page .mt-tenders-layout,
.mt-elections-page .mt-elections-layout {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1260px) minmax(18rem, 23.5rem);
}

.mt-elections-layout::before,
.mt-tenders-layout::before {
  content: "";
  grid-column: 1;
  grid-row: 1;
}

.mt-elections-main,
.mt-tenders-main {
  grid-column: 2;
  min-width: 0;
}

.mt-elections-documents,
.mt-tenders-documents {
  grid-column: 3;
  justify-self: center;
  width: min(100%, 23.5rem);
}

/* Natječaji + tender subpages no longer render a related sidebar (removed in
   section-tenders-archive.php). Collapse their layout to one full-width column
   and use the standard 1260px content column, so the cards line up with the
   hero title like every other archive. Elections keep their own sidebar. */
.mt-tenders-page .mt-events-archive__section .mt-container,
.mt-tenders-archive-page .mt-events-archive__section .mt-container {
  width: min(100% - 2rem, 1260px);
}

.mt-tenders-layout {
  display: block;
}

.mt-tenders-layout::before {
  display: none;
}

/* Generic archive-with-sidebar layout — the section-post-list `related` option
   (Servisne informacije / Službene obavijesti / Projekti). A 2-col grid: the
   card list + a "Povezani sadržaj" sidebar, collapsing to one column on narrow
   viewports. Self-contained so it doesn't depend on the tender page classes. */
/* Archives with the related sidebar use the same wide container as the
   tenders/natječaji archive, so the 3-up cards get natječaji's proportions
   (816px main / 260px cards) instead of the standard narrower container. */
.mt-container:has(> .mt-archive-layout) {
  width: min(100% - 2rem, 1920px);
}

.mt-archive-layout {
  display: grid;
  /* Cap the content column at 1260px and right-align it (empty gutter on the
     left) so on wide screens it never grows wider than the natječaji archive,
     which uses the same 1260px cap. */
  grid-template-columns: minmax(0, 1260px) minmax(18rem, 23.5rem);
  column-gap: clamp(3rem, 5vw, 4rem);
  row-gap: 2rem;
  align-items: start;
  justify-content: end;
}

.mt-archive-layout__main {
  grid-column: 1;
  min-width: 0;
}

.mt-archive-layout__aside {
  grid-column: 2;
  min-width: 0;
  align-self: start;
}

/* Card grid in the main column: 4 per row on wide screens, dropping to 3 below
   ~1500px (where 4 next to the sidebar get cramped), then 2 / 1. Wins over the
   per-archive grid classes (they don't scope under __main). */
.mt-archive-layout__main .mt-events-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1500px) {
  .mt-archive-layout__main .mt-events-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .mt-archive-layout {
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
  }

  /* Collapse the main wrapper so its children (the card grid + the pagination /
     footer) and the related aside become siblings in the single column, then
     order them: cards → related → pagination. */
  .mt-archive-layout__main {
    display: contents;
  }

  .mt-archive-layout__main > * {
    grid-column: 1;
    order: 1;
    min-width: 0;
  }

  .mt-archive-layout__aside {
    grid-column: 1;
    order: 2;
  }

  /* Anything in the main that isn't the card grid / empty state (i.e. the
     pagination or footer) drops below the related sidebar. */
  .mt-archive-layout__main > :not(.mt-events-grid):not(.mt-empty-state) {
    order: 3;
  }
}

@media (max-width: 700px) {
  .mt-archive-layout__main .mt-events-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 460px) {
  .mt-archive-layout__main .mt-events-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.mt-events-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.1rem;
}

.mt-elections-main .mt-events-grid,
.mt-tenders-main .mt-events-grid {
  grid-template-columns: minmax(0, 1fr);
}

.mt-events-archive__actions {
  display: flex;
  justify-content: center;
  margin-top: 2.4rem;
}

.mt-events-archive__past-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--mt-color-primary);
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  transition: color 180ms ease, transform 180ms ease;
}

.mt-events-archive__past-link:hover,
.mt-events-archive__past-link:focus-visible {
  color: var(--mt-color-primary-bright);
  transform: translateX(0.15rem);
}

.mt-events-archive__past-link span {
  width: 1.05rem;
  height: 1.05rem;
  background: currentColor;
  -webkit-mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/arrow-right.svg") center/contain no-repeat;
  mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/arrow-right.svg") center/contain no-repeat;
}



/* --- assets/css/organisms/gallery-lightbox.css --- */
/**
 * Gallery lightbox organism.
 *
 * Full-screen image overlay for the photo gallery — the homepage strip and the
 * /galerija/ archive. Driven by assets/js/mt-gallery.js. Mirrors the content
 * lightbox but adds prev/next navigation across the gallery's images. Glyphs are
 * drawn in CSS so the buttons need no inline SVG.
 *
 * @package OpcinaTema
 */

.mt-gallery-lightbox-is-open {
  overflow: hidden;
}

.mt-gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 3vw, 2rem);
  background: rgba(3, 25, 39, 0.92);
  backdrop-filter: blur(10px);
}

.mt-gallery-lightbox[hidden] {
  display: none;
}

.mt-gallery-lightbox__figure {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.mt-gallery-lightbox__image {
  display: block;
  width: auto;
  height: auto;
  max-width: calc(100vw - clamp(2rem, 12vw, 9rem));
  max-height: calc(100vh - clamp(5rem, 12vw, 8rem));
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.35);
}

.mt-gallery-lightbox__close {
  position: fixed;
  top: clamp(1rem, 2vw, 1.5rem);
  right: clamp(1rem, 2vw, 1.5rem);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.mt-gallery-lightbox__close::before {
  content: "\00d7";
  font-size: 1.6rem;
  font-weight: 800;
}

.mt-gallery-lightbox__close:hover,
.mt-gallery-lightbox__close:focus-visible {
  background: rgba(255, 255, 255, 0.22);
  transform: translateY(-1px);
}

.mt-gallery-lightbox__nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s ease;
}

.mt-gallery-lightbox__nav[hidden] {
  display: none;
}

.mt-gallery-lightbox__nav:hover,
.mt-gallery-lightbox__nav:focus-visible {
  background: rgba(255, 255, 255, 0.22);
}

.mt-gallery-lightbox__nav--prev {
  left: clamp(0.5rem, 2vw, 1.5rem);
}

.mt-gallery-lightbox__nav--next {
  right: clamp(0.5rem, 2vw, 1.5rem);
}

/* Chevron glyph rendered from two borders. */
.mt-gallery-lightbox__nav::before {
  content: "";
  width: 0.7rem;
  height: 0.7rem;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
}

.mt-gallery-lightbox__nav--prev::before {
  transform: rotate(-135deg);
  margin-left: 0.25rem;
}

.mt-gallery-lightbox__nav--next::before {
  transform: rotate(45deg);
  margin-right: 0.25rem;
}

.mt-gallery-lightbox__close:focus-visible,
.mt-gallery-lightbox__nav:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}


/* --- assets/css/organisms/hero.css --- */
/**
 * Hero organism.
 *
 * Light container for split-layout heros. Section-specific compositions
 * (section-home-hero, section-service-info-hero) handle their own 2-col
 * grid via their own selectors; this file owns the shared .mt-hero base,
 * the content typography (eyebrow / h1 with italic em accent / lede),
 * and the legacy .mt-hero-event-card overlay.
 *
 * All visual values flow through component tokens with fallbacks to
 * global tokens.
 *
 * @package OpcinaTema
 */

.mt-hero {
	--mt-hero-padding-block: var(--mt-space-3xl);
	--mt-hero-padding-inline: var(--mt-section-gutter);
	--mt-hero-bg: var(--mt-color-surface);
	--mt-hero-color: var(--mt-color-text);
	position: relative;
	padding: var(--mt-hero-padding-block) var(--mt-hero-padding-inline);
	background: var(--mt-hero-bg);
	color: var(--mt-hero-color);
	isolation: isolate;
	overflow: hidden;
}

/* The panel is the text-side wrapper. Sections position it via their */
/* own layout (e.g. as one column in a 2-col grid).                   */
.mt-hero__panel {
	position: relative;
	display: block;
	min-width: 0;
}

.mt-hero__content {
	display: flex;
	flex-direction: column;
	gap: var(--mt-space-md);
	min-width: 0;
}

.mt-hero__content h1 {
	--mt-hero-h1-size: var(--mt-heading-display-1);
	--mt-hero-h1-color: var(--mt-color-text);
	--mt-hero-h1-accent-color: var(--mt-color-primary);
	margin: 0;
	color: var(--mt-hero-h1-color);
	font-family: var(--mt-font-serif);
	font-size: var(--mt-hero-h1-size);
	font-weight: var(--mt-font-weight-medium);
	line-height: var(--mt-line-height-display);
	letter-spacing: var(--mt-heading-letter-spacing);
}

.mt-hero__content h1 em {
	color: var(--mt-hero-h1-accent-color);
	font-style: italic;
	font-weight: var(--mt-font-weight-regular);
}

.mt-hero__content p {
	margin: 0;
	max-width: 32rem;
	color: var(--mt-color-text-muted);
	font-size: var(--mt-font-size-intro);
	line-height: var(--mt-line-height-base);
}

/* -- Legacy event-card overlay -- */
/* Retained for sections that still render this older composition.   */
/* The redesigned overlay is a card-event--pill variant (Phase 3.7). */

.mt-hero-event-card {
	--mt-hero-event-card-bg: var(--mt-color-surface);
	--mt-hero-event-card-color: var(--mt-color-text);
	--mt-hero-event-card-border: 1px solid var(--mt-color-border);
	--mt-hero-event-card-radius: var(--mt-radius-card);
	--mt-hero-event-card-shadow: var(--mt-shadow-overlay);
	position: absolute;
	top: 50%;
	right: clamp(1.5rem, 4vw, 4.5rem);
	z-index: 4;
	width: min(26rem, 30vw);
	padding: var(--mt-space-md);
	background: var(--mt-hero-event-card-bg);
	color: var(--mt-hero-event-card-color);
	border: var(--mt-hero-event-card-border);
	border-radius: var(--mt-hero-event-card-radius);
	box-shadow: var(--mt-hero-event-card-shadow);
	transform: translateY(-50%);
}

.mt-hero-event-card__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--mt-space-xs);
	color: var(--mt-color-text-soft);
	font-family: var(--mt-font-mono);
	font-size: var(--mt-font-size-2xs);
	font-weight: var(--mt-font-weight-medium);
	letter-spacing: var(--mt-eyebrow-letter-spacing);
	line-height: 1.2;
	text-transform: uppercase;
}

.mt-hero-event-card h2 {
	margin: var(--mt-space-sm) 0 var(--mt-space-md);
	color: var(--mt-color-text);
	font-family: var(--mt-font-serif);
	font-size: var(--mt-font-size-xl);
	font-weight: var(--mt-font-weight-medium);
	line-height: var(--mt-line-height-tight);
}

.mt-hero-event-card__meta {
	display: grid;
	grid-template-columns: 3.5rem minmax(0, 1fr);
	gap: var(--mt-space-md);
	align-items: center;
	padding-top: var(--mt-space-md);
	border-top: 1px solid var(--mt-color-border);
}

.mt-hero-event-card__date {
	display: grid;
	justify-items: center;
	min-height: 3.5rem;
	padding: var(--mt-space-xs) var(--mt-space-sm);
	background: var(--mt-color-primary-100);
	border-radius: var(--mt-radius-md);
	color: var(--mt-color-primary);
	font-family: var(--mt-font-mono);
	font-size: var(--mt-font-size-2xs);
	font-weight: var(--mt-font-weight-medium);
	line-height: 1;
	text-transform: uppercase;
}

.mt-hero-event-card__date span {
	font-family: var(--mt-font-serif);
	font-size: var(--mt-font-size-2xl);
	font-weight: var(--mt-font-weight-medium);
	line-height: 1;
}

.mt-hero-event-card__meta p,
.mt-hero-event-card__excerpt {
	margin: 0;
	color: var(--mt-color-text-muted);
	font-size: var(--mt-font-size-sm);
	font-weight: var(--mt-font-weight-regular);
	line-height: var(--mt-line-height-base);
}

.mt-hero-event-card__more {
	display: inline-flex;
	align-items: center;
	gap: var(--mt-space-xs);
	margin-top: var(--mt-space-md);
	color: var(--mt-color-primary);
	font-size: var(--mt-font-size-sm);
	font-weight: var(--mt-font-weight-medium);
	text-decoration: none;
	transition: color var(--mt-motion-fast);
}

.mt-hero-event-card__more:hover,
.mt-hero-event-card__more:focus-visible {
	color: var(--mt-color-primary-hover);
}

.mt-hero-event-card__more span {
	width: 0.9rem;
	height: 0.9rem;
	background: currentColor;
	-webkit-mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/arrow-right.svg") center / contain no-repeat;
	mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/arrow-right.svg") center / contain no-repeat;
}


/* --- assets/css/organisms/home-event-bar.css --- */
/**
 * Home event bar organism.
 *
 * Slim full-width bar that surfaces the next upcoming event on the
 * homepage. Label, date, title; clickable link with hover/focus states.
 *
 * @package OpcinaTema
 */

.mt-home-event-bar {
  position: relative;
  z-index: 6;
  width: 100%;
  background: linear-gradient(180deg, rgba(0, 87, 168, 0.055), rgba(22, 139, 58, 0.075)), var(--mt-surface);
  border-top: 1px solid rgba(0, 87, 168, 0.08);
  border-bottom: 1px solid rgba(0, 87, 168, 0.08);
  color: var(--mt-ink);
}

.mt-home-event-bar__link {
  display: grid;
  align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
  gap: 0.95rem;
  width: 100%;
  min-height: 3.85rem;
  padding: 0.8rem max(1rem, (100vw - var(--mt-home-content-width)) / 2);
  overflow: hidden;
  color: inherit;
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
}
.mt-home-event-bar__link:hover, .mt-home-event-bar__link:focus-visible {
  background: rgba(0, 87, 168, 0.055);
  color: inherit;
}

.mt-home-event-bar__label,
.mt-home-event-bar__main,
.mt-home-event-bar__date {
  white-space: nowrap;
}

.mt-home-event-bar__label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  justify-self: start;
  line-height: 1;
  color: var(--mt-color-primary);
  font-size: 1.08rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
}
.mt-home-event-bar__label .dashicons {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.15rem;
  font-size: 1.15rem;
  line-height: 1;
  transform: translateY(-0.08rem);
}
.mt-home-event-bar__label .dashicons::before {
  display: block;
  line-height: 1;
}

.mt-home-event-bar__main {
  display: flex;
  grid-column: 2;
  align-items: center;
  justify-content: center;
  gap: 0.95rem;
  min-width: 0;
  text-align: center;
}

.mt-home-event-bar__date {
  color: var(--mt-ink-soft);
  font-size: 0.98rem;
}

.mt-home-event-bar__title {
  min-width: 0;
  overflow: hidden;
  font-size: 0.98rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* --- assets/css/organisms/izbornik.css --- */
/**
 * Izbornik organism — full "everything" menu + its hamburger trigger.
 *
 * zagreb.hr style: the trigger is a light hamburger + "Izbornik" label on the
 * LEFT of the header; opening it slides a dark off-canvas drawer in from the
 * left edge of the screen, listing every section and sub-item at once over a
 * dimmed page.
 *
 * Markup: template-parts/organisms/izbornik.php + the trigger button in
 * template-parts/organisms/site-header.php. Behaviour: assets/js/mt-izbornik.js.
 *
 * @package OpcinaTema
 */

/* -- Animated hamburger (three bars → ✕ when the trigger is expanded) -- */

.mt-hamburger {
	position: relative;
	display: inline-block;
	width: 20px;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: background 0.2s ease;
}

.mt-hamburger::before,
.mt-hamburger::after {
	content: "";
	position: absolute;
	left: 0;
	width: 20px;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: transform 0.2s ease;
}

.mt-hamburger::before {
	top: -6px;
}

.mt-hamburger::after {
	top: 6px;
}

[aria-expanded="true"] .mt-hamburger {
	background: transparent;
}

[aria-expanded="true"] .mt-hamburger::before {
	transform: translateY(6px) rotate(45deg);
}

[aria-expanded="true"] .mt-hamburger::after {
	transform: translateY(-6px) rotate(-45deg);
}

/* Izbornik trigger — light, sized to match the tabs (weight/size finalised in
   pages.css alongside the other header controls). */
.mt-site-header__menu--izbornik {
	gap: 0.55rem;
	color: var(--mt-color-text-muted);
}

.mt-site-header__menu-label {
	font-size: 0.95rem;
	line-height: 1;
}

/* -- Overlay: dimmed page + left off-canvas drawer -- */

.mt-izbornik {
	position: fixed;
	inset: 0;
	/* Above the WP admin bar (#wpadminbar is z-index 99999) so the open drawer
	   covers it, matching the lightboxes. The panel is fixed to top:0, so it
	   already spans the bar's strip — only the stacking order needed lifting. */
	z-index: 100000;
	/* Container passes clicks through; only the backdrop + panel capture them, so
	   the strip left uncovered on mobile (below the drawer, over the tab-bar)
	   stays interactive. */
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.mt-izbornik[hidden] {
	display: none;
}

.mt-izbornik.is-open {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.3s ease;
}

.mt-izbornik__backdrop {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	/* Ends at the top of the bottom tab-bar (--mt-izbornik-bottom set on open) so
	   the tab-bar is never dimmed or covered; 0 on desktop (no tab-bar). */
	bottom: var(--mt-izbornik-bottom, 0);
	pointer-events: auto;
	/* Light scrim: dims the page just enough for focus without darkening the
	   header so much that the (same-colour) drawer looks lighter than it. */
	background: rgba(0, 0, 0, 0.3);
}

.mt-izbornik__panel {
	position: fixed;
	top: 0;
	/* Sits on top of the bottom tab-bar (var set on open); full height on desktop. */
	bottom: var(--mt-izbornik-bottom, 0);
	left: 0;
	z-index: 1;
	pointer-events: auto;
	display: flex;
	flex-direction: column;
	width: min(90vw, 25rem);
	background: var(--mt-color-primary);
	box-shadow: var(--mt-shadow-overlay);
	color: rgba(255, 255, 255, 0.9);
	transform: translateX(-100%);
	transition: transform 0.3s ease;
}

.mt-izbornik.is-open .mt-izbornik__panel {
	transform: translateX(0);
}

/* -- Drawer head -- */

.mt-izbornik__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex: 0 0 auto;
	padding: 1.05rem 1.35rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

/* Brand lockup in the drawer head — crest + wordmark on the dark panel. */
.mt-izbornik__brand {
	display: inline-flex;
	align-items: center;
	gap: 0.85rem;
	min-width: 0;
	color: #ffffff;
	text-decoration: none;
}

.mt-izbornik__brand-logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 50px;
	height: 57px;
}

/* Fixed box + contain: an explicit width defeats the responsive image's `sizes`
   attribute (which otherwise lays the crest out full-bleed), and contain shows
   the whole crest with no crop. The crest PNG is transparent, so any slack reads
   as drawer background. */
.mt-izbornik__brand-img,
.mt-izbornik__brand-logo img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: contain;
	object-position: center;
	aspect-ratio: auto;
}

.mt-izbornik__brand-text {
	display: flex;
	flex-direction: column;
	gap: 0.18rem;
	min-width: 0;
	padding-left: 0.85rem;
	border-left: 1px solid rgba(255, 255, 255, 0.25);
}

.mt-izbornik__brand-name {
	color: #ffffff;
	font-size: 1.18rem;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	overflow-wrap: anywhere;
}

.mt-izbornik__brand-tagline {
	color: rgba(255, 255, 255, 0.6);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.mt-izbornik__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: var(--mt-radius-md);
	color: rgba(255, 255, 255, 0.85);
	cursor: pointer;
	transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.mt-izbornik__close:hover,
.mt-izbornik__close:focus-visible {
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.55);
	color: #ffffff;
	outline: none;
}

.mt-izbornik__close-icon {
	position: relative;
	display: inline-block;
	width: 18px;
	height: 18px;
}

.mt-izbornik__close-icon::before,
.mt-izbornik__close-icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 18px;
	height: 2px;
	margin-top: -1px;
	background: currentColor;
	border-radius: 2px;
}

.mt-izbornik__close-icon::before {
	transform: rotate(45deg);
}

.mt-izbornik__close-icon::after {
	transform: rotate(-45deg);
}

/* -- Drawer body: every section + its sub-items, stacked -- */

.mt-izbornik__body {
	flex: 1 1 auto;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 1.5rem;
	/* Scroll indicator on the right edge (zagreb.hr) in the secondary colour. The
	   thumb length is proportional to the content, so it reads as a short line
	   rather than a full-height border. */
	scrollbar-width: thin;
	scrollbar-color: var(--mt-color-secondary) transparent;
}

.mt-izbornik__body::-webkit-scrollbar {
	width: 5px;
}

.mt-izbornik__body::-webkit-scrollbar-track {
	background: transparent;
}

.mt-izbornik__body::-webkit-scrollbar-thumb {
	background: var(--mt-color-secondary);
	border-radius: var(--mt-radius-pill);
}

.mt-izbornik__grid {
	display: block;
}

.mt-izbornik__section {
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.mt-izbornik__section:first-child {
	border-top: 0;
}

/* Section header: a plain heading whose title still links to the hub page. The
   collapsible dropdowns are the groups (Ustrojstvo, Proračun, …) one level down. */
.mt-izbornik__section-head {
	padding: 0.35rem 1.35rem 0;
}

.mt-izbornik__section-title {
	margin: 0;
	font-size: 1.22rem;
	font-weight: 700;
	line-height: 1.25;
}

.mt-izbornik__section-link {
	display: inline-block;
	padding: 0.9rem 0 0.5rem;
	color: #ffffff;
	text-decoration: none;
	transition: color 160ms ease;
}

a.mt-izbornik__section-link:hover,
a.mt-izbornik__section-link:focus-visible {
	color: var(--mt-color-accent-bright, #379492);
	outline: none;
}

.mt-izbornik__section-body {
	padding: 0 1.35rem 1.1rem;
}

/* Groups are the dropdowns: the subheading is a full-width toggle (closed by
   default) and the links live in the collapsible body. A hairline between groups
   keeps the sub-categories clearly divided. */
.mt-izbornik__group + .mt-izbornik__group {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.mt-izbornik__group-title {
	margin: 0;
}

.mt-izbornik__group-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.6rem;
	width: 100%;
	padding: 0.85rem 0;
	background: transparent;
	border: 0;
	color: rgba(255, 255, 255, 0.6);
	font: inherit;
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.2;
	text-align: left;
	text-transform: uppercase;
	cursor: pointer;
	transition: color 160ms ease;
}

.mt-izbornik__group-toggle:hover,
.mt-izbornik__group-toggle:focus-visible {
	color: #ffffff;
	outline: none;
}

.mt-izbornik__group-label {
	min-width: 0;
}

/* Caret: ▼ when the group is open, ▶ when collapsed (the default). */
.mt-izbornik__chevron {
	flex: 0 0 auto;
	display: inline-block;
	width: 0.58rem;
	height: 0.58rem;
	margin-top: -0.15rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.2s ease;
}

.mt-izbornik__group.is-collapsed .mt-izbornik__chevron {
	margin-top: 0;
	transform: rotate(-45deg);
}

.mt-izbornik__group-body {
	padding-bottom: 0.3rem;
}

.mt-izbornik__group.is-collapsed .mt-izbornik__group-body {
	display: none;
}

.mt-izbornik__links {
	display: grid;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mt-izbornik__links a {
	color: rgba(255, 255, 255, 0.82);
	font-size: 1rem;
	line-height: 1.3;
	text-decoration: none;
	transition: color 160ms ease;
}

.mt-izbornik__links a:hover,
.mt-izbornik__links a:focus-visible {
	color: #ffffff;
	text-decoration: underline;
	text-underline-offset: 0.18rem;
	outline: none;
}

/* -- Drawer foot: pinned login/logout (the header Prijava is hidden on mobile,
   so this is the only place to sign in there). -- */

.mt-izbornik__foot {
	flex: 0 0 auto;
	padding: 1rem 1.35rem calc(1rem + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.mt-izbornik__login {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
	min-height: 44px;
	padding: 0 1rem;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: var(--mt-radius-md);
	color: #ffffff;
	font-size: 0.98rem;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.mt-izbornik__login:hover,
.mt-izbornik__login:focus-visible {
	background: #ffffff;
	border-color: #ffffff;
	color: var(--mt-color-primary);
	outline: none;
}

.mt-izbornik__login-icon {
	width: 1.1rem;
	height: 1.1rem;
	font-size: 1.1rem;
	line-height: 1;
}

/* The header already shows Prijava on desktop (it hides at ≤900px), so only
   surface the login inside the drawer where the header control is unavailable. */
@media (min-width: 901px) {
	.mt-izbornik__foot {
		display: none;
	}
}

/* Full-screen drawer on phones. */
@media (max-width: 768px) {
	.mt-izbornik__panel {
		width: 100%;
	}
}

/* Lock the page behind the open drawer. */
html.mt-izbornik-open,
html.mt-izbornik-open body {
	overflow: hidden;
}

/* Hide the OneTap accessibility launcher while the drawer is open — it uses the
   maximum z-index and would otherwise float on top of the panel. */
html.mt-izbornik-open .onetap-toggle,
html.mt-izbornik-open .onetap-container-toggle {
	display: none !important;
}

/* -- Menu-scoped search bar: filters the items in place; empty query = all -- */

.mt-izbornik__search {
	position: relative;
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	padding: 1rem 1.35rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.mt-izbornik__search-icon {
	position: absolute;
	left: 2.15rem;
	display: inline-flex;
	width: 1.05rem;
	height: 1.05rem;
	color: rgba(255, 255, 255, 0.6);
	pointer-events: none;
}

.mt-izbornik__search-icon svg {
	width: 100%;
	height: 100%;
}

.mt-izbornik__search-input {
	width: 100%;
	min-height: 3.15rem;
	padding: 0 2.6rem;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: var(--mt-radius-md);
	color: #ffffff;
	font: inherit;
	font-size: 1.02rem;
	line-height: 1;
	appearance: none;
	-webkit-appearance: none;
	transition: background 160ms ease, border-color 160ms ease;
}

.mt-izbornik__search-input::placeholder {
	color: rgba(255, 255, 255, 0.6);
}

.mt-izbornik__search-input:focus {
	background: rgba(255, 255, 255, 0.16);
	border-color: rgba(255, 255, 255, 0.5);
	outline: none;
}

/* Suppress the native search widgets — we render our own clear button. */
.mt-izbornik__search-input::-webkit-search-cancel-button,
.mt-izbornik__search-input::-webkit-search-decoration {
	-webkit-appearance: none;
	appearance: none;
}

.mt-izbornik__search-clear {
	position: absolute;
	right: 1.95rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.85rem;
	height: 1.85rem;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: var(--mt-radius-pill);
	color: rgba(255, 255, 255, 0.72);
	cursor: pointer;
	transition: background 160ms ease, color 160ms ease;
}

.mt-izbornik__search-clear:hover,
.mt-izbornik__search-clear:focus-visible {
	background: rgba(255, 255, 255, 0.14);
	color: #ffffff;
	outline: none;
}

.mt-izbornik__search-clear-icon {
	position: relative;
	display: inline-block;
	width: 0.85rem;
	height: 0.85rem;
}

.mt-izbornik__search-clear-icon::before,
.mt-izbornik__search-clear-icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 2px;
	margin-top: -1px;
	background: currentColor;
	border-radius: 2px;
}

.mt-izbornik__search-clear-icon::before {
	transform: rotate(45deg);
}

.mt-izbornik__search-clear-icon::after {
	transform: rotate(-45deg);
}

/* Slightly larger tap target for each link row. */
.mt-izbornik__links a {
	display: block;
	padding: 0.3rem 0;
}

/* No-results notice while searching. */
.mt-izbornik__empty {
	margin: 0;
	padding: 1.75rem 1.35rem;
	color: rgba(255, 255, 255, 0.65);
	font-size: 0.92rem;
	text-align: center;
}

/* Belt-and-suspenders for JS-hidden items / groups / sections / clear button. */
.mt-izbornik [hidden] {
	display: none !important;
}

@media (prefers-reduced-motion: reduce) {
	.mt-izbornik,
	.mt-izbornik__panel,
	.mt-izbornik__chevron,
	.mt-izbornik__search-input,
	.mt-hamburger,
	.mt-hamburger::before,
	.mt-hamburger::after {
		transition: none;
	}
}


/* --- assets/css/organisms/login.css --- */
/**
 * WordPress login page styling.
 *
 * Overrides for wp-login.php: removes WP defaults, centers the form,
 * applies brand typography + button styling, customizes password show/hide
 * toggle, error/message panels, and the "back to site" / "forgot password"
 * helper links.
 *
 * Loaded via the same enqueue as everything else; the body.login selector
 * scopes it to the WP login page only.
 *
 * @package OpcinaTema
 */

body.login {
  min-height: 100vh;
  background: var(--mt-paper);
  color: var(--mt-ink);
  font-family: var(--mt-font-sans);
}

body.login #login {
  width: 100%;
  min-height: 100vh;
  padding: 0;
  margin: 0;
}

body.login #login > h1,
body.login #nav,
body.login #backtoblog,
body.login .language-switcher,
body.login .privacy-policy-page-link,
body.login .forgetmenot {
  display: none;
}

/* -- Login header: brand logo + site name above the form -- */
.opcina-login-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  width: min(100% - 2rem, 760px);
  margin: 0 auto;
  padding-top: 2.8rem;
}

.opcina-login-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  color: var(--mt-ink);
  text-decoration: none;
}

.opcina-login-brand__logo {
  width: auto;
  height: 3.4rem;
}

.opcina-login-brand__name {
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1.1;
}

.opcina-login-back {
  width: min(100% - 2rem, 760px);
  margin: 3.6rem auto 1.8rem;
}

.opcina-login-back a,
.opcina-login-forgot a {
  color: inherit;
  font-size: 1.05rem;
  font-weight: 800;
  text-decoration-color: var(--mt-color-primary-bright);
  text-decoration-thickness: 0.16rem;
  text-underline-offset: 0.14rem;
}

body.login #login_error,
body.login .message,
body.login .notice {
  width: min(100% - 2rem, 760px);
  margin: 1rem auto;
  border-left-color: var(--mt-color-primary);
  box-shadow: none;
}

body.login form#loginform {
  width: min(100% - 2rem, 760px);
  min-height: 31.5rem;
  margin: 0 auto 5rem;
  padding: 4.2rem 3rem 3rem;
  background: var(--mt-color-primary);
  border: 0;
  border-radius: 8px;
  box-shadow: 0 16px 36px rgba(3, 25, 39, 0.14);
  color: var(--mt-paper);
}

body.login form#loginform::before {
  display: block;
  margin-bottom: 2.3rem;
  color: var(--mt-paper);
  font-size: clamp(2rem, 3vw, 2.45rem);
  font-weight: 800;
  line-height: 1.1;
  content: "Prijava";
}

body.login form#loginform p,
body.login form#loginform .user-pass-wrap {
  margin: 0 0 1.65rem;
}

body.login label {
  display: block;
  margin-bottom: 0.45rem;
  color: var(--mt-paper);
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1.25;
}

body.login form .input,
body.login input[type=text],
body.login input[type=password] {
  width: min(100%, 31rem);
  min-height: 3.25rem;
  padding: 0 0.85rem;
  background: var(--mt-paper);
  border: 2px solid transparent;
  border-radius: 3px;
  box-shadow: none;
  color: var(--mt-ink);
  font: inherit;
  font-size: 1.15rem;
}

body.login form .input:focus,
body.login input[type=text]:focus,
body.login input[type=password]:focus {
  border-color: var(--mt-color-primary-bright);
  box-shadow: 0 0 0 2px var(--mt-paper);
  outline: 0;
}

body.login .wp-pwd {
  width: min(100%, 31rem);
}

body.login .button.wp-hide-pw {
  display: grid;
  width: 3.25rem;
  height: 3.25rem;
  min-width: 3.25rem;
  padding: 0;
  border: 0;
  place-items: center;
  background: transparent;
  box-shadow: none;
  color: var(--mt-ink);
}

body.login .button.wp-hide-pw:hover,
body.login .button.wp-hide-pw:focus,
body.login .button.wp-hide-pw:active,
body.login .button.wp-hide-pw:focus-visible {
  border: 0;
  background: transparent;
  box-shadow: none;
  outline: 0;
}

body.login .button.wp-hide-pw .dashicons {
  display: block;
  width: 1.45rem;
  height: 1.45rem;
  background: currentColor;
  margin: 0;
  font-size: 0;
  line-height: 1;
  transform: none;
  -webkit-mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/eye-password-show-svgrepo-com.svg") center/contain no-repeat;
  mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/eye-password-show-svgrepo-com.svg") center/contain no-repeat;
}

body.login .button.wp-hide-pw .dashicons::before {
  display: none;
  content: "";
}

body.login .button.wp-hide-pw .dashicons-hidden {
  -webkit-mask-image: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/eye-password-hide-svgrepo-com.svg");
  mask-image: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/eye-password-hide-svgrepo-com.svg");
}

.opcina-login-forgot {
  margin: -0.55rem 0 0;
}

.opcina-login-forgot a {
  color: var(--mt-paper);
  text-decoration-color: var(--mt-paper);
}

body.login .submit {
  margin: 7rem 0 0;
  padding: 0;
}

body.login .button-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.65rem;
  padding: 0 1.05rem;
  background: var(--mt-paper);
  border: 2px solid var(--mt-paper);
  border-radius: 999px;
  box-shadow: none;
  color: var(--mt-color-primary);
  font: inherit;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1;
  text-shadow: none;
  transition: background 180ms ease, color 180ms ease;
}

body.login .button-primary:hover,
body.login .button-primary:focus-visible {
  background: var(--mt-color-primary);
  color: var(--mt-paper);
}


/* --- assets/css/organisms/mob-tabbar.css --- */
/**
 * Mob-tabbar organism — fixed-bottom mobile navigation.
 *
 * Hidden on desktop (display: none). Reveals as a fixed-bottom
 * 1-6-column grid under the mobile breakpoint. Each item is a
 * stacked icon + label anchor; the active item tints primary.
 *
 * The host must add bottom padding to the body / main content area
 * so the last section doesn't sit under the bar.
 *
 * @package OpcinaTema
 */

.mt-mob-tabbar {
	--mt-mob-tabbar-breakpoint: 768px;
	--mt-mob-tabbar-bg: var(--mt-color-surface);
	--mt-mob-tabbar-border: 1px solid var(--mt-color-border);
	--mt-mob-tabbar-padding-block: var(--mt-space-sm) var(--mt-space-sm);
	--mt-mob-tabbar-padding-inline: var(--mt-space-xs);
	--mt-mob-tabbar-z-index: 80;
	--mt-mob-tabbar-item-gap: var(--mt-space-xs);
	--mt-mob-tabbar-item-padding: var(--mt-space-sm) var(--mt-space-xs);
	--mt-mob-tabbar-item-color: var(--mt-color-text-soft);
	--mt-mob-tabbar-item-active-color: var(--mt-color-primary);
	--mt-mob-tabbar-item-label-size: var(--mt-font-size-2xs);
	--mt-mob-tabbar-icon-size: 1.5rem;

	display: none;
}

@media (max-width: 768px) {
	.mt-mob-tabbar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: var(--mt-mob-tabbar-z-index);
		display: grid;
		grid-template-columns: repeat(5, minmax(0, 1fr));
		padding-block: var(--mt-mob-tabbar-padding-block);
		padding-inline: var(--mt-mob-tabbar-padding-inline);
		/* Keep only the safe-area inset plus a small breathing gap so the bar sits
		 * close to the screen edge (notched phones still clear the gesture bar). */
		padding-bottom: calc(var(--mt-space-sm) + env(safe-area-inset-bottom, 0px));
		background: var(--mt-mob-tabbar-bg);
		border-top: var(--mt-mob-tabbar-border);
	}

	.mt-mob-tabbar--1cols { grid-template-columns: minmax(0, 1fr); }
	.mt-mob-tabbar--2cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mt-mob-tabbar--3cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.mt-mob-tabbar--4cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.mt-mob-tabbar--5cols { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.mt-mob-tabbar--6cols { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* -- Items (always-styled so JS or host can show them on desktop too) -- */

.mt-mob-tabbar__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--mt-mob-tabbar-item-gap);
	width: 100%;
	padding: var(--mt-mob-tabbar-item-padding);
	color: var(--mt-mob-tabbar-item-color);
	text-decoration: none;
	font-size: var(--mt-mob-tabbar-item-label-size);
	font-family: var(--mt-font-sans);
	line-height: 1;
	transition: color var(--mt-motion-fast);
	/* Button-variant reset (the "Meni" toggle item renders as <button>). */
	background: none;
	border: 0;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.mt-mob-tabbar__item:hover,
.mt-mob-tabbar__item:focus-visible {
	color: var(--mt-mob-tabbar-item-active-color);
	outline: none;
}

.mt-mob-tabbar__item.is-active,
.mt-mob-tabbar__item[aria-current="page"],
.mt-mob-tabbar__item[aria-expanded="true"] {
	color: var(--mt-mob-tabbar-item-active-color);
}

.mt-mob-tabbar__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--mt-mob-tabbar-icon-size);
	height: var(--mt-mob-tabbar-icon-size);
	color: inherit;
}

.mt-mob-tabbar__icon svg,
.mt-mob-tabbar__icon > .dashicons {
	width: 100%;
	height: 100%;
	font-size: var(--mt-mob-tabbar-icon-size);
	line-height: 1;
	color: inherit;
}

.mt-mob-tabbar__label {
	display: block;
	line-height: 1.1;
	text-align: center;
}

/* -- Active item: a primary pill behind the icon + bolder label, so the current
   section reads clearly instead of just a colour change. -- */

.mt-mob-tabbar__item.is-active .mt-mob-tabbar__icon,
.mt-mob-tabbar__item[aria-current="page"] .mt-mob-tabbar__icon {
	width: auto;
	height: auto;
	padding: 0.28rem 0.95rem;
	background: var(--mt-color-primary-100);
	border-radius: var(--mt-radius-pill);
	transition: background var(--mt-motion-fast);
}

.mt-mob-tabbar__item.is-active .mt-mob-tabbar__icon svg,
.mt-mob-tabbar__item.is-active .mt-mob-tabbar__icon > .dashicons,
.mt-mob-tabbar__item[aria-current="page"] .mt-mob-tabbar__icon svg,
.mt-mob-tabbar__item[aria-current="page"] .mt-mob-tabbar__icon > .dashicons {
	width: var(--mt-mob-tabbar-icon-size);
	height: var(--mt-mob-tabbar-icon-size);
	flex: 0 0 auto;
}

.mt-mob-tabbar__item.is-active .mt-mob-tabbar__label,
.mt-mob-tabbar__item[aria-current="page"] .mt-mob-tabbar__label {
	font-weight: var(--mt-font-weight-medium);
}


/* --- assets/css/organisms/nav-help.css --- */
/**
 * Nav help organism.
 *
 * Help/contact CTA card with icon, title, paragraph, and a primary
 * action link. Used as a sidebar promo on landing pages.
 *
 * @package OpcinaTema
 */

.mt-nav-help {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.2rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: clamp(1.25rem, 2vw, 1.65rem);
  background: rgba(255, 255, 255, 0.84);
  border: 1px solid rgba(217, 221, 225, 0.82);
  border-radius: 8px;
  box-shadow: 0 0.75rem 1.9rem rgba(3, 25, 39, 0.07);
}

.mt-nav-help__icon {
  display: inline-grid;
  width: 3.5rem;
  height: 3.5rem;
  place-items: center;
  background: rgba(var(--mt-color-primary-rgb), 0.1);
  border-radius: 999px;
}

.mt-nav-help__icon::before {
  width: 1.75rem;
  height: 1.75rem;
  background: var(--mt-color-primary);
  content: "";
  -webkit-mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/contact-book-svgrepo-com.svg") center/contain no-repeat;
  mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/contact-book-svgrepo-com.svg") center/contain no-repeat;
}

.mt-nav-help__content {
  display: grid;
  gap: 0.25rem;
}

.mt-nav-help__content h2,
.mt-nav-help__content p {
  margin: 0;
}

.mt-nav-help__content h2 {
  color: var(--mt-ink);
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.25;
}

.mt-nav-help__content p {
  color: var(--mt-ink-soft);
  font-size: 0.98rem;
  line-height: 1.45;
}

.mt-nav-help__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 2.7rem;
  padding-inline: 1.1rem;
  color: var(--mt-color-primary);
  font-weight: 800;
  text-decoration: none;
  border: 1px solid rgba(22, 139, 58, 0.62);
  border-radius: 6px;
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease;
  white-space: nowrap;
}

.mt-nav-help__link span {
  width: 1rem;
  height: 1rem;
  background: currentColor;
  -webkit-mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/arrow-right.svg") center/contain no-repeat;
  mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/arrow-right.svg") center/contain no-repeat;
}

.mt-nav-help__link:hover,
.mt-nav-help__link:focus-visible {
  color: var(--mt-paper);
  background: var(--mt-color-primary);
  border-color: var(--mt-color-primary);
}


/* --- assets/css/organisms/news-feed.css --- */
/**
 * News feed organism.
 *
 * Legacy news-feed listing used on the news page: stacked news-story
 * cards with media + caption + body, plus the empty-state.
 *
 * @package OpcinaTema
 */

.news-page {
  background: var(--mt-page-background);
  color: var(--mt-ink);
}

.news-feed {
  padding-block: 5.25rem 5.5rem;
}

.news-feed__inner {
  width: min(100% - 2rem, 600px);
  margin-inline: auto;
}

.news-story + .news-story {
  margin-top: 3.15rem;
}

.news-story__media {
  position: relative;
  display: block;
  aspect-ratio: 5/2;
  overflow: hidden;
  background: linear-gradient(0deg, rgba(3, 25, 39, 0.18), rgba(3, 25, 39, 0.02)), var(--mt-color-accent);
  text-decoration: none;
}

.news-story__media-mark {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 72%, rgba(255, 255, 255, 0.9) 0 0.45rem, transparent 0.48rem), radial-gradient(circle at 30% 66%, rgba(255, 255, 255, 0.76) 0 0.34rem, transparent 0.37rem), radial-gradient(circle at 42% 74%, rgba(255, 255, 255, 0.82) 0 0.42rem, transparent 0.45rem), radial-gradient(circle at 59% 68%, rgba(255, 255, 255, 0.7) 0 0.36rem, transparent 0.39rem), linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0 1px, transparent 1px 100%), linear-gradient(0deg, rgba(3, 25, 39, 0.2) 0 18%, transparent 18%), linear-gradient(90deg, transparent 0 40%, rgba(255, 255, 255, 0.6) 40% 43%, transparent 43% 67%, rgba(255, 255, 255, 0.42) 67% 70%, transparent 70%);
  background-size: auto, auto, auto, auto, 4rem 100%, auto, auto;
}

.news-story__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.news-story__media--blue {
  background: linear-gradient(135deg, rgba(3, 25, 39, 0.08), rgba(3, 25, 39, 0.24)), linear-gradient(90deg, #cfd9d7 0 42%, #93d5ca 42% 56%, #d8e1dc 56% 100%);
}

.news-story__media--teal {
  background: linear-gradient(135deg, rgba(3, 25, 39, 0.12), rgba(3, 25, 39, 0.22)), linear-gradient(90deg, #123428 0 12%, #f6ece2 12% 70%, #caa27d 70% 100%);
}

.news-story__media--yellow {
  background: linear-gradient(135deg, rgba(3, 25, 39, 0.12), rgba(3, 25, 39, 0.08)), linear-gradient(90deg, #f7c948 0 28%, #ffffff 28% 64%, #d7153a 64% 100%);
}

.news-story__caption {
  position: relative;
  margin: 0.35rem 0 0;
  padding-left: 1.05rem;
  color: var(--mt-ink-soft);
  font-size: 0.82rem;
  line-height: 1.3;
}
.news-story__caption::before {
  position: absolute;
  top: 0.2rem;
  left: 0;
  width: 0.68rem;
  height: 0.5rem;
  border: 1.5px solid currentColor;
  border-radius: 2px;
  content: "";
}
.news-story__caption::after {
  position: absolute;
  top: 0.36rem;
  left: 0.22rem;
  width: 0.22rem;
  aspect-ratio: 1;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  content: "";
}

.news-story__body {
  margin-top: 2.25rem;
}
.news-story__body h2 {
  margin: 0;
  font-size: clamp(1.25rem, 2.5vw, 1.55rem);
  font-weight: 800;
  line-height: 1.26;
  letter-spacing: 0;
}
.news-story__body h2 a {
  text-decoration: none;
}
.news-story__body > p {
  margin: 1rem 0 0;
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.7;
}
.news-story__body > p a {
  text-decoration-color: var(--mt-color-primary-bright);
  text-decoration-thickness: 0.18rem;
  text-underline-offset: 0.12rem;
}
.news-story__body time {
  display: block;
  margin-top: 1.55rem;
  font-weight: 700;
}

.news-empty {
  padding-block: 1rem 2rem;
}
.news-empty h2 {
  margin: 0;
  font-size: 1.55rem;
  line-height: 1.2;
}
.news-empty p {
  margin: 0.75rem 0 0;
  color: var(--mt-ink-soft);
}



/* --- assets/css/organisms/news-list.css --- */
/**
 * News-list organism — bordered container of news-list-item rows.
 *
 * The container owns the surface chrome (white background, soft border,
 * rounded corners, overflow clipping so child borders meet the corners
 * cleanly). Children (news-list-item molecules) own their own rows.
 *
 * Variants:
 *   default          bordered white card with rounded corners
 *   --flat           no border, no radius — drops into sections that
 *                    already own their own surface
 *
 * State:
 *   --empty (auto)   when the list has no valid items, the container
 *                    renders an empty-state message instead of items
 *
 * @package OpcinaTema
 */

.mt-news-list {
	--mt-news-list-bg: var(--mt-color-surface);
	--mt-news-list-border: 1px solid var(--mt-color-border);
	--mt-news-list-radius: var(--mt-radius-xl);
	--mt-news-list-empty-color: var(--mt-color-text-soft);
	--mt-news-list-empty-padding: var(--mt-space-xl);

	display: block;
	background: var(--mt-news-list-bg);
	border: var(--mt-news-list-border);
	border-radius: var(--mt-news-list-radius);
	overflow: hidden;
}

/* The molecule renders its own border-bottom on every row; the */
/* container's overflow: hidden + the molecule's :last-child    */
/* border-bottom: 0 keeps the bottom row flush.                 */

.mt-news-list--flat {
	--mt-news-list-bg: transparent;
	--mt-news-list-border: 0;
	--mt-news-list-radius: 0;
}

/* -- Empty state -- */

.mt-news-list__empty {
	margin: 0;
	padding: var(--mt-news-list-empty-padding);
	color: var(--mt-news-list-empty-color);
	font-family: var(--mt-font-sans);
	font-size: var(--mt-font-size-sm);
	line-height: var(--mt-line-height-base);
	text-align: center;
}


/* --- assets/css/organisms/page-hero.css --- */
/**
 * page-hero organism — inner-page intro block (breadcrumbs + title +
 * intro copy + optional decorative pill), used across 21 archive and
 * page templates.
 *
 * Page-body context overrides (.mt-opcina-page .mt-page-hero,
 * .mt-mjestani-page ..., .mt-poduzetnici-page ...,
 * .mt-projekti-page ..., .mt-events-archive ...) remain in
 * mt-home.scss for now — those will move when the per-page-type
 * scopes are addressed later in this CSS-extraction pass.
 *
 * @package OpcinaTema
 */

.mt-page-hero-section {
	/* -- Component-level tokens -- */
	--mt-page-hero-section-bg: var(--mt-page-background, #ffffff);
	--mt-page-hero-section-border-color: rgba(217, 221, 225, 0.75);
	--mt-page-hero-section-padding-block-start: clamp(3.75rem, 6vw, 5.5rem);
	--mt-page-hero-section-padding-block-end: clamp(2.25rem, 4vw, 3.4rem);

	padding-block: var(--mt-page-hero-section-padding-block-start) var(--mt-page-hero-section-padding-block-end);
	background: var(--mt-page-hero-section-bg);
	border-top: 1px solid var(--mt-page-hero-section-border-color);
}

.mt-page-hero {
	/* -- Component-level tokens -- */
	--mt-page-hero-color: var(--mt-ink, #031927);
	--mt-page-hero-color-soft: #1d2c38;
	--mt-page-hero-accent: var(--mt-color-primary, #168b3a);
	--mt-page-hero-gap: 0.6rem;
	--mt-page-hero-title-size: clamp(3rem, 5.2vw, 4.7rem);
	--mt-page-hero-copy-max-width: 54rem;
	--mt-page-hero-copy-size: clamp(1.15rem, 2vw, 1.55rem);
	--mt-page-hero-decoration-width: 4.45rem;
	--mt-page-hero-decoration-height: 0.38rem;

	display: grid;
	justify-items: center;
	gap: var(--mt-page-hero-gap);
	text-align: center;
}

.mt-page-hero h1 {
	margin: 0;
	color: var(--mt-page-hero-color);
	font-size: var(--mt-page-hero-title-size);
	font-weight: 900;
	line-height: 0.95;
	letter-spacing: 0;
}

.mt-page-hero__copy {
	max-width: var(--mt-page-hero-copy-max-width);
	margin: 0;
	color: var(--mt-page-hero-color-soft);
	font-size: var(--mt-page-hero-copy-size);
	font-weight: 400;
	line-height: 1.35;
}

.mt-page-hero__copy p {
	margin: 0;
}

.mt-page-hero__copy p + p {
	margin-top: 0.65rem;
}

/* -- Trailing decoration (small green pill) -- */

.mt-page-hero > span {
	width: var(--mt-page-hero-decoration-width);
	height: var(--mt-page-hero-decoration-height);
	margin-top: 0.8rem;
	background: var(--mt-page-hero-accent);
	border-radius: 999px;
	box-shadow: 0 0.18rem 0.45rem rgba(22, 139, 58, 0.28);
}


/* --- assets/css/organisms/person-details.css --- */
/* person-details — a person's titula subheading + contact cards on the single
 * "osoba" profile. The subtitle reuses the single-news header; the contact cards
 * reuse the Kontakt page component (.mt-contact-grid / .mt-contact-card), so only
 * the profile-specific spacing lives here. */

.single-news__subtitle {
	margin: 0.4rem 0 0;
	/* Sits in the primary-colour hero header, same as the title. */
	color: var(--mt-paper);
	font-size: clamp(1.05rem, 1.6vw, 1.28rem);
	font-weight: 600;
	line-height: 1.3;
}

.mt-person-contact {
	margin: 0 0 1.85rem;
}

/* The contact-card icon box is shared with the Kontakt page; here it holds an
 * inline SVG (currentColor) instead of a dashicons glyph. */
.mt-person-contact .mt-contact-card__icon svg {
	display: block;
	width: 1.3rem;
	height: 1.3rem;
}


/* --- assets/css/organisms/related-posts.css --- */
/**
 * related-posts organism — sidebar <aside> with optional grouped lists
 * of related documents / pages / posts.
 *
 * Sticky positioning by default; parent layouts (e.g.
 * .mt-content__layout--with-related) place it as a grid item.
 *
 * Variants override the --mt-related-posts-* tokens. The shared
 * h2/__meta typography lives in mt-home.scss (typographic scale
 * groups), unchanged in this pass.
 *
 * @package OpcinaTema
 */

.mt-related-posts {
	/* -- Component-level tokens -- */
	--mt-related-posts-bg: var(--mt-paper, #ffffff);
	--mt-related-posts-color: var(--mt-ink, #031927);
	--mt-related-posts-color-muted: var(--mt-ink-soft, #384651);
	--mt-related-posts-accent: var(--mt-color-primary, #168b3a);
	--mt-related-posts-accent-link-hover: var(--mt-color-accent, #0057a8);
	--mt-related-posts-border-color: var(--mt-line, #d9dde1);
	--mt-related-posts-radius: 8px;
	--mt-related-posts-padding: 1.25rem;
	--mt-related-posts-shadow: 0 18px 42px rgba(3, 25, 39, 0.08);
	--mt-related-posts-sticky-top: 1.5rem;

	/* -- Structural rules -- */
	position: sticky;
	/* Clear the fixed header. Its pinned (condensed) height is published as
	   --mt-sticky-header-height by mt-sticky-header.js; fall back to 0 (no JS =
	   in-flow header) so the plain offset still works. */
	top: calc(var(--mt-sticky-header-height, 0px) + var(--mt-related-posts-sticky-top));
	padding: var(--mt-related-posts-padding);
	border: 1px solid var(--mt-related-posts-border-color);
	border-radius: var(--mt-related-posts-radius);
	background: var(--mt-related-posts-bg);
	box-shadow: var(--mt-related-posts-shadow);
}

.mt-related-posts h2 {
	margin: 0;
	font-size: 1.22rem;
	line-height: 1.2;
	letter-spacing: 0;
}

/* Sticky offset under the WP admin bar (plus the fixed header). */
.admin-bar .mt-related-posts {
	top: calc(32px + var(--mt-sticky-header-height, 0px) + var(--mt-related-posts-sticky-top));
}

/* -- Groups -- */

.mt-related-posts__group {
	margin-top: 1.1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--mt-related-posts-border-color);
}

.mt-related-posts__group h3 {
	margin: 0 0 0.55rem;
	color: var(--mt-related-posts-accent);
	font-size: 0.86rem;
	font-weight: 900;
	line-height: 1.25;
	text-transform: uppercase;
	letter-spacing: 0;
}

.mt-related-posts__group ul {
	display: grid;
	gap: 0.2rem;
	padding: 0;
	margin: 0;
	list-style: none;
}

.mt-related-posts__group li {
	margin: 0;
}

.mt-related-posts__group a {
	display: block;
	padding: 0.55rem 0;
	color: inherit;
	text-decoration: none;
	border-radius: 6px;
}

.mt-related-posts__group a:hover,
.mt-related-posts__group a:focus-visible {
	color: var(--mt-related-posts-accent-link-hover);
}

/* -- Person items: round avatar chip + label in a row. -- */

.mt-related-posts__group a.mt-related-posts__link--with-icon {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.mt-related-posts__icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 2.1rem;
	height: 2.1rem;
	color: var(--mt-related-posts-accent);
	background: var(--mt-color-primary-soft, rgba(44, 82, 130, 0.1));
	border-radius: 999px;
}

.mt-related-posts__icon svg {
	width: 1.2rem;
	height: 1.2rem;
}

/* A person's photo fills the avatar circle (round via the icon's border-radius);
   falls back to the silhouette icon when the person has no image. */
.mt-related-posts__icon--photo {
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

/* -- Thumbnail card: a crisp image beside the title (items that have an image).
   The fixed-size square thumb is the tallest element, so every card is the same
   height; the title is clamped to two lines so it never outgrows it. -- */

.mt-related-posts__group a.mt-related-posts__link--card {
	display: grid;
	grid-template-columns: 5.5rem minmax(0, 1fr);
	column-gap: 0.85rem;
	align-items: center;
	padding: 0.4rem 0;
}

.mt-related-posts__thumb {
	grid-column: 1;
	grid-row: 1 / -1;
	width: 5.5rem;
	height: 5.5rem;
	background-color: var(--mt-color-primary-soft, rgba(44, 82, 130, 0.1));
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	border-radius: 7px;
}

.mt-related-posts__link--card .mt-related-posts__title {
	grid-column: 2;
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

/* -- Item title + meta -- */

.mt-related-posts__title,
.mt-related-posts__meta {
	display: block;
}

.mt-related-posts__title {
	font-size: 0.98rem;
	font-weight: 400;
	line-height: 1.35;
	overflow-wrap: anywhere;
}

.mt-related-posts__meta {
	margin-top: 0.16rem;
	color: var(--mt-related-posts-color-muted);
	font-size: 0.84rem;
	font-weight: 700;
}

/* -- Empty state -- */

.mt-related-posts__empty {
	margin: 1.1rem 0 0;
	padding-top: 1rem;
	border-top: 1px solid var(--mt-related-posts-border-color);
	color: var(--mt-related-posts-color-muted);
	font-size: 0.96rem;
	font-weight: 500;
	line-height: 1.45;
}

/* -- Narrow viewport: drop sticky, render inline. -- */

@media (max-width: 960px) {
	.mt-related-posts {
		position: static;
	}
}


/* --- assets/css/organisms/search.css --- */
/**
 * Search organism.
 *
 * The .mt-search wrapper used around the search-form molecule, and the
 * .mt-search-results live-search results dropdown (list, links, title,
 * type, "see all" button, status/error states).
 *
 * @package OpcinaTema
 */

.mt-search {
  position: relative;
  z-index: 7;
  width: min(100%, 38rem);
  margin-top: 1.75rem;
}
.mt-search-results {
  position: absolute;
  top: calc(100% + 0.7rem);
  left: 0;
  width: 100%;
  /* vh cap + overflow-y keep the dropdown inside short viewports; the      */
  /* "show all results" link stays pinned to the bottom (sticky) so it is   */
  /* always visible even when the result list scrolls.                      */
  max-height: min(34rem, 85vh);
  overflow-y: auto;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(217, 221, 225, 0.95);
  border-radius: 7px;
  box-shadow: 0 1rem 2.2rem rgba(3, 25, 39, 0.22);
  color: var(--mt-ink);
}

.mt-search-results[hidden] {
  display: none;
}

.mt-search-results--floating {
  position: fixed;
  z-index: 10000;
  margin: 0;
}

.mt-search-results__list {
  padding: 0;
  margin: 0;
  list-style: none;
}

.mt-search-results__list li + li {
  border-top: 1px solid rgba(217, 221, 225, 0.8);
}

.mt-search-results__link,
.mt-search-results__all {
  color: inherit;
  text-decoration: none;
}

.mt-search-results__link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.72rem 0.9rem;
  transition: background 160ms ease, color 160ms ease;
}

.mt-search-results__link:hover,
.mt-search-results__link:focus-visible {
  background: rgba(54, 201, 87, 0.12);
  color: var(--mt-color-primary);
  outline: none;
}

.mt-search-results__title {
  overflow: hidden;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mt-search-results__type {
  padding: 0.18rem 0.45rem;
  background: rgba(0, 87, 168, 0.08);
  border-radius: 999px;
  color: var(--mt-color-accent);
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.mt-search-results__all {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: center;
  padding: 0.72rem 0.9rem 0.8rem;
  background: rgba(255, 255, 255, 0.98);
  border-top: 1px solid rgba(217, 221, 225, 0.9);
  color: var(--mt-color-primary);
  font-size: 0.9rem;
  font-weight: 600;
}

.mt-search-results__all:hover,
.mt-search-results__all:focus-visible {
  color: var(--mt-color-primary-bright);
  outline: none;
}

.mt-search-results__status {
  margin: 0;
  padding: 0.85rem 0.9rem;
  color: var(--mt-ink-soft);
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.35;
}

.mt-search-results__status--error {
  color: var(--mt-red);
}


/* --- assets/css/organisms/section-base.css --- */
/**
 * Section base + head shared infrastructure.
 *
 * Shared base styles used across every section composition:
 * - .mt-section padding scale (with --services and --news variants)
 * - .mt-section__head heading + intro layout (with --center and
 *   --left-title modifiers)
 * - .mt-service-grid (single-column grid base used inside sections)
 * - .mt-official-layout / .mt-official-layout__main (one-column page
 *   layout wrapper for service-info pages)
 *
 * @package OpcinaTema
 */

.mt-section {
  padding-block: 3.75rem;
}

.mt-section--services {
  padding-block: 3.25rem 5.8rem;
  background: var(--mt-paper);
}

.mt-section--news {
  padding-block: 5.8rem 6.25rem;
}
.mt-section--news .mt-container {
  width: min(100% - 2rem, var(--mt-home-content-width));
}
.mt-section--news .mt-section__head {
  gap: 1.55rem;
  margin-bottom: 3.35rem;
}
.mt-section--news .mt-section__head h2 {
  font-size: clamp(2.85rem, 4.8vw, 3.45rem);
  font-weight: 800;
  line-height: 1.08;
}
.mt-section--news .mt-section__head p {
  max-width: 64rem;
  color: var(--mt-ink);
  font-size: clamp(1.7rem, 3vw, 2.35rem);
  line-height: 1.42;
}

.mt-section__head {
  display: grid;
  gap: 0.65rem;
  margin-bottom: 1.5rem;
}
.mt-section__head h2 {
  margin: 0;
  font-size: 2rem;
  line-height: 1.1;
  letter-spacing: 0;
}
.mt-section__head p {
  max-width: 42rem;
  margin: 0;
  color: var(--mt-ink-soft);
}

.mt-section__head--center {
  justify-items: center;
  margin-bottom: 2.8rem;
  text-align: center;
}
.mt-section__head--center h2 {
  font-size: clamp(2.35rem, 3.4vw, 2.8rem);
  font-weight: 800;
}

.mt-section__head--left-title {
  justify-items: start;
  text-align: left;
}
.mt-section__head--left-title h2 {
  font-weight: 400;
}

.mt-service-grid {
  display: grid;
  gap: 1.4rem;
}


.mt-official-layout {
  display: grid;
  gap: clamp(2.6rem, 5vw, 4.5rem);
  justify-items: center;
}

.mt-official-layout__main {
  width: min(100%, var(--mt-home-content-width));
  min-width: 0;
}


/* --- assets/css/organisms/service-panel.css --- */
/**
 * Service panel organism.
 *
 * Compact info panel with icon header, title, paragraph, and link list.
 * Used as a sidebar card on service-info pages and several landing
 * pages. Many icon variants for different service categories.
 *
 * @package OpcinaTema
 */

.mt-service-panel {
  display: grid;
  gap: 1.1rem;
  padding: 1.65rem;
  background: var(--mt-paper);
  border: 1px solid var(--mt-line);
  border-top: 0.35rem solid var(--mt-color-accent);
  border-radius: 6px;
}
.mt-service-panel h3 {
  margin: 0;
  font-size: 1.48rem;
  line-height: 1.32;
}
.mt-service-panel p {
  margin: 0;
  color: var(--mt-ink-soft);
  font-size: 1.05rem;
  line-height: 1.65;
}
.mt-service-panel ul {
  display: grid;
  gap: 0.78rem;
  margin-top: 0.45rem;
}
.mt-service-panel a {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 1.02rem;
  font-weight: 400;
  text-decoration-thickness: 0.055em;
  text-underline-offset: 0.18em;
  transition: color 180ms ease;
}
.mt-service-panel a:hover,
.mt-service-panel a:focus-visible {
  color: var(--mt-color-primary-bright);
}
.mt-service-panel a::before {
  width: 1rem;
  height: 1rem;
  margin-top: 0.18em;
  background: var(--mt-color-primary-bright);
  content: "";
  flex: 0 0 auto;
  -webkit-mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/arrow-right.svg") center/contain no-repeat;
  mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/arrow-right.svg") center/contain no-repeat;
}

.mt-service-grid--visitors .mt-service-panel {
  min-height: clamp(19rem, 23vw, 21rem);
}

.mt-service-panel__icon {
  display: block;
  width: 1.75rem;
  height: 1.75rem;
  margin-bottom: 0.45rem;
  color: var(--mt-color-primary-bright);
  font-size: 1.75rem;
  line-height: 1;
}

.mt-service-panel__icon--trash {
  background: currentColor;
  -webkit-mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/trash-svgrepo-com.svg") center/270% no-repeat;
  mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/trash-svgrepo-com.svg") center/270% no-repeat;
}

.mt-service-panel__icon--services {
  background: currentColor;
  -webkit-mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/services-svgrepo-com.svg") center/110% no-repeat;
  mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/services-svgrepo-com.svg") center/110% no-repeat;
}

.mt-service-panel__icon--file-text {
  background: currentColor;
  -webkit-mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/file-text.svg") center/contain no-repeat;
  mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/file-text.svg") center/contain no-repeat;
}

.mt-service-panel__icon--community {
  background: currentColor;
  -webkit-mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/community-svgrepo-com.svg") center/contain no-repeat;
  mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/community-svgrepo-com.svg") center/contain no-repeat;
}

.mt-service-panel__icon--signs-post {
  background: currentColor;
  -webkit-mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/signs-post-svgrepo-com.svg") center/contain no-repeat;
  mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/signs-post-svgrepo-com.svg") center/contain no-repeat;
}

.mt-service-panel__icon--group {
  background: currentColor;
  -webkit-mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/group-svgrepo-com.svg") center/92% 135% no-repeat;
  mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/group-svgrepo-com.svg") center/92% 135% no-repeat;
}

.mt-service-panel__icon--deal {
  background: currentColor;
  -webkit-mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/deal-svgrepo-com.svg") center/90% 125% no-repeat;
  mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/deal-svgrepo-com.svg") center/90% 125% no-repeat;
}

.mt-service-panel__icon--wechat {
  background: currentColor;
  -webkit-mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/wechat-brand-assets-messenger-china-chat-oneline-svgrepo-com.svg") center/125% 150% no-repeat;
  mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/wechat-brand-assets-messenger-china-chat-oneline-svgrepo-com.svg") center/125% 150% no-repeat;
}

.mt-service-panel__icon--organization {
  background: currentColor;
  -webkit-mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/organization-svgrepo-com.svg") center/contain no-repeat;
  mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/organization-svgrepo-com.svg") center/contain no-repeat;
}

.mt-service-panel__icon--road {
  background: currentColor;
  -webkit-mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/road-606-svgrepo-com.svg") center/contain no-repeat;
  mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/road-606-svgrepo-com.svg") center/contain no-repeat;
}

.mt-service-panel__icon--wheat {
  background: currentColor;
  -webkit-mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/wheat.svg") center/contain no-repeat;
  mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/wheat.svg") center/contain no-repeat;
}

.mt-service-panel__icon--economy {
  background: currentColor;
  -webkit-mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/economy.svg") center/contain no-repeat;
  mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/economy.svg") center/contain no-repeat;
}

.mt-service-panel__icon--purchase {
  background: currentColor;
  -webkit-mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/purchase.svg") center/contain no-repeat;
  mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/purchase.svg") center/contain no-repeat;
}

.mt-service-panel__icon--tax {
  background: currentColor;
  -webkit-mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/tax.svg") center/contain no-repeat;
  mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/tax.svg") center/contain no-repeat;
}

.mt-service-panel__icon--progress {
  background: currentColor;
  -webkit-mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/in-progress-svgrepo-com.svg") center/contain no-repeat;
  mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/in-progress-svgrepo-com.svg") center/contain no-repeat;
}

.mt-service-panel__icon--all-accounts {
  background: currentColor;
  -webkit-mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/all-accounts-svgrepo-com.svg") center/contain no-repeat;
  mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/all-accounts-svgrepo-com.svg") center/contain no-repeat;
}

.mt-service-panel__icon--tags {
  background: currentColor;
  -webkit-mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/tags-svgrepo-com.svg") center/contain no-repeat;
  mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/tags-svgrepo-com.svg") center/contain no-repeat;
}

.mt-poduzetnici-page .mt-service-panel__icon {
  width: 1.9rem;
  height: 1.9rem;
  font-size: 1.9rem;
  line-height: 1;
}

.mt-service-panel__icon--budget {
  background: currentColor;
  -webkit-mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/budget.svg") center/contain no-repeat;
  mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/budget.svg") center/contain no-repeat;
}

.mt-service-panel__icon--notice {
  background: currentColor;
  -webkit-mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/notice.svg") center/contain no-repeat;
  mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/notice.svg") center/contain no-repeat;
}

.mt-service-panel__icon--layers {
  background: currentColor;
  -webkit-mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/layers-svgrepo-com.svg") center/contain no-repeat;
  mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/layers-svgrepo-com.svg") center/contain no-repeat;
}

.mt-service-panel__icon--pipe {
  background: currentColor;
  -webkit-mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/pipe-svgrepo-com.svg") center/contain no-repeat;
  mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/pipe-svgrepo-com.svg") center/contain no-repeat;
}


/* --- assets/css/organisms/single-document-files.css --- */
/**
 * Single document files organism.
 *
 * File-attachments list rendered on single-document.php detail pages.
 *
 * @package OpcinaTema
 */

.single-document-files {
  margin-top: 2.5rem;
  padding: 1.4rem;
  border: 1px solid var(--mt-line);
  border-radius: 8px;
  background: var(--mt-paper);
  box-shadow: 0 18px 42px rgba(3, 25, 39, 0.08);
}
.single-document-files h2 {
  margin: 0 0 1rem;
  font-size: 1.45rem;
  line-height: 1.2;
}

.single-document-files__list {
  display: grid;
  gap: 0.75rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* Files now render as the shared card-file (.mt-file-card) rows. */
.single-document-files__cards {
  display: grid;
  gap: 0.75rem;
}

.single-document-files__cards .mt-file-card {
  margin: 0;
}

.single-document-files__item {
  margin: 0;
}
.single-document-files__item a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.85rem;
  align-items: center;
  padding: 0.85rem 0;
  margin: 0;
  min-height: 0;
  border: 0;
  border-top: 1px solid var(--mt-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
  font-weight: inherit;
  line-height: inherit;
  text-decoration: none;
  transform: none;
}
.single-document-files__item:first-child a {
  border-top: 0;
}

.single-document-files__icon {
  width: 2.65rem;
  aspect-ratio: 1;
  border-radius: 8px;
  background-color: rgba(22, 139, 58, 0.12);
  background-image: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/file-text.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 1.25rem;
}

.single-document-files__content {
  min-width: 0;
}

.single-document-files__title,
.single-document-files__meta {
  display: block;
}

.single-document-files__title {
  font-weight: 800;
  line-height: 1.3;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.single-document-files__meta {
  margin-top: 0.1rem;
  color: var(--mt-ink-soft);
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
}

.single-document-files__action {
  color: var(--mt-color-primary);
  font-weight: 900;
  white-space: nowrap;
}

.single-news__page-links,
.single-news__navigation {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--mt-line);
}


/* --- assets/css/organisms/single-news.css --- */
/**
 * Single news article organism.
 *
 * Single-post layout for news articles: header hero with image overlay,
 * breadcrumbs, meta, taxonomies, header-inner layout, inner content
 * wrapper, layout-with-related sidebar variant, and prev/next navigation.
 *
 * The shared aggregate selectors with .mt-content* and the related-layout
 * @media blocks live in mt-home.css because they cross-cut between
 * components.
 *
 * @package OpcinaTema
 */

.single-news {
  background: var(--mt-page-background);
  color: var(--mt-ink);
}

.single-news__header {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--mt-color-primary);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: var(--mt-paper);
}

.single-news__header--image::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(var(--mt-color-primary-rgb), 0.92) 0%, rgba(var(--mt-color-primary-rgb), 0.78) 44%, rgba(3, 25, 39, 0.34) 100%), linear-gradient(0deg, rgba(3, 25, 39, 0.28), rgba(3, 25, 39, 0.28));
  content: "";
}

/* Responsive hero image: sits behind the gradient overlay (z-index -1) but
   above the header's primary-colour fallback background. */
.single-news__header-image {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.single-news__header-inner {
  width: min(100% - 2rem, 860px);
  margin-inline: auto;
}

.single-news--with-related .single-news__header-inner {
  width: min(100% - 2rem, 1260px);
}

.single-news__inner {
  width: min(100% - 2rem, 860px);
  margin-inline: auto;
}

.single-news--with-related .single-news__inner {
  width: min(100% - 2rem, 1260px);
}


.single-news__header-inner {
  min-height: 17rem;
  padding-block: 2.6rem;
  display: grid;
  align-content: center;
}
.single-news__header-inner h1 {
  max-width: 54rem;
  margin: 0.65rem 0 0;
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
}

.single-news__meta {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem 0.85rem;
  margin: 0.65rem 0 0;
  font-size: 1.08rem;
  font-weight: 700;
}

/* Estimated reading time, separated from the date by a small dot. */
.single-news__read-time {
  position: relative;
  padding-left: 0.95rem;
  font-weight: var(--mt-font-weight-medium);
}

.single-news__read-time::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 0.28rem;
  height: 0.28rem;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.55;
  transform: translateY(-50%);
}

.single-news__taxonomies {
  display: grid;
  gap: 0.4rem;
  max-width: 54rem;
  margin-top: 0.9rem;
}

.single-news__term-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.4rem;
  align-items: baseline;
}

.single-news__term-label {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0;
}

.single-news__term-list {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.18rem;
  align-items: baseline;
}

.single-news__term-value {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.35;
}

.single-news__term-value:not(:last-child)::after {
  content: ",";
}
.single-news__header .mt-breadcrumbs {
  margin-bottom: 0.75rem;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.35;
}
.single-news__header .mt-breadcrumbs a {
  color: var(--mt-paper);
  border-color: rgba(255, 255, 255, 0.56);
}
.single-news__header .mt-breadcrumbs a:hover, .single-news__header .mt-breadcrumbs a:focus-visible {
  color: var(--mt-paper);
  border-color: var(--mt-paper);
}
.single-news__header .mt-breadcrumbs span[aria-current=page] {
  color: var(--mt-paper);
}
.single-news__inner {
  padding-block: 3.25rem 5rem;
}

.single-news__layout {
  max-width: 860px;
  margin-inline: auto;
}

.single-news__layout--with-related {
  display: grid;
  grid-template-columns: minmax(0, 780px) minmax(18rem, 23.5rem);
  column-gap: clamp(3rem, 4vw, 4rem);
  row-gap: 2rem;
  align-items: start;
  width: 100%;
  max-width: calc(780px + 23.5rem + 4rem);
  margin-inline: auto;
}


.single-news__content > *:first-child {
  margin-top: 0;
}
.single-news__navigation {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
}

.single-news--with-related .single-news__navigation {
  max-width: 780px;
  margin-inline: auto;
}

.single-news__navigation-item--next {
  justify-self: end;
  text-align: right;
}

.single-news__navigation a {
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.35;
}


/* --- assets/css/organisms/site-brand.css --- */
/**
 * Site brand organism.
 *
 * The municipality brand cluster rendered inside the site header.
 * Supports three variants via the site-header `brand_variant` arg:
 *
 *   - bar      (default) — vertical accent bar + 2-line eyebrow + name
 *   - logo     — WordPress custom logo image + name
 *   - wordmark — large all-caps wordmark + decorative seal (legacy)
 *
 * All visual values flow through component tokens with fallbacks to
 * global tokens; variants change tokens, not rules.
 *
 * @package OpcinaTema
 */

/* -- Base wrapper -- */

.mt-site-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--mt-site-brand-gap, var(--mt-space-md));
  text-decoration: none;
  color: inherit;
}

/* -- Variant: --bar (default for the redesigned header) -- */

.mt-site-brand--bar {
  --mt-site-brand-name-height: auto;
  --mt-site-brand-name-max-width: none;
  --mt-site-brand-name-font: var(--mt-font-serif);
  --mt-site-brand-name-size: var(--mt-font-size-lg);
  --mt-site-brand-name-weight: var(--mt-font-weight-medium);
  --mt-site-brand-name-line-height: 1.1;
  --mt-site-brand-name-transform: none;
}

.mt-site-brand__bar {
  flex: 0 0 auto;
  width: var(--mt-site-brand-bar-width, 3px);
  height: var(--mt-site-brand-bar-height, 2.625rem);
  background: var(--mt-site-brand-bar-color, var(--mt-color-primary));
  border-radius: var(--mt-site-brand-bar-radius, 2px);
}

.mt-site-brand__text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.mt-site-brand__eyebrow {
  display: block;
  margin-bottom: var(--mt-site-brand-eyebrow-margin, var(--mt-space-xs));
  color: var(--mt-site-brand-eyebrow-color, var(--mt-color-text-muted));
  font-family: var(--mt-site-brand-eyebrow-font, var(--mt-font-mono));
  font-size: var(--mt-site-brand-eyebrow-size, var(--mt-font-size-2xs));
  font-weight: var(--mt-font-weight-medium);
  letter-spacing: var(--mt-site-brand-eyebrow-tracking, 0.12em);
  text-transform: uppercase;
}

/* -- Shared: name (tokenized for variant overrides) -- */

.mt-site-brand__name {
  display: flex;
  align-items: center;
  height: var(--mt-site-brand-name-height, var(--mt-site-header-height));
  max-width: var(--mt-site-brand-name-max-width, min(22rem, 34vw));
  overflow: hidden;
  color: var(--mt-site-brand-name-color, var(--mt-color-text));
  font-family: var(--mt-site-brand-name-font, var(--mt-font-brand));
  font-size: var(--mt-site-brand-name-size, calc(var(--mt-site-header-height) * var(--mt-site-brand-title-scale)));
  font-weight: var(--mt-site-brand-name-weight, 400);
  line-height: var(--mt-site-brand-name-line-height, 0.82);
  letter-spacing: var(--mt-site-brand-name-letter-spacing, var(--mt-heading-letter-spacing));
  text-overflow: ellipsis;
  text-transform: var(--mt-site-brand-name-transform, uppercase);
  white-space: nowrap;
}

/* -- Variant: --wordmark (legacy) -- */

.mt-site-brand__wordmark {
  display: flex;
  align-items: center;
  height: var(--mt-site-header-height);
  max-width: min(60vw, 31rem);
  overflow: hidden;
  font-family: var(--mt-font-brand);
  font-size: calc(var(--mt-site-header-height) * var(--mt-site-brand-title-scale));
  font-weight: 400;
  line-height: 0.82;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.mt-site-brand__seal {
  position: relative;
  width: 2.1rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--mt-ink);
  flex: 0 0 auto;
}
.mt-site-brand__seal::before, .mt-site-brand__seal::after {
  position: absolute;
  content: "";
  left: 50%;
  transform: translateX(-50%);
}
.mt-site-brand__seal::before {
  top: 0.4rem;
  width: 0.48rem;
  height: 0.48rem;
  border-radius: 50%;
  background: var(--mt-paper);
  box-shadow: -0.52rem 0.62rem 0 -0.1rem var(--mt-paper), 0.52rem 0.62rem 0 -0.1rem var(--mt-paper);
}
.mt-site-brand__seal::after {
  bottom: 0.42rem;
  width: 1.12rem;
  height: 0.56rem;
  border: 2px solid var(--mt-paper);
  border-top: 0;
}

.mt-site-brand__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 var(--mt-site-brand-logo-size);
  width: var(--mt-site-brand-logo-size);
  height: var(--mt-site-brand-logo-size);
}

.mt-site-brand__logo-image {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}


/* --- assets/css/organisms/site-footer.css --- */
/**
 * Site footer organism.
 *
 * Bottom-of-page chrome: logo + seal, primary/secondary link columns,
 * social icons, contact info, meta links. Renders
 * on every page via footer.php.
 *
 * @package OpcinaTema
 */

body > .mt-site-footer {
  flex-shrink: 0;
}

.mt-site-footer {
  --mt-site-footer-bg: var(--mt-color-primary);
  --mt-site-footer-color: rgba(255, 255, 255, 0.85);
  --mt-site-footer-padding: var(--mt-space-3xl) var(--mt-section-gutter) var(--mt-space-xl);
  --mt-site-footer-main-grid: minmax(13rem, 1.4fr) minmax(11rem, 1fr) minmax(11rem, 1fr) minmax(14rem, 1.2fr);
  --mt-site-footer-main-gap: var(--mt-space-2xl);
  /* Cap the footer to the shared chrome width so it is the same on every page
     (was --mt-section-max-width, which is wider on inner pages than on home). */
  --mt-site-footer-main-max-width: var(--mt-home-max-width);
  --mt-site-footer-main-padding-block: 0 var(--mt-space-2xl);
  position: relative;
  padding: var(--mt-site-footer-padding);
  background: var(--mt-site-footer-bg);
  color: var(--mt-site-footer-color);
}

/* Legacy floating-seal decoration — hidden under the redesign, kept */
/* available in markup for sites that opt back into the old footer.   */
.mt-site-footer__logo,
.mt-site-footer__seal {
  display: none;
}

.mt-site-footer__main {
  display: grid;
  grid-template-columns: var(--mt-site-footer-main-grid);
  gap: var(--mt-site-footer-main-gap);
  align-items: start;
  width: min(100% - 2rem, var(--mt-site-footer-main-max-width));
  margin-inline: auto;
  padding-block: var(--mt-site-footer-main-padding-block);
}

.mt-site-footer__links {
  --mt-site-footer-links-gap: var(--mt-space-xs);
  --mt-site-footer-link-color: var(--mt-site-footer-color);
  --mt-site-footer-link-hover: #ffffff;
  display: grid;
  gap: var(--mt-site-footer-links-gap);
}
.mt-site-footer__links a {
  padding-block: var(--mt-space-xs);
  color: var(--mt-site-footer-link-color);
  font-size: var(--mt-font-size-sm);
  font-weight: var(--mt-font-weight-regular);
  line-height: 1.4;
  text-decoration: none;
  transition: color var(--mt-motion-fast);
}
.mt-site-footer__links a:hover,
.mt-site-footer__links a:focus-visible {
  color: var(--mt-site-footer-link-hover);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.mt-site-footer__links--secondary {
  --mt-site-footer-links-gap: var(--mt-space-sm);
}

.mt-site-footer__connect {
  display: grid;
  gap: 1rem;
  justify-items: start;
}

.mt-site-footer__eyebrow {
  --mt-site-footer-eyebrow-color: rgba(255, 255, 255, 0.6);
  --mt-site-footer-eyebrow-font: var(--mt-font-mono);
  --mt-site-footer-eyebrow-size: var(--mt-font-size-2xs);
  --mt-site-footer-eyebrow-tracking: var(--mt-eyebrow-letter-spacing-wide);
  margin: 0;
  color: var(--mt-site-footer-eyebrow-color);
  font-family: var(--mt-site-footer-eyebrow-font);
  font-size: var(--mt-site-footer-eyebrow-size);
  font-weight: var(--mt-font-weight-medium);
  letter-spacing: var(--mt-site-footer-eyebrow-tracking);
  line-height: 1.35;
  text-transform: uppercase;
}

.mt-site-footer__social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.mt-site-footer__social a {
  display: inline-grid;
  width: 2.35rem;
  aspect-ratio: 1;
  place-items: center;
  color: var(--mt-paper);
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  transition: color 180ms ease, background 180ms ease, transform 180ms ease;
}

.mt-site-footer__social a:hover,
.mt-site-footer__social a:focus-visible {
  color: #ffffff;
  background: var(--mt-color-primary-bright);
  transform: translateY(-2px);
}

.mt-site-footer__social .dashicons {
  width: 1.45rem;
  height: 1.45rem;
  font-size: 1.45rem;
  line-height: 1;
}

.mt-site-footer__contact-list {
  display: grid;
  gap: 0.3rem;
  padding: 0;
  margin: 0;
  color: rgba(255, 255, 255, 0.74);
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.45;
  list-style: none;
}

.mt-site-footer__email,
.mt-site-footer__contact-link {
  color: rgba(255, 255, 255, 0.74);
  font-size: 0.95rem;
  font-weight: 400;
  text-decoration: none;
  transition: color 180ms ease;
}

.mt-site-footer__email:hover,
.mt-site-footer__email:focus-visible,
.mt-site-footer__contact-link:hover,
.mt-site-footer__contact-link:focus-visible {
  color: var(--mt-color-primary-bright);
}

.mt-site-footer__meta {
  --mt-site-footer-meta-border: 1px solid rgba(255, 255, 255, 0.12);
  --mt-site-footer-meta-link-color: rgba(255, 255, 255, 0.6);
  --mt-site-footer-meta-link-hover: #ffffff;
  border-top: var(--mt-site-footer-meta-border);
}

.mt-site-footer__meta ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--mt-space-sm) var(--mt-space-lg);
  padding-block: var(--mt-space-lg);
  margin-inline: auto;
  width: min(100% - 2rem, var(--mt-site-footer-main-max-width));
}

.mt-site-footer__meta a {
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  color: var(--mt-site-footer-meta-link-color);
  font-size: var(--mt-font-size-xs);
  font-weight: var(--mt-font-weight-regular);
  line-height: 1.35;
  text-decoration: none;
  transition: color var(--mt-motion-fast);
}

.mt-site-footer__meta a:hover,
.mt-site-footer__meta a:focus-visible {
  color: var(--mt-site-footer-meta-link-hover);
}

/* The fixed mobile tab bar (position:fixed, bottom:0) overlaps the bottom of the
 * page. Reserve clearance on the footer so the legal/meta links aren't hidden
 * behind it. The extra space is footer-coloured, so it blends in. */
@media (max-width: 768px) {
  .mt-site-footer {
    padding-bottom: calc(6.5rem + env(safe-area-inset-bottom, 0px));
  }
}



/* --- assets/css/organisms/site-header.css --- */
/**
 * Site header organism.
 *
 * Top-of-page navigation chrome: brandline, primary tabs, mega menu,
 * login link, mobile menu toggle. Renders on every page via header.php.
 *
 * Tightly coupled with site-brand (which is rendered inside the brandline).
 *
 * @package OpcinaTema
 */

html.mt-site-header-menu-is-open,
html.mt-site-header-menu-is-open body {
  overflow: hidden;
}
.mt-site-header {
  --mt-site-header-height: clamp(64px, 5vw, 88px);
  --mt-site-header-bg: var(--mt-color-primary);
  --mt-site-header-border-top: 0;
  --mt-site-header-border-bottom: 0;
  --mt-site-header-padding-inline: var(--mt-section-gutter);
  --mt-site-header-gap: var(--mt-space-md);
  --mt-site-brand-logo-size: 3.5rem;
  --mt-site-brand-title-scale: 0.6;
  /* In the normal flow by default (a graceful no-JS fallback — a plain header).
     mt-sticky-header.js adds .is-fixed to float it and condense it on scroll,
     out of the document flow so the page never jumps. See below. */
  position: relative;
  isolation: isolate;
  background: var(--mt-site-header-bg);
  /* Primary-blue bar with light text/controls. The mega dropdown and Izbornik
     drawer set their own colours, so they stay readable. */
  color: var(--mt-color-primary-contrast);
  border-top: var(--mt-site-header-border-top);
  border-bottom: var(--mt-site-header-border-bottom);
}

.mt-site-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mt-site-header-gap);
  min-height: var(--mt-site-header-height);
  padding-inline: var(--mt-site-header-padding-inline);
}

/* -- Branding masthead: municipal crest + place name, centred above the nav row
   (zagreb.hr style). Carries the branding that used to live in the homepage hero. -- */
.mt-site-header__masthead {
  display: flex;
  justify-content: center;
  padding: clamp(1.1rem, 2.2vw, 1.75rem) var(--mt-site-header-padding-inline) clamp(0.85rem, 1.6vw, 1.3rem);
}

.mt-site-header__crest-link {
  display: inline-flex;
  align-items: center;
  gap: 1.1rem;
  min-width: 0;
  color: #ffffff;
  text-decoration: none;
}

.mt-site-header__crest {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: clamp(3rem, 4.6vw, 4.25rem);
  height: clamp(3.5rem, 5.4vw, 4.9rem);
}

.mt-site-header__crest-img,
.mt-site-header__crest img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  object-position: center;
}

.mt-site-header__masthead-text {
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
  min-width: 0;
  padding-left: 1.1rem;
  border-left: 1px solid rgba(255, 255, 255, 0.32);
}

.mt-site-header__masthead-eyebrow {
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(0.82rem, 1vw, 1.02rem);
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.15;
  text-transform: uppercase;
}

.mt-site-header__masthead-title {
  color: #ffffff;
  font-size: clamp(1.45rem, 2.1vw, 2.05rem);
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1;
  text-transform: uppercase;
}

/* -- Floating header. mt-sticky-header.js adds .is-fixed to take the header OUT
   of the document flow (position:fixed) so condensing it on scroll doesn't change
   the page height — the page never jumps and the header genuinely shrinks (how
   zagreb.hr does it). The utility strip stays in the normal flow and scrolls away
   above it; JS keeps the header's `top` docked just under the strip until it's
   gone, sizes the spacer to the header's full height, and toggles .is-condensed. -- */
.mt-site-header.is-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

/* Reserves the fixed header's full height in the flow so content starts below it;
   JS sets its exact pixel height (0 until then, and when the header isn't fixed). */
.mt-site-header-spacer {
  min-height: 0;
}

/* While JS probes the full vs condensed height, suppress transitions so it never
   flashes. */
.mt-site-header.is-measuring,
.mt-site-header.is-measuring * {
  transition: none !important;
}

/* Smoothly animate the pieces the condense shrinks. */
.mt-site-header__masthead {
  transition: padding 0.3s ease;
}

.mt-site-header__crest {
  transition: width 0.3s ease, height 0.3s ease;
}

.mt-site-header__masthead-title {
  transition: font-size 0.3s ease;
}

/* Condensed: tighten the masthead (smaller crest + wordmark, less padding) and
   lift the bar with a soft shadow. */
.mt-site-header.is-condensed {
  box-shadow: 0 0.4rem 1rem rgba(3, 25, 39, 0.18);
}

.mt-site-header.is-condensed .mt-site-header__masthead {
  padding-block: 0.5rem 0.45rem;
}

.mt-site-header.is-condensed .mt-site-header__crest {
  width: clamp(2.1rem, 3vw, 2.75rem);
  height: clamp(2.45rem, 3.5vw, 3.2rem);
}

.mt-site-header.is-condensed .mt-site-header__masthead-title {
  font-size: clamp(1.1rem, 1.7vw, 1.45rem);
}

.mt-site-header.is-condensed .mt-site-header__masthead-eyebrow {
  font-size: clamp(0.68rem, 0.85vw, 0.82rem);
}

.mt-site-header.is-condensed .mt-site-header__masthead-sub {
  font-size: clamp(0.52rem, 0.62vw, 0.62rem);
}

@media (prefers-reduced-motion: reduce) {
  .mt-site-header__masthead,
  .mt-site-header__crest,
  .mt-site-header__masthead-title {
    transition: none;
  }
}

.mt-site-header__masthead-sub {
  margin-top: 0.35rem;
  color: rgba(255, 255, 255, 0.6);
  font-size: clamp(0.6rem, 0.72vw, 0.72rem);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.mt-site-brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 0.65rem;
  height: var(--mt-site-header-height);
  min-width: 0;
  color: var(--mt-color-primary-contrast);
  text-decoration: none;
}

.mt-site-header__brandline {
  display: inline-flex;
  align-items: center;
  gap: 1.1rem;
  flex: 0 1 auto;
  min-width: 0;
  max-width: min(44rem, 50% - 21rem);
  overflow: hidden;
}

.mt-site-header__section-title {
  display: inline-flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  min-height: 2.35rem;
  padding-left: 0.95rem;
  overflow: hidden;
  border-left: 1px solid rgba(255, 255, 255, 0.28);
  font-size: clamp(1.65rem, 2.6vw, 2.25rem);
  font-weight: 800;
  line-height: 1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

.mt-site-header__section-title span {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mt-site-header__brandline.mt-site-header__brandline--front-title {
  max-width: none;
  overflow: visible;
}

.mt-site-header__section-title--full,
.mt-site-header__section-title--full span {
  overflow: visible;
  text-overflow: clip;
}

.mt-site-header__section-title--full {
  flex: 0 0 auto;
}

.mt-site-header__tabs {
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  width: min(52rem, 100% - 34rem);
  min-width: 30rem;
  padding: 0.2rem;
  overflow-x: auto;
  scrollbar-width: none;
  transform: translate(-50%, -50%);
}

.mt-site-header__tabs::-webkit-scrollbar {
  display: none;
}

.mt-site-header__tab {
  --mt-site-header-tab-padding: var(--mt-space-sm) calc(var(--mt-space-sm) + var(--mt-space-xs));
  --mt-site-header-tab-radius: var(--mt-radius-md);
  --mt-site-header-tab-color: rgba(255, 255, 255, 0.82);
  --mt-site-header-tab-font-size: var(--mt-font-size-sm);
  --mt-site-header-tab-font-weight: var(--mt-font-weight-medium);
  --mt-site-header-tab-hover-bg: rgba(255, 255, 255, 0.14);
  --mt-site-header-tab-hover-color: #ffffff;
  /* Active ("you are here") reads as a brighter white pill on the primary bar.
     (Re-set to dark tokens in the ≤1280 mobile overlay, which is a light sheet.) */
  --mt-site-header-tab-active-bg: rgba(255, 255, 255, 0.18);
  --mt-site-header-tab-active-color: #ffffff;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mt-space-xs);
  padding: var(--mt-site-header-tab-padding);
  background: transparent;
  border: 0;
  border-radius: var(--mt-site-header-tab-radius);
  color: var(--mt-site-header-tab-color);
  font-size: var(--mt-site-header-tab-font-size);
  font-weight: var(--mt-site-header-tab-font-weight);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--mt-motion-fast), color var(--mt-motion-fast);
}

.mt-site-header__tab[data-header-mega-trigger]::after {
  width: 0.42rem;
  height: 0.42rem;
  margin-top: -0.12rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  content: "";
  opacity: 0.5;
  transform: rotate(45deg);
  transition: transform var(--mt-motion-fast);
}

.mt-site-header__tab:hover,
.mt-site-header__tab:focus-visible {
  background: var(--mt-site-header-tab-hover-bg);
  color: var(--mt-site-header-tab-hover-color);
  outline: none;
}

.mt-site-header__tab.is-mega-active,
.mt-site-header__tab[aria-current=page] {
  background: var(--mt-site-header-tab-active-bg);
  color: var(--mt-site-header-tab-active-color);
  font-weight: 600;
}

/* Mobile overlay menu: the faint desktop tint is too subtle on the big centred
   items, so give the current section a solid primary pill with contrast text. */
@media (max-width: 1280px) {
  .mt-site-header__tab[aria-current=page] {
    background: var(--mt-color-primary);
    color: var(--mt-color-primary-contrast);
    border-radius: var(--mt-radius-md);
  }
}

.mt-site-header__tab.is-mega-active[data-header-mega-trigger]::after {
  transform: rotate(225deg) translate(-0.08rem, -0.08rem);
}

.mt-site-header__tab--login {
  display: none;
  gap: 0.5rem;
}

.mt-site-header-mega {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  z-index: 55;
  padding: 0 0 clamp(0.85rem, 1.35vw, 1.15rem);
  background: transparent;
  border-top: 0;
  box-shadow: none;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-0.6rem);
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
  visibility: hidden;
}

.mt-site-header-mega[hidden],
.mt-site-header-mega__panel[hidden] {
  display: none;
}

.mt-site-header-mega.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  visibility: visible;
}

.mt-site-header-mega__inner {
  --mt-site-header-mega-pointer-left: 50%;
  /* Match the content container so the panel lines up edge-to-edge with the page
     content below it (same 1260px max-width + 2rem total gutter as .mt-container). */
  --mt-site-header-mega-max-width: var(--mt-section-max-width);
  --mt-site-header-mega-padding: var(--mt-space-xl) var(--mt-space-2xl);
  --mt-site-header-mega-bg: var(--mt-color-surface);
  --mt-site-header-mega-border: 1px solid var(--mt-color-border);
  --mt-site-header-mega-border-top: 3px solid var(--mt-color-primary);
  --mt-site-header-mega-radius: 0 0 var(--mt-radius-card) var(--mt-radius-card);
  --mt-site-header-mega-shadow: var(--mt-shadow-lg);
  position: relative;
  width: min(100% - 2rem, var(--mt-site-header-mega-max-width));
  margin-inline: auto;
  padding: var(--mt-site-header-mega-padding);
  background: var(--mt-site-header-mega-bg);
  border: var(--mt-site-header-mega-border);
  border-top: var(--mt-site-header-mega-border-top);
  border-radius: var(--mt-site-header-mega-radius);
  box-shadow: var(--mt-site-header-mega-shadow);
  overflow: visible;
}

.mt-site-header-mega__inner::after {
  position: absolute;
  top: -0.46rem;
  left: var(--mt-site-header-mega-pointer-left);
  z-index: 1;
  width: 0.9rem;
  height: 0.9rem;
  background: var(--mt-color-primary);
  content: "";
  transform: translateX(-50%) rotate(45deg);
}

.mt-site-header-mega__panel {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: start;
  gap: clamp(1.4rem, 2vw, 1.9rem);
  min-height: 0;
}

.mt-site-header-mega__summary {
  display: block;
  max-width: 28rem;
  min-height: 0;
  min-width: 0;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--mt-ink);
  box-shadow: none;
}
.mt-site-header-mega__summary .mt-card-label {
  margin: 0 0 0.35rem;
  color: var(--mt-color-primary);
  font-size: 0.82rem;
  letter-spacing: 0.14em;
}
.mt-site-header-mega__summary h2,
.mt-site-header-mega__summary p {
  margin: 0;
}
.mt-site-header-mega__summary h2 {
  font-size: clamp(1.5rem, 1.9vw, 1.95rem);
  font-weight: 700;
  line-height: 1.12;
  overflow-wrap: normal;
  word-break: normal;
}
.mt-site-header-mega__summary h2 a {
  display: inline;
  color: inherit;
  overflow-wrap: normal;
  text-decoration-color: rgba(54, 201, 87, 0.85);
  text-decoration-thickness: 0.14rem;
  text-underline-offset: 0.18rem;
  transition: color 160ms ease, text-decoration-color 160ms ease;
  word-break: normal;
}
.mt-site-header-mega__summary h2 a:hover,
.mt-site-header-mega__summary h2 a:focus-visible {
  color: var(--mt-color-primary-bright);
  text-decoration-color: currentColor;
  outline: none;
}
.mt-site-header-mega__summary h2 a span {
  display: inline-block;
  width: 1.1rem;
  height: 1.1rem;
  margin-left: 0.42rem;
  background: currentColor;
  filter: drop-shadow(0.06rem 0 currentColor) drop-shadow(-0.06rem 0 currentColor) drop-shadow(0 0.06rem currentColor) drop-shadow(0 -0.06rem currentColor);
  vertical-align: 0.04em;
  -webkit-mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/open-in-new-svgrepo-com.svg") center/contain no-repeat;
  mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/open-in-new-svgrepo-com.svg") center/contain no-repeat;
}
.mt-site-header-mega__summary > p:not(.mt-card-label) {
  display: -webkit-box;
  max-width: 32rem;
  margin-top: 0.5rem;
  overflow: hidden;
  color: var(--mt-ink-soft);
  font-size: 0.98rem;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.mt-site-header-mega__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr));
  align-items: start;
  gap: clamp(1.25rem, 2vw, 2.25rem);
  min-height: 0;
}

/* Clean grouped link-lists (zagreb-style): a category heading over a vertical
 * list of every subitem in order. No card chrome, no icons — the mega menu
 * reads as a light directory rather than a wall of cards. */
.mt-site-header-mega__group {
  min-width: 0;
}
.mt-site-header-mega__group-title {
  margin: 0 0 0.7rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--mt-color-border);
  color: var(--mt-color-primary);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  line-height: 1.2;
  text-transform: uppercase;
}
.mt-site-header-mega__group-links {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mt-site-header-mega__group-links a {
  display: block;
  color: var(--mt-ink);
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.35;
  text-decoration: none;
  transition: color 160ms ease;
}
.mt-site-header-mega__group-links a:hover,
.mt-site-header-mega__group-links a:focus-visible {
  color: var(--mt-color-primary);
  text-decoration: underline;
  text-underline-offset: 0.18rem;
  outline: none;
}

.mt-site-header__actions {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex: 0 0 auto;
  margin-left: auto;
}

.mt-site-header__login {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 36px;
  padding: 0 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--mt-radius-md);
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.mt-site-header__login:hover,
.mt-site-header__login:focus-visible {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--mt-color-primary);
}

.mt-site-header__login-icon {
  width: 1.1rem;
  height: 1.1rem;
  font-size: 1.1rem;
  line-height: 1;
}

.mt-site-header__menu {
  position: relative;
  z-index: 70;
  /* Shown on all widths now that it is the "Izbornik" trigger (the top header
     is hidden on phones, where the bottom tab-bar "Meni" opens it instead). */
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.25rem;
  padding: 0 0.35rem;
  border: 0;
  background: transparent;
  /* Match the Prijava login control exactly (size + weight set in pages.css). */
  color: rgba(255, 255, 255, 0.92);
  font: inherit;
  font-size: 1.2rem;
  font-weight: 700;
  cursor: pointer;
}

.mt-site-header__menu .dashicons {
  width: 1.35rem;
  height: 1.35rem;
  font-size: 1.35rem;
  line-height: 1;
}

/* -- Header search: icon toggle + expandable panel ------------------------- */

/* Icon-only search trigger, styled like the Prijava control (white outline on
   the primary header; inverts to a solid white pill on hover / while open). */
.mt-site-header__search-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  background: transparent;
  color: rgba(255, 255, 255, 0.92);
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.mt-site-header__search-toggle:hover,
.mt-site-header__search-toggle:focus-visible,
.mt-site-header__search-toggle[aria-expanded="true"] {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--mt-color-primary);
  outline: none;
}

.mt-site-header__search-toggle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.2rem;
  height: 1.2rem;
  line-height: 1;
}

.mt-site-header__search-toggle-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Swap the search glyph for a × while the panel is open. */
.mt-site-header__search-toggle-icon--close {
  display: none;
}

.mt-site-header__search-toggle[aria-expanded="true"] .mt-site-header__search-toggle-icon--open {
  display: none;
}

.mt-site-header__search-toggle[aria-expanded="true"] .mt-site-header__search-toggle-icon--close {
  display: inline-flex;
}

/* Full-width panel that expands out of the header. Collapsed by default (no
   `hidden` attr) so the open/close can animate; the live-search results float
   (position:fixed) so overflow:hidden here never clips them. */
.mt-site-header-search {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  background: var(--mt-color-primary);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  transition: max-height 300ms ease, opacity 200ms ease, visibility 0s linear 300ms;
}

.mt-site-header-search.is-open {
  max-height: 12rem;
  opacity: 1;
  visibility: visible;
  transition: max-height 300ms ease, opacity 200ms ease, visibility 0s;
}

.mt-site-header-search__inner {
  width: min(100% - var(--mt-chrome-gutter, 2rem), var(--mt-home-max-width, 1260px));
  margin-inline: auto;
  padding-block: 1.15rem 1.4rem;
}

/* Center the search bar in the panel. The base `.mt-search` caps the form at
   38rem and left-aligns it (plus a stray top margin from its hero context); here
   we widen it a touch and center it, with the panel padding handling the spacing.
   (Two classes out-specify the base `.mt-search` rule regardless of load order.) */
.mt-site-header-search .mt-site-header-search__form {
  width: min(100%, 46rem);
  margin-top: 0;
  margin-inline: auto;
}

/* White input row with a primary-blue submit button, matching the reference. */
.mt-site-header-search__form .mt-search-form {
  --mt-search-form-border-color: #ffffff;
  --mt-search-form-border-width: 1px;
  --mt-search-form-min-height: 3.4rem;
  --mt-search-form-submit-bg: var(--mt-color-primary);
  --mt-search-form-submit-color: #ffffff;
  --mt-search-form-submit-divider: transparent;
  --mt-search-form-submit-width: 3.6rem;
}


/* --- assets/css/organisms/tile.css --- */
/**
 * Tile organism — numbered quick-action card.
 *
 * Anchor card with a top-right numeric badge, top-left icon chip,
 * vertical-flex name + meta stack with the meta pinned to the bottom.
 * Hover/focus tints the border primary and lifts the card 1px.
 *
 * Variants:
 *   default       primary-tint icon chip + primary glyph
 *   --muted       neutral chip + ink glyph (for non-primary tiles)
 *
 * Used inside any flex / grid layout (e.g. utilities.css's .mt-grid--*
 * helpers or a host-specific section grid). The tile itself owns no
 * grid layout — only its internal stack.
 *
 * @package OpcinaTema
 */

.mt-tile {
	--mt-tile-bg: var(--mt-color-surface);
	--mt-tile-color: var(--mt-color-text);
	--mt-tile-border-color: var(--mt-color-border);
	--mt-tile-border-color-hover: var(--mt-color-primary);
	--mt-tile-radius: var(--mt-radius-card);
	--mt-tile-padding-block: calc(var(--mt-space-md) + var(--mt-space-xs)) var(--mt-space-md);
	--mt-tile-padding-inline: var(--mt-space-md);
	--mt-tile-min-height: 9.25rem;
	--mt-tile-gap: var(--mt-space-xs);
	--mt-tile-icon-size: 2.25rem;
	--mt-tile-icon-radius: var(--mt-radius-circle);
	--mt-tile-icon-bg: var(--mt-color-primary-tint);
	--mt-tile-icon-color: var(--mt-color-icon);
	--mt-tile-icon-bg-hover: var(--mt-color-primary);
	--mt-tile-icon-color-hover: var(--mt-color-primary-contrast);
	--mt-tile-icon-glyph-size: 1.25rem;
	--mt-tile-icon-spacing: var(--mt-space-md);
	--mt-tile-number-color: var(--mt-color-text-subtle);
	--mt-tile-name-size: var(--mt-font-size-sm);
	--mt-tile-name-weight: var(--mt-font-weight-medium);
	--mt-tile-meta-color: var(--mt-color-text-soft);
	--mt-tile-meta-size: var(--mt-font-size-2xs);
	--mt-tile-shadow-hover: var(--mt-shadow-sm);

	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--mt-tile-gap);
	min-height: var(--mt-tile-min-height);
	padding: var(--mt-tile-padding-block);
	padding-inline: var(--mt-tile-padding-inline);
	background: var(--mt-tile-bg);
	color: var(--mt-tile-color);
	border: 1px solid var(--mt-tile-border-color);
	border-radius: var(--mt-tile-radius);
	text-align: left;
	text-decoration: none;
	transition:
		border-color var(--mt-motion-fast),
		box-shadow var(--mt-motion-fast),
		transform var(--mt-motion-fast);
}

.mt-tile:hover,
.mt-tile:focus-visible {
	border-color: var(--mt-tile-border-color-hover);
	box-shadow: var(--mt-tile-shadow-hover);
	transform: translateY(-1px);
	outline: none;
}

/* -- Number badge (top-right) -- */

.mt-tile__number {
	position: absolute;
	top: calc(var(--mt-space-md) + 2px);
	right: var(--mt-tile-padding-inline);
	color: var(--mt-tile-number-color);
	font-family: var(--mt-font-mono);
	font-size: var(--mt-font-size-2xs);
	font-weight: var(--mt-font-weight-regular);
	letter-spacing: 0.05em;
	line-height: 1;
	pointer-events: none;
}

/* -- Icon chip (top-left) -- */

.mt-tile__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--mt-tile-icon-size);
	height: var(--mt-tile-icon-size);
	margin-bottom: var(--mt-tile-icon-spacing);
	background: var(--mt-tile-icon-bg);
	color: var(--mt-tile-icon-color);
	border-radius: var(--mt-tile-icon-radius);
	flex: 0 0 auto;
	transition: background var(--mt-motion-fast), color var(--mt-motion-fast);
}

/* Duotone chip fills with solid primary on hover/focus for an alive feel. */
.mt-tile:hover .mt-tile__icon,
.mt-tile:focus-visible .mt-tile__icon {
	background: var(--mt-tile-icon-bg-hover);
	color: var(--mt-tile-icon-color-hover);
}

.mt-tile__icon > * {
	width: var(--mt-tile-icon-glyph-size);
	height: var(--mt-tile-icon-glyph-size);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: var(--mt-tile-icon-glyph-size);
	line-height: 1;
}

.mt-tile__icon svg {
	width: 100%;
	height: 100%;
	color: inherit;
}

/* -- Name + meta -- */

.mt-tile__name {
	color: var(--mt-tile-color);
	font-family: var(--mt-font-sans);
	font-size: var(--mt-tile-name-size);
	font-weight: var(--mt-tile-name-weight);
	line-height: var(--mt-line-height-tight);
}

.mt-tile__meta {
	margin-top: auto;
	color: var(--mt-tile-meta-color);
	font-family: var(--mt-font-mono);
	font-size: var(--mt-tile-meta-size);
	font-weight: var(--mt-font-weight-regular);
	letter-spacing: var(--mt-eyebrow-letter-spacing);
	line-height: 1;
	text-transform: uppercase;
}

/* -- Tone: --muted -- */

.mt-tile--muted {
	--mt-tile-icon-bg: var(--mt-color-surface-muted);
	--mt-tile-icon-color: var(--mt-color-text);
}


/* --- assets/css/organisms/utility-strip.css --- */
/**
 * Utility-strip organism — slim light top bar.
 *
 * Sits above the main site-header. Renders contact items (location,
 * phone, opening hours). Full viewport width with section-gutter
 * padding. A slim near-black band above the primary-blue header.
 *
 * @package OpcinaTema
 */

.mt-utility-strip {
	--mt-utility-strip-bg: var(--mt-color-surface-dark);
	--mt-utility-strip-color: rgba(255, 255, 255, 0.8);
	--mt-utility-strip-link-color: rgba(255, 255, 255, 0.8);
	--mt-utility-strip-link-hover: #ffffff;
	--mt-utility-strip-border: 1px solid rgba(255, 255, 255, 0.12);
	--mt-utility-strip-height: 2.25rem;
	--mt-utility-strip-padding-inline: var(--mt-section-gutter);
	--mt-utility-strip-gap: var(--mt-space-md);
	--mt-utility-strip-item-gap: var(--mt-space-md);
	--mt-utility-strip-sep-color: rgba(255, 255, 255, 0.22);
	--mt-utility-strip-sep-height: 0.875rem;
	--mt-utility-strip-icon-size: 0.875rem;
	--mt-utility-strip-icon-opacity: 0.8;

	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mt-utility-strip-gap);
	min-height: var(--mt-utility-strip-height);
	padding-inline: var(--mt-utility-strip-padding-inline);
	background: var(--mt-utility-strip-bg);
	border-bottom: var(--mt-utility-strip-border);
	color: var(--mt-utility-strip-color);
	font-family: var(--mt-font-sans);
	font-size: var(--mt-font-size-xs);
	line-height: 1;
}

/* -- Contact items (left side) -- */

.mt-utility-strip__contact {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--mt-utility-strip-item-gap);
	margin: 0;
	padding: 0;
	list-style: none;
	min-width: 0;
}

.mt-utility-strip__item {
	display: inline-flex;
	align-items: center;
	gap: var(--mt-space-xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mt-utility-strip__link {
	display: inline-flex;
	align-items: center;
	gap: var(--mt-space-xs);
	color: var(--mt-utility-strip-link-color);
	text-decoration: none;
	transition: color var(--mt-motion-fast);
}

.mt-utility-strip__link:hover,
.mt-utility-strip__link:focus-visible {
	color: var(--mt-utility-strip-link-hover);
	outline: none;
}

.mt-utility-strip__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--mt-utility-strip-icon-size);
	height: var(--mt-utility-strip-icon-size);
	opacity: var(--mt-utility-strip-icon-opacity);
	flex: 0 0 auto;
}

.mt-utility-strip__icon svg,
.mt-utility-strip__icon > .dashicons {
	width: 100%;
	height: 100%;
	font-size: var(--mt-utility-strip-icon-size);
	line-height: 1;
}

/* Vertical separator between contact items. */

.mt-utility-strip__sep {
	display: inline-block;
	width: 1px;
	height: var(--mt-utility-strip-sep-height);
	background: var(--mt-utility-strip-sep-color);
	flex: 0 0 auto;
	list-style: none;
}

/* -- Next-event teaser (right side) -- */

.mt-utility-strip__event {
	display: inline-flex;
	align-items: center;
	gap: var(--mt-space-xs);
	min-width: 0;
	color: var(--mt-utility-strip-link-color);
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--mt-motion-fast);
}

.mt-utility-strip__event:hover,
.mt-utility-strip__event:focus-visible {
	color: var(--mt-utility-strip-link-hover);
	outline: none;
}

.mt-utility-strip__event-label {
	color: var(--mt-utility-strip-color);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	opacity: 0.8;
}

.mt-utility-strip__event-title {
	max-width: 18rem;
	overflow: hidden;
	color: #ffffff;
	font-weight: 600;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mt-utility-strip__event-date {
	opacity: 0.8;
}

.mt-utility-strip__event-date::before {
	content: "•";
	margin-right: 0.4rem;
	opacity: 0.7;
}

/* -- Responsive -- */

@media (max-width: 960px) {
	.mt-utility-strip {
		flex-wrap: wrap;
		min-height: 0;
		padding-block: var(--mt-space-xs);
		gap: var(--mt-space-sm);
	}
	.mt-utility-strip__contact {
		gap: var(--mt-space-sm);
	}
}

@media (max-width: 560px) {
	/* Keep all contact items on a single row; allow horizontal scroll */
	/* rather than wrapping/stacking on very narrow screens. */
	.mt-utility-strip__contact {
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		width: 100%;
		gap: var(--mt-space-sm);
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.mt-utility-strip__contact::-webkit-scrollbar {
		display: none;
	}
	.mt-utility-strip__item {
		flex: 0 0 auto;
		white-space: nowrap;
	}
	/* No room for opening hours on narrow screens — drop it (and its leading
	 * separator) so address + phone stay readable without being clipped. */
	.mt-utility-strip__item--hours,
	.mt-utility-strip__sep:has(+ .mt-utility-strip__item--hours) {
		display: none;
	}
}

/* -- Mobile: crossfade contact <-> next-event -- */
/* No room for both side by side, so stack them in one grid cell and let
   assets/js/mt-utility-strip.js toggle .is-showing-event every few seconds; CSS
   fades between the two. Without JS the contact stays visible (event hidden). */
@media (max-width: 640px) {
	.mt-utility-strip {
		display: grid;
		grid-auto-flow: row;
		align-items: center;
		justify-items: center;
	}

	.mt-utility-strip__contact,
	.mt-utility-strip__event {
		grid-column: 1;
		grid-row: 1;
		transition: opacity 1s ease;
	}

	.mt-utility-strip__event {
		opacity: 0;
		pointer-events: none;
	}

	.mt-utility-strip.is-showing-event .mt-utility-strip__contact {
		opacity: 0;
		pointer-events: none;
	}

	.mt-utility-strip.is-showing-event .mt-utility-strip__event {
		opacity: 1;
		pointer-events: auto;
	}

	/* Compact teaser: the calendar icon already conveys "event". */
	.mt-utility-strip__event-label {
		display: none;
	}

	.mt-utility-strip__event-title {
		max-width: 11rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mt-utility-strip__contact,
	.mt-utility-strip__event {
		transition: none;
	}
}


/* --- assets/css/organisms/visitor-card.css --- */
/**
 * Visitor card organism.
 *
 * Used on the Posjetitelji (visitors) landing page: a card with badge,
 * heading, item list, and CTA link. Also includes .mt-visitors-grid
 * layout helper for the card grid.
 *
 * @package OpcinaTema
 */

.mt-visitors-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.4rem;
}

.mt-visitor-card {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 1.65rem;
  background: var(--mt-paper);
  border: 1px solid rgba(217, 221, 225, 0.95);
  border-radius: var(--mt-radius-card);
  box-shadow: 0 0.45rem 1.1rem rgba(3, 25, 39, 0.06);
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}

.mt-visitor-card:hover,
.mt-visitor-card:focus-within {
  transform: translateY(-2px);
  box-shadow: var(--mt-shadow-elevated);
  border-color: rgba(3, 25, 39, 0.14);
}

.mt-visitor-card__head {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--mt-line);
}

.mt-visitor-card__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.15rem;
  height: 3.15rem;
  flex: 0 0 auto;
  color: var(--mt-color-primary);
  background: linear-gradient(135deg, rgba(54, 201, 87, 0.18), rgba(22, 139, 58, 0.08));
  border-radius: 12px;
}

.mt-visitor-card__head h2 {
  margin: 0;
  color: var(--mt-ink);
  font-size: clamp(1.35rem, 1.65vw, 1.65rem);
  font-weight: 900;
  line-height: 1.12;
}

.mt-visitor-card svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.mt-visitor-card__badge svg {
  width: 1.85rem;
  height: 1.85rem;
  stroke-width: 1.9;
}

.mt-visitor-card__items {
  display: grid;
  margin-top: 0.7rem;
}

.mt-visitor-card__item {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  gap: 0.85rem;
  align-items: center;
  padding-block: 0.8rem;
}

.mt-visitor-card__item + .mt-visitor-card__item {
  border-top: 1px solid var(--mt-line);
}

.mt-visitor-card__item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  color: var(--mt-color-primary);
}

.mt-visitor-card__item h3 {
  margin: 0 0 0.1rem;
  color: var(--mt-ink);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
}

.mt-visitor-card__item h3 a {
  color: inherit;
  text-decoration: none;
  transition: color 180ms ease;
}

.mt-visitor-card__item h3 a:hover,
.mt-visitor-card__item h3 a:focus-visible {
  color: var(--mt-color-primary);
}

.mt-visitor-card__item p {
  margin: 0;
  color: #1d2c38;
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.35;
}

.mt-visitor-card__more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin: auto auto 0;
  padding-top: 0.75rem;
  color: var(--mt-color-primary);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  transition: color 180ms ease, transform 180ms ease;
}

.mt-visitor-card__more:hover,
.mt-visitor-card__more:focus-visible {
  color: var(--mt-color-primary-bright);
  transform: translateX(0.15rem);
}

.mt-visitor-card__more span {
  width: 1rem;
  height: 1rem;
  background: currentColor;
  -webkit-mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/arrow-right.svg") center/contain no-repeat;
  mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/arrow-right.svg") center/contain no-repeat;
}


/* --- assets/css/organisms/visitors-intro.css --- */
/**
 * Visitors intro organism.
 *
 * Page introduction block used at the top of the Posjetitelji (visitors)
 * landing page: centered h1, intro paragraph, decorative underline span.
 *
 * @package OpcinaTema
 */

.mt-visitors-intro {
  display: grid;
  justify-items: center;
  gap: 0.6rem;
  margin-bottom: clamp(2.8rem, 5vw, 4.15rem);
  text-align: center;
}

.mt-visitors-intro h1 {
  margin: 0;
  color: var(--mt-ink);
  font-size: clamp(3rem, 5.2vw, 4.7rem);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: 0;
}

.mt-visitors-intro p {
  max-width: 54rem;
  margin: 0;
  color: #1d2c38;
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  font-weight: 400;
  line-height: 1.35;
}

.mt-visitors-intro > span[aria-hidden=true] {
  width: 4.45rem;
  height: 0.38rem;
  margin-top: 0.8rem;
  background: var(--mt-color-primary);
  border-radius: 999px;
  box-shadow: 0 0.18rem 0.45rem rgba(22, 139, 58, 0.28);
}


/* --- assets/css/sections/section-department.css --- */
/*
 * section-department — the Jedinstveni upravni odjel page.
 *
 * A stack of labelled blocks in the content column (pročelnik, djelatnici,
 * djelokrug rada, obrasci, objave). Only the block rhythm and the link-panel
 * grid live here; the cards inside are the shared card-person and mini-card
 * components.
 */

.mt-department__intro {
	max-width: 46rem;
}

.mt-department__block {
	margin-top: clamp(2.25rem, 4vw, 3.25rem);
}

.mt-department__block-title {
	margin: 0 0 clamp(1rem, 2vw, 1.5rem);
	color: var(--mt-ink);
	font-size: 1.35rem;
	font-weight: 700;
	line-height: 1.25;
}

/* The people grid brings its own top margin (.mt-people); inside a block that
   already spaces itself, don't stack the two. */
.mt-department__block .mt-people {
	margin-top: 0;
}

.mt-department__panels {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	gap: clamp(1.1rem, 2vw, 1.6rem);
}

.mt-department__notices {
	display: grid;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mt-department__notices-more {
	margin-top: 1.25rem;
}


/* --- assets/css/sections/section-document-teaser.css --- */
/**
 * section-document-teaser — homepage "Registar dokumenata" teaser.
 *
 * Two-column layout (intro + latest docs), collapses to single column
 * on narrow viewports. Each latest-doc row is an icon + body + action
 * grid with hover-tint.
 *
 * @package OpcinaTema
 */

.mt-section-document-teaser {
	/* -- Component-level tokens -- */
	--mt-section-document-teaser-gap: clamp(1.5rem, 3vw, 2.8rem);
	--mt-section-document-teaser-accent: var(--mt-color-primary, #168b3a);
	--mt-section-document-teaser-accent-bright: var(--mt-color-primary-bright, #36c957);
	--mt-section-document-teaser-color: var(--mt-ink, #031927);
	--mt-section-document-teaser-color-muted: var(--mt-ink-soft, #384651);
	--mt-section-document-teaser-border-color: rgba(217, 221, 225, 0.95);
	--mt-section-document-teaser-item-bg: var(--mt-paper, #ffffff);
	--mt-section-document-teaser-item-hover-bg: rgba(22, 139, 58, 0.045);
	--mt-section-document-teaser-item-divider: rgba(217, 221, 225, 0.82);

	/* Open layout to match the rest of the homepage: no outer box. The
	   doc-table (and the legacy list) own their surface chrome, so the section
	   sits flush like its neighbours instead of a heavy bordered green panel. */
	display: grid;
	grid-template-columns: minmax(16rem, 0.72fr) minmax(0, 1.28fr);
	gap: var(--mt-section-document-teaser-gap);
	align-items: stretch;
}

/* -- Intro column -- */

.mt-section-document-teaser__intro {
	display: grid;
	align-content: start;
	gap: 0.8rem;
	min-width: 0;
}

.mt-section-document-teaser__intro h2,
.mt-section-document-teaser__intro p {
	margin: 0;
}

.mt-section-document-teaser__intro h2 {
	color: var(--mt-section-document-teaser-color);
	font-size: clamp(2rem, 3vw, 2.7rem);
	font-weight: 800;
	line-height: 1.08;
}

.mt-section-document-teaser__intro h2::after {
	display: block;
	width: var(--mt-home-section-rule-width, 3rem);
	height: var(--mt-home-section-rule-height, 0.25rem);
	margin-top: 1rem;
	background: var(--mt-section-document-teaser-accent-bright);
	border-radius: 999px;
	content: "";
}

/* -- Count list (renders below the section-head in the intro col) -- */

.mt-section-document-teaser__counts {
	margin-top: 0.5rem;
}

/* -- Doc-table column (replaces the legacy __latest list when set) -- */

.mt-section-document-teaser__doc-table-wrap {
	display: flex;
	min-width: 0;
}

/* Fill the intro column's height so the two columns sit evenly: the body rows
   share the extra space (the header stays compact). Mirrors the news-list
   stretch in the official-notices split. */
.mt-section-document-teaser__doc-table {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.mt-section-document-teaser__doc-table a.mt-doc-table__row {
	flex: 1 0 auto;
}

/* -- Latest column (legacy) -- */

.mt-section-document-teaser__latest {
	display: grid;
	gap: 0.85rem;
	min-width: 0;
}

.mt-section-document-teaser__latest h3 {
	margin: 0;
	color: var(--mt-section-document-teaser-color);
	font-size: 1.05rem;
	font-weight: 800;
	line-height: 1.2;
}

.mt-section-document-teaser__list {
	display: grid;
	overflow: hidden;
	background: var(--mt-section-document-teaser-item-bg);
	border: 1px solid var(--mt-section-document-teaser-border-color);
	border-radius: 8px;
}

/* -- Item rows -- */

.mt-section-document-teaser__item {
	display: grid;
	grid-template-columns: 1.45rem minmax(0, 1fr) auto;
	align-items: center;
	gap: 0.85rem;
	min-width: 0;
	padding: 0.88rem 1rem;
	color: inherit;
	text-decoration: none;
	transition: background 160ms ease, color 160ms ease;
}

.mt-section-document-teaser__item + .mt-section-document-teaser__item {
	border-top: 1px solid var(--mt-section-document-teaser-item-divider);
}

.mt-section-document-teaser__item:hover,
.mt-section-document-teaser__item:focus-visible {
	background: var(--mt-section-document-teaser-item-hover-bg);
}

.mt-section-document-teaser__icon {
	width: 1.35rem;
	height: 1.35rem;
	background: var(--mt-section-document-teaser-accent);
	-webkit-mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/file-text.svg") center / contain no-repeat;
	mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/file-text.svg") center / contain no-repeat;
}

.mt-section-document-teaser__item-body {
	display: grid;
	gap: 0.22rem;
	min-width: 0;
}

.mt-section-document-teaser__title {
	display: -webkit-box;
	overflow: hidden;
	color: var(--mt-section-document-teaser-color);
	font-size: 0.94rem;
	font-weight: 800;
	line-height: 1.25;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
}

.mt-section-document-teaser__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.35rem 0.6rem;
	color: var(--mt-section-document-teaser-color-muted);
	font-size: 0.78rem;
	font-weight: 500;
	line-height: 1.25;
}

.mt-section-document-teaser__meta span {
	color: var(--mt-section-document-teaser-accent);
	font-weight: 800;
	text-transform: uppercase;
}

.mt-section-document-teaser__action {
	color: var(--mt-section-document-teaser-accent);
	font-size: 0.86rem;
	font-weight: 800;
	line-height: 1.2;
	white-space: nowrap;
}

.mt-section-document-teaser__empty {
	margin: 0;
	padding: 1rem;
	color: var(--mt-section-document-teaser-color-muted);
	font-size: 0.95rem;
}

/* -- Responsive -- */

@media (max-width: 960px) {
	.mt-section-document-teaser {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 720px) {
	.mt-section-document-teaser__item {
		grid-template-columns: 1.35rem minmax(0, 1fr);
	}

	.mt-section-document-teaser__action {
		grid-column: 2;
		justify-self: start;
	}
}


/* --- assets/css/sections/section-featured-projects.css --- */
/**
 * Section: Izdvojeni projekti — homepage featured-projects band.
 *
 * Mirrors the stats-band framing (full-bleed deep-primary band + faint dot-grid)
 * but shows a grid of featured project cards that stagger in on scroll
 * (assets/js/mt-stagger.js + the [data-stagger] hidden state in utilities.css).
 * Replaces the stats band on the homepage.
 *
 * @package OpcinaTema
 */

.mt-featured-projects {
	/* Matches the stats band / site footer (all use --mt-color-primary) so the
	   dark bands read as one family. */
	--mt-featured-projects-bg: var(--mt-color-primary);
	--mt-featured-projects-grid-gap: clamp(1.25rem, 2.5vw, 2rem);

	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var(--mt-featured-projects-bg);
	color: var(--mt-color-primary-contrast);
}

/* Faint dot-grid watermark — identical to the stats band. */
.mt-featured-projects::before {
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1.6px);
	background-size: 26px 26px;
	content: "";
	pointer-events: none;
}

.mt-featured-projects__inner {
	display: grid;
	gap: clamp(2rem, 4vw, 3rem);
}

/* -- Head (matches the stats band head) -- */

.mt-featured-projects__head {
	display: grid;
	gap: var(--mt-space-sm);
	justify-items: center;
	text-align: center;
}

.mt-featured-projects__title {
	margin: 0;
	/* The same h2 scale (caps at 32px) as every other section heading. */
	font-size: var(--mt-heading-size-2);
	font-weight: var(--mt-font-weight-medium);
	line-height: var(--mt-line-height-tight);
	letter-spacing: var(--mt-heading-letter-spacing);
}

/* -- Cards grid -- */

.mt-featured-projects__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--mt-featured-projects-grid-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mt-featured-projects__item {
	min-width: 0;
}

/* -- Card (a single link; translucent surface on the dark band) -- */

.mt-featured-projects__card {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--mt-radius-card);
	color: inherit;
	text-decoration: none;
	transition: transform var(--mt-motion-fast), box-shadow var(--mt-motion-fast),
		background var(--mt-motion-fast), border-color var(--mt-motion-fast);
}

.mt-featured-projects__card:hover,
.mt-featured-projects__card:focus-visible {
	transform: translateY(-4px);
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.22);
	box-shadow: 0 1rem 2rem rgba(3, 25, 39, 0.28);
}

.mt-featured-projects__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.08);
}

.mt-featured-projects__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--mt-motion-base);
}

.mt-featured-projects__card:hover .mt-featured-projects__media img,
.mt-featured-projects__card:focus-visible .mt-featured-projects__media img {
	transform: scale(1.05);
}

.mt-featured-projects__media-fallback {
	position: absolute;
	inset: 50% auto auto 50%;
	width: 2.75rem;
	height: 2.75rem;
	color: rgba(255, 255, 255, 0.8);
	background: currentColor;
	transform: translate(-50%, -50%);
	-webkit-mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/screw-svgrepo-com.svg") center / contain no-repeat;
	mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/screw-svgrepo-com.svg") center / contain no-repeat;
}

.mt-featured-projects__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1rem 1.1rem 1.15rem;
}

.mt-featured-projects__card-title {
	display: -webkit-box;
	overflow: hidden;
	color: var(--mt-color-primary-contrast);
	font-size: clamp(1.05rem, 1.3vw, 1.2rem);
	font-weight: var(--mt-font-weight-bold);
	line-height: 1.3;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.mt-featured-projects__excerpt {
	display: -webkit-box;
	overflow: hidden;
	color: rgba(255, 255, 255, 0.78);
	font-size: 0.9rem;
	line-height: 1.45;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.mt-featured-projects__more {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: auto;
	padding-top: 0.35rem;
	color: #fff;
	font-size: 0.9rem;
	font-weight: var(--mt-font-weight-bold);
}

.mt-featured-projects__more > span {
	width: 1rem;
	height: 1rem;
	background: currentColor;
	-webkit-mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/arrow-right.svg") center / contain no-repeat;
	mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/arrow-right.svg") center / contain no-repeat;
	transition: transform var(--mt-motion-fast);
}

.mt-featured-projects__card:hover .mt-featured-projects__more > span,
.mt-featured-projects__card:focus-visible .mt-featured-projects__more > span {
	transform: translateX(0.2rem);
}

/* -- CTA -- */

.mt-featured-projects__actions {
	display: flex;
	justify-content: center;
}

/* The CTA is the shared button atom (section-link + on-dark), same as every
   other homepage section — it needs no styling of its own. */

/* -- Responsive -- */

@media (max-width: 1100px) {
	.mt-featured-projects__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 760px) {
	.mt-featured-projects__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 460px) {
	.mt-featured-projects__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 560px) {
	.mt-featured-projects__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}


/* --- assets/css/sections/section-gallery.css --- */
/**
 * Section: Gallery — homepage "Galerija" horizontal photo strip + archive grid.
 *
 * A horizontally-scrollable row of recent site images on the homepage; each tile
 * opens the image in the lightbox (assets/js/mt-gallery.js) rather than linking
 * to a post. The same tiles reflow into a paginated grid on the /galerija/
 * archive (.mt-gallery__grid). Both the heading and the strip sit in the
 * contained width so the first image lines up with the title.
 *
 * @package OpcinaTema
 */

.mt-gallery {
	padding-block: clamp(3rem, 5vw, 4.5rem);
	overflow: hidden;
}

.mt-gallery__head {
	margin-bottom: var(--mt-space-lg);
}

/* -- Track (full-bleed, scroll-snap) -- */

.mt-gallery__track {
	display: flex;
	gap: 1rem;
	margin: 0;
	/* No horizontal padding — the containing .mt-container supplies the page
	   margin, so the first image lines up with the heading. */
	padding: 0.35rem 0 1rem;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: var(--mt-color-border) transparent;
	overscroll-behavior-x: contain;
}

.mt-gallery__item {
	flex: 0 0 auto;
	width: clamp(15rem, 24vw, 20rem);
	scroll-snap-align: start;
}

.mt-gallery__link {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--mt-color-surface-muted);
	border-radius: var(--mt-radius-card);
	color: #fff;
	text-decoration: none;
	/* Tiles open the image itself in the lightbox. */
	cursor: zoom-in;
}

.mt-gallery__link:focus-visible {
	outline: var(--mt-focus-ring-width) solid var(--mt-focus-ring-color);
	outline-offset: var(--mt-focus-ring-offset);
}

.mt-gallery__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--mt-motion-base);
}

.mt-gallery__link:hover .mt-gallery__img,
.mt-gallery__link:focus-visible .mt-gallery__img {
	transform: scale(1.05);
}

.mt-gallery__caption {
	position: absolute;
	inset: auto 0 0 0;
	display: -webkit-box;
	overflow: hidden;
	padding: 1.6rem 1rem 0.85rem;
	background: linear-gradient(to top, rgba(15, 22, 18, 0.82), rgba(15, 22, 18, 0) 100%);
	font-size: var(--mt-font-size-sm);
	font-weight: var(--mt-font-weight-medium);
	line-height: 1.3;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

/* -- Archive grid (the /galerija/ page) --
   Lives inside the shared archive layout (mt-events-archive__section, and the
   .mt-archive-layout__main column when the "Povezani sadržaj" sidebar shows), so
   it only needs the grid itself; spacing comes from the shared archive CSS. */

.mt-gallery__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
	gap: clamp(0.5rem, 1.5vw, 1rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* In the grid the tiles size to the column, not the fixed strip width. */
.mt-gallery__grid .mt-gallery__item {
	width: auto;
	scroll-snap-align: none;
}

.mt-gallery__grid .mt-gallery__link {
	aspect-ratio: 1 / 1;
}

/* -- Homepage: gallery as a dark band (mirrors the Izdvojeni projekti band) -- */

.mt-gallery--band {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var(--mt-color-primary);
	color: var(--mt-color-primary-contrast);
}

/* Faint dot-grid watermark — identical to the featured-projects / stats bands. */
.mt-gallery--band::before {
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1.6px);
	background-size: 26px 26px;
	content: "";
	pointer-events: none;
}

.mt-gallery--band .mt-gallery__inner {
	display: grid;
	gap: clamp(2rem, 4vw, 3rem);
}

.mt-gallery--band .mt-gallery__head {
	display: grid;
	gap: var(--mt-space-sm);
	justify-items: center;
	margin: 0;
	text-align: center;
}

.mt-gallery__title {
	margin: 0;
	/* The same h2 scale (caps at 32px) as every other section heading. */
	font-size: var(--mt-heading-size-2);
	font-weight: var(--mt-font-weight-medium);
	line-height: var(--mt-line-height-tight);
	letter-spacing: var(--mt-heading-letter-spacing);
}

/* Image grid: a tidy 4-up (2 rows of the 8-image preview), collapsing down. */
.mt-gallery__grid-band {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mt-gallery__grid-band .mt-gallery__item {
	width: auto;
}

.mt-gallery__grid-band .mt-gallery__link {
	aspect-ratio: 4 / 3;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.12);
}

/* -- CTA (matches the featured-projects band pill) -- */

.mt-gallery__actions {
	display: flex;
	justify-content: center;
}

/* The CTA is the shared button atom (section-link + on-dark), same as every
   other homepage section — it needs no styling of its own. */

/* -- Responsive -- */

@media (max-width: 960px) {
	.mt-gallery__grid-band {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.mt-gallery__item {
		width: 78vw;
	}

	.mt-gallery__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 0.5rem;
	}

	.mt-gallery__grid .mt-gallery__item {
		width: auto;
	}

	.mt-gallery__grid-band {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.6rem;
	}
}


/* --- assets/css/sections/section-home-two-col.css --- */
/**
 * Section: Home two-col (Lokalne vijesti + Projekti).
 *
 * Reference `.two-col`: two equal columns. Both columns share the same
 * arrangement — a two-up media-card grid on top, then horizontal
 * media-cards. Styling mirrors the redesign reference `.card`.
 *
 * @package OpcinaTema
 */

.mt-section--two-col {
	padding-block: clamp(3.25rem, 6vw, 4rem);
	background: var(--mt-color-surface);
	border-top: 1px solid var(--mt-color-border-soft);
}

.mt-two-col {
	/* Stacked, full-width blocks: Lokalne vijesti on top, Projekti below. */
	display: grid;
	grid-template-columns: 1fr;
	row-gap: clamp(2.75rem, 5vw, 3.75rem);
}

.mt-two-col__col {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	min-width: 0;
}

.mt-two-col__head {
	margin-bottom: 0;
}

/* -- media-card (reference .card) ------------------------------------ */

.mt-media-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--mt-color-surface);
	border: 1px solid var(--mt-color-border);
	border-radius: var(--mt-radius-card);
	color: inherit;
	text-decoration: none;
	transition: box-shadow var(--mt-motion-fast), transform var(--mt-motion-fast);
}

.mt-media-card:hover,
.mt-media-card:focus-visible {
	box-shadow: var(--mt-shadow-elevated);
	transform: translateY(-2px);
	outline: none;
}

.mt-media-card__img {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: linear-gradient(135deg, #8c9a6f 0%, #6e7f55 100%);
	background-size: cover;
	background-position: center;
	/* Paired with the hover zoom below; the card's overflow:hidden clips it. */
	transition: transform var(--mt-motion-base);
}

/* The photo is now a real <img> (atom) rather than a CSS background, so it gets
   srcset + width/height + native lazy. It fills the 16:10 slot and covers the
   gradient placeholder; absolute so the status chip still overlays it. */
.mt-media-card__img img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* When a real photo is present, don't let the placeholder gradient show through
   any transparent PNG areas — a neutral surface sits behind it (matches the
   pre-<img> behaviour, where the inline background-image replaced the gradient). */
.mt-media-card__img:has(img) {
	background: var(--mt-color-surface);
}

/* Gentle image zoom on hover so the card's imagery feels alive (the lift +
   arrow nudge already animate; this completes the set). */
.mt-media-card:hover .mt-media-card__img,
.mt-media-card:focus-visible .mt-media-card__img {
	transform: scale(1.04);
}

.mt-media-card__img--a {
	background-image: linear-gradient(135deg, #6f8a96 0%, #56717d 100%);
}

.mt-media-card__img--b {
	background-image: linear-gradient(135deg, #b5926e 0%, #94714d 100%);
}

.mt-media-card__img--c {
	background-image: linear-gradient(135deg, #7e8f6d 0%, #5e7551 100%);
}

/* -- Image fallback watermark ---------------------------------------- */
/* When a post has no featured image, media-card.php renders only the    */
/* tinted gradient placeholder (a tone class, with no <img>). Paint the   */
/* općina mark over that gradient so empty cards read as intentional      */
/* rather than broken. The watermark is suppressed the instant a real     */
/* photo is present — the molecule renders it as an <img>, which the      */
/* :has() selector below detects. CSS-only, so it covers every media-card */
/* (Lokalne vijesti + Projekti) without touching the molecule. */
.mt-media-card__img::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: rgba(255, 255, 255, 0.6);
	-webkit-mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/megaphone.svg") center / 34% no-repeat;
	mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/megaphone.svg") center / 34% no-repeat;
	pointer-events: none;
}

.mt-media-card__img:has(img)::after {
	content: none;
}

.mt-media-card__status {
	position: absolute;
	top: 0.875rem;
	left: 0.875rem;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.3rem 0.55rem;
	background: rgba(255, 255, 255, 0.95);
	border-radius: var(--mt-radius-sm);
	color: var(--mt-color-text);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.mt-media-card__status-dot {
	width: 0.375rem;
	height: 0.375rem;
	border-radius: 50%;
	background: var(--mt-color-primary-bright);
}

.mt-media-card__status--warn .mt-media-card__status-dot {
	background: var(--mt-color-warning);
}

.mt-media-card__status--plan .mt-media-card__status-dot {
	background: var(--mt-color-info);
}

.mt-media-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 1.25rem 1.375rem 1.375rem;
}

.mt-media-card__meta {
	margin-bottom: 0.5rem;
	color: var(--mt-color-text-soft);
	font-family: var(--mt-font-mono);
	font-size: 0.65rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.mt-media-card__title {
	display: -webkit-box;
	overflow: hidden;
	margin: 0 0 0.625rem;
	color: var(--mt-color-text);
	font-family: var(--mt-font-serif);
	font-size: 1.1875rem;
	font-weight: var(--mt-font-weight-medium);
	line-height: 1.2;
	letter-spacing: -0.01em;
	/* Keep every card the same height: cap the title at 2 lines so a long one
	   (e.g. an all-caps headline) can't blow up the whole row. */
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.mt-media-card__excerpt {
	display: -webkit-box;
	overflow: hidden;
	margin: 0 0 1.125rem;
	color: var(--mt-color-text-soft);
	font-size: 0.85rem;
	line-height: 1.5;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

.mt-media-card__more {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	margin-top: auto;
	color: var(--mt-color-primary);
	font-size: 0.8rem;
	font-weight: var(--mt-font-weight-medium);
}

.mt-media-card__more-arrow {
	width: 0.7rem;
	height: 0.7rem;
	background: currentColor;
	-webkit-mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/arrow-right.svg") center / contain no-repeat;
	mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/arrow-right.svg") center / contain no-repeat;
	transition: transform var(--mt-motion-fast);
}

.mt-media-card:hover .mt-media-card__more-arrow,
.mt-media-card:focus-visible .mt-media-card__more-arrow {
	transform: translateX(0.14rem);
}

/* --horizontal: image left, body right */
.mt-media-card--horizontal {
	flex-direction: row;
}

.mt-media-card--horizontal .mt-media-card__img {
	flex: 0 0 12.5rem;
	aspect-ratio: auto;
}

/* -- Layout slots --------------------------------------------------- */

.mt-project-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

/* Uniform, responsive card grid for the stacked full-width blocks (Lokalne
   vijesti / Projekti). Fills the row with as many ~15rem cards as fit, then
   wraps — 4-up on the homepage container, collapsing to 1 on mobile. */
.mt-home-cards-grid {
	display: grid;
	/* auto-fit (not auto-fill): with only 4 cards, collapse any extra empty
	   tracks so the cards always stretch to fill the row — no gap on the right. */
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	gap: 1rem;
}

/* -- Paged slider (Lokalne vijesti / Projekti): every card is a slide; the dots
   slide the track left/right (mt-cards-slider.js). 3 cards per page on wide
   screens, 1 per page on phones — the script generates the matching dot count. -- */
.mt-cards-slider__viewport {
	overflow: hidden;
	/* Let vertical scrolling through, but claim horizontal drags for the slider;
	   grab cursor + no text-selection make the drag affordance clear. */
	touch-action: pan-y;
	cursor: grab;
	-webkit-user-select: none;
	user-select: none;
}

.mt-cards-slider__viewport.is-dragging {
	cursor: grabbing;
}

.mt-cards-slider__track {
	display: flex;
	gap: 1rem;
	transition: transform 700ms cubic-bezier(0.4, 0, 0.2, 1);
}

.mt-cards-slider__slide {
	/* 3 across on wide screens (two 1rem gaps between them). */
	flex: 0 0 calc((100% - 2rem) / 3);
	min-width: 0;
	/* Flex container so the card fills the slide. The track already stretches
	   every slide to the tallest one, so this makes all cards the same height
	   whatever their title/excerpt length. The card body (flex:1) plus
	   __more (margin-top:auto) then pin "Pročitaj više" to the bottom. */
	display: flex;
}

.mt-cards-slider__slide > * {
	flex: 1;
	min-width: 0;
}

@media (max-width: 768px) {
	.mt-cards-slider__slide {
		/* One card per page on phones (reference layout: single card + 6 dots). */
		flex-basis: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mt-cards-slider__track {
		transition: none;
	}
}

.mt-cards-slider__dots:empty {
	display: none;
}

.mt-cards-slider__dots {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	margin-top: clamp(1.5rem, 2.5vw, 2.25rem);
}

.mt-cards-slider__dot {
	width: 0.7rem;
	height: 0.7rem;
	padding: 0;
	background: transparent;
	border: 2px solid var(--mt-color-primary);
	border-radius: 50%;
	cursor: pointer;
	/* Animate the fill + grow when a dot becomes active. */
	transition: background 220ms ease, transform 220ms ease, border-color 220ms ease;
}

.mt-cards-slider__dot:hover,
.mt-cards-slider__dot:focus-visible {
	background: var(--mt-color-primary-soft, rgba(44, 82, 130, 0.28));
	outline: none;
}

.mt-cards-slider__dot.is-active {
	background: var(--mt-color-primary);
	/* Bigger than the inactive dots (see reference). */
	transform: scale(1.45);
}

@media (prefers-reduced-motion: reduce) {
	.mt-cards-slider__dot {
		transition: none;
	}
}

/* Featured first card — ONLY the single most recently posted item (the grid is
   newest-first, so it's the first card of the first slider page) is the focal
   point: a primary frame + top accent bar + soft tint + primary title. Scoped to
   the first slide so later pages don't re-feature their own first card. */
.mt-cards-slider__slide:is(:first-child, .is-featured-clone) > .mt-media-card {
	position: relative;
	border: 2px solid var(--mt-color-primary);
	box-shadow: 0 0.85rem 1.9rem rgba(3, 25, 39, 0.14);
}

.mt-cards-slider__slide:is(:first-child, .is-featured-clone) > .mt-media-card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	z-index: 2;
	height: 0.32rem;
	background: var(--mt-color-primary);
}

.mt-cards-slider__slide:is(:first-child, .is-featured-clone) > .mt-media-card .mt-media-card__body {
	background: linear-gradient(
		180deg,
		rgba(var(--mt-color-primary-rgb), 0.08),
		rgba(var(--mt-color-primary-rgb), 0) 60%
	);
}

.mt-cards-slider__slide:is(:first-child, .is-featured-clone) > .mt-media-card .mt-media-card__title {
	color: var(--mt-color-primary);
}

/* -- Responsive ----------------------------------------------------- */

@media (max-width: 900px) {
	.mt-two-col {
		grid-template-columns: 1fr;
		grid-template-rows: none;
		row-gap: clamp(2rem, 6vw, 3rem);
	}

	.mt-two-col__col {
		display: flex;
		flex-direction: column;
		grid-row: auto;
		row-gap: 1rem;
	}
}

@media (max-width: 480px) {
	.mt-project-grid {
		grid-template-columns: 1fr;
	}

	.mt-media-card--horizontal {
		flex-direction: column;
	}

	.mt-media-card--horizontal .mt-media-card__img {
		flex: none;
		aspect-ratio: 16 / 10;
	}
}


/* --- assets/css/sections/section-official-notices.css --- */
/**
 * section-official-notices — homepage "Službene obavijesti" section.
 *
 * Section base + decorative ::before / ::after gradient blobs +
 * intro/eyebrow/archive-link/panel/grid children. Panel is intentionally
 * un-styled (transparent / borderless) so the cards inside provide the
 * visual structure; the panel class still exists in markup as a layout
 * hook for the panel--solo modifier.
 *
 * @package OpcinaTema
 */

.mt-section--official-notices {
	/* -- Component-level tokens -- */
	--mt-section-official-notices-bg: linear-gradient(180deg, rgba(245, 251, 248, 0.98) 0%, rgba(255, 255, 255, 0.96) 54%, rgba(246, 251, 248, 0.98) 100%), var(--mt-paper, #ffffff);
	--mt-section-official-notices-blob-1-color: rgba(22, 139, 58, 0.13);
	--mt-section-official-notices-blob-2-color: rgba(0, 87, 168, 0.09);
	--mt-section-official-notices-blob-2-dots: rgba(0, 87, 168, 0.08);
	--mt-section-official-notices-grid-gap: clamp(1.2rem, 2vw, 1.6rem);

	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var(--mt-section-official-notices-bg);
}

.mt-section--official-notices::before,
.mt-section--official-notices::after {
	position: absolute;
	z-index: 0;
	content: "";
	pointer-events: none;
}

.mt-section--official-notices::before {
	top: 4.5rem;
	left: max(-7rem, calc((100vw - var(--mt-home-content-width)) / 2 - 13rem));
	width: clamp(18rem, 28vw, 28rem);
	aspect-ratio: 1;
	background: radial-gradient(circle at 50% 50%, var(--mt-section-official-notices-blob-1-color), rgba(22, 139, 58, 0) 70%);
	border-radius: 50%;
	filter: blur(0.1rem);
}

.mt-section--official-notices::after {
	right: max(-10rem, calc((100vw - var(--mt-home-content-width)) / 2 - 16rem));
	bottom: 7rem;
	width: clamp(18rem, 27vw, 30rem);
	aspect-ratio: 1;
	background:
		repeating-radial-gradient(circle, var(--mt-section-official-notices-blob-2-dots) 0 1px, transparent 1px 0.85rem),
		radial-gradient(circle at 62% 55%, var(--mt-section-official-notices-blob-2-color), rgba(0, 87, 168, 0) 68%);
	border-radius: 50%;
	opacity: 0.72;
}

.mt-section--official-notices .mt-container {
	position: relative;
	z-index: 1;
}

/* -- Panel (transparent layout hook) -- */

.mt-section-official-notices__panel {
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	backdrop-filter: none;
}

.mt-section-official-notices__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.95fr) minmax(19rem, 1.05fr);
	gap: var(--mt-section-official-notices-grid-gap);
	align-items: stretch;
}

.mt-section-official-notices__panel--solo .mt-section-official-notices__grid {
	grid-template-columns: minmax(0, 42rem);
}

/* -- Split layout (featured card left, news-list right) -- */

.mt-section-official-notices__split {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.2fr);
	gap: var(--mt-section-official-notices-grid-gap, var(--mt-space-lg));
	align-items: stretch;
}

.mt-section-official-notices__split-featured,
.mt-section-official-notices__split-list {
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.mt-section-official-notices__split-featured > .mt-official-notice-card,
.mt-section-official-notices__split-list > .mt-news-list {
	flex: 1;
}

/* Stretch the news-list rows to share the column height with the    */
/* featured card on the left. Scoped to the split layout so it       */
/* doesn't change news-list behavior in other contexts.              */

.mt-section-official-notices__split-list .mt-news-list {
	display: flex;
	flex-direction: column;
}

.mt-section-official-notices__split-list .mt-news-list-item {
	flex: 1 1 0;
	min-height: 0;
}

@media (max-width: 900px) {
	.mt-section-official-notices__split {
		grid-template-columns: minmax(0, 1fr);
	}

	/* On mobile the columns stack — let news-list rows size to       */
	/* content again so they don't grow unnecessarily.                */
	.mt-section-official-notices__split-list .mt-news-list-item {
		flex: 0 0 auto;
	}
}

/* -- Homepage override (section sits inside .mt-home) -- */

.mt-home > .mt-section--official-notices {
	background: transparent;
}

.mt-home > .mt-section--official-notices::before,
.mt-home > .mt-section--official-notices::after {
	display: none;
}

/* -- Responsive -- */

@media (max-width: 960px) {
	.mt-section-official-notices__grid,
	.mt-section-official-notices__panel--solo .mt-section-official-notices__grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 760px) {
	.mt-section--official-notices::before {
		top: 2rem;
		left: -9rem;
		opacity: 0.68;
	}

	.mt-section--official-notices::after {
		right: -12rem;
		bottom: 3rem;
		opacity: 0.42;
	}

	.mt-section-official-notices__panel {
		padding: 0;
	}
}


/* --- assets/css/sections/section-projects.css --- */
/**
 * Section: Projects.
 *
 * Horizontal rail of project cards with prev/next controls. Used on the
 * homepage. Page-body context overrides for .mt-home still live in
 * mt-home.css and will move in the cleanup pass.
 *
 * @package OpcinaTema
 */

.mt-section--projects {
  padding-block: clamp(5.25rem, 8vw, 7.75rem);
  background: var(--mt-surface);
  overflow: hidden;
}
.mt-section--projects .mt-container {
  width: min(100% - 2rem, var(--mt-home-content-width));
}

.mt-home > .mt-section {
  background: transparent;
}

.mt-home > .mt-section--projects {
  background: transparent;
  border-top: 0;
  border-bottom: 0;
}

.mt-home + .mt-site-footer {
  margin-top: 0;
}

.mt-section-projects__rail-wrap {
  position: relative;
}

.mt-section-projects__rail-wrap--slider {
  padding-inline: 4.25rem;
}

.mt-section-projects__rail {
  display: grid;
  grid-auto-columns: calc((100% - 3.4rem) / 3);
  grid-auto-flow: column;
  gap: 1.7rem;
  align-items: stretch;
  padding: 0.35rem 0 1.35rem;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scrollbar-width: none;
}

.mt-section-projects__rail::-webkit-scrollbar {
  display: none;
}

.mt-section-projects__rail.is-sliding {
  scroll-snap-type: none;
}

.mt-section-projects__controls {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  transform: translateY(-50%);
}

.mt-section-projects__control {
  display: grid;
  place-items: center;
  width: 3.4rem;
  aspect-ratio: 1;
  padding: 0;
  background: var(--mt-color-primary);
  border: 0;
  border-radius: 50%;
  box-shadow: 0 0.9rem 1.4rem rgba(3, 25, 39, 0.18);
  color: var(--mt-paper);
  cursor: pointer;
  pointer-events: auto;
  transition: background 180ms ease, opacity 180ms ease, transform 180ms ease;
}
.mt-section-projects__control img {
  width: 1.18rem;
  height: 1.18rem;
  filter: brightness(0) invert(1);
}

/* Both buttons share the same arrow-right asset; mirror it on the */
/* prev button so we don't ship a duplicate left-arrow SVG.        */
.mt-section-projects__control--prev img {
  transform: scaleX(-1);
}

.mt-section-projects__control:hover,
.mt-section-projects__control:focus-visible {
  background: var(--mt-color-accent);
  transform: scale(1.04);
}

.mt-section-projects__control:disabled {
  cursor: default;
  opacity: 0;
  pointer-events: none;
  transform: none;
  visibility: hidden;
}


/* --- assets/css/sections/section-service-info-hero.css --- */
/**
 * Section: Servisne informacije.
 *
 * Two-column layout: left = leaf-rounded photo with three mini-cards
 * overlapping its bottom edge; right = eyebrow + serif headline + sub +
 * a primary/secondary CTA pair + a divider-less stat row.
 *
 * @package OpcinaTema
 */

.mt-section--service-info {
	padding-block: clamp(3.25rem, 6vw, 4rem);
	background: var(--mt-color-surface);
	border-top: 1px solid var(--mt-color-border-soft);
}

.mt-servisne {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 4vw, 3rem);
	align-items: center;
}

/* -- Media column (photo + overlapping mini-cards) -- */

.mt-servisne__media {
	position: relative;
	min-width: 0;
}

.mt-servisne__photo {
	position: relative;
	height: clamp(20rem, 26vw, 23.75rem);
	border-radius: 240px 24px 24px 24px;
	overflow: hidden;
	background: linear-gradient(135deg, #7d8c5e 0%, #6e7f55 40%, #57683f 100%);
}

.mt-servisne__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mt-servisne__cards {
	position: relative;
	z-index: 2;
	margin-top: -4.375rem;
	padding-inline: 1.125rem;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 0.75rem;
}

/* -- Body column -- */

.mt-servisne__body {
	min-width: 0;
}

.mt-servisne__eyebrow {
	margin-bottom: 0.875rem;
}

.mt-servisne__title {
	margin: 0 0 0.75rem;
	color: var(--mt-color-text);
	font-family: var(--mt-font-serif);
	font-size: clamp(2rem, 3.2vw, 2.5rem);
	font-weight: var(--mt-font-weight-medium);
	line-height: 1.05;
	letter-spacing: -0.02em;
}

.mt-servisne__title em {
	color: var(--mt-color-primary);
	font-style: italic;
	font-weight: var(--mt-font-weight-regular);
}

.mt-servisne__sub {
	margin: 0;
	max-width: 37.5rem;
	color: var(--mt-color-text-soft);
	font-size: var(--mt-font-size-md);
	line-height: 1.55;
}

.mt-servisne__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
	margin-top: 1.75rem;
}

.mt-servisne__cta-arrow {
	width: 0.75rem;
	height: 0.75rem;
	background: currentColor;
	-webkit-mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/arrow-right.svg") center / contain no-repeat;
	mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/arrow-right.svg") center / contain no-repeat;
}

/* -- Stat row (divider-less, top-bordered) -- */

.mt-servisne__stats {
	margin-top: 2.25rem;
	padding-top: 1.75rem;
	border-top: 1px solid var(--mt-color-border);
}

.mt-servisne__stat-row {
	gap: clamp(1.5rem, 3vw, 1.75rem);
}

/* Reference servisne stats read value-on-top, label-below (the stat   */
/* atom defaults to label-on-top, as used in the hero), so flip the    */
/* flex order within this scope.                                       */
.mt-servisne__stat-row .mt-stat__value {
	order: 1;
	color: var(--mt-color-primary);
	font-family: var(--mt-font-serif);
	font-size: 1.875rem;
	font-weight: var(--mt-font-weight-medium);
	line-height: 1;
}

.mt-servisne__stat-row .mt-stat__label {
	order: 2;
	margin-top: 0.375rem;
	color: var(--mt-color-text-soft);
}

/* -- Responsive: stack to a single column -- */

@media (max-width: 900px) {
	.mt-servisne {
		grid-template-columns: 1fr;
		gap: clamp(1.5rem, 5vw, 2.5rem);
	}

	.mt-servisne__photo {
		height: clamp(15rem, 50vw, 20rem);
		border-radius: 120px 24px 24px 24px;
	}
}

@media (max-width: 560px) {
	.mt-servisne__cards {
		grid-template-columns: 1fr;
		margin-top: -2.5rem;
	}
}

/* -- Mobile: drop the photo and lift the title above the cards -- */
/* The title lives in __body and the cards in __media; flatten both       */
/* wrappers with display:contents so their children become direct flex    */
/* items of .mt-servisne and can be reordered together. Placed after the  */
/* ≤560 block so its card-margin reset wins on phones too.                */
@media (max-width: 768px) {
	.mt-servisne {
		display: flex;
		flex-direction: column;
		align-items: stretch;
	}

	.mt-servisne__media,
	.mt-servisne__body {
		display: contents;
	}

	.mt-servisne__photo {
		display: none;
	}

	.mt-servisne__eyebrow {
		order: 1;
	}

	.mt-servisne__title {
		order: 2;
	}

	.mt-servisne__sub {
		order: 3;
	}

	.mt-servisne__actions {
		order: 4;
	}

	.mt-servisne__stats {
		order: 5;
	}

	.mt-servisne__cards {
		order: 6;
		margin-top: 0;
		padding-inline: 0;
	}
}


/* --- assets/css/sections/section-utility-links.css --- */
/**
 * section-utility-links — homepage "Brze veze za građane" grid.
 *
 * Now composed of the section-head molecule + a responsive grid of
 * tile organisms. Section-level CSS only owns vertical rhythm, the
 * section-head spacing relative to the grid, and the grid template
 * collapse breakpoints.
 *
 * The old .mt-utility-link card + .mt-utility-links__eyebrow rules
 * were removed when the section switched to the tile organism +
 * section-head molecule (2026-05-29 redesign).
 *
 * @package OpcinaTema
 */

.mt-section--utility-links {
	--mt-section-utility-links-padding-block: var(--mt-space-3xl);
	--mt-section-utility-links-grid: repeat(6, minmax(0, 1fr));
	--mt-section-utility-links-grid-gap: var(--mt-space-sm);
}

.mt-home > .mt-section--utility-links {
	padding-block: var(--mt-section-utility-links-padding-block);
}

.mt-section-utility-links__head {
	margin-bottom: var(--mt-space-xl);
}

.mt-section-utility-links__grid {
	display: grid;
	grid-template-columns: var(--mt-section-utility-links-grid);
	gap: var(--mt-section-utility-links-grid-gap);
}

/* The card description is rendered in the tile's meta slot, which defaults to
 * an uppercase caption style. Full-sentence descriptions read better in normal
 * case, so opt this section's tile meta out of the uppercase transform. */
.mt-section--utility-links .mt-tile__meta {
	text-transform: none;
}

/* -- Responsive collapse -- */

@media (max-width: 1280px) {
	.mt-section--utility-links {
		--mt-section-utility-links-grid: repeat(4, minmax(0, 1fr));
	}
}

@media (max-width: 900px) {
	.mt-section--utility-links {
		--mt-section-utility-links-grid: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.mt-section--utility-links {
		--mt-section-utility-links-grid: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 380px) {
	.mt-section--utility-links {
		--mt-section-utility-links-grid: minmax(0, 1fr);
	}
}

/* Tiles opted out of the mobile view (fewer, more focused quick links on phones). */
@media (max-width: 768px) {
	.mt-section-utility-links__grid .mt-tile--hide-mobile {
		display: none;
	}
}

/* -- Masked tile icons -------------------------------------------------
 * The tile glyphs mask the same assets/svg files used elsewhere on the
 * site (mega menu, etc.) so the same concept renders the same icon. The
 * mask tints the glyph with the chip's currentColor (brand green).
 */
.mt-mask-icon {
	display: inline-block;
	width: 100%;
	height: 100%;
	background: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.mt-mask-icon--documents {
	-webkit-mask-image: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/file-text.svg");
	mask-image: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/file-text.svg");
}

.mt-mask-icon--procurement {
	-webkit-mask-image: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/purchase.svg");
	mask-image: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/purchase.svg");
}

.mt-mask-icon--utilities {
	-webkit-mask-image: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/services-svgrepo-com.svg");
	mask-image: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/services-svgrepo-com.svg");
}

.mt-mask-icon--hours {
	-webkit-mask-image: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/clock.svg");
	mask-image: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/clock.svg");
}

.mt-mask-icon--contact {
	-webkit-mask-image: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/contact-book-svgrepo-com.svg");
	mask-image: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/contact-book-svgrepo-com.svg");
}

.mt-mask-icon--service {
	-webkit-mask-image: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/megaphone.svg");
	mask-image: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/megaphone.svg");
}

.mt-mask-icon--events {
	-webkit-mask-image: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/event-svgrepo-com.svg");
	mask-image: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/event-svgrepo-com.svg");
}

.mt-mask-icon--map {
	-webkit-mask-image: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/map-pin-alt-svgrepo-com.svg");
	mask-image: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/map-pin-alt-svgrepo-com.svg");
}

.mt-mask-icon--notices {
	-webkit-mask-image: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/notice.svg");
	mask-image: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/notice.svg");
}

.mt-mask-icon--mayor {
	-webkit-mask-image: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/user.svg");
	mask-image: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/user.svg");
}

/* Same lucide proportions as the single-person (Načelnik) icon, so it renders at
   the default `contain` size and the two match. */
.mt-mask-icon--council {
	-webkit-mask-image: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/group-svgrepo-com.svg");
	mask-image: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/group-svgrepo-com.svg");
}

.mt-mask-icon--administration {
	-webkit-mask-image: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/organization-svgrepo-com.svg");
	mask-image: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/organization-svgrepo-com.svg");
}

.mt-mask-icon--budget {
	-webkit-mask-image: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/budget.svg");
	mask-image: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/budget.svg");
}

.mt-mask-icon--tenders {
	-webkit-mask-image: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/tags-svgrepo-com.svg");
	mask-image: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/tags-svgrepo-com.svg");
}

/* Contact lines on a person card. --contact is the contact BOOK (a directory);
   these two are the phone and the envelope themselves. */
.mt-mask-icon--phone {
	-webkit-mask-image: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/phone.svg");
	mask-image: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/phone.svg");
}

.mt-mask-icon--mail {
	-webkit-mask-image: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/mail.svg");
	mask-image: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/mail.svg");
}

/* Stacked steps — a procedure, as opposed to --documents (a single file). */
.mt-mask-icon--procedures {
	-webkit-mask-image: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/layers-svgrepo-com.svg");
	mask-image: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/layers-svgrepo-com.svg");
}



/* --- assets/css/sections/term-archive.css --- */
/**
 * Term archive (taxonomy-djelokrug-rada) — document list + "Povezani sadržaj"
 * sidebar.
 *
 * Two-column body: the term's documents (document-list organism) on the left,
 * the related-content aside on the right (when present). Collapses to a single
 * column below the sidebar breakpoint. CSS-grid only; visual values flow
 * through global tokens.
 *
 * @package OpcinaTema
 */

.mt-term-archive__layout {
	display: grid;
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: start;
}

.mt-term-archive__main {
	min-width: 0;
}

@media (min-width: 901px) {
	.mt-term-archive__layout--with-related {
		grid-template-columns: minmax(0, 1fr) minmax(17rem, 22rem);
	}
}


/* --- assets/css/pages.css --- */
/**
 * Pages layer — page-body context overrides and cross-cutting aggregates.
 *
 * What lives here:
 * - Page-body class overrides: `.mt-home`, `.mt-opcina-page`, `.mt-mjestani-page`,
 *   `.mt-poduzetnici-page`, `.mt-posjetitelji-page`, `.mt-projekti-page`. These
 *   reskin components when they sit on a specific page (homepage, the 5 nav
 *   pages). Component CSS owns the "neutral" look; this file owns "what it
 *   looks like inside .mt-home" etc.
 * - Cross-cutting aggregate selectors that span multiple components — for
 *   example `.mt-page-hero/.mt-visitors-intro .mt-breadcrumbs` shared layout,
 *   the `.mt-site-footer__links/.mt-site-footer__meta ul/.mt-service-panel ul`
 *   list reset.
 * - Scattered @media blocks that mix concerns from multiple components and
 *   haven't yet been split. As components get further refined these rules
 *   should migrate into the owning component file.
 *
 * Renamed from `mt-home.css` on 2026-05-28 once the file's content reflected
 * page-context overrides rather than the homepage monolith it started as.
 *
 * Loads after every component file via the enqueue dependency chain, so its
 * overrides always win their specificity contests.
 *
 * @package OpcinaTema
 */







.mt-page-hero .mt-breadcrumbs,
.mt-visitors-intro .mt-breadcrumbs {
  display: grid;
  justify-items: center;
  margin-bottom: 0.9rem;
}
.mt-page-hero .mt-breadcrumbs ol,
.mt-visitors-intro .mt-breadcrumbs ol {
  justify-content: center;
}


.single-news__content,
.mt-content__article {
  min-width: 0;
}

.single-news__content,
.mt-content__body {
  font-family: var(--mt-font-sans);
  font-size: 1.13rem;
  line-height: 1.78;
}



@media (max-width: 1500px) {
  .single-news__layout--with-related {
    column-gap: clamp(2.5rem, 4vw, 4rem);
  }
  .mt-content__layout--with-related {
    column-gap: clamp(2.5rem, 4vw, 4rem);
  }
  .mt-content__layout--with-related > .mt-content__article > .mt-content__header,
  .mt-content__layout--with-related > .mt-content__article > .mt-content__body {
    grid-column: 1;
  }
}
@media (max-width: 960px) {
  .single-news__layout--with-related,
  .mt-content__layout--with-related {
    grid-template-columns: minmax(0, 1fr);
  }
  .single-news__layout--with-related > .single-news__content,
  .mt-content__layout--with-related > .mt-content__article,
  .mt-content__layout--with-related > .mt-content__article > .mt-content__header,
  .mt-content__layout--with-related > .mt-content__article > .mt-content__body,
  .single-news__layout--with-related > .mt-related-posts,
  .mt-content__layout--with-related > .mt-related-posts {
    grid-column: auto;
    grid-row: auto;
    width: 100%;
  }
}


.mt-site-footer__links,
.mt-site-footer__meta ul,
.mt-service-panel ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.mt-home,
.mt-opcina-page,
.mt-mjestani-page,
.mt-poduzetnici-page,
.mt-posjetitelji-page,
.mt-projekti-page {
  background: var(--mt-color-surface);
}

/* Homepage: every section title shares one size + weight. The document-teaser
   (was 2.7rem/800) and servisne (was 2.5rem/500) blocks each shipped their own
   heading scale; this unifies them with the standard section-head titles. */
.mt-home .mt-section-head__title,
.mt-home .mt-section-document-teaser__intro h2,
.mt-home .mt-servisne__title {
  font-size: 2rem;
  font-weight: var(--mt-font-weight-medium);
}

/* Smaller section titles on phones so they don't dominate the narrow layout. */
@media (max-width: 768px) {
  .mt-home .mt-section-head__title,
  .mt-home .mt-section-document-teaser__intro h2,
  .mt-home .mt-servisne__title,
  .mt-home .mt-featured-projects__title,
  .mt-home .mt-gallery__title {
    font-size: 1.5rem;
  }

  /* Tighten the (large) gap between the Lokalne vijesti slider and Brze veze. */
  .mt-home > .mt-section--two-col {
    padding-bottom: 1.75rem;
  }
  .mt-home > .mt-section--utility-links {
    padding-top: 1.75rem;
  }
}

/* -- Homepage visual rhythm -------------------------------------------------
   Three light-touch tweaks that add texture/contrast without new markup:
   teal accents, alternating section bands, and a faint hero dot-grid. All are
   scoped to .mt-home so other pages are untouched. */

/* Rotate the brand teal accent into the section-title rules + the doc-teaser
   rule, so the homepage isn't monochrome blue. */
.mt-home .mt-section-head__title::after {
  background: var(--mt-color-accent);
}
.mt-home .mt-section-document-teaser__intro h2::after {
  background: var(--mt-color-accent-bright);
}

/* The official-notices + document-teaser (registar dokumenata) homepage sections
   intentionally keep the default page surface — no tinted band — so they read as
   part of the same flat homepage as everything around them. They fall back to the
   generic `.mt-home > .mt-section { background: transparent }` reset. */

/* No divider line directly beneath the homepage Službene obavijesti section (the
   following section's border-top would otherwise draw one). */
.mt-home > .mt-section--official-notices + .mt-section {
  border-top: 0;
}

/* The stats band keeps its primary surface on the homepage. Re-asserted here
   because the generic `.mt-home > .mt-section { background: transparent }` reset
   (section-projects.css) outranks the component's own `.mt-stats-band` rule;
   matching its specificity from the last-loaded file wins. Pulls the colour from
   the component token so the band's surface lives in one place. */
.mt-home > .mt-stats-band {
  background: var(--mt-stats-band-bg);
}

/* Featured-projects band keeps its primary surface on the homepage (it replaces
   the stats band; same reset-override pattern — the generic
   `.mt-home > .mt-section { background: transparent }` reset would otherwise
   outrank the component's own `.mt-featured-projects` rule). */
.mt-home > .mt-featured-projects {
  background: var(--mt-featured-projects-bg);
}

/* The redesigned Galerija band keeps its primary surface on the homepage too
   (same reset-override pattern as the featured-projects band above). */
.mt-home > .mt-gallery--band {
  background: var(--mt-color-primary);
}

/* Hero texture: a faint primary dot-grid behind the hero for subtle depth. It
   lives in the background layer (no overflow/clipping), so the event pill that
   straddles the media's bottom edge is untouched; the opaque media + cards mask
   the dots wherever they overlap. */
.mt-home > .mt-hero:first-of-type {
  background-image: radial-gradient(
    rgba(var(--mt-color-primary-rgb), 0.05) 1px,
    transparent 1.6px
  );
  background-size: 22px 22px;
  background-position: -3px -3px;
}





.mt-home > .mt-hero:first-of-type .mt-search {
  width: min(100%, 51rem);
  margin-top: 1.9rem;
}

.mt-home > .mt-hero:first-of-type .mt-search-form {
  grid-template-columns: minmax(0, 1fr) 3.75rem;
  min-height: 64px;
}
.mt-home > .mt-hero:first-of-type .mt-search-form .mt-input {
  --mt-input-padding-inline: 1.25rem;
  --mt-input-font-size: 1.28rem;
}
.mt-home > .mt-hero:first-of-type .mt-search-form .mt-button .dashicons {
  width: 1.5rem;
  height: 1.5rem;
  font-size: 1.5rem;
}








.mt-opcina-page .mt-page-hero,
.mt-mjestani-page .mt-page-hero,
.mt-poduzetnici-page .mt-page-hero,
.mt-projekti-page .mt-page-hero,
.mt-posjetitelji-page .mt-visitors-intro {
  justify-items: start;
  width: min(100%, 1260px);
  margin-inline: auto;
  text-align: left;
}

.mt-opcina-page .mt-page-hero h1,
.mt-mjestani-page .mt-page-hero h1,
.mt-poduzetnici-page .mt-page-hero h1,
.mt-projekti-page .mt-page-hero h1,
.mt-posjetitelji-page .mt-visitors-intro h1 {
  font-size: clamp(2rem, 3.2vw, 2.75rem);
  line-height: 1.06;
}

.mt-opcina-page .mt-page-hero > span,
.mt-mjestani-page .mt-page-hero > span,
.mt-poduzetnici-page .mt-page-hero > span,
.mt-projekti-page .mt-page-hero > span,
.mt-posjetitelji-page .mt-visitors-intro > span[aria-hidden=true] {
  width: 3rem;
  height: 0.25rem;
  margin-top: 0.35rem;
  box-shadow: none;
}

.mt-opcina-page .mt-section--services .mt-container,
.mt-mjestani-page .mt-section--services .mt-container,
.mt-poduzetnici-page .mt-section--services .mt-container,
.mt-projekti-page .mt-section--services .mt-container,
.mt-posjetitelji-page .mt-visitors-section .mt-container {
  width: min(100% - 2rem, 1260px);
}

.mt-opcina-page .mt-service-grid,
.mt-mjestani-page .mt-service-grid,
.mt-poduzetnici-page .mt-service-grid,
.mt-projekti-page .mt-service-grid,
.mt-posjetitelji-page .mt-service-grid {
  gap: clamp(1.35rem, 2.4vw, 2rem);
  align-items: stretch;
}

.mt-opcina-page .mt-service-panel,
.mt-mjestani-page .mt-service-panel,
.mt-poduzetnici-page .mt-service-panel,
.mt-projekti-page .mt-service-panel,
.mt-posjetitelji-page .mt-service-panel {
  position: relative;
  display: flex;
  min-height: clamp(25rem, 31vw, 31rem);
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1.45rem, 2vw, 1.85rem);
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(217, 221, 225, 0.95);
  border-top: 0.25rem solid var(--mt-color-accent);
  border-radius: 8px;
  box-shadow: 0 0.8rem 2rem rgba(3, 25, 39, 0.07);
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

/* Whole-card hover/focus lift removed by request — only the links inside */
/* the service panels react to hover/focus now (.mt-service-panel a:hover). */

.mt-opcina-page .mt-service-panel h3,
.mt-mjestani-page .mt-service-panel h3,
.mt-poduzetnici-page .mt-service-panel h3,
.mt-projekti-page .mt-service-panel h3,
.mt-posjetitelji-page .mt-service-panel h3 {
  margin-top: 0.45rem;
  color: var(--mt-ink);
  font-size: clamp(1.35rem, 1.7vw, 1.58rem);
  font-weight: 800;
  line-height: 1.18;
}

.mt-opcina-page .mt-service-panel p,
.mt-mjestani-page .mt-service-panel p,
.mt-poduzetnici-page .mt-service-panel p,
.mt-projekti-page .mt-service-panel p,
.mt-posjetitelji-page .mt-service-panel p {
  color: var(--mt-ink-soft);
  font-size: 1rem;
  line-height: 1.55;
}

.mt-opcina-page .mt-service-panel ul,
.mt-mjestani-page .mt-service-panel ul,
.mt-poduzetnici-page .mt-service-panel ul,
.mt-projekti-page .mt-service-panel ul,
.mt-posjetitelji-page .mt-service-panel ul {
  display: grid;
  gap: 0;
  margin-top: auto;
  padding-top: 1rem;
}

.mt-opcina-page .mt-service-panel li + li,
.mt-mjestani-page .mt-service-panel li + li,
.mt-poduzetnici-page .mt-service-panel li + li,
.mt-projekti-page .mt-service-panel li + li,
.mt-posjetitelji-page .mt-service-panel li + li {
  border-top: 1px solid rgba(217, 221, 225, 0.75);
}

.mt-opcina-page .mt-service-panel a,
.mt-mjestani-page .mt-service-panel a,
.mt-poduzetnici-page .mt-service-panel a,
.mt-projekti-page .mt-service-panel a,
.mt-posjetitelji-page .mt-service-panel a {
  width: 100%;
  gap: 0.55rem;
  padding-block: 0.72rem;
  color: var(--mt-ink);
  font-size: 0.96rem;
  font-weight: 500;
  line-height: 1.35;
  text-decoration-thickness: 0.045em;
  text-underline-offset: 0.18em;
  transition: color 180ms ease, text-decoration-color 180ms ease, transform 180ms ease;
}

.mt-opcina-page .mt-service-panel a::before,
.mt-mjestani-page .mt-service-panel a::before,
.mt-poduzetnici-page .mt-service-panel a::before,
.mt-projekti-page .mt-service-panel a::before,
.mt-posjetitelji-page .mt-service-panel a::before {
  background: var(--mt-color-primary-bright);
  transition: transform 180ms ease;
}

.mt-opcina-page .mt-service-panel a:hover,
.mt-opcina-page .mt-service-panel a:focus-visible,
.mt-mjestani-page .mt-service-panel a:hover,
.mt-mjestani-page .mt-service-panel a:focus-visible,
.mt-poduzetnici-page .mt-service-panel a:hover,
.mt-poduzetnici-page .mt-service-panel a:focus-visible,
.mt-projekti-page .mt-service-panel a:hover,
.mt-projekti-page .mt-service-panel a:focus-visible,
.mt-posjetitelji-page .mt-service-panel a:hover,
.mt-posjetitelji-page .mt-service-panel a:focus-visible {
  color: var(--mt-color-primary);
  text-decoration-color: currentColor;
  transform: translateX(0.18rem);
}

.mt-opcina-page .mt-service-panel a:hover::before,
.mt-opcina-page .mt-service-panel a:focus-visible::before,
.mt-mjestani-page .mt-service-panel a:hover::before,
.mt-mjestani-page .mt-service-panel a:focus-visible::before,
.mt-poduzetnici-page .mt-service-panel a:hover::before,
.mt-poduzetnici-page .mt-service-panel a:focus-visible::before,
.mt-projekti-page .mt-service-panel a:hover::before,
.mt-projekti-page .mt-service-panel a:focus-visible::before,
.mt-posjetitelji-page .mt-service-panel a:hover::before,
.mt-posjetitelji-page .mt-service-panel a:focus-visible::before {
  transform: translateX(0.12rem);
}

.mt-service-panel__icon--organization {
  --mt-service-panel-icon-mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/organization-svgrepo-com.svg");
}

.mt-service-panel__icon--budget {
  --mt-service-panel-icon-mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/budget.svg");
}

.mt-service-panel__icon--notice {
  --mt-service-panel-icon-mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/notice.svg");
}

.mt-service-panel__icon--layers {
  --mt-service-panel-icon-mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/layers-svgrepo-com.svg");
}

.mt-service-panel__icon--purchase {
  --mt-service-panel-icon-mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/purchase.svg");
}

.mt-service-panel__icon--economy {
  --mt-service-panel-icon-mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/economy.svg");
}

.mt-service-panel__icon--wheat {
  --mt-service-panel-icon-mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/wheat.svg");
}

.mt-service-panel__icon--tax {
  --mt-service-panel-icon-mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/tax.svg");
}

.mt-service-panel__icon--trash {
  --mt-service-panel-icon-mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/trash-svgrepo-com.svg");
}

.mt-service-panel__icon--services {
  --mt-service-panel-icon-mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/services-svgrepo-com.svg");
}

.mt-service-panel__icon--file-text {
  --mt-service-panel-icon-mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/file-text.svg");
}

.mt-service-panel__icon--community {
  --mt-service-panel-icon-mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/community-svgrepo-com.svg");
}

.mt-service-panel__icon--signs-post {
  --mt-service-panel-icon-mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/signs-post-svgrepo-com.svg");
}

.mt-service-panel__icon--group {
  --mt-service-panel-icon-mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/group-svgrepo-com.svg");
}

.mt-service-panel__icon--deal {
  --mt-service-panel-icon-mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/deal-svgrepo-com.svg");
}

.mt-service-panel__icon--wechat {
  --mt-service-panel-icon-mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/wechat-brand-assets-messenger-china-chat-oneline-svgrepo-com.svg");
}

.mt-service-panel__icon--progress {
  --mt-service-panel-icon-mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/in-progress-svgrepo-com.svg");
}

.mt-service-panel__icon--all-accounts {
  --mt-service-panel-icon-mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/all-accounts-svgrepo-com.svg");
}

.mt-service-panel__icon--tags {
  --mt-service-panel-icon-mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/tags-svgrepo-com.svg");
}

.mt-service-panel__icon--road {
  --mt-service-panel-icon-mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/road-606-svgrepo-com.svg");
}

.mt-service-panel__icon--pipe {
  --mt-service-panel-icon-mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/pipe-svgrepo-com.svg");
}

.mt-opcina-page .mt-service-panel__icon,
.mt-mjestani-page .mt-service-panel__icon,
.mt-poduzetnici-page .mt-service-panel__icon,
.mt-projekti-page .mt-service-panel__icon,
.mt-posjetitelji-page .mt-service-panel__icon {
  --mt-service-panel-symbol-size: 1.85rem;
  display: inline-grid;
  width: 3.25rem;
  height: 3.25rem;
  margin-bottom: 0.35rem;
  place-items: center;
  color: var(--mt-color-primary);
  background: rgba(var(--mt-color-primary-rgb), 0.09);
  border-radius: 8px;
  font-size: var(--mt-service-panel-symbol-size);
  line-height: 1;
  -webkit-mask: none;
  mask: none;
}

.mt-opcina-page .mt-service-panel__icon[class*=mt-service-panel__icon--]::before,
.mt-mjestani-page .mt-service-panel__icon[class*=mt-service-panel__icon--]::before,
.mt-poduzetnici-page .mt-service-panel__icon[class*=mt-service-panel__icon--]::before,
.mt-projekti-page .mt-service-panel__icon[class*=mt-service-panel__icon--]::before,
.mt-posjetitelji-page .mt-service-panel__icon[class*=mt-service-panel__icon--]::before {
  width: var(--mt-service-panel-symbol-size);
  height: var(--mt-service-panel-symbol-size);
  background: currentColor;
  content: "";
  -webkit-mask: var(--mt-service-panel-icon-mask) center/contain no-repeat;
  mask: var(--mt-service-panel-icon-mask) center/contain no-repeat;
}

.mt-service-panel__icon--trash {
  --mt-service-panel-symbol-size: 5.35rem;
}

.mt-service-panel__icon--services,
.mt-service-panel__icon--signs-post,
.mt-service-panel__icon--wechat {
  --mt-service-panel-symbol-size: 1.95rem;
}

@media (max-width: 760px) {
  .mt-opcina-page .mt-service-panel,
  .mt-mjestani-page .mt-service-panel,
  .mt-poduzetnici-page .mt-service-panel,
  .mt-projekti-page .mt-service-panel,
  .mt-posjetitelji-page .mt-service-panel {
    min-height: 0;
  }
  .mt-nav-help {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .mt-nav-help__link {
    grid-column: 1/-1;
    justify-self: start;
  }
}




.mt-opcina-page,
.mt-mjestani-page,
.mt-poduzetnici-page,
.mt-posjetitelji-page,
.mt-projekti-page {
  min-height: 100%;
}

.mt-opcina-page .mt-page-hero-section,
.mt-mjestani-page .mt-page-hero-section,
.mt-poduzetnici-page .mt-page-hero-section,
.mt-projekti-page .mt-page-hero-section,
.mt-posjetitelji-page .mt-visitors-section,
.mt-opcina-page .mt-section--services,
.mt-mjestani-page .mt-section--services,
.mt-poduzetnici-page .mt-section--services,
.mt-projekti-page .mt-section--services {
  background: transparent;
}

/* Pull the hub cards up close to the title: the hero section already supplies the
   bottom gap, so the following card grid needs no extra top padding (matches the
   tighter title→content spacing on single content pages). */
.mt-opcina-page .mt-section--services,
.mt-mjestani-page .mt-section--services,
.mt-poduzetnici-page .mt-section--services,
.mt-projekti-page .mt-section--services {
  padding-top: 0;
}

.mt-project-hub {
  padding-block: 3.25rem 5.8rem;
  background: transparent;
}

.mt-project-hub .mt-container {
  width: min(100% - 2rem, 1260px);
}

.mt-service-grid--projects .mt-service-panel {
  min-height: clamp(19rem, 23vw, 21rem);
}

.mt-visitors-section {
  padding-block: clamp(3.75rem, 7vw, 6.25rem) clamp(4.5rem, 7vw, 6.8rem);
  background: var(--mt-page-background);
  border-top: 1px solid rgba(217, 221, 225, 0.75);
}

.mt-visitors-section .mt-container {
  width: min(100% - 2rem, 1260px);
}


.mt-opcina-page .mt-page-hero-section,
.mt-mjestani-page .mt-page-hero-section,
.mt-poduzetnici-page .mt-page-hero-section,
.mt-projekti-page .mt-page-hero-section,
.mt-posjetitelji-page .mt-visitors-section {
  padding-block: clamp(3.2rem, 5vw, 4.8rem) clamp(2.1rem, 4vw, 3.2rem);
  background: transparent;
  border-top: 0;
}

.mt-opcina-page .mt-page-hero,
.mt-mjestani-page .mt-page-hero,
.mt-poduzetnici-page .mt-page-hero,
.mt-projekti-page .mt-page-hero,
.mt-posjetitelji-page .mt-visitors-intro {
  justify-items: start;
  width: min(100%, 1260px);
  margin-inline: auto;
  text-align: left;
}

.mt-posjetitelji-page .mt-visitors-intro {
  margin-bottom: clamp(2.35rem, 4vw, 3.35rem);
}

.mt-opcina-page .mt-page-hero h1,
.mt-mjestani-page .mt-page-hero h1,
.mt-poduzetnici-page .mt-page-hero h1,
.mt-projekti-page .mt-page-hero h1,
.mt-posjetitelji-page .mt-visitors-intro h1 {
  font-size: clamp(2rem, 3.2vw, 2.75rem);
  line-height: 1.06;
}

.mt-opcina-page .mt-page-hero__copy,
.mt-mjestani-page .mt-page-hero__copy,
.mt-poduzetnici-page .mt-page-hero__copy,
.mt-projekti-page .mt-page-hero__copy,
.mt-posjetitelji-page .mt-visitors-intro__copy {
  max-width: 50rem;
  color: var(--mt-ink-soft);
  font-size: 1.08rem;
  line-height: 1.55;
  text-align: left;
}

.mt-posjetitelji-page .mt-visitors-intro__copy {
  margin: 0;
}

.mt-opcina-page .mt-page-hero > span,
.mt-mjestani-page .mt-page-hero > span,
.mt-poduzetnici-page .mt-page-hero > span,
.mt-projekti-page .mt-page-hero > span,
.mt-posjetitelji-page .mt-visitors-intro > span[aria-hidden=true] {
  width: 3rem;
  height: 0.25rem;
  margin-top: 0.25rem;
  box-shadow: none;
}

.mt-opcina-page .mt-section--services,
.mt-mjestani-page .mt-section--services,
.mt-poduzetnici-page .mt-section--services,
.mt-projekti-page .mt-section--services {
  background: transparent;
}

.mt-opcina-page .mt-service-panel,
.mt-mjestani-page .mt-service-panel,
.mt-poduzetnici-page .mt-service-panel,
.mt-projekti-page .mt-service-panel,
.mt-posjetitelji-page .mt-service-panel,
.mt-service-grid--projects .mt-service-panel {
  min-height: clamp(25rem, 31vw, 31rem);
}

/* Landscape panel variant — a full-width card spanning the whole service grid,
 * split into a left header column (icon + title + description) and a right
 * multi-column link grid. Reusable across the hub pages via the
 * `mt-service-panel--landscape` modifier; falls back to the default vertical
 * card below the 3-up breakpoint. Measurements flow through component tokens. */
.mt-opcina-page .mt-service-panel--landscape,
.mt-mjestani-page .mt-service-panel--landscape,
.mt-poduzetnici-page .mt-service-panel--landscape,
.mt-projekti-page .mt-service-panel--landscape,
.mt-posjetitelji-page .mt-service-panel--landscape {
  --mt-service-panel-landscape-head: 20rem;
  --mt-service-panel-landscape-col-gap: 2.75rem;
  --mt-service-panel-landscape-link-col: 13rem;
  --mt-service-panel-landscape-link-gap: 0.4rem 1.75rem;

  grid-column: 1 / -1;
  min-height: 0;
}

@media (min-width: 960px) {
  .mt-opcina-page .mt-service-panel--landscape,
  .mt-mjestani-page .mt-service-panel--landscape,
  .mt-poduzetnici-page .mt-service-panel--landscape,
  .mt-projekti-page .mt-service-panel--landscape,
  .mt-posjetitelji-page .mt-service-panel--landscape {
    display: grid;
    grid-template-columns:
      minmax(0, var(--mt-service-panel-landscape-head))
      minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    column-gap: var(--mt-service-panel-landscape-col-gap);
    row-gap: 0.55rem;
    align-items: start;
  }

  .mt-opcina-page .mt-service-panel--landscape > :not(ul),
  .mt-mjestani-page .mt-service-panel--landscape > :not(ul),
  .mt-poduzetnici-page .mt-service-panel--landscape > :not(ul),
  .mt-projekti-page .mt-service-panel--landscape > :not(ul),
  .mt-posjetitelji-page .mt-service-panel--landscape > :not(ul) {
    grid-column: 1;
  }

  .mt-opcina-page .mt-service-panel--landscape > ul,
  .mt-mjestani-page .mt-service-panel--landscape > ul,
  .mt-poduzetnici-page .mt-service-panel--landscape > ul,
  .mt-projekti-page .mt-service-panel--landscape > ul,
  .mt-posjetitelji-page .mt-service-panel--landscape > ul {
    grid-column: 2;
    grid-row: 1 / -1;
    grid-template-columns: repeat(
      auto-fill,
      minmax(var(--mt-service-panel-landscape-link-col), 1fr)
    );
    gap: var(--mt-service-panel-landscape-link-gap);
    align-content: start;
    margin-top: 0;
    padding-top: 0;
  }

  .mt-opcina-page .mt-service-panel--landscape li + li,
  .mt-mjestani-page .mt-service-panel--landscape li + li,
  .mt-poduzetnici-page .mt-service-panel--landscape li + li,
  .mt-projekti-page .mt-service-panel--landscape li + li,
  .mt-posjetitelji-page .mt-service-panel--landscape li + li {
    border-top: 0;
  }
}

.mt-visitors-copy {
  max-width: 54rem;
  margin: -2.1rem auto 3.2rem;
  color: var(--mt-ink-soft);
  font-size: 1.08rem;
  text-align: center;
}



@media (min-width: 760px) {
  .mt-visitors-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mt-visitors-grid > .mt-visitor-card:nth-child(odd):last-child {
    grid-column: 1/-1;
  }
  .mt-events-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mt-elections-main .mt-events-grid,
  .mt-tenders-main .mt-events-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1080px) {
  .mt-visitors-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .mt-visitors-grid > .mt-visitor-card:nth-child(odd):last-child {
    grid-column: auto;
  }
  .mt-events-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr));
  }
  .mt-elections-main .mt-events-grid,
  .mt-tenders-main .mt-events-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr));
  }
}
@media (min-width: 1560px) {
  .mt-consultations-page .mt-tenders-main .mt-events-grid,
  .mt-public-calls-page .mt-tenders-main .mt-events-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 1700px) {
  .mt-elections-layout,
  .mt-tenders-layout,
  .mt-tenders-page .mt-tenders-layout {
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 23.5rem);
    column-gap: clamp(3rem, 5vw, 4.5rem);
  }
  .mt-elections-layout::before,
  .mt-tenders-layout::before {
    display: none;
  }
  .mt-elections-main,
  .mt-tenders-main {
    grid-column: 1;
  }
  .mt-elections-documents,
  .mt-tenders-documents {
    grid-column: 2;
  }
}
@media (max-width: 960px) {
  .mt-elections-layout,
  .mt-tenders-layout,
  .mt-tenders-page .mt-tenders-layout {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
  }
  .mt-elections-main,
  .mt-tenders-main,
  .mt-elections-documents,
  .mt-tenders-documents {
    grid-column: auto;
    width: 100%;
  }
  .mt-tenders-page .mt-tenders-main,
  .mt-tenders-page .mt-tenders-documents {
    grid-column: 1;
    justify-self: stretch;
    width: 100%;
    max-width: none;
  }
  .mt-tenders-page .mt-tenders-main {
    display: contents;
  }
  .mt-tenders-page .mt-tenders-main > .mt-events-grid,
  .mt-tenders-page .mt-tenders-main > .mt-empty-state {
    grid-column: 1;
    order: 1;
    width: 100%;
  }
  .mt-tenders-page .mt-tenders-documents {
    order: 2;
  }
  .mt-tenders-page .mt-tenders-main > .mt-pagination {
    grid-column: 1;
    order: 3;
    width: 100%;
  }
}
@media (max-width: 760px) {
  .mt-elections-main .mt-events-grid,
  .mt-tenders-main .mt-events-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 560px) {
  .mt-visitors-section {
    padding-block: 3.15rem 4rem;
  }
  .mt-visitors-intro {
    margin-bottom: 2.15rem;
  }
  .mt-visitor-card {
    min-height: 0;
    padding: 1.25rem;
  }
  .mt-visitor-card__head {
    gap: 0.9rem;
    padding-bottom: 1rem;
  }
  .mt-visitor-card__badge {
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 10px;
  }
  .mt-visitor-card__badge svg {
    width: 1.65rem;
    height: 1.65rem;
  }
  .mt-visitor-card__item {
    grid-template-columns: 2.1rem minmax(0, 1fr);
    gap: 0.75rem;
  }
  .mt-visitor-card__item-icon {
    width: 1.7rem;
    height: 1.7rem;
  }
}
@media (max-width: 1280px) {
  .mt-site-header__inner {
    flex-wrap: nowrap;
  }
  .mt-site-header__brandline {
    flex: 1 1 auto;
    max-width: none;
    overflow: hidden;
  }
  .mt-site-header__actions {
    flex: 0 0 auto;
    margin-left: auto;
  }
  .mt-site-header__menu {
    display: inline-flex;
  }
  .mt-site-header__tabs {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    z-index: 60;
    display: grid;
    box-sizing: border-box;
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
    justify-items: stretch;
    width: auto;
    min-width: 0;
    gap: 0.45rem;
    padding: 1rem;
    overflow: visible;
    background: var(--mt-paper);
    border: 0;
    border-bottom: 1px solid var(--mt-line);
    border-radius: 0;
    box-shadow: 0 1.25rem 2rem rgba(3, 25, 39, 0.18);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-0.65rem);
    transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
    visibility: hidden;
  }
  .mt-site-header__tabs.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    visibility: visible;
  }
  .mt-site-header__tab {
    /* The tabs drop into a light overlay sheet here (the header bar itself is
       primary/blue), so restore the dark-on-light tab colours. */
    --mt-site-header-tab-color: var(--mt-color-text-muted);
    --mt-site-header-tab-hover-bg: var(--mt-color-surface-muted);
    --mt-site-header-tab-hover-color: var(--mt-color-text);
    --mt-site-header-tab-active-bg: var(--mt-color-primary-soft);
    --mt-site-header-tab-active-color: var(--mt-color-primary);
    box-sizing: border-box;
    justify-content: flex-start;
    width: 100%;
    min-height: 3.15rem;
    padding-inline: 1.1rem;
    border-radius: 6px;
    font-size: 1.08rem;
  }
  .mt-site-header-mega {
    display: none !important;
  }
}
/* The mega panel width is now capped at the content-container width
   (min(100% - 2rem, 1260px)), so it can't overflow the viewport — the earlier
   laptop down-scaling that shrank it below the container width is no longer
   needed (and would defeat "full container width"). */
@media (max-width: 1240px) and (min-width: 901px) {
  .mt-home > .mt-hero:first-of-type.mt-hero--has-event {
    margin-bottom: 22rem;
    overflow: visible;
  }
  .mt-home > .mt-hero:first-of-type.mt-hero--has-event .mt-hero__panel {
    left: 0;
    width: min(80vw, 60rem);
    min-width: 0;
    height: 100%;
    max-height: 100%;
    border-radius: 0 48% 48% 0/0 50% 50% 0;
  }
  .mt-home > .mt-hero:first-of-type.mt-hero--has-event .mt-hero__content {
    margin-left: 0;
    padding: 3.5rem clamp(3rem, 5vw, 4.5rem) 3.5rem 4.25rem;
  }
  .mt-home > .mt-hero:first-of-type .mt-hero-event-card {
    top: calc(100% + 2rem);
    right: auto;
    bottom: auto;
    left: 50%;
    width: min(100% - 2rem, 42rem);
    transform: translateX(-50%);
  }
}
@media (max-width: 1100px) {
  .mt-home > .mt-hero:first-of-type {
    min-height: auto;
    background-color: transparent;
    background-image: none !important;
  }
  .mt-home > .mt-hero:first-of-type .mt-hero__panel {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 0;
    max-height: none;
    background: transparent;
    border-radius: 0;
    transform: none;
  }
  .mt-home > .mt-hero:first-of-type .mt-hero__content {
    width: 100%;
    margin-left: 0;
    /* No inline padding — the hero section already provides side spacing.
       Doubling it here left the search input too narrow (clipped placeholder). */
    padding: clamp(3rem, 7vw, 4.5rem) 0;
  }
  .mt-home > .mt-hero:first-of-type .mt-hero__title-name {
    font-size: clamp(2.6rem, 7.4vw, 3.55rem);
    white-space: normal;
  }
  .mt-home > .mt-hero:first-of-type .mt-search {
    width: min(100%, 51rem);
  }
}
@media (max-width: 900px) {
  .mt-site-header__login {
    display: none;
  }
  .mt-site-header__tabs {
    height: var(--mt-site-header-menu-height, calc(100dvh - 88px));
    max-height: var(--mt-site-header-menu-height, calc(100dvh - 88px));
    min-height: 0;
    grid-auto-rows: minmax(0, 1fr);
    align-content: stretch;
    align-items: stretch;
    gap: 0.5rem;
    padding: 1.35rem 1.35rem calc(6rem + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .mt-site-header__tab {
    justify-content: center;
    min-height: 0;
    font-size: clamp(1.28rem, 3.2vw, 1.55rem);
    white-space: normal;
  }
  .mt-site-header__tab--login {
    display: inline-flex;
    justify-content: center;
    margin-top: 0.35rem;
    border: 2px solid var(--mt-color-primary);
    color: var(--mt-color-primary);
  }
  .mt-hero {
    min-height: 660px;
    background-position: center top;
  }
  .mt-hero__panel {
    top: auto;
    left: 0;
    right: 0;
    transform: none;
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 28rem;
    max-height: none;
    background: var(--mt-color-accent);
    border-radius: 0;
  }
  .mt-hero__content {
    width: 100%;
    margin-left: 0;
    padding: 3.5rem 1.5rem 4rem;
  }
  .mt-hero__content h1 {
    font-size: 2.85rem;
  }
  .mt-hero__content p {
    max-width: 33rem;
    font-size: 1.08rem;
  }
  .mt-home > .mt-hero:first-of-type .mt-hero__title-kicker,
  .mt-home > .mt-hero:first-of-type .mt-hero__title-name {
    font-size: clamp(2.7rem, 8vw, 3.4rem);
    line-height: 1.12;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .mt-hero-event-card {
    top: 1.25rem;
    right: 1rem;
    left: 1rem;
    width: min(100% - 2rem, 26rem);
    margin-left: auto;
    padding: 1.15rem;
    transform: none;
  }
  .mt-hero-event-card h2 {
    font-size: 1.35rem;
  }
  .mt-hero-event-card__meta {
    grid-template-columns: 4.3rem minmax(0, 1fr);
    gap: 0.85rem;
  }
  .mt-hero-event-card__date {
    min-height: 4.3rem;
    font-size: 0.8rem;
  }
  .mt-hero-event-card__date span {
    font-size: 1.85rem;
  }
  .mt-home > .mt-hero:first-of-type.mt-hero--has-event {
    min-height: auto;
    margin-bottom: 0;
    overflow: hidden;
  }
  .mt-home > .mt-hero:first-of-type.mt-hero--has-event .mt-hero__panel {
    position: relative;
    min-height: auto;
    border-radius: 0;
  }
  .mt-home > .mt-hero:first-of-type.mt-hero--has-event .mt-hero__content {
    padding-bottom: 4.4rem;
  }
  .mt-home > .mt-hero:first-of-type .mt-hero-event-card {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: min(100% - 2rem, 26rem);
    margin: 1.5rem auto 2.25rem;
    transform: none;
  }
  .mt-hero--right .mt-hero__content {
    margin-right: 0;
    margin-left: 0;
    padding: 3.5rem 1.5rem 4rem;
  }
  .mt-section--projects {
    padding-block: 3.75rem 4.25rem;
  }
  .mt-section-projects__rail-wrap--slider {
    padding-inline: 3.25rem;
  }
  .mt-section-projects__rail {
    grid-auto-columns: calc((100% - 1.7rem) / 2);
  }
  .mt-site-footer__main {
    width: min(100% - 2rem, 38rem);
    grid-template-columns: minmax(0, 1fr);
    gap: 2.25rem;
    padding-block: 2rem 3.25rem;
  }
  .mt-site-footer__links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem 1.45rem;
  }
  .mt-site-footer__links--primary a {
    font-size: 1.05rem;
  }
  .mt-site-footer__meta ul {
    justify-content: center;
  }
}
@media (max-width: 960px) {
  .mt-section--projects .mt-container {
    width: min(100% - 2rem, 42rem);
  }
  .mt-section-projects__rail-wrap--slider {
    padding-inline: 0;
  }
  .mt-section-projects__rail {
    display: flex;
    grid-auto-columns: auto;
    gap: 1rem;
    padding: 0.3rem 0.15rem 0.95rem;
    scroll-padding-inline: 0.15rem;
    scroll-snap-type: x mandatory;
  }
  .mt-project-card {
    flex: 0 0 100%;
    max-width: 100%;
    scroll-snap-stop: always;
  }
  .mt-section-projects__controls {
    position: static;
    justify-content: center;
    gap: 0.8rem;
    margin-top: 0.9rem;
    transform: none;
  }
  .mt-section-projects__control {
    width: 3rem;
  }
  .mt-section-projects__control img {
    width: 1.05rem;
    height: 1.05rem;
  }
  .mt-section-projects__control:disabled {
    display: none;
  }
}
@media (max-width: 560px) {
  .mt-site-header {
    --mt-site-header-height: 64px;
    --mt-site-brand-logo-size: 3.25rem;
    --mt-site-brand-title-scale: 0.7;
  }
  .mt-site-header__inner {
    gap: 0.85rem;
    min-height: var(--mt-site-header-height);
    padding-inline: 16px;
  }
  .mt-site-header__brandline {
    flex: 1 1 0;
    gap: 0.9rem;
    min-width: 0;
    overflow: hidden;
  }
  .mt-site-header__section-title {
    display: inline-flex;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    min-height: 0;
    padding-left: 0.95rem;
    overflow: hidden;
    font-size: clamp(1.05rem, 6.4vw, 1.65rem);
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mt-site-brand__logo-image {
    max-width: 3.25rem;
    max-height: 3.25rem;
  }
  .mt-site-brand__wordmark {
    max-width: 8.5rem;
  }
  .mt-site-brand__name {
    max-width: min(52vw, 18rem);
  }
  .mt-site-brand__seal {
    width: 1.75rem;
  }
  .mt-site-header__actions {
    min-width: max-content;
  }
  .mt-site-header__menu {
    gap: 0.4rem;
    min-height: 2.2rem;
    padding-inline: 0;
    font-size: 1rem;
    white-space: nowrap;
  }
  .mt-site-header__menu .dashicons {
    width: 1.3rem;
    height: 1.3rem;
    font-size: 1.3rem;
  }
  .mt-site-header__tabs {
    height: var(--mt-site-header-menu-height, calc(100dvh - 64px));
    max-height: var(--mt-site-header-menu-height, calc(100dvh - 64px));
    min-height: 0;
    grid-auto-rows: minmax(0, 1fr);
    align-content: stretch;
    gap: 0.5rem;
    padding: 1.1rem 0.85rem calc(6rem + env(safe-area-inset-bottom, 0px));
  }
  .mt-site-header__tab {
    min-height: 0;
    padding-inline: 0.95rem;
    font-size: clamp(1.28rem, 5.4vw, 1.48rem);
  }
  body.login form#loginform {
    min-height: 28rem;
    padding: 3rem 1.25rem 2rem;
  }
  body.login .submit {
    margin-top: 4rem;
  }
  .opcina-login-back {
    margin-top: 2.4rem;
  }
  .mt-hero {
    min-height: 600px;
  }
  .mt-hero__content {
    padding-inline: 1rem;
  }
  .mt-hero__content h1 {
    max-width: 100%;
    font-size: clamp(2.2rem, 10vw, 2.65rem);
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .mt-home > .mt-hero:first-of-type .mt-hero__title-kicker,
  .mt-home > .mt-hero:first-of-type .mt-hero__title-name {
    font-size: clamp(2.25rem, 11vw, 2.8rem);
  }
  .mt-hero-event-card {
    padding: 1rem;
  }
  .mt-hero-event-card__meta {
    grid-template-columns: minmax(0, 1fr);
  }
  .mt-hero-event-card__date {
    width: 4.3rem;
  }
  .mt-home > .mt-hero:first-of-type.mt-hero--has-event {
    background-image: none !important;
    background-color: var(--mt-color-accent);
  }
  .mt-home > .mt-hero:first-of-type.mt-hero--has-event .mt-hero__panel {
    border-radius: 0;
  }
  .mt-home > .mt-hero:first-of-type.mt-hero--has-event .mt-hero__content {
    padding-bottom: 3.5rem;
  }
  .mt-home > .mt-hero:first-of-type .mt-hero-event-card {
    display: none;
    width: calc(100% - 2rem);
    margin: 1.25rem auto 1.6rem;
    background: var(--mt-color-accent);
  }
  .mt-search {
    margin-top: 1.5rem;
  }
  .mt-search-form {
    grid-template-columns: minmax(0, 1fr) 3rem;
    min-height: 3rem;
  }
  .mt-search-form .mt-input {
    --mt-input-padding-inline: 0.85rem;
    --mt-input-font-size: 1.08rem;
  }
  /* Hero search keeps a larger font from the base hero rule (1.28rem), which */
  /* outranks the generic mobile rule above, so the placeholder gets clipped  */
  /* on phones. Match that selector's specificity here to shrink it to fit.   */
  .mt-home > .mt-hero:first-of-type .mt-search-form .mt-input {
    --mt-input-padding-inline: 0.8rem;
    --mt-input-font-size: 0.98rem;
  }
  /* Keep the hero stat row on one line on phones instead of stacking.        */
  .mt-section-home-hero__stat-row.mt-stat-row {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 1rem;
  }
  .mt-section-home-hero__stat-row .mt-stat-row__divider {
    display: inline-block;
  }
  .mt-search-form .mt-button .dashicons {
    width: 1.32rem;
    height: 1.32rem;
    font-size: 1.32rem;
  }
  .mt-home-event-bar__link {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.45rem 0.65rem;
    width: 100%;
    min-height: 0;
    padding: 0.85rem 1rem;
    font-size: 0.9rem;
  }
  .mt-home-event-bar__label,
  .mt-home-event-bar__main,
  .mt-home-event-bar__title {
    flex-basis: 100%;
  }
  .mt-home-event-bar__main {
    justify-content: flex-start;
    text-align: left;
  }
  .mt-home-event-bar__title {
    white-space: normal;
  }
  .mt-section--news {
    padding-block: 3.5rem 4rem;
  }
  .mt-section--news .mt-section__head p {
    font-size: 1.35rem;
  }
  .mt-news-card {
    grid-template-columns: 6.5rem minmax(0, 1fr);
    gap: 1.15rem;
    padding-block: 1.65rem;
  }
  .mt-news-card__media {
    width: 6.5rem;
  }
  .mt-news-card__body h3 {
    font-size: 1.35rem;
  }
  .mt-section--projects {
    padding-block: 3.75rem 4.25rem;
  }
  .mt-section--projects .mt-section__head {
    margin-bottom: 2rem;
  }
  .mt-section--projects .mt-section__head p {
    font-size: 1.35rem;
    line-height: 1.42;
  }
  .mt-project-card__inner,
  .mt-project-card--empty {
    height: 31.5rem;
  }
  .mt-project-card__media {
    height: clamp(10.5rem, 52vw, 13.75rem);
  }
  .mt-project-card__image--fallback {
    padding: 3rem;
  }
  .mt-project-card__body {
    gap: 0.75rem;
    min-height: 0;
    padding: 1.18rem;
  }
  .mt-project-card__body h3 {
    font-size: 1.35rem;
  }
  .mt-project-card__body p {
    font-size: 1.2rem;
    line-height: 1.5;
  }
  .mt-project-card__body time {
    font-size: 1.1rem;
  }
  .mt-project-card__more {
    font-size: 0.98rem;
  }
}
@media (max-width: 1240px) {
  .mt-site-brand__name {
    display: none;
  }
}
@media (max-width: 380px) {
  .mt-site-header {
    --mt-site-brand-title-scale: 0.64;
  }
  .mt-site-header__inner {
    gap: 0.85rem;
    padding-inline: 12px;
  }
  .mt-site-header__brandline {
    gap: 0.65rem;
  }
  .mt-site-header__section-title {
    padding-left: 0.65rem;
    font-size: clamp(1rem, 5.8vw, 1.35rem);
  }
  .mt-site-brand__logo-image {
    max-width: 100%;
    max-height: 100%;
  }
  .mt-site-brand__name {
    max-width: 8.5rem;
  }
  .mt-site-header__menu {
    gap: 0.3rem;
    font-size: 0.92rem;
  }
  .mt-site-header__menu .dashicons {
    width: 1.2rem;
    height: 1.2rem;
    font-size: 1.2rem;
  }
}
@media (min-width: 700px) {
  .mt-service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mt-news-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 3.75rem;
  }
  .mt-news-card:nth-child(-n+2) {
    padding-top: 0;
  }
  .mt-section__head:not(.mt-section__head--center) {
    grid-template-columns: 1fr auto;
    align-items: end;
  }
  .mt-section__head:not(.mt-section__head--center) p {
    grid-column: 1;
  }
}
@media (min-width: 901px) {
  .mt-document-register,
  .mt-document-register__groups,
  .mt-document-register__group {
    overflow: visible;
  }
  .mt-document-register__group {
    position: relative;
  }
  .mt-document-register__group[open] {
    z-index: 20;
    border-bottom-color: transparent;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }
  .mt-document-register__group[open] summary {
    position: relative;
    z-index: 2;
    background: #f7fcf9;
    border-radius: 8px 8px 0 0;
  }
  .mt-document-register__dropdown {
    position: absolute;
    top: calc(100% - 1px);
    right: -1px;
    left: -1px;
    z-index: 1;
    background: linear-gradient(180deg, #f7fcf9 0, #f7fcf9 0.6rem, #fff 3.6rem, #fff 100%);
    border: 1px solid rgba(54, 201, 87, 0.46);
    border-top: 0;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 1.1rem 2.4rem rgba(3, 25, 39, 0.14);
    animation: mt-document-register-dropdown-fade 150ms ease-out;
  }
}
@keyframes mt-document-register-dropdown-fade {
  from {
    opacity: 0;
    transform: translateY(-0.16rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (min-width: 901px) {
  .mt-document-register {
    grid-template-columns: minmax(14rem, 0.75fr) minmax(0, 1.55fr);
    align-items: start;
    width: min(100%, var(--mt-home-content-width));
    max-width: var(--mt-home-content-width);
    margin-right: 0;
  }
  .mt-document-register__head {
    align-self: start;
  }
  .mt-document-register__groups {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    align-items: stretch;
  }
  .mt-document-register__latest {
    grid-column: 1/-1;
  }
  .mt-document-register__latest-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mt-document-register__group summary {
    height: 100%;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }
  .mt-document-register__count {
    grid-column: 1/-1;
    grid-row: 2;
    justify-self: start;
    font-size: 0.68rem;
  }
  .mt-document-register__group summary::after {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
  }
  .mt-document-register__summary-main {
    display: block;
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    overflow-wrap: break-word;
    line-height: 1.25;
  }
}
@media (min-width: 1280px) {
  .mt-official-layout {
    grid-template-columns: minmax(0, var(--mt-home-content-width));
    align-items: start;
    justify-content: center;
    justify-items: stretch;
  }
  .mt-official-layout__main {
    width: 100%;
  }
  .mt-document-register {
    justify-self: stretch;
    grid-template-columns: minmax(14rem, 0.75fr) minmax(0, 1.55fr);
    width: min(100%, var(--mt-home-content-width));
    max-width: var(--mt-home-content-width);
    margin-right: 0;
  }
  .mt-document-register__groups {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    align-items: stretch;
  }
  .mt-document-register__group summary {
    height: 100%;
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .mt-document-register__summary-main {
    display: block;
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    overflow-wrap: break-word;
    line-height: 1.25;
  }
  .mt-document-register__count {
    grid-column: 1/-1;
    grid-row: 2;
    justify-self: start;
    font-size: 0.68rem;
  }
  .mt-document-register__group summary::after {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
  }
}
@media (min-width: 2360px) {
  .mt-section--news:not(.mt-section--local-news) .mt-container {
    width: calc(100% - 2rem);
  }
  .mt-official-layout {
    grid-template-columns: minmax(0, var(--mt-home-content-width));
    align-items: start;
    justify-content: center;
    justify-items: stretch;
  }
  .mt-official-layout__main {
    grid-column: auto;
    grid-row: auto;
    width: 100%;
  }
  .mt-document-register {
    grid-column: auto;
    grid-row: auto;
    justify-self: stretch;
    width: min(100%, var(--mt-home-content-width));
    margin-right: 0;
  }
}
@media (min-width: 960px) {
  .mt-section {
    padding-block: 5rem;
  }
  .mt-section--services {
    padding-block: 3.5rem 6.25rem;
  }
  .mt-section__head h2 {
    font-size: 2.5rem;
  }
  .mt-section__head--center h2 {
    font-size: 2.8rem;
  }
  .mt-service-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .mt-service-grid--four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.single-news__content img {
  cursor: zoom-in;
}

.mt-site-header__section-title,
.mt-site-header__tab,
.mt-site-header__login,
.mt-site-header__menu,
.mt-editor-content a:is([href^="tel:"], [href^="mailto:"]),
.mt-editor-content h2,
.single-document-files__action,
.mt-search-form .mt-button,
.mt-news-more,
.mt-project-card__more,
.mt-hero-event-card__more,
.mt-service-card__more,
.mt-document-register__group summary,
.mt-document-archive__download,
.mt-visitor-card__link,
.mt-site-footer__links--primary a {
  font-weight: 700;
}

.mt-site-header__section-title {
  font-size: var(--mt-type-h3);
  line-height: 1.25;
}

.mt-site-brand__wordmark,
.mt-site-brand__name {
  font-family: var(--mt-font-brand);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: uppercase;
}

.mt-site-brand__wordmark,
.mt-site-brand__name {
  font-size: calc(var(--mt-site-header-height) * var(--mt-site-brand-title-scale));
  line-height: 0.82;
}

.mt-site-header__tab {
  font-size: 0.96rem;
  font-weight: var(--mt-font-weight-medium);
  line-height: 1;
}

.mt-site-header__login {
  font-size: 0.95rem;
  font-weight: var(--mt-font-weight-medium);
  line-height: 1;
}

.mt-site-header__menu {
  font-size: var(--mt-type-body);
  font-weight: var(--mt-font-weight-medium);
  line-height: 1;
}

@media (min-width: 1281px) and (max-width: 1520px) {
  .mt-site-header__tab {
    font-size: 0.96rem;
  }
}
@media (max-width: 900px) {
  .mt-site-header__tab {
    font-size: clamp(1.28rem, 3.2vw, 1.55rem);
  }
}
@media (max-width: 560px) {
  .mt-site-header__tab {
    font-size: clamp(1.28rem, 5.4vw, 1.48rem);
  }
  .mt-site-header__menu {
    font-size: 1rem;
  }
}
.mt-hero__content h1 {
  font-size: var(--mt-type-h1);
  font-weight: 700;
  line-height: 1.25;
}

.mt-hero__content p,
.mt-visitors-intro p,
.mt-section--news .mt-section__head p,
.mt-section--projects .mt-section__head p {
  font-size: var(--mt-type-intro);
  font-weight: 400;
  line-height: 1.4;
}

.mt-section__head h2,
.mt-section--news .mt-section__head h2,
.mt-section--projects .mt-section__head h2,
.mt-section__head--center h2,
.mt-document-register__head h2,
.mt-content__header h1,
.mt-content__header h2 {
  font-size: var(--mt-type-h2);
  font-weight: 600;
  line-height: 1.25;
}

/* Custom page headers (content / contact / karta all share                */
/* .mt-content__header) get the same title treatment as the .mt-page-hero  */
/* pages: a larger left-aligned title with the small accent rule beneath.   */
.mt-content__header h1 {
  font-size: clamp(2rem, 3.2vw, 2.75rem);
  line-height: 1.06;
}

.mt-content__header h1::after {
  display: block;
  width: 3rem;
  height: 0.25rem;
  margin-top: 0.7rem;
  background: var(--mt-color-primary);
  border-radius: 999px;
  content: "";
}

.mt-hero-event-card h2,
.mt-news-card__body h3,
.mt-project-card__body h3,
.mt-visitor-card h2,
.mt-visitor-card__title,
.mt-service-card h3,
.mt-service-panel h2,
.mt-service-panel__title,
.mt-related-posts h2 {
  font-size: var(--mt-type-h3);
  font-weight: 600;
  line-height: 1.33;
}

.mt-card-label,
.mt-hero-event-card__eyebrow,
.mt-hero-event-card__date,
.mt-document-register__count,
.mt-document-archive__category,
.mt-visitor-card__meta,
.mt-site-footer__eyebrow {
  font-size: var(--mt-type-small);
  font-weight: 700;
  line-height: 1.35;
}

.single-news__content,
.mt-content__article,
.mt-document-register__head p:not(.mt-card-label),
.mt-news-card__body p:not(.mt-card-label),
.mt-project-card__body p,
.mt-hero-event-card__meta p,
.mt-hero-event-card__excerpt,
.mt-site-footer__contact-list,
.mt-site-footer__email,
.mt-site-footer__contact-link {
  font-size: var(--mt-type-body);
  font-weight: 400;
  line-height: 1.5;
}

.mt-news-card__body time,
.mt-project-card__body time,
.single-news__meta,
.mt-related-posts__meta,
.mt-site-footer__meta a {
  font-size: var(--mt-type-small);
  font-weight: 400;
  line-height: 1.35;
}

.single-news__header-inner h1 {
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.3;
}

.single-news__meta {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.35;
}

/* Inner-page intro is left-aligned and contained on EVERY page (matches  */
/* the komunalne-usluge / page-type heroes). The breadcrumbs follow        */
/* automatically — once the hero is justify-items:start they shrink-wrap   */
/* to the left edge. Single posts use .single-news__header and keep their  */
/* own banner. The .mt-*-page overrides above are now the same values.     */
.mt-page-hero-section {
  padding-block: clamp(3.2rem, 5vw, 4.8rem) clamp(2.1rem, 4vw, 3.2rem);
  background: transparent;
  border-top: 0;
}

.mt-page-hero {
  gap: 0.45rem;
  justify-items: start;
  width: min(100%, 1260px);
  margin-inline: auto;
  text-align: left;
}

.mt-page-hero h1,
.mt-visitors-intro h1 {
  font-size: clamp(2rem, 3.2vw, 2.75rem);
  font-weight: 600;
  line-height: 1.06;
}

.mt-page-hero__copy,
.mt-visitors-intro p {
  max-width: 50rem;
  color: var(--mt-ink-soft);
  font-size: 1.08rem;
  font-weight: 400;
  line-height: 1.55;
  text-align: left;
}

.mt-page-hero > span,
.mt-visitors-intro > span[aria-hidden=true] {
  width: 3rem;
  height: 0.25rem;
  margin-top: 0.25rem;
  box-shadow: none;
}

.mt-hero-event-card__date {
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.15;
}

.mt-hero-event-card__date span {
  margin-bottom: 0.1rem;
  font-size: clamp(1.75rem, 2.2vw, 2.15rem);
  font-weight: 700;
  line-height: 1;
}

@media (max-width: 560px) {
  .mt-hero__content h1 {
    font-size: clamp(2rem, 9vw, 2.25rem);
  }
  .mt-site-header__section-title {
    font-size: clamp(1.05rem, 5.5vw, 1.375rem);
  }
}
.mt-home .mt-section--projects .mt-section-projects__rail {
  grid-auto-columns: calc((100% - 2.8rem) / 3);
  gap: 1.4rem;
  padding: 0.35rem 0 1.25rem;
}

.mt-home .mt-section--projects .mt-project-card {
  height: auto;
}

.mt-home .mt-section--projects .mt-project-card__inner,
.mt-home .mt-section--projects .mt-project-card--empty {
  height: 100%;
  min-height: clamp(27.5rem, 28vw, 31rem);
  background: var(--mt-paper);
  border: 1px solid rgba(217, 221, 225, 0.95);
  border-radius: 8px;
  box-shadow: 0 0.45rem 1.1rem rgba(3, 25, 39, 0.07);
}

.mt-home .mt-section--projects .mt-project-card__inner:hover,
.mt-home .mt-section--projects .mt-project-card__inner:focus-within {
  box-shadow: 0 0.7rem 1.35rem rgba(3, 25, 39, 0.12);
  transform: translateY(-0.12rem);
}

.mt-home .mt-section--projects .mt-project-card__media {
  height: auto;
  aspect-ratio: 16/10;
}

.mt-home .mt-section--projects .mt-project-card__image--fallback {
  padding: 2.45rem;
}

.mt-home .mt-section--projects .mt-project-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.15rem;
}

.mt-home .mt-section--projects .mt-project-card__body h3 {
  font-size: clamp(1.24rem, 1.6vw, 1.45rem);
  font-weight: 700;
  line-height: 1.24;
  -webkit-line-clamp: 3;
}

.mt-home .mt-section--projects .mt-project-card__body p {
  color: #1d2c38;
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.45;
}

.mt-home .mt-section--projects .mt-project-card__body time {
  color: var(--mt-ink);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.35;
}

.mt-home .mt-section--projects .mt-project-card__more {
  gap: 0.6rem;
  margin-top: auto;
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
}

.mt-home .mt-news-more {
  font-weight: 700;
}

.mt-home .mt-section--projects .mt-project-card__arrow {
  width: 1.05rem;
  height: 1.05rem;
}

@media (max-width: 960px) {
  .mt-home .mt-section--projects .mt-section-projects__rail {
    gap: 1rem;
  }
}
@media (max-width: 560px) {
  .mt-home .mt-section--projects .mt-project-card__body h3 {
    font-size: 1.125rem;
  }
  .mt-home .mt-section--projects .mt-project-card__image--fallback {
    padding: 2.25rem;
  }
}
.mt-home .mt-section--projects {
  position: relative;
  padding-block: clamp(5.75rem, 7vw, 7.25rem);
  overflow: visible;
  background: transparent;
}

.mt-home .mt-section--projects::before,
.mt-home .mt-section--projects::after {
  display: none;
  content: none;
}

.mt-home .mt-section--projects .mt-container {
  position: relative;
  z-index: 1;
  width: min(100% - var(--section-gutter), var(--mt-home-content-width));
}

.mt-home .mt-section--projects .mt-section-projects__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "eyebrow more" "title more" "text more";
  align-items: start;
  gap: 0.62rem clamp(2rem, 7vw, 8rem);
  max-width: none;
  margin-bottom: clamp(2.6rem, 4vw, 3.5rem);
}

.mt-home .mt-section--projects .mt-section-projects__eyebrow {
  grid-area: eyebrow;
  display: inline-flex;
  align-items: center;
  gap: 0.62rem;
  width: max-content;
  max-width: 100%;
  color: var(--mt-color-primary);
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.mt-home .mt-section--projects .mt-section-projects__eyebrow::before {
  width: 1rem;
  height: 1rem;
  background: currentColor;
  content: "";
  -webkit-mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/project-new-svgrepo-com.svg") center/contain no-repeat;
  mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/project-new-svgrepo-com.svg") center/contain no-repeat;
}

.mt-home .mt-section--official-notices .mt-section-official-notices__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.62rem;
  width: max-content;
  max-width: 100%;
  color: var(--mt-color-primary);
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0.1em;
}


.mt-home .mt-section--official-notices .mt-section-official-notices__eyebrow span {
  display: none;
}

.mt-home .mt-section--official-notices .mt-section-official-notices__eyebrow::before {
  width: 1.08rem;
  height: 1.08rem;
  background: currentColor;
  content: "";
  -webkit-mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/megaphone.svg") center/contain no-repeat;
  mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/megaphone.svg") center/contain no-repeat;
}

.mt-home .mt-section--projects .mt-section__head h2 {
  position: relative;
  grid-area: title;
  width: max-content;
  max-width: 100%;
  margin-top: 0.25rem;
  font-size: var(--mt-home-section-title);
  font-weight: 800;
  line-height: 1.05;
}

.mt-home .mt-section--projects .mt-section__head h2::after {
  display: block;
  width: var(--mt-home-section-rule-width);
  height: var(--mt-home-section-rule-height);
  margin-top: 0.75rem;
  background: var(--mt-color-primary-bright);
  border-radius: 999px;
  content: "";
}

.mt-home .mt-section--projects .mt-section__head > p:not(.mt-card-label) {
  grid-area: text;
  max-width: 31rem;
  color: var(--mt-ink-soft);
  font-size: clamp(1.08rem, 1.45vw, 1.22rem);
  font-weight: 400;
  line-height: 1.5;
}

.mt-home .mt-section--projects .mt-section-projects__more {
  grid-area: more;
  justify-self: end;
  align-self: center;
  margin: 0;
}

.mt-home .mt-section--projects .mt-section-projects__rail-wrap--slider {
  padding-inline: clamp(3.85rem, 6vw, 5rem);
}

.mt-home .mt-section--projects .mt-section-projects__rail {
  grid-auto-columns: calc((100% - 3.6rem) / 3);
  gap: 1.8rem;
  padding: 0.45rem 0 1.25rem;
}

.mt-home .mt-section--projects .mt-project-card__inner,
.mt-home .mt-section--projects .mt-project-card--empty {
  min-height: clamp(31rem, 33vw, 35rem);
  border-color: rgba(217, 221, 225, 0.96);
  box-shadow: 0 0.8rem 1.65rem rgba(3, 25, 39, 0.08);
}

.mt-home .mt-section--projects .mt-project-card__inner:hover,
.mt-home .mt-section--projects .mt-project-card__inner:focus-within {
  border-color: rgba(22, 139, 58, 0.38);
  box-shadow: 0 1.05rem 2rem rgba(3, 25, 39, 0.12);
}

.mt-home .mt-section--projects .mt-project-card__media {
  aspect-ratio: 16/10;
}

.mt-home .mt-section--projects .mt-project-card__body {
  gap: 0.9rem;
  padding: clamp(1.35rem, 1.7vw, 1.65rem);
}

.mt-home .mt-section--projects .mt-project-card__body h3 {
  font-size: clamp(1.42rem, 1.75vw, 1.72rem);
  font-weight: 800;
  line-height: 1.16;
  -webkit-line-clamp: 3;
}

.mt-home .mt-section--projects .mt-project-card__body p {
  color: var(--mt-ink-soft);
  font-size: 1rem;
  line-height: 1.48;
  -webkit-line-clamp: 3;
}

.mt-home .mt-section--projects .mt-project-card__body time {
  display: inline-flex;
  align-items: center;
  gap: 0.48rem;
  color: var(--mt-ink);
  font-size: 0.95rem;
  font-weight: 500;
}

.mt-home .mt-section--projects .mt-project-card__body time::before {
  width: 1rem;
  height: 1rem;
  background: var(--mt-color-primary);
  content: "";
  flex: 0 0 auto;
  -webkit-mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/event-svgrepo-com.svg") center/contain no-repeat;
  mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/event-svgrepo-com.svg") center/contain no-repeat;
}

.mt-home .mt-section--projects .mt-project-card__more {
  justify-content: flex-end;
  font-size: 1rem;
}

.mt-home .mt-section--projects .mt-section-projects__controls {
  top: calc(50% + 1.4rem);
}

.mt-home .mt-section--projects .mt-section-projects__control {
  position: relative;
  width: 3.35rem;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(217, 221, 225, 0.95);
  box-shadow: 0 0.85rem 1.4rem rgba(3, 25, 39, 0.13);
}

.mt-home .mt-section--projects .mt-section-projects__control::before {
  width: 1.22rem;
  height: 1.22rem;
  background: var(--mt-color-primary);
  content: "";
  -webkit-mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/arrow-right.svg") center/contain no-repeat;
  mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/arrow-right.svg") center/contain no-repeat;
}

.mt-home .mt-section--projects .mt-section-projects__control--prev::before {
  transform: rotate(180deg);
}

.mt-home .mt-section--projects .mt-section-projects__control img {
  display: none;
}

.mt-home .mt-section--projects .mt-section-projects__control:hover,
.mt-home .mt-section--projects .mt-section-projects__control:focus-visible {
  background: var(--mt-paper);
  border-color: rgba(22, 139, 58, 0.38);
  transform: scale(1.04);
}

.mt-home .mt-section--projects .mt-section-projects__dots {
  display: flex;
  justify-content: center;
  gap: 0.9rem;
  min-height: 0.8rem;
  margin-top: clamp(1.2rem, 2vw, 1.7rem);
}

.mt-home .mt-section--projects .mt-section-projects__dot {
  width: 0.72rem;
  height: 0.72rem;
  padding: 0;
  background: rgba(217, 221, 225, 0.82);
  border: 0;
  border-radius: 999px;
}

.mt-home .mt-section--projects .mt-section-projects__dot.is-active {
  background: var(--mt-color-primary);
}

.mt-home .mt-section--official-notices .mt-section__head h2 {
  position: relative;
  width: max-content;
  max-width: 100%;
  margin-top: 0.25rem;
  font-size: var(--mt-home-section-title);
  font-weight: 800;
  line-height: 1.05;
}

.mt-home .mt-section--official-notices .mt-section__head h2::after {
  display: block;
  width: var(--mt-home-section-rule-width);
  height: var(--mt-home-section-rule-height);
  margin-top: 0.75rem;
  background: var(--mt-color-primary-bright);
  border-radius: 999px;
  content: "";
}


@media (max-width: 960px) {
  .mt-home .mt-section--projects .mt-section-projects__head {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "eyebrow" "title" "text" "more";
  }
  .mt-home .mt-section--projects .mt-section-projects__more {
    justify-self: start;
    align-self: start;
    margin-top: 0.7rem;
  }
  .mt-home .mt-section--projects .mt-section-projects__rail-wrap--slider {
    padding-inline: 0;
  }
  .mt-home .mt-section--projects .mt-section-projects__rail {
    gap: 1rem;
  }
  .mt-home .mt-section--projects .mt-section-projects__controls {
    position: static;
    margin-top: 1rem;
    transform: none;
  }
}
@media (max-width: 560px) {
  .mt-home .mt-section--projects {
    padding-block: 4.25rem 4.5rem;
  }
  .mt-home .mt-section--projects .mt-section__head h2 {
    font-size: var(--mt-home-section-title-mobile);
  }
  .mt-home .mt-section--official-notices .mt-section__head h2 {
    font-size: var(--mt-home-section-title-mobile);
  }
  .mt-home .mt-section--projects .mt-section__head > p:not(.mt-card-label) {
    font-size: 1.05rem;
  }
  .mt-home .mt-section--projects .mt-project-card__inner,
  .mt-home .mt-section--projects .mt-project-card--empty {
    min-height: 30rem;
  }
  .mt-section--official-notices .mt-container,
  .mt-document-archive .mt-events-archive__section .mt-container {
    width: calc(100% - 1rem);
  }
  .mt-official-layout {
    justify-items: stretch;
  }
  .mt-document-register {
    justify-self: stretch;
    width: 100%;
    max-width: none;
    padding: 1rem;
  }
  .mt-document-archive__search,
  .mt-document-archive__filter {
    width: 100%;
  }
}
.mt-site-footer__links--primary a {
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.35;
}

.mt-site-footer__links--secondary a {
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.4;
}

.mt-site-footer__eyebrow {
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.35;
}

.mt-site-footer__contact-list,
.mt-site-footer__email,
.mt-site-footer__contact-link {
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.45;
}

.mt-site-footer__meta a {
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.35;
}

@media (max-width: 900px) {
  .mt-site-footer__links--primary a {
    font-size: 1.05rem;
  }
}
/* Homepage section heads with a "See all" CTA (Lokalne vijesti, Službene
   obavijesti): put the CTA in the title's own grid row so it centres on the
   TITLE, not on the whole eyebrow + title + subtitle stack. display:contents
   lifts the block's children (eyebrow/title/sub) into this grid as rows. */
.mt-home .mt-two-col__head,
.mt-home .mt-section--official-notices .mt-section-official-notices__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "eyebrow ."
    "title   cta"
    "sub     .";
  align-items: center;
  max-width: none;
}

.mt-home .mt-two-col__head {
  column-gap: var(--mt-space-lg);
  row-gap: var(--mt-section-head-block-gap);
}

.mt-home .mt-section--official-notices .mt-section-official-notices__head {
  column-gap: clamp(2rem, 7vw, 8rem);
  row-gap: 0.62rem;
}

.mt-home .mt-two-col__head > .mt-section-head__block,
.mt-home .mt-section--official-notices .mt-section-official-notices__head > .mt-section-head__block {
  display: contents;
}

.mt-home .mt-two-col__head .mt-section-head__eyebrow,
.mt-home .mt-section--official-notices .mt-section-official-notices__head .mt-section-head__eyebrow {
  grid-area: eyebrow;
}

.mt-home .mt-two-col__head .mt-section-head__title,
.mt-home .mt-section--official-notices .mt-section-official-notices__head .mt-section-head__title {
  grid-area: title;
}

.mt-home .mt-two-col__head .mt-section-head__sub,
.mt-home .mt-section--official-notices .mt-section-official-notices__head .mt-section-head__sub {
  grid-area: sub;
}

.mt-home .mt-two-col__head .mt-section-head__cta,
.mt-home .mt-section--official-notices .mt-section-official-notices__head .mt-section-head__cta {
  grid-area: cta;
  align-self: center;
  justify-self: end;
  /* Nudge up off the accent rule so the CTA centres on the title TEXT, not the
     text+accent box (the accent adds its margin + height below the text). */
  transform: translateY(calc((var(--mt-space-md) + var(--mt-section-head-accent-height, 3px)) / -2));
}

.mt-home .mt-section--official-notices .mt-section-official-notices__intro {
  min-width: 0;
}

.mt-home .mt-section--official-notices .mt-section-official-notices__archive-link {
  justify-self: end;
  align-self: center;
  margin: 0;
}

.mt-home .mt-document-register {
  position: relative;
  display: grid;
  grid-template-columns: minmax(16rem, 0.48fr) minmax(0, 1fr);
  grid-template-areas: "head categories" "head latest";
  gap: clamp(2rem, 4vw, 3.4rem);
  width: min(100%, var(--mt-home-content-width));
  max-width: var(--mt-home-content-width);
  padding: clamp(2.4rem, 4vw, 3.8rem);
  overflow: visible;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(217, 221, 225, 0.95);
  border-radius: 16px;
  box-shadow: 0 1.35rem 3.2rem rgba(3, 25, 39, 0.09);
}

.mt-home .mt-document-register__head {
  position: relative;
  grid-area: head;
  align-self: stretch;
  align-content: start;
  gap: 1rem;
  min-height: 34rem;
  padding-right: clamp(1.8rem, 3vw, 3rem);
  border-right: 1px solid rgba(217, 221, 225, 0.9);
}

.mt-home .mt-document-register__head::after {
  position: absolute;
  right: clamp(1.8rem, 3vw, 3rem);
  left: 0;
  bottom: 0;
  height: 9rem;
  opacity: 0.18;
  background: var(--mt-color-primary);
  content: "";
  -webkit-mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/document-library.svg") left bottom/contain no-repeat;
  mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/document-library.svg") left bottom/contain no-repeat;
  pointer-events: none;
}

.mt-home .mt-document-register__top {
  display: none;
}

.mt-home .mt-document-register__head .mt-card-label {
  color: var(--mt-color-primary);
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0.18em;
}

.mt-home .mt-document-register__head h2 {
  width: min-content;
  margin-top: 0.35rem;
  font-size: var(--mt-home-section-title);
  font-weight: 800;
  line-height: 1.08;
}

.mt-home .mt-document-register__head h2::after {
  display: block;
  width: var(--mt-home-section-rule-width);
  height: var(--mt-home-section-rule-height);
  margin-top: 1.25rem;
  background: var(--mt-color-primary-bright);
  border-radius: 999px;
  content: "";
}

.mt-home .mt-document-register__head p:not(.mt-card-label) {
  max-width: 18.5rem;
  color: var(--mt-ink-soft);
  font-size: 1.04rem;
  line-height: 1.55;
}

.mt-home .mt-document-register__archive-link {
  justify-self: start;
  gap: 0.65rem;
  margin-top: 1.4rem;
  padding: 1rem 1.25rem;
  background: var(--mt-color-primary);
  border-color: var(--mt-color-primary);
  border-radius: 8px;
  box-shadow: 0 0.8rem 1.3rem rgba(22, 139, 58, 0.18);
  font-size: 1rem;
  font-weight: 800;
}

.mt-home .mt-document-register__categories {
  grid-area: categories;
  display: grid;
  gap: 1.45rem;
  min-width: 0;
}

.mt-home .mt-document-register__categories-title {
  margin: 0;
  color: var(--mt-ink);
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.2;
}

.mt-home .mt-document-register__groups {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: auto;
  gap: 1rem;
  align-items: start;
}

.mt-home .mt-document-register__group {
  position: relative;
  height: auto;
  background: #fff;
  border: 1px solid rgba(217, 221, 225, 0.95);
  border-radius: 8px;
  box-shadow: 0 0.45rem 1.05rem rgba(3, 25, 39, 0.035);
}

.mt-home .mt-document-register__group summary {
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-rows: auto;
  align-items: center;
  gap: 0.9rem;
  min-height: 4.25rem;
  padding: 1rem 1.2rem;
}

.mt-home .mt-document-register__summary-main {
  grid-column: 1;
  grid-row: 1;
  font-size: 0.98rem;
  font-weight: 800;
  line-height: 1.2;
}

.mt-home .mt-document-register__count {
  grid-column: 2;
  grid-row: 1;
  display: inline-flex;
  align-items: baseline;
  gap: 0.55rem;
  color: var(--mt-ink-soft);
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.mt-home .mt-document-register__count-number {
  color: var(--mt-color-primary);
  font-weight: 800;
}

.mt-home .mt-document-register__count-label {
  color: var(--mt-ink-soft);
  font-weight: 400;
}

.mt-home .mt-document-register__group summary::after {
  grid-column: 3;
  grid-row: 1;
  width: 0.66rem;
  height: 0.66rem;
  margin-top: -0.18rem;
  color: var(--mt-color-primary);
}

.mt-home .mt-document-register__group:not([open]):hover,
.mt-home .mt-document-register__group:not([open]):focus-within {
  background: #fff;
  border-color: rgba(54, 201, 87, 0.48);
  box-shadow: 0 0.65rem 1.25rem rgba(3, 25, 39, 0.055);
}

.mt-home .mt-document-register__group[open] {
  background: #f7fcf9;
  border-color: rgba(54, 201, 87, 0.52);
}

.mt-home .mt-document-register__latest {
  grid-area: latest;
  gap: 1.3rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(217, 221, 225, 0.9);
}

.mt-home .mt-document-register__latest-head {
  display: flex;
  align-items: center;
  gap: 0.72rem;
}

.mt-home .mt-document-register__latest-head::before {
  width: 1.55rem;
  height: 1.55rem;
  background: var(--mt-color-primary);
  content: "";
  flex: 0 0 auto;
  -webkit-mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/event-svgrepo-com.svg") center/contain no-repeat;
  mask: url("http://plavilink.duckdns.org/wp-content/themes/opcinaTema/assets/svg/event-svgrepo-com.svg") center/contain no-repeat;
}

.mt-home .mt-document-register__latest-head h3 {
  font-size: 1.35rem;
  font-weight: 800;
}

.mt-home .mt-document-register__latest-head p {
  display: none;
}

.mt-home .mt-document-register__latest-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(217, 221, 225, 0.95);
  border-radius: 8px;
}

.mt-home .mt-document-register__latest-item {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1.2fr) minmax(7.2rem, 0.45fr) minmax(7.6rem, 0.42fr) auto;
  align-items: center;
  gap: 1.1rem;
  min-width: 0;
  padding: 1.05rem 1.25rem;
  background: #fff;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.mt-home .mt-document-register__latest-item + .mt-document-register__latest-item {
  border-top: 1px solid rgba(217, 221, 225, 0.82);
}

.mt-home .mt-document-register__latest-item:hover,
.mt-home .mt-document-register__latest-item:focus-visible {
  background: #fbfffc;
  box-shadow: none;
  transform: none;
}

.mt-home .mt-document-register__latest-title {
  grid-column: 2;
  min-width: 0;
  font-size: 0.96rem;
  font-weight: 800;
  line-height: 1.25;
  -webkit-line-clamp: 1;
}

.mt-home .mt-document-register__latest-category {
  grid-column: 3;
  justify-self: start;
  max-width: 100%;
  padding: 0.25rem 0.72rem;
  background: rgba(22, 139, 58, 0.1);
  font-size: 0.78rem;
  white-space: nowrap;
}

.mt-home .mt-document-register__latest-date {
  grid-column: 4;
  color: var(--mt-ink-soft);
  font-size: 0.9rem;
  line-height: 1.3;
}

.mt-home .mt-document-register__latest-action {
  grid-column: 5;
  justify-self: end;
  margin: 0;
  font-size: 0.88rem;
  font-weight: 800;
}

@media (max-width: 1100px) {
  .mt-home .mt-document-register {
    grid-template-columns: 1fr;
    grid-template-areas: "head" "categories" "latest";
  }
  .mt-home .mt-document-register__head {
    min-height: 0;
    padding-right: 0;
    padding-bottom: 2rem;
    border-right: 0;
    border-bottom: 1px solid rgba(217, 221, 225, 0.9);
  }
  .mt-home .mt-document-register__head::after {
    display: none;
  }
}
@media (max-width: 760px) {
  .mt-home .mt-section--official-notices .mt-section-official-notices__head {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "eyebrow"
      "title"
      "sub"
      "cta";
  }
  .mt-home .mt-section--official-notices .mt-section-official-notices__head .mt-section-head__cta {
    justify-self: start;
    align-self: start;
    margin-top: 0.7rem;
    transform: none;
  }
  .mt-home .mt-document-register {
    padding: 1.15rem;
    border-radius: 12px;
  }
  .mt-home .mt-document-register__groups {
    grid-template-columns: 1fr;
  }
  .mt-home .mt-document-register__group summary {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
  }
  .mt-home .mt-document-register__count {
    grid-column: 1;
    grid-row: 2;
  }
  .mt-home .mt-document-register__group summary::after {
    grid-column: 2;
    grid-row: 1;
  }
  .mt-home .mt-document-register__latest-item {
    grid-template-columns: 1.25rem minmax(0, 1fr);
    gap: 0.35rem 0.75rem;
  }
  .mt-home .mt-document-register__latest-title {
    grid-column: 2;
    -webkit-line-clamp: 2;
  }
  .mt-home .mt-document-register__latest-category,
  .mt-home .mt-document-register__latest-date,
  .mt-home .mt-document-register__latest-action {
    grid-column: 2;
    justify-self: start;
  }
}
@media (max-width: 960px) {
  :root {
    --section-gutter: 32px;
  }
}
@media (max-width: 560px) {
  :root {
    --section-gutter: 24px;
  }
}
body.home {
  /* Homepage content + chrome all share the one site-wide width (1260px, 2rem
     gutter — see content.css / tokens.css) so the header, footer and content are
     the same width. Full-width section backgrounds stay intact; only their inner
     content caps at 1260. */
  --mt-home-max-width: 1260px;
  --section-gutter: 2rem;
  --section-max-width: 1260px;
  --mt-section-max-width: 1260px;
  --mt-home-content-width: 1260px;
}

/* Header + contact bar have no max-width of their own; cap and centre their
   content to the chrome width on EVERY page (not just the homepage) so they never
   run full-bleed on inner pages. Uses --mt-chrome-gutter (the homepage side inset)
   so the width matches the homepage at all viewports. */
.mt-site-header__inner {
  width: min(100% - var(--mt-chrome-gutter), var(--mt-home-max-width));
  max-width: var(--mt-home-max-width);
  margin-inline: auto;
  padding-inline: 0;
}

/* Top utility strip is a full-width bar; inset its content (keeping the bar
   full-width) to the same line as everything else. */
.mt-utility-strip {
  padding-inline: max(calc(var(--mt-chrome-gutter) / 2), calc((100% - var(--mt-home-max-width)) / 2));
}

/* Footer content hardcodes its own 2rem gutter; cap + inset it to the shared
   chrome width on EVERY page so the footer is the same width on all pages. */
.mt-site-footer__main,
.mt-site-footer__meta ul {
  width: min(100% - var(--mt-chrome-gutter), var(--mt-home-max-width));
}

/* Center the legal/meta links (Pravila privatnosti, Impresum …) on every page.
   The component base right-aligns the items, and the list-reset above zeroes the
   side margins — so center the items AND restore auto margins so the whole 1260px
   list block is centered in the full-bleed meta bar (not pinned left). */
.mt-site-footer__meta ul {
  justify-content: center;
  margin-inline: auto;
}
.mt-home .mt-container,
.mt-home > .mt-hero.mt-section-home-hero:first-of-type {
  width: min(100% - var(--section-gutter), var(--section-max-width));
  max-width: var(--section-max-width);
  margin-inline: auto;
}

.mt-home > .mt-hero.mt-section-home-hero:first-of-type {
  margin-bottom: clamp(1.6rem, 3vw, 2.25rem);
}

.mt-home > .mt-section--official-notices,
.mt-home > .mt-section--document-teaser,
.mt-home > .mt-section--projects {
  padding-block: clamp(3.5rem, 5vw, 4.75rem);
}

.mt-home .mt-official-layout__main {
  width: 100%;
}

.mt-home .mt-section--projects {
  background: transparent;
}

.mt-home .mt-section--projects .mt-section__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "eyebrow more" "title more" "text more";
  align-items: center;
  gap: 0.7rem 1.25rem;
  max-width: none;
  margin-bottom: 1.5rem;
}

.mt-home .mt-section--projects .mt-section__head h2 {
  grid-area: title;
  font-size: var(--mt-home-section-title);
}

.mt-home .mt-section--projects .mt-section__head h2::after {
  display: block;
  width: var(--mt-home-section-rule-width);
  height: var(--mt-home-section-rule-height);
  margin-top: 0.9rem;
  background: var(--mt-color-primary-bright);
  border-radius: 999px;
  content: "";
}

.mt-home .mt-section--projects .mt-section__head > p:not(.mt-card-label) {
  grid-area: text;
  max-width: 44rem;
  color: var(--mt-ink-soft);
  font-size: 1.05rem;
  line-height: 1.55;
}

.mt-home .mt-section--projects .mt-section-projects__eyebrow {
  grid-area: eyebrow;
  color: var(--mt-color-primary);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.mt-home .mt-section--projects .mt-section-projects__more {
  grid-area: more;
  justify-self: end;
  align-self: center;
  margin: 0;
  white-space: nowrap;
}

.mt-home .mt-section--projects .mt-section-projects__rail-wrap,
.mt-home .mt-section--projects .mt-section-projects__rail-wrap--slider {
  padding: 0;
}

.mt-home .mt-section--projects .mt-section-projects__rail {
  display: grid;
  grid-auto-columns: auto;
  grid-auto-flow: row;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.4rem);
  padding: 0;
  overflow: visible;
  scroll-snap-type: none;
}

.mt-home .mt-section--projects .mt-project-card {
  scroll-snap-align: none;
}

.mt-home .mt-section--projects .mt-project-card__inner,
.mt-home .mt-section--projects .mt-project-card--empty {
  height: 100%;
  min-height: 0;
  border-radius: 8px;
  box-shadow: 0 0.6rem 1.35rem rgba(3, 25, 39, 0.07);
}

.mt-home .mt-section--projects .mt-project-card__media {
  height: auto;
  aspect-ratio: 16/10;
  background: linear-gradient(135deg, rgba(22, 139, 58, 0.08), rgba(255, 255, 255, 0.48)), #f5faf7;
}

.mt-home .mt-section--projects .mt-project-card__image--fallback {
  padding: clamp(2.3rem, 5vw, 3.4rem);
  filter: invert(34%) sepia(74%) saturate(628%) hue-rotate(91deg) brightness(90%) contrast(90%);
  object-fit: contain;
  opacity: 0.36;
}

.mt-home .mt-section--projects .mt-project-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.78rem;
  padding: clamp(1.05rem, 1.7vw, 1.3rem);
}

.mt-home .mt-section--projects .mt-project-card__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.42rem;
}

.mt-home .mt-section--projects .mt-project-card__body h3 {
  font-size: clamp(1.15rem, 1.7vw, 1.38rem);
  line-height: 1.22;
  -webkit-line-clamp: 2;
}

.mt-home .mt-section--projects .mt-project-card__body p {
  color: var(--mt-ink-soft);
  font-size: 0.95rem;
  line-height: 1.5;
}

.mt-home .mt-section--projects .mt-project-card__excerpt {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.mt-home .mt-section--projects .mt-project-card__more {
  align-self: start;
  margin-top: auto;
  font-size: 0.92rem;
}

@media (max-width: 960px) {
  .mt-home .mt-section--projects .mt-section-projects__rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .mt-home > .mt-section--official-notices,
  .mt-home > .mt-section--document-teaser,
  .mt-home > .mt-section--projects {
    padding-block: 2.6rem;
  }
  .mt-home .mt-section--projects .mt-section__head {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "eyebrow" "title" "text" "more";
  }
  .mt-home .mt-section--projects .mt-section-projects__more {
    justify-self: start;
    margin-top: 0.35rem;
  }
  .mt-home .mt-section--projects .mt-section-projects__rail {
    grid-template-columns: 1fr;
  }
}

/* -- Karta općine (municipality map) page -------------------------------
 * Single contained column: heading + address, an embedded OpenStreetMap
 * in a 16:9 responsive frame, and a "view larger map" link.
 */
.mt-karta-page {
  /* Contain to the same shared content width as every other page.          */
  --mt-container-max-width: 1260px;
  padding-block: var(--mt-space-3xl);
}
.mt-karta-page__header {
  margin-bottom: var(--mt-space-xl);
}
.mt-karta-page__address {
  display: inline-flex;
  align-items: center;
  gap: var(--mt-space-xs);
  margin: var(--mt-space-sm) 0 0;
  color: var(--mt-color-text-soft);
  font-size: var(--mt-font-size-md);
}
.mt-karta-page__address .dashicons {
  color: var(--mt-color-primary);
}
.mt-karta-page__content {
  max-width: 46rem;
  margin-bottom: var(--mt-space-xl);
}
.mt-karta-page__map {
  position: relative;
  width: 100%;
  max-width: 56rem;
  margin-inline: auto;
  aspect-ratio: 16 / 10;
  max-height: 30rem;
  overflow: hidden;
  background: var(--mt-color-surface-muted);
  border: 1px solid var(--mt-color-border);
  border-radius: var(--mt-radius-xl);
}
.mt-karta-page__map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.mt-karta-page__map-link {
  margin: var(--mt-space-md) 0 0;
}
.mt-karta-page__map-link a {
  display: inline-flex;
  align-items: center;
  gap: var(--mt-space-xs);
  color: var(--mt-color-primary);
  font-weight: var(--mt-font-weight-medium);
}
.mt-karta-page__map-link .dashicons {
  font-size: 1rem;
  width: 1rem;
  height: 1rem;
}

@media (max-width: 640px) {
  .mt-karta-page__map {
    aspect-ratio: 4 / 5;
  }
}

/* -- Mobile: zagreb-style compact header -----------------------------------
 * Under the tab-bar breakpoint the top header collapses to a single masthead
 * row: hamburger (Meni) icon on the left, search icon on the right, and the
 * crest/name centred between them. Both icons open the same drawer / search
 * panel as on desktop. The bottom mob-tabbar carries the quick links.
 */
@media (max-width: 768px) {
  .mt-site-header {
    border-bottom: 0;
  }
  .mt-site-header__inner {
    /* Static so the absolute Meni button below anchors to the header (whose
       height == the masthead here) rather than to this collapsed 0-height row. */
    position: static;
    min-height: 0;
    padding-block: 0;
  }
  /* Hamburger (Meni), icon-only, pinned to the left of the masthead. Positioned
     absolutely so it doesn't add a row; a fixed masthead-height keeps it on the
     crest row even after the search panel expands the header (bottom:0 would
     re-centre it over the taller header). */
  .mt-site-header__menu {
    display: inline-flex;
    position: absolute;
    top: 0;
    left: 0.65rem;
    height: 5.75rem;
    z-index: 30;
  }
  .mt-site-header__menu-label {
    display: none;
  }
  /* Search icon on the right (the actions cluster was hidden on phones). Show
     just the bare search toggle; login stays hidden. */
  .mt-site-header__actions {
    display: flex;
    position: absolute;
    top: 0;
    right: 0.65rem;
    height: 5.75rem;
    align-items: center;
    gap: 0;
    margin: 0;
    z-index: 30;
  }
  /* When the header condenses on scroll the masthead gets shorter, so shrink the
     icons' pinned height to match — otherwise the fixed 5.75rem box keeps their
     centre on the full-size row and they drop to the bottom of the shrunk header
     instead of staying centred on the crest. */
  .mt-site-header.is-condensed .mt-site-header__menu,
  .mt-site-header.is-condensed .mt-site-header__actions {
    height: 4.1rem;
  }
  .mt-site-header__login {
    display: none;
  }
  /* Bare icon (no outline pill) to match the reference; stays bare + white at
     rest, hover and while open (the glyph itself swaps search -> ×). */
  .mt-site-header__search-toggle,
  .mt-site-header__search-toggle:hover,
  .mt-site-header__search-toggle:focus-visible,
  .mt-site-header__search-toggle[aria-expanded="true"] {
    /* Shrink to the icon (no pill padding) so the glyph sits the same 0.65rem
       from the right edge as the hamburger does from the left. */
    width: auto;
    height: auto;
    padding: 0;
    background: transparent;
    border-color: transparent;
    color: #ffffff;
  }
  /* Match the hamburger's footprint so the two icons read as one weight/size. */
  .mt-site-header__search-toggle-icon {
    width: 1.4rem;
    height: 1.4rem;
  }
  /* Centre the crest/name and reserve room on both sides for the two icons. */
  .mt-site-header__masthead {
    justify-content: center;
    padding-inline: 3.25rem;
  }
  /* Smaller logo text so it sits comfortably between the icons (not cramped). */
  .mt-site-header__masthead-eyebrow {
    font-size: 0.72rem;
  }
  .mt-site-header__masthead-title {
    font-size: 1.15rem;
  }
  .mt-site-header__masthead-sub {
    font-size: 0.55rem;
    letter-spacing: 0.14em;
  }
  /* Open menu = full-viewport FIXED overlay. It was position:absolute,        */
  /* anchored to the header, so once the page was scrolled it showed a         */
  /* scrolled "window" into itself and appeared to shift. Fixed to the         */
  /* viewport it stays consistent regardless of scroll. The bottom tab-bar     */
  /* (z-index 80) sits above it and remains the open/close toggle.             */
  .mt-site-header__tabs {
    position: fixed;
    inset: 0;
    height: auto;
    max-height: none;
  }
}

/* -- Homepage: no section eyebrows + tighter block rhythm -------------------
   Drop the small uppercase kicker above every homepage section title, and cut
   the vertical padding on the blocks so the gaps between them are smaller.
   Appended last so it wins the padding contest against the per-section rules. */
.mt-home .mt-section-head__eyebrow,
.mt-home .mt-featured-projects__eyebrow,
.mt-home .mt-gallery__eyebrow,
.mt-home .mt-servisne__eyebrow {
  display: none;
}

/* Lokalne vijesti + Brze veze stay tight so both fit above the fold (the fold
   work — leave these two as-is). */
.mt-home > .mt-section--two-col,
.mt-home > .mt-section--utility-links {
  padding-block: clamp(0.9rem, 1.3vw, 1.3rem);
}

/* From Izdvojeni projekti down, the blocks get comfortable breathing room so
   they don't read as cramped. */
.mt-home > .mt-featured-projects,
.mt-home > .mt-section--official-notices,
.mt-home > .mt-gallery,
.mt-home > .mt-section--service-info {
  padding-block: clamp(3.25rem, 5vw, 4.5rem);
}

/* Pull Lokalne vijesti + Brze veze up so both fit above the fold: trim the
   slider dots gap, the Brze veze head and card body spacing. (The masthead is
   intentionally left at the site-wide default so the header is the same size on
   the homepage as on every other page and no longer shifts on navigation.) */
.mt-home .mt-cards-slider__dots {
  margin-top: 0.85rem;
}

.mt-home .mt-two-col__col {
  gap: 0.85rem;
}

/* "Brze veze" heading hidden — the labelled tiles speak for themselves. */
.mt-home .mt-section-utility-links__head {
  display: none;
}

.mt-home .mt-media-card__body {
  padding: 0.85rem 1.1rem 0.95rem;
}

.mt-home .mt-media-card__img {
  aspect-ratio: 16 / 10;
}

.mt-home .mt-section-utility-links__grid .mt-tile {
  --mt-tile-min-height: 11.5rem;
}

/* Brze veze grows to fill the rest of the viewport so it reaches the bottom of
   the screen and the next band (Izdvojeni projekti) stays below the fold. The
   calc self-limits on short screens (min-height collapses, content drives it). */
.mt-home > .mt-section--utility-links {
  min-height: calc(100vh - 46.75rem);
}