/* ═══════════════════════════════════════════════════════════════
   Biroplast Solutions — V2 O NAS (samostojna stran)
   Po dogovoru "vsaka stran ima svoj CSS" — ta datoteka ne uvaža
   nič iz drugih page-CSS datotek (dejavnosti.css, tiskalniki.css …),
   podvaja majhne skupne vzorce (`.cta-band`), po istem vzorcu kot
   vse ostale V2 strani. Predpona razredov "onas-". ═══════════════
   ═══════════════════════════════════════════════════════════════ */

/* ═══ 1. HERO — "VARIANTA C: CORPORATE/SERVICE/EDITORIAL", editorial
   premium: trust/technology/precision/confidence (8. 9. 2026, glej
   dnevnik). Zamenjuje prejšnji temen navy hero (gradient + circuit-
   field + motif-bp pikčasti vzorec + 2 glow "blob"-a) s svetlim
   sistemom. Brez produktne fotografije (stran o podjetju, ne
   produkt) — plošča s štirimi ključnimi številkami podjetja (15+
   let, 8 zaposlenih, A+ bonitetna ocena, ≤4h odzivni čas — vse iz
   v1, NESPREMENJENA vsebina) OSTANE, samo preoblikovana v svetlo,
   elevirano kartico namesto translucentnega panela na temnem ozadju.
   Namesto tehnične SVG grafike (uporabljene na ss-/gt-/db- heroju):
   eno oversized bledo ozadnje število "15+" — isti obstoječi podatek
   kot v statistiki (ne nov/izmišljen element) — in en zelo blag,
   statičen CGP ambientni accent. ═══ */
.onas-hero{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg, #f9fafb 0%, #f2f5f8 100%);
  color:var(--ink);
  padding:calc(var(--sp-7) + 20px) 0 var(--sp-7);
}
/* oversized bledo število — "precision/confidence" tipografski
   element, ne dekoracija brez pomena: isti "15+" kot v statistiki
   desno. Statično (brez animacije/parallaxa), namerno mirno. */
.onas-hero-num{
  position:absolute; z-index:0; right:-3%; top:50%; transform:translateY(-50%);
  font-family:var(--fh); font-weight:800; font-size:clamp(200px,24vw,400px); line-height:1;
  letter-spacing:-.04em; color:rgba(51,72,97,.05); pointer-events:none; user-select:none;
  white-space:nowrap;
}
/* zelo blag, statičen CGP ambientni accent (cyan→zelen), lokalen,
   spodaj levo — "very soft CGP ambient accent" iz brief-a */
.onas-ambient{
  position:absolute; z-index:0; left:-10%; bottom:-20%; width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle, rgba(23,185,236,.08), rgba(171,208,57,.05) 55%, transparent 72%);
  filter:blur(20px); pointer-events:none;
}
.onas-hero-grid{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1.15fr .85fr; gap:var(--sp-6); align-items:center;
}
.onas-hero h1{ font-size:clamp(36px,4.6vw,58px); margin:2px 0 var(--sp-3); max-width:600px; color:var(--navy); }
.onas-hero .lead{ max-width:520px; margin-bottom:var(--sp-4); }
.onas-hero-cta{ display:flex; gap:var(--sp-2); flex-wrap:wrap; }

.onas-hero-stati{
  position:relative;
  background:#fff; border:1px solid var(--line);
  border-radius:var(--r-xl); padding:var(--sp-4);
  display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4);
  box-shadow:var(--sh-md);
}
/* tanka CGP gradientna črta na vrhu kartice — edini "line" accent
   dovoljen v tem heroju (brief: "subtle oversized background number
   OR line"), potrebuje position:relative na ".onas-hero-stati" (glej
   gotcha #2 v dnevniku). */
.onas-hero-stati::before{
  content:''; position:absolute; top:0; left:8%; right:8%; height:2px;
  background:linear-gradient(90deg, transparent, var(--cyan), var(--green), transparent);
  opacity:.55;
}
.onas-hero-stati .stat-row{ display:block; }
.onas-hero-stati .stat-row b{ font-size:34px; color:var(--navy); }
.onas-hero-stati .stat-row small{ color:var(--muted); }
/* rahlo diferencirane barve po CGP paleti namesto enolične bele —
   vsaka >=3:1 kontrast na belem (preverjeno), cyan namenoma NI
   uporabljen kot poln text-fill (prenizek kontrast na belem), samo
   v zgornji črti/ambientu zgoraj */
.onas-hero-stati .stat-row:nth-child(1) b{ color:var(--blue); }
.onas-hero-stati .stat-row:nth-child(2) b{ color:var(--green); }
.onas-hero-stati .stat-row:nth-child(3) b{ color:var(--navy); }
.onas-hero-stati .stat-row:nth-child(4) b{ color:var(--green); }

@media (max-width:900px){
  .onas-hero-grid{ grid-template-columns:1fr; gap:var(--sp-5); text-align:center; }
  .onas-hero h1{ max-width:none; }
  .onas-hero .lead{ max-width:none; margin-left:auto; margin-right:auto; }
  .onas-hero-cta{ justify-content:center; }
  .onas-hero-stati{ max-width:420px; margin:0 auto; }
  .onas-hero-num{ right:50%; top:8%; transform:translateX(50%); font-size:clamp(150px,38vw,240px); opacity:.7; }
}
@media (max-width:600px){
  .onas-hero{ padding:calc(var(--sp-6) + 20px) 0 var(--sp-6); }
  .onas-hero-stati{ grid-template-columns:1fr 1fr; padding:var(--sp-3); gap:var(--sp-3); }
  .onas-hero-stati .stat-row b{ font-size:26px; }
  .onas-hero-num{ display:none; }
}

/* ═══ 2. NAŠA ZGODBA — ozka pripovedna sekcija, dobesedno po v1
   (izpuščena je zadnja v1 vrstica "DOPOLNI — mejniki, letnice,
   zgodbe" — interna opomba, ni vsebina za objavo, glej dnevnik). ═══ */
.onas-zgodba{ max-width:760px; margin:0 auto; }
.onas-zgodba p{ color:var(--muted); margin-bottom:var(--sp-3); font-size:16.5px; line-height:1.65; }
.onas-zgodba p:last-child{ margin-bottom:0; }
.onas-zgodba b{ color:var(--ink); }

/* ═══ 3. ŠTIRI STVARI, KI JIH OBLJUBIMO — 2×2 mreža, isti icon-box
   jezik kot povsod drugod.
   8. 9. 2026 — "GLOBAL SUBPAGE CORRECTION": sekcija #obljube (HTML)
   nadgrajena iz ".on-surface-alt" na ".on-mid" (depth-system.css
   razdelek 9) — ta stran je namenoma mirna/uredniška, a je bila prej
   #obljube skoraj vizualno neločljiva od #zgodba/#ekipa (bela) v
   pomanjšanem long-page posnetku. #podatki NAMENOMA ostane
   ".on-surface-alt" (ne podvajaj MID na obeh sivih sekcijah — brif
   "ne na silo"). ═══ */
.onas-obljube{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3); }
.onas-obljuba{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--sp-4); display:flex; flex-direction:column; gap:8px;
}
.onas-obljuba h3{ font-size:19px; margin:var(--sp-2) 0 2px; }
.onas-obljuba p{ color:var(--muted); font-size:15px; line-height:1.55; }
@media (max-width:700px){ .onas-obljube{ grid-template-columns:1fr; } }

/* ═══ 4. EKIPA — 10. 9. 2026: razširjeno na 9 članov (prej 4), glej
   dnevnik. Grid zato prestavljen z 4 na 3 stolpce na namizju (3×3 za 9
   ljudi), da ostane vizualno uravnoteženo — 2/1 stolpca na tablici/
   mobilnem nespremenjeno. Pri članih BREZ potrjene vloge (Sonja Kramar,
   Patricija Jerebic, Klara Horvat, Lukas Čurič, Aleš Žalik) je
   ".onas-vloga" v HTML-ju prisoten, a PRAZEN (vloga se ne izmišljuje —
   isto načelo kot prej pri Luki Horvatu) — "min-height" spodaj poskrbi,
   da prazna vloga zavzame enak prostor kot izpolnjena, zato je
   ".onas-kontakt" pri VSEH karticah poravnan na isti višini, ne glede
   na to, ali je vloga prikazana. ═══ */
.onas-ekipa{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-3); }
.onas-clan{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--sp-4); text-align:center;
}
.onas-avatar{
  width:64px; height:64px; border-radius:50%; margin:0 auto var(--sp-2);
  display:flex; align-items:center; justify-content:center;
  background:var(--grad-green); color:#0d2015;
  font-family:var(--fh); font-weight:800; font-size:18px;
}
.onas-clan h3{ font-size:17px; margin-bottom:2px; }
.onas-clan .onas-vloga{ color:var(--blue); font-size:13.5px; font-weight:700; font-family:var(--fh); margin-bottom:10px; min-height:21px; }
.onas-clan .onas-kontakt{ font-size:13.5px; color:var(--muted); line-height:1.6; }
.onas-clan .onas-kontakt a{ color:var(--muted); transition:color var(--dur-fast) var(--ease-premium); }
.onas-clan .onas-kontakt a:hover{ color:var(--blue); }
@media (max-width:900px){ .onas-ekipa{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .onas-ekipa{ grid-template-columns:1fr; } }

/* ═══ 5. PODATKI PODJETJA — enostavna dvostolpna tabela. ═══ */
.onas-podatki{
  max-width:700px; margin:0 auto; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden;
}
.onas-podatki table{ width:100%; border-collapse:collapse; }
.onas-podatki tr:not(:last-child) td{ border-bottom:1px solid var(--line); }
.onas-podatki td{ padding:14px var(--sp-3); font-size:15px; }
.onas-podatki td:first-child{ color:var(--muted); font-weight:600; width:42%; }
.onas-podatki td:last-child{ color:var(--ink); }
@media (max-width:560px){
  .onas-podatki td{ padding:12px var(--sp-2); font-size:14px; }
}

/* ═══ 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); }
}