/* Razdelek "Iz prve roke" na jobbit.si/reference po handoffu design_handoff_reference_4d
   ("Kupček, ki odleti", 20. 10. 2026). Naloži ga samo reference.html; predpona jb-ref.
   Pravila .rq-* v styles.css so stara različica tega razdelka in so od te objave neuporabljena.

   Namerna odstopanja od prototipa, enaka kot pri drugih handoffih:
   - temna je --dark, limeta --neon, zelena --green-700 (barve strani, ne #0B1D17/#C7E70F/#0E7A57);
   - krepko v besedilu izjave je navadna pisava: v platformi je pri večini izjav krepko celotno
     prilepljeno besedilo, handoff pa ima telo v navadni pisavi.

   Past: navpični razmiki niso na .wrap, ker styles.css pri <=480 px nastavi .wrap{padding:0 16px !important}. */

.rf-citati{background:var(--paper);padding:72px 20px;}

.jb-refs{max-width:1400px;margin:0 auto;box-sizing:border-box;background:#EEF3F1;border-radius:18px;
  padding:72px 64px 64px;display:flex;gap:64px;align-items:flex-start;overflow:hidden;outline:none;}
.jb-refs:focus-visible{box-shadow:0 0 0 2px var(--green-700);}

/* ---------- levi stolpec ---------- */
.jb-refs__side{flex:0 0 320px;}
.jb-refs__eyebrow{display:block;font-family:var(--mono);text-transform:uppercase;font-size:11px;font-weight:500;
  letter-spacing:.2em;color:var(--green-700);margin-bottom:14px;}
.jb-refs__title{margin:0 0 32px;font-size:42px;line-height:1.06;font-weight:500;letter-spacing:-.035em;color:var(--dark);text-wrap:pretty;}
.jb-refs__nav{display:flex;align-items:center;gap:12px;margin-bottom:20px;}
.jb-refs__prev,.jb-refs__next{width:52px;height:52px;flex:none;border-radius:999px;font-family:inherit;font-size:18px;line-height:1;
  cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;
  transition:border-color .12s ease-out,transform .12s ease-out;}
.jb-refs__prev{border:1px solid #C9D8D1;background:#fff;color:var(--dark);}
.jb-refs__prev:hover{border-color:var(--dark);}
.jb-refs__next{border:0;background:var(--dark);color:var(--neon);}
.jb-refs__prev:active,.jb-refs__next:active{transform:scale(.96);}
.jb-refs__prev:focus-visible,.jb-refs__next:focus-visible{outline:2px solid var(--green-700);outline-offset:3px;}
.jb-refs__count{font-size:15px;font-weight:500;color:var(--dark);margin-left:8px;white-space:nowrap;font-variant-numeric:tabular-nums;}
.jb-refs__bar{height:3px;max-width:220px;border-radius:99px;background:#D6DFDB;overflow:hidden;}
.jb-refs__bar span{display:block;height:100%;width:0;background:var(--green-700);border-radius:99px;}
.jb-refs__bar span.is-run{animation:jbRefFill var(--dur,7000ms) linear forwards;}
/* Premor: miška nad razdelkom, fokus s tipkovnico v njem ali razdelek ni na zaslonu. Napredek se
   nadaljuje od istega mesta. Fokus po kliku z miško (gumb puščice) premora ne sproži, sicer bi vrtiljak
   po kliku obstal, dokler uporabnik ne klikne drugam. */
.jb-refs:hover .jb-refs__bar span,.jb-refs:focus-visible .jb-refs__bar span,.jb-refs:has(:focus-visible) .jb-refs__bar span,
.jb-refs.is-zunaj .jb-refs__bar span{animation-play-state:paused;}
@keyframes jbRefFill{from{width:0;}to{width:100%;}}
/* Z eno samo izjavo ni kaj menjati. */
.jb-refs.is-ena .jb-refs__nav,.jb-refs.is-ena .jb-refs__bar{display:none;}

/* ---------- oder s kupčkom ---------- */
.jb-refs__stage{flex:1;min-width:0;padding:44px 56px 0 0;}
.jb-refs__deck{position:relative;}
.jb-ref{position:absolute;inset:0;box-sizing:border-box;min-height:340px;overflow:hidden;background:#fff;
  border:1px solid #E2E9E5;border-radius:20px;box-shadow:0 18px 40px rgba(11,29,23,.09);padding:40px 44px 44px;
  transform-origin:50% 0;opacity:0;pointer-events:none;
  transition:transform .7s cubic-bezier(.22,1,.36,1),opacity .6s;}
/* Preden skripta razporedi kupček (ali brez JavaScripta), je vidna samo prva kartica. */
.jb-refs__deck:not(.is-zlozen) .jb-ref:first-child{position:relative;opacity:1;pointer-events:auto;}
.jb-ref[data-o="0"]{position:relative;transform:none;opacity:1;z-index:5;pointer-events:auto;}
.jb-ref[data-o="1"]{transform:translate(26px,-20px) scale(.96);opacity:.8;z-index:4;}
.jb-ref[data-o="2"]{transform:translate(52px,-40px) scale(.92);opacity:.45;z-index:3;}
.jb-ref[data-o="skrita"]{transform:translate(52px,-40px) scale(.92);z-index:2;}
.jb-ref[data-o="odletela"]{transform:translate(-118%,24px) rotate(-6deg);z-index:1;}

.jb-ref__head{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-bottom:22px;
  border-bottom:1px solid #EDF1EF;margin-bottom:26px;}
.jb-ref__who{flex:1;min-width:0;}
.jb-ref__name{font-size:18px;font-weight:500;color:var(--dark);}
.jb-ref__sub{font-size:14px;line-height:1.45;color:#7A8A84;margin-top:4px;}
.jb-ref__logo{flex:0 0 160px;height:56px;display:flex;align-items:center;justify-content:flex-end;}
.jb-ref__logo img{max-height:48px;max-width:160px;width:auto;height:auto;object-fit:contain;display:block;transition:opacity .2s;}
/* Logotip, ki ga brskalnik še preverja (bel na prozornem?), se pokaže šele po preverjanju. */
.jb-ref__logo img.is-preverjam{opacity:0;}
.jb-ref__logo img.is-white{filter:grayscale(1) brightness(.34) contrast(1.15);}
.jb-ref__ini{width:56px;height:56px;border-radius:999px;background:#E3EEE9;color:var(--green-700);display:flex;
  align-items:center;justify-content:center;font-size:18px;font-weight:500;}
.jb-ref__title{margin:0 0 18px;font-size:26px;line-height:1.3;font-weight:500;letter-spacing:-.025em;color:var(--dark);text-wrap:pretty;}
.jb-ref__body{font-size:16px;line-height:1.7;color:#41544D;}
.jb-ref__body p{margin:0 0 1.7em;}
.jb-ref__body p:last-child{margin-bottom:0;}
.jb-ref__body strong,.jb-ref__body b{font-weight:inherit;color:inherit;}
.jb-ref__body a{color:var(--green-700);text-decoration:underline;text-underline-offset:3px;}
.jb-ref__body a:hover{color:var(--dark);}

/* ---------- ožji zasloni ---------- */
@media (max-width:1024px){
  .rf-citati{padding:56px 20px;}
  .jb-refs{flex-direction:column;gap:36px;padding:48px 32px;}
  .jb-refs__side{flex:none;}
  .jb-refs__stage{width:100%;box-sizing:border-box;padding:28px 28px 0 0;}
}
@media (max-width:640px){
  .rf-citati{padding:0;}
  .jb-refs{padding:40px 20px;border-radius:0;}
  .jb-refs__title{font-size:30px;}
  .jb-refs__stage{padding:20px 26px 0 0;}
  .jb-ref{padding:24px 22px 28px;}
  .jb-ref__head{gap:14px;}
  .jb-ref__logo{flex-basis:96px;}
  .jb-ref__logo img{max-width:96px;max-height:36px;}
  .jb-ref__title{font-size:21px;}
  .jb-ref__body{font-size:15px;}
  .jb-ref[data-o="1"]{transform:translate(13px,-10px) scale(.97);}
  .jb-ref[data-o="2"],.jb-ref[data-o="skrita"]{transform:translate(26px,-20px) scale(.94);}
}
@media (prefers-reduced-motion:reduce){
  .jb-ref{transition:opacity .2s;}
  .jb-ref[data-o="odletela"]{transform:none;}
  .jb-refs__bar span.is-run{animation:none;width:100%;}
}