/* =========================================================
   CITY PAGES – match Websites page (light bg + dark cards)
   + PRO CANVAS BRUSH REVEAL per city (11 cities)
   ========================================================= */

/* =========================
   0) City image mapping (11)
   NOTE: city-pages.css je u /styles/, zato koristimo ../media/...
   ========================= */
   body.city-dubrovnik{ --city-img:url("../media/cities/dubrovnik.jpeg"); }
   body.city-zagreb{ --city-img:url("../media/cities/zagreb.jpeg"); }
   body.city-split{ --city-img:url("../media/cities/split.jpeg"); }
   body.city-rijeka{ --city-img:url("../media/cities/rijeka.jpeg"); }
   body.city-osijek{ --city-img:url("../media/cities/osijek.jpeg"); }
   body.city-zadar{ --city-img:url("../media/cities/zadar.jpeg"); }
   body.city-pula{ --city-img:url("../media/cities/pula.jpeg"); }
   body.city-slavonski-brod{ --city-img:url("../media/cities/slavonski-brod.jpeg"); }
   body.city-karlovac{ --city-img:url("../media/cities/karlovac.jpeg"); }
   body.city-varazdin{ --city-img:url("../media/cities/varazdin.jpeg"); }
   body.city-sibenik{ --city-img:url("../media/cities/sibenik.jpeg"); }
   
   /* fallback ako zaboraviš class */
   :root{
     --city-img: url("../media/cities/dubrovnik.jpeg");
   }
   
   /* =========================
      1) Theme vars
      ========================= */
   :root{
     --av-dark: #0b1220;
     --av-dark2:#0e1628;
     --av-accent:#61a0ff;
     --av-accent2:#4474BA;
   
     --txt: rgba(11,18,32,0.82);
     --txt-soft: rgba(11,18,32,0.72);
   
     --card-border: rgba(255,255,255,0.12);
     --card-shadow: 0 22px 60px rgba(0,0,0,0.32);
     --chip-shadow: 0 10px 26px rgba(12,18,32,0.08);
   
     /* ===== Brush controls (JS čita ove varijable) ===== */
     --brush-size: 40px;          /* manji krug (povećaj/smanji) */
     --brush-soft: 0.72;          /* 0-1: rub mekši/jači */
     --brush-density: 1.0;        /* jačina poteza */
     --brush-fade-seconds: 1;   /* koliko ostane prije fade */
     --brush-fade-speed: 0.035;
     --brush-ttl-ms: 900;     /* koliko traje trag (ms) */
      --brush-step: 18;        /* razmak dabova (px) */
      --brush-max: 220;   /* brzina brisanja maske */
   }
   
   /* =========================
      2) CANVAS BRUSH LAYER
      ========================= */
   
   /* ugasi stari sistem (div mask) da se ne sudara */
   .city-brush,
   .city-brush-img{
     display:none !important;
   }
   
   /* canvas ubacuje JS (scripts/city-brush.js) */
   .city-brush-canvas{
     position: fixed;
     inset: 0;
     width: 100vw;
     height: 100vh;
     z-index: 0;
     pointer-events: none;
   }
   
   /* sav sadržaj iznad canvasa */
   body.city-page > *:not(canvas.city-brush-canvas){
     z-index: 1;
   }
   
   /* =========================
      3) Layout + typography
      ========================= */
   .city-wrap{
     max-width:1100px;
     margin:28px auto;
     padding:0 16px;
     color: var(--av-dark);
   }
   
   .city-wrap h1,
   .city-wrap h2{
     color: var(--av-dark);
     font-weight:900;
     letter-spacing:.2px;
     margin:0;
   }
   
   .city-hero{
     padding:26px 0 10px;
   }
   
   .city-hero h1{
     text-shadow:0 8px 22px rgba(0,0,0,0.10);
   }
   
   .city-hero p,
   .city-kicker,
   .city-local,
   .city-wrap p{
     color: var(--txt);
     line-height:1.75;
   }
   
   /* =========================
      4) Badges
      ========================= */
   .city-badges{
     display:flex;
     gap:10px;
     flex-wrap:wrap;
     margin-top:14px;
     justify-content:center;
   }
   
   .city-badge{
     display:inline-flex;
     align-items:center;
     gap:8px;
     padding:9px 12px;
     border-radius:999px;
     font-weight:900;
     font-size:.85rem;
     color: var(--av-dark);
     background: rgba(255,255,255,0.78);
     border:1px solid rgba(15,23,42,0.14);
     box-shadow: var(--chip-shadow);
   }
   
   /* =========================
      5) Services grid + cards
      ========================= */
   .city-grid{
     display:grid;
     grid-template-columns:repeat(3,minmax(0,1fr));
     gap:18px;
     margin-top:22px;
   }
   
   .city-card{
     border-radius:22px;
     padding:20px;
     color:#ffffff;
     background: linear-gradient(180deg,var(--av-dark) 0%, var(--av-dark2) 100%);
     border:1px solid var(--card-border);
     box-shadow: var(--card-shadow);
     transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
     will-change: transform;
   }
   
   .city-card:hover{
     transform: translateY(-2px);
     border-color: rgba(97,160,255,0.35);
     box-shadow:0 26px 70px rgba(0,0,0,0.38);
   }
   
   .city-card h2,
   .city-card h3{
     margin:0 0 10px;
     font-weight:900;
     color:#fff;
   }
   
   .city-card p{
     margin:0;
     color:rgba(255,255,255,0.82);
     line-height:1.7;
   }
   
   .city-list{
     margin:10px 0 0;
     padding-left:18px;
     color:rgba(255,255,255,0.86);
     line-height:1.7;
   }
   
   .city-list li{ margin:6px 0; }
   
   .city-card i{
     color: var(--av-accent);
   }
   
   /* =========================
      6) CTA buttons
      ========================= */
   .city-cta{
     margin-top:18px;
     display:flex;
     gap:12px;
     flex-wrap:wrap;
     align-items:center;
     justify-content:center;
   }
   
   .city-btn{
     display:inline-flex;
     align-items:center;
     gap:10px;
     text-decoration:none;
     font-weight:900;
     padding:12px 18px;
     border-radius:999px;
     color:#fff;
     background: linear-gradient(135deg,var(--av-accent2) 0%, var(--av-accent) 100%);
     border:1px solid rgba(97,160,255,0.45);
     box-shadow:0 12px 30px rgba(97,160,255,0.35);
     transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
   }
   
   .city-btn:hover{
     transform: translateY(-1px);
     box-shadow:0 18px 44px rgba(97,160,255,0.55);
     filter:saturate(1.08);
   }
   
   .city-btn.secondary{
     color: var(--av-dark);
     background: rgba(255,255,255,0.88);
     border:1px solid rgba(15,23,42,0.16);
     box-shadow:0 10px 26px rgba(12,18,32,0.10);
   }
   
   .city-btn.secondary:hover{
     box-shadow:0 14px 34px rgba(12,18,32,0.14);
   }
   
   /* =========================
      7) Local SEO block
      ========================= */
   .city-local{
     margin-top:18px;
     color: var(--txt-soft);
   }
   
   /* =========================
      8) FAQ centered + clean
      ========================= */
   .city-faq{
     max-width: 920px;
     margin: 26px auto 0;
     padding: 0 16px;
   }
   
   .city-faq > h2{
     text-align:center;
     margin: 0 0 16px;
   }
   
   .faq-grid2{
     display:grid;
     grid-template-columns:repeat(2,minmax(0,1fr));
     gap:14px;
     max-width: 920px;
     margin: 0 auto;
   }
   
   .faq-item2{
     border-radius:20px;
     padding:16px 18px;
     color:#fff;
     background: linear-gradient(180deg,var(--av-dark) 0%, var(--av-dark2) 100%);
     border:1px solid var(--card-border);
     box-shadow:0 18px 54px rgba(0,0,0,0.28);
     min-height:150px;
     display:flex;
     flex-direction:column;
     justify-content:center;
     text-align:center;
   }
   
   .faq-item2 h3{
     margin:0 0 8px;
     color:#fff;
     font-weight:900;
   }
   
   .faq-item2 p{
     margin:0;
     color:rgba(255,255,255,0.82);
     line-height:1.7;
   }

   /* =========================
      9) Responsive
      ========================= */
   @media(max-width:900px){
     .city-grid{ grid-template-columns:1fr; }
     .faq-grid2{ grid-template-columns:1fr; max-width:100%; }
   }