/*
 * Ciça Art Gallery — F1B
 *
 * Estrutura: .cica-art-gallery > .cica-art-row > .cica-artwork
 *
 * - As faixas (rows) são geradas no servidor (includes/class-rows.php); o CSS
 *   não decide quebra de linha no desktop.
 * - A largura de cada obra vem de --cica-art-width (% da faixa), calculada a
 *   partir da largura física. Nada de colunas fixas, nem transform: scale().
 * - --cica-art-t (0..1) é a posição relativa na escala, usada em tablet/mobile.
 * - Gap horizontal/vertical, largura máxima e margem lateral vêm dos controles
 *   do Elementor (estes valores são apenas os defaults).
 *
 * Observação: a galeria ocupa 100% do container pai (limitada por max-width).
 * Para uso de toda a janela, o container Elementor deve estar em largura total
 * e sem padding lateral.
 */

.cica-art-gallery {
	/* Limite editorial de altura da obra (ver includes/class-fit.php). */
	--cica-max-h: min(62vh, 720px);
	display: flex;
	flex-direction: column;
	align-items: stretch;
	row-gap: 90px;
	width: 100%;
	max-width: 1680px;
	margin: 0 auto;
	padding: 0 40px;
	box-sizing: border-box;
}

.cica-art-row {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	column-gap: 50px;
	row-gap: 90px;
	width: 100%;
	box-sizing: border-box;
}

/* Faixa bem preenchida: distribui o espaço livre entre as obras. */
.cica-art-row--spread {
	justify-content: space-between;
}

/* Faixa pouco preenchida (ex.: última): obras à esquerda, sem abrir buracos. */
.cica-art-row--start {
	justify-content: flex-start;
}

.cica-artwork {
	/* Pode encolher proporcionalmente se a conta de gaps em % exceder a faixa. */
	flex: 0 1 auto;
	/*
	 * Largura final = a menor entre a largura calculada no servidor (escala
	 * física + limite de referência) e a largura que mantém a altura dentro do
	 * limite com a viewport REAL: limite / (altura/largura). A altura da imagem
	 * deriva da largura (height:auto), então a proporção é preservada: sem
	 * deformação, sem crop, e o item acompanha o tamanho da imagem.
	 */
	width: min(var(--cica-art-width, 30%), calc(var(--cica-max-h) / var(--cica-art-ratio, 1)));
	min-width: 0;
	margin: 0;
	box-sizing: border-box;
}

/* Alinhamento vertical dentro da faixa (por obra). Sem 'end' no modo automático. */
.cica-artwork--v-start {
	align-self: flex-start;
}

.cica-artwork--v-center {
	align-self: center;
}

.cica-artwork--v-end {
	align-self: flex-end;
}

.cica-artwork-media {
	display: block;
	margin: 0;
}

.cica-artwork-img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
	background: none;
	filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.14));
	transition: transform 0.35s ease, filter 0.35s ease;
}

@media (hover: hover) {
	.cica-artwork:hover .cica-artwork-img {
		transform: translateY(-3px);
		filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.18));
	}
}

.cica-artwork-caption {
	margin-top: 16px;
	text-align: left;
	font-size: 13px;
	line-height: 1.5;
	letter-spacing: 0.01em;
	color: #555;
}

.cica-artwork-caption p {
	margin: 0;
}

.cica-artwork-title {
	color: #222;
}

/*
 * Tablet: cada faixa vira um grupo que quebra linha (1–2 obras por linha),
 * com escala comprimida (34%–58%) preservando a ordem das obras.
 */
@media (max-width: 1024px) {
	.cica-art-row {
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: flex-start;
	}

	.cica-art-row--spread,
	.cica-art-row--start {
		justify-content: flex-start;
	}

	.cica-artwork {
		flex: 0 0 auto;
		width: min(calc(34% + 24% * var(--cica-art-t, 0)), calc(var(--cica-max-h) / var(--cica-art-ratio, 1)));
		max-width: 100%;
		align-self: flex-start;
	}
}

/* Mobile: uma obra por linha, 75%–100%, preservando diferença de escala. */
@media (max-width: 767px) {
	.cica-art-row {
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: flex-start;
	}

	.cica-artwork {
		width: min(calc(75% + 25% * var(--cica-art-t, 0)), calc(var(--cica-max-h) / var(--cica-art-ratio, 1)));
	}
}

@media (prefers-reduced-motion: reduce) {
	.cica-artwork-img {
		transition: none;
	}

	.cica-artwork:hover .cica-artwork-img {
		transform: none;
	}
}