/* b3 · Malo područje, trećina noćenja */
#pogl-02 .b3w{padding:clamp(16px,2.4vw,30px);display:flex;flex-direction:column;gap:14px;max-width:980px}
#pogl-02 .b3w-row{display:grid;grid-template-columns:minmax(150px,230px) 1fr 90px;gap:14px;align-items:center}
#pogl-02 .b3w-k{font:500 15px/1.3 'Inter Tight',sans-serif}
#pogl-02 .b3w-bar{height:30px;background:#e6e5df;border:1px solid rgba(28,28,26,.25);position:relative}
#pogl-02 .b3w-bar i{position:absolute;left:0;top:0;bottom:0;width:0;background:#76766f;transition:width 1.1s cubic-bezier(.3,.7,.2,1)}
#pogl-02 .vis.in .b3w-bar i{width:var(--w)}
#pogl-02 .b3w-row.y .b3w-bar i{background:var(--yellow);border-right:1px solid #1c1c1a}
#pogl-02 .b3w-row.g .b3w-bar i{background:#a3a29b}
#pogl-02 .b3w-row b{font:600 22px/1 'Source Serif 4',serif;text-align:right}
#pogl-02 .b3w-sub{margin-top:14px;padding-top:16px;border-top:1px solid rgba(28,28,26,.18);display:flex;flex-direction:column;gap:12px}
#pogl-02 .b3w-sub .chip{align-self:flex-start}
@media (max-width:820px){#pogl-02 .b3w-row{grid-template-columns:1fr 92px;gap:6px 10px}#pogl-02 .b3w-k{grid-column:1/3}#pogl-02 .b3w-row b{font-size:18px}}
/* b3 · two pies: nights fill first (yellow), then the area (grey) */
#pogl-02 .b3pies{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,4vw,60px);padding:clamp(18px,3vw,40px)}
#pogl-02 .b3p{display:grid;grid-template-columns:minmax(120px,210px) 1fr;gap:20px;align-items:center}
#pogl-02 .b3p-svg{width:100%;height:auto;transform:rotate(-90deg)}
#pogl-02 .b3p-bg{fill:#e6e5df;stroke:#1c1c1a;stroke-width:.3}
#pogl-02 .b3p-v{fill:none;stroke-width:20;stroke-dasharray:0 100;transition:stroke-dasharray 1.3s cubic-bezier(.3,.7,.2,1) var(--d)}
#pogl-02 .b3p.y .b3p-v{stroke:var(--yellow)}
#pogl-02 .b3p.g .b3p-v{stroke:#4d4d48}
#pogl-02 .vis.in .b3p-v{stroke-dasharray:var(--v) 100}
#pogl-02 .b3p-t b{display:block;font:600 clamp(40px,4.4vw,68px)/1 'Source Serif 4',serif;margin-bottom:8px}
#pogl-02 .b3p-t span{font:400 clamp(15px,1.2vw,18px)/1.4 'Inter Tight',sans-serif}
#pogl-02 .b3w-k small{display:block;font-size:12px;color:#5d5d57;font-weight:400}
@media (max-width:820px){#pogl-02 .b3pies{grid-template-columns:1fr}#pogl-02 .b3p{grid-template-columns:120px 1fr}}
/* v07 · hero: Privlaka in summer, full width of the frame */
#pogl-02 #b2-hero{margin:0 0 5vh}
#pogl-02 #b2-hero img{width:100%;max-height:80vh;object-fit:cover}
/* v08 · the map is interactive: say so where the eye is */
#pogl-02 .map-hint{margin:0;padding:10px 16px;background:var(--yellow);font:500 14.5px/1.4 'Inter Tight',sans-serif;border-bottom:1px solid #1c1c1a}
/* v09 · both pies show the zone's share in yellow on dark grey; an arrow reads left to right: nights → area */
#pogl-02 .b3pies{grid-template-columns:1fr auto 1fr;align-items:center}
#pogl-02 .b3p-bg{fill:#4d4d48;stroke:#1c1c1a}
#pogl-02 .b3p.y .b3p-v{stroke:var(--yellow)}
#pogl-02 .b3p-ar{font:300 clamp(40px,4.5vw,64px)/1 'Inter Tight',sans-serif}
@media (max-width:820px){#pogl-02 .b3pies{grid-template-columns:1fr}#pogl-02 .b3p-ar{transform:rotate(90deg);justify-self:center}}