/* /static/css/gallery.css */
:root{
  --rule:#e6e6e6;
  --maxw:80rem;
}

*,
*::before,
*::after{ box-sizing:border-box; }

body{
  margin:0;
  font-family:'Montserrat', system-ui, sans-serif;
  line-height:1.6;
  color:#111;
  background:#fff;
}

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 1rem; }

.site-header{
  position:sticky; top:0; z-index:10;
  background:#fff;
  border-bottom:1px solid var(--rule);
  min-height:64px; display:flex; align-items:center;
}
.site-header .wrap{ display:flex; align-items:center; gap:1rem; }
.site-header h1{ font-size:1.25rem; margin:0; }
.back{
  text-decoration:none; color:inherit;
  border:1px solid var(--rule); padding:.35rem .6rem; border-radius:.5rem;
}

.gallery-grid{
  display:grid; gap:1rem;
  grid-template-columns: repeat(auto-fill, minmax(320px,1fr)); /* από 220 → 320 */
  margin:2rem 0 3rem;
}

.gallery-grid figure{
  margin:0; position:relative; overflow:hidden; border-radius:.75rem;
  border:1px solid var(--rule); background:#f6f6f6; cursor:pointer;
}

.gallery-grid img{
  width:100%; height:100%; object-fit:cover; display:block;
  aspect-ratio: 4/3;
  transition: transform .25s ease, filter .25s ease, box-shadow .25s ease;
}

.gallery-grid figure:hover img{ transform: scale(1.03); filter:saturate(1.05); }
.gallery-grid figcaption{
  position:absolute; inset:auto 0 0 0; padding:.5rem .6rem;
  font-size:.9rem; color:#fff; background:linear-gradient(transparent,rgba(0,0,0,.55));
}

/* Lightbox */
.lightbox{
  position:fixed; inset:0; background:rgba(0,0,0,.9);
  display:none; align-items:center; justify-content:center; flex-direction:column;
  padding:2rem; z-index:1000;
}

.lightbox[aria-hidden="false"]{ display:flex; }
.lightbox img{
  max-width:min(92vw,1200px); max-height:78vh; object-fit:contain; border-radius:.5rem;
}

.lightbox-cap{ color:#fff; margin-top:.75rem; opacity:.9; text-align:center; }
.lightbox-close{
  position:absolute; top:1rem; right:1rem;
  font-size:2rem; line-height:1; border:0; background:transparent; color:#fff; cursor:pointer;
}