/* zoom.css · task pictures that open big (slice «Урок»): the link around a frame and the viewer
   (templates/learn/_zoom.html + static/js/zoom.js). Lesson page, trainer, «Работа над ошибками». */

/* the link around a picture: the whole frame is the button, a caption under it says so */
.zoom-a{display:block;color:var(--ink);text-decoration:none;cursor:zoom-in;-webkit-tap-highlight-color:transparent}
.zoom-a img{display:block}
.zoom-cap{display:flex;align-items:center;gap:6px;min-height:44px;padding:6px 0 0;font:600 16px/1.2 var(--f-text);color:var(--blue)}
.zoom-cap .ico{flex:none;width:22px;height:22px}
.zoom-a:hover .zoom-cap span{text-decoration:underline}
.zoom-a:focus-visible{outline:3px solid var(--blue);outline-offset:4px}

/* the viewer: the whole screen, dark around the picture */
.zoom{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;
  background:var(--ink);color:var(--sheet);overflow:hidden}
.zoom[open]{display:flex;flex-direction:column}
.zoom::backdrop{background:var(--ink)}
.zoom-bar{flex:none;display:flex;align-items:center;gap:6px;padding:8px var(--gut);padding-top:max(8px,env(safe-area-inset-top))}
.zoom-title{flex:1 1 auto;min-width:0;margin:0;font:600 17px/1.25 var(--f-text);color:var(--sheet)}
.zoom-b{flex:none;color:var(--sheet)}
.zoom-b .ico{width:28px;height:28px}
.zoom-b:hover{color:var(--sheet);background:color-mix(in srgb,var(--sheet) 14%,transparent)}
.zoom-b[disabled]{opacity:.4}
.zoom-x{flex:none}
.zoom-view{flex:1 1 auto;min-height:0;display:flex;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.zoom-img{flex:none;display:block;margin:auto;width:auto;height:auto;max-width:100%;max-height:100%;background:var(--sheet);cursor:zoom-in}
.zoom.is-zoomed .zoom-img{max-width:none;max-height:none;cursor:zoom-out}
.zoom-help{flex:none;margin:0;padding:8px var(--gut) calc(10px + var(--safe-b));font-size:16px;line-height:1.35;color:var(--paper)}
.zoom-turn,.zoom-h2,.zoom.is-zoomed .zoom-h1{display:none}
.zoom.is-zoomed .zoom-h2{display:inline}
@media (orientation:portrait) and (max-width:599px){ .zoom-turn{display:inline} }
@media (orientation:landscape) and (max-height:500px){
  .zoom-bar{padding-top:4px;padding-bottom:4px}
  .zoom-help{display:none}
}