/* =========================
   GALERÍA MASONRY (variante nueva)
   No modifica .foto-lightbox-grid base — solo aplica dentro de .galeria-masonry
   Usa CSS Grid + JS (js/components/galeria-masonry.js) en vez de `columns`:
   con pocas fotos, `columns` puede balancear el contenido y dejar columnas vacías.
========================= */

/* Contenedor: mismo ancho que "Noticias Relacionadas" (.container global), no el ancho angosto del cuerpo de la noticia */
.galeria-ancha {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(12px, 3vw, 24px);
}

/* Grid tipo masonry: 4 columnas, alto de cada foto calculado por JS vía grid-row-end: span N */
.galeria-masonry {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 4px;
  gap: 10px;
  margin: 2rem 0;
}

.galeria-masonry .foto-lightbox-thumb {
  aspect-ratio: auto;
  border-radius: 0;
  background: none;
  display: block;
  overflow: hidden;
}

.galeria-masonry .foto-lightbox-thumb img {
  width: 100%;
  height: auto;
  object-fit: unset;
  border-radius: 0;
}

@media (max-width: 1024px) {
  .galeria-masonry { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
  .galeria-masonry { grid-template-columns: repeat(2, 1fr); gap: 6px; }
}

@media (max-width: 480px) {
  .galeria-masonry { grid-template-columns: 1fr; }
}