/* Responsive CSS Grid gallery and lightbox styles */
:root{
  --gap: 1rem;
  --bg: #fff;
  --overlay-bg: rgba(0,0,0,0.8);
}
*{box-sizing:border-box}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;line-height:1.4;margin:0;background:var(--bg);color:#111}

main.gallery-page{padding:2rem;max-width:1300px;margin:0 auto}

h1{margin:0 0 .25rem;font-size:1.5rem}

.lead{margin:0 0 1rem;color:#dfdddd}

.gallery{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:var(--gap);
}

.gallery-item{
  padding:0;border:0;background:transparent;cursor:pointer;display:block;overflow:hidden;border-radius:6px;
}
.gallery-item img{
  display:block;width:100%;height:100%;object-fit:cover;transition:transform .35s ease,filter .35s ease;min-height:120px;
}
.gallery-item:focus img,
.gallery-item:hover img{transform:scale(1.04);filter:brightness(.95)}

/* Lightbox overlay */
.lightbox{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:var(--overlay-bg);opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s ease;z-index:1000;padding:1rem;
}
.lightbox[aria-hidden="false"]{opacity:1;visibility:visible}
.lightbox-content{width:90vw;height:90vh;display:flex;align-items:center;justify-content:center}
.lightbox-content img{width:100%;height:100%;object-fit:contain;border-radius:4px;box-shadow:0 10px 30px rgba(0,0,0,.6);transform:translateY(10px);opacity:0;transition:transform .35s ease,opacity .35s ease}
.lightbox[aria-hidden="false"] .lightbox-content img{transform:none;opacity:1}

/* Close button */
.lightbox-close{
  position:fixed;top:1rem;right:1rem;z-index:1010;background:transparent;border:0;color:#fff;font-size:2.25rem;line-height:1;cursor:pointer;padding:.25rem .5rem;border-radius:6px;backdrop-filter:blur(2px);
}
.lightbox-close:focus{outline:2px solid #fff}

/* Responsive tweaks */
@media (min-width:700px){
  .gallery{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
}