/* ==========================================================================
   Vinex Projekt — block theme stylesheet (vinex-block)
   Ported from the old Sage theme (vinex-theme/resources/css/app.css +
   editor.css) onto the new WordPress block markup. See .ops/ for the
   migration plan. No build step — plain CSS, loaded on the front end
   (wp_enqueue_style) and in the block editor (add_editor_style).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. RESET — Tailwind CSS v4 "preflight", used unmodified because the old
   design depended on it (margin/padding/border zeroed on every element,
   list markers removed, images block-level, form controls normalised).

   Tailwind CSS
   Copyright (c) Tailwind Labs, Inc.
   Licensed under the MIT License.
   https://github.com/tailwindlabs/tailwindcss/blob/main/LICENSE
   -------------------------------------------------------------------------- */

*,
::after,
::before,
::backdrop,
::file-selector-button {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0 solid;
}

html,
:host {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
  font-family: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  -webkit-tap-highlight-color: transparent;
}

hr {
  height: 0;
  color: inherit;
  border-top-width: 1px;
}

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
}

h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
}

a {
  color: inherit;
  -webkit-text-decoration: inherit;
  text-decoration: inherit;
}

b, strong {
  font-weight: bolder;
}

code, kbd, samp, pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  font-size: 1em;
}

small {
  font-size: 80%;
}

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub { bottom: -0.25em; }
sup { top: -0.5em; }

table {
  text-indent: 0;
  border-color: inherit;
  border-collapse: collapse;
}

:-moz-focusring {
  outline: auto;
}

progress {
  vertical-align: baseline;
}

summary {
  display: list-item;
}

ol, ul, menu {
  list-style: none;
}

img, svg, video, canvas, audio, iframe, embed, object {
  display: block;
  vertical-align: middle;
}

img, video {
  max-width: 100%;
  height: auto;
}

button, input, select, optgroup, textarea, ::file-selector-button {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  border-radius: 0;
  background-color: transparent;
  opacity: 1;
}

:where(select:is([multiple], [size])) optgroup {
  font-weight: bolder;
}
:where(select:is([multiple], [size])) optgroup option {
  padding-inline-start: 20px;
}

::file-selector-button {
  margin-inline-end: 4px;
}

::placeholder {
  opacity: 1;
}
@supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
  ::placeholder {
    color: color-mix(in oklab, currentcolor 50%, transparent);
  }
}

textarea {
  resize: vertical;
}

::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-date-and-time-value {
  min-height: 1lh;
  text-align: inherit;
}
::-webkit-datetime-edit {
  display: inline-flex;
}
::-webkit-datetime-edit-fields-wrapper {
  padding: 0;
}
::-webkit-datetime-edit,
::-webkit-datetime-edit-year-field,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-minute-field,
::-webkit-datetime-edit-second-field,
::-webkit-datetime-edit-millisecond-field,
::-webkit-datetime-edit-meridiem-field {
  padding-block: 0;
}

::-webkit-calendar-picker-indicator {
  line-height: 1;
}

:-moz-ui-invalid {
  box-shadow: none;
}

button,
input:where([type='button'], [type='reset'], [type='submit']),
::file-selector-button {
  appearance: button;
}

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

[hidden]:where(:not([hidden='until-found'])) {
  display: none !important;
}

/* --------------------------------------------------------------------------
   2. TOKENS — palette + type mapped to theme.json presets (falls back to
   literal values so the file still works if a preset is ever renamed).
   -------------------------------------------------------------------------- */

:root {
  --vx-ivory:      var(--wp--preset--color--vx-ivory, #f7f3ec);
  --vx-ivory-dark: var(--wp--preset--color--vx-ivory-dark, #ede8df);
  --vx-navy:       var(--wp--preset--color--vx-navy, #1e2a3a);
  --vx-navy-light: var(--wp--preset--color--vx-navy-light, #2c3e50);
  --vx-gold:       var(--wp--preset--color--vx-gold, #b8963c);
  --vx-gold-dark:  var(--wp--preset--color--vx-gold-dark, #9a7c30);
  --vx-text:       var(--wp--preset--color--vx-text, #2c3e50);
  --vx-muted:      var(--wp--preset--color--vx-muted, #6b7c8d);
  --vx-white:      var(--wp--preset--color--vx-white, #ffffff);
  --vx-ink:        var(--wp--preset--color--vx-ink, #2b3a4a);
  --vx-slate:      var(--wp--preset--color--vx-slate, #43586b);
  --vx-sand:       var(--wp--preset--color--vx-sand, #c9b896);

  --vx-font-display: var(--wp--preset--font-family--vx-display, 'Cormorant Garamond', Georgia, ui-serif, serif);
  --vx-font-body:    var(--wp--preset--font-family--vx-body, 'Source Serif 4', Georgia, ui-serif, serif);

  --vx-success: #4a7c59;
  --vx-success-bg: #eef4ef;
  --vx-error: #b23a3a;
  --vx-error-bg: #f7ecec;
  --vx-note: #8a92a0;
}

/* --------------------------------------------------------------------------
   3. BASE
   -------------------------------------------------------------------------- */

html {
  background-color: var(--vx-ivory);
  color: var(--vx-text);
  font-family: var(--vx-font-body);
  font-size: 1.0625rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

body {
  background-color: var(--vx-ivory);
  margin: 0;
}

h1, h2, h3, h4, h5, h6,
.wp-block-heading {
  font-family: var(--vx-font-display);
  color: var(--vx-navy);
  font-weight: 500;
  line-height: 1.2;
}

a {
  color: var(--vx-navy);
  text-decoration: none;
}
a:hover {
  color: var(--vx-gold);
}

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

/* Accessibility: visible keyboard focus ring site-wide */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible,
select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--vx-gold);
  outline-offset: 2px;
}

/* Skip link stays hidden until focused */
.skip-link.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;
}
.skip-link.screen-reader-text:focus {
  position: fixed;
  top: 1rem;
  left: 1rem;
  width: auto;
  height: auto;
  clip: auto;
  overflow: visible;
  z-index: 1000;
  background: var(--vx-navy);
  color: var(--vx-ivory);
  padding: 0.75rem 1.25rem;
  white-space: normal;
}

/* --------------------------------------------------------------------------
   4. LAYOUT — container / section chrome, and neutralising WP's default
   block-gap margins inside vx sections (old design had none between
   direct children; WP's is-layout-flow adds `margin-block-start` via a
   low-specificity :where() rule, so a normal class selector here wins).
   -------------------------------------------------------------------------- */

.vx-container {
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: 1.5rem;
}
.vx-container-wide {
  max-width: 90rem;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.vx-section {
  padding-block: 5rem;
}
.vx-section-lg {
  padding-block: 8rem;
}
.vx-section--ivory { background-color: var(--vx-ivory); }
.vx-section--white,
.is-style-vx-bela { background-color: var(--vx-white); }
.vx-section--navy,
.is-style-vx-tamna { background-color: var(--vx-navy); }
.is-style-vx-svetla { background-color: var(--vx-ivory); }
.vx-section-divider { padding-block: 2rem; }

/* Block-gap reset: vx sections manage their own rhythm with real margins
   below, so kill WP's automatic parent > * + * spacing inside them. */
.vx-hero > *,
.vx-hero-content > *,
.vx-about-grid > *,
.vx-section-header > *,
.vx-philosophy-inner > *,
.vx-cta-strip-inner > *,
.vx-single-project-hero-content > *,
.vx-project-meta > *,
.vx-page-hero-inner > * {
  margin-block-start: 0;
  margin-block-end: 0;
}

.main {
  padding-top: 4.5rem;
}
.vx-page-content,
.entry-content.vx-page-content {
  margin: 0;
}

/* --------------------------------------------------------------------------
   5. GOLD RULE + EYEBROW + SECTION TITLE
   -------------------------------------------------------------------------- */

hr.wp-block-separator.is-style-vx-zlatna-linija {
  display: block;
  width: 3rem;
  height: 1px;
  border: 0;
  background-color: var(--vx-gold);
  margin-block: 0 1.25rem;
}
.vx-gold-rule--short.is-style-vx-zlatna-linija,
hr.is-style-vx-zlatna-linija.vx-gold-rule--short {
  width: 2rem;
  margin-block: 1rem;
}

p.is-style-vx-nadnaslov,
.vx-section-eyebrow {
  font-family: var(--vx-font-body);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--vx-gold);
  margin-bottom: 0.75rem;
  display: block;
}

.vx-section-title {
  font-family: var(--vx-font-display);
  font-size: clamp(1.875rem, 3vw, 2.5rem);
  font-weight: 500;
  color: var(--vx-navy);
  margin-bottom: 1.5rem;
}

.vx-section-header {
  text-align: center;
  max-width: 42rem;
  margin-inline: auto;
  margin-bottom: 3rem;
}
.vx-section-header hr.is-style-vx-zlatna-linija {
  margin-inline: auto;
}
.vx-section-cta {
  text-align: center;
  margin-top: 3rem;
}

/* --------------------------------------------------------------------------
   6. BUTTONS — core/button styles vx-teget / vx-obrub / vx-obrub-svetlo
   -------------------------------------------------------------------------- */

.wp-block-button__link.wp-element-button {
  display: inline-block;
  padding: 0.75rem 2rem;
  font-family: var(--vx-font-body);
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  border-radius: 0;
}

.wp-block-button.is-style-vx-teget > .wp-block-button__link {
  background-color: var(--vx-navy);
  color: var(--vx-ivory);
  border: 1px solid var(--vx-navy);
}
.wp-block-button.is-style-vx-teget > .wp-block-button__link:hover {
  background-color: var(--vx-navy-light);
  color: var(--vx-ivory);
}

.wp-block-button.is-style-vx-obrub > .wp-block-button__link {
  background-color: transparent;
  color: var(--vx-navy);
  border: 1px solid var(--vx-gold);
}
.wp-block-button.is-style-vx-obrub > .wp-block-button__link:hover {
  background-color: var(--vx-gold);
  color: var(--vx-ivory);
}

.wp-block-button.is-style-vx-obrub-svetlo > .wp-block-button__link {
  background-color: transparent;
  color: var(--vx-ivory);
  border: 1px solid var(--vx-gold);
}
.wp-block-button.is-style-vx-obrub-svetlo > .wp-block-button__link:hover {
  background-color: var(--vx-gold);
  color: var(--vx-ivory);
}

/* --------------------------------------------------------------------------
   7. HEADER — template part, logo, primary navigation
   -------------------------------------------------------------------------- */

.vx-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background-color: rgba(247, 243, 236, 0.95);
  backdrop-filter: blur(4px);
  border-bottom: 1px solid var(--vx-ivory-dark);
}

.vx-container.vx-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  max-width: 90rem;
  margin-inline: auto;
  gap: 1rem;
}

.vx-logo.wp-block-site-logo {
  display: flex;
  align-items: center;
}
.vx-logo.wp-block-site-logo a {
  display: inline-block;
}

/* Nav links (desktop row + mobile overlay share these) */
.vx-nav .wp-block-navigation-item__content {
  font-family: var(--vx-font-body);
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vx-navy-light);
  text-decoration: none;
  transition: color 0.2s;
  display: inline-block;
}
.vx-nav .wp-block-navigation-item__content:hover,
.vx-nav .current-menu-item > .wp-block-navigation-item__content,
.vx-nav .current-menu-ancestor > .wp-block-navigation-item__content {
  color: var(--vx-gold);
}
.vx-nav .current-menu-item > .wp-block-navigation-item__content {
  position: relative;
  font-weight: 600;
}
.vx-nav .current-menu-item > .wp-block-navigation-item__content::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  background: var(--vx-gold);
}

.vx-nav .wp-block-navigation__container {
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 2rem;
}

/* Hamburger (open) button */
.vx-nav .wp-block-navigation__responsive-container-open {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
  color: var(--vx-navy);
  align-items: center;
  justify-content: center;
}
.vx-nav .wp-block-navigation__responsive-container-open svg,
.vx-nav .wp-block-navigation__responsive-container-close svg {
  fill: currentColor;
}
.vx-nav .wp-block-navigation__responsive-container-open:hover,
.vx-nav .wp-block-navigation__responsive-container-close:hover {
  color: var(--vx-gold);
}

/* Close (X) button — only meaningful inside the open overlay */
.vx-nav .wp-block-navigation__responsive-container-close {
  background: none;
  border: none;
  cursor: pointer;
  position: absolute;
  top: 1.25rem;
  right: 1.5rem;
  z-index: 101;
  color: var(--vx-navy);
}

/*
 * Breakpoint fix (required): core switches to the overlay at 600px; Vinex switches at 64rem (1024px),
 * so no width shows neither the links nor the open button (the old theme had a dead zone at 56-64rem).
 * Below 64rem: open button visible, closed container hidden, open container = full-screen overlay.
 * At 64rem and up: core's own desktop behaviour (inline row, buttons hidden) — nothing overridden.
 * The rules are scoped by media query rather than overridden, because the hide rule carries more
 * specificity than any desktop counter-rule would (that is how the first port hid the desktop menu).
 */
@media (max-width: 63.999rem) {
  .vx-nav .wp-block-navigation__responsive-container-open {
    display: flex;
  }
  .vx-nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: none;
  }
  /* Open overlay: full-screen, ivory (as the old theme's .vx-nav--open). */
  .vx-nav .wp-block-navigation__responsive-container.is-menu-open {
    position: fixed;
    inset: 0;
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    background-color: var(--vx-ivory);
    z-index: 99;
    display: block;
  }
  .vx-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close,
  .vx-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
    display: flex;
    flex-direction: column;
    min-height: 100%;
  }
  .vx-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    padding: 4rem 1.5rem 2rem;
  }
  .vx-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.5rem;
  }
  .vx-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
    font-size: 1.125rem;
    letter-spacing: 0.1em;
  }
}

@media (min-width: 64rem) {
  .vx-nav .wp-block-navigation__responsive-container-open,
  .vx-nav .wp-block-navigation__responsive-container-close {
    display: none;
  }
}

/* Footer / pre-footer navigation never overlays — always an inline row */
.vx-prefooter-menu.wp-block-navigation__container,
nav.vx-prefooter-menu .wp-block-navigation__container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.vx-prefooter-menu .wp-block-navigation-item__content {
  font-size: 0.8125rem;
  letter-spacing: 0.05em;
  color: var(--vx-muted);
  text-decoration: none;
  transition: color 0.2s ease;
}
.vx-prefooter-menu .wp-block-navigation-item__content:hover {
  color: var(--vx-gold);
}

/* --------------------------------------------------------------------------
   8. HERO — cover-style intro block (.vx-hero on a wp-block-group)
   -------------------------------------------------------------------------- */

.vx-hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.vx-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.vx-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.vx-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(30, 42, 58, 0.75) 0%, rgba(30, 42, 58, 0.3) 50%, rgba(30, 42, 58, 0.1) 100%);
}
.vx-hero-content {
  position: relative;
  z-index: 1;
  padding: 4rem 1.5rem;
  max-width: 90rem;
  margin-inline: auto;
  width: 100%;
}
.vx-hero-eyebrow {
  color: var(--vx-gold);
  margin-bottom: 1rem;
}
.vx-hero-headline {
  font-family: var(--vx-font-display);
  font-size: clamp(2.25rem, 5vw, 4.5rem);
  font-weight: 400;
  color: var(--vx-ivory);
  line-height: 1.1;
  margin-bottom: 1.5rem;
}
.vx-hero-content hr.is-style-vx-zlatna-linija {
  margin-bottom: 1.5rem;
}
.vx-hero-tagline {
  font-size: 1.0625rem;
  color: rgba(247, 243, 236, 0.85);
  max-width: 36rem;
  line-height: 1.75;
  margin-bottom: 2.5rem;
}
.vx-hero-actions.wp-block-buttons {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   9. ABOUT GRID (home teaser + O nama)
   -------------------------------------------------------------------------- */

.wp-block-columns.vx-about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}
.vx-about-grid > .wp-block-column {
  flex-basis: auto;
}
.vx-about-text p {
  margin-bottom: 1rem;
  line-height: 1.8;
}
.vx-about-text .wp-block-buttons {
  margin-top: 1rem;
}
.vx-about-image img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  object-position: top center;
}

.vx-about-company {
  max-width: 60rem;
  margin-inline: auto;
}
.vx-about-company-header {
  margin-bottom: 2rem;
}
.vx-about-company-text p {
  margin-bottom: 1.25rem;
  line-height: 1.85;
}
.vx-about-certs {
  max-width: 44rem;
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   10. SERVICES — grid + numbered cards
   -------------------------------------------------------------------------- */

.wp-block-query.vx-services-grid .wp-block-post-template {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 2rem;
}
.wp-block-query.vx-services-grid.vx-services-grid--full .wp-block-post-template {
  grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
}

.wp-block-post-template.is-style-vx-kartice-usluga {
  counter-reset: vx-service-num;
}
.wp-block-post-template.is-style-vx-kartice-usluga > li {
  counter-increment: vx-service-num;
  position: relative;
  border: 1px solid var(--vx-ivory-dark);
  padding: 2rem;
  background-color: var(--vx-white);
}
.wp-block-post-template.is-style-vx-kartice-usluga > li::before {
  content: counter(vx-service-num, decimal-leading-zero);
  display: block;
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  color: var(--vx-gold);
  margin-bottom: 0.75rem;
}
.vx-service-card-title {
  font-family: var(--vx-font-display);
  font-size: 1.375rem;
  font-weight: 500;
  color: var(--vx-navy);
  margin-bottom: 0.75rem;
}
.vx-service-card-desc,
.vx-service-card-desc p {
  font-size: 0.9375rem;
  color: var(--vx-navy-light);
  line-height: 1.7;
  margin: 0;
}

/* --------------------------------------------------------------------------
   11. PHILOSOPHY strip
   -------------------------------------------------------------------------- */

.vx-philosophy {
  background-color: var(--vx-navy);
  padding-block: 6rem;
  text-align: center;
}
.vx-philosophy-inner {
  max-width: 52rem;
  margin-inline: auto;
  text-align: center;
}
.vx-philosophy-inner hr.is-style-vx-zlatna-linija {
  margin-inline: auto;
  margin-block: 2rem;
}
.wp-block-quote.is-style-vx-filozofija.vx-philosophy-quote {
  border: 0;
  margin: 0;
  padding: 0;
}
.vx-philosophy-quote p {
  font-family: var(--vx-font-display);
  font-size: clamp(1.375rem, 2.5vw, 1.875rem);
  font-style: italic;
  color: var(--vx-ivory);
  line-height: 1.65;
  margin: 0;
}

/* --------------------------------------------------------------------------
   12. PROJECTS — grid + cards
   -------------------------------------------------------------------------- */

.wp-block-query.vx-projects-grid .wp-block-post-template {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: 2rem;
}
.wp-block-post-template.is-style-vx-kartice-projekta > li {
  display: block;
  text-decoration: none;
  overflow: hidden;
  border: 1px solid var(--vx-ivory-dark);
  background-color: var(--vx-white);
}
.vx-project-card-image.wp-block-post-featured-image {
  margin: 0;
  overflow: hidden;
}
.vx-project-card-image.wp-block-post-featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.wp-block-post-template.is-style-vx-kartice-projekta > li:hover .vx-project-card-image img {
  transform: scale(1.04);
}
.vx-project-card-body {
  padding: 1.5rem;
}
.vx-project-card-meta {
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vx-gold);
  margin: 0;
}
.vx-project-card-title {
  font-family: var(--vx-font-display);
  font-size: 1.375rem;
  font-weight: 500;
  color: var(--vx-navy);
  margin: 0.375rem 0 0;
}
.vx-project-card-title a:hover {
  color: var(--vx-gold);
}
.vx-project-card-excerpt,
.vx-project-card-excerpt p {
  font-size: 0.9375rem;
  color: var(--vx-muted);
  margin-top: 0.5rem;
  line-height: 1.65;
}
.vx-projects-empty {
  text-align: center;
  color: var(--vx-muted);
  font-style: italic;
  padding: 3rem 0;
}
.vx-projects-empty-state {
  text-align: center;
  padding: 4rem 0;
}
.vx-projects-empty-state p {
  color: var(--vx-muted);
  font-style: italic;
  margin-bottom: 2rem;
}

/* --------------------------------------------------------------------------
   13. CTA strip
   -------------------------------------------------------------------------- */

.vx-cta-strip {
  background-color: var(--vx-navy);
  padding-block: 5rem;
  text-align: center;
}
.vx-cta-strip-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.vx-cta-strip-title {
  font-family: var(--vx-font-display);
  font-size: clamp(1.5rem, 2.5vw, 2.25rem);
  color: var(--vx-ivory);
  margin-bottom: 0.5rem;
}
.vx-cta-strip-sub {
  color: rgba(247, 243, 236, 0.75);
  font-size: 1rem;
  margin: 0;
}
@media (max-width: 40rem) {
  .vx-cta-strip-inner {
    flex-direction: column;
    text-align: center;
  }
}

/* --------------------------------------------------------------------------
   14. PAGE HERO (interior pages) + BREADCRUMBS
   -------------------------------------------------------------------------- */

.vx-page-hero {
  padding-top: 7rem;
  padding-bottom: 3rem;
  background-color: var(--vx-navy);
  text-align: center;
}
.vx-page-hero-inner {
  padding-block: 2.5rem 1.5rem;
}
.vx-page-hero-title {
  font-family: var(--vx-font-display);
  font-size: clamp(2.25rem, 4vw, 3.5rem);
  font-weight: 400;
  color: var(--vx-ivory);
  margin-bottom: 0;
}
.vx-page-hero-sub {
  color: rgba(247, 243, 236, 0.75);
  font-size: 1.0625rem;
  margin-top: 1rem;
  max-width: 40rem;
  margin-inline: auto;
}
.vx-page-hero hr.is-style-vx-zlatna-linija {
  margin-inline: auto;
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
}
.vx-post-eyebrow {
  color: var(--vx-gold);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  gap: 0.35rem;
  margin-bottom: 1rem;
}
.vx-post-eyebrow .wp-block-post-date time {
  color: inherit;
}

nav.vx-breadcrumbs.wp-block-vinex-breadcrumbs {
  background: var(--vx-ivory-dark);
  border-bottom: 1px solid rgba(184, 150, 60, 0.18);
  font-size: 0.8rem;
  /* The fixed header's real height varies with the site-logo image (currently
     ~184px, well past .main's 4.5rem offset) — give the breadcrumb bar its
     own clearance so it isn't hidden behind the translucent header. */
  margin-top: 7rem;
}
.vx-breadcrumbs-inner {
  padding: 0.6rem 1.5rem;
  color: var(--vx-muted);
  letter-spacing: 0.03em;
  max-width: 72rem;
  margin-inline: auto;
}
.vx-breadcrumbs a {
  color: var(--vx-muted);
  text-decoration: none;
}
.vx-breadcrumbs a:hover {
  color: var(--vx-gold);
}
.vx-crumb-sep {
  margin: 0 0.5rem;
  color: var(--vx-gold);
}
.vx-crumb-current {
  color: var(--vx-ink);
}

/* --------------------------------------------------------------------------
   15. GALLERY — mosaic (Projekat single) + carousel (licence/sertifikati)
   -------------------------------------------------------------------------- */

.wp-block-gallery.is-style-vx-mozaik.vx-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;
  gap: 0.6rem;
  margin-top: 2rem;
}
.wp-block-gallery.is-style-vx-mozaik.vx-gallery-grid .wp-block-image {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 2px;
  aspect-ratio: 4/3;
  margin: 0;
}
.wp-block-gallery.is-style-vx-mozaik.vx-gallery-grid .wp-block-image:first-child {
  grid-column: span 2;
  grid-row: span 2;
}
.wp-block-gallery.is-style-vx-mozaik.vx-gallery-grid .wp-block-image a {
  display: block;
  width: 100%;
  height: 100%;
}
.wp-block-gallery.is-style-vx-mozaik.vx-gallery-grid .wp-block-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.55s ease;
}
.wp-block-gallery.is-style-vx-mozaik.vx-gallery-grid .wp-block-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(30, 42, 54, 0.55), transparent 48%);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.wp-block-gallery.is-style-vx-mozaik.vx-gallery-grid .wp-block-image::before {
  content: '+';
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.6);
  width: 46px;
  height: 46px;
  line-height: 44px;
  text-align: center;
  color: var(--vx-ivory);
  border: 1px solid rgba(247, 243, 236, 0.75);
  border-radius: 50%;
  font-size: 1.5rem;
  font-weight: 300;
  opacity: 0;
  transition: all 0.35s ease;
}
.wp-block-gallery.is-style-vx-mozaik.vx-gallery-grid .wp-block-image:hover img { transform: scale(1.06); }
.wp-block-gallery.is-style-vx-mozaik.vx-gallery-grid .wp-block-image:hover::after { opacity: 1; }
.wp-block-gallery.is-style-vx-mozaik.vx-gallery-grid .wp-block-image:hover::before {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
@media (max-width: 900px) {
  .wp-block-gallery.is-style-vx-mozaik.vx-gallery-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .wp-block-gallery.is-style-vx-mozaik.vx-gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .wp-block-gallery.is-style-vx-mozaik.vx-gallery-grid .wp-block-image:first-child {
    grid-column: span 2;
    grid-row: span 1;
  }
}

.vx-gallery-title {
  margin-top: 2.5rem;
}

/* Certificate carousel: single slide, cross-fade via .is-active (JS) */
.vx-cert-carousel {
  margin: 1.75rem 0;
}
.vx-cert-carousel-title {
  font-family: var(--vx-font-display);
  font-size: 1.3rem;
  color: var(--vx-ink);
  margin: 0 0 0.75rem;
  text-align: center;
}
.vx-cert-carousel .wp-block-gallery.is-style-vx-karusel {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 0.95;
  background: var(--vx-ivory);
  border: 1px solid rgba(184, 150, 60, 0.25);
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(43, 58, 74, 0.1);
}
.vx-cert-carousel .wp-block-gallery.is-style-vx-karusel .wp-block-image {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.8s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  margin: 0;
}
.vx-cert-carousel .wp-block-gallery.is-style-vx-karusel .wp-block-image:first-child {
  opacity: 1;
}
.vx-cert-carousel .wp-block-gallery.is-style-vx-karusel .wp-block-image.is-active {
  opacity: 1;
}
.vx-cert-carousel .wp-block-gallery.is-style-vx-karusel img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

/* --------------------------------------------------------------------------
   16. SINGLE PROJECT — hero, meta sidebar, body, prev/next nav
   -------------------------------------------------------------------------- */

.vx-single-project-hero {
  position: relative;
  min-height: 55vh;
  background-color: var(--vx-navy);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.vx-single-project-hero-img.wp-block-post-featured-image {
  position: absolute;
  inset: 0;
  overflow: hidden;
  margin: 0;
}
.vx-single-project-hero-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.vx-single-project-hero-content {
  position: relative;
  z-index: 1;
  padding: 3rem 1.5rem;
  background: linear-gradient(to top, rgba(30, 42, 58, 0.85) 0%, transparent 100%);
  margin-top: auto;
}
.vx-single-project-hero-content hr.is-style-vx-zlatna-linija {
  margin-bottom: 1rem;
}
.vx-single-project-title {
  font-family: var(--vx-font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 400;
  color: var(--vx-ivory);
  margin-bottom: 0.5rem;
}
.vx-single-project-meta-line {
  color: rgba(247, 243, 236, 0.7);
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  gap: 0;
}
.vx-single-project-meta-line p {
  margin: 0;
}
.vx-single-project-meta-line p + p::before {
  content: ' \00b7 ';
}

.vx-single-project-body {
  display: grid;
  grid-template-columns: 14rem 1fr;
  gap: 4rem;
  align-items: start;
}
.vx-single-project-sidebar hr.is-style-vx-zlatna-linija {
  margin-bottom: 1.5rem;
}
.vx-project-meta {
  display: grid;
  gap: 0.25rem;
}
.vx-project-meta-term {
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vx-gold);
  margin-top: 1rem;
}
.vx-project-meta > .vx-project-meta-term:first-child {
  margin-top: 0;
}
.vx-project-meta-value {
  color: var(--vx-navy-light);
  margin: 0;
  font-size: 0.9375rem;
}
.vx-single-project-text {
  line-height: 1.85;
}
.vx-single-project-text p {
  margin-bottom: 1.25rem;
}

.vx-section.vx-single-project-nav {
  border-top: 1px solid var(--vx-ivory-dark);
  padding-block: 2.5rem;
}
.vx-single-project-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.vx-project-nav-link {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  text-decoration: none;
  max-width: 14rem;
}
.vx-project-nav-link--next {
  text-align: right;
  margin-left: auto;
}
.vx-project-nav-link .post-navigation-link__label {
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vx-gold);
}
.vx-project-nav-link .post-navigation-link__title {
  display: block;
  font-family: var(--vx-font-display);
  font-size: 1.125rem;
  color: var(--vx-navy);
}
.vx-project-nav-link:hover .post-navigation-link__title {
  color: var(--vx-gold);
}
@media (max-width: 64rem) {
  .vx-single-project-body { grid-template-columns: 1fr; }
}
@media (max-width: 40rem) {
  .vx-single-project-nav-inner { flex-direction: column; gap: 1.5rem; align-items: flex-start; }
  .vx-project-nav-link--next { text-align: left; margin-left: 0; }
}

/* --------------------------------------------------------------------------
   17. QUOTE / TABLE
   -------------------------------------------------------------------------- */

blockquote.wp-block-quote.is-style-vx-filozofija {
  border: 0;
  margin: 0;
  padding: 0;
}

figure.wp-block-table.is-style-vx-podaci table,
table.vx-company-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
}
figure.wp-block-table.is-style-vx-podaci th,
figure.wp-block-table.is-style-vx-podaci td,
table.vx-company-table th,
table.vx-company-table td {
  text-align: left;
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--vx-ivory-dark);
  vertical-align: top;
}
figure.wp-block-table.is-style-vx-podaci th,
table.vx-company-table th {
  font-family: var(--vx-font-body);
  font-weight: 600;
  color: var(--vx-navy);
  width: 42%;
}
figure.wp-block-table.is-style-vx-podaci td,
table.vx-company-table td {
  color: var(--vx-text);
}
@media (max-width: 35rem) {
  figure.wp-block-table.is-style-vx-podaci th,
  table.vx-company-table th { width: 50%; }
}

/* --------------------------------------------------------------------------
   18. PAGINATION
   -------------------------------------------------------------------------- */

.wp-block-query-pagination.vx-pagination {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}
.vx-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 0.5rem;
  border: 1px solid rgba(43, 58, 74, 0.2);
  border-radius: 2px;
  color: var(--vx-slate);
  text-decoration: none;
  transition: all 0.2s ease;
}
.vx-pagination .page-numbers:hover {
  border-color: var(--vx-gold);
  color: var(--vx-gold);
}
.vx-pagination .page-numbers.current {
  background: var(--vx-ink);
  color: var(--vx-ivory);
  border-color: var(--vx-ink);
}
.vx-loadmore-wrap {
  text-align: center;
  margin-top: 2.5rem;
}

/* --------------------------------------------------------------------------
   19. MAP block
   -------------------------------------------------------------------------- */

.vx-map-wrap.wp-block-vinex-mapa {
  width: 100%;
  margin: 0;
}
.vx-map-iframe {
  display: block;
  width: 100%;
  height: 380px;
  border: 0;
}
@media (max-width: 40rem) {
  .vx-map-iframe { height: 300px; }
}
.vx-map-embed {
  margin-top: 1.5rem;
  border: 1px solid var(--vx-ivory-dark);
  overflow: hidden;
}

/* Shown in place of the map until the visitor asks for it — nothing reaches Google before that. */
.vx-map-consent {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  padding: 1.5rem;
  text-align: center;
  background-color: var(--vx-ivory-dark, #ece7dd);
  border: 1px solid var(--vx-ivory-dark, #ece7dd);
}
.vx-map-consent__text {
  max-width: 38rem;
  margin: 0;
  font-size: var(--wp--preset--font-size--small, 0.9rem);
  line-height: 1.6;
  color: var(--vx-navy, #1c2b3a);
}
.vx-map-consent__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 0;
}
.vx-map-consent__button {
  padding: 0.7rem 1.6rem;
  font-family: inherit;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vx-navy, #1c2b3a);
  background: transparent;
  border: 1px solid var(--vx-gold, #b08d57);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.vx-map-consent__button:hover,
.vx-map-consent__button:focus-visible {
  color: #fff;
  background-color: var(--vx-gold, #b08d57);
}
.vx-map-consent__link {
  font-size: 0.85rem;
  color: var(--vx-navy, #1c2b3a);
}
.vx-map-consent__address {
  margin: 0;
  font-size: 0.85rem;
  color: var(--vx-navy, #1c2b3a);
  opacity: 0.75;
}
@media (max-width: 40rem) {
  .vx-map-consent { padding: 1.25rem; }
}

/* --------------------------------------------------------------------------
   20. CONTACT FORM (CF7) + contact info blocks
   -------------------------------------------------------------------------- */

.vx-contact-narrow {
  max-width: 45rem;
  margin-left: auto;
  margin-right: auto;
}
.vx-contact-intro {
  text-align: center;
  max-width: 45rem;
  margin: 0 auto 2.5rem;
  color: var(--vx-slate);
  font-size: 1.08rem;
  line-height: 1.75;
}
.vx-contact-intro a {
  color: var(--vx-gold);
  text-decoration: underline;
}
.vx-contact-intro a:hover {
  color: var(--vx-ink);
}

.vx-contact-form .wp-block-heading.vx-section-title {
  text-align: center;
}
.vx-contact-form hr.is-style-vx-zlatna-linija {
  margin-inline: auto;
}
.vx-contact-form--centered {
  text-align: center;
}
.vx-contact-form--centered form {
  text-align: left;
  max-width: 35rem;
  margin: 1.5rem auto 0;
}

.wpcf7 input, .wpcf7 textarea, .wpcf7 select {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--vx-ivory-dark);
  background: var(--vx-white);
  font-family: var(--vx-font-body);
  font-size: 0.9375rem;
  color: var(--vx-text);
  margin-bottom: 1rem;
  border-radius: 2px;
}
.wpcf7 input:focus, .wpcf7 textarea:focus, .wpcf7 select:focus {
  border-color: var(--vx-gold);
  outline: 2px solid var(--vx-gold);
  outline-offset: 1px;
}
.wpcf7 textarea {
  min-height: 9rem;
  resize: vertical;
}
.wpcf7 label {
  display: block;
  font-size: 0.9rem;
  color: var(--vx-ink);
  font-weight: 600;
  margin-bottom: 0.35rem;
}
.wpcf7 .wpcf7-submit,
.wpcf7 input[type='submit'] {
  display: block;
  width: 100%;
  box-sizing: border-box;
  cursor: pointer;
  background-color: var(--vx-navy);
  color: var(--vx-ivory);
  border: 2px solid var(--vx-navy);
  padding: 1rem 2rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.9rem;
  font-weight: 700;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
  margin-top: 0.5rem;
}
.wpcf7 .wpcf7-submit:hover,
.wpcf7 input[type='submit']:hover,
.wpcf7 .wpcf7-submit:focus-visible {
  background-color: var(--vx-gold);
  color: var(--vx-navy);
  border-color: var(--vx-gold-dark);
}
.wpcf7 .wpcf7-response-output {
  margin: 1.25rem 0 0;
  padding: 0.85rem 1.1rem;
  border-radius: 2px;
  font-size: 0.95rem;
  border-left: 3px solid var(--vx-gold);
  background: #f3efe6;
  color: var(--vx-ink);
}
.wpcf7 form.sent .wpcf7-response-output {
  border-left-color: var(--vx-success);
  background: var(--vx-success-bg);
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output {
  border-left-color: var(--vx-error);
  background: var(--vx-error-bg);
}
.wpcf7-not-valid-tip {
  color: var(--vx-error);
  font-size: 0.8rem;
  margin-top: 0.25rem;
}
.vx-recaptcha-note {
  margin: 1rem 0 0;
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--vx-note);
  text-align: center;
}
.vx-recaptcha-note a {
  color: var(--vx-muted);
  text-decoration: underline;
}
.vx-recaptcha-note a:hover {
  color: var(--vx-gold);
}
.vx-form-notice {
  color: var(--vx-muted);
  font-style: italic;
}

/* Gde se nalazimo — address block */
.vx-contact-address {
  font-style: normal;
  font-size: 1rem;
  line-height: 1.75;
  margin-top: 1.25rem;
}
.vx-contact-address dl {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 1.5rem;
  row-gap: 0.5rem;
  align-items: baseline;
}
.vx-contact-address dt {
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vx-gold);
  white-space: nowrap;
}
.vx-contact-address dd {
  margin: 0;
  color: var(--vx-text);
}
.vx-contact-address a {
  color: var(--vx-navy);
}
.vx-contact-address a:hover {
  color: var(--vx-gold);
}
.vx-contact-details {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0;
}
.vx-contact-details li {
  margin-bottom: 0.5rem;
  line-height: 1.7;
}

/* --------------------------------------------------------------------------
   21. SINGLE POST (Novosti article) layout
   -------------------------------------------------------------------------- */

.vx-single-post-hero {
  text-align: center;
}
.vx-single-post-layout {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr);
  gap: 4rem;
  align-items: start;
}
.vx-single-post-figure.wp-block-post-featured-image {
  margin: 0 0 2.5rem;
}
.vx-single-post-figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  object-fit: cover;
}
.vx-single-post-main .vx-prose {
  max-width: none;
  margin: 0;
}
.vx-single-post-sidebar {
  position: sticky;
  top: 6rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.vx-single-post-back {
  display: inline-block;
}
.vx-sidebar-title {
  font-family: var(--vx-font-display);
  font-size: 1.25rem;
  color: var(--vx-navy);
  margin: 0 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--vx-gold);
}
.vx-single-post-recent .wp-block-post-template {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.vx-single-post-recent li {
  display: flex;
  flex-direction: column;
}
.vx-recent-title {
  font-family: var(--vx-font-display);
  font-size: 1.0625rem;
  line-height: 1.3;
  margin: 0;
}
.vx-recent-title a {
  color: var(--vx-navy);
}
.vx-recent-title a:hover {
  color: var(--vx-gold);
}
.vx-recent-date {
  font-size: 0.75rem;
  color: var(--vx-muted);
  margin-top: 0.15rem;
}
@media (max-width: 860px) {
  .vx-single-post-layout { grid-template-columns: 1fr; gap: 2.5rem; }
  .vx-single-post-sidebar { position: static; }
}

/* --------------------------------------------------------------------------
   22. NOVOSTI — article grid + cards
   -------------------------------------------------------------------------- */

.wp-block-query.vx-articles-grid .wp-block-post-template {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
  gap: 2.5rem;
}
.wp-block-post-template.is-style-vx-kartice-vesti > li {
  background: var(--vx-white);
  border: 1px solid var(--vx-ivory-dark);
  display: flex;
  flex-direction: column;
}
.vx-article-card-image.wp-block-post-featured-image {
  margin: 0;
  overflow: hidden;
  background: var(--vx-ivory-dark);
}
.vx-article-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.wp-block-post-template.is-style-vx-kartice-vesti > li:hover .vx-article-card-image img {
  transform: scale(1.04);
}
.vx-article-card-body {
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.vx-article-card-meta {
  font-family: var(--vx-font-body);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--vx-gold);
  margin: 0;
}
.vx-article-card-title {
  font-family: var(--vx-font-display);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.2;
  margin: 0.25rem 0;
}
.vx-article-card-title a {
  color: var(--vx-navy);
}
.vx-article-card-title a:hover {
  color: var(--vx-gold);
}
.vx-article-card-excerpt,
.vx-article-card-excerpt p.wp-block-post-excerpt__excerpt {
  color: var(--vx-muted);
  line-height: 1.7;
  margin: 0;
}
.vx-article-card-excerpt .wp-block-post-excerpt__more-link {
  display: inline-block;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vx-gold);
  margin-top: 0.5rem;
}
.vx-article-card-excerpt .wp-block-post-excerpt__more-link:hover {
  color: var(--vx-navy);
}
.vx-novosti-intro {
  margin-bottom: 3rem;
}

/* --------------------------------------------------------------------------
   23. PROSE pages (privacy policy, single post body, stub pages)
   -------------------------------------------------------------------------- */

.vx-prose {
  max-width: 52rem;
  margin-inline: auto;
  line-height: 1.85;
}
.vx-prose h2 {
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}
.vx-prose p {
  margin-bottom: 1.25rem;
}
.vx-prose a {
  color: var(--vx-gold);
  text-decoration: underline;
}
.vx-prose a:hover {
  color: var(--vx-ink);
}
.vx-prose address {
  margin-bottom: 1.25rem;
}

.vx-stub-content {
  text-align: center;
  padding-block: 4rem;
}
.vx-stub-text {
  font-size: 1.125rem;
  color: var(--vx-muted);
  font-style: italic;
  margin-bottom: 2rem;
}

/* --------------------------------------------------------------------------
   24. MAPA SAJTA (sitemap)
   -------------------------------------------------------------------------- */

.vx-sitemap-intro {
  text-align: center;
  max-width: 40rem;
  margin: 0 auto 2.5rem;
  color: var(--vx-muted);
  font-size: 1.05rem;
  line-height: 1.7;
}
.wp-block-columns.vx-sitemap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.75rem;
}
.vx-sitemap-grid > .wp-block-column { flex-basis: auto; }
.vx-sitemap-card {
  background: var(--vx-white);
  border: 1px solid rgba(184, 150, 60, 0.22);
  border-radius: 3px;
  padding: 2rem 1.75rem;
  box-shadow: 0 2px 14px rgba(43, 58, 74, 0.06);
}
.vx-sitemap-heading {
  font-family: var(--vx-font-display);
  font-size: 1.6rem;
  color: var(--vx-ink);
  margin: 0 0 0.55rem;
}
.vx-sitemap-card hr.is-style-vx-zlatna-linija {
  margin: 0 0 1.1rem;
}
.vx-sitemap-list,
.wp-block-page-list.vx-sitemap-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.vx-sitemap-list li {
  margin: 0 0 0.6rem;
  padding-left: 1.1rem;
  position: relative;
}
.vx-sitemap-list li::before {
  content: '\203A';
  position: absolute;
  left: 0;
  color: var(--vx-gold);
  font-weight: 700;
}
.vx-sitemap-list a {
  color: var(--vx-slate);
  text-decoration: none;
  transition: color 0.2s ease;
  line-height: 1.5;
}
.vx-sitemap-list a:hover {
  color: var(--vx-gold);
}
/* The Projects/Novosti sitemap columns are Query Loops; their <ul> gets
   the sitemap list treatment but the item heading is an h2, not an <a>
   wrapped li — style it the same way as the page-list entries. */
.wp-block-query.vx-sitemap-list .wp-block-post-template {
  list-style: none;
  margin: 0;
  padding: 0;
}
.wp-block-query.vx-sitemap-list li {
  margin: 0 0 0.6rem;
  padding-left: 1.1rem;
  position: relative;
}
.wp-block-query.vx-sitemap-list li::before {
  content: '\203A';
  position: absolute;
  left: 0;
  color: var(--vx-gold);
  font-weight: 700;
}
.wp-block-query.vx-sitemap-list .wp-block-post-title {
  font-size: 1rem;
  font-family: var(--vx-font-body);
  font-weight: 400;
  margin: 0;
}
.wp-block-query.vx-sitemap-list .wp-block-post-title a {
  color: var(--vx-slate);
  text-decoration: none;
}
.wp-block-query.vx-sitemap-list .wp-block-post-title a:hover {
  color: var(--vx-gold);
}

/* --------------------------------------------------------------------------
   25. 404
   -------------------------------------------------------------------------- */

.vx-404-inner {
  max-width: 40rem;
  margin: 0 auto;
  text-align: center;
}
.vx-404-text {
  color: var(--vx-slate);
  font-size: 1.08rem;
  line-height: 1.75;
}
.vx-404-actions.wp-block-buttons {
  margin-top: 1.75rem;
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   26. FOOTER — prefooter links, service/project card carousel (marquee),
   social + copyright + CIP credit
   -------------------------------------------------------------------------- */

.vx-footer.wp-block-template-part {
  background-color: var(--vx-navy);
  color: var(--vx-ivory);
  padding-block: 0 0.5rem;
}

.vx-prefooter {
  background: var(--vx-ivory-dark);
  border-top: 1px solid rgba(184, 150, 60, 0.22);
}
.vx-prefooter-inner {
  padding-block: 1rem;
}

.vx-cardcarousel {
  padding: 0.5rem 0 1rem;
  overflow: hidden;
}
.vx-cardcarousel-title {
  text-align: center;
  font-family: var(--vx-font-display);
  font-size: 1.35rem;
  letter-spacing: 0.04em;
  color: var(--vx-sand);
  margin: 0 0 1rem;
}
.vx-cardcarousel-track {
  display: flex;
  gap: 1rem;
  width: max-content;
  padding-block: 0.5rem;
  padding-inline: 1.5rem;
}
.vx-cardcarousel-track.vx-marquee {
  animation: vx-marquee-scroll 45s linear infinite;
}
.vx-cardcarousel:hover .vx-cardcarousel-track.vx-marquee,
.vx-cardcarousel:focus-within .vx-cardcarousel-track.vx-marquee,
.vx-cardcarousel.is-paused .vx-cardcarousel-track.vx-marquee {
  animation-play-state: paused;
}
@keyframes vx-marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .vx-cardcarousel-track.vx-marquee { animation: none; }
}
.vx-cc-card {
  flex: 0 0 auto;
  width: min(300px, 78vw);
  min-height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem 1.4rem;
  background: rgba(247, 243, 236, 0.06);
  border: 1px solid rgba(184, 150, 60, 0.28);
  border-radius: 3px;
}
.vx-cc-title {
  font-family: var(--vx-font-display);
  font-size: 1.3rem;
  line-height: 1.25;
  color: var(--vx-ivory);
  margin: 0;
}
.vx-cc-btn {
  align-self: flex-start;
  display: inline-block;
  padding: 0.5rem 1.2rem;
  border: 1px solid var(--vx-gold);
  color: var(--vx-sand);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 2px;
  transition: all 0.25s ease;
}
.vx-cc-btn:hover {
  background: var(--vx-gold);
  color: var(--vx-navy);
}

.vx-footer-bottom {
  border-top: 1px solid rgba(184, 150, 60, 0.25);
  margin-top: 1rem;
  padding-top: 1.75rem;
  padding-bottom: 1rem;
}
.vx-footer-bottom-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}
.vx-footer-social.wp-block-social-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}
.vx-footer-social .wp-block-social-link-anchor {
  color: var(--vx-sand);
  display: inline-flex;
  transition: color 0.25s ease;
}
.vx-footer-social .wp-block-social-link-anchor:hover {
  color: var(--vx-gold);
}
.vx-footer-social svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}
.vx-footer-copy {
  text-align: center;
}
.vx-footer-copy p,
.vx-footer-copyright {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: rgba(247, 243, 236, 0.6);
}

/* CIP "powered by" credit with hover-swapping sprite logo */
.vx-cip-credit {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none !important;
  margin-top: 0.35rem;
}
.vx-cip-credit-text {
  font-size: 0.8125rem;
  color: rgba(247, 243, 236, 0.55);
}
.vx-cip-credit-name {
  font-size: 0.8125rem;
  color: rgba(247, 243, 236, 0.85);
  transition: color 0.25s ease;
}
.vx-cip-credit:hover .vx-cip-credit-name {
  color: var(--vx-gold);
}
/* NOTE: sprite file must be copied to assets/images/cip-credit-sprite.png
   (see report) — referenced here but not copied by this change. */
.vx-cip-logo {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url('../images/cip-credit-sprite.png') no-repeat 0 0;
  background-size: 16px 32px;
}
.vx-cip-credit:hover .vx-cip-logo {
  background-position: 0 -16px;
}

/* --------------------------------------------------------------------------
   27. RESPONSIVE (page-level, not already covered above)
   -------------------------------------------------------------------------- */

@media (max-width: 64rem) {
  .wp-block-columns.vx-about-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .vx-services-grid--full .wp-block-post-template {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 40rem) {
  .vx-hero-actions.wp-block-buttons {
    flex-direction: column;
  }
}

/* --------------------------------------------------------------------------
   28. Reduced motion (site-wide, beyond the marquee rule above)
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .wp-block-gallery.is-style-vx-mozaik.vx-gallery-grid .wp-block-image img,
  .vx-project-card-image img,
  .vx-article-card-image img {
    transition: none;
  }
  .vx-cert-carousel .wp-block-gallery.is-style-vx-karusel .wp-block-image {
    transition: none;
  }
}

/* Pause control for the footer strip (WCAG 2.2.2), inserted by assets/js/carousel.js */
.vx-marquee-toggle {
  display: block;
  margin: 0.75rem auto 0;
  padding: 0.25rem 0.75rem;
  background: none;
  border: 1px solid var(--vx-sand);
  color: var(--vx-sand);
  font-family: var(--vx-font-body);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  cursor: pointer;
}
.vx-marquee-toggle:hover,
.vx-marquee-toggle:focus-visible {
  color: var(--vx-gold);
  border-color: var(--vx-gold);
}

/* --------------------------------------------------------------------------
   Post-review fixes (2026-09-16)
   -------------------------------------------------------------------------- */

/* Core sizes nested gallery images with `:not(#individual-image)` (ID-level specificity); the mosaic
   grid places them itself, so neutralise core's widths at the same specificity. */
.wp-block-gallery.has-nested-images.is-style-vx-mozaik figure.wp-block-image:not(#individual-image),
.wp-block-gallery.has-nested-images.is-style-vx-karusel figure.wp-block-image:not(#individual-image) {
  width: auto;
  max-width: none;
  flex: none;
  margin: 0;
}
.wp-block-gallery.has-nested-images.is-style-vx-mozaik {
  display: grid;
}
.wp-block-gallery.has-nested-images.is-style-vx-mozaik figure.wp-block-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Gallery section of a project page (full width, white, as the Blade template had it). */
.vx-gallery-section .vx-section-title {
  margin: 0;
}
.vx-project-content {
  margin: 0;
}

/* Nothing may widen the page: the footer marquee track is max-content wide by design. */
html,
body {
  overflow-x: clip;
}
.vx-footer .wp-block-query.is-style-vx-traka {
  max-width: 100%;
  overflow: hidden;
}

/* Reduced motion: the footer strip does not move, so it wraps instead of running off-screen. */
@media (prefers-reduced-motion: reduce) {
  .vx-cardcarousel-track {
    width: auto;
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* The pre-footer menu now sits inside the footer template part, where the footer's light link colour
   would apply — restore its own muted colour (it was outside <footer> in the Blade theme). */
.vx-footer .vx-prefooter .vx-prefooter-menu .wp-block-navigation-item__content {
  color: var(--vx-muted);
}
.vx-footer .vx-prefooter .vx-prefooter-menu .wp-block-navigation-item__content:hover,
.vx-footer .vx-prefooter .vx-prefooter-menu .wp-block-navigation-item__content:focus-visible {
  color: var(--vx-gold);
}

/* Project meta line: "Lokacija · Godina" with real spacing (flex items do not keep edge spaces). */
.vx-single-project-meta-line p + p::before {
  content: '\00b7';
  margin-inline: 0.5em;
}
/* Homepage teaser: service cards are not numbered there (only the full Usluge list is). */
.wp-block-post-template.vx-services-teaser > li::before {
  content: none;
  display: none;
}

/* Section call-to-action buttons are centred, as in the Blade theme. */
.wp-block-buttons.vx-section-cta {
  justify-content: center;
}

/* Project card: "Lokacija · Godina" on one line (two bound paragraphs). */
.vx-project-card-body > .vx-project-card-meta {
  display: inline;
  margin: 0;
}
.vx-project-card-body > .vx-project-card-meta + .vx-project-card-meta::before {
  content: '\00b7';
  margin-inline: 0.4em;
}
.vx-project-card-body > .vx-project-card-meta:empty {
  display: none;
}
/* Card grids: WordPress's flow layout adds a block-gap top margin to every item after the first,
   which staggers grid rows. The grid gap does the spacing. */
.wp-block-post-template[class*="is-style-vx-kartice-"] > li,
.wp-block-post-template.vx-cardcarousel-track > li {
  margin-block: 0;
}