/* =====================================================================
   Full-screen viewer for teacher-authored images.
   Unscoped on purpose: the same component serves the homework pages and
   the material pages. Everything it owns is prefixed `ctg-lightbox`, and
   the only thing it puts on page content is `.ctg-zoomable` (added by JS
   to images large enough to be worth opening — never to inline icons).
   ===================================================================== */

img.ctg-zoomable{ cursor:zoom-in; }
img.ctg-zoomable:focus-visible{ outline:2px solid #4f46e5; outline-offset:3px; }

.ctg-lightbox{
  position:fixed; inset:0; z-index:2000;
  display:flex; flex-direction:column;
  background:rgba(12,16,26,.94);
  /* Own the gesture: `manipulation` keeps one-finger panning and pinch-zoom
     but kills the browser's double-tap zoom, which we replace with a
     fit ↔ full-size toggle. Without this the two fight each other. */
  touch-action:manipulation;
}
.ctg-lightbox[hidden]{ display:none; }

.ctg-lightbox__stage{
  flex:1; min-height:0; overflow:auto; -webkit-overflow-scrolling:touch;
  display:flex; align-items:center; justify-content:center; padding:12px;
}
/* Width and height stay auto: max-width/max-height alone fit the picture and
   keep its ratio. No object-fit — it would only matter if we pinned a height,
   and pinning one is how a scan gets cropped. */
.ctg-lightbox__stage img{
  max-width:100%; max-height:100%;
  border-radius:4px; cursor:zoom-in; user-select:none;
}
/* Zoomed: the stage becomes a scroll port and the image keeps the pixel
   width JS gives it, so a scanned worksheet is readable at real size. */
.ctg-lightbox__stage[data-zoom="on"]{ display:block; }
.ctg-lightbox__stage[data-zoom="on"] img{
  max-width:none; max-height:none; margin:auto; cursor:zoom-out;
}

.ctg-lightbox__close{
  position:absolute; top:calc(10px + env(safe-area-inset-top)); right:10px; z-index:1;
  width:44px; height:44px; padding:0; border:0; border-radius:50%;
  background:rgba(255,255,255,.16); color:#fff;
  font-size:26px; line-height:1; cursor:pointer;
  display:grid; place-items:center;
}
.ctg-lightbox__close:hover{ background:rgba(255,255,255,.28); }
.ctg-lightbox__close:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

.ctg-lightbox__hint{
  margin:0; padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  text-align:center; color:rgba(255,255,255,.6); font-size:13px;
}
/* The hint names touch gestures, so it is for touch screens only. */
@media (hover:hover) and (pointer:fine){ .ctg-lightbox__hint{ display:none; } }

body.ctg-lightbox-open{ overflow:hidden; }