/* ================================
   GALERÍA · masonry CSS puro + filtros + lightbox
   Adaptado del componente de bhavanirodha.org/gallery.html.
   Usa GLightbox para el modal, CSS column-count para el masonry.
================================ */

.galeria-page {
  background-color: var(--color-beige);
  padding: var(--spacing-md) 0 var(--spacing-xl);
}

.galeria-intro {
  text-align: center;
  color: var(--color-text-light);
  font-family: var(--font-primary);
  font-style: italic;
  max-width: 640px;
  margin: -8px auto var(--spacing-md);
  padding: 0 var(--spacing-sm);
}

/* === Filtros: chips horizontales centradas, con wrap === */
.galeria-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0 auto var(--spacing-md);
  padding: 0 var(--spacing-sm);
  max-width: 900px;
}

.galeria-filter {
  font-family: var(--font-secondary);
  font-size: 0.92rem;
  padding: 8px 18px;
  border-radius: 999px;
  background: var(--color-white);
  border: 1px solid var(--color-beige-dark);
  color: var(--color-text);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.galeria-filter:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.galeria-filter.active {
  background: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

.galeria-filter-count {
  opacity: 0.75;
  margin-left: 4px;
  font-size: 0.85em;
}

/* === Masonry: CSS column-count puro (sin libreria) === */
/* 3 cols desktop / 2 cols tablet / 1 col mobile. break-inside:avoid mantiene
   las fotos completas en una sola columna sin partir. Mismo patron que BR. */
.galeria-masonry {
  column-count: 3;
  column-gap: 16px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-sm);
}

@media (max-width: 991px) {
  .galeria-masonry { column-count: 2; }
}

@media (max-width: 575px) {
  .galeria-masonry { column-count: 1; }
}

.galeria-loading {
  text-align: center;
  color: var(--color-text-light);
  font-style: italic;
  padding: var(--spacing-lg);
  column-span: all;
}

/* === Item: foto + overlay con titulo al hover === */
.galeria-item {
  display: block;
  break-inside: avoid;
  margin-bottom: 16px;
  /* Bordes uniformes 14px (alineado con .repo-card, .showcase-card, libros).
     Antes era asimetrico 16px/0/16px/0 imitando a bhavanirodha, pero esa
     firma visual es propia de BR; pannabhumi usa bordes suaves uniformes. */
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
  cursor: zoom-in;
  text-decoration: none;
  color: inherit;
}

.galeria-item img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.4s ease;
}

/* Hover desktop: scale en imagen + overlay con titulo + icono expand. En
   touch (hover:none) NO se aplica para no dejar el overlay pegado tras el tap. */
@media (hover: hover) {
  .galeria-item:hover {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
  }
  .galeria-item:hover img {
    transform: scale(1.05);
  }
  .galeria-item:hover .galeria-item-overlay {
    opacity: 1;
  }
}

.galeria-item-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.25) 50%, rgba(0, 0, 0, 0) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 16px 18px;
  pointer-events: none;
}

.galeria-item-title {
  color: var(--color-white);
  font-family: var(--font-secondary);
  font-size: 0.95rem;
  line-height: 1.3;
  margin: 0;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.galeria-item-expand {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(255, 255, 255, 0.95);
  color: var(--color-primary);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

@media (hover: hover) {
  .galeria-item:hover .galeria-item-expand {
    opacity: 1;
    transform: scale(1);
  }
}

/* === Estado oculto cuando un filtro lo descarta. Fade out sin colapsar el
   layout: display:none corta el masonry. Si quisiéramos animación
   reordenable necesitaríamos JS más pesado o una libreria; lo dejamos simple. */
.galeria-item.hide {
  display: none;
}

.galeria-empty {
  text-align: center;
  color: var(--color-text-light);
  font-style: italic;
  padding: var(--spacing-lg);
}

/* === GLightbox: overrides minimos para alinear el modal a nuestra paleta === */
.gslide-title {
  font-family: var(--font-secondary);
  color: var(--color-white);
}
.glightbox-clean .gclose,
.glightbox-clean .gnext,
.glightbox-clean .gprev {
  background-color: rgba(182, 109, 76, 0.85); /* terracota translucido */
}
.glightbox-clean .gclose:hover,
.glightbox-clean .gnext:hover,
.glightbox-clean .gprev:hover {
  background-color: rgba(182, 109, 76, 1);
}