/* m08 Presedan: Čakovec (team E) · Slika 8.1 the chain side by side (rows reveal on scroll, a small growing plan per row), Slika 8.3 timeline. Slika 8.2 is in split.css. Every selector starts with #pogl-08. */

/* ── 8.1 the chain ── */
#pogl-08 .c8-head,#pogl-08 .c8-r{display:grid;grid-template-columns:minmax(140px,190px) minmax(0,.8fr) minmax(0,1.75fr);column-gap:0}
#pogl-08 .c8-head{align-items:end;padding-bottom:12px}
#pogl-08 .c8-head .k{font:600 11.5px var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
#pogl-08 .c8-head .ca,#pogl-08 .c8-head .cb{padding:0 18px}
#pogl-08 .c8-head .chip{font-size:13px;padding:8px 12px}
#pogl-08 .c8-head small{display:block;margin-top:7px;font:400 13.5px var(--sans);color:var(--ink-2)}
/* core reveals a .vis at 25 % visible; on phone this figure is taller than four screens and would never reveal.
   The figure itself stays visible; its rows (.rv) reveal one by one. */
#pogl-08 #v-chain-08{opacity:1;transform:none}
#pogl-08 .c8{list-style:none}
#pogl-08 .c8-r{border-top:1.2px solid var(--line);opacity:0;transform:translateY(14px);transition:opacity .8s,transform .8s cubic-bezier(.2,.7,.2,1)}
#pogl-08 .c8-r.in{opacity:1;transform:none}
#pogl-08 .c8-r.last{border-bottom:1.2px solid var(--line)}
#pogl-08 .c8-r .k{padding:14px 18px 14px 0;font:600 11.5px/1.4 var(--sans);letter-spacing:.06em;text-transform:uppercase}
#pogl-08 .c8-r .k .n{display:block;font:700 26px/1 var(--serif);letter-spacing:0;color:var(--ink-3);margin-bottom:6px}
#pogl-08 .c8-r .ca,#pogl-08 .c8-r .cb{padding:13px 18px 14px;background:rgba(246,246,242,.92);font:400 16px/1.45 var(--sans);min-width:0}
#pogl-08 .c8-r .cb{border-left:1px solid var(--g5);box-shadow:inset 3px 0 0 var(--yellow);display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,360px);gap:18px;align-items:start}
#pogl-08 .c8-r sup{font-size:.7em;margin-left:1px}
#pogl-08 .mini{min-width:0}
#pogl-08 .mini .plan{background:var(--white);box-shadow:0 0 0 1px var(--g5)}
/* road names collide with the scale bar at this size (plan.js lays them out for wide plans): hidden in the small plans only */
#pogl-08 .mini .pl-fx{display:none}
#pogl-08 .mini small{display:block;margin-top:5px;font:400 12.5px/1.35 var(--sans);color:var(--ink-2)}
#pogl-08 .c8-fn{margin-top:14px;font:400 13.5px/1.55 var(--sans);color:var(--ink);max-width:62em;background:rgba(246,246,242,.92);padding:10px 12px}
#pogl-08 .c8-fn sup{font-size:.8em;margin-right:3px}

/* ── 8.3 timeline (desktop: SVG drawn by script.js; phone: the list) ── */
#pogl-08 .t8-svg{display:block;width:100%;height:240px;overflow:visible}
#pogl-08 .t8-svg text{font-family:var(--sans);font-size:13.5px;fill:var(--ink)}
#pogl-08 .t8-svg text.lane{font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
#pogl-08 .t8-svg text.d{font-weight:600}
#pogl-08 .t8-svg text.yr{font-size:12px;fill:var(--ink-2)}
#pogl-08 .t8-svg text.inb{fill:var(--white);font-weight:500}
#pogl-08 .t8-svg .ax{stroke:var(--line);stroke-width:1.2}
#pogl-08 .t8-svg .tk{stroke:var(--line);stroke-width:1}
#pogl-08 .t8-svg .gl{stroke:var(--g5);stroke-width:1;stroke-dasharray:3 3}
#pogl-08 .t8-svg .ln{stroke:var(--g4);stroke-width:1}
#pogl-08 .t8-svg .bar{fill:var(--g3);stroke:var(--line);stroke-width:1}
#pogl-08 .t8-svg .win{stroke:var(--line);stroke-width:1}
#pogl-08 .t8-svg .dot{fill:var(--white);stroke:var(--line);stroke-width:1.4}
#pogl-08 .t8-svg .dot.y{fill:var(--yellow)}
#pogl-08 .t8-svg .halo{paint-order:stroke;stroke:rgba(246,246,242,.92);stroke-width:4px;stroke-linejoin:round}
#pogl-08 .t8-list{display:none;list-style:none}
#pogl-08 .t8-list li{position:relative;padding:0 0 14px 24px;font:400 15px/1.4 var(--sans)}
#pogl-08 .t8-list li:before{content:"";position:absolute;left:0;top:4px;width:12px;height:12px;border:1.3px solid var(--line);border-radius:50%;background:var(--g3)}
#pogl-08 .t8-list li.p:before{background:var(--yellow)}
#pogl-08 .t8-list li.n:before{border-radius:2px;background:repeating-linear-gradient(45deg,var(--white) 0 2px,var(--g3) 2px 3px)}
#pogl-08 .t8-list li:not(:last-child):after{content:"";position:absolute;left:6px;top:19px;bottom:-1px;border-left:1px dashed var(--g3)}
#pogl-08 .t8-list b{display:block;font-weight:600}

@media (max-width:1180px) and (min-width:821px){
  #pogl-08 .c8-r .cb{grid-template-columns:minmax(0,1fr)}
  #pogl-08 .c8-head,#pogl-08 .c8-r{grid-template-columns:130px minmax(0,1fr) minmax(0,1.3fr)}
}
@media (max-width:820px){
  #pogl-08 .c8-head{display:none}
  #pogl-08 .c8-r{display:block;margin-bottom:18px;border-top:1.2px solid var(--line)}
  #pogl-08 .c8-r.last{border-bottom:0}
  #pogl-08 .c8-r .k{padding:10px 0 8px}
  #pogl-08 .c8-r .k .n{display:inline;font-size:20px;margin:0 8px 0 0}
  #pogl-08 .c8-r .ca,#pogl-08 .c8-r .cb{display:block;padding:10px 12px 12px;font-size:15.5px}
  #pogl-08 .c8-r .cb{border-left:0;margin-top:6px}
  #pogl-08 .c8-r .ca:before,#pogl-08 .c8-r .cb:before{content:attr(data-k);display:block;font:600 11px var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);margin-bottom:6px}
  #pogl-08 .mini{margin-top:10px}
  #pogl-08 .t8{display:none}
  #pogl-08 .t8-list{display:block}
}

/* v10 (IGV 11 Oct): yellow underline drawn left to right when the sentence reaches mid-screen */
#pogl-08 .ul-y{background:linear-gradient(var(--yellow),var(--yellow)) no-repeat 0 100%/0% .38em;padding-bottom:.02em;transition:background-size 1.6s cubic-bezier(.2,.7,.2,1) .6s;-webkit-box-decoration-break:clone;box-decoration-break:clone}
#pogl-08 .b6-end.in .ul-y{background-size:100% .38em}
@media (prefers-reduced-motion:reduce){#pogl-08 .ul-y{transition:none}}
#pogl-08 .b6-end p:has(.ul-y){margin-bottom:.65em}