/* Rešenje — HeltIT:GO. Bespoke page styles (opts this "-go"-slugged page out
   of the shared resenje-go.css/.js family tier — see docs/theme-architecture.md
   "The -GO family"). */

/* ==========================================================================
   "Izazovi u upravljanju zdravstvenom ustanovom" — same row layout as
   Datacenter's "Infrastruktura kao celina" section
   (resenje-datacenter.css .datacenter-infrastructure-item*), ported here
   under hig- prefixes since it's a bespoke section, not a shared block: one
   full-width row per item (copy left, square image right), separated by
   hairline dividers — no card border, no background tint.
   ========================================================================== */
.hig-challenges-items{border-top:1px solid var(--line)}
.hig-challenge-item{
  display:grid;grid-template-columns:minmax(0,62ch) 210px;justify-content:center;align-items:center;
  gap:clamp(var(--space-5),4vw,var(--space-7));padding:var(--space-6) 0;
}
.hig-challenge-item + .hig-challenge-item{border-top:1px solid var(--line)}
.hig-challenge-image{
  grid-column:2;grid-row:1;width:100%;max-width:210px;height:auto;aspect-ratio:1;object-fit:contain;
  justify-self:end;
}
.hig-challenge-copy{grid-column:1;grid-row:1;max-width:62ch}
.hig-challenge-copy h3{color:var(--text)}
.hig-challenge-copy p{margin-top:var(--space-3);color:var(--text-secondary);font-size:var(--fs-body-lg);line-height:var(--lh-body)}

@media (max-width:820px){
  .hig-challenge-item{grid-template-columns:1fr;gap:var(--space-4);padding:var(--space-6) 0}
  .hig-challenge-image{grid-column:1;grid-row:1;width:150px;justify-self:center}
  .hig-challenge-copy{grid-column:1;grid-row:2}
}

/* ==========================================================================
   "Šta HeltIT:GO donosi zdravstvenoj ustanovi" — a value signal: the product
   hub distributes one connected data signal into five institutional outcomes.
   The diagram and editorial rows are index-linked in resenje-heltit-go.js.
   Default state stays fully visible; JS only arms the authored entrance when
   IntersectionObserver and motion preferences allow it.
   ========================================================================== */
.hig-values{overflow:hidden;background:var(--soft)}
/* This section owns a more meaningful hub-to-outcomes entrance; opt it out of
   main.js's generic whole-section fade so the two motions do not stack. */
.hig-values.reveal{opacity:1;transform:none;transition:none;will-change:auto}
.hig-values .solution-intro{max-width:780px}
.hig-values-stage{
  --hig-values-ease:cubic-bezier(.16,1,.3,1);
  display:grid;grid-template-columns:minmax(300px,380px) minmax(0,650px);align-items:center;justify-content:center;
  gap:clamp(var(--space-7),5vw,var(--space-10));max-width:1100px;margin-inline:auto;
}

.hig-values-map{
  position:relative;width:100%;aspect-ratio:1;isolation:isolate;justify-self:center;
}
.hig-values-map::before,
.hig-values-map::after{
  content:"";position:absolute;z-index:-1;border:1px solid var(--line);border-radius:50%;pointer-events:none;
}
.hig-values-map::before{inset:7%}
.hig-values-map::after{inset:25%;border-style:dashed;opacity:.8}
.hig-values-routes{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hig-values-route{
  fill:none;stroke:#d9dbe2;stroke-width:2;stroke-linecap:round;vector-effect:non-scaling-stroke;
  stroke-dasharray:1;stroke-dashoffset:0;
  transition:stroke .18s ease,stroke-dashoffset .7s var(--hig-values-ease);
  transition-delay:0s,calc(80ms + (var(--i,0) * 65ms));
}
.hig-values-route:nth-child(1){--i:0}
.hig-values-route:nth-child(2){--i:1}
.hig-values-route:nth-child(3){--i:2}
.hig-values-route:nth-child(4){--i:3}
.hig-values-route:nth-child(5){--i:4}

.hig-values-hub{
  position:absolute;left:50%;top:50%;z-index:2;display:flex;align-items:center;justify-content:center;
  width:min(46%,190px);min-height:104px;padding:var(--space-5);border-radius:var(--radius-md);
  background:var(--white);box-shadow:var(--shadow);
  transform:translate(-50%,-50%);transform-origin:center;
  transition:opacity .5s var(--hig-values-ease),transform .5s var(--hig-values-ease);
}
.hig-values-hub img{width:100%;height:auto}

.hig-values-node{
  position:absolute;z-index:3;display:grid;place-items:center;width:46px;height:46px;
  border:1px solid var(--line);border-radius:50%;background:var(--white);
  transform:translate(-50%,-50%);transform-origin:center;
  transition:opacity .4s var(--hig-values-ease),transform .4s var(--hig-values-ease),border-color .18s ease,background-color .18s ease;
  transition-delay:calc(260ms + (var(--i,0) * 55ms)),calc(260ms + (var(--i,0) * 55ms)),0s,0s;
}
.hig-values-node-mark{
  width:16px;height:16px;background:var(--brand-dots);color:var(--blue);--dot-muted:#c9ccd5;
  transition:color .18s ease,transform .18s ease;
}
.hig-values-node-1{left:50%;top:12.4%}
.hig-values-node-2{left:86.2%;top:30%}
.hig-values-node-3{left:83.3%;top:77.6%}
.hig-values-node-4{left:16.7%;top:77.6%}
.hig-values-node-5{left:13.8%;top:30%}

.hig-values-items{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.hig-value-item{
  display:grid;grid-template-columns:minmax(190px,.75fr) minmax(0,1.25fr);align-items:center;
  gap:var(--space-6);padding:var(--space-5) 0;
  transition:opacity .5s var(--hig-values-ease),transform .5s var(--hig-values-ease);
  transition-delay:calc(110ms + (var(--i,0) * 60ms));
}
.hig-value-item + .hig-value-item{border-top:1px solid var(--line)}
.hig-value-title{display:grid;grid-template-columns:16px minmax(0,1fr);align-items:start;gap:var(--space-3)}
.hig-value-mark{
  width:16px;height:16px;margin-top:.22em;background:var(--brand-dots);color:var(--blue);--dot-muted:#c9ccd5;
  transition:color .18s ease,transform .18s ease;
}
.hig-value-item h3{color:var(--text);transition:color .18s ease,transform .18s ease}
.hig-value-item p{color:var(--text-secondary);font-size:var(--fs-body-lg);line-height:var(--lh-body)}

.hig-values-route.is-active{stroke:var(--red)}
.hig-values-node.is-active{border-color:rgba(var(--red-rgb),.32);background:#fff}
.hig-values-node.is-active .hig-values-node-mark{color:var(--red);transform:scale(1.12)}
.hig-value-item.is-active .hig-value-mark{color:var(--red);transform:scale(1.12)}
.hig-value-item.is-active h3{color:var(--red);transform:translateX(3px)}

/* The content is visible without JS. Only an armed stage gets an entrance
   state, so a script failure never leaves outcomes hidden. */
.hig-values-stage.is-values-animatable .hig-values-route{stroke-dashoffset:1}
.hig-values-stage.is-values-animatable .hig-values-hub{opacity:0;transform:translate(-50%,-50%) scale(.94)}
.hig-values-stage.is-values-animatable .hig-values-node{opacity:0;transform:translate(-50%,-50%) scale(.9)}
.hig-values-stage.is-values-animatable .hig-value-item{opacity:0;transform:translateY(14px)}
.hig-values-stage.is-values-animatable.is-values-visible .hig-values-route{stroke-dashoffset:0}
.hig-values-stage.is-values-animatable.is-values-visible .hig-values-hub{opacity:1;transform:translate(-50%,-50%) scale(1)}
.hig-values-stage.is-values-animatable.is-values-visible .hig-values-node{opacity:1;transform:translate(-50%,-50%) scale(1)}
.hig-values-stage.is-values-animatable.is-values-visible .hig-value-item{opacity:1;transform:none}

@media (hover:hover) and (pointer:fine){
  .hig-value-item{cursor:default}
}

@media (max-width:880px){
  .hig-values-stage{grid-template-columns:1fr;gap:var(--space-8)}
  .hig-values-map{width:min(100%,380px);margin-inline:auto}
  .hig-values-items{width:min(100%,720px);margin-inline:auto}
}

@media (max-width:560px){
  .hig-values-stage{gap:var(--space-7)}
  .hig-values-map{width:min(100%,310px)}
  .hig-values-hub{width:47%;min-height:78px;padding:var(--space-4)}
  .hig-values-node{width:38px;height:38px}
  .hig-value-item{grid-template-columns:1fr;gap:var(--space-2);padding:var(--space-5) 0}
  .hig-value-item p{padding-left:28px;font-size:var(--fs-body)}
}

@media (prefers-reduced-motion:reduce){
  .hig-values-stage.is-values-animatable .hig-values-route{stroke-dashoffset:0;transition:none}
  .hig-values-stage.is-values-animatable .hig-values-hub,
  .hig-values-stage.is-values-animatable .hig-values-node,
  .hig-values-stage.is-values-animatable .hig-value-item{opacity:1;transform:none;transition:none}
  .hig-values-stage.is-values-animatable .hig-values-hub{transform:translate(-50%,-50%)}
  .hig-values-stage.is-values-animatable .hig-values-node{transform:translate(-50%,-50%)}
  .hig-value-item.is-active h3{transform:none}
}

/* ==========================================================================
   "Kako HeltIT:GO funkcioniše" — bespoke interactive workflow, no shared-block
   precedent elsewhere on the site, built from pieces the site already uses
   elsewhere rather than a one-off look:
   - the step visual is a per-step illustration slot, same placeholder
     convention as .hig-challenge-icon above (empty until an image is set on
     the data item, shown as a soft dot-mark square in the meantime);
   - the term row is a literal browser-tab strip: each term is a raised
     shape with the same concave "cupped" corners Chrome's tabs use to meet
     the bar behind them, drawn with the standard radial-gradient corner
     trick (no image/SVG). The active tab is full white and bridges directly
     into the white card content below it — no seam — while inactive tabs
     sit flush on the grey strip behind, exactly like an unfocused browser
     tab. Card treatment (border+radius-xl, white) matches .hig-challenge-item
     above so the component still reads as this page's own family.
   Interaction wired in assets/js/pages/resenje-heltit-go.js (keyboard
   arrow-key tab navigation + panel swap); markup renders the first term
   active/visible by default so the section is complete without JS.
   ========================================================================== */
.hig-how-steps{
  display:flex;flex-direction:column;
  max-width:820px;margin:var(--space-8) auto 0;
}
.hig-how-step + .hig-how-step{margin-top:var(--space-7);padding-top:var(--space-7);border-top:1px solid var(--line)}

.hig-how-step-head{display:flex;align-items:center;gap:var(--space-5)}
.hig-how-step-visual{
  flex:none;display:flex;align-items:center;justify-content:center;
  width:140px;height:96px;border-radius:var(--radius-md);overflow:hidden;
  background:var(--white);
}
.hig-how-step-visual img{max-width:100%;max-height:100%;display:block;object-fit:contain}
.hig-how-step-visual:empty{display:grid;place-items:center}
.hig-how-step-visual:empty::after{
  content:"";width:22px;height:22px;background:var(--brand-dots);color:var(--muted);opacity:.5;
}
.hig-how-step-heading h3{color:var(--text)}
.hig-how-step-heading p{margin-top:var(--space-3);max-width:64ch;color:var(--text-secondary)}

.hig-how-card{
  --hig-tab-radius:10px;
  margin-top:var(--space-6);border:1px solid var(--line);border-radius:var(--radius-xl);
  background:var(--white);overflow:hidden;
}
.hig-how-terms{
  display:flex;flex-wrap:nowrap;overflow-x:auto;align-items:flex-end;gap:2px;
  padding:10px var(--hig-tab-radius) 0;background:var(--soft-2);
}
.hig-how-term{
  position:relative;appearance:none;cursor:pointer;font:inherit;
  font-size:var(--fs-control);font-weight:780;line-height:var(--lh-title);letter-spacing:var(--tracking-title);
  padding:var(--space-4) var(--space-5);border:0;
  border-radius:var(--hig-tab-radius) var(--hig-tab-radius) 0 0;
  background:transparent;color:var(--muted);
  transition:background-color .2s ease,color .2s ease;
}
.hig-how-term:hover:not(.active){color:var(--text-secondary)}
.hig-how-term:focus-visible{outline:3px solid rgba(var(--page-accent-rgb),.24);outline-offset:-3px}
.hig-how-term.active{background:var(--white);color:var(--page-accent)}
/* The concave "cup" where a Chrome tab meets the strip behind it: a small
   quarter-circle of the tab's own white bleeds into the grey corner beside
   it, everywhere else in that corner box stays grey (the strip's own
   background showing through). Purely a radial-gradient trick — no assets. */
.hig-how-term.active::before,
.hig-how-term.active::after{
  content:"";position:absolute;bottom:0;width:var(--hig-tab-radius);height:var(--hig-tab-radius);
}
.hig-how-term.active::before{
  left:calc(var(--hig-tab-radius) * -1);
  background:radial-gradient(circle at 100% 100%, var(--white) 0 var(--hig-tab-radius), transparent calc(var(--hig-tab-radius) + .5px) 100%);
}
.hig-how-term.active::after{
  right:calc(var(--hig-tab-radius) * -1);
  background:radial-gradient(circle at 0 100%, var(--white) 0 var(--hig-tab-radius), transparent calc(var(--hig-tab-radius) + .5px) 100%);
}

.hig-how-panels{background:var(--white)}
.hig-how-panel{padding:var(--space-6) var(--space-7)}
.hig-how-panel h4{color:var(--page-accent)}
.hig-how-panel p{margin-top:var(--space-3);max-width:60ch;color:var(--text-secondary)}

@keyframes hig-how-panel-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.hig-how-panel.active{animation:hig-how-panel-in .35s cubic-bezier(.16,1,.3,1) both}
@media (prefers-reduced-motion:reduce){
  .hig-how-panel.active{animation:none}
}

@media (max-width:560px){
  .hig-how-step + .hig-how-step{margin-top:var(--space-5);padding-top:var(--space-5)}
  .hig-how-step-head{flex-direction:column;align-items:flex-start;gap:var(--space-4)}
  .hig-how-step-visual{width:100%;height:auto;aspect-ratio:140/96}
  /* Below this width the browser-tab illusion (single row, corner cups
     bridging into the card) no longer fits four labels — switch to plain
     wrapped chips instead of letting a single row break awkwardly. */
  .hig-how-terms{flex-wrap:wrap;overflow-x:visible;gap:var(--space-2)}
  .hig-how-term{padding:var(--space-3) var(--space-4);font-size:13px;border-radius:var(--hig-tab-radius)}
  .hig-how-term.active::before,
  .hig-how-term.active::after{display:none}
  .hig-how-panel{padding:var(--space-5)}
}