/*
====================================================
 Ilia Étterem – Galéria (gyors, swipe-os lightbox)
 Verzió: 1.2 (2025-10-22)
====================================================
*/

:root {
  --brand:#339999;
  --text:#222;
}

/* ===== Konténer ===== */
.galeria-container {
  max-width:1100px;
  margin:2rem auto;
  padding:0 1rem;
  font-family:'Poppins', sans-serif;
  color:var(--text);
  text-align:center;
}

.galeria-title {
  color:var(--brand);
  font-weight:600;
  font-size:1.8rem;
  margin-bottom:1.5rem;
  text-transform:uppercase;
  letter-spacing:0.5px;
}

/* ===== Rács ===== */
.galeria-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:1rem;
}

.galeria-item {
  overflow:hidden;
  border-radius:12px;
  cursor:pointer;
  background-color:#f5fafa;
  transition:transform .3s ease, box-shadow .3s ease;
}

.galeria-item img {
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:12px;
  transition:transform .4s ease;
}

.galeria-item:hover img {
  transform:scale(1.05);
}

/* ===== Üres állapot ===== */
.no-images {
  font-size:1.1rem;
  color:#777;
  padding:3rem 0;
  font-style:italic;
}

/* ===== Lightbox ===== */
.lightbox {
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.85);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:1000;
  opacity:1;
  transition:opacity .25s ease;
}

.lightbox.hidden {
  opacity:0;
  pointer-events:none;
}

.lightbox img {
  max-width:90%;
  max-height:90%;
  border-radius:10px;
  box-shadow:0 0 20px rgba(0,0,0,0.5);
  opacity:0;
  transition:opacity .25s ease;
}

.lightbox img.fade-in {
  opacity:1;
}

/* ===== Gombok ===== */
.lightbox-close {
  position:absolute;
  top:20px;
  right:30px;
  color:#fff;
  font-size:2rem;
  cursor:pointer;
  font-weight:300;
  transition:transform .2s ease;
}

.lightbox-close:hover {
  transform:scale(1.2);
}

.nav-btn {
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:none;
  border:none;
  color:#fff;
  font-size:2.5rem;
  cursor:pointer;
  padding:0 20px;
  user-select:none;
  transition:color .3s ease;
}

.nav-btn:hover {
  color:var(--brand);
}

.nav-btn.prev { left:15px; }
.nav-btn.next { right:15px; }

/* ===== Mobil ===== */
@media (max-width:768px) {
  .galeria-title { font-size:1.5rem; }
  .nav-btn { font-size:2rem; padding:0 10px; }
}