/* Naslovna strana: odeljci Zašto, Usluge (sa zadržavanjem) i Traka. */
/* 01 Zašto */
.cetiri{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.25rem,3vw,2.5rem);list-style:none;margin:0;padding:0}
.cetiri li{border-top:1px solid var(--bordo);padding-top:1.25rem}
.cetiri .br{font:700 .85rem var(--f-tekst);letter-spacing:.08em;color:var(--roza-tamna)}
.cetiri h3{font:italic 500 1.6rem/1.15 var(--f-naslov);margin:.6rem 0 .75rem}
.cetiri p{color:var(--tekst-blaga);font-size:1.05rem}

/* 03 Usluge (uz skrol: odeljak se zadrži, a stavke i slike se smenjuju) */
.usluge__stage{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);gap:clamp(2rem,6vw,6rem);align-items:start}
.usluge__slika{position:relative;width:min(100%,440px,62svh);aspect-ratio:1;margin-inline:auto}
.usluge__slika .prsten{position:absolute;inset:0;border:1.5px dashed var(--roza);border-radius:50%}
.usluge__slika .krug{position:absolute;inset:9%;border-radius:50%;overflow:hidden;background:linear-gradient(150deg,#e9d3d7,#c08792)}
.usluge__slika .krug img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s ease}
.usluge__slika .krug img.on{opacity:1}
.usluge__slika .krug::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(94,26,40,.14);pointer-events:none}
.lista{list-style:none;margin:0;padding:0}
.lista li{border-top:1px solid var(--linija);padding:clamp(1.5rem,3vw,2.25rem) 0;opacity:.55;transition:opacity .3s}
.lista li:last-child{border-bottom:1px solid var(--linija)}
.lista li.aktivna,.lista li:hover,.lista li:focus-within{opacity:1}
.lista .br{font:700 .85rem var(--f-tekst);letter-spacing:.08em;color:var(--roza-tamna)}
.lista h3{font:italic 500 clamp(1.7rem,3vw,2.3rem)/1.1 var(--f-naslov);margin:.4rem 0 .6rem}
.lista .detalj{display:grid;grid-template-rows:1fr}
.lista .detalj>div{overflow:hidden;min-height:0;padding:4px;margin:-4px}
.lista p{color:var(--tekst-blaga);margin-bottom:1rem;max-width:30em}
.usluge__sve{margin-top:2rem}

/* Način "zadržavanja" (JS dodaje .pin kad je to dozvoljeno) */
.usluge.pin{--vis:calc(100svh - 76px);height:calc(var(--vis) + var(--n) * 60svh)}
.usluge.pin .usluge__stage{position:sticky;top:76px;height:var(--vis);align-items:center}
.usluge.pin .lista li{padding:clamp(.9rem,2.2svh,1.5rem) 0;opacity:.45}
.usluge.pin .lista li.aktivna{opacity:1}
.usluge.pin .lista li:hover,.usluge.pin .lista li:focus-within{opacity:1}
.usluge.pin .lista h3{margin:.25rem 0 0;font-size:clamp(1.5rem,2.6vw,2.1rem)}
.usluge.pin .lista .detalj{grid-template-rows:0fr;transition:grid-template-rows .45s ease}
.usluge.pin .lista li.aktivna .detalj{grid-template-rows:1fr}
.usluge.pin .lista p{margin:.6rem 0 1rem}
.usluge.pin .lista .dugme{margin-bottom:.4rem}

/* Traka: zakazivanje i radno vreme */
.traka{display:grid;grid-template-columns:1fr 1fr;background:var(--bordo);color:var(--podloga)}
.traka__slika{min-height:360px;background:linear-gradient(135deg,#743243,#43111c);display:grid;place-items:center;color:var(--podloga-2);font:italic 500 1.1rem var(--f-naslov);text-align:center;padding:2rem}
.traka__tekst{padding:clamp(2.5rem,6vw,6rem);display:flex;flex-direction:column;justify-content:center;gap:1.25rem;align-items:flex-start}
.traka h2{font-size:clamp(2rem,3.8vw,3.1rem)}
.traka p{color:var(--podloga-2);max-width:30em}
.sat{list-style:none;margin:.25rem 0 .5rem;padding:0;display:grid;gap:.4rem;font-size:1.05rem}
.sat li{display:flex;gap:1.5rem;justify-content:space-between;border-bottom:1px solid rgba(251,249,249,.2);padding-bottom:.4rem;min-width:min(100%,22rem)}

@media (max-width:1000px){
  .cetiri{grid-template-columns:repeat(2,1fr)}
  .glava,.usluge__stage,.traka{grid-template-columns:1fr}
  .usluge__stage{gap:1.25rem}
  .usluge__slika{width:min(100%,320px,34svh)}
  .usluge.pin .lista li{display:grid;grid-template-columns:auto 1fr;column-gap:.85rem;align-items:baseline;padding:.65rem 0}
  .usluge.pin .lista .detalj{grid-column:2}
  .usluge.pin .lista h3{font-size:1.35rem}
  .usluge.pin .lista p{margin:.4rem 0 .6rem;font-size:1rem}
}
@media (max-width:620px){.cetiri{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.usluge__slika .krug img,.lista .detalj{transition:none!important}}