/* m07 Tko plaća (team E): Slika 7.1 NPOO contracts 2024 (bars, ch01 Slika 1.4 form), Slika 7.2 funding diagram. Every selector starts with #pogl-08. */

/* ── 7.1 bars ── */
#pogl-08 .np{--lw:300px;--cg:20px;position:relative;display:grid;grid-template-columns:var(--lw) minmax(0,1fr);column-gap:var(--cg);row-gap:12px;align-items:center;padding-top:30px}
#pogl-08 .np-lb{text-align:right;font:400 16px/1.25 var(--sans)}
#pogl-08 .np-lb b{font-weight:500;display:block}
#pogl-08 .np-lb small{display:block;font:400 13px/1.3 var(--sans);color:var(--ink-2);margin-top:2px}
#pogl-08 .np-tr{position:relative;height:36px;background:var(--g6);box-shadow:inset 0 0 0 1px var(--g5)}
#pogl-08 .np-br{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--g2);box-shadow:inset 0 0 0 1px var(--line);transition:width 1.1s cubic-bezier(.2,.7,.2,1)}
#pogl-08 .np-br span{position:absolute;right:9px;top:50%;transform:translateY(-50%);font:600 15px var(--sans);color:var(--white);white-space:nowrap}
#pogl-08 .np-ax{grid-column:2;position:relative;height:18px;font:400 12px var(--sans);color:var(--ink-2)}
#pogl-08 .np-ax i{position:absolute;top:0;font-style:normal;transform:translateX(-50%);white-space:nowrap}
#pogl-08 .np-ax i:first-child{transform:none}
#pogl-08 .np-ax i.end{transform:translateX(-100%)}
#pogl-08 .np-lim{position:absolute;top:0;bottom:22px;left:calc(var(--lw) + var(--cg));right:0;pointer-events:none}
#pogl-08 .np-line{position:absolute;top:0;bottom:0;border-left:1.5px dashed var(--line)}
#pogl-08 .np-line span{position:absolute;top:0;left:6px;font:500 12px var(--sans);white-space:nowrap;background:rgba(246,246,242,.9);padding:0 3px}
#pogl-08 .np-line.hi span{left:auto;right:6px}
#pogl-08 .np-note{display:none;margin-top:12px;font:400 13px/1.45 var(--sans);color:var(--ink)}

/* ── 7.2 funding diagram: five columns left to right, connectors drawn by script.js ── */
#pogl-08 .fd{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1.1fr) minmax(0,.85fr) minmax(0,.95fr);column-gap:clamp(34px,3.6vw,60px);align-items:center;padding:6px 0 70px}
#pogl-08 .fd-col{display:flex;flex-direction:column;gap:26px;min-width:0}
#pogl-08 .fd-n{position:relative;z-index:1;background:var(--white);border:1.2px solid var(--line);padding:12px 14px 14px;opacity:0;transform:translateY(8px);transition:opacity .7s,transform .7s cubic-bezier(.2,.7,.2,1)}
#pogl-08 .fd-n .chip{margin-bottom:9px;max-width:100%;white-space:normal;line-height:1.25}
#pogl-08 .fd-n h5{font:600 20px/1.2 var(--serif);margin-bottom:5px}
#pogl-08 .fd-n p{font:400 15px/1.42 var(--sans)}
#pogl-08 .fd-n ul{list-style:none;font:500 19px/1.4 var(--serif)}
#pogl-08 .fd-n.y{background:var(--yellow)}
#pogl-08 .fd-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:0;pointer-events:none;opacity:0;transition:opacity .9s ease 1.3s}
#pogl-08 .fd-svg .e{fill:none;stroke:var(--ink);stroke-width:1.4}
#pogl-08 .fd-svg .r{fill:none;stroke:var(--g2);stroke-width:1.4;stroke-dasharray:6 4}
#pogl-08 .fd-svg marker path{fill:var(--ink);stroke:none}
#pogl-08 .fd-svg marker.mr path{fill:var(--g2)}
#pogl-08 .fd-ret{position:absolute;left:0;top:0;transform:translateX(-50%);opacity:0;transition:opacity .9s ease 1.5s;white-space:nowrap}
#pogl-08 .fd-ret span{display:inline-block;font:500 13px/1.35 var(--sans);color:var(--ink);background:rgba(246,246,242,.95);padding:2px 6px}
#pogl-08 .vis.in .fd-n{opacity:1;transform:none}
#pogl-08 .vis.in .c2 .fd-n{transition-delay:.25s}
#pogl-08 .vis.in .c3 .fd-n{transition-delay:.5s}
#pogl-08 .vis.in .c4 .fd-n{transition-delay:.75s}
#pogl-08 .vis.in .c5 .fd-n{transition-delay:1s}
#pogl-08 .vis.in .fd-svg,#pogl-08 .vis.in .fd-ret{opacity:1}

@media (max-width:1180px) and (min-width:821px){
  #pogl-08 .np{--lw:220px}
  #pogl-08 .fd-n p{font-size:14px}
  #pogl-08 .fd-n ul{font-size:17px}
}
@media (max-width:820px){
  #pogl-08 .np{grid-template-columns:minmax(0,1fr);row-gap:5px;padding-top:4px}
  #pogl-08 .np-lb{text-align:left;margin-top:9px;font-size:15px}
  #pogl-08 .np-ax{grid-column:1;margin-top:4px}
  #pogl-08 .np-lim{display:none}
  #pogl-08 .np-note{display:block}
  #pogl-08 .np-ax i.end{transform:translateX(-50%)}
  #pogl-08 .np-ax .u{display:none}
  /* the diagram runs top to bottom; the pairs sit side by side; the return line runs up the left edge */
  #pogl-08 .fd{grid-template-columns:minmax(0,1fr);row-gap:34px;padding:0 0 62px 22px}
  #pogl-08 .fd-col{flex-direction:row;gap:12px}
  #pogl-08 .fd-col > .fd-n{flex:1 1 0;min-width:0}
  #pogl-08 .c1 [data-n="mun"]{order:-1}
  #pogl-08 .fd-n{padding:10px 11px 12px}
  #pogl-08 .fd-n p{font-size:14px;line-height:1.38}
  #pogl-08 .fd-n h5{font-size:18px}
  #pogl-08 .fd-n ul{font-size:17px}
  #pogl-08 .fd-ret{white-space:normal;width:84%;text-align:center}
}