/*
Theme Name: KDV 1181
Theme URI: https://www.kd-varazdin.hr/
Author: Kinološko društvo „Varaždin 1181“
Description: Tema za Kinološko društvo „Varaždin 1181“ — tlocrt terena na Dravskom nasipu, registar uzgajivača po FCI skupinama i programi Društva.
Version: 2.1.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kdv1181
Tags: klasicna-tema, jednostupcana, prilagodljiva
*/

:root{
  --ink:      #16241c;   /* loden — dubina dravske šume */
  --ink-2:    #1f3227;
  --moss:     #2e4636;
  --chalk:    #e7e7dc;   /* vapnenac */
  --paper:    #f3f2ea;
  --brass:    #b98b32;   /* baroknа oker / pozlata rozete */
  --brass-lo: #d8b877;
  --oxblood:  #7b2233;
  --duo-lo:   #dbc9a2;   /* svijetli ton duotonea */
  --signal:   #c8102e;

  --fg:       var(--ink);
  --fg-soft:  #4c5b51;
  --line:     #c9c9ba;

  --ff-disp:  "Marcellus", "Times New Roman", serif;
  --ff-sc:    "Marcellus SC", "Marcellus", serif;
  --ff-body:  "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ff-mono:  "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --pad:      clamp(1.25rem, 5vw, 5rem);
  --maxw:     78rem;
  --gap:      clamp(1.5rem, 3vw, 3rem);
}

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

html{ scroll-behavior:smooth; scroll-padding-top:5.5rem; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--chalk);
  color:var(--fg);
  font:400 clamp(1rem,.96rem + .18vw,1.075rem)/1.62 var(--ff-body);
  font-feature-settings:"kern","liga";
  -webkit-font-smoothing:antialiased;
}

img,svg{ max-width:100%; }

a{ color:inherit; }

::selection{ background:var(--brass); color:var(--ink); }

:focus-visible{
  outline:2px solid var(--oxblood);
  outline-offset:3px;
  border-radius:2px;
}

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

.skip{
  position:absolute; left:1rem; top:-4rem; z-index:99;
  background:var(--ink); color:var(--chalk);
  padding:.7rem 1.1rem; font:500 .85rem var(--ff-body); text-decoration:none;
  transition:top .2s;
}
.skip:focus{ top:1rem; }

/* ---------- zajednički elementi ---------- */

.eyebrow{
  margin:0 0 1rem;
  font:400 .72rem/1.5 var(--ff-mono);
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--oxblood);
}
.sec__head--inv .eyebrow{ color:var(--brass-lo); }
/* Na lodenu oxblood daje 1,63:1 — nadnaslov na tamnoj podlozi ide u oker. */
.hero .eyebrow{ color:var(--brass-lo); }

.lnk{
  font:500 .9rem var(--ff-body);
  color:var(--oxblood);
  text-decoration:none;
  border-bottom:1px solid currentColor;
  padding-bottom:2px;
  white-space:nowrap;
}
.lnk:hover{ color:var(--ink); }
.lnk--inv{ color:var(--brass-lo); }
.lnk--inv:hover{ color:var(--chalk); }

.btn{
  display:inline-block;
  font:500 .88rem/1 var(--ff-body);
  letter-spacing:.02em;
  padding:1rem 1.6rem;
  background:var(--ink);
  color:var(--chalk);
  text-decoration:none;
  border:1px solid var(--ink);
  transition:background .18s, color .18s, border-color .18s;
}
.btn:hover{ background:var(--oxblood); border-color:var(--oxblood); }

.btn--ghost{ background:transparent; color:var(--chalk); border-color:rgba(231,231,220,.42); }
.btn--ghost:hover{ background:rgba(231,231,220,.1); border-color:var(--brass); color:var(--chalk); }

.btn--inv{ background:var(--brass); color:var(--ink); border-color:var(--brass); }
.btn--inv:hover{ background:var(--brass-lo); border-color:var(--brass-lo); color:var(--ink); }

.btn--sm{ padding:.66rem 1.05rem; font-size:.82rem; }

/* =========================================================
   ZAGLAVLJE
   ========================================================= */

.head{
  position:sticky; top:0; z-index:40;
  background:rgba(22,36,28,.94);
  backdrop-filter:saturate(1.4) blur(8px);
  border-bottom:1px solid rgba(185,139,50,.28);
}
.head__in{
  max-width:var(--maxw); margin-inline:auto;
  padding:.75rem var(--pad);
  display:flex; align-items:center; gap:clamp(1rem,3vw,2.5rem);
}

.mark{ display:flex; align-items:center; gap:.7rem; text-decoration:none; color:var(--chalk); }
.mark__sig{
  font:400 .78rem/1 var(--ff-mono);
  letter-spacing:.12em;
  border:1px solid var(--brass);
  color:var(--brass-lo);
  padding:.45rem .5rem .4rem;
}
.mark__txt{ display:flex; flex-direction:column; line-height:1.05; }
.mark__txt b{ font:400 .68rem/1 var(--ff-mono); letter-spacing:.16em; text-transform:uppercase; color:rgba(231,231,220,.62); }
.mark__txt i{ font:400 1.12rem/1.2 var(--ff-disp); font-style:normal; letter-spacing:.03em; margin-top:.22rem; }
.mark__txt i span{ color:var(--brass-lo); }

.nav{ display:flex; margin-left:auto; }
.nav__list{
  display:flex; align-items:center; gap:clamp(.9rem,2vw,1.7rem);
  list-style:none; margin:0; padding:0;
}
.nav li{ position:relative; }
.nav a{
  font:500 .84rem/1 var(--ff-body);
  color:rgba(231,231,220,.78);
  text-decoration:none;
  padding:.4rem 0;
  border-bottom:1px solid transparent;
  transition:color .16s, border-color .16s;
}
.nav a:hover{ color:var(--chalk); border-bottom-color:var(--brass); }
.nav .current-menu-item > a,
.nav .current_page_item > a{ color:var(--chalk); border-bottom-color:var(--brass); }

/* podizbornik */
.nav .sub-menu{
  position:absolute; top:100%; left:-1rem; min-width:13rem; z-index:5;
  display:none; flex-direction:column; gap:0;
  list-style:none; margin:0; padding:.4rem 0;
  background:var(--ink); border:1px solid rgba(185,139,50,.3);
}
.nav li:hover > .sub-menu,
.nav li:focus-within > .sub-menu{ display:flex; }
.nav .sub-menu a{ padding:.55rem 1rem; border-bottom:0; }
.nav .sub-menu a:hover{ background:var(--moss); }

.head__act{ display:flex; align-items:center; gap:1rem; }
.lnk-out{
  font:400 .74rem/1 var(--ff-mono);
  letter-spacing:.08em;
  color:var(--brass-lo);
  text-decoration:none;
  border-bottom:1px solid rgba(216,184,119,.4);
  padding-bottom:3px;
}
.lnk-out:hover{ color:var(--chalk); border-bottom-color:var(--chalk); }
.head__act .btn{ background:var(--brass); color:var(--ink); border-color:var(--brass); }
.head__act .btn:hover{ background:var(--chalk); border-color:var(--chalk); }

.burger{
  display:none; width:2.4rem; height:2.4rem; padding:0;
  background:none; border:1px solid rgba(231,231,220,.3); cursor:pointer;
  flex-direction:column; justify-content:center; align-items:center; gap:5px;
}
.burger span{ display:block; width:16px; height:1.5px; background:var(--chalk); transition:transform .2s, opacity .2s; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

/* =========================================================
   HERO — TLOCRT POLIGONA
   ========================================================= */

.hero{
  position:relative;
  background:var(--ink);
  color:var(--chalk);
  overflow:hidden;
  isolation:isolate;
}

.hero__foto{
  position:absolute; inset:0; z-index:0;
  background:var(--duo-lo);
  isolation:isolate;
  opacity:var(--jacina,.46);
}
.hero__foto img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:grayscale(1) contrast(1.06);
  mix-blend-mode:multiply;
}
.hero__foto::after{
  content:""; position:absolute; inset:0;
  background:var(--ink);
  mix-blend-mode:lighten;
}

.hero__plate{ position:absolute; inset:0; z-index:1; }
.hero__plate::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(100deg, var(--ink) 30%, rgba(22,36,28,.94) 42%, rgba(22,36,28,.2) 66%, rgba(22,36,28,.5) 100%);
}
.plan{ width:100%; height:100%; display:block; }

.pl-lbl{
  font:400 11px var(--ff-mono);
  letter-spacing:.18em;
  fill:var(--brass-lo);
  opacity:.72;
}
.pl-lbl--tri{ fill:var(--brass); opacity:.9; }
.pl-lbl--note{ opacity:.42; letter-spacing:.24em; }

.pl-fade{ opacity:0; animation:plFade .9s cubic-bezier(.2,.7,.3,1) forwards; animation-delay:var(--d,0s); }
@keyframes plFade{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

.pl-tri{ stroke-dasharray:7 6; animation:plDash 24s linear infinite; }
@keyframes plDash{ to{ stroke-dashoffset:-260; } }

.hero__body{
  position:relative; z-index:2;
  max-width:var(--maxw); margin-inline:auto;
  padding:clamp(4rem,10vw,8.5rem) var(--pad) clamp(3rem,6vw,5rem);
}

.hero__h1{
  margin:0 0 1.6rem;
  font-family:var(--ff-disp);
  font-weight:400;
  line-height:.94;
  letter-spacing:.005em;
}
.hero__h1 span{
  display:block;
  font-family:var(--ff-sc);
  font-size:clamp(1.05rem,1.9vw,1.45rem);
  letter-spacing:.24em;
  color:rgba(231,231,220,.66);
  margin-bottom:.7rem;
}
.hero__h1 em{
  display:block;
  font-style:normal;
  font-size:clamp(3.4rem,10.5vw,7.6rem);
}
.hero__year{
  display:block;
  font-weight:400;
  font-size:clamp(2.6rem,8vw,5.6rem);
  letter-spacing:.12em;
  color:var(--brass);
  margin-top:-.06em;
}
@supports (-webkit-text-stroke:1px currentColor){
  .hero__year{ color:transparent; -webkit-text-stroke:1px var(--brass); }
}

.hero__lede{
  max-width:34ch;
  margin:0 0 2.2rem;
  font-size:clamp(1.02rem,.98rem + .3vw,1.18rem);
  color:rgba(231,231,220,.84);
}

.hero__cta{ display:flex; flex-wrap:wrap; gap:.8rem; margin-bottom:clamp(2.5rem,6vw,4.5rem); }
.hero__cta .btn{ background:var(--brass); color:var(--ink); border-color:var(--brass); }
.hero__cta .btn:hover{ background:var(--chalk); border-color:var(--chalk); }
.hero__cta .btn--ghost{ background:transparent; color:var(--chalk); border-color:rgba(231,231,220,.42); }
.hero__cta .btn--ghost:hover{ background:rgba(231,231,220,.1); border-color:var(--brass); }

.facts{
  display:flex; flex-wrap:wrap; gap:0;
  margin:0; border-top:1px solid rgba(185,139,50,.32);
  max-width:46rem;
}
.facts > div{
  flex:1 1 11rem;
  padding:1rem 1.4rem 0 0;
  border-right:1px solid rgba(185,139,50,.16);
}
.facts > div:last-child{ border-right:0; }
.facts dt{
  font:400 .68rem/1 var(--ff-mono);
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--brass-lo); opacity:.75; margin-bottom:.45rem;
}
.facts dd{ margin:0; font-size:.94rem; color:rgba(231,231,220,.9); }

/* =========================================================
   GODIŠNJI RITAM
   ========================================================= */

.year{
  background:var(--moss);
  color:var(--chalk);
  padding:clamp(2.5rem,5vw,3.5rem) var(--pad);
}
.year__h{
  max-width:var(--maxw); margin:0 auto 1.8rem;
  font:400 .72rem/1 var(--ff-mono);
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--brass-lo);
}
.year__list{
  list-style:none; margin:0 auto; padding:0;
  max-width:var(--maxw);
  display:grid; gap:0;
  grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));
}
.year__list li{
  padding:1.3rem 1.6rem 1.3rem 0;
  border-top:1px solid rgba(185,139,50,.34);
  display:flex; flex-direction:column; gap:.35rem;
}
.year__m{
  font:400 .7rem/1 var(--ff-mono);
  letter-spacing:.16em; text-transform:uppercase; color:var(--brass);
}
.year__t{ font:400 1.24rem/1.25 var(--ff-disp); }
.year__d{ font-size:.86rem; color:rgba(231,231,220,.66); }

/* =========================================================
   SEKCIJE
   ========================================================= */

.sec{
  max-width:var(--maxw); margin-inline:auto;
  padding:clamp(3.5rem,6.5vw,5.75rem) var(--pad);
}
.sec--tight{ padding-top:clamp(2rem,4vw,3rem); }
.sec--bez-dna{ padding-bottom:0; }

.sec__head{ margin-bottom:clamp(2rem,4vw,3.2rem); }
.sec__head--row{ display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; flex-wrap:wrap; }

.sec__h{
  margin:0;
  font:400 clamp(1.85rem,1.3rem + 2.4vw,3.1rem)/1.12 var(--ff-disp);
  letter-spacing:.005em;
  max-width:20ch;
}

.lead{
  font-size:clamp(1.06rem,1rem + .35vw,1.25rem);
  line-height:1.55;
  margin-top:0;
}

.two{ display:grid; gap:var(--gap); grid-template-columns:1.55fr 1fr; align-items:start; }
.two__main p{ max-width:56ch; }
.two__main p:last-child{ margin-bottom:0; }

.two__aside{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.two__aside li{
  display:flex; justify-content:space-between; gap:1rem;
  padding:.85rem 0; border-bottom:1px solid var(--line);
}
.two__aside .k{
  font:400 .7rem/1.4 var(--ff-mono);
  letter-spacing:.14em; text-transform:uppercase; color:var(--fg-soft);
}
.two__aside .v{ font-size:.92rem; text-align:right; }
.two__aside--plain{ border-top:0; }

/* ---------- kartice programa ---------- */

.cards{
  display:grid; gap:1px;
  grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));
  background:var(--line);
  border:1px solid var(--line);
}
.card{
  --card-pad:clamp(1.6rem,2.5vw,2.2rem);
  background:var(--paper);
  padding:var(--card-pad);
  display:flex; flex-direction:column;
  transition:background .2s;
}
.card:hover{ background:#fff; }
.card__h{
  margin:0 0 .9rem;
  font:400 1.42rem/1.2 var(--ff-disp);
}
.card__b{ margin:0 0 1.2rem; font-size:.95rem; color:#3c4a41; }
.card__m{
  margin:auto 0 1.3rem; padding-top:1rem;
  font:400 .72rem/1.5 var(--ff-mono);
  letter-spacing:.06em; color:var(--fg-soft);
  border-top:1px solid var(--line); width:100%;
}
.card__l{
  font:500 .88rem var(--ff-body);
  color:var(--oxblood); text-decoration:none;
  border-bottom:1px solid currentColor; padding-bottom:2px;
  align-self:flex-start;
}
.card__l:hover{ color:var(--ink); }

/* ---------- uzgoj / registar ---------- */

.breed{ }

.quote{
  margin:0 0 2rem;
  padding-left:clamp(1rem,2.5vw,2rem);
  border-left:2px solid var(--oxblood);
  font:400 clamp(1.3rem,1.05rem + 1.1vw,1.85rem)/1.35 var(--ff-disp);
  max-width:30ch;
}
.breed__note{ max-width:62ch; margin:0 0 2rem; color:#3c4a41; font-size:.97rem; }

.filters{ display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:1.6rem; }
.chip{
  font:400 .74rem/1 var(--ff-mono);
  letter-spacing:.1em;
  padding:.6rem .85rem;
  background:transparent;
  border:1px solid var(--line);
  color:var(--fg-soft);
  cursor:pointer;
  transition:background .16s, color .16s, border-color .16s;
}
.chip:hover{ border-color:var(--ink); color:var(--ink); }
.chip.is-on{ background:var(--ink); border-color:var(--ink); color:var(--chalk); }

.reg{ list-style:none; margin:0; padding:0; max-width:64rem; border-top:1px solid var(--line); }
.reg__i{
  display:grid;
  grid-template-columns:2.6rem minmax(0,1.25fr) minmax(0,1fr) auto;
  gap:1rem; align-items:baseline;
  padding:.9rem .5rem;
  border-bottom:1px solid var(--line);
  transition:background .16s;
}
.reg__i:hover{ background:var(--paper); }
.reg__i[hidden]{ display:none; }
.reg__g{
  font:500 .8rem/1 var(--ff-mono);
  letter-spacing:.08em; color:#8f6a1e;
}
.reg__p{ font:400 1.06rem/1.3 var(--ff-disp); }
.reg__n{ font-size:.92rem; color:var(--fg-soft); }
.reg__t{
  font:400 .88rem/1 var(--ff-mono);
  color:var(--oxblood); text-decoration:none; white-space:nowrap;
}
.reg__t:hover{ text-decoration:underline; }
.reg__t--x{ color:var(--fg-soft); opacity:.6; }

.reg__empty{ padding:1.6rem 0; color:var(--fg-soft); font-size:.94rem; }

.breed__foot{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:1rem; margin-top:1.8rem;
}
.breed__foot p{ margin:0; font-size:.92rem; color:var(--fg-soft); max-width:52ch; }

/* ---------- članstvo ---------- */

.join{
  background:var(--ink);
  color:var(--chalk);
  max-width:none;
  padding-block:clamp(4rem,8vw,7rem) 0;
  padding-inline:0;
}
.join > *{ max-width:calc(var(--maxw) - 2 * var(--pad)); margin-inline:auto; }

.steps{
  list-style:none; margin:0 auto 2.5rem; padding:0;
  display:grid; gap:0;
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
}
.step{
  padding:1.6rem 1.8rem 1.8rem 0;
  border-top:1px solid rgba(185,139,50,.34);
}
.step__n{
  display:block;
  font:400 .84rem/1 var(--ff-mono);
  letter-spacing:.2em; color:var(--brass); margin-bottom:1.1rem;
}
.step__h{ margin:0 0 .6rem; font:400 1.3rem/1.25 var(--ff-disp); }
.step p{ margin:0 0 1rem; font-size:.92rem; color:rgba(231,231,220,.72); }
.iban{
  font:500 .88rem/1 var(--ff-mono) !important;
  letter-spacing:.04em;
  color:var(--brass-lo) !important;
  border:1px solid rgba(185,139,50,.34);
  padding:.7rem .8rem; display:inline-block;
}

.join__wa{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:1.5rem;
  border-top:1px solid rgba(185,139,50,.34);
  padding-top:2rem;
  padding-bottom:clamp(3rem,6vw,5rem);
}
.join__wa p{ margin:0; max-width:52ch; font-size:.95rem; color:rgba(231,231,220,.78); }
.join__wa b{ color:var(--chalk); font-weight:500; }

/* ---------- kontakti ---------- */

.ppl{ width:100%; border-collapse:collapse; font-size:.9rem; }
.ppl tr{ border-bottom:1px solid var(--line); }
.ppl tr:first-child{ border-top:1px solid var(--line); }
.ppl th{
  text-align:left; font:400 .68rem/1.4 var(--ff-mono);
  letter-spacing:.14em; text-transform:uppercase; color:var(--fg-soft);
  padding:.9rem .8rem .3rem 0; display:block;
}
.ppl td{ padding:0 .8rem .35rem 0; display:block; }
.ppl td:nth-child(2){ font:400 1.05rem/1.3 var(--ff-disp); }
.ppl td:nth-child(3) a,
.ppl td:nth-child(4) a{
  font:400 .84rem var(--ff-mono); color:var(--oxblood); text-decoration:none;
}
.ppl td:last-child{ padding-bottom:.9rem; }
.ppl a:hover{ text-decoration:underline; }

/* ---------- novosti ---------- */

.news{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.news__i{
  display:grid; grid-template-columns:8rem minmax(0,1fr);
  gap:0 2rem; padding:1.5rem 0; border-bottom:1px solid var(--line);
}
.news__d{
  grid-column:1; grid-row:1 / span 2;
  font:400 .78rem/1.9 var(--ff-mono);
  letter-spacing:.05em; color:var(--fg-soft);
}
.news__h,.news__b{ grid-column:2; }
.news__h{ margin:0 0 .5rem; font:400 1.35rem/1.25 var(--ff-disp); }
.news__h a{ text-decoration:none; border-bottom:1px solid transparent; }
.news__h a:hover{ border-bottom-color:var(--oxblood); color:var(--oxblood); }
.news__b{ margin:0; font-size:.94rem; color:var(--fg-soft); max-width:58ch; }

/* =========================================================
   PODNOŽJE
   ========================================================= */

.foot{ background:var(--ink); color:var(--chalk); }
.foot__in{
  max-width:var(--maxw); margin-inline:auto;
  padding:clamp(3rem,6vw,4.5rem) var(--pad) 2.5rem;
  display:grid; gap:var(--gap);
  grid-template-columns:1.4fr repeat(4,1fr);
}
.foot__name{ margin:0 0 1rem; font:400 1.35rem/1.25 var(--ff-disp); }
.foot__name em{ font-style:normal; color:var(--brass-lo); }
.foot__adr{ margin:0; font:400 .82rem/1.7 var(--ff-mono); color:rgba(231,231,220,.6); }

.foot__col{ display:flex; flex-direction:column; gap:.55rem; }
.foot__col h2{
  margin:0 0 .5rem;
  font:400 .68rem/1 var(--ff-mono);
  letter-spacing:.18em; text-transform:uppercase; color:var(--brass);
}
.foot__col a{
  font-size:.88rem; color:rgba(231,231,220,.74); text-decoration:none;
  width:fit-content; border-bottom:1px solid transparent;
}
.foot__col a:hover{ color:var(--chalk); border-bottom-color:var(--brass); }

.foot__bar{
  max-width:var(--maxw); margin:0 auto;
  padding:1.4rem var(--pad) 2.2rem;
  border-top:1px solid rgba(185,139,50,.24);
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between;
  font:400 .74rem/1.6 var(--ff-mono);
  color:rgba(231,231,220,.5);
}
.foot__sig{ font-family:var(--ff-body); font-style:italic; letter-spacing:0; }

/* =========================================================
   RESPONZIVNO
   ========================================================= */

@media (max-width:1100px){
  .foot__in{ grid-template-columns:1fr 1fr 1fr; }
  .foot__brand{ grid-column:1 / -1; }
}

@media (max-width:900px){
  .nav{
    position:absolute; top:100%; left:0; right:0; z-index:39;
    flex-direction:column; gap:0;
    background:var(--ink);
    border-bottom:1px solid rgba(185,139,50,.3);
    padding:.5rem var(--pad) 1.5rem;
    display:none;
  }
  .nav.is-open{ display:flex; }
  .nav__list{ flex-direction:column; align-items:stretch; gap:0; width:100%; }
  .nav a{ display:block; padding:.9rem 0; border-bottom:1px solid rgba(231,231,220,.1); font-size:1rem; }
  .nav a:hover{ border-bottom-color:rgba(231,231,220,.1); }
  .nav .sub-menu{ position:static; display:flex; border:0; padding:0 0 .4rem 1rem; background:none; }
  .nav .sub-menu a{ padding:.6rem 0; font-size:.92rem; }
  .burger{ display:flex; }
  .lnk-out{ display:none; }
  .head__act{ margin-left:auto; }

  .two{ grid-template-columns:1fr; }
  .pl-lbl{ display:none; }
  .plan{ opacity:.72; }
  .hero__plate::after{
    background:linear-gradient(180deg, rgba(22,36,28,.96) 0%, rgba(22,36,28,.9) 46%, rgba(22,36,28,.55) 100%);
  }
  .news__i{ grid-template-columns:1fr; gap:.4rem; }
  .news__d,.news__h,.news__b{ grid-column:1; }
  .news__d{ grid-row:auto; }
}

@media (max-width:560px){
  .mark__txt b{ display:none; }
  .mark__txt i{ margin-top:0; font-size:1.05rem; }
  .head__in{ gap:1rem; }
  .head__act{ gap:.6rem; }
  .btn--sm{ padding:.6rem .85rem; font-size:.78rem; white-space:nowrap; }
}

@media (max-width:620px){
  .reg__i{ grid-template-columns:2.6rem 1fr; gap:.2rem .8rem; padding:1rem .3rem; }
  .reg__g{ grid-row:span 3; }
  .reg__t{ justify-self:start; }
  .facts > div{ flex:1 1 100%; border-right:0; padding-right:0; }
  .facts > div + div{ border-top:1px solid rgba(185,139,50,.16); }
  .hero__year{ -webkit-text-stroke-width:.7px; }
  .join__wa{ flex-direction:column; align-items:flex-start; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .pl-fade{ opacity:1; }
}

/* oprema na terenu */
.kit{ list-style:none; margin:2rem 0 0; padding:0; border-top:1px solid var(--line); max-width:30rem; }
.kit li{
  display:flex; justify-content:space-between; gap:1rem;
  padding:.7rem 0; border-bottom:1px solid var(--line);
  font:400 .82rem/1.5 var(--ff-mono); letter-spacing:.06em;
  color:var(--fg-soft);
}
.kit b{ font-weight:400; color:var(--ink); letter-spacing:.1em; }


/* =========================================================
   PODSTRANICE
   ========================================================= */

.phead{
  background:var(--ink);
  color:var(--chalk);
  border-bottom:1px solid rgba(185,139,50,.28);
}
.phead__in{
  max-width:var(--maxw); margin-inline:auto;
  padding:clamp(3rem,7vw,5.5rem) var(--pad) clamp(2.5rem,5vw,4rem);
}
.phead .eyebrow{ color:var(--brass-lo); }
.phead .eyebrow a{ color:inherit; text-decoration:none; border-bottom:1px solid rgba(216,184,119,.4); }
.phead .eyebrow a:hover{ color:var(--chalk); border-bottom-color:var(--chalk); }
.phead__h{
  margin:0;
  font:400 clamp(2.1rem,1.4rem + 2.8vw,3.6rem)/1.08 var(--ff-disp);
  letter-spacing:.005em;
  max-width:22ch;
}
.phead__lede{
  margin:1.4rem 0 0;
  max-width:46ch;
  font-size:clamp(1.02rem,.98rem + .3vw,1.16rem);
  color:rgba(231,231,220,.8);
}

.sec--uska .prose,
.sec--uska .trazi,
.sec--uska .kit{ max-width:62ch; }

/* ---------- uređivački sadržaj ---------- */

.prose{ max-width:60ch; }
.prose > *:first-child{ margin-top:0; }
.prose > *:last-child{ margin-bottom:0; }
.prose p{ margin:0 0 1.15em; }
.prose h2{
  margin:2.4em 0 .7em;
  font:400 clamp(1.5rem,1.2rem + 1vw,2rem)/1.2 var(--ff-disp);
}
.prose h3{
  margin:2em 0 .6em;
  font:400 1.3rem/1.25 var(--ff-disp);
}
.prose h4{
  margin:1.8em 0 .5em;
  font:400 .74rem/1.4 var(--ff-mono);
  letter-spacing:.18em; text-transform:uppercase; color:var(--fg-soft);
}
.prose a{ color:var(--oxblood); text-decoration:none; border-bottom:1px solid currentColor; }
.prose a:hover{ color:var(--ink); }
.prose ul,.prose ol{ margin:0 0 1.15em; padding-left:1.3em; }
.prose li{ margin-bottom:.4em; }
.prose ul{ list-style:none; padding-left:0; }
.prose ul li{ position:relative; padding-left:1.4em; }
.prose ul li::before{
  content:""; position:absolute; left:.2em; top:.72em;
  width:.42em; height:1px; background:var(--brass);
}
.prose blockquote{
  margin:1.8em 0; padding-left:1.4rem;
  border-left:2px solid var(--oxblood);
  font:400 1.22rem/1.45 var(--ff-disp);
}
.prose blockquote p:last-child{ margin-bottom:0; }
.prose code,.prose kbd{ font:400 .88em var(--ff-mono); background:var(--paper); padding:.1em .35em; }
.prose hr{ border:0; border-top:1px solid var(--line); margin:2.4em 0; }
.prose img{ height:auto; }
.prose figure{ margin:1.8em 0; }
.prose figcaption{
  margin-top:.6rem;
  font:400 .78rem/1.5 var(--ff-mono); letter-spacing:.06em; color:var(--fg-soft);
}
.prose table{ width:100%; border-collapse:collapse; font-size:.92rem; margin:0 0 1.6em; }
.prose th,.prose td{ text-align:left; padding:.7rem .8rem .7rem 0; border-bottom:1px solid var(--line); }
.prose th{
  font:400 .68rem/1.4 var(--ff-mono);
  letter-spacing:.14em; text-transform:uppercase; color:var(--fg-soft);
}
.prose__slika{ margin:0 0 2.5rem; }
.prose__slika img{ width:100%; height:auto; }

/* ---------- tlocrt kao samostalna ploča ---------- */

.planplate{
  margin:0;
  background:var(--ink);
  border:1px solid rgba(185,139,50,.3);
}
.planplate .plan{ height:clamp(20rem,42vw,30rem); }
.planplate figcaption{
  padding:.9rem 1.2rem;
  border-top:1px solid rgba(185,139,50,.24);
  font:400 .72rem/1.5 var(--ff-mono);
  letter-spacing:.16em; text-transform:uppercase;
  color:rgba(216,184,119,.65);
}

/* ---------- naslov kartice kao poveznica ---------- */

.card__h a{ text-decoration:none; border-bottom:1px solid transparent; }
.card__h a:hover{ color:var(--oxblood); border-bottom-color:var(--oxblood); }
.card__m--solo{ margin:0 0 1.4rem; border-top:0; border-bottom:1px solid var(--line); padding:0 0 1rem; }

.aside__h{
  margin:2.4rem 0 .9rem;
  font:400 .68rem/1 var(--ff-mono);
  letter-spacing:.18em; text-transform:uppercase; color:var(--fg-soft);
}
.two__aside--plain > .aside__h:first-child{ margin-top:0; }

/* ---------- straničenje i navigacija objava ---------- */

.pager,
.navigation.pagination{ margin-top:2.5rem; }
.nav-links{
  display:flex; flex-wrap:wrap; gap:.4rem;
  font:400 .82rem/1 var(--ff-mono);
}
.nav-links .page-numbers{
  display:inline-block; padding:.7rem .9rem;
  border:1px solid var(--line);
  color:var(--fg-soft); text-decoration:none;
}
.nav-links .page-numbers:hover{ border-color:var(--ink); color:var(--ink); }
.nav-links .page-numbers.current{ background:var(--ink); border-color:var(--ink); color:var(--chalk); }
.nav-links .dots{ border-color:transparent; }

.postnav{
  display:flex; flex-wrap:wrap; gap:1px;
  margin-top:3rem; background:var(--line); border:1px solid var(--line);
}
.postnav__a{
  flex:1 1 15rem; background:var(--paper); padding:1.3rem 1.5rem;
  text-decoration:none; display:flex; flex-direction:column; gap:.35rem;
}
.postnav__a:hover{ background:#fff; }
.postnav__a span{
  font:400 .68rem/1 var(--ff-mono);
  letter-spacing:.18em; text-transform:uppercase; color:var(--oxblood);
}
.postnav__a b{ font:400 1.08rem/1.3 var(--ff-disp); }
.postnav__a--r{ text-align:right; align-items:flex-end; }

/* ---------- pretraživanje ---------- */

.trazi{ display:flex; gap:.5rem; margin:0 0 2.5rem; max-width:32rem; }
.trazi input[type="search"]{
  flex:1; min-width:0;
  padding:.8rem .9rem;
  font:400 .95rem var(--ff-body);
  color:var(--ink);
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:0;
}
.trazi input[type="search"]:focus{ outline:2px solid var(--oxblood); outline-offset:1px; }

/* ---------- klase WordPressa ---------- */

.screen-reader-text{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.alignleft{ float:left; margin:.4rem 1.6rem 1rem 0; }
.alignright{ float:right; margin:.4rem 0 1rem 1.6rem; }
.aligncenter{ display:block; margin-inline:auto; }
.alignwide,.alignfull{ max-width:none; }
.wp-caption{ max-width:100%; }
.wp-caption-text{
  margin-top:.6rem;
  font:400 .78rem/1.5 var(--ff-mono); letter-spacing:.06em; color:var(--fg-soft);
}
.sticky .news__h::after{ content:" ✱"; color:var(--brass); }

@media (max-width:620px){
  .postnav__a--r{ text-align:left; align-items:flex-start; }
  .trazi{ flex-direction:column; }
}


/* =========================================================
   FOTOGRAFIJE

   Snimke s izložbi dolaze sa svakojakim pozadinama — magenta
   kulisama, crvenim tepisima, zelenim plakatima. Duotone ih drži
   u paleti; na prelazak mišem se vraćaju u punu boju.
   ========================================================= */

.foto{
  position:relative;
  display:block;
  aspect-ratio:var(--omjer,4 / 3);
  overflow:hidden;
  background:var(--ink);
}
.foto img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transition:filter .35s ease, transform .5s cubic-bezier(.2,.7,.3,1);
}

/* duotone: svijetla mjesta u oker, sjene u loden */
.foto--duo{ background:var(--duo-lo); isolation:isolate; }
.foto--duo img{ filter:grayscale(1) contrast(1.06); mix-blend-mode:multiply; }
.foto--duo::after{
  content:""; position:absolute; inset:0;
  background:var(--ink);
  mix-blend-mode:lighten;
  transition:opacity .35s ease;
  pointer-events:none;
}

a:hover > .foto--duo img,
a:focus-visible > .foto--duo img,
.card:hover .foto--duo img,
.galerija__i:hover .foto--duo img,
.traka__glavna:hover .foto--duo img,
.traka__mala:hover .foto--duo img{
  filter:none;
  mix-blend-mode:normal;
  transform:scale(1.02);
}
a:hover > .foto--duo::after,
a:focus-visible > .foto--duo::after,
.card:hover .foto--duo::after,
.galerija__i:hover .foto--duo::after,
.traka__glavna:hover .foto--duo::after,
.traka__mala:hover .foto--duo::after{ opacity:0; }

/* prazno stanje — milimetarski papir umjesto sive plohe */
.foto--prazno{
  background:
    linear-gradient(rgba(185,139,50,.14) 1px, transparent 1px) 0 0 / 100% 36px,
    linear-gradient(90deg, rgba(185,139,50,.14) 1px, transparent 1px) 0 0 / 36px 100%,
    var(--ink);
  display:grid; place-items:center;
  border:1px solid rgba(185,139,50,.22);
}
.foto__prazno{
  font:400 .68rem/1 var(--ff-mono);
  letter-spacing:.22em; text-transform:uppercase;
  color:rgba(216,184,119,.5);
}

/* ---------- kartice programa s fotografijom ---------- */

.card--foto{ padding-top:0; }
.card__foto{
  display:block;
  margin:0 calc(-1 * var(--card-pad)) 1.5rem;
}

/* ---------- traka fotografija na naslovnici ---------- */

.traka{
  background:var(--ink);
  color:var(--chalk);
  padding:clamp(3rem,6vw,5rem) 0;
}
.traka__in{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
.traka__head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:1.5rem; flex-wrap:wrap; margin-bottom:1.8rem;
}
.traka__h{
  margin:0;
  font:400 .72rem/1 var(--ff-mono);
  letter-spacing:.24em; text-transform:uppercase; color:var(--brass-lo);
}
.traka__grid{ display:grid; gap:1px; grid-template-columns:1.55fr 1fr; background:rgba(185,139,50,.22); }
.traka__male{ display:grid; gap:1px; grid-template-rows:repeat(3,1fr); background:rgba(185,139,50,.22); }
.traka figure{ margin:0; background:var(--ink); }
.traka__glavna figcaption{
  display:flex; flex-direction:column; gap:.3rem;
  padding:1rem 1.2rem;
}
.traka__glavna figcaption b{ font:400 1.15rem/1.3 var(--ff-disp); }
.traka__glavna figcaption span{
  font:400 .72rem/1.5 var(--ff-mono);
  letter-spacing:.1em; color:rgba(216,184,119,.62);
}
.traka__mala{ display:grid; grid-template-columns:1fr; }
.traka__mala figcaption{
  padding:.7rem 1rem;
  font:400 .72rem/1.4 var(--ff-mono);
  letter-spacing:.08em; color:rgba(231,231,220,.6);
}

/* ---------- novosti sa sličicom ---------- */

.news__i--foto{ grid-template-columns:8rem minmax(0,1fr) 11rem; }
.news__foto{ grid-column:3; grid-row:1 / span 3; align-self:start; display:block; }

/* ---------- široka ploča uz objavu i program ---------- */

.ploca{ margin:0 0 2.5rem; background:var(--ink); }
.ploca img{ width:100%; height:auto; display:block; }
.ploca figcaption{
  padding:.8rem 1.1rem;
  font:400 .74rem/1.5 var(--ff-mono);
  letter-spacing:.08em; color:rgba(216,184,119,.7);
}
.ploca--vrh{ margin-bottom:clamp(2rem,4vw,3rem); }

/* ---------- fotografija u zaglavlju podstranice ---------- */

.phead--foto{ position:relative; isolation:isolate; overflow:hidden; }
.phead__foto{
  position:absolute; inset:0; z-index:-1;
  background:var(--duo-lo);
}
.phead__foto img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:grayscale(1) contrast(1.05);
  mix-blend-mode:multiply;
  opacity:.5;
}
.phead__foto::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(92deg, var(--ink) 22%, rgba(22,36,28,.88) 52%, rgba(22,36,28,.62) 100%);
}

/* ---------- galerija ---------- */

.galerija{
  display:grid; gap:1px;
  grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));
  background:var(--line);
  border:1px solid var(--line);
}
.galerija__i{ margin:0; background:var(--paper); }
.galerija__i a{ display:block; }
.galerija__i figcaption{
  display:flex; flex-direction:column; gap:.25rem;
  padding:.9rem 1.1rem 1.1rem;
}
.galerija__i figcaption b{ font:400 1.05rem/1.3 var(--ff-disp); }
.galerija__i figcaption span{
  font:400 .7rem/1.5 var(--ff-mono);
  letter-spacing:.08em; color:var(--fg-soft);
}

@media (max-width:900px){
  .traka__grid{ grid-template-columns:1fr; }
  .traka__male{ grid-template-rows:none; grid-template-columns:repeat(3,1fr); }
  .news__i--foto{ grid-template-columns:1fr; }
  .news__foto{ grid-column:1; grid-row:auto; max-width:20rem; }
}

@media (max-width:620px){
  .traka__male{ grid-template-columns:1fr; }
}

@media (hover:none){
  .foto--duo img{ filter:none; mix-blend-mode:normal; }
  .foto--duo::after{ opacity:0; }
}

/* =========================================================
   ŠIROKI I ULTRAŠIROKI ZASLONI

   Na 3440 px sadržaj u 78rem stupcu ostavlja 68% praznine, a tlocrt u herou
   „slice" razvuče preko cijele širine i odreže sve osim sredine. Stupac zato
   raste u dva koraka, a ploča s tlocrtom dobiva gornju granicu i lijepi se
   uz desni rub.
   ========================================================= */

@media (min-width:1600px){
  :root{ --maxw:90rem; }
}

@media (min-width:2000px){
  :root{ --maxw:102rem; --pad:6rem; }

  .hero__plate{ left:auto; right:0; width:min(100%, 1900px); }
  .hero__plate::after{
    background:linear-gradient(100deg, var(--ink) 36%, rgba(22,36,28,.94) 48%, rgba(22,36,28,.2) 72%, rgba(22,36,28,.5) 100%);
  }
}

@media (prefers-reduced-motion:reduce){
  .foto img{ transition:none; }
  a:hover > .foto--duo img,
  .card:hover .foto--duo img,
  .galerija__i:hover .foto--duo img{ transform:none; }
}