/* 1 Contractor Solutions — photo gallery and lightbox
   Used by posts that contain <div class="gallery"> (see content/events/README.md).
   Loaded by those posts only, not by site.css. After editing this file, bump the ?v= date on
   its <link> in each post that uses it: browsers cache /assets/ for a year. */

/* Square thumbnail grid: 3 across, 2 across on phones */
.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:1.8em 0}
.gallery a{display:block;overflow:hidden;border:1px solid var(--line);border-radius:4px;background:var(--sand);aspect-ratio:1/1;cursor:zoom-in}
.gallery img,.prose .gallery img{width:100%;height:100%;margin:0;border-radius:0;object-fit:cover;transition:transform .25s ease}
.gallery a:hover img{transform:scale(1.04)}
@media (max-width:600px){.gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}}

/* Lightbox: one <dialog> built by gallery.js. The browser supplies the focus trap, Esc to close
   and the inert page behind it. */
html.lb-open{overflow:hidden}
dialog.lightbox{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(2,20,50,.95);color:#fff}
dialog.lightbox::backdrop{background:rgba(2,20,50,.95)}
.lightbox .lb-stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:64px 72px 84px}
.lightbox .lb-stage img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:2px;opacity:0;transition:opacity .18s ease}
.lightbox .lb-stage img.ready{opacity:1}
.lightbox .lb-caption{position:absolute;left:0;right:0;bottom:0;margin:0;padding:12px 72px 20px;text-align:center;font-size:15px;line-height:1.4;color:var(--muted-on-navy)}
.lightbox .lb-count{display:block;margin-bottom:2px;font-weight:700;color:#fff}
.lightbox .lb-btn{position:absolute;display:flex;align-items:center;justify-content:center;width:48px;height:48px;padding:0;border:1px solid rgba(255,255,255,.3);border-radius:50%;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;transition:background .14s}
.lightbox .lb-btn svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.lightbox .lb-btn:hover{background:rgba(255,255,255,.26)}
.lightbox .lb-btn:focus-visible{outline:3px solid var(--lime);outline-offset:2px}
.lightbox .lb-close{top:12px;right:12px}
.lightbox .lb-prev,.lightbox .lb-next{top:50%;margin-top:-24px}
.lightbox .lb-prev{left:12px}
.lightbox .lb-next{right:12px}
@media (max-width:600px){
  .lightbox .lb-stage{padding:64px 0 96px}
  .lightbox .lb-prev,.lightbox .lb-next{top:auto;bottom:14px;margin-top:0;background:rgba(255,255,255,.18)}
  .lightbox .lb-caption{padding:12px 68px 18px;font-size:14px}
}