/* ============================================================
   Galeria Diário de Obra — estilos do front-end
   ============================================================ */

.gdob-gallery {
	display: grid;
	/* 3 colunas em telas grandes; ajuste o valor mínimo conforme o layout */
	grid-template-columns: repeat( auto-fill, minmax( 200px, 1fr ) );
	gap: 12px;
	margin: 1.5em 0;
}

/* Cada item ocupa uma célula do grid */
.gdob-item {
	margin: 0;
	overflow: hidden;
	border-radius: 4px;
	background: #f0f0f0;
	position: relative;
}

/* A imagem preenche a área mantendo proporção quadrada (padrão).
   Para proporção livre, remova o aspect-ratio e o object-fit. */
.gdob-item a {
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

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

/* Efeito hover: leve zoom */
.gdob-item a:hover img,
.gdob-item a:focus img {
	transform: scale( 1.05 );
	opacity: 0.92;
}

/* Caption abaixo da imagem */
.gdob-caption {
	padding: 6px 10px 8px;
	font-size: 0.85em;
	color: #555;
	background: #fff;
	text-align: center;
}

/* ---- Responsividade --------------------------------------- */

/* Tablet: 2 colunas */
@media ( max-width: 768px ) {
	.gdob-gallery {
		grid-template-columns: repeat( auto-fill, minmax( 180px, 1fr ) );
		gap: 8px;
	}
}

/* Mobile: 1 coluna em telas muito pequenas */
@media ( max-width: 480px ) {
	.gdob-gallery {
		grid-template-columns: 1fr 1fr;
		gap: 6px;
	}
}

/* ---- Galeria com imagem única ----------------------------- */

/* Quando há apenas 1 imagem, exibe em tamanho completo */
.gdob-gallery--single {
	display: block;
}

.gdob-gallery--single .gdob-item {
	margin: 0;
}

.gdob-gallery--single .gdob-item a {
	aspect-ratio: auto;
}

.gdob-gallery--single .gdob-item img {
	width: 100%;
	height: auto;
	object-fit: contain;
}