/*
 | PROFIL CZLOWIEKA /p/{slug} - makieta "Profil człowieka" (siedem stanow).
 |
 | Kolory WYLACZNIE z tokenow `gold.css` (oba motywy), zadnej liczby
 | koloru w tym pliku. Telefon jest baza, laptop od 1024 px osobna
 | rozkladka (prawo przyjecia kazdej strony, patrz CLAUDE.md).
 |
 | Przedrostek `cz-` - zanim nadasz nowej rzeczy krotka klase, sprawdz
 | `grep -rn "\.nazwa" public/css`: `.st` z biz.css rozsypala kiedys stopke.
 */

.cz{max-width:1280px;margin:0 auto;padding:0 0 24px;overflow-x:clip}
.cz-bok,.cz-tresc{min-width:0}

/* ---------- glowka ---------- */
.cz-glowka{position:relative}
.cz-okl{position:relative;height:200px;overflow:hidden;background:var(--gsoft)}
.cz-okl img,.cz-okl video{width:100%;height:100%;object-fit:cover;display:block}
/* Przejscie do tla strony - awatar i imie wchodza na okladke. */
.cz-okl:after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 45%,var(--paper) 100%)}

.cz-idn{position:relative;z-index:2;margin-top:-56px;padding:0 18px}
.cz-ava{display:block;width:96px;height:96px;border-radius:50%;overflow:hidden;
  border:2px solid var(--yl);background:var(--card)}
.cz-ava img,.cz-ava video{width:100%;height:100%;object-fit:cover;display:block}
.cz-ava-pl{display:grid;place-items:center;border-color:var(--gline);
  font:800 34px/1 var(--f-display);color:var(--yl)}
.cz-imie{font:900 28px/1.05 var(--f-display);letter-spacing:-.03em;color:var(--ink);
  margin:14px 0 0;overflow-wrap:anywhere}
.cz-szuka{display:inline-flex;align-items:center;gap:6px;margin:10px 0 0;padding:4px 9px;
  font:700 11px var(--f-display);letter-spacing:.1em;text-transform:uppercase;
  color:var(--green);border:1px solid var(--green)}
.cz-szuka s{width:6px;height:6px;border-radius:50%;background:var(--green);text-decoration:none;flex:none}
.cz-fach{display:block;margin:10px 0 0;font:600 17px/1.3 var(--f-display);color:var(--yl);text-decoration:none}
a.cz-fach:hover{text-decoration:underline}
.cz-fach-bez{color:var(--ink2);font-weight:500}
.cz-miejsce{margin:4px 0 0;font:400 14px/1.4 var(--f-body);color:var(--ink2)}

/* ---------- pas liczb (w miejsce stawki) ---------- */
.cz-liczby{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);
  margin:18px 18px 0;border-top:1px solid var(--gline);border-bottom:1px solid var(--gline)}
.cz-lz{position:relative;padding:13px 4px 12px;text-align:center;min-width:0}
.cz-lz+.cz-lz:before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:1px;background:var(--gline2)}
.cz-lz b{display:block;font:700 26px/1 var(--f-cond);background:var(--gtx);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.cz-lz span{display:block;margin-top:5px;font:600 10px/1.3 var(--f-display);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink2);overflow-wrap:anywhere}

/* ---------- guziki wedlug tego, kto patrzy ---------- */
.cz-pad{padding:0 18px}
.cz-akcje{display:flex;gap:9px;margin:16px 0 0;align-items:stretch}
.cz-akcje>form,.cz-akcje>a,.cz-akcje>.cz-stan{flex:1 1 0;min-width:0}
.cz-akcje .btn{width:100%;min-height:50px;justify-content:center;text-align:center}
.cz-stan{display:flex;align-items:center;justify-content:center;color:var(--ink2);cursor:default}
.cz-wiecej{position:relative;flex:none}
.cz-wiecej>summary{list-style:none;width:50px;min-height:50px;padding:0;display:grid;place-items:center;cursor:pointer}
.cz-wiecej>summary::-webkit-details-marker{display:none}
.cz-wiecej>summary svg{width:20px;height:20px;fill:currentColor}
.cz-wiecej-m{position:absolute;right:0;top:calc(100% + 6px);z-index:30;min-width:220px;
  background:var(--card);border:1px solid var(--obw);padding:6px 0}
.cz-wiecej-m button{display:block;width:100%;text-align:left;padding:12px 16px;min-height:44px;
  background:none;border:0;font:600 15px var(--f-body);color:var(--ink);cursor:pointer}
.cz-wiecej-m button:hover,.cz-wiecej-m button:focus-visible{background:var(--gsoft)}
.cz-podp{margin:10px 0 0;font:400 13px/1.5 var(--f-body);color:var(--ink2)}

/* ---------- przypiety pasek ---------- */
.cz-pasek{position:sticky;bottom:0;z-index:40;display:flex;gap:10px;align-items:center;
  margin:22px 0 0;padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));
  background:var(--card);border-top:1px solid var(--gline)}
.cz-pasek-kto{flex:1 1 auto;min-width:0}
.cz-pasek-kto b{display:block;font:700 15px/1.2 var(--f-display);color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cz-pasek-kto span{display:block;font:600 10px/1.3 var(--f-display);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cz-pasek>form,.cz-pasek>a{flex:none;max-width:60%}
.cz-pasek .btn{min-height:46px;white-space:nowrap}
/* Na telefonie pasek stoi NAD dolnym menu portalu (tabbar.css, 66 px). */
@media (max-width:760px){
  .cz-pasek{bottom:calc(66px + env(safe-area-inset-bottom,0px));padding-bottom:10px}
}

/* ---------- bloki i naglowki ---------- */
.cz-blok{margin:26px 0 0}
.cz-h{display:flex;align-items:baseline;gap:8px;margin:0 0 13px;font:700 11px var(--f-display);
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink2)}
.cz-h em{margin-left:auto;font-style:normal;font-weight:400;letter-spacing:0;font-size:12px;text-transform:none}

/* ---------- znajomi ---------- */
.cz-zn{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.cz-zn-kolka{display:flex}
.cz-zn-kolka a{display:block;width:44px;height:44px;border-radius:50%;overflow:hidden;
  border:2px solid var(--paper);margin-left:-11px;background:var(--gsoft);text-decoration:none}
.cz-zn-kolka a:first-child{margin-left:0}
.cz-zn-kolka img{width:100%;height:100%;object-fit:cover;display:block}
.cz-zn-kolka span{display:grid;place-items:center;width:100%;height:100%;
  font:800 17px/1 var(--f-display);color:var(--yl)}
.cz-zn-ile{margin:0;font:400 13px/1.4 var(--f-body);color:var(--ink2)}
.cz-zn-ile b{display:block;font:700 15px var(--f-display);color:var(--ink)}

/* ---------- zakladki Praca | Osobiste ---------- */
.cz-taby{display:flex;gap:26px;margin:26px 0 0;border-bottom:1px solid var(--gline2)}
.cz-taby a{display:flex;align-items:center;gap:6px;padding:0 0 11px;margin-bottom:-1px;min-height:44px;
  font:700 15px var(--f-display);color:var(--ink2);text-decoration:none;border-bottom:2px solid transparent}
.cz-taby a.on{color:var(--ink);border-bottom-color:var(--yl)}
.cz-taby a:focus-visible{outline:2px solid var(--yl);outline-offset:2px}
.cz-txt{font:400 15px/1.65 var(--f-body);color:var(--ink)}

.cz-pusto{margin:26px 0 0;padding:20px 18px;border:1px solid var(--gline2);text-align:center}
.cz-pusto p{margin:0 0 12px;font:400 14px/1.5 var(--f-body);color:var(--ink2)}

/* ---------- dostepnosc i jezyki (chipy) ---------- */
.cz-avl{display:flex;flex-wrap:wrap;gap:7px;margin:18px 0 0;padding:0;list-style:none}
.cz-avl li{display:flex;align-items:center;gap:6px;padding:7px 11px;min-width:0;
  font:600 13px/1.3 var(--f-body);color:var(--ink);background:var(--gsoft);border:1px solid var(--gline2)}
.cz-avl li s{width:6px;height:6px;border-radius:50%;background:var(--yl);text-decoration:none;flex:none}
.cz-avl li.g s{background:var(--green)}
.cz-blok .cz-avl{margin:0}

/* ---------- uprawnienia z terminami ---------- */
.cz-upr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.cz-up{padding:13px;background:var(--card);border:1px solid var(--gline2);min-width:0}
.cz-up b{display:block;font:700 17px/1.2 var(--f-cond);color:var(--yl);overflow-wrap:anywhere}
.cz-up span{display:block;margin-top:5px;font:400 12px/1.35 var(--f-body);color:var(--ink2);overflow-wrap:anywhere}
.cz-up em{display:block;margin-top:7px;font:600 12px var(--f-body);font-style:normal;color:var(--green)}
.cz-up-wkrotce em{color:var(--warn)}
.cz-up-po em,.cz-up-bez em{color:var(--ink2)}
.cz-dane{display:flex;flex-wrap:wrap;gap:6px 22px;margin:16px 0 0}
.cz-dane div{min-width:0}
.cz-dane dt{font:700 10px var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)}
.cz-dane dd{margin:3px 0 0;font:500 14px var(--f-body);color:var(--ink)}

/* ---------- co teraz, a co po uscisku dloni ---------- */
.cz-prv{margin:26px 0 0;padding:16px 17px;background:var(--card);border:1px solid var(--gline2)}
.cz-prv h2{margin:0 0 10px;font:700 14px/1.3 var(--f-display);color:var(--ink)}
.cz-prv ul{margin:0;padding:0;list-style:none}
.cz-prv li{position:relative;padding:5px 0 5px 23px;font:400 13.5px/1.5 var(--f-body);color:var(--ink2)}
.cz-prv li:before{content:"";position:absolute;left:2px;top:11px;width:9px;height:9px;border:1px solid var(--ink2)}
.cz-prv li.y:before{border-color:var(--green);background:var(--green)}
.cz-prv p{margin:11px 0 0;padding-top:11px;border-top:1px solid var(--gline2);font:400 12.5px/1.5 var(--f-body);color:var(--ink2)}

.cz-przyjety{display:flex;gap:11px;align-items:flex-start;margin:16px 0 0;padding:14px 15px;border:1px solid var(--green)}
.cz-przyjety s{width:8px;height:8px;margin-top:6px;border-radius:50%;background:var(--green);text-decoration:none;flex:none}
.cz-przyjety b{display:block;font:700 14px var(--f-display);color:var(--ink)}
.cz-przyjety p{margin:3px 0 0;font:400 13px/1.5 var(--f-body);color:var(--ink2)}

.cz-otw{display:flex;flex-direction:column;gap:1px;background:var(--gline2);border:1px solid var(--gline2)}
.cz-otw>div{display:flex;flex-wrap:wrap;align-items:center;gap:2px 10px;padding:12px 14px;background:var(--paper);min-width:0}
/* Podpis NAD wartoscia: w stalej kolumnie "CONVERSATION" wchodzilo na tekst. */
.cz-otw span{flex:0 0 100%;font:700 10px var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)}
.cz-otw b{flex:1;min-width:0;font:600 14.5px var(--f-body);color:var(--ink);overflow-wrap:anywhere}
.cz-otw a,.cz-otw button{flex:none;margin-left:auto;min-height:44px;padding:0 4px;display:flex;align-items:center;
  background:none;border:0;font:600 13px var(--f-body);color:var(--yl);text-decoration:none;cursor:pointer}
.cz-otw form{margin-left:auto}

/* ---------- jestem z firmy ---------- */
.cz-firma{display:flex;align-items:center;gap:12px;margin:18px 0 0;padding:13px 14px;
  background:var(--card);border:1px solid var(--gline);text-decoration:none;min-width:0}
.cz-firma-l{flex:none;width:44px;height:44px;display:grid;place-items:center;overflow:hidden;
  border:1px solid var(--gline);font:800 18px var(--f-display);color:var(--yl)}
.cz-firma-l img{width:100%;height:100%;object-fit:cover}
.cz-firma-t{flex:1;min-width:0}
.cz-firma-t b{display:block;font:700 15px/1.25 var(--f-display);color:var(--ink);overflow-wrap:anywhere}
.cz-firma-t span{display:block;margin-top:2px;font:400 12.5px var(--f-body);color:var(--green)}
.cz-firma-s{flex:none;font-size:20px;color:var(--ink2)}
.cz-ofr{display:flex;flex-direction:column;gap:7px}
.cz-pusto-l{text-align:left}
.cz-pusto-l b{display:block;margin:0 0 7px;font:700 15px var(--f-display);color:var(--ink)}
.cz-pusto-l p{margin:0}

/* ---------- LAPTOP OD 1024 px - osobna rozkladka, nie rozciagniety telefon ---------- */
@media (min-width:1024px){
  .cz{padding:0 0 56px}
  .cz-okl{height:290px}
  .cz-uklad{display:grid;grid-template-columns:380px minmax(0,1fr);gap:46px;align-items:start;padding:0 56px}
  /* Karta wchodzi na okladke i STOI przy przewijaniu (pod gornym paskiem). */
  .cz-bok{position:sticky;top:84px;margin-top:-104px;z-index:3}
  .cz-karta{background:var(--card);border:1px solid var(--gline);padding:24px}
  .cz-karta .cz-idn{margin-top:0;padding:0}
  .cz-karta .cz-ava{width:106px;height:106px}
  .cz-karta .cz-imie{font-size:27px}
  .cz-karta .cz-liczby{margin:20px 0 0}
  .cz-karta .cz-pad,.cz-tresc .cz-pad{padding:0}
  .cz-tresc{padding-top:30px}
  .cz-txt{font-size:16.5px;max-width:680px}
  .cz-upr{grid-template-columns:repeat(3,minmax(0,1fr))}
  /* Na laptopie decyzja stoi w przypietej karcie - pasek na dole byl by
     druga kopia tego samego guzika. */
  .cz-pasek{display:none}
  .cz-akcje .btn:hover,.cz-firma:hover{border-color:var(--obw)}
  .cz-akcje .btn:focus-visible,.cz-firma:focus-visible,.cz-otw a:focus-visible,.cz-otw button:focus-visible{
    outline:2px solid var(--yl);outline-offset:2px}
}

/* Podglad "jak widza Cie firmy" - pasek nad okladka z droga z powrotem. */
.cz-podglad{margin:12px 16px 0;display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;justify-content:space-between}