/* Kodirani svijet · naslovnica-radovi.css (naslovnica HR i /en/): sekcija Vidikovac (#radovi), „Skijaška staza”
   (specifikacija 30, 21. 10. 2026.). Ponašanje je u naslovnica-radovi.js.
   Staza kreće od startne kućice gore desno (ispod uvodne rečenice), spušta se ulijevo ispod naslova,
   vijuga kroz vrata 01–03 u lijevom stupcu, pa se ispod sadržaja okrene udesno do cilja „Želim svoj web”.
   Računalo: u sredini značajke aktivnog rada, desno preglednik s mobitelom i velikim obrubljenim brojem.
   Uz data-nacin="lijepi" pozornica se zalijepi ispod zaglavlja, a skrolanje vodi skijaša niz stazu:
   ulaz se crta dok sekcija ulazi u kadar, slalom dok je pozornica zalijepljena, a rep dok odlazi gore.
   Ulaz i rep crta .slalom__vani (cijela sekcija), slalom .slalom__crtez (u zalijepljenoj pozornici).
   Mobitel i uski ekran: kućica iznad niske vodoravne staze s tri postaje, a rep do cilja na dnu sekcije. */

#radovi{
  overflow-x: clip; /* ništa iz sekcije ne smije proširiti stranicu (clip ne smeta lijepljenju) */
  --sl-linija: #cdd2c4;
  --sl-linija-tiha: #e1e4d7;
  --sl-papir: #fbfaf3;
  --sl-tiho: #5d6862;
  --sl-sjena: #dde2d3;
  --sl-razmak: clamp(22px, 2.6vw, 40px);
  --sl-k-staza: clamp(186px, 16vw, 246px);
  --sl-k-znacajke: clamp(212px, 19.5vw, 296px);
  --slalom-vrh: 72px;
  --slalom-put: 125vh;
  /* cilj na dnu sam nosi dio razmaka do sljedeće sekcije */
  padding-bottom: clamp(44px, 4.4vw, 64px);
}
#radovi .slalom__ikone{ position: absolute; width: 0; height: 0; overflow: hidden; }
#radovi .slalom-naslov{ margin-bottom: clamp(26px, 3.2vw, 46px); }

/* ---------- Ulaz: startna kućica i uputa ---------- */
#radovi .slalom__ulaz{ position: relative; display: flex; align-items: flex-end; gap: 12px; --sl-kucica: clamp(132px, 40vw, 172px); }
#radovi .slalom__kucica{ flex: none; display: block; width: var(--sl-kucica, 150px); max-width: none; height: auto; overflow: visible; }
/* tanke crte iste debljine na svakoj veličini crteža */
#radovi .slalom__kucica *{ vector-effect: non-scaling-stroke; }
#radovi .slalom__brdo{ fill: none; stroke: #d7dbcd; stroke-width: 1.1; stroke-linecap: round; }
#radovi .slalom__tlo{ fill: none; stroke: #9aa290; stroke-width: 1.2; stroke-linecap: round; }
#radovi .slalom__tlo--tiho{ stroke: #c9cebf; }
#radovi .slalom__cempres{ fill: #e4e8dc; stroke: #6f7a6c; stroke-width: 1.2; stroke-linejoin: round; }
#radovi .slalom__kucica-zid{ fill: var(--paper-light); stroke: #5b6457; stroke-width: 1.3; stroke-linejoin: round; }
#radovi .slalom__kucica-krov-ploha{ fill: #eef0e6; stroke: #5b6457; stroke-width: 1.3; stroke-linejoin: round; }
#radovi .slalom__kucica-krov{ fill: none; stroke: #5b6457; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
#radovi .slalom__kucica-krov--tanko{ stroke-width: 1; }
#radovi .slalom__kucica-daske{ fill: none; stroke: #c9cebf; stroke-width: 1; stroke-linecap: round; }
#radovi .slalom__kucica-daske--prozor{ stroke: #5b6457; }
#radovi .slalom__kucica-prozor{ fill: var(--paper-light); stroke: #5b6457; stroke-width: 1.1; stroke-linejoin: round; }
#radovi .slalom__kucica-natpis{ fill: var(--paper-light); stroke: #5b6457; stroke-width: 1.1; }
#radovi .slalom__kucica-tekst{ font: 600 8.4px/1 var(--pismo-mono); letter-spacing: .22em; fill: #3a423d; }
#radovi .slalom__kucica-otvor{ fill: #e4e8dc; stroke: #5b6457; stroke-width: 1.2; stroke-linejoin: round; }
#radovi .slalom__kucica-skijas{ fill: none; stroke: #6f7a6c; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
#radovi .slalom__kucica-start{ fill: none; stroke: var(--orange); stroke-width: 2; stroke-linecap: round; }
#radovi .slalom__kucica-start--palica{ stroke-width: 1.6; }
#radovi .slalom__kucica-rampa{ fill: var(--paper-light); stroke: #5b6457; stroke-width: 1.2; stroke-linejoin: round; }
#radovi .slalom__kucica-ograda{ fill: none; stroke: #6f7a6c; stroke-width: 1.1; stroke-linecap: round; }
#radovi .slalom__kucica-motka{ fill: none; stroke: #5b6457; stroke-width: 1.3; stroke-linecap: round; }
#radovi .slalom__kucica-zastava{ fill: var(--orange); transform-box: fill-box; transform-origin: 0 50%; }
#radovi[data-slalom="lijepi"] .slalom__kucica-zastava{ animation: sl-vijori 3.2s ease-in-out infinite; }
@keyframes sl-vijori{ 0%, 100%{ transform: skewY(0deg) scaleX(1); } 50%{ transform: skewY(-6deg) scaleX(.88); } }

/* ---------- Pozornica i radovi (zajedničko) ---------- */
#radovi .slalom{ position: relative; }
#radovi .slalom__pozornica{ position: relative; }
#radovi .slalom__radovi{ display: grid; grid-template-columns: minmax(0, 1fr); }
#radovi .slalom__rad{
  position: relative; grid-area: 1 / 1; min-width: 0;
  transition: opacity .45s ease, visibility 0s linear .45s;
}
#radovi .slalom__rad:not(.je-aktivan){ opacity: 0; visibility: hidden; pointer-events: none; }
#radovi .slalom__rad.je-aktivan{ opacity: 1; visibility: visible; transition: opacity .5s ease .08s, visibility 0s; }

/* uputa iznad staze */
#radovi .slalom__uputa{ display: flex; flex-direction: column; gap: 4px; margin: 0; line-height: 1.4; }
#radovi .slalom__uputa-naslov{ font: 600 11.5px/1.4 var(--pismo-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
#radovi .slalom__uputa-naslov > span{ white-space: pre; }
@media (max-width: 760px){ #radovi .slalom__uputa-naslov > span{ display: block; white-space: normal; } #radovi .slalom__uputa-naslov > .slalom__uputa-tocka{ display: none; } }
#radovi .slalom__uputa-tekst{ font-size: 14px; color: var(--sl-tiho); text-wrap: pretty; }
#radovi .slalom__uputa-tekst--skrol, #radovi .slalom__uputa-tekst--dodir{ display: none; }
#radovi[data-slalom="lijepi"] .slalom__uputa-tekst--skrol{ display: block; }
#radovi[data-slalom="lijepi"] .slalom__uputa-tekst--klik{ display: none; }

/* ---------- Staza: crtež, vrata, natpisi ---------- */
#radovi .slalom__teren{ position: relative; }
/* širina i visina u CSS-u: bez njih SVG prije JS-a ima zadanih 300×150 px i na 320 px proširi stranicu */
#radovi .slalom__crtez{ position: absolute; left: 0; top: 0; z-index: 0; display: block; width: 100%; height: 100%; max-width: none; overflow: visible; pointer-events: none; }
/* ulaz i rep: crtež preko cijele sekcije, ispod sadržaja (sekcija je izolirana, pa -1 ostaje iznad njezine pozadine) */
#radovi .slalom__vani{ position: absolute; left: 0; top: 0; z-index: -1; display: block; width: 100%; height: 100%; max-width: none; overflow: visible; pointer-events: none; }
#radovi .slalom__put{ fill: none; stroke: #c3c9b8; stroke-width: 1.6; stroke-dasharray: 1.5 6; stroke-linecap: round; }
#radovi .slalom__put-prijedeno{ fill: none; stroke: var(--orange); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
#radovi[data-slalom="mirno"] .slalom__put{ stroke: #efa88c; stroke-dasharray: 5 7; stroke-width: 1.8; }
#radovi .slalom__skijas-sjaj{ fill: var(--orange); opacity: .14; }
#radovi .slalom__skijas-tocka{ fill: var(--orange); stroke: var(--paper-light); stroke-width: 2.5; }
#radovi .slalom__skijas{ transform-box: view-box; }

#radovi .slalom__postaje{ position: relative; z-index: 1; margin: 0; padding: 0; list-style: none; }
#radovi .slalom__postaja{
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px;
  margin: 0; padding: 4px 0; border: 0; border-radius: 8px; background: none;
  color: inherit; font: inherit; text-align: left; cursor: pointer;
}
#radovi .slalom__postaja:focus-visible{ outline: 3px solid var(--orange); outline-offset: 4px; }
#radovi .slalom__vrata{ --sl-krug: 38px; position: relative; flex: none; display: grid; place-items: center; }
#radovi .slalom__krug{
  display: grid; place-items: center; width: var(--sl-krug); height: var(--sl-krug); border-radius: 50%;
  border: 1.5px solid #b8bfae; background: var(--paper-light);
  font: 600 11.5px/1 var(--pismo-mono); letter-spacing: .02em; color: #6d776c;
  transition: border-color .3s, color .3s, background-color .3s, box-shadow .3s;
}
#radovi .slalom__zastavica{
  position: absolute; left: calc(50% + 9px); bottom: calc(50% + 10px); width: 14px; height: 23px; overflow: visible;
  transform-origin: 2.5px 25px; transition: transform .35s cubic-bezier(.3, 1.4, .5, 1);
}
#radovi .slalom__motka{ fill: none; stroke: #8f9886; stroke-width: 1.4; stroke-linecap: round; }
#radovi .slalom__platno{ fill: var(--paper-light); stroke: #9aa391; stroke-width: 1.3; stroke-linejoin: round; transition: fill .3s, stroke .3s; }
#radovi .slalom__natpis{ display: flex; flex-direction: column; min-width: 0; }
#radovi .slalom__stanje{
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 3px;
  font: 600 11px/1.3 var(--pismo-mono); letter-spacing: .12em; text-transform: uppercase; color: #4f6a4b;
}
#radovi .slalom__stanje::before{ content: ""; width: 6px; height: 6px; border-radius: 50%; background: #3f8f4f; }
#radovi .slalom__stanje--izrada{ color: #a33a14; }
#radovi .slalom__stanje--izrada::before{ width: 5px; height: 5px; background: none; border: 1.5px solid var(--orange); }
#radovi .slalom__ime{ font-size: 19px; font-weight: 600; line-height: 1.2; letter-spacing: -.025em; color: #59625c; transition: color .25s; }
#radovi .slalom__struka{ margin-top: 2px; font-size: 14px; line-height: 1.35; color: #737d74; }

/* signal na neaktivnoj postaji (mirni način, naslovnica-radovi.js): lukovi oko kruga kratko zatitraju i nestanu.
   Sloj je ukras preko kruga: ne prima pokazivač i ne mijenja veličinu ni položaj gumba. */
/* središte je središte kruga (vrata su na mobitelu šira od kruga), a veličina ide od promjera kruga: viewBox je 72 jedinice, krug 38 */
#radovi .slalom__signal{
  position: absolute; left: 50%; top: 50%; width: calc(var(--sl-krug) * 72 / 38); height: auto; aspect-ratio: 1; max-width: none;
  translate: -50% -50%; overflow: visible; pointer-events: none;
  fill: none; stroke: var(--orange); stroke-width: 2; stroke-linecap: round;
}
#radovi .slalom__signal path{ opacity: 0; vector-effect: non-scaling-stroke; }
#radovi .je-signal:not(.je-aktivno) .slalom__signal path{ animation: sl-signal 1s ease-out both; }
#radovi .je-signal:not(.je-aktivno) .slalom__signal .slalom__signal-van{ animation-delay: .18s; }
@keyframes sl-signal{ 0%{ opacity: 0; } 30%{ opacity: .85; } 100%{ opacity: 0; } }

/* hover i aktivna postaja: mijenja se samo boja, ništa se ne pomiče */
#radovi .slalom__postaja:hover .slalom__ime{ color: var(--ink); }
#radovi .slalom__postaja:hover .slalom__krug{ border-color: #e98a66; }
#radovi .je-prijedeno .slalom__krug{ border-color: #eda083; color: #b5512c; }
#radovi .je-prijedeno .slalom__platno{ stroke: #e9946f; }
#radovi .je-aktivno .slalom__krug{ border-color: var(--orange); background: var(--orange); color: #fff; box-shadow: 0 0 0 6px #ef54281c; }
#radovi .je-aktivno .slalom__platno{ fill: var(--orange); stroke: var(--orange); }
#radovi .je-aktivno .slalom__motka{ stroke: #5b6457; }
#radovi .je-aktivno .slalom__ime{ color: var(--ink); }
#radovi .je-aktivno .slalom__zastavica{ transform: rotate(-4deg); }

/* ---------- Cilj na dnu sekcije ---------- */
#radovi .slalom__cilj{ position: relative; display: flex; justify-content: flex-end; align-items: flex-end; gap: 12px; margin-top: clamp(10px, 1.6vw, 18px); }
#radovi .slalom__cilj-zastava{ flex: none; display: block; width: 26px; height: auto; margin-bottom: 4px; overflow: visible; transform-origin: 3px 41px; transition: transform .35s cubic-bezier(.3, 1.4, .5, 1); }
#radovi .slalom__cilj-motka{ fill: none; stroke: #5b6457; stroke-width: 1.4; stroke-linecap: round; }
#radovi .slalom__cilj-platno{ fill: var(--paper-light); stroke: #5b6457; stroke-width: 1.2; stroke-linejoin: round; }
#radovi .slalom__cilj-kocke{ fill: #3a423d; transition: fill .3s; }
#radovi .slalom__cilj.je-stigao .slalom__cilj-kocke{ fill: var(--orange); }
#radovi .slalom__cilj.je-stigao .slalom__cilj-zastava{ transform: rotate(-5deg); }
#radovi .slalom__cilj-veze{ display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0 32px; }
#radovi :is(.slalom__cilj-veza, .slalom__svi-radovi){
  display: inline-flex; align-items: center; gap: 14px; min-height: 48px;
  font-size: 17px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); border-bottom: 1px solid #5b675855;
}
#radovi :is(.slalom__cilj-veza, .slalom__svi-radovi) span{ color: var(--orange); font-size: 20px; }
#radovi :is(.slalom__cilj-veza, .slalom__svi-radovi):hover{ border-color: var(--orange); color: #bd3d17; }
/* „Pogledajte sve radove” (kad bude više radova) stoji uz glavni poziv, malo tiša */
#radovi .slalom__svi-radovi{ font-weight: 560; color: #39403b; }

/* ---------- Preglednik, mobitel, veliki broj ---------- */
#radovi .slalom__prikaz{
  --sl-mob: clamp(76px, 19cqw, 150px);
  --sl-izlaz: calc(var(--sl-mob) * .46);
  --sl-ispod: clamp(22px, 3.4cqw, 38px);
  --sl-traka: 34px;
  --sl-broj: clamp(96px, 30cqw, 236px);
  --sl-broj-vrh: calc(var(--sl-broj) * .5);
  position: relative; container-type: inline-size; touch-action: pan-y;
}
#radovi .slalom__okvir{
  position: relative; width: calc(100% - var(--sl-izlaz));
  margin: var(--sl-broj-vrh) 0 var(--sl-ispod);
}
#radovi .slalom__veliki-broj{
  position: absolute; left: -.04em; bottom: calc(100% - .34em); z-index: 0;
  font: 200 var(--sl-broj)/.74 Archivo, sans-serif; letter-spacing: -.06em; font-variant-numeric: tabular-nums;
  color: transparent; -webkit-text-stroke: 1.4px #b9c1ad; pointer-events: none; user-select: none;
}
#radovi .slalom__preglednik{
  position: relative; z-index: 1; overflow: hidden;
  border: 1px solid #c3cbb9; border-radius: 4px; background: #fff;
  box-shadow: 7px 8px 0 var(--sl-sjena);
}
#radovi .slalom__traka{
  display: flex; align-items: center; gap: 10px; height: var(--sl-traka); padding: 0 10px 0 12px;
  border-bottom: 1px solid #ccd2c0; background: #e9ecdf;
  font: 500 12px/1 var(--pismo-mono); color: #4d5b49;
}
#radovi .slalom__tockice{ display: flex; flex: none; gap: 4px; }
#radovi .slalom__tockice i{ width: 6px; height: 6px; border-radius: 50%; background: #a9b39e; }
#radovi .slalom__adresa{ flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#radovi .slalom__status{
  display: inline-flex; flex: none; align-items: center; gap: 6px; padding: 4px 8px 4px 7px; border-radius: 999px;
  background: #dfe9d9; color: #2f5a2c; font: 600 11px/1 var(--pismo-mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
}
#radovi .slalom__status::before{ content: ""; width: 6px; height: 6px; border-radius: 50%; background: #3f8f4f; }
#radovi .slalom__status--izrada{ background: #f6e5db; color: #a33a14; }
#radovi .slalom__status--izrada::before{ width: 4px; height: 4px; background: none; border: 1.5px solid var(--orange); }
#radovi .slalom__ekran{ position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: #f4f5ee; }
#radovi .slalom__ekran :is(picture, img, video){ position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
#radovi .slalom__pregled{ opacity: 0; transition: opacity .5s ease; }
#radovi .slalom__pregled.je-u-pokretu{ opacity: 1; }
#radovi .slalom__mobitel{
  position: absolute; z-index: 2; right: calc(var(--sl-izlaz) * -1); bottom: calc(var(--sl-ispod) * -1);
  width: var(--sl-mob); aspect-ratio: 9 / 18.6; padding: 5px;
  border: 2px solid #2d3431; border-radius: clamp(14px, 2.2cqw, 22px); background: #fbfaf3;
  box-shadow: 6px 7px 0 var(--sl-sjena);
}
#radovi .slalom__mobitel::before{ content: ""; position: absolute; top: 9px; left: 50%; z-index: 1; width: 24%; height: 5px; border-radius: 3px; background: #2d3431; translate: -50% 0; }
#radovi .slalom__mobitel picture{ display: contents; }
#radovi .slalom__mobitel img{ width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: clamp(9px, 1.5cqw, 15px); }

/* ---------- Ada-Mar: leća „Iza fasade” klizi preko snimke (snimke fasade i sloja instalacija s ada-mar.hr) ---------- */
/* položaj leće u postocima snimke; bez animacije (smanjeno gibanje, pauza) leća stoji na završnom mjestu */
@property --sl-lx{ syntax: "<percentage>"; inherits: true; initial-value: 64.5%; }
@property --sl-ly{ syntax: "<percentage>"; inherits: true; initial-value: 53%; }
#radovi .slalom__leca{ --sl-lx: 64.5%; --sl-ly: 53%; --sl-lr: 11cqw; container-type: inline-size; }
#radovi .slalom__leca-iza{ clip-path: circle(var(--sl-lr) at var(--sl-lx) var(--sl-ly)); }
#radovi .slalom__leca-krug{
  position: absolute; z-index: 1; left: var(--sl-lx); top: var(--sl-ly); width: calc(var(--sl-lr) * 2); aspect-ratio: 1; translate: -50% -50%;
  border: 1.5px solid #cfe4fff2; border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 0 calc(var(--sl-lr) * .045) #091c2b47;
  background:
    linear-gradient(#cfe4ff, #cfe4ff) 50% 0 / 1.5px 7% no-repeat, linear-gradient(#cfe4ff, #cfe4ff) 50% 100% / 1.5px 7% no-repeat,
    linear-gradient(#cfe4ff, #cfe4ff) 0 50% / 7% 1.5px no-repeat, linear-gradient(#cfe4ff, #cfe4ff) 100% 50% / 7% 1.5px no-repeat;
}
#radovi .slalom__leca-krug::before{
  content: ""; position: absolute; left: 50%; top: 50%; width: 9%; aspect-ratio: 1; translate: -50% -50%;
  background: linear-gradient(#cfe4ffaa, #cfe4ffaa) 50% 50% / 1px 100% no-repeat, linear-gradient(#cfe4ffaa, #cfe4ffaa) 50% 50% / 100% 1px no-repeat;
}
#radovi .slalom__leca-oznaka{
  position: absolute; top: 88%; left: 84%; padding: .5em .95em; border: 1px solid #33506a; background: #0b1c2b; color: #cfe4ff;
  font: 600 clamp(6px, 1.05cqw, 10.5px)/1 Archivo, sans-serif; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap;
}
/* mobitel: kadar snimke ima omjer 1 : 2 i siječe se kao object-fit: cover, pa postoci leće ostaju točni */
#radovi .slalom__mob-ekran{ position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: clamp(9px, 1.5cqw, 15px); }
#radovi .slalom__leca--mob{ --sl-lx: 38.5%; --sl-ly: 88.5%; --sl-lr: 21cqw; position: absolute; top: 0; left: 50%; height: 100%; aspect-ratio: 1 / 2; translate: -50% 0; }
#radovi .slalom__mobitel .slalom__leca--mob img{ position: absolute; inset: 0; border-radius: 0; }
#radovi .slalom__leca--mob .slalom__leca-krug{ border-width: 1px; box-shadow: none; }
/* leća krene kad je staza u kadru (Ada-Mar je prvi, pa bi inače odradila put prije nego je posjetitelj vidi) */
#radovi .slalom[data-gibanje="da"].je-u-kadru .slalom__rad.je-aktivan .slalom__leca{ animation: sl-leca 3.2s .45s both; }
#radovi .slalom[data-gibanje="da"].je-u-kadru .slalom__rad.je-aktivan .slalom__leca--mob{ animation-name: sl-leca-mob; animation-delay: .7s; }
/* leća krene dolje desno, pretraži gornje cijevi, pa mirno sjedne na spoj cijevi */
@keyframes sl-leca{
  0%{ --sl-lx: 85%; --sl-ly: 72%; animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  42%{ --sl-lx: 80%; --sl-ly: 44%; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  100%{ --sl-lx: 64.5%; --sl-ly: 53%; }
}
@keyframes sl-leca-mob{
  0%{ --sl-lx: 77%; --sl-ly: 89.5%; animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  42%{ --sl-lx: 63%; --sl-ly: 82%; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  100%{ --sl-lx: 38.5%; --sl-ly: 88.5%; }
}

/* ---------- Opis rada ---------- */
#radovi .slalom__opis{ min-width: 0; }
#radovi .slalom__oznaka{ margin: 0 0 10px; font: 600 11.5px/1.4 var(--pismo-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--sl-tiho); }
#radovi .slalom__opis h3{ margin: 0 0 10px; font: 620 clamp(30px, 2.7vw, 42px)/1 Archivo, sans-serif; letter-spacing: -.045em; color: var(--ink); }
#radovi .slalom__kratko{ max-width: min(100%, 470px); margin: 0 0 12px; font: italic 450 clamp(16px, 1.22vw, 18px)/1.55 Fraunces, Georgia, serif; color: #39403b; }
#radovi .slalom__veze{ display: flex; flex-wrap: wrap; align-items: center; gap: 4px 30px; }
#radovi .slalom__uzivo{
  display: inline-flex; align-items: center; gap: 16px; min-height: 44px;
  font-size: 15px; font-weight: 580; border-bottom: 1px solid #5b675855;
}
#radovi .slalom__uzivo span{ color: var(--orange); font-size: 19px; }
#radovi .slalom__uzivo:hover{ border-color: var(--orange); color: #bd3d17; }
#radovi .slalom__video{ display: inline-flex; align-items: center; gap: 11px; min-height: 44px; font-size: 15px; font-weight: 580; color: var(--ink); }
#radovi .slalom__video small{ font: 500 12.5px var(--pismo-mono); color: var(--sl-tiho); }
#radovi .slalom__play{ display: grid; place-items: center; width: 36px; height: 36px; border: 1.5px solid var(--orange); border-radius: 50%; color: var(--orange); transition: background-color .2s, color .2s; }
#radovi .slalom__play svg{ width: 18px; height: 18px; fill: currentColor; }
#radovi .slalom__video:hover .slalom__play{ background: var(--orange); color: #fff; }

/* ---------- Značajke ---------- */
#radovi .slalom__znacajke{ position: relative; min-width: 0; }
#radovi .slalom__znacajke-naslov{
  margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--sl-linija-tiha);
  font: 600 11px/1.4 var(--pismo-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--sl-tiho);
}
#radovi .slalom__znacajke ul{ display: grid; gap: clamp(10px, 1.7vh, 16px); margin: 0; padding: 0; list-style: none; }
#radovi .slalom__znacajke li{ display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; }
#radovi .slalom__znacajke li:has(> a){ display: block; }
#radovi .slalom__znacajka-veza{ display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; min-height: 44px; border-radius: 6px; }
#radovi .slalom__znacajka-veza b span{ color: var(--orange); font-weight: 500; }
#radovi .slalom__znacajka-veza:hover b{ color: #bd3d17; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #ef542866; }
#radovi .slalom__ikona{ width: 22px; height: 22px; margin-top: 1px; color: var(--orange); }
#radovi .slalom__znacajka{ display: block; min-width: 0; }
#radovi .slalom__znacajka b{ display: block; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; color: var(--ink); }
#radovi .slalom__znacajka > span{ display: block; margin-top: 2px; font-size: 14px; line-height: 1.5; color: var(--sl-tiho); }

/* ulazak aktivnog rada (samo uz dopušteno gibanje) */
#radovi .slalom[data-gibanje="da"] .slalom__rad.je-aktivan .slalom__okvir{ animation: sl-okvir .7s cubic-bezier(.2, .75, .2, 1) both; }
#radovi .slalom[data-gibanje="da"] .slalom__rad.je-aktivan .slalom__veliki-broj{ animation: sl-broj .8s cubic-bezier(.2, .75, .2, 1) .05s both; }
#radovi .slalom[data-gibanje="da"] .slalom__rad.je-aktivan .slalom__znacajke li{ animation: sl-stavka .5s cubic-bezier(.2, .75, .2, 1) both; }
#radovi .slalom[data-gibanje="da"] .slalom__rad.je-aktivan .slalom__znacajke li:nth-child(2){ animation-delay: .05s; }
#radovi .slalom[data-gibanje="da"] .slalom__rad.je-aktivan .slalom__znacajke li:nth-child(3){ animation-delay: .1s; }
#radovi .slalom[data-gibanje="da"] .slalom__rad.je-aktivan .slalom__znacajke li:nth-child(4){ animation-delay: .15s; }
#radovi .slalom[data-gibanje="da"] .slalom__rad.je-aktivan .slalom__znacajke li:nth-child(5){ animation-delay: .2s; }
/* okvir ulazi odozdo: pomak udesno gurao je mobitel preko desnog ruba na 320 px (vodoravni preljev pri učitavanju) */
@keyframes sl-okvir{ from{ translate: 0 14px; } to{ translate: 0 0; } }
@keyframes sl-broj{ from{ translate: 0 16px; opacity: 0; } to{ translate: 0 0; opacity: 1; } }
@keyframes sl-stavka{ from{ translate: 0 8px; opacity: 0; } to{ translate: 0 0; opacity: 1; } }

/* ================= Naslov s ulazom (≥ 761 px): rečenica gore desno, kućica i uputa ispod nje ================= */
@media (min-width: 761px){
  #radovi .slalom-naslov{ display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 40px; align-items: end; }
  #radovi .slalom-naslov > div:first-child{ grid-area: 1 / 1; }
  #radovi .slalom-naslov > p{ grid-area: 1 / 2; }
  #radovi .slalom__ulaz{ grid-area: 2 / 1 / 3 / -1; justify-content: flex-end; margin-top: 10px; --sl-kucica: 230px; }
}
/* računalo: velika kućica visi lijevo od upute (u praznom prostoru između naslova i rečenice), uputa stoji poravnata s rečenicom */
@media (min-width: 1024px){
  #radovi .slalom-naslov{ margin-bottom: clamp(8px, 1.2vw, 20px); }
  #radovi .slalom__ulaz{ grid-area: 2 / 2; justify-content: flex-start; margin-top: clamp(14px, 1.6vw, 24px); --sl-kucica: clamp(220px, 21vw, 360px); }
  #radovi .slalom__kucica{ position: absolute; right: calc(100% + 4px); bottom: -4px; }
  #radovi .slalom__uputa{ padding-bottom: 2px; }
}

/* ================= Računalo (≥ 1024 px) ================= */
@media (min-width: 1024px){
  #radovi .slalom__pozornica{
    display: grid; grid-template-columns: var(--sl-k-staza) minmax(0, 1fr); column-gap: var(--sl-razmak);
  }
  #radovi .slalom__staza{ display: flex; flex-direction: column; min-height: 0; }
  #radovi .slalom__teren{ flex: 1 1 auto; min-height: 560px; }
  /* vrata na 10 %, 43 % i 77 % visine: ulaz brzo dođe do 01, a ispod 03 ostaje mjesta za zavoj prema cilju */
  #radovi .slalom__postaje{ position: absolute; inset: 0; display: grid; grid-template-rows: .6fr 1.4fr .6fr .4fr; align-items: center; }
  #radovi .slalom__mjesto--desno .slalom__postaja{ flex-direction: row-reverse; text-align: right; }
  #radovi .slalom__mjesto--desno .slalom__natpis{ align-items: flex-end; }
  #radovi .slalom__mjesto--desno .slalom__zastavica{ left: auto; right: calc(50% + 9px); transform: scaleX(-1); }
  #radovi .slalom__mjesto--desno.je-aktivno .slalom__zastavica{ transform: scaleX(-1) rotate(-4deg); }

  #radovi .slalom__rad{
    display: grid; grid-template-columns: var(--sl-k-znacajke) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto; grid-template-areas: "zn prikaz" "zn opis";
    column-gap: var(--sl-razmak);
  }
  #radovi .slalom__prikaz{ grid-area: prikaz; display: flex; flex-direction: column; justify-content: flex-end; }
  #radovi .slalom__opis{ grid-area: opis; padding-top: 6px; }
  #radovi .slalom__znacajke{
    grid-area: zn; align-self: start; padding-left: 18px; border-left: 1px solid var(--sl-linija-tiha);
    transform: translateY(var(--zn-pomak, 0px));
  }
  /* kvačica: tanka crta od aktivnih vrata do značajki */
  #radovi .slalom__znacajke::before{
    content: ""; position: absolute; top: var(--zn-kvaka, 14px); left: calc(var(--sl-razmak) * -1); width: var(--sl-razmak);
    border-top: 1.5px dashed #ef5428a8;
  }
  #radovi .slalom__znacajke::after{
    content: ""; position: absolute; top: calc(var(--zn-kvaka, 14px) - 3px); left: -4px; width: 7px; height: 7px; border-radius: 50%; background: var(--orange);
  }

  /* zalijepljena pozornica: omot je viši za duljinu skrolanja, pozornica stoji ispod zaglavlja */
  #radovi .slalom[data-nacin="lijepi"]{ height: calc(100vh - var(--slalom-vrh) + var(--slalom-put)); }
  #radovi .slalom[data-nacin="lijepi"] .slalom__pozornica{
    position: sticky; top: var(--slalom-vrh); height: calc(100vh - var(--slalom-vrh));
    /* na vrlo visokom ekranu (npr. 2560×1440) sadržaj ostaje visok najviše 960 px; višak ide uglavnom ispod, da ne bude praznine između starta i prvog rada */
    --sl-visak: max(0px, (100vh - var(--slalom-vrh) - 960px) / 2);
    grid-template-rows: minmax(0, 1fr); padding: max(clamp(16px, 3.4vh, 40px), var(--sl-visak) * .4) 0 max(clamp(14px, 3vh, 36px), var(--sl-visak) * 1.6);
  }
  #radovi .slalom[data-nacin="lijepi"] .slalom__teren{ min-height: 0; }
  #radovi .slalom[data-nacin="lijepi"] .slalom__radovi{ grid-template-rows: minmax(0, 1fr); min-height: 0; }
  #radovi .slalom[data-nacin="lijepi"] .slalom__rad{ min-height: 0; }
  #radovi .slalom[data-nacin="lijepi"] .slalom__prikaz{ container-type: size; min-height: 0; }
  #radovi .slalom[data-nacin="lijepi"] .slalom__okvir{
    flex: none; margin-top: 0;
    width: min(100cqw - var(--sl-izlaz), (100cqh - var(--sl-broj-vrh) - var(--sl-ispod) - var(--sl-traka)) * 1.6);
  }
  #radovi .slalom[data-nacin="lijepi"] .slalom__prikaz{ --sl-broj: clamp(96px, min(40cqw, 38cqh), 260px); }
  /* gumbi „Pitajte Sovu” i pauze stoje dolje desno preko zalijepljene pozornice; opis im se skloni (širinu mjeri naslovnica-radovi.js) */
  #radovi .slalom[data-nacin="lijepi"] :is(.slalom__kratko, .slalom__veze){ margin-right: var(--sl-sova, 0px); }
}
@media (min-width: 1024px) and (max-width: 1279px){
  #radovi .slalom__ime{ font-size: 17px; }
  #radovi .slalom__vrata{ --sl-krug: 34px; }
  #radovi .slalom__znacajke{ padding-left: 14px; }
}

/* ================= Uski ekran (< 1024 px): vodoravna staza ================= */
@media (max-width: 1023.98px){
  #radovi .slalom__staza{ margin: 0 0 6px; }
  #radovi .slalom__uputa{ margin-bottom: 8px; }
  #radovi .slalom__teren{ height: 104px; }
  #radovi .slalom__postaje{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); height: 100%; }
  #radovi .slalom__postaja{ flex-direction: column; justify-content: flex-start; gap: 8px; height: 100%; padding: 22px 2px 4px; text-align: center; }
  #radovi .slalom__natpis{ align-items: center; }
  #radovi .slalom__stanje, #radovi .slalom__struka{ display: none; }
  #radovi .slalom__ime{ font-size: 15px; line-height: 1.2; }
  #radovi .slalom__vrata{ --sl-krug: 34px; }
  #radovi .slalom__krug{ font-size: 11px; }
  #radovi .slalom__zastavica{ width: 12px; height: 20px; left: calc(50% + 8px); bottom: calc(50% + 9px); opacity: 0; transition: opacity .3s; }
  #radovi .je-aktivno .slalom__zastavica{ opacity: 1; }
  #radovi .slalom__rad{ display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; align-content: start; }
  /* visinu daje samo aktivni rad, pa kraći rad (Mali Kaj) ne ostavlja prazninu ispod; odlazeći se pretapa preko */
  #radovi .slalom__radovi{ position: relative; }
  #radovi .slalom__rad:not(.je-aktivan){ position: absolute; inset: 0 0 auto; }
  #radovi .slalom__prikaz{ --sl-mob: clamp(70px, 23cqw, 150px); --sl-broj: clamp(92px, 30cqw, 200px); }
  #radovi .slalom__opis{ padding-top: 4px; }
  #radovi .slalom__znacajke{ margin-top: 26px; padding-top: 2px; }
}
/* povlačenje radi samo prstom ili olovkom, pa se spominje samo na dodirnom zaslonu */
@media (max-width: 1023.98px) and (pointer: coarse){
  #radovi .slalom__uputa-tekst--klik{ display: none; }
  #radovi .slalom__uputa-tekst--dodir{ display: block; }
}
@media (min-width: 700px) and (max-width: 1023.98px){
  #radovi .slalom__rad{ grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); grid-template-areas: "prikaz prikaz" "opis zn"; column-gap: 40px; }
  #radovi .slalom__prikaz{ grid-area: prikaz; max-width: 720px; }
  #radovi .slalom__opis{ grid-area: opis; }
  #radovi .slalom__znacajke{ grid-area: zn; margin-top: 8px; }
}
@media (max-width: 420px){
  #radovi .slalom__tockice{ display: none; }
  #radovi .slalom__traka{ --sl-traka: 30px; gap: 8px; padding-left: 10px; font-size: 11px; }
  #radovi .slalom__status{ padding: 3px 7px 3px 6px; font-size: 11px; }
  #radovi .slalom__ime{ font-size: 14px; }
  #radovi .slalom__kratko{ font-size: 16px; }
  #radovi .slalom__veze{ gap: 0 22px; }
}

/* ---------- Bez JS-a: radovi jedan ispod drugoga, bez staze ---------- */
html:not(.js) #radovi :is(.slalom__staza, .slalom__ulaz, .slalom__vani, .slalom__cilj-zastava){ display: none; }
html:not(.js) #radovi .slalom__pozornica{ display: block; }
html:not(.js) #radovi .slalom__radovi{ gap: 72px; }
html:not(.js) #radovi .slalom__rad{ position: relative; grid-area: auto; opacity: 1; visibility: visible; pointer-events: auto; }
html:not(.js) #radovi .slalom__znacajke{ transform: none; }
html:not(.js) #radovi .slalom__znacajke::before, html:not(.js) #radovi .slalom__znacajke::after{ display: none; }

/* ---------- Bez gibanja: pauza stranice ili smanjeno gibanje ---------- */
/* pseudo-elementi se ne mogu staviti u :is(), pa idu zasebno */
html.bez-petlji #radovi :is(.slalom, .slalom__ulaz, .slalom__cilj) *, html.bez-petlji #radovi :is(.slalom, .slalom__ulaz, .slalom__cilj) *::before, html.bez-petlji #radovi :is(.slalom, .slalom__ulaz, .slalom__cilj) *::after{ animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce){
  #radovi :is(.slalom, .slalom__ulaz, .slalom__cilj) *, #radovi :is(.slalom, .slalom__ulaz, .slalom__cilj) *::before, #radovi :is(.slalom, .slalom__ulaz, .slalom__cilj) *::after{ animation: none !important; transition: none !important; }
}