/* REDI Gallery Grid — estilos base do widget */

.rgg-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-auto-rows: 280px;
	grid-auto-flow: row dense;
	gap: 8px;
	width: 100%;
}

.rgg-item {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	border-radius: 8px;
}

.rgg-item a {
	display: block;
	width: 100%;
	height: 100%;
}

.rgg-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease, filter 0.4s ease, opacity 0.4s ease;
}

/* Padrão: imagem larga (ocupa 2 colunas) */
.rgg-item.rgg-span-wide {
	grid-column: span 2;
}

/* Padrão: imagem grande (ocupa 2 colunas x 2 linhas) — para "primeira imagem grande" */
.rgg-item.rgg-span-big {
	grid-column: span 2;
	grid-row: span 2;
}

/* Em ecrãs pequenos, nenhuma imagem deve ultrapassar a largura disponível */
@media (max-width: 767px) {
	.rgg-item.rgg-span-big,
	.rgg-item.rgg-span-wide {
		grid-column: span 1;
	}
	.rgg-item.rgg-span-big {
		grid-row: span 1;
	}
}

/* ---- Efeitos de hover ---- */

.rgg-hover-zoom .rgg-item:hover img {
	transform: scale(1.06);
}

.rgg-hover-fade .rgg-item:hover img {
	opacity: 0.85;
}

.rgg-hover-grayscale .rgg-item img {
	filter: grayscale(60%);
}

.rgg-hover-grayscale .rgg-item:hover img {
	filter: grayscale(0%);
}