/* ═══════════════════════════════════════════════════════════════
   Zeus — vizualna dorada (polish). Dodano 12.10.2026.
   Aditivno: ne prepisuje postojeća pravila site.css, samo dodaje
   „premium" detalje (zlatna hairline, glow, mikro-animacije).
   Sve je CSS — bez JS-a → ne dira CSP. Poštuje reduced-motion.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Kicker: kratka zlatna crta ispred ─────────────────── */

.kicker{
  position: relative;
  padding-left: 1.15rem;
}
.kicker::before{
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: .7rem; height: 2px;
  translate: 0 -50%;
  background: linear-gradient(90deg, var(--accent), transparent);
}

/* ── 2. Akcent: topla zlatna podvlaka ─────────────────────── */

.section-head h2 .accent{
  background-image: linear-gradient(90deg, var(--accent), var(--accent-lt));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ── 3. Kartice: zlatna hairline koja raste na hover ──────── */

.card{
  position: relative;
  overflow: hidden;
}
.card::after{
  content: "";
  position: absolute;
  left: 0; top: 0;
  height: 2px; width: 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-lt));
  transition: width .45s var(--ease);
}
.card:hover::after,
.card:focus-within::after{ width: 100%; }

/* ikona dobije zlatni ton na hover */
.card:hover .card-icon,
.card:focus-within .card-icon{
  color: var(--accent-lt);
  transform: translateY(-2px);
}
.card .card-icon{ transition: color .35s var(--ease), transform .35s var(--ease); }

/* ── 4. Istaknuti plan: zlatni obrub + blagi sjaj ─────────── */

.plan-featured{
  box-shadow: 0 24px 60px -34px rgba(232,185,58,.55);
}
.plan-featured::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(140deg, rgba(246,216,117,.65), transparent 42%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

/* ── 5. Projekti: slika se lagano uveća na hover ──────────── */

.work-media{ overflow: hidden; }
.work-media img{
  transition: transform .6s var(--ease);
  will-change: transform;
}
.work-item:hover .work-media img{ transform: scale(1.04); }

/* ── 6. Tim: zlatni prsten oko avatara na hover ───────────── */

.person-avatar{ transition: transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease); }
.person:hover .person-avatar{
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: 0 0 0 6px var(--accent-dim);
}

/* ── 7. Koraci: broj dobije zlatni sjaj ───────────────────── */

.step-num{ transition: color .35s var(--ease), text-shadow .35s var(--ease); }
.step:hover .step-num,
.step.in .step-num{
  color: var(--accent-lt);
  text-shadow: 0 0 18px rgba(232,185,58,.35);
}

/* ── 8. Dugmad: topliji sjaj na hover ─────────────────────── */

.btn{ transition: transform .3s var(--ease), box-shadow .35s var(--ease), background .3s var(--ease), color .3s var(--ease); }

/* ── Pristupačnost ────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce){
  .card::after,
  .card .card-icon,
  .work-media img,
  .person-avatar,
  .step-num,
  .btn{ transition: none; }
  .work-item:hover .work-media img{ transform: none; }
}

@media print{
  .card::after,
  .kicker::before,
  .plan-featured::after{ display: none; }
}