/* ==========================================================================
   MASONRY DE LA PLANTILLA 'gallery' (#gallerySec)
   ==========================================================================
   Grid de fotos mediante CSS columns. Cada imagen conserva su proporcion
   real (los filtros gallery-masonry-item/-large solo declaran 'width', ver
   etc/image-filters-config.php), asi que el navegador reparte las columnas
   sin que ninguna posicion concreta tenga que ser vertical u horizontal.

   El gap vertical NO lo da 'column-gap' (ese solo separa el eje horizontal
   entre columnas): cada .masonry-item lleva su propio margin-bottom.

   Se carga condicionalmente desde
   xsl/themes/default/_common/gallery-masonry/gallery-masonry.xsl dentro del
   <xsl:if> que comprueba si la seccion tiene imagenes: si no hay ninguna,
   este CSS no se descarga. NO se registra en etc/theme-config.php.
   ========================================================================== */

#gallerySec {
	padding-top: 0;
	padding-bottom: 5rem;
}
#gallerySec .masonry-grid {
	column-count: 1;
	column-gap: 1rem;
}
#gallerySec .masonry-item {
	position: relative;
	overflow: hidden;
	margin-bottom: 1rem;
	break-inside: avoid;
}
#gallerySec .masonry-item__link {
	display: block;
	position: relative;
}
#gallerySec .masonry-item__img {
	display: block;
	width: 100%;
	height: auto;
}
#gallerySec .masonry-item__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.35);
	opacity: 0;
	transition: opacity 200ms ease;
}
#gallerySec .masonry-item__overlay img {
	width: 2rem;
	height: 2rem;
}
#gallerySec .masonry-item__link:hover .masonry-item__overlay,
#gallerySec .masonry-item__link:focus-visible .masonry-item__overlay {
	opacity: 1;
}

/* #Tablet (576px - 991px)
================================================== */
@media only screen and (min-width: 576px) {

#gallerySec .masonry-grid 							{ column-count: 2; column-gap: 1.5rem; }
#gallerySec .masonry-item 							{ margin-bottom: 1.5rem; }

}

/* #Desktop (992px - 1920px)
================================================== */
@media only screen and (min-width: 992px) {

#gallerySec .masonry-grid 							{ column-count: 3; }

}

/* #Desktop Grande (beyond 1920px)
================================================== */
@media only screen and (min-width: 1921px) {

#gallerySec .masonry-grid 							{ column-count: 4; }

}

/* #Accesibilidad: movimiento reducido
================================================== */
@media (prefers-reduced-motion: reduce) {

#gallerySec .masonry-item__overlay 					{ transition: none; }

}