/* ============================================================
   Naprijed — kandidat onepager
   Hero = WebGL depth pozadina (codrops stil) + kandidat + 3 thumbnaile
   ============================================================ */

*,*::after,*::before { box-sizing: border-box; }

:root {
  --yellow: #ffd400;
  --yellow-deep: #f5c400;
  --ink: #111111;
  --blue-1: #16307a;
  --blue-2: #3f6fe0;
  --blue-soft: #c9dcff;
  --paper: #f6f4ee;
  --pad: clamp(1.1rem, 4vw, 3rem);
}

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Ubuntu", sans-serif;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* ============================================================
   HERO (WebGL pozadina)
   ============================================================ */
.hero {
  position: relative;
  height: 100vh;
  background: #0d1733;
  overflow: hidden;
  isolation: isolate;
  color: #f4f4f4;
}
.hero__bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(120% 90% at 85% 10%, rgba(63,111,224,.25), transparent 55%),
    linear-gradient(180deg, #0d1733 0%, #0a1024 100%);
}
.hero__webgl {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  pointer-events: none;
}

.hero__nav {
  position: relative; z-index: 3;
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
  padding: 0 var(--pad) 0;
}

.hero__brand { 
  display: flex; 
  align-items: center; 
  gap: .6rem; 
  padding-top: var(--pad);
}

.hero__brand-logo { height: 192px; width: auto; }
.hero__brand-word {
  font-family: var(--font-display);
  font-style: italic; font-weight: 900; font-size: 1.5rem;
  letter-spacing: -.01em; transform: skewX(-7deg); color: var(--ink);
}
.hero__menu {
  list-style: none;
  display: flex;
  gap: 0;
  margin: .4rem 0 0;
  padding: 0;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.15rem;
  background: rgba(255,255,255,.06); 
}
.hero__menu a {
  transition: all .2s ease;
  padding: .8rem 1rem;
  cursor: pointer;
  color: #fff;
  background: var(--blue-1);
  text-align: center;
  transition: border-color .25s ease, background .25s ease, transform .25s ease;
  backdrop-filter: blur(6px);
}
.hero__menu a:hover { 
  background: #fff;
  color: #16307a;
}
.hero__burger { display: none; }

/* hamburger (samo mobilni, vidi se u @media ispod) */
.hero__burger {
  appearance: none; 
  border: solid 1px var(--yellow); 
  background: var(--blue-1); cursor: pointer;
  width: 48px; height: 48px; padding: 12px;
  display: none; flex-direction: column; justify-content: space-between;
}
.hero__burger span {
  display: block; height: 4px; width: 100%; background: #fff;
  transform-origin: center;
  transition: transform .3s ease, opacity .2s ease;
}
.hero__burger.is-open span:nth-child(1) { transform: translateY(10px) rotate(45deg); }
.hero__burger.is-open span:nth-child(2) { opacity: 0; }
.hero__burger.is-open span:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }

.hero__menu a .mi {
  width: 32px; height: 32px; margin-right: .45rem;
  vertical-align: -10px; flex: none;
  color: #fc0;
}

.hero__grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.15fr .85fr;
  align-items: end;
  gap: 1rem;
  height: 100%;
  padding: 0 var(--pad);
}

.hero__text { 
  align-self: center; 
  max-width: 60rem; 
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(6px);
  padding: 32px 40px;
  border: 1px solid rgba(255,255,255,.14);
}

.hero__headline {
  font-family: var(--font-display);
  font-weight: 900;
  color: #f6f6f6;
  font-size: clamp(1.9rem, 4.6vw, 4.1rem);
  line-height: 1;
  letter-spacing: -.02em;
  margin: 0 0 1rem 0;
}

.hero__cta { width: min(420px, 80%); }
.hero__cta-img {
  width: 100%; height: auto; 
  box-shadow: 0 18px 40px -18px rgba(20,30,80,.55);
}

.hero__ig {
  display: inline-flex; align-items: center; gap: .55rem;
  margin-top: 1.4rem; color: #f4f4f4;
}
.hero__ig-icon { width: 30px; height: 30px; }
.hero__ig span { font-size: 1.05rem; }
.hero__ig strong { font-weight: 800; }

.hero__portrait {
  position: absolute;
  right: 0; bottom: 0;
  z-index: 2;
  height: 100%;
  display: flex; align-items: flex-end; justify-content: flex-end;
  pointer-events: none;
}
.hero__candidate {
  height: 100%; width: auto;
  object-fit: contain; object-position: bottom center;
  filter: drop-shadow(0 25px 35px rgba(0,0,0,.45));
}
.hero__thumbs {
  position: absolute; z-index: 3;
  right: var(--pad); bottom: clamp(1.2rem, 4vh, 2.5rem);
  display: flex; gap: clamp(.7rem, 2vw, 1.4rem); flex-wrap: wrap;
  justify-content: flex-start;
  max-width: 60%;
}
.thumb {
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  padding: .6rem 0 .5rem;
  cursor: pointer; color: #f4f4f4; text-align: center;
  transition: border-color .25s ease, background .25s ease, transform .25s ease;
  backdrop-filter: blur(6px);
  min-width: 192px;
}
.thumb img {
  height: clamp(32px, 14vh, 128px); 
  width: auto; 
  object-fit: contain;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.4));
}
.thumb__name {
  font-size: 1rem;
  letter-spacing: .05em;
  line-height: 1.1;
  background: var(--blue-1);
  padding: 8px 14px 9px;
  color: #fff;
  position: relative;
  top: -5px;
  display: block;
  width: 100%;
}

.thumb__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-style: italic;
  font-size: 14px;
  color: #ffca00;
  position: absolute;
  right: 8px;
  top: 4px;
  text-shadow: 0 0 2px rgba(0,0,0,.85);
}

.thumb:hover { border-color: rgba(255,212,0,.5); }
.thumb.is-active {
  border-color: var(--yellow);
  background: rgba(255,212,0,.12);
  box-shadow: 0 0 0 1px var(--yellow), 0 14px 30px -16px rgba(255,212,0,.5);
}

.hero__scrollcue {
  position: absolute; left: 50%; bottom: 1rem; transform: translateX(-50%);
  z-index: 3; display: flex; flex-direction: column; align-items: center; gap: .35rem;
  font-size: .7rem; letter-spacing: .25em; text-transform: uppercase; color: #f4f4f4;
}
.hero__scrollcue i {
  width: 1px; height: 34px; background: #f4f4f4;
  animation: cue 1.6s ease-in-out infinite;
}
@keyframes cue { 0%,100%{transform:scaleY(.3);transform-origin:top} 50%{transform:scaleY(1);transform-origin:top} }

/* ============================================================
   BIO
   ============================================================ */
.bio { 
  background: var(--paper); 
  padding: clamp(3rem,8vw,6rem) var(--pad); 
}

.about .bio__inner {
  display: block;
  text-align: center;
}

.about { 
  background: var(--blue-1); 
  padding: clamp(3rem,8vw,6rem) var(--pad); 
}

.bio__inner {
  position: relative;
  max-width: 1400px; margin: 0 auto;
  display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(1.5rem, 5vw, 4rem);
  align-items: center;
  padding: 0 5rem;;
}
.bio__arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 5;
  width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid var(--blue-1); background: rgba(255,255,255,.9);
  color: var(--blue-1); font-size: 1.4rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.bio__arrow:hover { background: var(--blue-1); color: #fff; }
.bio__arrow--prev { left: -8px; }
.bio__arrow--next { right: -8px; }
.bio__portrait {
  background: #ffd400;
  padding: 1.2rem 1.2rem 0; display: flex; justify-content: center;
  box-shadow: 0 30px 60px -30px rgba(20,30,80,.4);
}
.bio__portrait img { height: clamp(320px, 46vh, 540px); width: auto; object-fit: contain; }
.bio__kicker {
  font-family: var(--font-display); font-weight: 800;
  color: var(--blue-1); letter-spacing: .03em; margin: 0 0 .4rem;
  text-transform: uppercase;
}

.about .bio__lead {
  max-width: 100%;
  margin: 0 auto 1.4rem;
}

.about .bio__portrait {
  background: transparent;
  box-shadow: none;
}

.about .bio__portrait img {
  height: auto;
}

.bio__name {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1; 
  margin: 4rem auto 2rem;
  letter-spacing: -.02em;
}
.bio__role { 
  margin: 0 0 1rem; 
  font-weight: 700; 
  text-transform: uppercase;
  font-family: "Open Sans", sans-serif;
}

.bio__lead { 
  font-size: 1.05rem; 
  line-height: 1.55; 
  max-width: 42rem; 
  margin: 0 0 1.4rem; 
  font-family: "Open Sans", sans-serif;
}

.bio__points { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.bio__points li {
  position: relative; padding-left: 1.6rem; font-weight: 600;
}
.bio__points li::before {
  content: ""; position: absolute; left: 0; top: .35em;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--yellow); box-shadow: 0 0 0 3px rgba(255,212,0,.25);
}

/* ============================================================
   IZBORI 2026 — vijesti (bijela pozadina)
   ============================================================ */
.news { background: #fff; color: var(--ink); padding: clamp(3rem,8vw,6rem) var(--pad); }
.news__inner { max-width: 1100px; margin: 0 auto; }
.news__title {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(2.2rem, 6vw, 4.5rem); line-height: .95; margin: 0;
  letter-spacing: -.02em; color: var(--blue-1);
}
.news__title span { color: #000; font-style: italic; }
.news__sub { margin: .6rem 0 2.2rem; font-weight: 600; color: #555; }
.news__grid {
  display: grid; gap: 1.2rem;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.news__card {
  display: flex; flex-direction: column; gap: .6rem;
  background: #f6f8fc; border: 1px solid #e4e9f2; border-radius: 16px;
  padding: 1.3rem 1.3rem 1.5rem; text-decoration: none; color: inherit;
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.news__image {
  aspect-ratio: 16 / 9;
  margin: -1.3rem -1.3rem .25rem;
  overflow: hidden;
  background: #e4e9f2;
}
.news__image img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .35s ease;
}
.news__card:hover .news__image img { transform: scale(1.035); }
.news__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 44px -24px rgba(20,30,80,.45);
  border-color: var(--blue-1);
}
.news__meta {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: .45rem .75rem;
}
.news__date {
  font-size: .8rem; font-weight: 700; letter-spacing: .04em;
  color: var(--blue-1); text-transform: uppercase;
}
.news__source {
  display: inline-flex; align-items: center; min-height: 1.7rem;
  padding: .28rem .58rem; border-radius: 999px;
  background: #e7edf9; color: #243c73;
  font-size: .68rem; font-weight: 800; line-height: 1.1;
  letter-spacing: .025em; text-transform: uppercase;
}
.news__card[data-source="facebook"] .news__source {
  background: #e7f0ff; color: #0866ff;
}
.news__card[data-source="naprijed"] .news__source {
  background: #fff3b0; color: #16307a;
}
.news__card h3 {
  margin: 0; font-family: var(--font-display); font-weight: 800;
  font-size: 1.15rem; line-height: 1.15; color: #111;
}
.news__excerpt {
  margin: 0; font-size: .95rem; line-height: 1.5; color: #444;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
  overflow: hidden;
}
.news__links { display: flex; flex-wrap: wrap; gap: .7rem 1.3rem; margin-top: 2rem; }
.news__more {
  display: inline-block; font-weight: 700;
  color: var(--blue-1); text-decoration: none;
}
.news__more:hover { text-decoration: underline; }
.news__loading { color: #888; font-style: italic; }

/* ============================================================
   CTA / KONTAKT
   ============================================================ */
.cta { background: var(--yellow); padding: clamp(3rem,8vw,6rem) var(--pad); }
.cta__inner { max-width: 900px; margin: 0 auto; text-align: center; }
.cta__title {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(2.4rem, 8vw, 6rem); line-height: .92; margin: 0; letter-spacing: -.03em;
}
.cta__title span { color: var(--blue-1); }

.cta__sub { 
  font-size: 1.1rem; 
  font-weight: 600; 
  margin: 1rem 0 2rem; 
}

.cta__row { 
  display: flex; 
  align-items: center; 
  gap: clamp(1rem, 2.5vw, 1.8rem); 
  flex-wrap: wrap; 
  justify-content: start; 
}

.cta__qr { width: 180px; box-shadow: 0 18px 40px -18px rgba(20,30,80,.5); }
.cta__ig { display: inline-flex; align-items: center; gap: .55rem; color: var(--ink); transition: opacity .2s; }
.cta__ig:hover { opacity: .6; }
.cta__ig svg { width: 30px; height: 30px; flex: none; }
.cta__ig strong { font-size: 1.05rem; }

.cta__foot { 
  margin-top: 2.5rem; 
}

/* ============================================================
   PRESS
   ============================================================ */
.press { background: var(--blue-1); display: flex; justify-content: center; }
.press__banner { width: 100%; max-height: 60vh; object-fit: contain; }

/* ============================================================
   RESPONSIVE
   ============================================================ */



@media (min-width: 1370px) and (max-width: 1670px) {



}

@media (max-width: 1670px) {

  

  body .hero__nav {
    padding: var(--pad);
  }

  body .about { 
    background: var(--blue-1); 
    padding: 0 0 clamp(3rem,8vw,6rem) 0; 
  }

  body .bio { 
    padding: 0 0 clamp(3rem,8vw,6rem) 0; 
  }

  body .about .bio__portrait {
    box-shadow: none;
  }

  .bio__portrait {
    display: none;
  }

  .bio__arrow {
    display: none;
  }

  body #predsjednik .bio__portrait {
    box-shadow: none;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    display: flex;
  }

  .hero {
    height: 100vh; 
  }

  body .hero__brand-logo {
    height: 80px;
  }

  body .hero__brand { 
    margin: 0;
    position: absolute;
  }

  body .thumb.is-active {
    box-shadow: none;
  }

  .hero__grid { grid-template-columns: 1fr; align-items: start; height: auto; padding-top: 0; }
  .hero__portrait { position: relative; right: auto; bottom: auto; justify-self: center; order: -1; height: auto; }
  .hero__candidate { 
    height: clamp(
      320px, 
      40svh, 
      520px); 
  }

  .hero__text { 
    order: 2;
    position: relative;
    top: -16px;
    z-index: 8;
    padding: 20px 32px;
    margin: 0 auto;
  }

  .hero__headline {
    font-size: 24px;
    line-height: 1.2;
    padding: 0;
    text-align: center;
    margin-bottom: .5rem;
  }

  .hero__text span {
    text-align: center;
    display: block;
  }

  .hero__thumbs { 
    position: absolute;
    bottom: 0;
    justify-content: center;
    margin-top: 0;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    width: 100%;
    gap: 0;
    padding: 0 var(--pad) var(--pad);
    max-width: 66%;
    left: 50%;
    margin-left: -33%; 
  }

  body .thumb {
    min-width: auto;
  }

  body .bio__body {
    padding: 0 2.5rem;
    text-align: center;
  }

  html body #potpis {
    width: 100%!important;
    margin: 3rem auto 1rem!important;
  }

  body .cta__ig strong {
    font-size: 0;
  }

  body p.bio__lead {
    text-align: justify;
  }

  body p.bio__lead:nth-child(2) {
    text-align: center;
    font-size: 1.25rem!important;
  }

  body .cta__row {
    display: grid;
    gap: 0;
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }

  body .cta__ig {
    display: block;
  }

  body .bio__name {
    margin: 3rem auto 1rem;
  }

  body .thumb__name {
    padding: 8px 24px 9px;
  }

  .hero__scrollcue { display: none; }
  .bio__inner { grid-template-columns: 1fr; text-align: center; }
  .bio__points li { text-align: left; display: inline-block; }

  /* hamburger meni (smooth expand) */
  .hero__burger { display: flex; margin-left: auto; }
  .hero__nav { position: relative; align-items: center; }
  .hero__menu {
    position: absolute; 
    top: 60PX; 
    right: var(--pad); left: var(--pad);
    z-index: 50;
    flex-direction: column; gap: 0;
    transform: scaleY(0); transform-origin: top center;
    overflow: hidden; padding: 0;
    background: rgba(13,23,51,.98);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 0;
    box-shadow: 0 24px 50px -20px rgba(0,0,0,.7);
    backdrop-filter: blur(10px);
    transition: transform .32s ease, opacity .3s ease;
    opacity: 0; pointer-events: none;
  }
  .hero__menu.is-open {
    transform: scaleY(1); 
    opacity: 1; 
    padding: 0; 
    pointer-events: auto;
  }
  .hero__menu li { width: 100%; }
  .hero__menu a { 
    display: flex; 
    align-items: center; 
    width: 100%; 
    text-align: left; 
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__scrollcue i { animation: none; }
  .news__image img { transition: none; }
}

@media (max-width: 1024px) {

  body .thumb img {
    height: clamp(32px, 14vh, 64px);
  }

}