/* ============ KAJ VSE DELAMO · uporabe.html (prenova 24.9.2026, agent 2) · predpona up- ============
   Tai: stran "obup, grozna" → v slogu celotne strani (termo/deko/varnostne, index, konfigurator).
   Vrh = sub-hero (nova.css) · kazalo = steklene kapsule · Po objektu / Po rabi = kartice .kje (sistem.css, iste kot "Trije problemi"
   na termo) s sliko iz "Kaj vse delamo" na domaci (assets/kd/c/<id>.jpg) · prelivi 28 px (steklo.css --fade-*).
   Sidra #dom … #stresna ostanejo (nanje kaze index). Oznak "— 01" ni (Tai). */

/* kazalo: dva stolpca kot meni v "Kaj vse delamo" na domaci (Tai: kapsule v oblaku "niso ok");
   ob miski za imenom bela kapsula in puscica; zgoraj preliv iz temnega vrha */
.up-idx{position:relative;padding:clamp(48px,7vh,80px) 0 0;background:#fff}
.up-idx::before{content:"";position:absolute;left:0;right:0;top:0;height:28px;pointer-events:none;background:var(--fade-from-ink)}
.up-idx-in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,80px)}
.up-idx-in .up-idx-l{max-width:none}
.up-idx-l{margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid rgba(14,19,16,.09);font-family:var(--m);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-50)}
.up-list{list-style:none;margin:0;padding:0}
.up-list li{margin:0;padding:0;border:0;max-width:none}
.up-list a{position:relative;display:inline-flex;align-items:baseline;gap:14px;padding:8px 18px 8px 16px;margin-left:-16px;border-radius:999px;text-decoration:none;
  font-family:var(--h);font-weight:500;font-size:clamp(18px,1.65vw,23px);letter-spacing:-.015em;line-height:1.3;color:rgba(14,19,16,.62);
  transition:color .25s,background-color .25s,box-shadow .25s}
.up-list a i{font-style:normal;font-family:var(--m);font-weight:400;font-size:11.5px;letter-spacing:.06em;color:var(--green-dark)}
.up-list a b{font-weight:400;font-size:.8em;opacity:0;transform:translateY(-3px);transition:opacity .25s,transform .35s cubic-bezier(.22,1,.36,1)}
.up-list a:hover{color:var(--ink);background:#fff;box-shadow:0 0 0 1px rgba(14,19,16,.06),0 6px 16px rgba(14,19,16,.07)}
.up-list a:hover b{opacity:1;transform:none}
.up-list a:focus-visible{outline:2px solid var(--green-dark);outline-offset:2px}

/* sekciji */
.up-sec .kje{margin-top:var(--sp-8,48px)}
#objekti{padding-top:clamp(56px,8vh,96px)}
.up-c{height:clamp(480px,42vw,580px);scroll-margin-top:110px}
.up-g{width:min(440px,calc(100% - 2*var(--sp-4)))}
.up-g h3{margin-bottom:var(--sp-3)}
.up-pains{list-style:none;margin:0 0 var(--sp-4);padding:0}
.up-pains li{position:relative;max-width:none;margin:0;padding:3px 0 3px 16px;border:0;font-size:var(--fs-caption);line-height:1.45;color:var(--ink-70)}
.up-pains li::before{content:"";position:absolute;left:0;top:.8em;width:6px;height:6px;border-radius:50%;background:var(--green-dark)}
.up-g .kje-f{margin-bottom:var(--sp-4)}
.up-g .kje-p{min-height:0}
.up-note{margin:0 0 var(--sp-4);font-size:13px;line-height:1.5;color:var(--ink-50)}
.up-go{display:inline-flex;align-items:center;gap:8px;padding-bottom:2px;font-family:var(--h);font-weight:600;font-size:14.5px;color:var(--ink);text-decoration:none;
  border-bottom:1px solid rgba(14,19,16,.3);transition:border-color .2s}
.up-go:hover{border-bottom-color:var(--ink)}
.up-go span{transition:transform .3s cubic-bezier(.22,1,.36,1)}
.up-go:hover span{transform:translateX(3px)}

/* Po rabi: svetlo siv pas, prelivi (zgoraj iz belega, spodaj v zakljucni poziv) namesto crt */
.up-rabe{position:relative;border:0}
.up-rabe::before,.up-rabe::after{content:"";position:absolute;left:0;right:0;height:28px;pointer-events:none}
.up-rabe::before{top:0;background:var(--fade-top-white)}
.up-rabe::after{bottom:0;background:var(--fade-to-ink2)}
.up-rabe .up-c{height:clamp(460px,38vw,540px)}

@media (max-width:760px){
  .up-idx-in{grid-template-columns:1fr;gap:28px}
  .up-list a{font-size:18px;padding:6px 14px 6px 12px;margin-left:-12px}
}
}
@media (max-width:640px){
  .up-c,.up-rabe .up-c{height:auto}
}