/* ═══════════════════════════════════════════════════════════════
   Biroplast Solutions V2 — PREMIUM CARD BACKGROUND (10. 9. 2026)

   NAMEN: "na vseh preostalih belih karticah / content boxih uporabi
   enak subtilen premium background treatment kot pri karticah z
   modro-zelenimi dekorativnimi elementi" — referenca je ".resitev-kartica"
   (pages.css, index.html "Rešitve"), edina kartica na strani, ki ŽE ima
   vgrajeno ambient-glow + circuit-linijo + node-pike. Ta datoteka NE
   podvaja tisto (že obstoječo, bogatejšo, bespoke) kompozicijo — gradi
   VZPOREDEN, a lažji, skupen sistem za vse ostale, doslej povsem
   ravne bele kartice, brez spreminjanja layouta/velikosti/tipografije/
   spacinga/vsebine katerekoli od njih (brief, eksplicitna zahteva).

   NAČELO "NE PODVAJAJ OBSTOJEČEGA" (isto kot Task 8, card-interactions.css):
   spodnji seznam ZAVESTNO izpušča:
     - .resitev-kartica    → že ima svoj (bogatejši) sistem
     - .dj-panoga          → že ima svoj ::before (pike) + ::after (črta),
                              en ::before/::after na element je fizična
                              omejitev CSS-ja, retrofit bi ju prepisal
     - .zn-znamka          → majhna logotip-ploščica, ne vsebinska kartica,
                              že ima svoj ::before (cyan kljukica v kotu)
     - .dj-zakoga-kartica  → nima lastnega background/border-radius sploh
                              (ni dejansko "bela kartica")
     - .izr-izbira--produkt→ vsebuje PRAVO produktno fotografijo (brief:
                              "ne dodajaj fotografij" — vzorec bi se
                              prekrival s sliko); OSNOVNA ".izr-izbira"
                              (6 besedilnih izbirnih kartic) OSTANE
                              vključena, izključen je SAMO ta 3-kartični
                              slikovni modifikator prek :not()

   TEHNIKA (brez novih HTML razredov — ciljamo NEPOSREDNO na obstoječa
   imena razredov, da ni potrebe po ~160 ročnih dodajanjih razreda po
   vseh straneh): en sam ::after na kartico (::before ostaja prost za
   primere, kjer ga kartica že uporablja funkcionalno, npr. ".ss-korak"
   oštevilčen krog) nosi VSE tri plasti dekoracije (pike/nodes + tanek
   lok + tanka črta) kot več plasti v enem "background-image", maskirano
   (mask-image) v en kot kartice, da se ne plazi čez celotno površino in
   nikoli ne poteka neposredno pod besedilom. ".paket" ima namenoma
   IZPUŠČEN overflow:hidden (glej spodaj) — vsi drugi tudi, ker
   "border-radius:inherit" na ::after že sam poskrbi za pravilno
   zaobljene robove brez potrebe po obrezovanju, kar se je izkazalo
   varnejše kot tvegati obrezovanje že obstoječe vsebine (npr.
   ".paket .znak" značka namerno poka nad zgornji rob kartice).

   Hover-okrepitev in dvig/obroba KARTICE SAME NISTA del te datoteke —
   to ostaja last vsakega posameznega, že obstoječega hover sistema
   (".dpt-card", ".card-interactive", ali kartici-specifičen hover v
   njeni lastni .css datoteki) — dodajanje ločenega transform/border
   pravila tukaj bi tvegalo dvojno/nasprotujočo se specifičnost. Ta
   datoteka ob hoverju okrepi SAMO opacity lastnega dekorativnega sloja.

   Barve: izključno obstoječi CGP tokeni (tokens.css) — cyan #17b9ec,
   modra #047bc1, zelena #18a54b, lime #abd039 — v rgba() zapisu, enako
   kot že uveljavljeno drugod po projektu (card-interactions.css,
   depth-system.css). Prosojnost dekorativnega sloja 6–13 %, znotraj
   zahtevanega 5–12 % (hover gre rahlo čez zgornjo mejo namenoma, glej
   brief "ob hoverju naj se sij rahlo okrepi").

   Vključi PO components.css/depth-system.css/card-interactions.css, PRED
   stran-specifično css datoteko.

   10. 9. 2026 — razširjeno za novo stran servis-elektronskih-naprav.html:
   dodani ".sen-kategorija" (servisne kategorije), ".sen-korak" (koraki
   "kako poteka servis") in ".sen-primerjava-kartica" (doma/poslovno)
   v SKUPINO A, po istem vzorcu kot vse obstoječe kartice — brez
   sprememb tehnike/opacity/animacije. ═══════════════════════════════ */

/* ── SKUPINA A — standardne (nemajhne) kartice ─────────────────────── */
.dejavnost-kart, .dj-kombinacija-kartica, .izr-izbira:not(.izr-izbira--produkt),
.kt-hitro-kartica, .kt-namen, .paket, .dj-tocka, .db-model, .onas-obljuba,
.kt-oddelek, .ss-kaj-kartica, .ss-korak, .pr-program, .pr-korak, .tsk-vrsta,
.sv-pot, .bm-zakoga-kartica, .zap-kartica, .sz-info,
.sen-kategorija, .sen-korak, .sen-primerjava-kartica{
  position:relative;
  background-color:#fff;
  background-image:
    radial-gradient(130% 110% at 90% -14%, rgba(23,185,236,.06), transparent 58%),
    radial-gradient(110% 95% at -10% 116%, rgba(24,165,75,.045), transparent 56%);
  background-repeat:no-repeat;
}
.dejavnost-kart > *, .dj-kombinacija-kartica > *, .izr-izbira > *,
.kt-hitro-kartica > *, .kt-namen > *, .paket > *, .dj-tocka > *, .db-model > *,
.onas-obljuba > *, .kt-oddelek > *, .ss-kaj-kartica > *, .ss-korak > *,
.pr-program > *, .pr-korak > *, .tsk-vrsta > *, .sv-pot > *,
.bm-zakoga-kartica > *, .zap-kartica > *, .sz-info > *,
.sen-kategorija > *, .sen-korak > *, .sen-primerjava-kartica > *{
  position:relative; z-index:1;
}

/* dekorativni sloj — pike/nodes + rahel lok + tanka črta, en ::after,
   maskiran v zgornji desni kot, da ne teče pod besedilom */
.dejavnost-kart::after, .dj-kombinacija-kartica::after, .izr-izbira::after,
.kt-hitro-kartica::after, .kt-namen::after, .paket::after, .dj-tocka::after,
.db-model::after, .onas-obljuba::after, .kt-oddelek::after, .ss-kaj-kartica::after,
.ss-korak::after, .pr-program::after, .pr-korak::after, .tsk-vrsta::after,
.sv-pot::after, .bm-zakoga-kartica::after, .zap-kartica::after, .sz-info::after,
.sen-kategorija::after, .sen-korak::after, .sen-primerjava-kartica::after{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  border-radius:inherit;
  background-image:
    radial-gradient(circle, rgba(4,123,193,.55) 1px, transparent 1.4px),
    radial-gradient(circle at 100% 0%, transparent 64px, rgba(23,185,236,.4) 65px, transparent 66px),
    linear-gradient(112deg, transparent 36%, rgba(24,165,75,.28) 36.6%, transparent 37.2%);
  background-size:32px 32px, auto, auto;
  background-position:8px 12px, 0 0, 0 0;
  background-repeat:repeat, no-repeat, no-repeat;
  -webkit-mask-image:radial-gradient(ellipse 72% 64% at 84% 6%, #000 0%, transparent 72%);
  mask-image:radial-gradient(ellipse 72% 64% at 84% 6%, #000 0%, transparent 72%);
  opacity:.08;
  transition:opacity .4s ease;
}

/* variacija — vsaka tretja kartica v nizu ima vzorec zasidran v
   nasprotnem kotu + zelena/lime namesto cyan/modra, da vseh 19
   družin kartic ne izgleda vizualno identično, sistem pa ostane
   konsistenten (brief: "naj bo pattern rahlo drugače pozicioniran") */
.dejavnost-kart:nth-of-type(3n)::after, .dj-kombinacija-kartica:nth-of-type(3n)::after,
.izr-izbira:nth-of-type(3n)::after, .kt-hitro-kartica:nth-of-type(3n)::after,
.kt-namen:nth-of-type(3n)::after, .paket:nth-of-type(3n)::after, .dj-tocka:nth-of-type(3n)::after,
.db-model:nth-of-type(3n)::after, .onas-obljuba:nth-of-type(3n)::after, .kt-oddelek:nth-of-type(3n)::after,
.ss-kaj-kartica:nth-of-type(3n)::after, .ss-korak:nth-of-type(3n)::after, .pr-program:nth-of-type(3n)::after,
.pr-korak:nth-of-type(3n)::after, .tsk-vrsta:nth-of-type(3n)::after, .sv-pot:nth-of-type(3n)::after,
.bm-zakoga-kartica:nth-of-type(3n)::after, .zap-kartica:nth-of-type(3n)::after, .sz-info:nth-of-type(3n)::after,
.sen-kategorija:nth-of-type(3n)::after, .sen-korak:nth-of-type(3n)::after, .sen-primerjava-kartica:nth-of-type(3n)::after{
  background-image:
    radial-gradient(circle, rgba(24,165,75,.5) 1px, transparent 1.4px),
    radial-gradient(circle at 0% 100%, transparent 60px, rgba(171,208,57,.38) 61px, transparent 62px),
    linear-gradient(112deg, transparent 36%, rgba(23,185,236,.24) 36.6%, transparent 37.2%);
  background-position:10px 14px, 0 0, 0 0;
  -webkit-mask-image:radial-gradient(ellipse 68% 60% at 14% 96%, #000 0%, transparent 72%);
  mask-image:radial-gradient(ellipse 68% 60% at 14% 96%, #000 0%, transparent 72%);
}

/* hover — SAMO sij dekorativnega sloja se okrepi (opacity); dvig/
   obroba/scale kartice same ostajajo last vsakega obstoječega hover
   sistema (dpt-card/card-interactive/bespoke), namenoma nedotaknjeni.
   ".kt-namen" ima hover namenoma omejen na "a.kt-namen" (glej Task 8,
   9. 9. 2026: neklikljiv <div> "Odgovorimo v 1 dnevu" ne sme dobiti
   enakega odziva kot resnične povezave). */
@media (hover:hover) and (pointer:fine){
  .dejavnost-kart:hover::after, .dj-kombinacija-kartica:hover::after, .izr-izbira:hover::after,
  .kt-hitro-kartica:hover::after, a.kt-namen:hover::after, .paket:hover::after, .dj-tocka:hover::after,
  .db-model:hover::after, .onas-obljuba:hover::after, .kt-oddelek:hover::after, .ss-kaj-kartica:hover::after,
  .ss-korak:hover::after, .pr-program:hover::after, .pr-korak:hover::after, .tsk-vrsta:hover::after,
  .sv-pot:hover::after, .bm-zakoga-kartica:hover::after, .zap-kartica:hover::after, .sz-info:hover::after,
  .sen-kategorija:hover::after, .sen-korak:hover::after, .sen-primerjava-kartica:hover::after{
    opacity:.13;
  }
}

/* animacija — zelo počasen drift dekorativnega sloja (8–15s, ease-in-out,
   infinite alternate); vsaka druga kartica dobi drugačno trajanje/zamik,
   da animacije niso sinhronizirane (isto načelo kot depth-system.css
   ".dpt-anim-a/b/c"). Izklopljeno pri prefers-reduced-motion:reduce. */
@media (prefers-reduced-motion:no-preference){
  .dejavnost-kart::after, .dj-kombinacija-kartica::after, .izr-izbira::after,
  .kt-hitro-kartica::after, .kt-namen::after, .paket::after, .dj-tocka::after,
  .db-model::after, .onas-obljuba::after, .kt-oddelek::after, .ss-kaj-kartica::after,
  .ss-korak::after, .pr-program::after, .pr-korak::after, .tsk-vrsta::after,
  .sv-pot::after, .bm-zakoga-kartica::after, .zap-kartica::after, .sz-info::after,
  .sen-kategorija::after, .sen-korak::after, .sen-primerjava-kartica::after{
    animation:ctb-drift 12s ease-in-out infinite alternate;
  }
  .dejavnost-kart:nth-of-type(2n)::after, .dj-kombinacija-kartica:nth-of-type(2n)::after,
  .izr-izbira:nth-of-type(2n)::after, .kt-hitro-kartica:nth-of-type(2n)::after,
  .kt-namen:nth-of-type(2n)::after, .paket:nth-of-type(2n)::after, .dj-tocka:nth-of-type(2n)::after,
  .db-model:nth-of-type(2n)::after, .onas-obljuba:nth-of-type(2n)::after, .kt-oddelek:nth-of-type(2n)::after,
  .ss-kaj-kartica:nth-of-type(2n)::after, .ss-korak:nth-of-type(2n)::after, .pr-program:nth-of-type(2n)::after,
  .pr-korak:nth-of-type(2n)::after, .tsk-vrsta:nth-of-type(2n)::after, .sv-pot:nth-of-type(2n)::after,
  .bm-zakoga-kartica:nth-of-type(2n)::after, .zap-kartica:nth-of-type(2n)::after, .sz-info:nth-of-type(2n)::after,
  .sen-kategorija:nth-of-type(2n)::after, .sen-korak:nth-of-type(2n)::after, .sen-primerjava-kartica:nth-of-type(2n)::after{
    animation-duration:15s; animation-delay:-3s;
  }
}
@keyframes ctb-drift{ from{ transform:translate(0,0) scale(1); } to{ transform:translate(6px,5px) scale(1.02); } }
@media (prefers-reduced-motion:reduce){
  .dejavnost-kart::after, .dj-kombinacija-kartica::after, .izr-izbira::after,
  .kt-hitro-kartica::after, .kt-namen::after, .paket::after, .dj-tocka::after,
  .db-model::after, .onas-obljuba::after, .kt-oddelek::after, .ss-kaj-kartica::after,
  .ss-korak::after, .pr-program::after, .pr-korak::after, .tsk-vrsta::after,
  .sv-pot::after, .bm-zakoga-kartica::after, .zap-kartica::after, .sz-info::after,
  .sen-kategorija::after, .sen-korak::after, .sen-primerjava-kartica::after{
    animation:none; transition:none;
  }
}

/* ── SKUPINA B — TEAM KARTICE (.onas-clan) — bolj diskretna različica ──
   Brief eksplicitno zahteva bolj diskreten učinek + prepoved potekanja
   dekoracije neposredno pod imenom/telefonom/emailom: mask-image je zato
   OBRNJEN glede na skupino A — namesto "vidno v enem kotu", je tu
   "nevidno v SREDINI" (kjer sedi ime/vloga/kontakt), vidno samo v ozkem
   robu okoli kartice. */
.onas-clan{
  position:relative;
  background-color:#fff;
  background-image:radial-gradient(120% 100% at 100% 0%, rgba(23,185,236,.05), transparent 62%);
  background-repeat:no-repeat;
}
.onas-clan > *{ position:relative; z-index:1; }
.onas-clan::after{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  border-radius:inherit;
  background-image:
    radial-gradient(circle, rgba(4,123,193,.5) 1px, transparent 1.3px),
    radial-gradient(circle at 100% 0%, transparent 44px, rgba(24,165,75,.35) 45px, transparent 46px);
  background-size:28px 28px, auto;
  background-position:6px 8px, 0 0;
  background-repeat:repeat, no-repeat;
  -webkit-mask-image:radial-gradient(ellipse 58% 52% at 50% 46%, transparent 42%, #000 82%);
  mask-image:radial-gradient(ellipse 58% 52% at 50% 46%, transparent 42%, #000 82%);
  opacity:.07;
  transition:opacity .4s ease;
}
.onas-clan:nth-of-type(3n)::after{
  background-image:
    radial-gradient(circle, rgba(24,165,75,.45) 1px, transparent 1.3px),
    radial-gradient(circle at 0% 100%, transparent 40px, rgba(23,185,236,.32) 41px, transparent 42px);
  background-position:8px 10px, 0 0;
  -webkit-mask-image:radial-gradient(ellipse 56% 50% at 50% 54%, transparent 40%, #000 82%);
  mask-image:radial-gradient(ellipse 56% 50% at 50% 54%, transparent 40%, #000 82%);
}
@media (hover:hover) and (pointer:fine){
  .onas-clan:hover::after{ opacity:.11; }
}
@media (prefers-reduced-motion:no-preference){
  .onas-clan::after{ animation:ctb-drift-team 10s ease-in-out infinite alternate; }
  .onas-clan:nth-of-type(2n)::after{ animation-duration:13s; animation-delay:-2.5s; }
}
@keyframes ctb-drift-team{ from{ transform:translate(0,0) scale(1); } to{ transform:translate(4px,3px) scale(1.015); } }
@media (prefers-reduced-motion:reduce){
  .onas-clan::after{ animation:none; transition:none; }
}