/* =========================================================
   GAS INFRASTRUKTURA — V4  |  Jedinstven CSS fajl
   Zamenjuje: stil.css, stil.optimized.css, responsive-fix.css,
              modern.css
   Redosled slojeva:
     1. Custom properties (tokens)
     2. Reset / base
     3. Tipografija
     4. Layout utilities
     5. Navigacija
     6. Hero / Carousel
     7. Kartice i sekcije
     8. Footer
     9. Reveal animacija
    10. Scroll-to-top dugme
    11. Stranice (content-section, organizaciona, istorijat...)
    12. Responsive breakpointi (jednom, na kraju)
   ========================================================= */

/* ── 0. Google Fonts ─────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Source+Sans+3:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap');

/* ── 1. Tokens ───────────────────────────────────────────── */
:root {
  /* Boje */
  --gi-navy:       #061523;
  --gi-blue:       #0064b1;
  --gi-blue-mid:   #0a7ed4;
  --gi-cyan:       #22d0f0;
  --gi-text:       #1a2e45;
  --gi-muted:      #5a7490;
  --gi-bg:         #f2f7fb;
  --gi-surface:    #ffffff;
  --gi-line:       rgba(10, 40, 80, .10);
  --gi-red:        #d41920;

  /* Sjene */
  --gi-shadow-sm:  0 4px 16px rgba(6, 21, 35, .08);
  --gi-shadow-md:  0 12px 40px rgba(6, 21, 35, .12);
  --gi-shadow-lg:  0 28px 80px rgba(6, 21, 35, .16);

  /* Radijusi */
  --gi-r-xs:  6px;
  --gi-r-sm:  10px;
  --gi-r-md:  16px;
  --gi-r-lg:  24px;
  --gi-r-xl:  36px;

  /* Layout */
  --gi-max:        1520px;
  --gi-nav-h:      82px;

  /* Trajanje animacija */
  --gi-dur-fast:   .18s;
  --gi-dur-med:    .32s;
  --gi-dur-slow:   .60s;
}

/* ── 2. Reset / base ─────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  font-family: 'Source Sans 3', 'Segoe UI', Arial, Helvetica, sans-serif;
  font-size: 1rem;
  line-height: 1.70;
  color: var(--gi-text);
  background-color: var(--gi-bg);
  background-image:
    radial-gradient(circle at 5% 0%,  rgba(0, 100, 177, .14), transparent 26%),
    radial-gradient(circle at 95% 5%, rgba(34, 208, 240, .12), transparent 24%),
    linear-gradient(180deg, #f6faff 0%, #eef5fb 50%, #f7fafc 100%);
  padding-top: var(--gi-nav-h);
  overflow-x: hidden;
  transition: opacity var(--gi-dur-fast) ease;
}

/* Suptilna grid-tekstura na pozadini */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background-image:
    linear-gradient(rgba(0, 100, 177, .032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 100, 177, .032) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.85), transparent 60%);
}

body.page-leaving { opacity: .12; transform: scale(.993); filter: blur(5px); }

img { max-width: 100%; height: auto; display: block; }
a { color: var(--gi-blue); text-decoration: none; transition: color var(--gi-dur-fast); }
a:hover { color: var(--gi-blue-mid); }

/* Overriduje Bootstrap max-width za sve containere */
.container,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
  max-width: var(--gi-max) !important;
}

/* ── 3. Tipografija ──────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Outfit', 'Segoe UI', Arial, sans-serif;
  font-weight: 700;
  line-height: 1.15;
  color: var(--gi-navy);
  letter-spacing: -.02em;
}

/* Sekcioni naslovi — klasa umesto inline stilova */
.gi-section-title {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 800;
  color: var(--gi-blue);
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 2.5rem;
  position: relative;
}

.gi-section-title::after {
  content: "";
  display: block;
  width: 64px;
  height: 4px;
  border-radius: 9px;
  background: linear-gradient(90deg, var(--gi-blue), var(--gi-cyan));
  margin: .7rem auto 0;
}

p {
  font-size: clamp(.94rem, 2vw, 1.05rem);
  line-height: 1.72;
  color: var(--gi-text);
  overflow-wrap: break-word;
}

/* ── 4. Fade-in animacija stranice ───────────────────────── */
.fade-in-page { animation: pageFadeIn .40s ease both; }
@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── 5. Navigacija ───────────────────────────────────────── */
.navbar {
  height: var(--gi-nav-h);
  background: rgba(255, 255, 255, .82) !important;
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border-bottom: 1px solid rgba(255, 255, 255, .75);
  box-shadow: 0 4px 30px rgba(6, 21, 35, .08);
  padding-block: .5rem !important;
  transition: height var(--gi-dur-fast), background var(--gi-dur-fast), box-shadow var(--gi-dur-fast);
  border-radius: 0 !important;
}

.navbar.shrink {
  height: 66px;
  background: rgba(255, 255, 255, .94) !important;
  box-shadow: 0 6px 28px rgba(6, 21, 35, .13);
}

.navbar .container-xl {
  width: min(100% - 2rem, var(--gi-max));
}

/* Logo */
.navbar-brand {
  display: inline-flex;
  align-items: center;
  min-width: 180px;
}

.navbar-brand img {
  width: auto;
  max-height: 60px;
  object-fit: contain;
  transition: max-height var(--gi-dur-fast) ease;
  filter: drop-shadow(0 2px 8px rgba(6, 21, 35, .10));
}

.navbar.shrink .navbar-brand img { max-height: 48px; }

/* Hamburger */
.navbar-toggler {
  border: 1.5px solid rgba(0, 100, 177, .28) !important;
  border-radius: var(--gi-r-sm) !important;
  padding: .55rem .70rem;
  background: rgba(255,255,255,.90);
  box-shadow: var(--gi-shadow-sm);
}
.navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(0, 100, 177, .18) !important; }

/* Nav linkovi */
.nav-link {
  position: relative;
  font-family: 'Outfit', sans-serif;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--gi-navy) !important;
  padding: .65rem .80rem !important;
  border-radius: var(--gi-r-sm) !important;
  transition: color var(--gi-dur-fast), background var(--gi-dur-fast), transform var(--gi-dur-fast);
}

.nav-link::after {
  content: "";
  position: absolute;
  left: .80rem;
  right: .80rem;
  bottom: .30rem;
  height: 2px;
  border-radius: 9px;
  background: linear-gradient(90deg, var(--gi-blue), var(--gi-cyan));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--gi-dur-fast) ease;
}

.nav-link:hover,
.nav-link:focus,
.nav-link.active {
  color: var(--gi-blue) !important;
  background: rgba(0, 100, 177, .07) !important;
  transform: translateY(-1px);
}

.nav-link:hover::after,
.nav-link:focus::after,
.nav-link.active::after { transform: scaleX(1); }

/* Overriduji Bootstrap-ov pseudo-element za dropdown */
.nav-link.dropdown-toggle::after { margin-left: .4rem; vertical-align: .12em; }

/* Dropdown meni */
.dropdown-menu {
  border: 1px solid var(--gi-line) !important;
  border-radius: var(--gi-r-md) !important;
  padding: .5rem !important;
  box-shadow: 0 20px 60px rgba(6, 21, 35, .16);
  background: rgba(255, 255, 255, .96) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  min-width: 230px;
}

.dropdown-item {
  font-family: 'Outfit', sans-serif;
  font-size: .82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--gi-navy) !important;
  border-radius: var(--gi-r-xs) !important;
  padding: .72rem .90rem !important;
  white-space: normal;
  transition: background var(--gi-dur-fast), color var(--gi-dur-fast), padding-left var(--gi-dur-fast);
}

.dropdown-item:hover,
.dropdown-item:focus {
  color: var(--gi-blue) !important;
  background: rgba(0, 100, 177, .08) !important;
  padding-left: 1.10rem !important;
}

/* ── 6. Hero / Carousel ──────────────────────────────────── */
#heroCarousel {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  border-radius: 0;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(6, 21, 35, .18);
  background: var(--gi-navy);
}

.carousel-inner { border-radius: 0; }

.carousel-item {
  height: clamp(520px, 80vh, 840px);
  overflow: hidden;
  background: var(--gi-navy);
}

/* Fade prelaz između slajdova */
.carousel-fade .carousel-item { opacity: 0; transition: opacity .95s cubic-bezier(.25,.46,.45,.94) !important; }
.carousel-fade .carousel-item.active { opacity: 1; }

.carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.08) contrast(1.06) brightness(.78);
  transform: scale(1.06);
  transition: transform 8s linear;
  will-change: transform;
}

.carousel-item.active img {
  animation: kenBurns 8.5s cubic-bezier(.1, 0, .3, 1) both;
}

@keyframes kenBurns {
  from { transform: scale(1.08) translate3d(-1%, 0, 0); }
  to   { transform: scale(1.01) translate3d(0, 0, 0); }
}

/* Hero overlay */
.hero {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  z-index: 2;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(100deg, rgba(5, 15, 32, .92) 0%, rgba(5, 25, 58, .72) 45%, rgba(5, 15, 32, .14) 100%),
    radial-gradient(circle at 75% 18%, rgba(34, 208, 240, .20), transparent 32%),
    linear-gradient(180deg, rgba(5, 15, 32, .12), rgba(5, 15, 32, .36));
}

/* Hero sadržaj */
.hero-content {
  position: relative;
  z-index: 1;
  width: min(100% - 2rem, 860px);
  margin-left: clamp(1.5rem, 8vw, 8rem);
  padding: clamp(1.2rem, 2.5vw, 2.2rem) clamp(1.4rem, 2.5vw, 2.4rem);
  border-left: 5px solid rgba(34, 208, 240, .90);
  border-radius: 0 var(--gi-r-md) var(--gi-r-md) 0;
  background: linear-gradient(135deg, rgba(255,255,255,.11), rgba(255,255,255,.04));
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  box-shadow: 0 24px 70px rgba(0,0,0,.28);
  border-top: 1px solid rgba(255,255,255,.13);
  border-bottom: 1px solid rgba(255,255,255,.08);
  border-right: 1px solid rgba(255,255,255,.08);
  will-change: transform, opacity;
}

.carousel-item.active .hero-content {
  animation: heroPanelIn .85s cubic-bezier(.16,1,.3,1) .10s both;
}

.carousel-item.active .hero-content h1 {
  animation: heroTitleIn .78s cubic-bezier(.16,1,.3,1) .24s both;
}

.carousel-item.active .hero-lead {
  animation: heroTextIn .78s cubic-bezier(.16,1,.3,1) .38s both;
}

@keyframes heroPanelIn {
  from { opacity: 0; transform: translate3d(-28px, 14px, 0) scale(.97); filter: blur(8px); }
  to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }
}
@keyframes heroTitleIn {
  from { opacity: 0; transform: translateY(22px); filter: blur(6px); }
  to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes heroTextIn {
  from { opacity: 0; transform: translateY(16px); filter: blur(4px); }
  to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}

.hero-content h1 {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(2rem, 5.5vw, 4.6rem);
  font-weight: 800;
  line-height: .94;
  letter-spacing: -.04em;
  color: #ffffff;
  margin-bottom: 1rem;
  text-shadow: 0 2px 18px rgba(0,0,0,.35);
}

.hero-lead {
  font-size: clamp(1rem, 1.8vw, 1.28rem);
  line-height: 1.65;
  color: rgba(255, 255, 255, .88);
  max-width: 720px;
}

/* Carousel navigacione strelice */
.carousel-control-prev,
.carousel-control-next {
  width: 5rem;
  opacity: .7;
  transition: opacity var(--gi-dur-fast);
}
.carousel-control-prev:hover,
.carousel-control-next:hover { opacity: 1; }

.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-color: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.28);
  border-radius: var(--gi-r-xs);
  padding: 1.2rem;
  backdrop-filter: blur(6px);
  transition: background var(--gi-dur-fast), transform var(--gi-dur-fast);
}
.carousel-control-prev:hover .carousel-control-prev-icon,
.carousel-control-next:hover .carousel-control-next-icon {
  background-color: rgba(255,255,255,.28);
  transform: scale(1.08);
}

/* Dekorativni krug u hero-u (desna strana) */
#heroCarousel::after {
  content: "";
  position: absolute;
  right: clamp(4vw, 8vw, 100px);
  bottom: clamp(6vw, 10vw, 110px);
  width: clamp(140px, 16vw, 260px);
  height: clamp(140px, 16vw, 260px);
  border: 1px solid rgba(34, 208, 240, .22);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34, 208, 240, .14), transparent 68%);
  pointer-events: none;
  z-index: 3;
  animation: orbitPulse 5s ease-in-out infinite;
}

@keyframes orbitPulse {
  0%, 100% { transform: scale(1);    opacity: .50; }
  50%        { transform: scale(1.07); opacity: .82; }
}

/* ── 7. Vesti i Radovi — sekcije ─────────────────────────── */
.vesti.container-fluid {
  padding: 4rem clamp(1rem, 4vw, 3rem);
  background: transparent;
  border-radius: var(--gi-r-lg) !important;
}

/* Kartice */
.card {
  border: none !important;
  border-radius: var(--gi-r-md) !important;
  background: var(--gi-surface);
  box-shadow: var(--gi-shadow-sm);
  transition: transform var(--gi-dur-med) ease, box-shadow var(--gi-dur-med) ease;
  overflow: hidden;
}

.card:hover {
  transform: translateY(-6px) scale(1.008);
  box-shadow: var(--gi-shadow-md);
}

.card-img-top {
  width: 100%;
  height: clamp(180px, 26vw, 260px);
  object-fit: cover;
  object-position: center;
  border-radius: 0 !important;
  transition: transform .42s ease;
}

.card:hover .card-img-top { transform: scale(1.04); }

.card-body {
  padding: 1.25rem 1.4rem 1.4rem;
}

.card-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--gi-navy);
  margin-bottom: .55rem;
  line-height: 1.30;
}

.card-text {
  font-size: .93rem;
  color: var(--gi-muted);
  line-height: 1.65;
}

/* Dugmići */
.btn {
  position: relative;
  overflow: hidden;
  font-family: 'Outfit', sans-serif;
  font-size: .83rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: var(--gi-r-sm) !important;
  transition: transform var(--gi-dur-fast), box-shadow var(--gi-dur-fast);
}

.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(108deg, transparent 0 32%, rgba(255,255,255,.26) 46%, transparent 60% 100%);
  transform: translateX(-120%);
  transition: transform .55s cubic-bezier(.16,1,.3,1);
  pointer-events: none;
}
.btn:hover::before { transform: translateX(120%); }

.btn-primary {
  background: linear-gradient(135deg, var(--gi-blue) 0%, var(--gi-blue-mid) 100%);
  border: none;
  box-shadow: 0 4px 16px rgba(0, 100, 177, .32);
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--gi-blue-mid) 0%, var(--gi-cyan) 100%);
  box-shadow: 0 8px 24px rgba(0, 100, 177, .42);
  transform: translateY(-1px);
}

.btn-outline-primary {
  border: 2px solid var(--gi-blue);
  color: var(--gi-blue);
  font-weight: 700;
}
.btn-outline-primary:hover {
  background: var(--gi-blue);
  border-color: var(--gi-blue);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0, 100, 177, .28);
}

/* ── 8. Footer ───────────────────────────────────────────── */
.site-footer {
  position: relative;
  padding: 4rem 0 2rem;
  color: rgba(255,255,255,.88);
  background-color: var(--gi-navy);
  background-size: cover;
  background-position: center;
}

/* Taman overlay ispred pozadinske slike footera */
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6,21,35,.78) 0%, rgba(6,21,35,.92) 100%);
  z-index: 0;
}

.site-footer .container-xl { position: relative; z-index: 1; }

.footer-card {
  padding: 1.6rem;
  border-radius: var(--gi-r-md);
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(8px);
  height: 100%;
  transition: background var(--gi-dur-fast);
}
.footer-card:hover { background: rgba(255,255,255,.09); }

.footer-card h4 {
  font-family: 'Outfit', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: .85rem;
}

.footer-card p { font-size: .92rem; color: rgba(255,255,255,.72); line-height: 1.65; margin: 0; }

.footer-card a {
  color: rgba(255,255,255,.72);
  text-decoration: none;
  transition: color var(--gi-dur-fast);
  display: inline-block;
  padding: .18rem 0;
}
.footer-card a:hover { color: var(--gi-cyan); }

/* Scroll-to-top dugme */
#scrollTopBtn {
  position: fixed;
  right: 1.4rem;
  bottom: 1.4rem;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1.5px solid rgba(0, 100, 177, .28);
  background: rgba(255,255,255,.92);
  color: var(--gi-blue);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 28px rgba(6, 21, 35, .16);
  cursor: pointer;
  z-index: 1200;
  opacity: 0;
  transform: translateY(16px) scale(.88);
  transition: opacity var(--gi-dur-med), transform var(--gi-dur-med), background var(--gi-dur-fast), box-shadow var(--gi-dur-fast);
  backdrop-filter: blur(10px);
}
#scrollTopBtn.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}
#scrollTopBtn:hover {
  background: var(--gi-blue);
  color: #fff;
  box-shadow: 0 12px 36px rgba(0, 100, 177, .36);
}

/* ── 9. Reveal animacija (IntersectionObserver) ──────────── */
body.reveal-ready .card,
body.reveal-ready .news-list-item,
body.reveal-ready .content-section,
body.reveal-ready .quick-link-card {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .52s ease, transform .52s ease;
}
body.reveal-ready .card.is-visible,
body.reveal-ready .news-list-item.is-visible,
body.reveal-ready .content-section.is-visible,
body.reveal-ready .quick-link-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── 10. Content sekcije (unutrašnje stranice) ───────────── */
.content-section {
  background: var(--gi-surface);
  border-radius: var(--gi-r-xl);
  padding: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 4vw, 3rem);
  margin-top: 2rem;
  margin-bottom: 3rem;
  box-shadow: var(--gi-shadow-sm);
}

.content-section .img-fluid {
  border-radius: var(--gi-r-md);
  box-shadow: var(--gi-shadow-sm);
}

/* Hero slika na unutrašnjim stranicama */
.page-hero-img {
  width: 100%;
  max-height: 520px;
  object-fit: cover;
  border-radius: var(--gi-r-lg);
  box-shadow: var(--gi-shadow-md);
  margin-bottom: 2.5rem;
}

/* Naslovi na unutrašnjim stranicama */
.page-title {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(1.6rem, 3.5vw, 2.6rem);
  font-weight: 800;
  color: var(--gi-blue);
  letter-spacing: .05em;
  text-transform: uppercase;
  text-align: center;
  margin: 2rem 0;
}

.page-title-sm {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(1.2rem, 2.5vw, 1.8rem);
  font-weight: 700;
  color: var(--gi-blue);
  letter-spacing: .04em;
  text-transform: uppercase;
  text-align: center;
  margin: 1.5rem 0;
}

/* Horizontalni separator */
hr.linija {
  border: none;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gi-line), transparent);
  margin: 2rem 0;
}

/* Slike menadžmenta */
.management-img {
  max-width: 400px;
  width: 100%;
  border-radius: var(--gi-r-md);
  box-shadow: var(--gi-shadow-md);
  cursor: pointer;
  transition: transform var(--gi-dur-med), box-shadow var(--gi-dur-med);
}
.management-img:hover {
  transform: scale(1.03);
  box-shadow: var(--gi-shadow-lg);
}

/* Lista vesti na inner stranicama */
.news-list-item {
  display: flex;
  gap: 1.4rem;
  padding: 1.4rem;
  border-radius: var(--gi-r-md);
  background: var(--gi-surface);
  box-shadow: var(--gi-shadow-sm);
  transition: transform var(--gi-dur-med), box-shadow var(--gi-dur-med);
  overflow: hidden;
  margin-bottom: 1.2rem;
}
.news-list-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--gi-shadow-md);
}
.news-list-img {
  width: clamp(120px, 18vw, 200px);
  height: clamp(90px, 13vw, 150px);
  object-fit: cover;
  border-radius: var(--gi-r-sm);
  flex-shrink: 0;
}

/* Paginacija */
.pagination-modern {
  display: flex;
  justify-content: center;
  gap: .5rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}
.pagination-modern a,
.pagination-modern strong {
  padding: .5rem .95rem;
  border-radius: var(--gi-r-sm);
  font-family: 'Outfit', sans-serif;
  font-size: .85rem;
  font-weight: 600;
  background: var(--gi-surface);
  color: var(--gi-blue);
  box-shadow: var(--gi-shadow-sm);
  transition: background var(--gi-dur-fast), color var(--gi-dur-fast), transform var(--gi-dur-fast);
  text-decoration: none;
}
.pagination-modern strong {
  background: var(--gi-blue);
  color: #fff;
}
.pagination-modern a:hover {
  background: var(--gi-blue);
  color: #fff;
  transform: translateY(-2px);
}

/* Modal stilovi */
.modal-content {
  border: none;
  border-radius: var(--gi-r-xl) !important;
  box-shadow: var(--gi-shadow-lg);
  overflow: hidden;
}
.modal-header {
  border-bottom: 1px solid var(--gi-line);
  padding: 1.5rem 2rem;
}
.modal-body { padding: 1.5rem 2rem; }
.modal-footer {
  border-top: 1px solid var(--gi-line);
  padding: 1.2rem 2rem;
}

/* Galerija slika */
.galerija img {
  width: 100%;
  height: clamp(150px, 22vw, 240px);
  object-fit: cover;
  border-radius: var(--gi-r-sm);
  box-shadow: var(--gi-shadow-sm);
  cursor: pointer;
  transition: transform var(--gi-dur-med), box-shadow var(--gi-dur-med);
}
.galerija img:hover {
  transform: scale(1.03);
  box-shadow: var(--gi-shadow-md);
}

/* ── 11. Responsive ──────────────────────────────────────── */

/* --- Tablet (≤ 991px) --- */
@media (max-width: 991.98px) {
  :root { --gi-nav-h: 72px; }

  /* Hamburger meni */
  .navbar-collapse {
    background: rgba(255,255,255,.97);
    border-radius: 0 0 var(--gi-r-lg) var(--gi-r-lg);
    box-shadow: 0 20px 60px rgba(6, 21, 35, .14);
    border-top: 1px solid var(--gi-line);
    max-height: calc(100vh - var(--gi-nav-h));
    overflow-y: auto;
    padding: .75rem 1rem 1.25rem;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
  }

  .nav-link {
    font-size: .86rem;
    padding: .78rem .90rem !important;
    border-radius: var(--gi-r-sm) !important;
  }

  .nav-link::after { display: none; }

  .dropdown-menu {
    border-radius: var(--gi-r-sm) !important;
    margin-top: .3rem;
    max-width: 100%;
    min-width: 100%;
    box-shadow: 0 8px 24px rgba(6, 21, 35, .10);
    padding: .4rem !important;
  }

  .dropdown-item {
    font-size: .82rem;
    padding: .68rem .85rem !important;
  }

  /* Hero */
  .carousel-item { height: clamp(440px, 70vh, 680px); }

  .hero { align-items: center; }

  .hero-content {
    width: min(100% - 2rem, 640px);
    margin-left: 1.5rem;
    margin-right: 1rem;
  }

  .hero-content h1 {
    font-size: clamp(1.8rem, 5.5vw, 3.2rem);
  }

  #heroCarousel::after { display: none; }
}

/* --- Mobilni (≤ 767px) --- */
@media (max-width: 767.98px) {
  :root { --gi-nav-h: 66px; }

  .navbar-brand img { max-height: 52px; }

  .carousel-item { height: clamp(380px, 75vh, 560px); }

  .hero {
    align-items: center;
    justify-content: flex-start;
    padding: 1rem;
  }

  .hero-overlay {
    background: linear-gradient(100deg, rgba(5, 15, 32, .88), rgba(5, 25, 58, .62)), transparent;
  }

  .hero-content {
    width: calc(100% - 2rem);
    margin-left: 1rem;
    margin-right: 1rem;
    padding: 1rem 1.1rem;
    border-left-width: 4px;
  }

  .hero-content h1 {
    font-size: clamp(1.5rem, 8.5vw, 2.4rem);
    line-height: 1.05;
    margin-bottom: .65rem;
  }

  .hero-lead {
    font-size: clamp(.90rem, 3.8vw, 1.08rem);
    line-height: 1.55;
  }

  .gi-section-title {
    font-size: clamp(1.4rem, 6vw, 2rem);
    letter-spacing: .03em;
  }

  .vesti.container-fluid { padding: 2.5rem 1rem; }

  .card-img-top { height: clamp(160px, 45vw, 240px); }

  .content-section {
    border-radius: var(--gi-r-md);
    padding: 1.5rem 1.2rem;
    margin-top: 1rem;
    margin-bottom: 1.5rem;
  }

  .news-list-item { flex-direction: column; }
  .news-list-img { width: 100%; height: 180px; }

  .page-hero-img { max-height: 280px; border-radius: var(--gi-r-sm); }

  #scrollTopBtn { right: 1rem; bottom: 1rem; width: 44px; height: 44px; font-size: 1.2rem; }

  .site-footer { padding: 2.5rem 0 1.5rem; }
}

/* =========================================================
   GAS INFRASTRUKTURA — V11 HERO + MOBILE/FOLD RESPONSIVE FIX
   Završni sloj za stabilnu hero tranziciju, Safari viewport i
   organizacionu strukturu bez negativnih Bootstrap margina.
   ========================================================= */
:root {
  --gi-safe-top: env(safe-area-inset-top, 0px);
  --gi-safe-right: env(safe-area-inset-right, 0px);
  --gi-safe-bottom: env(safe-area-inset-bottom, 0px);
  --gi-safe-left: env(safe-area-inset-left, 0px);
  --gi-header-total: calc(var(--gi-nav-h) + var(--gi-safe-top));
}

html,
body {
  width: 100%;
  max-width: 100%;
}

body {
  padding-top: var(--gi-header-total) !important;
}

body > nav.navbar,
nav.navbar,
.gi-locked-header.navbar,
.navbar.fixed-top {
  width: 100% !important;
  height: var(--gi-header-total) !important;
  min-height: var(--gi-header-total) !important;
  padding-top: var(--gi-safe-top) !important;
}

.navbar .container-xl {
  padding-left: max(.75rem, var(--gi-safe-left)) !important;
  padding-right: max(.75rem, var(--gi-safe-right)) !important;
}

/* Pouzdan fade-through-dark: nema duplog teksta i „pucanja” slike. */
#heroCarousel {
  isolation: isolate;
  height: calc(100vh - var(--gi-header-total));
  min-height: 480px;
  background: #061523;
  contain: paint;
}

@supports (height: 100svh) {
  #heroCarousel,
  #heroCarousel .carousel-inner,
  #heroCarousel .carousel-item {
    height: calc(100svh - var(--gi-header-total));
  }
}

#heroCarousel .carousel-inner,
#heroCarousel .carousel-item {
  height: 100%;
  min-height: 100%;
  background: #061523;
}

#heroCarousel.carousel-fade .carousel-item {
  opacity: 0;
  transform: none !important;
  transition: opacity 1.05s cubic-bezier(.45, 0, .25, 1) !important;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: opacity;
}

#heroCarousel.carousel-fade .carousel-item.active,
#heroCarousel.carousel-fade .carousel-item-next.carousel-item-start,
#heroCarousel.carousel-fade .carousel-item-prev.carousel-item-end {
  opacity: 1;
}

#heroCarousel.carousel-fade .active.carousel-item-start,
#heroCarousel.carousel-fade .active.carousel-item-end {
  opacity: 0 !important;
}

#heroCarousel .carousel-item img {
  transform: translateZ(0) scale(1.045);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

#heroCarousel .carousel-item:nth-child(1) img { object-position: 64% center; }
#heroCarousel .carousel-item:nth-child(2) img { object-position: 52% center; }
#heroCarousel .carousel-item:nth-child(3) img { object-position: 58% center; }

.glass-transition-layer {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: block;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(105deg, rgba(6,21,35,.94), rgba(8,35,65,.88));
}

#heroCarousel.is-transitioning .glass-transition-layer {
  animation: giHeroTransitionVeil 1.05s cubic-bezier(.45, 0, .25, 1) both;
}

@keyframes giHeroTransitionVeil {
  0%, 100% { opacity: 0; }
  44%, 56% { opacity: .96; }
}

/* Bez filter:blur animacije: znatno mirnije na Safari/WebKit i Fold GPU-u. */
#heroCarousel .carousel-item.active .hero-content {
  animation: giHeroPanelIn .68s cubic-bezier(.16,1,.3,1) .08s both !important;
}

#heroCarousel .carousel-item.active .hero-content h1 {
  animation: giHeroTitleIn .62s cubic-bezier(.16,1,.3,1) .16s both !important;
}

#heroCarousel .carousel-item.active .hero-lead {
  animation: giHeroTextIn .62s cubic-bezier(.16,1,.3,1) .24s both !important;
}

@keyframes giHeroPanelIn {
  from { opacity: 0; transform: translate3d(-18px, 8px, 0) scale(.99); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes giHeroTitleIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes giHeroTextIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

#heroCarousel .carousel-control-prev,
#heroCarousel .carousel-control-next {
  z-index: 10;
  touch-action: manipulation;
}

#heroCarousel .active.carousel-item-start .hero-content,
#heroCarousel .active.carousel-item-end .hero-content {
  opacity: 0 !important;
  animation: none !important;
  transition: opacity .22s ease !important;
}

/* Organizaciona struktura — semantičan, stabilan raspored na svim širinama. */
.organization-page {
  width: min(100%) !important;
  padding-left: max(.75rem, var(--gi-safe-left)) !important;
  padding-right: max(.75rem, var(--gi-safe-right)) !important;
}

.organization-shell {
  margin-top: clamp(1rem, 3vw, 2.5rem) !important;
  padding: clamp(.75rem, 2.5vw, 2rem) !important;
  overflow: hidden;
}

.organization-banner {
  position: relative;
  min-height: clamp(250px, 34vw, 470px);
  overflow: hidden;
  border-radius: var(--gi-r-lg);
  background: #061523;
  box-shadow: var(--gi-shadow-md);
}

.organization-banner > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 52%;
}

.organization-banner-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(6,21,35,.94) 0%, rgba(6,21,35,.76) 45%, rgba(6,21,35,.16) 100%);
}

.organization-banner-copy {
  position: absolute;
  left: clamp(1rem, 4vw, 3.5rem);
  right: clamp(1rem, 4vw, 3.5rem);
  bottom: clamp(1.25rem, 4vw, 3.5rem);
  z-index: 1;
  max-width: 780px;
  padding-left: clamp(.85rem, 1.8vw, 1.35rem);
  border-left: 5px solid var(--gi-red);
}

.organization-eyebrow {
  display: block;
  margin-bottom: .55rem;
  color: rgba(255,255,255,.82);
  font-family: 'Outfit', sans-serif;
  font-size: clamp(.68rem, 1.5vw, .85rem);
  font-weight: 700;
  letter-spacing: .15em;
}

.organization-banner-copy h1,
.organization-banner-copy #organization-title {
  margin: 0;
  color: #fff !important;
  font-size: clamp(1.75rem, 4.4vw, 4rem);
  line-height: 1.02;
  overflow-wrap: anywhere;
}

.organization-intro {
  width: min(100%);
  margin: clamp(1.4rem, 3vw, 2.4rem) auto;
  padding: clamp(1rem, 2.3vw, 1.5rem);
  color: #17304a;
  font-size: clamp(1rem, 1.7vw, 1.18rem);
  text-align: center;
  background: #f3f8fc;
  border: 1px solid rgba(0,95,174,.11);
  border-left: 4px solid #005fae;
  border-radius: var(--gi-r-md);
}

.organization-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 2rem);
  align-items: start;
}

.organization-card {
  min-width: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(7,27,51,.10);
  border-radius: var(--gi-r-lg);
  box-shadow: 0 16px 44px rgba(7,27,51,.09);
}

.organization-card-heading {
  display: flex;
  align-items: center;
  gap: .85rem;
  min-height: 72px;
  padding: .9rem clamp(1rem, 2.4vw, 1.5rem);
  background: linear-gradient(135deg, #f8fbfe, #edf5fb);
  border-bottom: 1px solid rgba(7,27,51,.09);
}

.organization-index {
  flex: 0 0 auto;
  color: var(--gi-red);
  font-family: 'Outfit', sans-serif;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
}

.organization-card-heading h2 {
  margin: 0;
  color: #005fae !important;
  font-size: clamp(1.05rem, 2.2vw, 1.5rem);
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.organization-portrait {
  margin: 0;
  background: #fff;
}

.organization-portrait img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1522 / 1650;
  object-fit: contain;
  object-position: center;
  background: #fff;
}

.site-footer {
  padding-bottom: max(1.5rem, var(--gi-safe-bottom));
}

@media (max-width: 899.98px) {
  .organization-grid { grid-template-columns: minmax(0, 1fr); }
  .organization-card { width: min(100%, 680px); margin-inline: auto; }
}

@media (max-width: 767.98px) {
  #heroCarousel { min-height: 440px; }

  #heroCarousel .hero {
    padding: max(.75rem, var(--gi-safe-left));
  }

  #heroCarousel .hero-content {
    width: min(100%, 560px);
    margin: 0;
    padding: .95rem 1rem;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(6,21,35,.72);
  }

  #heroCarousel .carousel-control-prev,
  #heroCarousel .carousel-control-next {
    width: 3rem;
  }

  .organization-banner {
    min-height: clamp(220px, 62vw, 330px);
    border-radius: var(--gi-r-md);
  }

  .organization-banner-shade {
    background: linear-gradient(0deg, rgba(6,21,35,.94) 0%, rgba(6,21,35,.60) 62%, rgba(6,21,35,.20) 100%);
  }

  .organization-banner-copy {
    border-left-width: 4px;
  }

  .organization-intro { text-align: left; }
}

@media (max-width: 420px) {
  #heroCarousel { min-height: 410px; }
  #heroCarousel .hero-lead { font-size: .9rem; line-height: 1.48; }
  #heroCarousel .hero-content h1 { font-size: clamp(1.55rem, 8.8vw, 2.05rem); }

  .organization-shell { padding: .55rem !important; }
  .organization-banner-copy { left: .9rem; right: .9rem; bottom: 1rem; }
  .organization-banner-copy h1,
  .organization-banner-copy #organization-title { font-size: clamp(1.45rem, 7.8vw, 2rem); }
  .organization-card-heading { min-height: 64px; padding: .75rem .9rem; }
}

@media (orientation: landscape) and (max-height: 560px) {
  #heroCarousel,
  #heroCarousel .carousel-inner,
  #heroCarousel .carousel-item {
    min-height: 420px;
    height: 420px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #heroCarousel.carousel-fade .carousel-item {
    transition-duration: .01ms !important;
  }
  #heroCarousel.is-transitioning .glass-transition-layer {
    animation: none !important;
  }
}

/* --- Mali mobilni (≤ 480px) --- */
@media (max-width: 480px) {
  :root { --gi-nav-h: 62px; }

  .navbar-brand img { max-height: 46px; }

  .hero-content h1 { font-size: clamp(1.3rem, 9vw, 1.9rem); }
  .hero-lead       { font-size: .88rem; }

  .carousel-item { height: clamp(320px, 78vh, 480px); }
}

/* ── 12. Pristupačnost ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  body.page-leaving { opacity: 1; transform: none; filter: none; }
  .carousel-item.active img,
  .carousel-item.active .hero-content,
  .carousel-item.active .hero-content h1,
  .carousel-item.active .hero-lead,
  #heroCarousel::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ── Focus stilovi za pristupačnost ─────────────────────── */
:focus-visible {
  outline: 3px solid var(--gi-cyan);
  outline-offset: 3px;
  border-radius: 4px;
}


/* =========================================================
   GAS INFRASTRUKTURA — V5 CORPORATE REFINEMENT
   Zaključan header, korporativniji UI, širi layout, čitljivi modali
   ========================================================= */
:root {
  --gi-navy: #071b33;
  --gi-navy-2: #0b2747;
  --gi-blue: #005fae;
  --gi-blue-mid: #0877cf;
  --gi-cyan: #2db7df;
  --gi-red: #c8131d;
  --gi-gold: #cfa24a;
  --gi-text: #172b40;
  --gi-muted: #60758a;
  --gi-bg: #f4f7fb;
  --gi-surface: #ffffff;
  --gi-line: rgba(9, 36, 68, .12);
  --gi-shadow-sm: 0 6px 20px rgba(7, 27, 51, .07);
  --gi-shadow-md: 0 18px 46px rgba(7, 27, 51, .12);
  --gi-shadow-lg: 0 28px 86px rgba(7, 27, 51, .18);
  --gi-r-xs: 3px;
  --gi-r-sm: 5px;
  --gi-r-md: 8px;
  --gi-r-lg: 12px;
  --gi-r-xl: 18px;
  --gi-max: 1680px;
  --gi-nav-h: 78px;
}

body {
  background-color: var(--gi-bg);
  background-image:
    linear-gradient(180deg, #f8fbff 0%, #eef4fa 44%, #f8fafc 100%);
}
body::before {
  background-image:
    linear-gradient(rgba(0, 95, 174, .026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 95, 174, .026) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.45), transparent 70%);
}

.container,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl { max-width: var(--gi-max) !important; }

/* Zaključan header */
.gi-locked-header.navbar,
.navbar.fixed-top {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1080;
  height: var(--gi-nav-h);
  background: rgba(255,255,255,.96) !important;
  border-bottom: 1px solid rgba(7, 27, 51, .10);
  box-shadow: 0 10px 34px rgba(7, 27, 51, .08);
}
.navbar::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--gi-red) 0 28%, var(--gi-blue) 28% 78%, var(--gi-cyan) 78% 100%);
}
.navbar.shrink { height: 66px; background: rgba(255,255,255,.985) !important; }
.navbar .container-xl { width: min(100% - 2rem, var(--gi-max)); }
.navbar-brand { min-width: auto; }
.navbar-brand img { max-height: 52px; filter: none; }
.navbar.shrink .navbar-brand img { max-height: 44px; }

.navbar-toggler { border-radius: var(--gi-r-sm) !important; box-shadow: none; }
.nav-link {
  border-radius: var(--gi-r-xs) !important;
  color: #132a43 !important;
  background: transparent !important;
  padding: .72rem .86rem !important;
}
.nav-link:hover,
.nav-link:focus,
.nav-link.active {
  color: var(--gi-blue) !important;
  background: rgba(0, 95, 174, .055) !important;
  transform: none;
}
.nav-link::after { bottom: .18rem; height: 3px; border-radius: 0; background: var(--gi-red); }
.dropdown-menu {
  border-radius: var(--gi-r-lg) !important;
  border: 1px solid rgba(7, 27, 51, .10) !important;
  box-shadow: 0 24px 70px rgba(7, 27, 51, .16);
}
.dropdown-item { border-radius: var(--gi-r-xs) !important; }

/* Hero: full screen poslovni karusel */
#heroCarousel {
  min-height: calc(100vh - var(--gi-nav-h));
  box-shadow: none;
  border-bottom: 1px solid rgba(7, 27, 51, .10);
}
.carousel-inner,
.carousel-item { min-height: calc(100vh - var(--gi-nav-h)); }
.carousel-item { height: calc(100vh - var(--gi-nav-h)); }
.carousel-item img {
  filter: saturate(1.02) contrast(1.04) brightness(.72);
  transform: scale(1.035);
}
.hero-overlay {
  background:
    linear-gradient(90deg, rgba(7, 27, 51, .96) 0%, rgba(7, 27, 51, .78) 36%, rgba(7, 27, 51, .25) 68%, rgba(7, 27, 51, .08) 100%),
    linear-gradient(180deg, rgba(7, 27, 51, .16), rgba(7, 27, 51, .34));
}
.hero-content {
  width: min(100% - 2rem, 880px);
  margin-left: max(2rem, calc((100vw - var(--gi-max)) / 2 + 2rem));
  padding: clamp(1.3rem, 2.4vw, 2.2rem) clamp(1.4rem, 2.8vw, 2.6rem);
  border-left: 6px solid var(--gi-red);
  border-radius: var(--gi-r-md);
  background: rgba(6, 21, 35, .45);
  border-top: 1px solid rgba(255,255,255,.18);
  border-right: 1px solid rgba(255,255,255,.10);
  border-bottom: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 30px 90px rgba(0,0,0,.28);
}
.hero-content::before {
  /*content: "КОРПОРАТИВНИ ПОРТАЛ";*/
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: .2rem .55rem;
  margin-bottom: 1rem;
  border: 1px solid rgba(255,255,255,.28);
  color: rgba(255,255,255,.86);
  font-family: 'Outfit', sans-serif;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .16em;
  background: rgba(255,255,255,.08);
  border-radius: var(--gi-r-xs);
}
.hero-content h1 { font-size: clamp(2.3rem, 5vw, 5.2rem); line-height: .96; }
.hero-lead { color: rgba(255,255,255,.90); max-width: 760px; }
#heroCarousel::after { border-radius: 0; opacity: .55; }
.carousel-control-prev-icon,
.carousel-control-next-icon { border-radius: var(--gi-r-xs); }

/* Sekcije i kartice */
.vesti.container-fluid {
  width: min(100% - 2rem, var(--gi-max));
  margin-inline: auto;
  padding: clamp(3rem, 5vw, 5.6rem) 0;
  border-radius: 0 !important;
}
.gi-section-title,
.vesti-title,
.page-title {
  color: var(--gi-navy);
  letter-spacing: .04em;
}
.vesti-title {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(1.8rem, 4vw, 2.7rem);
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 2.4rem;
}
.gi-section-title::after,
.vesti-title::after,
.page-title::after {
  content: "";
  display: block;
  width: 84px;
  height: 3px;
  background: linear-gradient(90deg, var(--gi-red), var(--gi-blue));
  margin: .85rem auto 0;
  border-radius: 0;
}
.card,
.news-list-item,
.content-section,
.footer-card {
  border-radius: var(--gi-r-lg) !important;
  border: 1px solid rgba(7, 27, 51, .08) !important;
}
.card { box-shadow: 0 10px 28px rgba(7, 27, 51, .075); }
.card::before,
.news-list-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gi-red), var(--gi-blue));
  opacity: .90;
}
.card { position: relative; }
.news-list-item { position: relative; background: #fff; }
.card:hover,
.news-list-item:hover { transform: translateY(-5px); box-shadow: var(--gi-shadow-md); }
.card-title { color: var(--gi-navy); font-size: 1.08rem; }
.card-text { color: #526a82; }
.news-list-item h5 { color: var(--gi-navy) !important; font-family: 'Outfit', sans-serif; letter-spacing: -.01em; }
.news-list-img { border-radius: var(--gi-r-md); }

/* Dugmad: pravougaoni corporate, bez pill izgleda */
.btn,
.btn-sps,
.pagination-modern a,
.pagination-modern strong {
  border-radius: var(--gi-r-sm) !important;
}
.btn-primary,
.btn-sps {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: .72rem 1rem;
  font-family: 'Outfit', sans-serif;
  font-size: .82rem;
  font-weight: 750;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff !important;
  background: linear-gradient(135deg, var(--gi-blue), var(--gi-navy-2));
  border: 1px solid rgba(255,255,255,.0);
  box-shadow: 0 8px 22px rgba(0, 95, 174, .24);
  text-decoration: none;
}
.btn-primary:hover,
.btn-sps:hover { background: linear-gradient(135deg, var(--gi-red), var(--gi-blue)); color: #fff !important; transform: translateY(-1px); }
.btn-outline-primary { border-radius: var(--gi-r-sm) !important; border-color: var(--gi-blue); color: var(--gi-blue); background: #fff; }
.btn-secondary { border-radius: var(--gi-r-sm) !important; }

/* Unutrašnje stranice */
.content-section {
  margin-top: clamp(1.5rem, 3vw, 3rem);
  margin-bottom: clamp(2rem, 4vw, 4rem);
  box-shadow: 0 12px 34px rgba(7, 27, 51, .065);
}
.page-hero-img { border-radius: var(--gi-r-lg); max-height: 560px; }
.year {
  display: inline-flex;
  align-items: center;
  padding: .28rem .6rem;
  border-left: 4px solid var(--gi-red);
  background: rgba(0, 95, 174, .06);
  color: var(--gi-navy) !important;
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  border-radius: var(--gi-r-xs);
}
.management-img {
  border-radius: var(--gi-r-lg) !important;
  border: 1px solid rgba(7, 27, 51, .12);
  box-shadow: 0 12px 34px rgba(7, 27, 51, .12);
  aspect-ratio: 4 / 5;
  object-fit: cover;
  max-height: 460px;
}
.management-img:hover { transform: translateY(-4px) scale(1.015); }

/* Svetli i čitljivi popup/modali */
.modal-backdrop.show { opacity: .58; }
.modal-content {
  background: #fff !important;
  color: var(--gi-text) !important;
  border-radius: var(--gi-r-lg) !important;
  border: 1px solid rgba(7, 27, 51, .10) !important;
}
.modal-header {
  background: linear-gradient(135deg, #f7fbff, #ffffff) !important;
  border-bottom: 1px solid rgba(7, 27, 51, .10) !important;
}
.modal-title { color: var(--gi-navy) !important; font-weight: 800; }
.modal-body,
.modal-body p { color: var(--gi-text) !important; }
.modal-body img {
  max-height: 520px;
  object-fit: contain;
  border-radius: var(--gi-r-md);
  background: #f4f7fb;
  box-shadow: var(--gi-shadow-sm);
}
.modal-footer { background: #f8fafc; border-top: 1px solid rgba(7, 27, 51, .10) !important; }

/* Paginacija */
.pagination-modern { gap: .45rem; }
.pagination-modern a,
.pagination-modern strong {
  margin: 0 .15rem !important;
  color: var(--gi-blue) !important;
  background: #fff;
  border: 1px solid rgba(7, 27, 51, .10);
  box-shadow: none;
}
.pagination-modern strong { color: #fff !important; background: var(--gi-blue); border-color: var(--gi-blue); }
.pagination-modern a:hover { color: #fff !important; background: var(--gi-navy); }

/* Footer */
.site-footer { border-top: 4px solid var(--gi-red); }
.site-footer::before { background: linear-gradient(180deg, rgba(7,27,51,.84), rgba(7,27,51,.96)); }
.footer-card { background: rgba(255,255,255,.07); }
.footer-brand-card { border-left: 4px solid var(--gi-red) !important; }
.footer-separator { border-color: rgba(255,255,255,.22) !important; opacity: 1; }
.footer-bottom small { color: rgba(255,255,255,.70); }
#scrollTopBtn { border-radius: var(--gi-r-sm); }

@media (max-width: 991.98px) {
  :root { --gi-nav-h: 70px; }
  .navbar-collapse { border-radius: 0 0 var(--gi-r-lg) var(--gi-r-lg); }
  .hero-content { margin-left: 1.25rem; width: min(100% - 2rem, 680px); }
  .carousel-item, .carousel-inner, #heroCarousel { min-height: 640px; height: calc(100vh - var(--gi-nav-h)); }
}
@media (max-width: 767.98px) {
  :root { --gi-nav-h: 64px; }
  .navbar .container-xl { width: min(100% - 1rem, var(--gi-max)); }
  .navbar-brand img { max-height: 42px; }
  .carousel-item, .carousel-inner, #heroCarousel { min-height: 520px; height: calc(100vh - var(--gi-nav-h)); }
  .hero-content { margin: 0 1rem; padding: 1rem 1.05rem; border-left-width: 4px; }
  .hero-content::before { font-size: .65rem; letter-spacing: .11em; }
  .hero-content h1 { font-size: clamp(1.8rem, 9vw, 2.8rem); }
  .vesti.container-fluid { width: min(100% - 1.25rem, var(--gi-max)); }
  .content-section { margin-inline: .75rem; }
  .management-img { max-height: 380px; }
}
@media (max-width: 480px) {
  .carousel-item, .carousel-inner, #heroCarousel { min-height: 460px; }
  .hero-content h1 { font-size: clamp(1.55rem, 9vw, 2.15rem); }
}

/* =========================================================
   GAS INFRASTRUKTURA — V6 FIX
   Zaključan header, popravljeni modal/popup prikazi i kontakt strana
   ========================================================= */
:root {
  --gi-max: 1720px;
  --gi-nav-h: 78px;
}

html {
  scroll-padding-top: calc(var(--gi-nav-h) + 18px) !important;
}

body {
  padding-top: var(--gi-nav-h) !important;
}

body.page-leaving {
  transform: none !important;
  filter: none !important;
  opacity: .42;
}

.gi-locked-header.navbar,
.navbar.fixed-top {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 1040 !important;
  transform: translateZ(0) !important;
  will-change: height, background, box-shadow;
}

.modal-backdrop { z-index: 1050 !important; }
.modal { z-index: 1055 !important; }
.modal-backdrop.show { opacity: .46 !important; }

.nav-contact-link {
  min-height: 40px;
  padding-inline: 1rem !important;
  border: 1px solid rgba(200, 19, 29, .30) !important;
  background: linear-gradient(135deg, rgba(200, 19, 29, .095), rgba(0, 95, 174, .055)) !important;
  color: var(--gi-navy) !important;
}

.nav-contact-link:hover,
.nav-contact-link:focus,
.nav-contact-link.active {
  color: #fff !important;
  background: linear-gradient(135deg, var(--gi-red), var(--gi-blue)) !important;
  border-color: transparent !important;
}

.nav-contact-link::after { display: none !important; }

/* Modal/popup popravke — tekst i slike ostaju unutar vidljivog ekrana */
.modal-dialog {
  margin-left: auto !important;
  margin-right: auto !important;
}

.modal[id^="primerModal"] .modal-dialog,
#imageModal .modal-dialog {
  width: min(1040px, calc(100vw - 32px));
  max-width: min(1040px, calc(100vw - 32px));
}

.modal[id^="primerModal"] .modal-content {
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
}

.modal[id^="primerModal"] .modal-header,
.modal[id^="primerModal"] .modal-footer {
  flex: 0 0 auto;
}

.modal[id^="primerModal"] .modal-body {
  flex: 1 1 auto;
  overflow-y: auto;
  max-height: calc(100vh - 180px);
  padding: clamp(1rem, 2vw, 1.6rem) clamp(1rem, 2.4vw, 2rem) !important;
  background: #fff;
}

.modal[id^="primerModal"] .modal-body > img {
  width: min(420px, 100%);
  max-height: 340px;
  object-fit: contain;
  margin: 0 auto 1.2rem;
  border-radius: var(--gi-r-md);
  background: #f5f8fb;
  box-shadow: 0 10px 26px rgba(7, 27, 51, .09);
}

.modal[id^="primerModal"] .modal-body p {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
  font-size: clamp(.95rem, 1.2vw, 1.04rem);
  line-height: 1.78;
  color: #17304a !important;
}

.modal[id^="primerModal"] .btn-secondary,
#imageModal .btn-danger {
  background: linear-gradient(135deg, #637181, #2f3f50) !important;
  border: 0 !important;
  color: #fff !important;
}

/* Modal za galerijske slike na stranici opsirnije */
#imageModal .modal-content {
  max-height: calc(100vh - 32px);
  border-radius: var(--gi-r-lg) !important;
  overflow: hidden;
}

#imageModal .modal-body {
  min-height: 260px;
  max-height: calc(100vh - 120px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #f9fbfe, #eef4fa) !important;
  overflow: hidden;
}

#imageModal #modalImage {
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 74vh !important;
  object-fit: contain !important;
  border-radius: var(--gi-r-md);
  box-shadow: 0 18px 48px rgba(7, 27, 51, .15);
  background: #fff;
}

#imageModal .modal-footer {
  background: #fff !important;
  padding: .9rem 1.2rem !important;
}

/* Kontakt strana */
.contact-wrapper {
  padding-top: clamp(2rem, 4vw, 3.5rem);
}

.corporate-panel {
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(7, 27, 51, .08);
  border-radius: var(--gi-r-lg);
  box-shadow: 0 14px 40px rgba(7, 27, 51, .075);
  padding: clamp(1.4rem, 3vw, 2.5rem);
}

.corporate-panel::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--gi-red), var(--gi-blue), var(--gi-cyan));
}

.contact-hero {
  min-height: 260px;
  display: flex;
  align-items: center;
  background:
    linear-gradient(120deg, rgba(7, 27, 51, .96), rgba(7, 39, 71, .86)),
    url('../slike/bg-slider-2.jpg') center / cover no-repeat;
  color: #fff;
}

.contact-hero::after {
  content: "";
  position: absolute;
  right: clamp(1rem, 5vw, 4rem);
  bottom: clamp(1rem, 5vw, 3rem);
  width: clamp(120px, 18vw, 260px);
  height: clamp(120px, 18vw, 260px);
  border: 1px solid rgba(255,255,255,.14);
  background: radial-gradient(circle, rgba(45, 183, 223, .22), transparent 68%);
  pointer-events: none;
}

.contact-hero-content {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(160px, 220px) 1fr;
  gap: clamp(1.2rem, 3vw, 2.5rem);
  align-items: center;
}

.contact-logo-card {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 140px;
  padding: 1.2rem;
  background: #fff;
  border-radius: var(--gi-r-md);
  box-shadow: 0 22px 60px rgba(0,0,0,.25);
}

.contact-logo-card img {
  max-height: 92px;
  object-fit: contain;
}

.eyebrow {
  margin-bottom: .65rem;
  font-family: 'Outfit', sans-serif;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gi-red);
}

.contact-hero .eyebrow { color: rgba(255,255,255,.78); }
.contact-hero h1 {
  color: #fff;
  font-size: clamp(2rem, 4vw, 4rem);
  margin-bottom: 1rem;
}
.contact-hero .lead { color: rgba(255,255,255,.86); max-width: 900px; }

.contact-info-panel h2,
.corporate-panel h2 {
  color: var(--gi-navy);
  font-size: clamp(1.35rem, 2.2vw, 2rem);
  margin-bottom: .75rem;
}

.contact-info-list {
  display: grid;
  gap: .85rem;
}

.contact-info-item {
  padding: 1rem 1.05rem;
  border: 1px solid rgba(7, 27, 51, .08);
  background: linear-gradient(180deg, #fff, #f8fbff);
  border-radius: var(--gi-r-md);
}

.contact-info-item span {
  display: block;
  margin-bottom: .22rem;
  color: var(--gi-muted);
  font-size: .86rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.contact-info-item strong {
  color: var(--gi-navy);
  font-weight: 800;
}

.contact-note {
  padding: 1rem;
  border-left: 4px solid var(--gi-red);
  background: rgba(0, 95, 174, .055);
  border-radius: var(--gi-r-sm);
  color: #29435e;
}

.contact-form .form-label {
  font-family: 'Outfit', sans-serif;
  font-weight: 750;
  color: var(--gi-navy);
}

.contact-form .form-control,
.contact-form .form-select {
  min-height: 48px;
  border-radius: var(--gi-r-sm);
  border: 1px solid rgba(7, 27, 51, .16);
  background-color: #fbfdff;
  color: var(--gi-text);
  box-shadow: none;
}

.contact-form textarea.form-control { min-height: 150px; }

.contact-form .form-control:focus,
.contact-form .form-select:focus {
  border-color: var(--gi-blue);
  box-shadow: 0 0 0 4px rgba(0, 95, 174, .12);
  background: #fff;
}

.contact-submit { min-width: 180px; }
.corporate-alert { border-radius: var(--gi-r-sm); border: 0; }

.map-heading {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: end;
  margin-bottom: 1.3rem;
}

.map-frame {
  overflow: hidden;
  border-radius: var(--gi-r-md);
  border: 1px solid rgba(7, 27, 51, .10);
  box-shadow: 0 16px 40px rgba(7, 27, 51, .10);
}

.map-frame iframe {
  width: 100%;
  height: clamp(320px, 42vw, 520px);
  border: 0;
  display: block;
}

.footer-cta {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  color: #fff !important;
}

@media (max-width: 991.98px) {
  :root { --gi-nav-h: 70px; }
  .nav-contact-link { justify-content: flex-start; }
  .modal[id^="primerModal"] .modal-dialog,
  #imageModal .modal-dialog {
    width: min(100% - 20px, 920px);
    max-width: min(100% - 20px, 920px);
  }
  .contact-hero-content { grid-template-columns: 1fr; }
  .contact-logo-card { width: min(260px, 100%); min-height: 110px; }
  .map-heading { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 767.98px) {
  :root { --gi-nav-h: 64px; }
  .modal[id^="primerModal"] .modal-dialog,
  #imageModal .modal-dialog {
    width: calc(100% - 14px);
    max-width: calc(100% - 14px);
  }
  .modal[id^="primerModal"] .modal-content,
  #imageModal .modal-content {
    max-height: calc(100vh - 16px);
  }
  .modal[id^="primerModal"] .modal-body {
    max-height: calc(100vh - 155px);
  }
  .modal[id^="primerModal"] .modal-body > img {
    max-height: 240px;
  }
  #imageModal #modalImage { max-height: 68vh !important; }
  .contact-wrapper { padding-left: .75rem; padding-right: .75rem; }
  .corporate-panel { padding: 1.2rem; }
  .contact-hero h1 { font-size: clamp(1.7rem, 8vw, 2.4rem); }
}
.modal-text-block {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}
.modal-text-block p {
  font-size: clamp(.95rem, 1.2vw, 1.04rem);
  line-height: 1.78;
  color: #17304a !important;
}

/* =========================================================
   GAS INFRASTRUKTURA — V7 FIX
   Fiksan header iznad sadržaja, modal ispod headera, javne nabavke
   ========================================================= */
:root {
  --gi-nav-h: 78px;
  --gi-modal-gap: 18px;
}

html {
  scroll-padding-top: calc(var(--gi-nav-h) + 18px) !important;
}

body {
  padding-top: var(--gi-nav-h) !important;
}

/* Header je stalno vidljiv — i pri skrolu i kada je modal otvoren */
.gi-locked-header.navbar,
.navbar.fixed-top {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 1100 !important;
  transform: none !important;
  translate: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

body.modal-open .gi-locked-header.navbar,
body.modal-open .navbar.fixed-top {
  z-index: 1100 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Bootstrap backdrop ne sme da prekrije header */
.modal-backdrop {
  top: var(--gi-nav-h) !important;
  z-index: 1060 !important;
}

.modal-backdrop.show {
  opacity: .52 !important;
}

.modal {
  top: var(--gi-nav-h) !important;
  height: calc(100% - var(--gi-nav-h)) !important;
  z-index: 1080 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.modal-dialog {
  margin-top: var(--gi-modal-gap) !important;
  margin-bottom: var(--gi-modal-gap) !important;
}

.modal-content {
  background: #fff !important;
  color: var(--gi-text) !important;
  border: 1px solid rgba(7, 27, 51, .10) !important;
  box-shadow: 0 28px 90px rgba(7, 27, 51, .25) !important;
}

.modal-header,
.modal-footer {
  background: #fff !important;
  color: var(--gi-text) !important;
}

.modal-title {
  color: var(--gi-navy) !important;
}

.modal[id^="primerModal"] .modal-dialog,
#imageModal .modal-dialog {
  width: min(1080px, calc(100vw - 28px)) !important;
  max-width: min(1080px, calc(100vw - 28px)) !important;
}

.modal[id^="primerModal"] .modal-content,
#imageModal .modal-content {
  max-height: calc(100vh - var(--gi-nav-h) - 36px) !important;
  overflow: hidden !important;
}

.modal[id^="primerModal"] .modal-body {
  display: block !important;
  overflow-y: auto !important;
  max-height: calc(100vh - var(--gi-nav-h) - 170px) !important;
  background: linear-gradient(180deg, #ffffff, #f7fafc) !important;
  color: #18324c !important;
}

.modal[id^="primerModal"] .modal-body > img {
  display: block !important;
  width: auto !important;
  max-width: min(460px, 100%) !important;
  max-height: 360px !important;
  object-fit: contain !important;
}

.modal[id^="primerModal"] .modal-body p,
.modal[id^="primerModal"] .modal-body li,
.modal[id^="primerModal"] .modal-body div {
  color: #18324c !important;
}

#imageModal .modal-body {
  max-height: calc(100vh - var(--gi-nav-h) - 130px) !important;
  overflow: auto !important;
}

#imageModal #modalImage {
  display: block !important;
  max-width: 100% !important;
  max-height: calc(100vh - var(--gi-nav-h) - 170px) !important;
  margin-inline: auto !important;
  object-fit: contain !important;
}

/* Menadžment slike jasno pokazuju da su klikabilne */
.management-img {
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.management-img:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(7, 27, 51, .16);
  filter: saturate(1.04) contrast(1.02);
}

/* Javne nabavke */
.procurement-page {
  padding-bottom: clamp(2rem, 5vw, 5rem);
}

.procurement-hero {
  margin-top: clamp(2rem, 4vw, 3.6rem);
  padding: clamp(2rem, 4vw, 4rem) !important;
  background:
    linear-gradient(135deg, rgba(7, 27, 51, .96), rgba(10, 68, 115, .94)),
    radial-gradient(circle at 90% 10%, rgba(45, 183, 223, .28), transparent 28%) !important;
  color: #fff !important;
  overflow: hidden;
  position: relative;
}

.procurement-hero::after {
  content: "";
  position: absolute;
  right: -90px;
  bottom: -120px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
}

.procurement-hero h1,
.procurement-hero p {
  color: #fff !important;
  position: relative;
  z-index: 1;
}

.procurement-hero h1 {
  font-size: clamp(2.1rem, 5vw, 4.8rem);
  font-weight: 850;
  letter-spacing: -.04em;
  margin: .35rem 0 1rem;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: 'Outfit', sans-serif;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gi-blue);
}

.procurement-hero .eyebrow {
  color: rgba(255,255,255,.78);
}

.procurement-logo-card {
  position: relative;
  z-index: 1;
  background: rgba(255,255,255,.95);
  border-radius: var(--gi-r-lg);
  padding: 1.4rem;
  box-shadow: 0 24px 60px rgba(0,0,0,.22);
  border-left: 5px solid var(--gi-red);
}

.procurement-logo-card img {
  max-width: 220px;
  max-height: 88px;
  object-fit: contain;
  margin-bottom: 1.4rem;
}

.procurement-logo-card strong,
.procurement-logo-card span {
  display: block;
  color: var(--gi-navy);
}

.procurement-logo-card span {
  color: var(--gi-muted);
  margin-top: .25rem;
}

.procurement-stats {
  margin-block: clamp(1.2rem, 3vw, 2rem);
}

.proc-stat-card {
  height: 100%;
  padding: 1.4rem;
  background: #fff;
  border: 1px solid rgba(7, 27, 51, .08);
  border-radius: var(--gi-r-lg);
  box-shadow: 0 12px 32px rgba(7, 27, 51, .07);
  position: relative;
  overflow: hidden;
}

.proc-stat-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, var(--gi-red), var(--gi-blue));
}

.proc-stat-card span {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  color: var(--gi-muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .78rem;
}

.proc-stat-card strong {
  display: block;
  margin-top: .2rem;
  font-family: 'Outfit', sans-serif;
  font-size: clamp(2rem, 4vw, 3.2rem);
  color: var(--gi-navy);
  line-height: 1;
}

.proc-stat-card p { margin: .45rem 0 0; color: var(--gi-muted); }

.procurement-tools .form-control,
.procurement-tools .form-select {
  border-radius: var(--gi-r-sm);
  border: 1px solid rgba(7, 27, 51, .14);
  min-height: 48px;
  box-shadow: none;
}

.procurement-tools .form-control:focus,
.procurement-tools .form-select:focus {
  border-color: var(--gi-blue);
  box-shadow: 0 0 0 4px rgba(0, 95, 174, .12);
}

.proc-actions {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
}

.proc-pill,
.status-badge {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: .35rem .65rem;
  border-radius: var(--gi-r-sm);
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: .78rem;
  letter-spacing: .04em;
}

.proc-pill {
  color: var(--gi-navy);
  background: rgba(0, 95, 174, .08);
}

.procurement-table-wrap {
  overflow-x: auto;
  border: 1px solid rgba(7, 27, 51, .08);
  border-radius: var(--gi-r-lg);
}

.procurement-table {
  margin: 0;
  min-width: 980px;
  background: #fff;
}

.procurement-table thead th {
  background: #f4f7fb;
  color: var(--gi-navy);
  font-family: 'Outfit', sans-serif;
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(7, 27, 51, .10);
}

.procurement-table td,
.procurement-table th {
  padding: 1rem;
}

.status-badge.active {
  color: #0b5a32;
  background: rgba(22, 163, 74, .12);
}

.status-badge.review {
  color: #8a5200;
  background: rgba(245, 158, 11, .16);
}

.document-list {
  display: grid;
  gap: .8rem;
  margin-top: 1.2rem;
}

.document-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid rgba(7, 27, 51, .10);
  border-radius: var(--gi-r-sm);
  background: #fff;
  color: var(--gi-text);
}

.document-row:hover {
  border-color: rgba(0, 95, 174, .35);
  box-shadow: 0 12px 28px rgba(7, 27, 51, .08);
}

.document-row strong {
  color: #fff;
  background: linear-gradient(135deg, var(--gi-red), var(--gi-blue));
  padding: .35rem .55rem;
  border-radius: var(--gi-r-xs);
  font-size: .78rem;
}

.procurement-note-card ul {
  margin: 1rem 0 0 1.15rem;
  color: var(--gi-text);
}

@media (max-width: 991.98px) {
  :root { --gi-nav-h: 70px; }
  .navbar-collapse {
    max-height: calc(100vh - var(--gi-nav-h) - 12px);
    overflow-y: auto;
  }
  .modal[id^="primerModal"] .modal-body {
    max-height: calc(100vh - var(--gi-nav-h) - 155px) !important;
  }
  .procurement-hero { padding: 1.35rem !important; }
  .procurement-logo-card img { max-width: 180px; }
}

@media (max-width: 575.98px) {
  :root { --gi-nav-h: 64px; --gi-modal-gap: 10px; }
  .navbar .container-xl { width: min(100% - .75rem, var(--gi-max)) !important; }
  .modal[id^="primerModal"] .modal-dialog,
  #imageModal .modal-dialog {
    width: min(100vw - 16px, 1080px) !important;
    max-width: min(100vw - 16px, 1080px) !important;
  }
  .modal[id^="primerModal"] .modal-body > img { max-height: 260px !important; }
  .proc-actions { width: 100%; }
  .proc-actions .btn { width: 100%; }
}

/* =========================================================
   GAS INFRASTRUKTURA — V8 FINAL UI FIX
   Full locked header, centered blurred modals, refined news list,
   natural article/gallery images, hover dropdowns, richer button motion.
   ========================================================= */
:root {
  --gi-nav-h: 86px;
  --gi-header-z: 3000;
  --gi-backdrop-z: 4500;
  --gi-modal-z: 4510;
  --gi-r-xs: 3px;
  --gi-r-sm: 5px;
  --gi-r-md: 8px;
  --gi-r-lg: 12px;
  --gi-r-xl: 16px;
}

html {
  scroll-padding-top: calc(var(--gi-nav-h) + 24px) !important;
}

body {
  padding-top: var(--gi-nav-h) !important;
}

body.modal-open {
  padding-right: 0 !important;
  overflow: hidden !important;
}

/* HEADER — uvek vidljiv na vrhu dok se skroluje */
body > nav.navbar,
nav.navbar,
.gi-locked-header.navbar,
.navbar.fixed-top {
  position: fixed !important;
  inset: 0 0 auto 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: var(--gi-nav-h) !important;
  min-height: var(--gi-nav-h) !important;
  z-index: var(--gi-header-z) !important;
  display: flex !important;
  align-items: center !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  translate: none !important;
  background: rgba(255, 255, 255, .985) !important;
  border-bottom: 1px solid rgba(7, 27, 51, .12) !important;
  box-shadow: 0 14px 38px rgba(7, 27, 51, .105) !important;
  isolation: isolate;
}

nav.navbar.shrink,
.gi-locked-header.navbar.shrink,
.navbar.fixed-top.shrink {
  height: 74px !important;
  min-height: 74px !important;
}

.navbar .container-xl {
  min-height: 100%;
}

.navbar-brand img {
  max-height: 58px !important;
  transition: transform .24s ease, max-height .24s ease, filter .24s ease;
}
.navbar.shrink .navbar-brand img { max-height: 50px !important; }
.navbar-brand:hover img { transform: translateY(-1px) scale(1.015); }

/* Padajući meni otvara se na hover/focus na desktopu, klik ostaje za telefon */
@media (min-width: 992px) {
  .navbar .dropdown:hover > .dropdown-menu,
  .navbar .dropdown:focus-within > .dropdown-menu,
  .navbar .dropdown.show > .dropdown-menu {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
  }

  .navbar .dropdown-menu {
    display: block;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    margin-top: 0 !important;
    transform: translateY(10px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  }

  .navbar .dropdown:hover > .nav-link,
  .navbar .dropdown:focus-within > .nav-link {
    color: var(--gi-blue) !important;
    background: rgba(0, 95, 174, .055) !important;
  }
}

/* Dugmad — jača mikro animacija */
.btn,
.btn-sps,
button,
.nav-contact-link,
.pagination-modern a,
.pagination-modern strong {
  transition: transform .18s cubic-bezier(.16,1,.3,1), box-shadow .18s ease, background .22s ease, border-color .22s ease, color .22s ease !important;
}

.btn:hover,
.btn-sps:hover,
.nav-contact-link:hover,
.pagination-modern a:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 16px 34px rgba(0, 95, 174, .24) !important;
}

.btn:active,
.btn-sps:active,
.nav-contact-link:active,
.pagination-modern a:active {
  transform: translateY(-1px) scale(.985) !important;
}

.btn::after,
.btn-sps::after,
.nav-contact-link::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgba(255,255,255,.34), transparent 32%);
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}
.btn:hover::after,
.btn-sps:hover::after,
.nav-contact-link:hover::before { opacity: 1; }

/* MODALI — centrirani uvek, pozadina blurovana preko celog ekrana */
.modal-backdrop,
.modal-backdrop.show {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: var(--gi-backdrop-z) !important;
  background: rgba(4, 15, 29, .56) !important;
  opacity: 1 !important;
  backdrop-filter: blur(12px) saturate(128%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(128%) !important;
}

.modal {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: var(--gi-modal-z) !important;
  padding: 0 !important;
  overflow: hidden auto !important;
  outline: 0 !important;
}

.modal.show {
  display: block !important;
}

.modal-dialog,
.modal-dialog-centered,
.modal[id^="primerModal"] .modal-dialog,
#imageModal .modal-dialog,
.image-viewer-modal .modal-dialog {
  width: min(1080px, calc(100vw - 32px)) !important;
  max-width: min(1080px, calc(100vw - 32px)) !important;
  min-height: calc(100vh - 32px) !important;
  margin: 16px auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transform: none !important;
}

.modal.fade .modal-dialog {
  transition: opacity .24s cubic-bezier(.16,1,.3,1), transform .24s cubic-bezier(.16,1,.3,1) !important;
  opacity: 0;
  transform: translateY(18px) scale(.985) !important;
}
.modal.show .modal-dialog {
  opacity: 1;
  transform: translateY(0) scale(1) !important;
}

.modal-content,
.modal[id^="primerModal"] .modal-content,
#imageModal .modal-content,
.image-viewer-modal .modal-content {
  width: 100% !important;
  max-height: calc(100vh - 48px) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border-radius: var(--gi-r-lg) !important;
  background: rgba(255,255,255,.985) !important;
  color: var(--gi-text) !important;
  border: 1px solid rgba(255,255,255,.82) !important;
  box-shadow: 0 34px 120px rgba(0, 0, 0, .34) !important;
}

.modal-header,
.modal-footer {
  flex: 0 0 auto !important;
  background: linear-gradient(180deg, #ffffff, #f7fafe) !important;
}

.modal-body,
.modal[id^="primerModal"] .modal-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: auto !important;
  max-height: calc(100vh - 178px) !important;
  background: #fff !important;
  color: #17304a !important;
}

.modal[id^="primerModal"] .modal-body > img,
.modal[id^="primerModal"] .modal-body img {
  display: block !important;
  width: auto !important;
  max-width: min(100%, 460px) !important;
  max-height: min(42vh, 380px) !important;
  object-fit: contain !important;
  object-position: center !important;
  margin: 0 auto 1.2rem !important;
  background: #f4f7fb !important;
  border-radius: var(--gi-r-md) !important;
}

/* Modal za galerijske slike — slika uvek cela i centrirana */
#imageModal .modal-dialog,
.image-viewer-modal .modal-dialog {
  width: min(1180px, calc(100vw - 32px)) !important;
  max-width: min(1180px, calc(100vw - 32px)) !important;
}

#imageModal .modal-body,
.image-viewer-modal .modal-body {
  min-height: min(72vh, 740px) !important;
  max-height: calc(100vh - 124px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: clamp(.7rem, 2vw, 1.4rem) !important;
  overflow: auto !important;
  background: radial-gradient(circle at 50% 0%, #ffffff 0%, #eef4fa 100%) !important;
}

#imageModal #modalImage,
.image-viewer-modal #modalImage {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: calc(100vh - 170px) !important;
  object-fit: contain !important;
  object-position: center !important;
  margin: auto !important;
  border-radius: var(--gi-r-md) !important;
  background: #fff !important;
  box-shadow: 0 22px 60px rgba(7, 27, 51, .18) !important;
}

/* Stranica svih vesti/radova/obaveštenja — korektan grid, bez ogromnih praznina */
.news-list-item.row,
.news-list-item {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr) !important;
  gap: 0 !important;
  align-items: stretch !important;
  margin: 0 0 1.35rem 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #fff !important;
  border-radius: var(--gi-r-lg) !important;
  border: 1px solid rgba(7, 27, 51, .085) !important;
  box-shadow: 0 12px 34px rgba(7, 27, 51, .07) !important;
}

.news-list-item.row > [class*="col-"],
.news-list-item > [class*="col-"] {
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
}

.news-list-item.row > [class*="col-"]:first-child,
.news-list-item > [class*="col-"]:first-child {
  min-height: 230px;
  background: #f2f6fa;
}

.news-list-img,
.news-list-item .news-list-img {
  width: 100% !important;
  height: 100% !important;
  min-height: 230px !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.news-list-item.row > [class*="col-"]:nth-child(2),
.news-list-item > [class*="col-"]:nth-child(2) {
  min-height: 230px;
  padding: clamp(1.2rem, 2.4vw, 2rem) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.news-list-item h5 {
  margin: 0 0 .55rem !important;
  color: var(--gi-navy) !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: clamp(1.08rem, 1.5vw, 1.35rem) !important;
  line-height: 1.22 !important;
  text-align: left !important;
}

.news-list-item p {
  margin-bottom: .65rem !important;
}

.news-list-item .card-text {
  max-width: 1080px;
  color: #516981 !important;
}

.news-list-item .text-end {
  margin-top: .9rem !important;
  text-align: right !important;
}

/* Detaljna vest — glavna slika ne sme biti odsečena */
.content-section .card > .card-img-top,
.article-main-image {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center !important;
  background: #f2f6fa !important;
  border-radius: var(--gi-r-lg) var(--gi-r-lg) 0 0 !important;
  transform: none !important;
}

.content-section .card:hover > .card-img-top,
.content-section .card:hover .article-main-image {
  transform: none !important;
}

.article-detail-card {
  overflow: hidden;
}

.article-detail-card .card-body {
  padding: clamp(1.2rem, 2.5vw, 2.2rem) !important;
}

.article-detail-card .card-title {
  font-size: clamp(1.25rem, 2.3vw, 2rem) !important;
  line-height: 1.22;
}

.card-date {
  color: var(--gi-muted) !important;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
}

/* Galerija — thumbnails su prirodne, bez odsecanja */
.galerija .gallery-thumb,
.galerija img.clickable,
.galerija img {
  width: 100% !important;
  height: clamp(260px, 30vw, 420px) !important;
  object-fit: contain !important;
  object-position: center !important;
  padding: .35rem !important;
  border: 1px solid rgba(7, 27, 51, .10) !important;
  background: linear-gradient(180deg, #fff, #f3f7fb) !important;
  border-radius: var(--gi-r-md) !important;
  cursor: zoom-in !important;
}

.galerija img:hover {
  transform: translateY(-3px) scale(1.01) !important;
}

@media (max-width: 991.98px) {
  :root { --gi-nav-h: 76px; }
  nav.navbar,
  .gi-locked-header.navbar,
  .navbar.fixed-top {
    height: var(--gi-nav-h) !important;
    min-height: var(--gi-nav-h) !important;
  }
  .news-list-item.row,
  .news-list-item {
    grid-template-columns: 1fr !important;
  }
  .news-list-item.row > [class*="col-"]:first-child,
  .news-list-item > [class*="col-"]:first-child,
  .news-list-img,
  .news-list-item .news-list-img {
    min-height: 220px !important;
    height: 220px !important;
  }
}

@media (max-width: 575.98px) {
  :root { --gi-nav-h: 68px; }
  .navbar-brand img { max-height: 44px !important; }
  nav.navbar.shrink,
  .gi-locked-header.navbar.shrink,
  .navbar.fixed-top.shrink {
    height: var(--gi-nav-h) !important;
    min-height: var(--gi-nav-h) !important;
  }
  .modal-dialog,
  .modal-dialog-centered,
  .modal[id^="primerModal"] .modal-dialog,
  #imageModal .modal-dialog,
  .image-viewer-modal .modal-dialog {
    width: calc(100vw - 14px) !important;
    max-width: calc(100vw - 14px) !important;
    min-height: calc(100vh - 14px) !important;
    margin: 7px auto !important;
  }
  .modal-content,
  .modal[id^="primerModal"] .modal-content,
  #imageModal .modal-content,
  .image-viewer-modal .modal-content {
    max-height: calc(100vh - 14px) !important;
  }
  .modal-body,
  .modal[id^="primerModal"] .modal-body {
    max-height: calc(100vh - 150px) !important;
  }
  #imageModal #modalImage,
  .image-viewer-modal #modalImage {
    max-height: calc(100vh - 142px) !important;
  }
  .news-list-item.row > [class*="col-"]:first-child,
  .news-list-item > [class*="col-"]:first-child,
  .news-list-img,
  .news-list-item .news-list-img {
    min-height: 190px !important;
    height: 190px !important;
  }
  .news-list-item.row > [class*="col-"]:nth-child(2),
  .news-list-item > [class*="col-"]:nth-child(2) {
    padding: 1rem !important;
  }
}

/* V8: dedicated archive layout */
.news-archive-page {
  padding-top: clamp(2.4rem, 4vw, 4.2rem) !important;
}
.news-archive-header {
  max-width: 920px;
  margin: 0 auto clamp(1.8rem, 3vw, 3rem);
}
.news-archive-intro {
  color: var(--gi-muted);
  margin: 0 auto;
}
.news-archive-list {
  display: grid;
  gap: 1.35rem;
}
.news-archive-card {
  grid-template-columns: minmax(300px, 390px) minmax(0, 1fr) !important;
}
.news-archive-image-link {
  display: block;
  height: 100%;
  min-height: 260px;
  overflow: hidden;
  background: #eef4fa;
}
.news-archive-image-link img {
  transition: transform .42s cubic-bezier(.16,1,.3,1), filter .22s ease;
}
.news-archive-card:hover .news-archive-image-link img {
  transform: scale(1.045);
  filter: saturate(1.05) contrast(1.03);
}
.news-archive-content {
  padding: clamp(1.35rem, 2.6vw, 2.25rem) !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.news-date {
  display: inline-flex;
  width: fit-content;
  margin-bottom: .7rem;
  padding: .32rem .65rem;
  border-left: 3px solid var(--gi-red);
  background: rgba(0, 95, 174, .065);
  color: var(--gi-navy);
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: .86rem;
}
.news-archive-content h5 a {
  color: var(--gi-navy) !important;
  text-decoration: none !important;
}
.news-archive-content h5 a:hover {
  color: var(--gi-blue) !important;
}
.news-actions {
  margin-top: .95rem;
  display: flex;
  justify-content: flex-end;
}
@media (max-width: 991.98px) {
  .news-archive-card { grid-template-columns: 1fr !important; }
  .news-archive-image-link { min-height: 220px; height: 220px; }
}

/* =========================================================
   GAS INFRASTRUKTURA — V9 STICKY HEADER + MODAL NO-JUMP FIX
   Ključna ispravka: uklonjen transform nad body/fade animacijom jer
   transformisani ancestor može da pokvari position: fixed u browseru.
   ========================================================= */
:root {
  --gi-nav-h: 88px !important;
  --gi-header-z: 7000 !important;
  --gi-backdrop-z: 7100 !important;
  --gi-modal-z: 7200 !important;
  --gi-r-sm: 5px !important;
  --gi-r-md: 8px !important;
  --gi-r-lg: 12px !important;
}

html {
  scroll-padding-top: calc(var(--gi-nav-h) + 18px) !important;
  overflow-x: hidden !important;
}

html, body {
  transform: none !important;
  translate: none !important;
  filter: none;
}

body {
  padding-top: var(--gi-nav-h) !important;
  overflow-x: hidden !important;
}

/* Ne animirati body kroz transform — to je glavni razlog što fixed header ume da nestane. */
.fade-in-page {
  animation: giFadeOnly .28s ease both !important;
  transform: none !important;
}
@keyframes giFadeOnly {
  from { opacity: 0; }
  to { opacity: 1; }
}
body.page-leaving {
  opacity: .45 !important;
  transform: none !important;
  filter: none !important;
}

/* Header: uvek fixed na viewport, iznad sadržaja, bez roditeljskog transform problema. */
body > nav.navbar,
nav.navbar,
.gi-locked-header.navbar,
.navbar.fixed-top {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  width: 100vw !important;
  height: var(--gi-nav-h) !important;
  min-height: var(--gi-nav-h) !important;
  z-index: var(--gi-header-z) !important;
  display: flex !important;
  align-items: center !important;
  transform: none !important;
  translate: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  background: rgba(255,255,255,.985) !important;
  backdrop-filter: blur(20px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
  border-top: 4px solid transparent !important;
  border-image: linear-gradient(90deg, var(--gi-red), var(--gi-blue), var(--gi-cyan)) 1 !important;
  border-bottom: 1px solid rgba(7,27,51,.12) !important;
  box-shadow: 0 10px 34px rgba(6,21,35,.12) !important;
  will-change: auto !important;
}

nav.navbar.shrink,
.gi-locked-header.navbar.shrink,
.navbar.fixed-top.shrink {
  height: 76px !important;
  min-height: 76px !important;
}

.navbar .container-xl {
  width: min(100% - 2rem, 1680px) !important;
  max-width: 1680px !important;
  min-height: 100% !important;
}
.navbar-brand img { max-height: 58px !important; }
.navbar.shrink .navbar-brand img { max-height: 50px !important; }

/* Dropdown na hover za desktop, ali klik i dalje radi na telefonu. */
@media (min-width: 992px) {
  .navbar .dropdown:hover > .dropdown-menu,
  .navbar .dropdown:focus-within > .dropdown-menu,
  .navbar .dropdown.show > .dropdown-menu {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translate3d(0, 0, 0) !important;
    pointer-events: auto !important;
  }
  .navbar .dropdown-menu {
    display: block !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translate3d(0, 12px, 0) !important;
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease !important;
  }
}

/* Modal/backdrop: pozadina blurovana, prozor uvek u centru viewporta. */
body.modal-open {
  padding-right: 0 !important;
  overflow: hidden !important;
}

.modal-backdrop,
.modal-backdrop.show {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: var(--gi-backdrop-z) !important;
  background: rgba(3, 12, 24, .58) !important;
  opacity: 1 !important;
  backdrop-filter: blur(14px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(120%) !important;
}

.modal {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: var(--gi-modal-z) !important;
  padding: 16px !important;
  overflow: hidden !important;
  align-items: center !important;
  justify-content: center !important;
  outline: 0 !important;
}
.modal.show {
  display: flex !important;
}

.modal-dialog,
.modal-dialog-centered,
.modal[id^="primerModal"] .modal-dialog,
#imageModal .modal-dialog,
.image-viewer-modal .modal-dialog {
  width: min(1100px, calc(100vw - 32px)) !important;
  max-width: min(1100px, calc(100vw - 32px)) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: calc(100vh - 32px) !important;
  margin: auto !important;
  display: block !important;
  transform: none !important;
}
.modal.fade .modal-dialog {
  transition: opacity .24s cubic-bezier(.16,1,.3,1), transform .24s cubic-bezier(.16,1,.3,1) !important;
  opacity: 0;
  transform: translate3d(0, 18px, 0) scale(.985) !important;
}
.modal.show .modal-dialog {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
}

.modal-content,
.modal[id^="primerModal"] .modal-content,
#imageModal .modal-content,
.image-viewer-modal .modal-content {
  width: 100% !important;
  max-height: calc(100vh - 36px) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border-radius: var(--gi-r-lg) !important;
  background: rgba(255,255,255,.99) !important;
  color: var(--gi-text) !important;
  border: 1px solid rgba(255,255,255,.85) !important;
  box-shadow: 0 34px 110px rgba(0,0,0,.34) !important;
}

.modal-header,
.modal-footer {
  flex: 0 0 auto !important;
  background: linear-gradient(180deg, #fff, #f6f9fd) !important;
}
.modal-body,
.modal[id^="primerModal"] .modal-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: calc(100vh - 156px) !important;
  overflow: auto !important;
  color: #17304a !important;
  background: #fff !important;
}

.modal[id^="primerModal"] .modal-body > img,
.modal[id^="primerModal"] .modal-body img {
  display: block !important;
  width: auto !important;
  max-width: min(100%, 460px) !important;
  max-height: min(38vh, 360px) !important;
  height: auto !important;
  object-fit: contain !important;
  object-position: center !important;
  margin: 0 auto 1.2rem !important;
  border-radius: var(--gi-r-md) !important;
  background: #f2f6fa !important;
}

/* Galerijski modal: slika cela, bez sečenja, u centru. */
#imageModal .modal-dialog,
.image-viewer-modal .modal-dialog {
  width: min(1220px, calc(100vw - 32px)) !important;
  max-width: min(1220px, calc(100vw - 32px)) !important;
}
#imageModal .modal-body,
.image-viewer-modal .modal-body {
  min-height: min(76vh, 760px) !important;
  max-height: calc(100vh - 116px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: clamp(.75rem, 2vw, 1.5rem) !important;
  overflow: auto !important;
  background: radial-gradient(circle at 50% 0%, #fff 0%, #eef4fa 100%) !important;
}
#imageModal #modalImage,
.image-viewer-modal #modalImage {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: calc(100vh - 164px) !important;
  object-fit: contain !important;
  object-position: center !important;
  margin: auto !important;
  border-radius: var(--gi-r-md) !important;
}

/* Vesti — uredniji i stabilniji raspored. */
.news-archive-page {
  width: min(100% - 2rem, 1680px) !important;
  max-width: 1680px !important;
  margin-top: clamp(2rem, 4vw, 4rem) !important;
  padding: clamp(1.4rem, 3vw, 3.2rem) !important;
}
.news-archive-header {
  max-width: 900px !important;
  margin: 0 auto clamp(1.4rem, 3vw, 2.4rem) !important;
}
.news-archive-list {
  display: grid !important;
  gap: 1.25rem !important;
}
.news-list-item.news-archive-card,
.news-list-item.row,
.news-list-item {
  display: grid !important;
  grid-template-columns: minmax(320px, 460px) minmax(0, 1fr) !important;
  gap: 0 !important;
  align-items: stretch !important;
  min-height: 285px !important;
  background: #fff !important;
  border-radius: var(--gi-r-lg) !important;
  overflow: hidden !important;
  border: 1px solid rgba(7,27,51,.09) !important;
  box-shadow: 0 16px 42px rgba(7,27,51,.08) !important;
}
.news-archive-image-link {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 285px !important;
  background: #eef4fa !important;
  overflow: hidden !important;
}
.news-list-img,
.news-list-item .news-list-img {
  width: 100% !important;
  height: 100% !important;
  min-height: 285px !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 0 !important;
}
.news-archive-content {
  padding: clamp(1.25rem, 2.8vw, 2.5rem) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}
.news-actions { margin-top: 1rem !important; }

/* Detalj vesti — glavna slika i galerija nisu sečene. */
.article-detail-card > .article-main-image,
.content-section .card > .card-img-top.article-main-image,
.content-section .card > .card-img-top {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center !important;
  background: #f2f6fa !important;
  border-radius: var(--gi-r-lg) var(--gi-r-lg) 0 0 !important;
}
.galerija .gallery-thumb,
.gallery-thumb,
.clickable.gallery-thumb {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center !important;
  background: #f2f6fa !important;
  cursor: zoom-in !important;
}

/* Animacije dugmadi — poslovno, bez preterivanja. */
.btn,
.btn-sps,
.nav-contact-link,
button[type="submit"] {
  position: relative !important;
  overflow: hidden !important;
  transition: transform .18s cubic-bezier(.16,1,.3,1), box-shadow .18s ease, background .22s ease, border-color .22s ease !important;
}
.btn:hover,
.btn-sps:hover,
.nav-contact-link:hover,
button[type="submit"]:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 16px 34px rgba(0,95,174,.24) !important;
}
.btn:active,
.btn-sps:active,
.nav-contact-link:active,
button[type="submit"]:active {
  transform: translateY(-1px) scale(.985) !important;
}

@media (max-width: 991.98px) {
  :root { --gi-nav-h: 74px !important; }
  body > nav.navbar,
  nav.navbar,
  .gi-locked-header.navbar,
  .navbar.fixed-top {
    height: var(--gi-nav-h) !important;
    min-height: var(--gi-nav-h) !important;
  }
  .navbar-brand img { max-height: 46px !important; }
  .navbar-collapse {
    position: absolute !important;
    top: var(--gi-nav-h) !important;
    left: .75rem !important;
    right: .75rem !important;
    z-index: calc(var(--gi-header-z) + 2) !important;
    background: rgba(255,255,255,.98) !important;
    border: 1px solid rgba(7,27,51,.10) !important;
    border-radius: 0 0 var(--gi-r-lg) var(--gi-r-lg) !important;
    box-shadow: 0 20px 54px rgba(7,27,51,.18) !important;
    padding: .65rem !important;
  }
  .news-list-item.news-archive-card,
  .news-list-item.row,
  .news-list-item {
    grid-template-columns: 1fr !important;
  }
  .news-archive-image-link,
  .news-list-img,
  .news-list-item .news-list-img {
    min-height: 220px !important;
    height: auto !important;
  }
  .news-list-img,
  .news-list-item .news-list-img { aspect-ratio: 16 / 9 !important; }
  .modal { padding: 10px !important; }
  .modal-dialog,
  .modal-dialog-centered,
  .modal[id^="primerModal"] .modal-dialog,
  #imageModal .modal-dialog,
  .image-viewer-modal .modal-dialog {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
  }
  .modal-body,
  .modal[id^="primerModal"] .modal-body { max-height: calc(100vh - 146px) !important; }
}


/* =========================================================
   GAS INFRASTRUKTURA — V10 MODAL CENTER FIX
   Rešenje za organizacionu strukturu: modali se JS-om premeštaju pod body,
   a CSS ispod sprečava da transform/reveal kontejnera utiče na popup.
   ========================================================= */
body.modal-open .content-section,
body.modal-open .content-section.is-visible,
body.modal-open .card,
body.modal-open .card.is-visible {
  transform: none !important;
}

body > .modal {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  padding: 16px !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  z-index: var(--gi-modal-z) !important;
}

body > .modal.show {
  display: flex !important;
}

body > .modal .modal-dialog,
body > .modal.modal[id^="primerModal"] .modal-dialog,
body > #imageModal .modal-dialog {
  position: relative !important;
  margin: 0 auto !important;
  width: min(1100px, calc(100vw - 32px)) !important;
  max-width: min(1100px, calc(100vw - 32px)) !important;
  max-height: calc(100vh - 32px) !important;
  min-height: 0 !important;
  height: auto !important;
  transform: none !important;
  pointer-events: auto !important;
}

body > .modal.fade .modal-dialog {
  opacity: 0 !important;
  transform: translate3d(0, 16px, 0) scale(.985) !important;
}

body > .modal.show .modal-dialog {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
}

body > .modal .modal-content {
  max-height: calc(100vh - 36px) !important;
}

body > .modal.modal[id^="primerModal"] .modal-body {
  max-height: calc(100vh - 156px) !important;
  overflow: auto !important;
}

body > .modal.modal[id^="primerModal"] .modal-body img {
  max-width: min(100%, 460px) !important;
  max-height: min(38vh, 360px) !important;
  object-fit: contain !important;
}

body > #imageModal .modal-dialog {
  width: min(1220px, calc(100vw - 32px)) !important;
  max-width: min(1220px, calc(100vw - 32px)) !important;
}

@media (max-width: 991.98px) {
  body > .modal { padding: 10px !important; }
  body > .modal .modal-dialog,
  body > .modal.modal[id^="primerModal"] .modal-dialog,
  body > #imageModal .modal-dialog {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
  }
}
/* === GLOBALNA BOJA NASLOVA === */
h1, h2, h3, h4, h5, h6,
.gi-section-title,
.vesti-title,
.page-title,
.page-title-sm,
.card-title,
.news-list-item h5,
.modal-title,
.contact-info-panel h2,
.corporate-panel h2,
.map-heading {
  color: #005fae !important;
}
.gi-section-title::after,
.vesti-title::after,
.page-title::after {
  background: #005fae !important;
}


/* =========================================================
   HOTFIX — MOBILE NEWS CONTENT VISIBILITY
   Sprečava da reveal animacija sakrije vesti na telefonu ako IntersectionObserver
   ili neki JS dodatak ne aktivira .is-visible klasu na vreme.
   ========================================================= */
@media (max-width: 767.98px) {
  body.reveal-ready .news-list-item,
  body.reveal-ready .news-list-item.is-visible,
  body.reveal-ready .content-section,
  body.reveal-ready .content-section.is-visible,
  body.reveal-ready .card,
  body.reveal-ready .card.is-visible,
  body.reveal-ready .quick-link-card,
  body.reveal-ready .quick-link-card.is-visible,
  body.reveal-ready .proc-card,
  body.reveal-ready .proc-card.is-visible {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    filter: none !important;
  }

  .news-archive-page,
  .vesti-page,
  main.container,
  main.container-xl {
    min-height: auto !important;
  }

  .news-archive-list,
  .news-list-wrapper,
  .content-section {
    display: block !important;
    visibility: visible !important;
  }

  .news-list-item,
  .news-list-item.row,
  .news-archive-card {
    display: grid !important;
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }

  .news-list-item > [class*="col-"] {
    display: block !important;
    visibility: visible !important;
  }
}

/* V11 priority layer: mora ostati poslednji zbog starijih V5–V10 override blokova. */
body {
  padding-top: var(--gi-header-total) !important;
}

body > nav.navbar,
nav.navbar,
.gi-locked-header.navbar,
.navbar.fixed-top {
  width: 100% !important;
  height: var(--gi-header-total) !important;
  min-height: var(--gi-header-total) !important;
  padding-top: var(--gi-safe-top) !important;
}

nav.navbar.shrink,
.gi-locked-header.navbar.shrink,
.navbar.fixed-top.shrink {
  height: max(62px, calc(var(--gi-header-total) - 12px)) !important;
  min-height: max(62px, calc(var(--gi-header-total) - 12px)) !important;
}

#heroCarousel,
#heroCarousel .carousel-inner,
#heroCarousel .carousel-item {
  height: calc(100vh - var(--gi-header-total)) !important;
  min-height: 480px !important;
}

@supports (height: 100svh) {
  #heroCarousel,
  #heroCarousel .carousel-inner,
  #heroCarousel .carousel-item {
    height: calc(100svh - var(--gi-header-total)) !important;
  }
}

#heroCarousel.carousel-fade .carousel-item {
  opacity: 0;
  transform: none !important;
  transition: opacity 1.05s cubic-bezier(.45, 0, .25, 1) !important;
}

#heroCarousel.carousel-fade .carousel-item.active,
#heroCarousel.carousel-fade .carousel-item-next.carousel-item-start,
#heroCarousel.carousel-fade .carousel-item-prev.carousel-item-end {
  opacity: 1;
}

#heroCarousel.carousel-fade .active.carousel-item-start,
#heroCarousel.carousel-fade .active.carousel-item-end {
  opacity: 0 !important;
}

@media (max-width: 991.98px) {
  .navbar-collapse {
    top: var(--gi-header-total) !important;
    max-height: calc(100vh - var(--gi-header-total)) !important;
  }

  @supports (height: 100svh) {
    .navbar-collapse { max-height: calc(100svh - var(--gi-header-total)) !important; }
  }
}

@media (max-width: 767.98px) {
  #heroCarousel,
  #heroCarousel .carousel-inner,
  #heroCarousel .carousel-item {
    min-height: 440px !important;
  }
}

@media (max-width: 420px) {
  #heroCarousel,
  #heroCarousel .carousel-inner,
  #heroCarousel .carousel-item {
    min-height: 410px !important;
  }
}

@media (orientation: landscape) and (max-height: 560px) {
  #heroCarousel,
  #heroCarousel .carousel-inner,
  #heroCarousel .carousel-item {
    min-height: 420px !important;
    height: 420px !important;
  }
}

/* =========================================================
   GAS INFRASTRUKTURA — V12 SIMPLE FADE
   Samo opacity fade. Bez zoom-a, pomeranja, blur-a, tamnog
   prelaznog sloja i bez drugih automatskih hero animacija.
   Ovaj blok mora ostati poslednji u fajlu.
   ========================================================= */
#heroCarousel {
  contain: paint;
}

#heroCarousel .glass-transition-layer,
#heroCarousel::after {
  display: none !important;
  animation: none !important;
}

#heroCarousel.carousel-fade .carousel-item {
  opacity: 0;
  transform: none !important;
  filter: none !important;
  transition: opacity .82s ease-in-out !important;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: opacity;
}

#heroCarousel.carousel-fade .carousel-item.active,
#heroCarousel.carousel-fade .carousel-item-next.carousel-item-start,
#heroCarousel.carousel-fade .carousel-item-prev.carousel-item-end {
  opacity: 1;
}

#heroCarousel.carousel-fade .active.carousel-item-start,
#heroCarousel.carousel-fade .active.carousel-item-end {
  opacity: 0 !important;
}

#heroCarousel .carousel-item img,
#heroCarousel .carousel-item.active img {
  animation: none !important;
  transition: none !important;
  transform: none !important;
  filter: none !important;
  will-change: auto !important;
}

#heroCarousel .hero-content,
#heroCarousel .carousel-item.active .hero-content {
  opacity: 0;
  animation: none !important;
  transform: none !important;
  filter: none !important;
  transition: opacity .48s ease !important;
  will-change: opacity;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(6,21,35,.72) !important;
}

#heroCarousel .carousel-item.active:not(.carousel-item-start):not(.carousel-item-end) .hero-content {
  opacity: 1;
}

#heroCarousel .hero-content h1,
#heroCarousel .carousel-item.active .hero-content h1,
#heroCarousel .hero-lead,
#heroCarousel .carousel-item.active .hero-lead {
  opacity: 1 !important;
  animation: none !important;
  transform: none !important;
  filter: none !important;
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  #heroCarousel.carousel-fade .carousel-item,
  #heroCarousel .hero-content {
    transition-duration: .01ms !important;
  }
}
.organization-card-heading {
  position: relative;
  justify-content: center;
}

.organization-card-heading .organization-index {
  position: absolute;
  left: 1.25rem;
}

.organization-card-heading h2 {
  width: 100%;
  text-align: center;
}