/* ===============================================================
   gallery.css – grid miniatur + lightbox wycentrowany
=============================================================== */

/* === GRID MINIATUR =========================================== */
.gallery-grid{
  display:grid;gap:2rem;margin:3rem 0 2.5rem;
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
}
.gallery-item{
  border:0;background:none;padding:0;cursor:pointer;width:100%;
  position:relative;overflow:hidden;border-radius:14px;
  background:rgba(30,30,30,.6);backdrop-filter:blur(6px) saturate(130%);
  box-shadow:0 8px 24px rgba(0,0,0,.55);
  transition:transform .35s cubic-bezier(.16,.84,.44,1);
}
.gallery-item:hover{transform:translateY(-6px) scale(1.02);}
.gallery-item img{width:100%;display:block;aspect-ratio:16/10;object-fit:cover;
  transition:transform .35s cubic-bezier(.16,.84,.44,1);}
.gallery-item:hover img{transform:scale(1.07);}
.gallery-item:focus-visible{outline:3px solid var(--accent-color);outline-offset:3px;}

/* subtelny gradient przy dolnej krawędzi */
.gallery-item::before{
  content:"";position:absolute;inset:auto 0 0;height:55%;
  background:linear-gradient(to top,rgba(0,0,0,.65),rgba(0,0,0,0));
  pointer-events:none;
}

/* === LIGHTBOX (cały viewport, wycentrowany) =================== */
#lightbox[aria-hidden="true"]{display:none;}
#lightbox{
  position:fixed;inset:0;z-index:5000;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.92);padding:2rem;
}
.lb-image{
  max-width:calc(100vw - 4rem);
  max-height:calc(100vh - 4rem);
  border-radius:10px;
  box-shadow:0 8px 32px rgba(0,0,0,.8);
}

/* strzałki & zamknięcie */
.lb-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  font-size:3rem;line-height:1;border:0;background:none;color:#fff;cursor:pointer;
  padding:.3rem .8rem;border-radius:6px;user-select:none;
  transition:background .25s;
}
.lb-arrow:hover{background:rgba(255,255,255,.1);}
.lb-prev{left:2%;}
.lb-next{right:2%;}
.lb-close{
  position:absolute;top:20px;right:25px;font-size:2rem;line-height:1;
  border:0;background:none;color:#fff;cursor:pointer;padding:.2rem .4rem;border-radius:6px;
  transition:background .25s;
}
.lb-close:hover{background:rgba(255,255,255,.15);}

/* === mobile tweaks =========================================== */
@media(max-width:576px){
  .gallery-grid{gap:1.6rem;}
  .lb-arrow{font-size:2.2rem;}
}