/* ═══════════════════════════════════════════════════════════════
   Biroplast Solutions — V2 GLOBALNI CARD INTERACTION SYSTEM
   ("BIROPLAST CARD MOTION LANGUAGE")

   9. 9. 2026 — brif "GLOBALNA ANIMACIJA KARTIC / INTERAKTIVNIH OKEN":
   referenca je bila obstoječa ".dj-panoga" (dejavnosti.css, karte
   panog na dejavnosti.html) — ta datoteka isti občutek (elevation +
   border + senca + ikona + puščica) naredi PONOVNO UPORABLJIVEGA za
   vse kartice, ki so bile do zdaj popolnoma statične (glej revizijo
   v dnevniku — .zap-kartica, .dj-tocka, .dj-zakoga-kartica,
   .kt-oddelek, .tsk-vrsta, .pr-korak, .pr-program, .sz-info,
   .dl-prevzem-detajl …), intenziteta ~20-30% bolj izrazita kot
   referenca, NE 100%.

   Kartice, ki so ŽE imele bogato, dovršeno bespoke hover stanje
   (.dj-panoga, .resitev-kartica, .dejavnost-kart, .izr-izbira--produkt,
   .db-model, .dj-kombinacija-kartica, .zn-znamka, .paket, .sv-pot) NISO
   preklopljene na ta skupni razred — vsaka od njih uporablja LASTEN
   ::before/::after za svojo bespoke dekoracijo (tekstura, cirkuit,
   accent črta …), kar bi trčilo s ::before/::after tega sistema. Namesto
   tega so bile njihove obstoječe vrednosti ROČNO uglašene na isto
   intenziteto/jezik (glej dnevnik) — isti "family", ne isti razred.
   To NI podvajanje po nesreči, ampak namerna arhitekturna odločitev
   (glej tudi depth-system.css/zn-znamka: enak vzorec že uveljavljen
   v projektu).

   ── UPORABA (HTML) ──────────────────────────────────────────────
   Kartici POLEG obstoječih page-specific razredov dodaj:
     card-interactive                    (OBVEZNO — nosi tranzicije)
     + natanko ENO od:
       card-interactive--subtle          informativna, NI clickable
                                          (rahla elevacija + border,
                                          BREZ animiranega "risanja"
                                          obrobe in BREZ ambient glowa)
       card-interactive--clickable       cela kartica je <a>/<button>
                                          (polna elevacija + scale +
                                          animirana cyan obroba + glow)
       card-interactive--featured        aktivno/izbrano stanje, ki ga
                                          hover ne sme preglasiti —
                                          obroba+glow sta privzeto ŽE
                                          delno prisotna

   Ikona (".icon-box") in naslov ("h3") znotraj kartice se odzoveta
   SAMODEJNO — ni ju treba posebej označevati. Za puščico/CTA svg, ki
   ni že del ".btn-text" (ta ima svoj hover), dodaj razred "ci-arrow"
   na sam <svg> ali njegov ovojni <span>. Za produktno fotografijo
   dodaj "ci-media" na <img>. Za zelo redek tehnični detajl (t. 8
   brifa — uporabljaj SELEKTIVNO) dodaj "ci-tech" na majhen vozel/
   črto element.
   ═══════════════════════════════════════════════════════════════ */

.card-interactive{
  position:relative;
  transition:
    transform var(--dur-med) var(--ease-premium),
    box-shadow var(--dur-med) var(--ease-premium),
    border-color var(--dur-med) var(--ease-premium),
    background var(--dur-med) var(--ease-premium);
}

/* animirana cyan/modra obroba, ki se ob hoverju "nariše" iz vseh
   štirih vogalov hkrati (background-size trik na štirih linearnih
   gradientih — performant, brez JS, brez potrebe po @property).
   Samo za --clickable/--featured (t. 2 in t. 11 brifa: NI vse
   clickable, subtle kartice dobijo samo direkten border-color). */
.card-interactive--clickable::after,
.card-interactive--featured::after{
  content:'';
  position:absolute; inset:0; z-index:2; pointer-events:none;
  border-radius:inherit;
  background:
    linear-gradient(var(--cyan), var(--cyan)) left top / 0% 2px no-repeat,
    linear-gradient(var(--cyan), var(--cyan)) right top / 2px 0% no-repeat,
    linear-gradient(var(--cyan), var(--cyan)) right bottom / 0% 2px no-repeat,
    linear-gradient(var(--cyan), var(--cyan)) left bottom / 2px 0% no-repeat;
  opacity:0;
  transition:background-size var(--dur-slow) var(--ease-premium), opacity var(--dur-fast) var(--ease-premium);
}

/* zelo subtilen ambient glow v vogalu (t. 4 brifa) — ločen pseudo
   (::before), da ne trči z obrobo (::after) zgoraj. */
.card-interactive--clickable::before,
.card-interactive--featured::before{
  content:'';
  position:absolute; inset:0; z-index:0; pointer-events:none; border-radius:inherit;
  background:radial-gradient(160px circle at 88% 6%, rgba(23,185,236,.10), transparent 70%);
  opacity:0;
  transition:opacity var(--dur-med) var(--ease-premium);
}

@media (hover:hover) and (pointer:fine){
  .card-interactive--subtle:hover, .card-interactive--subtle:focus-visible{
    transform:translateY(-3px);
    box-shadow:0 8px 22px rgba(42,61,80,.07);
    border-color:rgba(23,185,236,.32);
  }
  .card-interactive--clickable:hover, .card-interactive--clickable:focus-visible{
    transform:translateY(-4px) scale(1.008);
    box-shadow:0 12px 30px rgba(42,61,80,.1);
    border-color:rgba(23,185,236,.4);
  }
  .card-interactive--featured{ border-color:rgba(23,185,236,.32); }
  .card-interactive--featured:hover, .card-interactive--featured:focus-visible{
    transform:translateY(-4px) scale(1.008);
    box-shadow:0 14px 34px rgba(42,61,80,.12);
    border-color:rgba(23,185,236,.5);
  }
  .card-interactive--featured::before{ opacity:.5; }

  .card-interactive--clickable:hover::after, .card-interactive--clickable:focus-visible::after,
  .card-interactive--featured:hover::after, .card-interactive--featured:focus-visible::after{
    opacity:1;
    background-size:100% 2px, 2px 100%, 100% 2px, 2px 100%;
  }
  .card-interactive--clickable:hover::before, .card-interactive--clickable:focus-visible::before,
  .card-interactive--featured:hover::before, .card-interactive--featured:focus-visible::before{ opacity:1; }

  /* ikona (t. 5 brifa) — deluje samodejno na katerikoli ".icon-box"
     znotraj kartice, brez dodatnega HTML razreda. */
  .card-interactive .icon-box{ transition:transform var(--dur-med) var(--ease-premium), background var(--dur-med) var(--ease-premium), color var(--dur-med) var(--ease-premium); }
  .card-interactive:hover .icon-box, .card-interactive:focus-visible .icon-box{ transform:translateY(-2px) scale(1.05); background:rgba(23,185,236,.14); color:var(--blue); }
  .card-interactive:hover .icon-box.blue, .card-interactive:focus-visible .icon-box.blue{ background:rgba(24,165,75,.14); color:var(--green); }

  /* naslov (t. 7 brifa) — temna navy → nekoliko izrazitejša (navy-deep),
     NE svetlo modra, tipografija ostane resna. */
  .card-interactive h3{ transition:color var(--dur-med) var(--ease-premium); }
  .card-interactive:hover h3, .card-interactive:focus-visible h3{ color:var(--navy-deep); }

  /* puščica (t. 6 brifa) — samo za elemente, ki niso že del
     ".btn-text" (ta ima svoj lasten hover, glej components.css). */
  .ci-arrow{ transition:transform .3s var(--ease-premium), color .3s var(--ease-premium); display:inline-flex; }
  .card-interactive:hover .ci-arrow, .card-interactive:focus-visible .ci-arrow{ transform:translateX(5px); color:var(--blue); }

  /* produktna fotografija (t. 14 brifa). */
  .ci-media{ transition:transform var(--dur-med) var(--ease-premium); }
  .card-interactive:hover .ci-media, .card-interactive:focus-visible .ci-media{ transform:translateY(-3px) scale(1.015); }

  /* zelo redek tehnični detajl (t. 8 brifa) — privzeto skoraj neviden. */
  .ci-tech{ opacity:0; transition:opacity var(--dur-med) var(--ease-premium), transform var(--dur-med) var(--ease-premium); }
  .card-interactive:hover .ci-tech, .card-interactive:focus-visible .ci-tech{ opacity:.55; transform:translate(2px,-2px); }
}

/* dotik (t. 17 brifa) — samo zelo subtilen tap feedback, brez hover-only
   informacij; vse pomembno mora biti vidno tudi brez hoverja. */
@media (hover:none){
  .card-interactive--clickable:active, .card-interactive--featured:active{
    transform:scale(.99); transition:transform .15s var(--ease-premium);
  }
}

/* prefers-reduced-motion (t. 18 brifa) — odstrani translate/scale/
   premikajočo obrobo, pusti samo barvo/border/senco (te ostanejo
   instant, ker so --dur-* žetoni že globalno postavljeni na 0s v
   tokens.css pod isto media poizvedbo). */
@media (prefers-reduced-motion:reduce){
  .card-interactive--subtle:hover, .card-interactive--subtle:focus-visible,
  .card-interactive--clickable:hover, .card-interactive--clickable:focus-visible,
  .card-interactive--featured:hover, .card-interactive--featured:focus-visible{ transform:none; }
  .card-interactive:hover .icon-box, .card-interactive:focus-visible .icon-box,
  .card-interactive:hover .ci-arrow, .card-interactive:focus-visible .ci-arrow,
  .card-interactive:hover .ci-media, .card-interactive:focus-visible .ci-media,
  .card-interactive:hover .ci-tech, .card-interactive:focus-visible .ci-tech{ transform:none; }
  .card-interactive--clickable:hover::after, .card-interactive--featured:hover::after{ transition:none; }
}