/* Funlab Gallery Mosaic */

/* CSS Grid en vez de Flexbox: así el "gap" se resta correctamente del
   ancho de cada foto y la fila siempre llena el 100% exacto, sin dejar
   espacio sobrante a la derecha. */
.fgm-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
	width: 100%;
	box-sizing: border-box;
}

.fgm-item {
	position: relative;
	overflow: hidden;
	box-sizing: border-box;
	background-color: #1a1a1a;
	width: 100%;
	min-width: 0;
}

/* Anchos fijos del mosaico, igual al diseño original (sobre 4 columnas):
   fila 1 → 25% / 25% / 50% (1 + 1 + 2 columnas), fila 2 → 75% / 25% (3 + 1 columnas) */
.fgm-grid .fgm-item.fgm-pos-1 { grid-column: span 1; }
.fgm-grid .fgm-item.fgm-pos-2 { grid-column: span 1; }
.fgm-grid .fgm-item.fgm-pos-3 { grid-column: span 2; }
.fgm-grid .fgm-item.fgm-pos-4 { grid-column: span 3; }
.fgm-grid .fgm-item.fgm-pos-5 { grid-column: span 1; }
/* Si se agregan más fotos de las 5 originales, cada una ocupa 1 columna. */
.fgm-grid .fgm-item:nth-child(n+6) { grid-column: span 1; }

/* Con proporción fija: la foto SIEMPRE llena el 100% del cuadro,
   recorta lo que sobre (object-fit: cover), nunca deja espacio vacío. */
.fgm-item.fgm-has-ratio .fgm-img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* "Automática": el cuadro se ajusta al tamaño real de la imagen. */
.fgm-item.fgm-auto-ratio .fgm-img {
	position: relative;
	width: 100%;
	height: auto;
	display: block;
}

.fgm-img {
	transition: transform 0.5s ease;
}

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

.fgm-item.fgm-grayscale .fgm-img {
	filter: grayscale(100%);
}

/* Animación de entrada al hacer scroll (clase agregada por JS) */
.fgm-animated {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.fgm-animated.fgm-visible {
	opacity: 1;
	transform: translateY(0);
}

.fgm-footer {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	margin-top: 40px;
}

.fgm-text {
	font-size: 12px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.65);
	max-width: 700px;
	margin: 0;
}

.fgm-logo {
	width: 180px;
	height: auto;
	display: block;
}

/* Responsive: en mobile, todas las fotos a ancho completo, una por fila */
@media (max-width: 767px) {
	.fgm-grid {
		grid-template-columns: 1fr;
	}
	.fgm-item {
		grid-column: span 1 !important;
	}
}

/* Dentro del editor de Elementor siempre se ve el contenido a full,
   la animación de entrada solo corre en el sitio publicado (front). */
.elementor-editor-active .fgm-animated {
	opacity: 1 !important;
	transform: none !important;
}