/* ══════════════════════════════════════════════════════════════════════════
   LAKER DETAILING — /usluge i pet strana usluga
   Učitava se posle laker.css. Ovde je samo ono što druge strane nemaju:
   dvokolonski raspored strane usluge, lepljiva kartica sa cenama,
   traka sa skok-linkovima (keramika) i kartice usluga.
   ══════════════════════════════════════════════════════════════════════════ */

/* strana jedne usluge — dve kolone */
.usl-body{display:grid;grid-template-columns:1.45fr 1fr;gap:80px;align-items:start;padding:clamp(50px,6vw,80px) 0 0}
.usl-col{display:flex;flex-direction:column;gap:60px;min-width:0}
.usl-block h2{font-family:var(--serif);font-size:34px;font-weight:300;margin-bottom:24px;letter-spacing:-.5px;line-height:1.1}
.usl-block h2 em{font-style:italic;color:var(--gold)}
.usl-block > p{font-size:14px;line-height:1.85;color:var(--mgray);font-weight:300;max-width:62ch}

/* lepljiva kartica sa cenama */
.usl-aside{position:sticky;top:130px;display:flex;flex-direction:column;gap:2px;min-width:0}
.usl-aside .bx{background:var(--d2);padding:40px 38px}
.usl-aside .k{font-size:10px;letter-spacing:4px;text-transform:uppercase;color:var(--gray);margin-bottom:14px}
.usl-aside .big{font-family:var(--serif);font-size:56px;font-weight:300;line-height:1;letter-spacing:-1px;color:var(--gold)}
.usl-aside .big small{font-family:var(--sans);font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--gray);margin-left:10px}
.usl-aside .pl{list-style:none;margin-top:22px;display:flex;flex-direction:column}
.usl-aside .pl li{display:flex;justify-content:space-between;gap:14px;font-size:13.5px;padding:11px 0;border-top:1px solid rgba(255,255,255,.08);color:var(--mgray);font-weight:300}
body.light .usl-aside .pl li{border-top-color:rgba(0,0,0,.08)}
.usl-aside .pl li b{color:var(--white);font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}
.usl-aside .akcije{margin-top:28px;display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.usl-aside .akcije .btn-g{justify-content:center;width:100%}
.usl-aside .paket{font-size:14px;line-height:1.8;color:var(--mgray);font-weight:300}
.usl-aside .paket b{color:var(--white);font-weight:500}

/* traka sa skok-linkovima (koristi je /keramicka-zastita) */
.jump{display:flex;gap:2px;flex-wrap:wrap;margin-top:34px}
.jump a{background:var(--d2);color:var(--lgray);padding:12px 22px;font-size:10px;letter-spacing:3px;text-transform:uppercase;text-decoration:none;transition:background .3s,color .3s;cursor:none}
.jump a:hover{background:var(--gold);color:var(--black)}

/* manje sekcije premaza ispod glavnog bloka */
.usl-sub{border-top:1px solid rgba(255,255,255,.08);padding-top:clamp(44px,5vw,70px);margin-top:clamp(44px,5vw,70px)}
body.light .usl-sub{border-top-color:rgba(0,0,0,.08)}
.usl-sub-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;margin-bottom:26px}
.usl-sub h2{font-family:var(--serif);font-size:clamp(30px,3.6vw,44px);font-weight:300;line-height:1.05;letter-spacing:-1px}
.usl-sub h2 em{font-style:italic;color:var(--gold)}
.usl-sub .cene{display:flex;gap:2px;flex-wrap:wrap;margin-top:24px}
.usl-sub .cena{background:var(--d2);padding:14px 18px;min-width:118px}
.usl-sub .cena span{display:block;font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--gray);margin-bottom:5px}
.usl-sub .cena strong{font-family:var(--serif);font-size:24px;font-weight:300;color:var(--gold);letter-spacing:-.5px}

@media(max-width:1100px){
  .usl-body{grid-template-columns:1fr;gap:56px}
  .usl-aside{position:static}
}
@media(max-width:768px){
  .usl-body{gap:44px;padding-top:40px}
  .usl-col{gap:44px}
  .usl-block h2{font-size:28px;margin-bottom:18px}
  .usl-aside .bx{padding:30px 24px}
  .usl-aside .big{font-size:46px}
  .jump a{padding:11px 16px;letter-spacing:2px}
}

/* skrivanje pri otkrivanju sekcija — isto pravilo kao na početnoj */
html:where(.js-ready) :where(.us-card){
  opacity:0;
  transform:translateY(24px);
  transition:
    opacity .8s cubic-bezier(.2,.8,.2,1),
    transform .8s cubic-bezier(.2,.8,.2,1);
  transition-delay:var(--reveal-delay,0ms);
}
@media (prefers-reduced-motion: reduce){
  html:where(.js-ready) :where(.us-card){
    opacity:1 !important;transform:none !important;transition:none !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   TELEFON (≤768px) — izbor vlasnika 2026-09-03 (demo /demo-telefon, varijanta C):
   pet usluga kao spisak (naziv, kratak opis, cena desno, strelica) — svih pet
   stane na jedan ekran. Računar (3 kolone) i tablet (2 kolone) ostaju.
   ══════════════════════════════════════════════════════════════════════════ */
@media(max-width:768px){
  h1.sh br{display:none}
  .us-grid{gap:0;background:var(--d2)}
  .us-card{display:grid;grid-template-columns:1fr auto;grid-template-areas:"k pr" "h pr" "p pr";column-gap:14px;row-gap:0;align-items:center;padding:15px 18px;min-height:0;border-bottom:1px solid rgba(255,255,255,.08);transform:none}
  body.light .us-card{border-bottom-color:rgba(0,0,0,.08)}
  .us-card:last-child{border-bottom:0}
  .us-card:hover{transform:none}
  .us-card .k{grid-area:k;font-size:8.5px;letter-spacing:2.5px}
  .us-card h2,.us-card h3{grid-area:h;font-size:23px;margin-top:5px;letter-spacing:-.4px}
  .us-card p{grid-area:p;font-size:11.5px;line-height:1.4;margin-top:5px;flex:none;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .us-card .pr{grid-area:pr;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:4px;border:0;padding:0;text-align:right}
  .us-card .pr b{font-size:22px;white-space:nowrap;display:flex;flex-direction:column;align-items:flex-end}
  .us-card .pr b small{margin:3px 0 0;font-size:8.5px;letter-spacing:1.5px}
  .us-card .pr span{font-size:0;letter-spacing:0}
  .us-card .pr span::after{content:'→';font-size:18px;color:var(--gold)}
}


/* ══════════════════════════════════════════════════════════════════════════
   NIVOI POLIRANJA — kartice umesto tabele (2026-09-06, odluka vlasnika)
   Tabela je govorila koliko prolaza ima nivo, ali ne i šta čovek dobija.
   Kartica nosi jednu podebljanu rečenicu koristi, cenu i traku „koliko rešava"
   (--w), pa se raspon 30→100% vidi okom. Traka NIJE procenat ničega merljivog —
   samo redosled jačine zahvata; zato uz nju ne stoji broj.
   Koriste je /poliranje-laka (#test i #nivoi).
   ══════════════════════════════════════════════════════════════════════════ */
.niv{display:flex;flex-direction:column;gap:2px}
.niv-c{background:var(--d2);padding:26px 28px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 24px;position:relative;transition:background var(--transition)}
.niv-c:hover{background:var(--d3)}
.niv-c .t{font-family:var(--serif);font-size:26px;font-weight:300;line-height:1.1;letter-spacing:-.3px}
.niv-c .t em{font-style:italic;color:var(--gold)}
.niv-c .p{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--gray);align-self:start;text-align:right;white-space:nowrap;padding-top:8px}
.niv-c .p b{display:block;font-family:var(--serif);font-size:24px;letter-spacing:0;text-transform:none;color:var(--white);font-weight:300;line-height:1.1;margin-top:4px}
.niv-c .d{grid-column:1/-1;font-size:14px;line-height:1.8;color:var(--mgray);font-weight:300;max-width:58ch}
.niv-c .d b{color:var(--white);font-weight:500}
.niv-c .z{grid-column:1/-1;display:flex;align-items:center;gap:12px;margin-top:6px}
.niv-c .z span{font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--gray);white-space:nowrap}
.niv-c .z i{display:block;height:2px;flex:1;background:rgba(255,255,255,.08);position:relative}
body.light .niv-c .z i{background:rgba(0,0,0,.08)}
.niv-c .z i::after{content:"";position:absolute;left:0;top:0;bottom:0;background:var(--gold);width:var(--w)}
/* oznaka paketa — tvrdo #0B0B0B na crvenom, ne var(--black): u svetloj temi je --black svetlo bež */
.niv-c.top{outline:1px solid var(--gold);outline-offset:-1px}
.niv-c.top::before,.niv-c.mid::before{position:absolute;top:0;right:28px;transform:translateY(-50%);font-size:9px;letter-spacing:3px;text-transform:uppercase;padding:5px 12px;font-weight:600}
.niv-c.top::before{content:"Ulazi u Laker paket";background:var(--gold);color:#0B0B0B}
.niv-c.mid::before{content:"Ulazi u Boost paket";background:var(--d4);color:var(--lgray)}

/* tri provere koje klijent uradi sam, pre nego što uopšte pozove */
.tst3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px}
.tst3 div{background:var(--d2);padding:26px 24px}
.tst3 .n{font-family:var(--serif);font-size:40px;color:var(--gold);line-height:1;font-weight:300;margin-bottom:14px}
.tst3 b{display:block;font-size:14px;color:var(--white);font-weight:500;margin-bottom:8px;line-height:1.4}
.tst3 p{font-size:13px;line-height:1.75;color:var(--mgray);font-weight:300}
.tst3 p em{color:var(--gold);font-style:normal}

@media(max-width:768px){
  .tst3{grid-template-columns:1fr}
  .niv-c{padding:22px 20px;grid-template-columns:1fr}
  .niv-c .p{text-align:left;padding-top:0}
  .niv-c .p b{display:inline;margin-left:10px;font-size:20px}
  .niv-c .t{font-size:23px}
  .niv-c.top::before,.niv-c.mid::before{right:20px}
}

/* ── NAJMANJA SLOVA NA TELEFONU (2026-09-23) — isto pravilo kao na kraju laker.css ── */
@media(max-width:768px){
  .us-card .k{font-size:10px;letter-spacing:2px}
  .us-card .pr b small{font-size:10.5px;letter-spacing:1px}
  .usl-aside .big small{font-size:10.5px}
}

/* ── /usluge NA TELEFONU: bez futera (vlasnik 2026-09-23) ──
   Strana se završava karticama usluga, kao što se cenovnik završava Loyalty-jem.
   Klasa str-usluge stoji samo na <body> u usluge.html, pa 5 strana usluga zadržava futer. */
@media(max-width:768px){
  body.str-usluge>footer{display:none}
}