/* Docs screenshots: single figures, carousels, thumbnail grids, and a click-to-enlarge lightbox.
   Markup (inside .docs-main.prose):
     <figure class="shot"><img src="…" alt="…" loading="lazy"><figcaption>…</figcaption></figure>
     <div class="shots"><figure>…</figure><figure>…</figure></div>   -> carousel (docs-gallery.js adds the buttons)
     <div class="shot-grid"><figure>…</figure>…</div>                -> thumbnail grid
   Every image opens full size when clicked. */
.shot{margin:18px 0 26px}
.shot img,.shots img,.shot-grid img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:10px;background:#141414;cursor:zoom-in}
.shot figcaption,.shots figcaption,.shot-grid figcaption{margin-top:8px;font-size:13px;line-height:1.5;color:var(--muted)}
.shots{position:relative;margin:18px 0 26px}
.shots-track{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.shots-track::-webkit-scrollbar{display:none}
.shots-track figure{flex:0 0 100%;scroll-snap-align:start;margin:0;min-width:0}
.shots-track img{aspect-ratio:2/1;object-fit:contain}
.shots-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px}
.shots-nav button{appearance:none;border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:999px;padding:6px 14px;font:500 13px var(--font);cursor:pointer;transition:border-color .15s}
.shots-nav button:hover{border-color:var(--ok)}
.shots-nav button:disabled{opacity:.4;cursor:default}
.shots-count{font-size:12px;color:var(--muted)}
.shot-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin:18px 0 26px}
.shot-grid figure{margin:0;min-width:0}
.shot-grid img{aspect-ratio:5/2;object-fit:contain}
.shot-lightbox{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.88);padding:24px;cursor:zoom-out}
.shot-lightbox.open{display:flex}
.shot-lightbox img{max-width:100%;max-height:90vh;border-radius:8px;box-shadow:0 10px 40px rgba(0,0,0,.6)}
.shot-lightbox figcaption{position:absolute;left:0;right:0;bottom:14px;text-align:center;color:#ddd;font-size:13px;line-height:1.4;padding:0 24px}