/* GOCHI TRAVELS — components/gallery.css (extraído de styles.css en ET-8.1, Fase 3) */

/* =============================================================
   Galería "Experiencias Gochi" (ET-8.0, Fase 5) — masonry + glass
   ============================================================= */
.galeria-filtros {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 24px;
}
.galeria-filtro {
  padding: 8px 16px; border-radius: var(--radius-pill);
  font-size: 13px; font-weight: 600;
  background: var(--cream-2); color: var(--text-soft);
  transition: background .2s var(--ease-out), color .2s var(--ease-out);
}
.galeria-filtro.is-active, .galeria-filtro:hover { background: var(--ink); color: var(--cream); }

.galeria-grid {
  column-count: 3;
  column-gap: 14px;
}
.galeria-item {
  position: relative;
  display: block;
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 14px;
  break-inside: avoid;
  box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.galeria-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(34,28,20,0.16);
}
.galeria-item img { width: 100%; height: auto; display: block; transition: transform .4s var(--ease-out); }
.galeria-item:hover img { transform: scale(1.06); }

.galeria-item-caption {
  position: absolute; left: 8px; right: 8px; bottom: 8px;
  display: flex; flex-direction: column; gap: 2px;
  background: rgba(250,246,238,0.78);
  backdrop-filter: blur(10px) saturate(1.4);
  -webkit-backdrop-filter: blur(10px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  text-align: left;
}
.galeria-item-caption strong { font-size: 13px; color: var(--ink); line-height: 1.2; }
.galeria-item-caption .galeria-item-categoria { font-size: 11px; color: var(--accent-ink); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }

@media (max-width: 640px) {
  /* En el grid de 2-3 columnas del móvil el texto ocupaba media foto;
     se reduce y se deja más translúcido para que se vea la imagen. */
  .galeria-item-caption {
    padding: 6px 8px;
    gap: 1px;
    background: rgba(250,246,238,0.55);
  }
  .galeria-item-caption strong { font-size: 11px; line-height: 1.15; }
  .galeria-item-caption .galeria-item-categoria { font-size: 8px; }
}

.galeria-ver-mas-wrap { display: flex; justify-content: center; margin-top: 12px; }

.lightbox-overlay {
  position: fixed; inset: 0; z-index: 1100;
  background: rgba(34,28,20,0.92);
  display: none; align-items: center; justify-content: center;
  padding: 20px;
}
.lightbox-overlay.is-open { display: flex; }
.lightbox-img { max-width: min(90vw, 900px); max-height: 85vh; border-radius: var(--radius-md); object-fit: contain; }
.lightbox-close, .lightbox-nav {
  position: absolute; width: 48px; height: 48px; border-radius: 50%;
  background: rgba(250,246,238,0.12); color: var(--cream);
  display: flex; align-items: center; justify-content: center; font-size: 20px;
  transition: background .2s var(--ease-out);
}
.lightbox-close:hover, .lightbox-nav:hover { background: rgba(250,246,238,0.24); }
.lightbox-close { top: 20px; right: 20px; }
.lightbox-prev { left: 20px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 20px; top: 50%; transform: translateY(-50%); }