/* Kuvakatselin (valo.js) */
.content a[href$=".jpg"], .content a[href$=".jpeg"], .content a[href$=".png"] { cursor:zoom-in; }
.valo { position:fixed; inset:0; z-index:1000; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.95); }
.valo.auki { display:flex; }
html.valo-auki { overflow:hidden; }
.valo-kuva { margin:0; display:flex; flex-direction:column; align-items:center; max-width:100%; }
.valo-kuva img { display:block; max-width:96vw; max-height:86vh; max-height:86dvh; width:auto; height:auto; object-fit:contain; box-shadow:0 0 40px #000; background:#111; }
.valo-kuva figcaption { color:#ddd; font:15px/1.4 system-ui, sans-serif; margin:.6rem 1rem 0; text-align:center; max-width:60ch; }
.valo button { position:absolute; background:rgba(0,0,0,.35); border:0; border-radius:50%; color:#f2f2f2; width:3rem; height:3rem; font:34px/1 Arial, sans-serif; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0 0 .15em; }
.valo button:hover { background:rgba(255,255,255,.18); }
.valo button:focus-visible { outline:2px solid #fff; outline-offset:2px; }
.valo button[hidden] { display:none; }
.valo-sulje { top:max(.6rem, env(safe-area-inset-top)); right:max(.6rem, env(safe-area-inset-right)); }
.valo-ed { left:max(.5rem, env(safe-area-inset-left)); top:50%; transform:translateY(-50%); }
.valo-seur { right:max(.5rem, env(safe-area-inset-right)); top:50%; transform:translateY(-50%); }
.valo-nro { position:absolute; left:0; right:0; bottom:max(.5rem, env(safe-area-inset-bottom)); margin:0; text-align:center; color:#aaa; font:14px system-ui, sans-serif; }
@media (max-width:600px) { .valo-ed, .valo-seur { top:auto; bottom:max(.3rem, env(safe-area-inset-bottom)); transform:none; } .valo-kuva img { max-height:78vh; max-height:78dvh; } }