/* =========================================
   Gourmetize • Gallery + Lightbox
========================================= */

/* grade responsiva, bem alinhada */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:var(--gap);
  margin-top:24px;
}
.g-item{
  display:block; padding:0; border:0; background:transparent; cursor:pointer;
  border-radius:16px; overflow:hidden; box-shadow:var(--shadow);
  transition:transform .25s ease, box-shadow .25s ease;
}
.g-item img{
  width:100%; height:100%; aspect-ratio: 4 / 3; object-fit:cover; display:block;
}
.g-item:hover{ transform:translateY(-4px) }
@media (max-width:1024px){ .gallery-grid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:640px){ .gallery-grid{ grid-template-columns:1fr } }

/* -------- Lightbox -------- */
.lightbox{
  position:fixed; inset:0; display:none; place-items:center;
  background:rgba(10,8,9,.75); backdrop-filter:saturate(150%) blur(6px);
  z-index:120;
}
.lightbox.is-open{ display:grid; animation:lb-fade .18s ease-out both }

@keyframes lb-fade{ from{opacity:0} to{opacity:1} }

.lb-backdrop{
  position:absolute; inset:0;
}

.lb-stage{
  position:relative; margin:0; max-width:min(92vw, 1200px); max-height:86vh;
  display:grid; place-items:center;
}
.lb-img{
  max-width:100%; max-height:86vh; border-radius:18px;
  box-shadow:0 30px 80px rgba(0,0,0,.5);
  animation:lb-zoom .25s ease-out both;
}
@keyframes lb-zoom{ from{ transform:scale(.98); opacity:.7 } to{ transform:scale(1); opacity:1 } }

.lb-caption{
  margin-top:12px; color:#efe6e8; opacity:.9; text-align:center; font-size:14px;
}

/* controles (setas/close) */
.lb-btn{
  position:absolute; border:0; background:rgba(255,255,255,.1); color:#fff;
  width:44px; height:44px; border-radius:999px; display:grid; place-items:center;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  transition:transform .15s ease, background .2s ease, opacity .2s ease;
}
.lb-btn:hover{ background:rgba(255,255,255,.18); transform:translateY(-1px) }

.lb-close{ top:24px; right:26px; font-size:28px; line-height:1 }
.lb-prev{ left:20px; top:50%; transform:translateY(-50%) }
.lb-next{ right:20px; top:50%; transform:translateY(-50%) }

.lb-counter{
  position:absolute; bottom:22px; left:50%; transform:translateX(-50%);
  padding:6px 10px; font-weight:600; font-size:12px;
  background:rgba(0,0,0,.35); color:#fff; border-radius:999px;
  box-shadow:0 10px 30px rgba(0,0,0,.3);
}

/* toque-friendly */
@media (hover:none){
  .lb-btn{ background:rgba(255,255,255,.14) }
}

/* menor que 420px: um pouco mais de respiro */
@media (max-width:420px){
  .lb-prev{ left:10px } .lb-next{ right:10px }
  .lb-close{ top:14px; right:14px }
}