/* =========================================================
   FreshAir — flow.css
   1) Usluge: foto-pločice kao tabovi + bela "spec" kartica
   2) Kako radimo: prekidač + bakarna cev sa hladnim tokom
   ========================================================= */

/* =========================================================
   1) USLUGE
   ========================================================= */
.svc{position:relative;--notch-x:0px;--notch-on:0}

.svc-tabs{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;
}

.svc-tab{
  position:relative;isolation:isolate;
  display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;
  aspect-ratio:4/5;margin:0;padding:14px;
  border:0;border-radius:var(--r-m);overflow:hidden;
  background:var(--panel-2);color:#fff;text-align:left;cursor:pointer;
  box-shadow:var(--shadow-1);
  -webkit-tap-highlight-color:transparent;
  transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease;
}
.svc-tab:focus-visible{outline:3px solid var(--navy);outline-offset:5px;border-radius:var(--r-m)}

.svc-tab-img{position:absolute;inset:0;z-index:-2;overflow:hidden;background:var(--panel-2);
  transition:filter .4s ease}
.svc-tab-img picture{display:block;width:100%;height:100%}
.svc-tab-img img{
  width:100%;height:100%;object-fit:cover;transform:scale(1.02);
  transition:transform .9s cubic-bezier(.2,.7,.2,1);
}
.svc-tab::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,18,31,0) 30%,rgba(7,18,31,.85) 100%);
}
/* tanak gornji odsjaj stakla */
.svc-tab-img::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(160deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 38%);
  mix-blend-mode:soft-light;
}

/* LED tačka (gore levo) */
.svc-tab::before{
  content:"";position:absolute;top:14px;left:14px;width:8px;height:8px;border-radius:50%;
  background:rgba(255,255,255,.34);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);
  transition:background .3s ease,box-shadow .3s ease;
}

.svc-tab-tag{
  display:block;font:600 10px/1.35 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ice);margin-bottom:5px;
}
.svc-tab-name{display:block;font:700 clamp(15px,3.9vw,19px)/1.2 var(--f-text);letter-spacing:-.01em;text-wrap:balance}
.svc-tab-time{
  position:absolute;top:10px;right:10px;
  padding:5px 9px;border-radius:999px;
  font:600 11px/1 var(--f-mono);letter-spacing:.02em;color:#fff;white-space:nowrap;
  background:rgba(255,255,255,.2);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.24);
}

/* neizabrana */
.svc-tab[aria-selected="false"] .svc-tab-img{filter:saturate(.8) brightness(.9)}

/* izabrana — pun kolor, cijan prsten + sjaj, LED upaljen */
.svc-tab[aria-selected="true"]{
  box-shadow:0 0 0 3px var(--cyan),0 0 0 7px rgba(34,184,240,.16),0 18px 40px -12px rgba(34,184,240,.65);
}
.svc-tab[aria-selected="true"] .svc-tab-img img{transform:scale(1.06)}
.svc-tab[aria-selected="true"]::before{
  background:var(--lcd-on);
  box-shadow:0 0 0 2px rgba(127,230,255,.28),0 0 8px 2px var(--lcd-on),0 0 20px 3px rgba(34,184,240,.85);
  animation:svcLed .7s ease-out 1;
}
@keyframes svcLed{0%{box-shadow:0 0 0 0 rgba(127,230,255,.9),0 0 0 0 var(--lcd-on)}60%{box-shadow:0 0 0 8px rgba(127,230,255,0),0 0 14px 5px var(--lcd-on)}}

@media (hover:hover){
  .svc-tab:hover{transform:translateY(-3px)}
  .svc-tab:hover .svc-tab-img img{transform:scale(1.05)}
  .svc-tab[aria-selected="true"]:hover .svc-tab-img img{transform:scale(1.08)}
}
.svc-tab:active{transform:translateY(0) scale(.985)}

/* ---------- panel: bela spec kartica ---------- */
.svc-panels{position:relative;margin-top:18px}

/* zarez na gornjoj ivici — pokazuje na izabranu pločicu (tabs.js postavlja --notch-x / --notch-on) */
.svc-panels::before{
  content:"";position:absolute;z-index:2;top:-7px;left:0;width:14px;height:14px;
  border-radius:3px 0 0 0;background:#fff;
  box-shadow:-1px -1px 0 var(--line);
  transform:translateX(calc(var(--notch-x,0px) - 7px)) rotate(45deg);
  opacity:var(--notch-on,0);pointer-events:none;
}
.svc.is-ready .svc-panels::before{
  transition:transform .55s cubic-bezier(.3,1.15,.4,1),opacity .25s ease;
}

.svc-panel{
  position:relative;
  display:grid;gap:26px;
  padding:clamp(22px,4vw,40px);
  background:#fff;border-radius:var(--r-l);
  box-shadow:var(--shadow-2),0 0 0 1px var(--line);
}
.svc-panel[hidden]{display:none}

.svc-main h3{margin-bottom:10px}
.svc-main p{color:var(--ink-2);margin-bottom:18px}
.svc-main .ticks{margin-bottom:0}
.svc-side{display:grid;gap:16px;align-content:start}
.svc-side .link-arrow{justify-self:start}

/* tablet: 4 pločice u redu (2 kolone bi bile ogromne), pa se zarez uvek poklapa sa pločicom */
@media (min-width:760px){
  .svc-tabs{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
  .svc-tab-name{font-size:17px}
}
@media (min-width:900px){
  .svc-tabs{gap:14px}
  .svc-tab{aspect-ratio:3/4;padding:18px}
  .svc-tab-name{font-size:19px}
  .svc-tab::before{top:18px;left:18px}
  .svc-tab-time{top:14px;right:14px}
  .svc-panel{grid-template-columns:1.45fr .9fr;gap:48px}
  .svc-side{position:relative}
  .svc-side::before{
    content:"";position:absolute;top:2px;bottom:2px;left:-24px;width:1px;background:var(--line);
  }
}

/* ulazak sadržaja izabranog panela (kartica miruje, zarez klizi, sadržaj izranja) */
.svc-panel.is-entering .svc-main > *,
.svc-panel.is-entering .svc-side > *{
  animation:svcRise .55s cubic-bezier(.2,.7,.2,1) both;
}
.svc-panel.is-entering .svc-main > :nth-child(2){animation-delay:.05s}
.svc-panel.is-entering .svc-main > :nth-child(3){animation-delay:.1s}
.svc-panel.is-entering .svc-side > :nth-child(1){animation-delay:.08s}
.svc-panel.is-entering .svc-side > :nth-child(2){animation-delay:.14s}
.svc-panel.is-entering .svc-side > :nth-child(3){animation-delay:.2s}
@keyframes svcRise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}


/* =========================================================
   2) KAKO RADIMO
   ========================================================= */
.proc{--pipe-x:24px;--body-pl:56px}

/* ---------- prekidač poslova (segmentirana kontrola) ---------- */
.proc-switch{
  position:relative;isolation:isolate;
  display:flex;width:100%;max-width:440px;gap:0;padding:5px;
  border-radius:999px;
  background:var(--plastic);
  box-shadow:inset 0 1px 0 #fff,0 0 0 1px var(--line),var(--shadow-1);
}
.proc-tab{
  position:relative;flex:1 1 0;min-width:0;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;margin:0;padding:0 14px;
  border:0;border-radius:999px;background:transparent;
  font:600 16px/1 var(--f-text);letter-spacing:-.005em;color:var(--ink-2);white-space:nowrap;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:color .3s ease;
}
.proc-tab:hover{color:var(--blue-deep)}
.proc-tab small{
  font:600 11px/1 var(--f-mono);letter-spacing:.04em;
  padding:5px 8px;border-radius:999px;
  background:rgba(10,26,47,.07);color:var(--muted);
  transition:background .3s ease,color .3s ease;
}
.proc-tab[aria-selected="true"],
.proc-tab[aria-selected="true"]:hover{
  color:#fff;
  background:linear-gradient(180deg,#3486EE 0%,var(--blue-deep) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.38),inset 0 -2px 0 rgba(0,0,0,.14),0 10px 22px -12px rgba(21,96,201,.75);
}
.proc-tab[aria-selected="true"] small{background:rgba(255,255,255,.2);color:#fff}

/* klizeći plavi "palac" (process.js postavlja --thumb-x / --thumb-w) */
.proc-switch.has-thumb .proc-tab[aria-selected="true"]{background:none;box-shadow:none}
.proc-switch::before{
  content:"";position:absolute;z-index:-1;top:5px;bottom:5px;left:0;
  width:var(--thumb-w,0);
  transform:translateX(var(--thumb-x,0));
  border-radius:999px;
  background:linear-gradient(180deg,#3486EE 0%,var(--blue-deep) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.38),inset 0 -2px 0 rgba(0,0,0,.14),0 10px 22px -12px rgba(21,96,201,.75);
  opacity:0;
}
.proc-switch.has-thumb::before{opacity:1}
.proc-switch.is-ready::before{
  transition:transform .45s cubic-bezier(.3,1.15,.4,1),width .45s cubic-bezier(.3,1.15,.4,1);
}

/* ---------- telo: cev + koraci ---------- */
.proc-body{position:relative;isolation:isolate;margin-top:34px;padding-left:var(--body-pl);--fill:0}
/* hladan sjaj ISPOD cevi — preliva se preko ivica, a bakar ostaje bakar */
.proc-body::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  left:calc(var(--pipe-x) - 3px);width:6px;top:15px;
  height:calc((100% - 30px) * var(--fill,0));
  border-radius:3px;
  background:rgba(34,184,240,.6);
  box-shadow:0 0 12px 5px rgba(34,184,240,.42),0 0 30px 9px rgba(34,184,240,.18);
  opacity:min(1,calc(var(--fill,0) * 60));
}
.proc-track{list-style:none;margin:0;padding:0}
.proc-track[hidden]{display:none}

/* ---------- BAKARNA CEV ---------- */
.pipe{
  position:absolute;left:calc(var(--pipe-x) - 8px);top:8px;bottom:8px;width:16px;
  border-radius:999px;pointer-events:none;
  background:linear-gradient(90deg,var(--copper-dark) 0%,var(--copper-hi) 32%,var(--copper) 55%,var(--copper-dark) 100%);
  box-shadow:
    0 0 0 1px rgba(92,40,14,.38),
    inset 0 0 0 1px rgba(255,214,184,.16),
    3px 5px 9px -3px rgba(42,18,6,.4),
    -1px 0 0 rgba(255,255,255,.35);
}
/* unutrašnji kanal (utisnut žleb) */
.pipe::before{
  content:"";position:absolute;left:5px;width:6px;top:7px;bottom:7px;border-radius:3px;
  background:linear-gradient(90deg,#1a0d06 0%,#33190b 48%,#150a04 100%);
  box-shadow:inset 1px 1px 2px rgba(0,0,0,.75),0 1px 0 rgba(255,224,200,.6),0 -1px 0 rgba(70,28,8,.55);
}
/* sjajna crta po dužini cevi */
.pipe::after{
  content:"";position:absolute;left:2px;width:2px;top:9px;bottom:9px;border-radius:2px;
  background:linear-gradient(180deg,rgba(255,244,232,0) 0%,rgba(255,244,232,.72) 8%,rgba(255,244,232,.34) 50%,rgba(255,244,232,.6) 92%,rgba(255,244,232,0) 100%);
  opacity:.9;
}

/* hladan tok */
.pipe-flow{
  position:absolute;z-index:1;left:5px;top:7px;width:6px;
  height:calc((100% - 14px) * var(--fill,0));
  border-radius:3px;
  background:
    linear-gradient(90deg,rgba(2,50,86,.5) 0%,rgba(255,255,255,0) 34%,rgba(255,255,255,.5) 52%,rgba(2,50,86,.38) 100%),
    linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.85) 50%,rgba(255,255,255,0) 100%) 0 0/100% 34px repeat-y,
    linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(191,241,255,.75) 50%,rgba(255,255,255,0) 100%) 0 0/100% 57px repeat-y,
    linear-gradient(180deg,#0E8FC2 0%,var(--cyan) 55%,var(--lcd-on) 100%);
  box-shadow:0 0 3px rgba(34,184,240,.75);
}
/* svetla glava toka na prednjoj ivici */
.pipe-flow::after{
  content:"";position:absolute;left:50%;bottom:-6px;width:18px;height:18px;margin-left:-9px;
  background:radial-gradient(circle,#fff 0 14%,rgba(191,241,255,.95) 26%,rgba(34,184,240,.45) 52%,rgba(34,184,240,0) 72%);
  opacity:0;transition:opacity .3s ease;
}
.pipe.is-flowing .pipe-flow::after{opacity:1}

@media (prefers-reduced-motion:no-preference){
  .pipe-flow{animation:pipeFlow 1.5s linear infinite}
}
@keyframes pipeFlow{
  from{background-position:0 0,0 0,0 0,0 0}
  to{background-position:0 0,0 34px,0 57px,0 0}
}

/* zalemljena muf-spojnica (JS ih postavlja između čvorova) */
.pipe-part{position:absolute;z-index:2;display:block}
.pipe-joint{
  left:-3px;width:22px;height:14px;margin-top:-7px;border-radius:4px;
  background:
    linear-gradient(180deg,rgba(40,15,5,.5) 0,rgba(40,15,5,0) 3px,rgba(40,15,5,0) calc(100% - 3px),rgba(40,15,5,.5) 100%),
    linear-gradient(90deg,#6a3014 0%,#efb48c 26%,#d38b5a 50%,#8f4a24 82%,#5d2a12 100%);
  box-shadow:0 0 0 1px rgba(70,28,8,.55),inset 0 1px 0 rgba(255,238,224,.7),0 4px 7px -2px rgba(40,16,4,.45);
  transition:box-shadow .5s ease;
}
.pipe-joint::before,
.pipe-joint::after{
  content:"";position:absolute;top:2px;bottom:2px;width:1.5px;border-radius:1px;
  background:rgba(60,24,8,.45);box-shadow:1px 0 0 rgba(255,225,200,.45);
}
.pipe-joint::before{left:4px}
.pipe-joint::after{right:5px}
.pipe-joint.is-cold{
  box-shadow:0 0 0 1px rgba(70,28,8,.55),inset 0 1px 0 rgba(255,238,224,.7),0 4px 7px -2px rgba(40,16,4,.45),0 0 10px 1px rgba(34,184,240,.45);
}

/* plastična obujmica sa dva šrafa */
.pipe-clamp{
  left:-7px;width:30px;height:10px;margin-top:-5px;border-radius:5px;
  background:
    radial-gradient(circle at 5px 50%,#6d7b8b 0 1.7px,rgba(255,255,255,.8) 2px,transparent 2.6px),
    radial-gradient(circle at calc(100% - 5px) 50%,#6d7b8b 0 1.7px,rgba(255,255,255,.8) 2px,transparent 2.6px),
    linear-gradient(180deg,#FFFFFF 0%,#E3E9EE 100%);
  box-shadow:0 0 0 1px rgba(10,26,47,.2),inset 0 1px 0 #fff,0 4px 7px -2px rgba(10,26,47,.4);
}

/* kraj cevi — izlaz hladnog vazduha */
.pipe-end{
  position:absolute;z-index:2;left:-3px;bottom:-5px;width:22px;height:22px;border-radius:50%;
  background:
    repeating-conic-gradient(rgba(60,24,8,.24) 0 7.5deg,rgba(0,0,0,0) 7.5deg 15deg),
    conic-gradient(from 35deg,#f3bd9a,var(--copper) 18%,var(--copper-dark) 36%,#d9946a 52%,#f3bd9a 64%,var(--copper) 80%,var(--copper-dark) 92%,#f3bd9a);
  box-shadow:0 0 0 1px rgba(70,30,10,.55),inset 0 1px 1px rgba(255,235,220,.7),inset 0 -2px 3px rgba(60,24,8,.45),0 4px 8px -2px rgba(40,16,4,.45);
}
.pipe-end::before{
  content:"";position:absolute;inset:6px;border-radius:50%;
  background:radial-gradient(circle at 50% 35%,#27323f,#0a1119 80%);
  box-shadow:inset 0 1px 3px #000,0 1px 0 rgba(255,230,210,.5);
  transition:background .5s ease,box-shadow .5s ease;
}
.pipe-end.is-full::before{
  background:radial-gradient(circle at 40% 35%,#fff 0 12%,var(--lcd-on) 40%,var(--cyan) 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.4),0 0 10px 2px rgba(127,230,255,.9),0 0 22px 4px rgba(34,184,240,.55);
}

/* ---------- čvor (navrtka na cevi) ---------- */
.proc-node{
  position:absolute;z-index:3;top:0;
  left:calc(var(--pipe-x) - var(--body-pl) - 12px);
  width:24px;height:24px;border-radius:50%;
  background:
    repeating-conic-gradient(rgba(60,24,8,.24) 0 7.5deg,rgba(0,0,0,0) 7.5deg 15deg),
    conic-gradient(from 35deg,#f3bd9a,var(--copper) 18%,var(--copper-dark) 36%,#d9946a 52%,#f3bd9a 64%,var(--copper) 80%,var(--copper-dark) 92%,#f3bd9a);
  box-shadow:0 0 0 1px rgba(70,30,10,.55),inset 0 1px 1px rgba(255,235,220,.7),inset 0 -2px 3px rgba(60,24,8,.45),0 5px 9px -2px rgba(40,16,4,.45);
}
.proc-node::before{
  content:"";position:absolute;inset:6px;border-radius:50%;
  background:radial-gradient(circle at 50% 35%,#27323f,#0a1119 80%);
  box-shadow:inset 0 1px 3px #000,0 1px 0 rgba(255,230,210,.5);
  transition:background .45s ease,box-shadow .45s ease;
}
.proc-node::after{
  content:"";position:absolute;inset:-1px;border-radius:50%;
  border:2px solid var(--cyan);opacity:0;pointer-events:none;
}
.proc-node.is-reached::before{
  background:radial-gradient(circle at 40% 35%,#fff 0 12%,var(--lcd-on) 40%,var(--cyan) 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.4),0 0 10px 2px rgba(127,230,255,.9),0 0 22px 4px rgba(34,184,240,.55);
}
.proc-node.is-reached::after{animation:nodePing .95s ease-out 1}
@keyframes nodePing{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(2.5)}}

/* ---------- koraci ---------- */
.proc-step{position:relative;padding-bottom:clamp(30px,5vw,52px)}
.proc-no{
  display:block;margin-bottom:4px;
  font:600 12px/24px var(--f-mono);letter-spacing:.16em;color:var(--blue);
  transition:color .4s ease;
}
.proc-text h3{margin-bottom:8px}
.proc-text p{color:var(--ink-2);max-width:52ch;margin:0}

.proc-img{
  position:relative;margin:14px 0 0;max-width:440px;
  border-radius:var(--r-m);overflow:hidden;
  box-shadow:var(--shadow-2);background:#DCE5EE;
  aspect-ratio:4/3;cursor:zoom-in;
}
.proc-img picture{display:block;width:100%;height:100%}
.proc-img img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .8s cubic-bezier(.2,.7,.2,1);
}
/* znak da se slika uvećava (lightbox) */
.proc-img::after{
  content:"";position:absolute;right:10px;bottom:10px;width:34px;height:34px;border-radius:50%;pointer-events:none;
  background:rgba(7,18,31,.42) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='5.5'/%3E%3Cpath d='M15 15l5 5M10.5 8v5M8 10.5h5'/%3E%3C/g%3E%3C/svg%3E") center/18px no-repeat;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);
}
@media (hover:hover){ .proc-img:hover img{transform:scale(1.05)} }

/* pre nego što tok stigne, broj koraka je prigušen */
.proc-body.is-live .proc-step:not(.is-reached) .proc-no{color:var(--muted-2)}

/* promena posla: koraci izranjaju jedan za drugim */
.proc-track.is-entering .proc-step{
  animation:procIn .65s cubic-bezier(.2,.7,.2,1) both;
  animation-delay:calc(var(--i,0) * 95ms);
}
@keyframes procIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

@media (min-width:900px){
  .proc{--pipe-x:38px;--body-pl:84px}
  .proc-switch{max-width:400px}
  .proc-step{display:grid;grid-template-columns:minmax(0,540px) 320px;column-gap:64px;justify-content:start;align-items:start}
  .proc-img{margin-top:0;max-width:none;aspect-ratio:4/3}
}

/* ---------- smanjeno kretanje: završna stanja, bez petlji ---------- */
@media (prefers-reduced-motion:reduce){
  .pipe-flow{animation:none!important}
  .pipe-flow::after{transition:none!important}
  .proc-node.is-reached::after{animation:none!important}
  .proc-track.is-entering .proc-step,
  .svc-panel.is-entering .svc-main > *,
  .svc-panel.is-entering .svc-side > *{animation:none!important}
  .svc-tab[aria-selected="true"]::before{animation:none!important}
  .svc-tab,.svc-tab-img img,.svc-panels::before,.proc-switch::before{transition:none!important}
}