/* m05 · Dulja sezona (team C). Every selector starts with #pogl-02.
   Slika 5.1 the 365-day strip · Slika 5.2 the growing plan (styles in src/plan.css) · Slika 5.3 hall and tribune. */

/* 5.1 the year strip: label | 12 months | days */
#pogl-02 .yr{--lw:minmax(180px,300px);--vw:150px;padding:2px 0 4px}
#pogl-02 .yr-sec{margin:6px 0 10px}
#pogl-02 .yr-sec + .yr-row{margin-top:0}
#pogl-02 .yr-row{display:grid;grid-template-columns:var(--lw) minmax(0,1fr) var(--vw);gap:0 22px;align-items:center;margin:0 0 16px}
#pogl-02 .yr-z{margin-top:2px}
#pogl-02 .yr-l b{display:block;font:500 16px/1.25 var(--sans)}
#pogl-02 .yr-l small{display:block;font:400 12.5px/1.35 var(--sans);color:var(--ink-2);margin-top:2px}
#pogl-02 .yr-z .yr-l b{font-weight:600}
#pogl-02 .yr-v{font:700 clamp(24px,2.2vw,34px)/1 var(--serif);white-space:nowrap;text-align:left;font-variant-numeric:tabular-nums}
#pogl-02 .yr-z .yr-v{transition:color .3s}
#pogl-02 .yr-s{position:relative;height:38px;border:1.2px solid var(--line);background:var(--white)}
#pogl-02 .yr-z .yr-s{height:46px}
#pogl-02 .mos{position:absolute;inset:0;display:flex}
#pogl-02 .mo{flex-basis:0;position:relative;border-right:1px solid var(--g5);background:var(--g6)}
#pogl-02 .mo:last-child{border-right:0}
#pogl-02 .mo b{position:absolute;inset:0;background:var(--yellow);transform:scaleY(0);transform-origin:bottom;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
#pogl-02 .mo.on b{transform:scaleY(1)}
#pogl-02 .yr-z .mo.on{border-right-color:var(--yellow-dk)}
#pogl-02 .fl{position:absolute;top:0;bottom:0;background:var(--g3);box-shadow:inset 0 0 0 1px var(--line);transform:scaleX(0);transition:transform 1s cubic-bezier(.2,.7,.2,1)}
#pogl-02 .fl.ht{background-color:var(--g6);background-image:radial-gradient(circle,var(--g1) 34%,transparent 36%);background-size:6px 6px}
#pogl-02 .yr.in .fl{transform:scaleX(1)}
#pogl-02 .yr-axis{display:grid;grid-template-columns:var(--lw) minmax(0,1fr) var(--vw);gap:0 22px;margin-top:-6px}
#pogl-02 .yr-m{display:flex}
#pogl-02 .yr-m span{flex-basis:0;text-align:center;font:400 12.5px var(--sans);color:var(--ink-2);padding-top:6px;border-left:1px solid var(--g5);height:22px}
#pogl-02 .yr-m span:first-child{border-left:0}

/* 5.2 the growing plan (src/plan.css draws it): longer steps on desktop so each plan state holds; the current fact's number in yellow (as m03) */
@media (min-width:821px){#pogl-02 #steps-05 > .facts > .fact{padding-bottom:26vh}}
#pogl-02 #steps-05 .fact.plan-now .ix{background:var(--yellow);color:var(--ink)}

/* 5.3 the hall and the tribune: section + the 2021 list */
#pogl-02 .hl{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:3vw;align-items:center}
#pogl-02 .hl-svg{display:block;width:100%;height:auto;overflow:visible}
#pogl-02 .hl-svg .earth{fill:url(#m05-earth);stroke:none}
#pogl-02 .hl-svg .gl{fill:none;stroke:var(--line);stroke-width:1.4}
#pogl-02 .hl-svg .bld{fill:var(--g5);stroke:var(--line);stroke-width:1.4}
#pogl-02 .hl-svg .wall{fill:none;stroke:var(--line);stroke-width:2.6}
#pogl-02 .hl-svg .slab{fill:none;stroke:var(--line);stroke-width:1.4}
#pogl-02 .hl-svg .steps{fill:none;stroke:var(--line);stroke-width:1.6}
#pogl-02 .hl-svg .prom{fill:none;stroke:var(--line);stroke-width:4}
#pogl-02 .hl-svg .room{fill:var(--yellow-soft);stroke:none;opacity:0;transition:opacity 1s ease .7s}
#pogl-02 .hl-svg .proj{fill:var(--yellow);stroke:var(--line);stroke-width:1}
#pogl-02 .hl-svg .glass-was{fill:none;stroke:var(--ink-3);stroke-width:1.2;stroke-dasharray:4 4}
#pogl-02 .hl-svg .glass rect{fill:#dfe6e6;stroke:var(--line);stroke-width:1.2}
#pogl-02 .hl-svg .glass{transform:translateY(48px);transition:transform 1.2s cubic-bezier(.4,.1,.2,1) .3s}
#pogl-02 .hl-svg .arr{fill:none;stroke:var(--ink);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
#pogl-02 .hl-svg .pp{fill:var(--ink);stroke:var(--white);stroke-width:1}
#pogl-02 .hl-svg .pp.pl{fill:var(--g2)}
#pogl-02 .hl-svg text{font-family:var(--sans);fill:var(--ink);paint-order:stroke;stroke:rgba(246,246,242,.92);stroke-width:4px;stroke-linejoin:round}
#pogl-02 .hl-svg .lb-b{font-size:15px;font-weight:600}
#pogl-02 .hl-svg .lb-s{font-size:13px}
#pogl-02 .hl-svg .lb-l{font-size:12px;fill:var(--ink-2)}
#pogl-02 .hl-svg.ph .lb-b{font-size:17px}
#pogl-02 .hl-svg.ph .lb-s{font-size:15px}
#pogl-02 .hl-svg.ph .lb-l{font-size:14px}
#pogl-02 .vis.in .hl-svg .glass{transform:none}
#pogl-02 .vis.in .hl-svg .room{opacity:.75}
#pogl-02 .hl-list{display:flex;flex-direction:column;gap:20px}
#pogl-02 .hl-g ul{list-style:none;margin-top:10px;border-top:1px solid var(--line)}
#pogl-02 .hl-g li{font:400 17px/1.35 var(--sans);padding:7px 0 7px;border-bottom:1px solid var(--g5)}
#pogl-02 .hl-note{font:400 14px/1.45 var(--sans);color:var(--ink-2)}

@media (max-width:1100px){
  #pogl-02 .yr{--lw:minmax(150px,220px);--vw:124px}
}
@media (max-width:820px){
  #pogl-02 .yr-row{grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;margin-bottom:18px}
  #pogl-02 .yr-l{grid-column:1;grid-row:1;align-self:end}
  #pogl-02 .yr-v{grid-column:2;grid-row:1;align-self:end;font-size:24px}
  #pogl-02 .yr-s{grid-column:1 / -1;grid-row:2;height:32px}
  #pogl-02 .yr-z .yr-s{height:38px}
  #pogl-02 .yr-l b{font-size:15px}
  #pogl-02 .yr-axis{grid-template-columns:minmax(0,1fr);margin-top:-10px}
  #pogl-02 .yr-axis > div:not(.yr-m){display:none}
  #pogl-02 .yr-m span{font-size:10.5px;letter-spacing:-.01em}
  #pogl-02 .hl{grid-template-columns:minmax(0,1fr);gap:18px}
  #pogl-02 .hl-g li{font-size:16px}
}