/* ═══════════════════════════════════════════════════════════════
   Biroplast Solutions — V2 KONTAKT (samostojna stran)
   Po dogovoru "vsaka stran ima svoj CSS" — brez odvisnosti od drugih
   page-CSS datotek, podvaja majhne skupne vzorce (`.cta-band`), po
   istem vzorcu kot vse ostale V2 strani. Predpona razredov "kt-".

   POMEMBNO — brez lažnega obrazca: `v1/kontakt.html` je imel
   `data-demo` spustni obrazec ("Demo: obrazec je prikazni"). V2 (po
   dogovoru, uveljavljenem na vseh dosedanjih straneh) ne prenaša
   prikaznih obrazcev — razdelek "Kaj potrebujete" je namesto tega
   niz jasnih, DEJANSKO delujočih povezav (izracun.html za ponudbe,
   mailto: za vse ostalo, s smiselnim prednastavljenim naslovom
   sporočila) — glej dnevnik. ═══════════════════════════════════ */

/* ═══ 1. HERO — "VARIANTA C: CORPORATE/SERVICE/EDITORIAL", NAJMIRNEJŠA
   varianta od vseh V2 strani (8. 9. 2026, glej dnevnik). Zamenjuje
   prejšnji temen navy hero (gradient + circuit-field + motif-bp
   pikčasti vzorec + 2 glow "blob"-a) s čistim, nevtralnim svetlim
   ozadjem — BREZ kompleksnih vzorcev/tehnične grafike, samo ena zelo
   subtilna zgornja črta (edini "line" element v tem heroju) + en
   zelo blag statičen ambientni accent. 4 hitre akcijske kartice
   (pokliči/piši/naslov/delovni čas) OSTANEJO — vsebina in
   funkcionalnost nespremenjeni, samo preoblikovane v svetle kartice
   namesto translucentnih na temnem ozadju. ═══ */
.kt-hero{
  position:relative; overflow:hidden;
  background:var(--surface-alt);
  color:var(--ink);
  padding:calc(var(--sp-7) + 10px) 0 var(--sp-6);
}
/* edina "tehnična grafika" v tem heroju — ena tanka, komaj zaznavna
   CGP gradientna črta pod robom, brez vozlišč/animacije */
.kt-hero::before{
  content:''; position:absolute; z-index:0; pointer-events:none;
  top:0; left:50%; transform:translateX(-50%); width:min(720px,82%); height:1px;
  background:linear-gradient(90deg, transparent, rgba(23,185,236,.32), rgba(171,208,57,.28), transparent);
}
/* en zelo blag, statičen ambientni accent (cyan) — "minimal cyan/
   green accent" iz brief-a, brez animacije/parallaxa (najmirnejša
   stran na strani) */
.kt-ambient{
  position:absolute; z-index:0; right:-8%; top:-16%; width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle, rgba(23,185,236,.07), transparent 70%);
  pointer-events:none;
}
/* 8. 9. 2026 — "GLOBAL ANIMATED TECHNOLOGY BACKGROUND SYSTEM": edino
   dovoljeno gibanje na tej (namenoma najmirnejši) strani — ".dpt-anim-c"
   (depth-system.css razdelek 11) na ".kt-ambient" doda zelo počasen
   (24s) drift, premočrtno prevzame `transform`, ki ga ta element sicer
   ni uporabljal. Izklopljeno pod prefers-reduced-motion:reduce, kot vse
   ostalo v sistemu. Isti razred je dodan tudi na ".dpt-field--navy" v
   #oddelki (HTML) — noben nov element, noben SVG, brez sprememb
   strukture/vsebine. */
.kt-hero-grid{ position:relative; z-index:2; }
.kt-hero-grid > .reveal:first-child{ max-width:680px; margin:0 auto var(--sp-5); text-align:center; }
.kt-hero h1{ font-size:clamp(34px,4.4vw,52px); margin:2px 0 var(--sp-3); color:var(--navy); }
.kt-hero .lead{ max-width:560px; margin:0 auto; }

.kt-hitro{
  position:relative; z-index:2;
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-2);
}
.kt-hitro-kartica{
  display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center;
  background:#fff; border:1px solid var(--line);
  border-radius:var(--r-lg); padding:var(--sp-3) var(--sp-2);
  color:inherit; transition:border-color var(--dur-fast) var(--ease-premium), transform var(--dur-fast) var(--ease-premium), box-shadow var(--dur-fast) var(--ease-premium);
}
a.kt-hitro-kartica:hover, a.kt-hitro-kartica:focus-visible{ border-color:rgba(23,185,236,.45); transform:translateY(-2px); box-shadow:var(--sh-sm); }
.kt-hitro-kartica .kt-label{ font-family:var(--fh); font-weight:700; font-size:13px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
.kt-hitro-kartica b{ font-family:var(--fh); font-weight:700; font-size:16px; color:var(--navy); }
.kt-hitro-kartica small{ font-size:12.5px; color:var(--muted); line-height:1.4; }

@media (max-width:760px){
  .kt-hitro{ grid-template-columns:1fr 1fr; }
  .kt-hero{ padding:calc(var(--sp-6) + 10px) 0 var(--sp-5); }
}
@media (max-width:460px){ .kt-hitro{ grid-template-columns:1fr; } }

/* ═══ 2. KONTAKTI PO ODDELKIH — samo POTRJENI podatki (glej dnevnik:
   v1 je pri Servisu/Potrošnem materialu/Računovodstvu del kontaktov
   označil `ph-l` kot nepotrjene — te vrstice so tu izpuščene, ne
   izmišljene). ═══ */
.kt-oddelki{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-3); }
.kt-oddelek{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--sp-4);
}
.kt-oddelek h3{ font-size:17px; margin:6px 0 var(--sp-2); }
.kt-oddelek a.kt-vrstica{
  display:flex; align-items:center; gap:8px; color:var(--ink); font-weight:600; font-size:14.5px;
  padding:5px 0; transition:color var(--dur-fast) var(--ease-premium);
}
.kt-oddelek a.kt-vrstica:hover{ color:var(--blue); }
.kt-oddelek a.kt-vrstica svg{ width:15px; height:15px; flex-shrink:0; color:var(--muted); }
.kt-oddelek small{ display:block; color:var(--muted); font-size:13px; margin-top:8px; }
.kt-oddelek small a{ color:var(--blue); }
@media (max-width:960px){ .kt-oddelki{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .kt-oddelki{ grid-template-columns:1fr; } }

/* ═══ 3. KAJ POTREBUJETE — namesto lažnega spustnega obrazca: jasne,
   delujoče povezave (glej opombo na vrhu datoteke). ═══ */
.kt-nameni{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-3); max-width:960px; margin:0 auto; }
.kt-namen{
  display:flex; align-items:center; gap:var(--sp-2);
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--sp-3); color:inherit;
  transition:transform var(--dur-med) var(--ease-premium), box-shadow var(--dur-med) var(--ease-premium), border-color var(--dur-med) var(--ease-premium);
}
/* 9. 9. 2026 — "GLOBALNA ANIMACIJA KARTIC" brif: hover SAMO na dejansko
   clickable <a> različici (t. 11 brifa — "Odgovorimo v 1 dnevu" je
   <div style="cursor:default">, torej NI clickable in ne sme dobiti
   enakega elevacijskega odziva); vrednosti hkrati ~20-30% bolj izrazite
   kot prej (translateY -3→-4px, dodan rahel scale, ikona zdaj reagira). */
a.kt-namen:hover, a.kt-namen:focus-visible{ transform:translateY(-4px) scale(1.006); box-shadow:0 12px 30px rgba(42,61,80,.1); border-color:rgba(23,185,236,.4); }
.kt-namen h3{ font-size:15.5px; margin-bottom:2px; }
.kt-namen p{ color:var(--muted); font-size:13px; }
.kt-namen svg{ width:18px; height:18px; flex-shrink:0; transition:transform var(--dur-med) var(--ease-premium); }
a.kt-namen:hover svg, a.kt-namen:focus-visible svg{ transform:translateY(-2px) scale(1.05); }
@media (max-width:900px){ .kt-nameni{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .kt-nameni{ grid-template-columns:1fr; } }

/* ═══ 4. LOKACIJA + PODATKI PODJETJA ═══
   8. 9. 2026 — ".kt-zemljevid" je zdaj resničen Google Maps embed
   (iframe, "output=embed" — brez API ključa/Maps JS SDK), ne več mirujoč
   placeholder. "MAP = CARD": position:relative + overflow:hidden na
   kartici sami obreže iframe znotraj istega border-radius, ki ga je
   prej imel placeholder; iframe napolni 100% širine/višine kartice.
   Kartica nima več min-height — v grid vrstici z align-items:stretch
   se samodejno raztegne na višino ".kt-podatki" (desni stolpec), na
   mobilnem (spodaj, ko je grid enostolpčen) pa dobi eksplicitno višino,
   ker takrat stretch ni na voljo. ═══ */
.kt-dvoje{ display:grid; grid-template-columns:1.1fr 1fr; gap:var(--sp-4); align-items:stretch; }
.kt-zemljevid{
  position:relative; overflow:hidden;
  border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface-alt);
  min-height:320px;
}
.kt-zemljevid-iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0; display:block;
}
/* plavajoč "glass" naslovni panel čez spodnji del zemljevida (brif,
   razdelek 3) — semi-transparent + blur, dovolj subtilen, da ne prekrije
   preveč zemljevida; z-index nad iframe-om, pointer-events ostanejo
   normalni na CTA povezavi znotraj (iframe sam ne prestreza klikov, ker
   panel leži nad njim samo v svojem lastnem, majhnem območju). */
.kt-zemljevid-overlay{
  position:absolute; left:14px; right:14px; bottom:14px; z-index:1;
  background:rgba(255,255,255,.86); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.6); border-radius:var(--r-md);
  padding:14px 16px; box-shadow:0 10px 30px rgba(23,34,46,.16);
  display:flex; flex-direction:column; gap:2px;
}
.kt-zemljevid-overlay b{ color:var(--ink); font-size:14.5px; }
.kt-zemljevid-overlay span{ color:var(--muted); font-size:13px; line-height:1.4; margin-bottom:6px; }
.kt-zemljevid-overlay a{
  display:inline-flex; align-items:center; gap:6px; align-self:flex-start;
  font-family:var(--fh); font-weight:700; font-size:13px; color:var(--blue);
  transition:color var(--dur-fast) var(--ease-premium);
}
.kt-zemljevid-overlay a:hover{ color:var(--navy); }
@media (max-width:900px){
  .kt-zemljevid{ height:320px; }
}
@media (max-width:480px){
  .kt-zemljevid{ height:280px; }
  .kt-zemljevid-overlay{ left:10px; right:10px; bottom:10px; padding:11px 13px; }
}

.kt-podatki{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
}
.kt-podatki table{ width:100%; border-collapse:collapse; }
.kt-podatki tr:not(:last-child) td{ border-bottom:1px solid var(--line); }
.kt-podatki td{ padding:14px var(--sp-3); font-size:14.5px; vertical-align:top; }
.kt-podatki td:first-child{ color:var(--muted); font-weight:600; width:38%; }
.kt-podatki td:last-child{ color:var(--ink); }
.kt-podatki td a{ color:var(--blue); }

@media (max-width:900px){ .kt-dvoje{ grid-template-columns:1fr; } }

/* ═══ 5. POVEZAVA NA EKIPO — tanek pas, sklic na `o-nas.html#ekipa`
   (celotna ekipa ni podvojena tu, glej dnevnik). ═══ */
.kt-ekipa-pas{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); flex-wrap:wrap;
  background:var(--surface-alt); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--sp-3) var(--sp-4);
}
.kt-ekipa-pas p{ color:var(--muted); font-size:15px; }
.kt-ekipa-pas b{ color:var(--ink); display:block; font-size:16.5px; margin-bottom:2px; }

/* ═══ 6. ZAKLJUČNI CTA — ".cta-band" jezik podvojen namerno (glej isto
   odločitev na vseh ostalih V2 straneh). ─────────────────────────── */
.cta-band{
  position:relative; overflow:hidden; border-radius:var(--r-xl);
  background:linear-gradient(160deg, var(--navy-mid), var(--navy) 65%, var(--navy-deep));
  padding:var(--sp-7) var(--sp-5); text-align:center; color:#fff;
}
.cta-band::before{
  content:''; position:absolute; top:0; left:8%; right:8%; height:2px;
  background:linear-gradient(90deg, transparent, rgba(23,185,236,.55), rgba(171,208,57,.5), transparent);
}
.cta-band h2{ margin-bottom:var(--sp-2); font-size:clamp(30px, 3.2vw, 44px); }
.cta-band .lead{ margin:0 auto var(--sp-4); color:var(--muted-on-navy); }
.cta-btns{ display:flex; gap:var(--sp-2); justify-content:center; flex-wrap:wrap; }

@media (max-width:760px){
  .cta-band{ padding:var(--sp-6) var(--sp-3); }
}