/* ═══════════════════════════════════════════════════════════════════
   TERMINA — STRAN KATEGORIJE

   Ena predloga za vse kategorije. Nobena skupina nima svojega pravila:
   telo strani nosi `data-kat`, s čimer dobi kategorijine žetone
   --kat-*. Nova kategorija zato tu ne zahteva niti vrstice.

   PODLAGA JE ATMOSFERA SKUPINE (CGP v12 »Steklo«, lastnica 16. 10.
   2026). Telo nosi data-kat (kategorija.js), steklo.css iz --kat-*
   izpelje --atm-* in pripeta plast .atmosfera zadiha v barvi skupine.
   Razreda `.kat-oder` stran še vedno NE vzame: ploskovni žetoni (kartica,
   vdolbina) ostanejo Terminini, kartice so mlečno steklo nad atmosfero.
   Junak je ENA obrnjena ploskev pogleda (.poudarek) in lebdi na
   atmosferi kot kartica, ne kot pas čez rob zaslona.

   Barve so tu SAMO iz obstoječih žetonov. Nobena vrednost ni vpisana
   na roko; kar ni v podoba.css ali kategorije.css, tu ne obstaja.
   ═══════════════════════════════════════════════════════════════════ */

/* ── junak ────────────────────────────────────────────────────────── */

/* FOTOGRAFSKI slog (izbran med petimi, 5. 9. 2026): fotografija je prva.
   Oder stoji čez ves vrh strani, brez roba nad njim in do robov zaslona;
   vsebina pride izpod njegovega spodnjega, zaobljenega roba, iskalno polje
   pa leži čez ta rob. Kar je na odru, stoji na steklu: znak skupine in
   drugi gumb sta prosojna ploskev z zameglitvijo in lasastim robom.

   Oder je temen, ker je nadomestek za fotografijo (--kat-foto-*), in ne
   zato, ker bi bila stran temna. Zastor je prehod: proti dnu, kjer stoji
   napis, se zgosti v temnejši ton skupine. Ko kategorija dobi svojo oprano
   sepijo, se zamenja samo slika: prehod in barva napisa ostaneta. */
main#vsebina{padding-top:0}
.kjunak{
  position:relative;overflow:hidden;
  border-radius:var(--r-steklo-kartica,30px);
  margin:10px 0 24px;
  padding:10px 22px 30px;
  min-height:420px;
  display:flex;flex-direction:column;justify-content:flex-end;
  background:var(--oder-1);
}
.kjunak::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, transparent 30%, var(--kat-foto-2, var(--oder-2)) 100%);
}
.kjunak>*{position:relative}
/* Drobtine so prvi otrok in edine ostanejo ob vrhu odra. */
.kjunak .drobtine{margin:0 0 auto}
.kjunak h1{color:var(--foto-napis);font-size:var(--t-3xl);letter-spacing:-.02em;margin:0 0 8px}
.kjunak .kj-uvod{
  font-family:var(--body);font-size:var(--t-md);line-height:1.55;
  color:var(--foto-napis);opacity:.86;max-width:52ch;margin:0 0 18px;
}
.kjunak .kj-stevec{
  display:block;font-family:var(--num);font-size:var(--t-micro);
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--foto-napis);opacity:.72;margin-bottom:16px;
}
.kjunak .kj-dej{display:flex;gap:10px;flex-wrap:wrap}
/* Junak nosi tudi .poudarek (kategorija.html): sistemski razred za obrnjeno
   ploskev, ki prepiše žetone na vsebniku. Gumba, robovi, drobtine in tiho
   besedilo s tem sami preidejo v pravo polariteto. Ročnih barv po elementih
   tu ni in ne smejo biti — .btn-p bere vzdevek --crnilo, ki na svetli strani
   kaže na KREMNO, zato bi ročni popravek dal kremno na kremni. Ostane samo
   podlaga: oder je kategorijin, ker je nadomestek za NJENO fotografijo. */
.kjunak.poudarek{
  background:var(--kat-foto-1, var(--oder-1));
  border-radius:var(--r-steklo-kartica,30px);
  /* Lebdi na atmosferi (v12): topla mehka senca stekla in lasast rob
     odra, ne pas čez rob zaslona. Ploskev ostane polna — besedilo na
     njej je izmerjeno na temnem, prosojnost bi ga spustila. */
  /* brez svetlega roba: na temnem je kremna lasnica risala svetel obroč
     med odrom in atmosfero (lastnica, 18. 10. 2026) */
  border:1px solid transparent;
  box-shadow:var(--steklo-senca-oder,none);
}
/* Drugi gumb je steklo na odru: prosojen, zameglen, z robom obrnjene ploskve.
   Kontrast napisa se meri na izrisanih pikslih (test-piksli), ker steklo
   dvigne svetlost podlage. */
.kjunak .btn-s{
  background:var(--steklo-oder);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}

/* ── iskanje znotraj kategorije ───────────────────────────────────── */

/* Polje je bela pilula NA odru, nad gumboma — ista oblika kot iskanje na
   naslovnici (podoba.css, .iskanje). Prej je s -26 px viselo čez spodnji
   rob odra in na fotografiji zaslona stalo »zelo čudno« (lastnica,
   9. 10. 2026); vpisano besedilo je bilo poleg tega v --noc, skoraj belo
   na beli piluli. Pilula je svetla ploskev obrnjene ploskve (--i-gumb),
   napis njen par (--i-gumb-tekst) — brez nove barve. */
.kjunak .kisci{
  display:flex;align-items:center;gap:6px;
  max-width:560px;min-height:54px;margin:0 0 16px;padding:0 6px 0 16px;
  background:var(--i-gumb);border-radius:999px;
}
.kjunak .kisci .isk-znak{flex:none;width:20px;height:20px;fill:none;stroke:var(--i-gumb-tekst);stroke-width:1.7;opacity:.7}
.kjunak .kisci input{
  flex:1;min-width:0;height:48px;border:0;background:transparent;
  font-family:var(--body);font-size:var(--t-vnos);padding:0 8px;color:var(--i-gumb-tekst);
}
.kjunak .kisci input::placeholder{color:var(--i-gumb-tekst);opacity:.72}
.kjunak .kisci input:focus{outline:none}
.kjunak .kisci input::-webkit-search-cancel-button{-webkit-appearance:none}
.kjunak .kisci:focus-within{outline:2px solid var(--i-akcent);outline-offset:3px}

/* Podkategorije skupine kot čipi. Tihi ton skupine je njen pravi
   odtenek in nosi --kat-na-tihem; --kat-tekst je tu ROB in ne
   besedilo (kategorije.css, točka 3). */
.kcipi{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.kcip{
  min-height:44px;padding:0 14px;
  display:inline-flex;align-items:center;
  font-family:var(--body);font-size:var(--t-sm);
  border:1px solid var(--gravura);border-radius:999px;
  background:var(--plosca);color:var(--telo);cursor:pointer;
}
@media (hover:hover) and (pointer:fine){.kcip:hover{border-color:var(--kat-tekst)}}
.kcip.on{background:var(--kat-mavrica-tiha) var(--kat-tih);border-color:var(--kat-tekst);color:var(--kat-na-tihem)}
/* Število ponudnikov za oznako. Tiho: pove obseg, ne tekmuje z besedo. */
.kcip .kcip-n{
  margin-left:7px;font-family:var(--num);font-size:var(--t-micro);
  color:var(--kamen-d);
}
.kcip.on .kcip-n{color:var(--kat-na-tihem);opacity:.72}

/* Oglasi (.oglasi, .okarta, .oglas-znak) in akcije (.akcije, .apolica,
   .akart) so od 16. 9. 2026 v aplikacija.css: isti razdelek stoji tudi na
   domači strani aplikacije in en zapis je edino, kar drži obe strani skupaj. */

/* ── prazna kategorija ────────────────────────────────────────────── */

/* Skupina brez ponudnikov ni napaka in ne 404: prav ta stran pripelje
   prvega avtomehanika v skupino, ki še nikogar nima. */
.kprazno{
  text-align:center;padding:34px 20px;
  background:var(--plosca);border:1px solid var(--gravura);
  border-radius:var(--r-velika);
}
.kprazno .kp-n{font-family:var(--display);font-size:var(--t-lg);font-weight:200;margin:0 0 6px}
.kprazno .kp-v{font-family:var(--body);font-size:var(--t-sm);color:var(--kamen-d);margin:0 0 16px}

/* ── kartice ponudnikov ───────────────────────────────────────────── */

.pcard .meta{
  font-family:var(--num);font-size:var(--t-micro);letter-spacing:.06em;
  text-transform:uppercase;color:var(--kamen);
}
.pcard .rate{margin-top:12px;font-size:var(--t-md);color:var(--kamen-d)}
.pcard .rate .none{color:var(--kamen);font-size:var(--t-sm)}

@media (max-width:520px){
  /* 12 px od roba zaslona: dovolj atmosfere ob kartici, da se vidi, da
     lebdi, in dovolj širine za iskalno polje in gumba. */
  .kjunak{padding:6px 18px 24px;min-height:380px;margin:8px calc(12px - var(--rob-strani)) 22px}
  .kjunak .kj-dej .btn{width:100%;justify-content:center}
}