/* ==========================================================================
   Savez ratnih vojnih invalida Federacije BiH
   Paleta iz logotipa: navy #223881 / #1E3168, plava #B5C8E8, zlatna #F6EA00
   Prioritet: citljivost i pristupacnost (clanstvo 55-75 godina, slabovidni)
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:"Segoe UI",Roboto,Arial,sans-serif;line-height:1.65}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{line-height:1.25;margin:0 0 .5em;font-weight:700}
p{margin:0 0 1em}
.wrap{width:min(100% - 2.5rem,1140px);margin-inline:auto}
.skip{position:absolute;left:-9999px;background:#16244F;color:#fff;padding:.75rem 1.25rem;z-index:99}
.skip:focus{left:1rem;top:1rem}
:focus-visible{outline:3px solid #F6EA00;outline-offset:2px}
.badge{display:inline-block;background:#EDF2FA;border:1px solid #B5C8E8;border-radius:999px;
  padding:.05rem .55rem;font-size:.75rem;color:#223881}
.tcontact a,.fbfoot a{text-decoration:none}
.tcontact a:hover,.fbfoot a:hover{text-decoration:underline}
.tcontact a span{vertical-align:middle}
.fbfoot a{display:inline-flex;align-items:center;gap:.45rem;margin-top:.7rem;font-weight:600}
/* hamburger - sakriven na desktopu, ukljucuje ga media upit svake varijante */
.nav__toggle{display:none;align-items:center;gap:.65rem;width:100%;
  padding:.95rem 0;background:transparent;border:0;color:#fff;cursor:pointer;
  font:700 1rem/1 "Segoe UI",Arial,sans-serif;letter-spacing:.06em;text-transform:uppercase}
.nav__toggle svg{width:1.5rem;height:1.5rem;fill:currentColor;flex:none}
.nav__toggle .x{display:none}
.nav[data-open="true"] .nav__toggle .x{display:block}
.nav[data-open="true"] .nav__toggle .bars{display:none}
@media print{.nav,.topbar,footer{display:none}}
@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important}}

:root{--fs:19px}
body{font-size:var(--fs);background:#FAF8F3;color:#1B1A17}
h1,h2,h3{font-family:Georgia,"Palatino Linotype","Book Antiqua",serif;color:#1E3168;font-weight:700}
a{color:#1E3168}
.topbar{background:#141F45;color:#E8E3D6;font-size:.82rem}
.topbar .wrap{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;align-items:center;
  justify-content:space-between;min-height:2.6rem;padding-block:.35rem}
.topbar a{color:#F0D67A}
.masthead{background:#FAF8F3;border-bottom:1px solid #E2DBCB}
.masthead .wrap{padding-block:1.4rem}
/* logo lijevo, naziv desno - nikad jedno ispod drugog, ni na najuzem ekranu */
.masthead__link{display:flex;align-items:center;gap:1.3rem;text-decoration:none;color:inherit}
.masthead__logo{width:88px;flex:none}
.masthead__text{min-width:0}
.masthead h1{font-size:clamp(1.1rem,2.4vw,1.5rem);margin:0;letter-spacing:.01em}
.masthead .sub{font-family:"Segoe UI",Arial,sans-serif;color:#7A6A45;font-size:.78rem;
  letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.nav{background:#1E3168}
.nav ul{display:flex;flex-wrap:wrap;margin:0;padding:0;list-style:none}
/* Deset stavki u jednom redu. Izmjereno: sa .9rem/.95rem/.04em trazile su
   1252px, a .wrap nudi 1140px - zato se "Clanovi" prelamao u drugi red.
   Ova postavka trazi oko 1080px. Meni ima i siri kontejner od ostatka
   sajta jer je traka ionako preko cijele sirine. */
.nav .wrap{width:min(100% - 1.5rem,1240px)}
.nav a{display:block;padding:.85rem .78rem;color:#E7E9F2;text-decoration:none;font-size:.82rem;
  font-weight:600;text-transform:uppercase;letter-spacing:.02em;border-bottom:3px solid transparent}
.nav a:hover{color:#fff;border-bottom-color:#D9A400}
.nav a[aria-current=page]{color:#fff;border-bottom-color:#D9A400}
/* Istaknuta stavka - vodi na obrazac za clanove, zato je izdvojena bojom. */
.nav a.istaknuto{background:#D9A400;color:#141F45;margin:.35rem .25rem;padding:.5rem .9rem;
  border-radius:4px;border-bottom:0;font-weight:700}
.nav a.istaknuto:hover{background:#F0C230;color:#141F45;border-bottom:0}
/* hero - tekstura ljiljana umjesto fotografije, pa ne ovisi o kvalitetu arhive */
.hero{position:relative;background:#1E3168;color:#fff;overflow:hidden;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22190%22%20height%3D%22190%22%20viewBox%3D%220%200%20200%20200%22%3E%3Cg%20fill%3D%22%2523ffffff%22%20fill-opacity%3D%22.06%22%3E%3Cpath%20transform%3D%22translate%2828%2C18%29%20scale%28.62%29%22%20d%3D%22M50%202%20C59%2022%2066%2042%2064.5%2060%20C63%2075%2056%2087%2050%2096%20C44%2087%2037%2075%2035.5%2060%20C34%2042%2041%2022%2050%202%20Z%20M45.5%2060%20C37%2051%2026%2046%2017%2053%20C5.5%2062%204%2081%2010.5%2095%20C14%2082%2022%2073%2033.5%2074%20C41%2074.5%2045.5%2069%2045.5%2060%20Z%20M54.5%2060%20C63%2051%2074%2046%2083%2053%20C94.5%2062%2096%2081%2089.5%2095%20C86%2082%2078%2073%2066.5%2074%20C59%2074.5%2054.5%2069%2054.5%2060%20Z%20M21%2095%20L79%2095%20C82%2095%2083.5%2096.5%2083.5%2099.5%20C83.5%20102.5%2082%20104%2079%20104%20L21%20104%20C18%20104%2016.5%20102.5%2016.5%2099.5%20C16.5%2096.5%2018%2095%2021%2095%20Z%20M50%20106%20C58%20112%2063%20121%2062.5%20128%20C62%20135.5%2056.5%20139%2050%20139%20C43.5%20139%2038%20135.5%2037.5%20128%20C37%20121%2042%20112%2050%20106%20Z%22%2F%3E%3Cpath%20transform%3D%22translate%28128%2C118%29%20scale%28.62%29%22%20d%3D%22M50%202%20C59%2022%2066%2042%2064.5%2060%20C63%2075%2056%2087%2050%2096%20C44%2087%2037%2075%2035.5%2060%20C34%2042%2041%2022%2050%202%20Z%20M45.5%2060%20C37%2051%2026%2046%2017%2053%20C5.5%2062%204%2081%2010.5%2095%20C14%2082%2022%2073%2033.5%2074%20C41%2074.5%2045.5%2069%2045.5%2060%20Z%20M54.5%2060%20C63%2051%2074%2046%2083%2053%20C94.5%2062%2096%2081%2089.5%2095%20C86%2082%2078%2073%2066.5%2074%20C59%2074.5%2054.5%2069%2054.5%2060%20Z%20M21%2095%20L79%2095%20C82%2095%2083.5%2096.5%2083.5%2099.5%20C83.5%20102.5%2082%20104%2079%20104%20L21%20104%20C18%20104%2016.5%20102.5%2016.5%2099.5%20C16.5%2096.5%2018%2095%2021%2095%20Z%20M50%20106%20C58%20112%2063%20121%2062.5%20128%20C62%20135.5%2056.5%20139%2050%20139%20C43.5%20139%2038%20135.5%2037.5%20128%20C37%20121%2042%20112%2050%20106%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");background-size:190px 190px}
.hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,31,69,.35),rgba(20,31,69,.85))}
.hero .wrap{position:relative;z-index:1;padding-block:4.5rem;max-width:820px}
.hero .kicker{font-family:"Segoe UI",Arial,sans-serif;color:#F0D67A;font-size:.8rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;margin-bottom:1rem}
.hero h2{color:#fff;font-size:clamp(1.7rem,4vw,2.7rem);line-height:1.2;margin-bottom:1rem;text-wrap:balance}
.hero p{color:#DDE2F0;font-size:1.05rem;max-width:56ch;margin-bottom:1.6rem}
.hero .rule{width:4rem;height:4px;background:#D9A400;margin-bottom:1.4rem}
.btn{display:inline-block;background:#D9A400;color:#1B1A17;padding:.78rem 1.5rem;border-radius:3px;
  font-family:"Segoe UI",Arial,sans-serif;font-weight:700;text-decoration:none;border:2px solid #D9A400}
.btn:hover{background:transparent;color:#F0D67A}
.btn--solid{background:#1E3168;color:#fff;border-color:#1E3168}
.btn--solid:hover{background:#141F45;color:#fff}
/* traka sa brojkama - daje tezinu bez fotografija */
.stats{background:#fff;border-bottom:1px solid #E2DBCB}
.stats ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
  margin:0;padding:0;list-style:none;text-align:center}
.stats li{padding:1.7rem .8rem;border-left:1px solid #EDE7D9}
.stats li:first-child{border-left:0}
.stats b{display:block;font-family:Georgia,serif;font-size:2.1rem;color:#1E3168;line-height:1.1}
.stats span{font-size:.83rem;color:#6E6553;letter-spacing:.03em}
.section{padding-block:3.4rem}
.section--paper{background:#fff;border-block:1px solid #E2DBCB}
.head{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;align-items:baseline;
  justify-content:space-between;margin-bottom:1.8rem}
.head h2{margin:0;font-size:1.7rem}
.head h2::after{content:"";display:block;width:3rem;height:4px;background:#D9A400;margin-top:.6rem}
.head a{font-family:"Segoe UI",Arial,sans-serif;font-weight:600;font-size:.92rem}
.news{display:grid;gap:1.6rem;grid-template-columns:repeat(auto-fill,minmax(18rem,1fr));margin:0;padding:0;list-style:none}
.card{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid #E2DBCB;
  transition:box-shadow .18s,transform .18s}
.card:hover{box-shadow:0 10px 30px rgba(27,26,23,.12);transform:translateY(-3px)}
.card .media{aspect-ratio:16/10;background:#B5C8E8;overflow:hidden}
.card .media img{width:100%;height:100%;object-fit:cover;filter:saturate(.92)}
.card .body{padding:1.15rem 1.25rem 1.4rem}
.card .meta{font-family:"Segoe UI",Arial,sans-serif;display:flex;flex-wrap:wrap;gap:.5rem .9rem;
  align-items:center;font-size:.78rem;color:#7A6A45;letter-spacing:.04em;text-transform:uppercase;margin-bottom:.55rem}
.card h3{font-size:1.12rem;margin:0 0 .5rem;line-height:1.3}
.card h3 a{color:#1E3168;text-decoration:none}
.card h3 a::after{content:"";position:absolute;inset:0}
.card p{color:#5B5445;font-size:.93rem;margin:0}
.badge{background:#FAF6E8;border-color:#E6D8AC;color:#7A6A45}
/* citat - nosi emociju bez patetike */
.quote{background:#1E3168;color:#fff;background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22190%22%20height%3D%22190%22%20viewBox%3D%220%200%20200%20200%22%3E%3Cg%20fill%3D%22%2523ffffff%22%20fill-opacity%3D%22.06%22%3E%3Cpath%20transform%3D%22translate%2828%2C18%29%20scale%28.62%29%22%20d%3D%22M50%202%20C59%2022%2066%2042%2064.5%2060%20C63%2075%2056%2087%2050%2096%20C44%2087%2037%2075%2035.5%2060%20C34%2042%2041%2022%2050%202%20Z%20M45.5%2060%20C37%2051%2026%2046%2017%2053%20C5.5%2062%204%2081%2010.5%2095%20C14%2082%2022%2073%2033.5%2074%20C41%2074.5%2045.5%2069%2045.5%2060%20Z%20M54.5%2060%20C63%2051%2074%2046%2083%2053%20C94.5%2062%2096%2081%2089.5%2095%20C86%2082%2078%2073%2066.5%2074%20C59%2074.5%2054.5%2069%2054.5%2060%20Z%20M21%2095%20L79%2095%20C82%2095%2083.5%2096.5%2083.5%2099.5%20C83.5%20102.5%2082%20104%2079%20104%20L21%20104%20C18%20104%2016.5%20102.5%2016.5%2099.5%20C16.5%2096.5%2018%2095%2021%2095%20Z%20M50%20106%20C58%20112%2063%20121%2062.5%20128%20C62%20135.5%2056.5%20139%2050%20139%20C43.5%20139%2038%20135.5%2037.5%20128%20C37%20121%2042%20112%2050%20106%20Z%22%2F%3E%3Cpath%20transform%3D%22translate%28128%2C118%29%20scale%28.62%29%22%20d%3D%22M50%202%20C59%2022%2066%2042%2064.5%2060%20C63%2075%2056%2087%2050%2096%20C44%2087%2037%2075%2035.5%2060%20C34%2042%2041%2022%2050%202%20Z%20M45.5%2060%20C37%2051%2026%2046%2017%2053%20C5.5%2062%204%2081%2010.5%2095%20C14%2082%2022%2073%2033.5%2074%20C41%2074.5%2045.5%2069%2045.5%2060%20Z%20M54.5%2060%20C63%2051%2074%2046%2083%2053%20C94.5%2062%2096%2081%2089.5%2095%20C86%2082%2078%2073%2066.5%2074%20C59%2074.5%2054.5%2069%2054.5%2060%20Z%20M21%2095%20L79%2095%20C82%2095%2083.5%2096.5%2083.5%2099.5%20C83.5%20102.5%2082%20104%2079%20104%20L21%20104%20C18%20104%2016.5%20102.5%2016.5%2099.5%20C16.5%2096.5%2018%2095%2021%2095%20Z%20M50%20106%20C58%20112%2063%20121%2062.5%20128%20C62%20135.5%2056.5%20139%2050%20139%20C43.5%20139%2038%20135.5%2037.5%20128%20C37%20121%2042%20112%2050%20106%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");background-size:190px 190px}
.quote .wrap{padding-block:3.5rem;max-width:780px;text-align:center;position:relative}
.quote blockquote{margin:0;font-family:Georgia,serif;font-size:clamp(1.2rem,2.6vw,1.7rem);
  line-height:1.45;color:#fff;text-wrap:balance}
.quote cite{display:block;margin-top:1.2rem;font-family:"Segoe UI",Arial,sans-serif;font-style:normal;
  font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;color:#F0D67A}
.docs{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(16.5rem,1fr));margin:0;padding:0;list-style:none}
.doc{display:flex;gap:.95rem;background:#FAF8F3;border:1px solid #E2DBCB;border-left:4px solid #D9A400;
  padding:1.1rem 1.2rem;text-decoration:none;color:inherit}
.doc:hover{background:#fff;border-left-color:#1E3168}
.doc svg{flex:none;width:1.7rem;height:1.7rem;fill:#1E3168}
.doc strong{display:block;color:#1E3168;font-family:Georgia,serif;font-size:1.02rem}
.doc span{font-size:.82rem;color:#6E6553}
.partneri{padding-block:1.6rem}
.partneri ul{display:flex;flex-wrap:wrap;justify-content:center;gap:1.5rem;margin:0;padding:0;list-style:none}
.partneri li{flex:0 1 360px;min-width:0}
.partneri img{display:block;width:100%;height:auto;border:1px solid #E2DBCB;opacity:.9;transition:opacity .18s}
.partneri img:hover{opacity:1}
footer{background:#141F45;color:#C6CBDD;margin-top:0}
footer a{color:#fff}
.fgrid{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));padding-block:3rem}
footer h3{color:#fff;font-size:1.05rem;font-family:Georgia,serif}
footer h3::after{content:"";display:block;width:2.5rem;height:3px;background:#D9A400;margin-top:.45rem}
footer ul{margin:0;padding:0;list-style:none}
footer li{margin-bottom:.5rem;font-size:.94rem}
.fbar{border-top:1px solid rgba(255,255,255,.15);padding-block:1.15rem;font-size:.85rem;
  display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between}
@media(max-width:900px){.hero .wrap{padding-block:2.8rem}}

/* Prag podignut sa 900px na 1160px: deset stavki u redu trazi oko 1080px,
   pa bi se ispod te sirine prelamalo u dva reda. Umjesto prelamanja ide
   hamburger, koji na uzim prozorima ionako bolje radi. */
@media(max-width:1160px){
  .nav__toggle{display:flex}
  .nav ul{display:none;flex-direction:column;padding-bottom:.6rem}
  .nav[data-open="true"] ul{display:flex}
  .nav a{padding:.95rem .25rem;border-bottom:1px solid rgba(255,255,255,.16);font-size:.9rem}
  .nav a[aria-current=page]{border-bottom-color:#F6EA00}
  /* u razvucenom meniju istaknuta stavka ostaje zlatna, ali preko cijele sirine */
  .nav a.istaknuto{margin:.5rem 0 .3rem;padding:.75rem 1rem;text-align:center;border-bottom:0}
  .topbar .wrap{justify-content:center;text-align:center}
}

/* Hero se otvara na 28% visine slike - tu se vec vide glave i ramena - a --pan
   klizi do 100% dok se stranica skrola do ruba menija. Sekcija miruje, pomjera
   se samo kadar unutar nje. Vrijednost --pan postavlja site.js; bez JS-a
   slika ostaje na pocetnom kadru. Pocetak se mijenja u site.js (POCETNI). */
.phero{position:relative;min-height:clamp(24rem,42vw,32rem);display:flex;align-items:center;
  background-color:#141F45;
  background-image:url("../img/hero-1280.webp");
  background-repeat:no-repeat;
  background-size:cover;
  background-position:50% var(--pan,28%)}
.phero::before{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(20,31,69,.90) 0%,rgba(20,31,69,.70) 38%,rgba(20,31,69,.12) 72%)}
.phero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(20,31,69,.55),transparent 45%)}
.phero .wrap{position:relative;z-index:1;padding-block:3rem;max-width:720px;margin-right:auto}
.phero .kicker{font-family:"Segoe UI",Arial,sans-serif;color:#F0D67A;font-size:.78rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;margin-bottom:.8rem;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.phero h2{color:#fff;font-size:clamp(1.7rem,4vw,2.75rem);line-height:1.18;margin-bottom:.8rem;
  text-wrap:balance;text-shadow:0 2px 14px rgba(0,0,0,.55)}
.phero .tagline{font-family:Georgia,serif;color:#F0D67A;font-size:clamp(1rem,2vw,1.25rem);
  font-style:italic;margin-bottom:1.5rem;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.phero .rule{width:4rem;height:4px;background:#D9A400;margin-bottom:1.2rem}
/* na uskom ekranu slika se jako obrezuje - prebacujemo zastor na okomiti
   i pomjeramo kadar udesno da dvojica ljudi ostanu u kadru */
@media(max-width:700px){
  /* zaglavlje: logo i naziv ostaju u istom redu, poravnati po sredini visine */
  .masthead .wrap{padding-block:.9rem}
  .masthead__link{gap:.8rem}
  .masthead__logo{width:56px}
  .masthead h1{font-size:clamp(.88rem,3.6vw,1.12rem);line-height:1.22}
  .masthead .sub{font-size:.62rem;letter-spacing:.09em}

  /* Hero.
     VAZNO: background-size:cover na uskom ekranu skalira ovu siroku sliku
     po VISINI, pa uspravnog viska nema i pan ne bi imao sta pomjerati.
     Zato ovdje visinu zadajemo rucno (150% visine sekcije) - time uvijek
     postoji 50% viska kroz koji kadar moze kliziti pri skrolu i swipeu. */
  .phero{min-height:16rem;
    background-size:auto 150%;
    background-position:66% var(--pan,40%)}
  /* Bez zastora - slika ide u punoj boji. Na desktopu je preliv vodoravan pa
     desna strana ostaje svijetla, dok je ovdje bio okomit i padao na 90%
     neprozirnosti pri dnu, sto je cijeli hero cinilo tamnim i sivim.
     Citljivost teksta sada drzi samo sjena ispod slova. */
  .phero::before,
  .phero::after{display:none}
  .phero .wrap{padding-block:1.8rem}
  .phero h2{font-size:1.35rem;line-height:1.25;margin-bottom:.6rem}
  /* Zlatna se na mobitelu gubila u oblacima. Navy ima jak kontrast na nebu,
     a svijetli oreol ga drzi citljivim i kad pan dovede tamniji dio slike
     pod njega - tamna sjena ispod tamnog teksta ne bi pomogla. */
  .phero .kicker{font-size:.7rem;margin-bottom:.6rem;color:#1E3168;
    text-shadow:0 1px 2px rgba(255,255,255,.9),0 0 10px rgba(255,255,255,.75)}
  .phero .rule{margin-bottom:.9rem}
  .phero .tagline{font-size:.95rem;margin-bottom:0}
  /* dugme se sklanja da hero ostane nizak - "O nama" je ionako u meniju */
  .phero .btn{display:none}

  /* Brojke u mrezu 2x2 umjesto cetiri reda jedan ispod drugog.
     Auto-fit sa minmax(11rem) na ovoj sirini propusti samo jednu kolonu,
     pa je traka narastala na oko 430px i dominirala stranicom. */
  .stats ul{grid-template-columns:1fr 1fr}
  .stats li{padding:.9rem .5rem;border-left:1px solid #EDE7D9;border-top:0}
  .stats li:nth-child(odd){border-left:0}
  .stats li:nth-child(n+3){border-top:1px solid #EDE7D9}
  .stats b{font-size:1.45rem}
  .stats span{display:block;font-size:.72rem;line-height:1.3}
}

/* Ko je iskljucio animacije dobija miran kadar u kojem se vide i ljudi i kolica. */
@media (prefers-reduced-motion:reduce){
  .phero{background-position:50% 55%;--pan:55%}
}

/* ==========================================================================
   Unutrasnje stranice: zaglavlje rubrike, clanak, galerija, stranicenje
   ========================================================================== */

/* ---------- zaglavlje rubrike ---------- */
.pageheader{background:#1E3168;color:#fff;
  background-image:linear-gradient(180deg,rgba(20,31,69,.25),rgba(20,31,69,.55))}
.pageheader .wrap{padding-block:2.4rem 2.6rem}
.pageheader h2{color:#fff;font-size:clamp(1.5rem,3.4vw,2.2rem);margin:.4rem 0 .5rem;text-wrap:balance}
.pageheader h2::after{content:"";display:block;width:3rem;height:4px;background:#D9A400;margin-top:.7rem}
.pageheader p{color:#DDE2F0;margin:0;font-size:1rem}
.pageheader time{color:#F0D67A;font-weight:600}

/* ---------- putanja ---------- */
.putanja{font-family:"Segoe UI",Arial,sans-serif;font-size:.85rem;color:#B9C4E0}
.putanja a{color:#DDE2F0}
.putanja span[aria-hidden]{margin-inline:.35rem;opacity:.6}

/* ---------- clanak ---------- */
.clanak{background:#fff;border:1px solid #E2DBCB;padding:clamp(1.3rem,3vw,2.6rem);max-width:56rem}
.clanak__tijelo{font-size:1.02rem}
.clanak__tijelo p{margin:0 0 1.1em}
.clanak__tijelo h3{font-size:1.3rem;margin:1.9rem 0 .7rem;padding-top:.3rem}
.clanak__tijelo h4{font-size:1.1rem;margin:1.5rem 0 .5rem;color:#1E3168}
.clanak__tijelo ul,.clanak__tijelo ol{margin:0 0 1.2em;padding-left:1.4em}
.clanak__tijelo li{margin-bottom:.45em}
.clanak__tijelo a{color:#26418F}
.clanak__tijelo img{margin:1.2rem 0;border:1px solid #E2DBCB}
.clanak__tijelo table{width:100%;border-collapse:collapse;margin:1.2rem 0;font-size:.95rem}
.clanak__tijelo td,.clanak__tijelo th{border:1px solid #E2DBCB;padding:.5rem .7rem;text-align:left}
.clanak__tijelo .uvod{font-size:1.12rem;color:#3A3830;border-left:4px solid #D9A400;padding-left:1rem}
.clanak__tijelo .napomena{font-size:.92rem;color:#6E6553;background:#FAF8F3;
  border:1px dashed #DDD3BC;padding:.8rem 1rem}
.clanak__tijelo blockquote,.istaknuto{margin:1.6rem 0;padding:1.2rem 1.4rem;background:#F4F6FB;
  border-left:5px solid #1E3168;font-family:Georgia,serif;font-size:1.08rem;color:#26303F}

/* ---------- galerija ---------- */
.galerija-naslov{margin:2.4rem 0 1rem;font-size:1.25rem}
.galerija{list-style:none;margin:0 0 2rem;padding:0;
  display:grid;gap:.9rem;grid-template-columns:repeat(auto-fill,minmax(11rem,1fr))}
.galerija a{display:block;overflow:hidden;border:1px solid #E2DBCB;background:#B5C8E8}
.galerija img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .3s}
.galerija a:hover img{transform:scale(1.05)}
.godina{display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:baseline;
  margin:2.2rem 0 1rem;font-size:1.5rem;border-bottom:2px solid #E2DBCB;padding-bottom:.5rem}
.godina span{font-family:"Segoe UI",Arial,sans-serif;font-size:.85rem;color:#6E6553;font-weight:400}

/* ---------- lightbox ---------- */
.lb{border:0;padding:0;background:rgba(15,22,48,.95);max-width:100vw;max-height:100vh;
  width:100%;height:100%;color:#fff}
.lb::backdrop{background:rgba(15,22,48,.9)}
.lb__okvir{display:flex;flex-direction:column;height:100%;padding:1rem;gap:.8rem}
.lb__slika{flex:1;min-height:0;display:flex;align-items:center;justify-content:center}
.lb__slika img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.lb__traka{display:flex;flex-wrap:wrap;gap:.8rem 1.2rem;align-items:center;justify-content:space-between;
  font-family:"Segoe UI",Arial,sans-serif;font-size:.92rem}
.lb__traka a{color:#F0D67A}
.lb button{background:transparent;border:1px solid rgba(255,255,255,.5);color:#fff;
  border-radius:4px;padding:.45rem .9rem;font:600 .95rem/1 inherit;cursor:pointer;min-height:2.4rem}
.lb button:hover{background:rgba(255,255,255,.16)}
.lb__nav{display:flex;gap:.5rem}

/* ---------- stranicenje ---------- */
.stranicenje{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;justify-content:center;
  margin-top:2.5rem;font-family:"Segoe UI",Arial,sans-serif}
.stranicenje a,.stranicenje span{display:inline-block;min-width:2.7rem;text-align:center;
  padding:.55rem .8rem;border:1px solid #E2DBCB;background:#fff;text-decoration:none;color:#1E3168}
.stranicenje a:hover{background:#1E3168;color:#fff;border-color:#1E3168}
.stranicenje span[aria-current]{background:#1E3168;color:#fff;border-color:#1E3168;font-weight:700}

/* ---------- prethodna / sljedeca vijest ---------- */
.susjedne{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:2.5rem;max-width:56rem}
.susjedne__veza{display:block;background:#fff;border:1px solid #E2DBCB;padding:1rem 1.2rem;
  text-decoration:none;color:inherit}
.susjedne__veza:hover{border-color:#1E3168}
.susjedne__veza span{display:block;font-family:"Segoe UI",Arial,sans-serif;font-size:.8rem;
  color:#7A6A45;text-transform:uppercase;letter-spacing:.06em;margin-bottom:.3rem}
.susjedne__veza strong{color:#1E3168;font-family:Georgia,serif;font-size:1.02rem;line-height:1.35}
.susjedne__veza--desno{text-align:right}

/* ---------- filter godina ---------- */
.filter{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:1.5rem;
  font-family:"Segoe UI",Arial,sans-serif;font-size:.92rem}
.filter a{padding:.45rem .95rem;border:1px solid #E2DBCB;background:#fff;
  text-decoration:none;color:#1E3168;border-radius:999px}
.filter a:hover{border-color:#1E3168}
.filter a[aria-current]{background:#1E3168;color:#fff;border-color:#1E3168;font-weight:600}

/* ---------- kontakt ---------- */
.kontakt-glavni{background:#fff;border:1px solid #E2DBCB;border-left:5px solid #D9A400;
  padding:1.6rem 1.8rem;max-width:44rem}
.kontakt-glavni h3{margin-top:0;font-size:1.25rem}
.kontakt-lista{list-style:none;margin:0;padding:0}
.kontakt-lista li{display:grid;grid-template-columns:7rem 1fr;gap:.5rem 1rem;
  padding:.55rem 0;border-bottom:1px solid #F0EBDF}
.kontakt-lista li:last-child{border-bottom:0}
.kontakt-lista span{color:#7A6A45;font-size:.88rem;font-family:"Segoe UI",Arial,sans-serif}
.kontakt-lista strong{font-weight:600}
.kantoni{list-style:none;margin:0;padding:0;
  display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fill,minmax(18rem,1fr))}
.kantoni li{background:#fff;border:1px solid #E2DBCB;padding:1.2rem 1.3rem}
.kantoni h3{font-size:1.05rem;margin:0 0 .5rem}
.kantoni p{margin:0 0 .4rem;font-size:.94rem;color:#5B5445}
.napomena{font-size:.9rem;color:#6E6553}

/* ---------- prazna rubrika ---------- */
.prazno{background:#fff;border:1px dashed #DDD3BC;padding:2.2rem;text-align:center;max-width:44rem}
.prazno h3{margin-top:0}
.prazno p{color:#5B5445}

@media(max-width:640px){
  .susjedne{grid-template-columns:1fr}
  .susjedne__veza--desno{text-align:left}
  .kontakt-lista li{grid-template-columns:1fr;gap:.1rem}
  .galerija{grid-template-columns:repeat(auto-fill,minmax(8.5rem,1fr))}
}