/*
 * Hamo Gallery - Models — galeria com 3 modos de organização de layout:
 *   grid    = grade uniforme (colunas iguais, mesma proporção)
 *   masonry = mosaico estilo Pinterest (colunas, alturas naturais)
 *   bento   = mosaico com tiles de tamanhos variados (referência anexada)
 * 100% CSS (sem JS). O lightbox, quando ligado, usa o nativo do Elementor.
 * Nunca declarar aqui as CSS vars escritas pelos controles (lição do
 * shadowing) — apenas consumir com var(--x, fallback).
 */

.hamo-gm {
	position: relative;
	/* Largura total da tela (full-bleed) controlada pela variável
	 * --hamo-gm-fw: 0 = dentro da seção (boxed), 1 = 100vw (borda a borda).
	 * O cálculo interpola entre os dois estados, então o controle pode ser
	 * RESPONSIVO (um valor por dispositivo) sem precisar de classe nem
	 * !important. Nenhum controle escreve width/max-width/margin direto aqui
	 * (o max-width e o alinhamento do conteúdo vivem no .hamo-gm__grid), então
	 * não há shadowing. */
	width: calc(100% + (100vw - 100%) * var(--hamo-gm-fw, 0));
	max-width: calc(100% + (100vw - 100%) * var(--hamo-gm-fw, 0));
	margin-left: calc((50% - 50vw) * var(--hamo-gm-fw, 0));
	margin-right: calc((50% - 50vw) * var(--hamo-gm-fw, 0));
}

/* Evita o scroll horizontal do modo tela cheia (100vw inclui a largura da
 * barra de rolagem). `clip` mantém a rolagem vertical e não quebra
 * position: sticky. Só é aplicado quando existe uma galeria em tela cheia
 * na página (classe adicionada no PHP quando o full-width está ligado em
 * qualquer dispositivo). */
html:has(.hamo-gm--has-fw) {
	overflow-x: clip;
}

/* Largura máxima e alinhamento do CONTEÚDO (grid interno), independentes do
 * modo tela cheia do wrapper externo. */
.hamo-gm-align-left .hamo-gm__grid { margin-left: 0; margin-right: auto; }
.hamo-gm-align-center .hamo-gm__grid { margin-left: auto; margin-right: auto; }
.hamo-gm-align-right .hamo-gm__grid { margin-left: auto; margin-right: 0; }

/* -------------------------------------------------------------------------
 * MODO GRID — grade uniforme
 * --------------------------------------------------------------------- */
.hamo-gm--grid .hamo-gm__grid {
	display: grid;
	grid-template-columns: repeat(var(--hamo-gm-cols, 3), minmax(0, 1fr));
	gap: var(--hamo-gm-gap, 12px);
}

.hamo-gm--grid .hamo-gm__img {
	aspect-ratio: var(--hamo-gm-ratio, 1 / 1);
	/* Se uma altura fixa for definida, ela vence a proporção (largura e
	 * altura explícitas => aspect-ratio é ignorado). Sem valor = usa a
	 * proporção. */
	height: var(--hamo-gm-img-h, 100%);
}

/* -------------------------------------------------------------------------
 * MODO MASONRY — colunas com alturas naturais (Pinterest)
 * --------------------------------------------------------------------- */
.hamo-gm--masonry .hamo-gm__grid {
	column-count: var(--hamo-gm-cols, 3);
	column-gap: var(--hamo-gm-gap, 12px);
}

.hamo-gm--masonry .hamo-gm__item {
	display: block;
	width: 100%;
	break-inside: avoid;
	margin-bottom: var(--hamo-gm-gap, 12px);
}

.hamo-gm--masonry .hamo-gm__img {
	aspect-ratio: auto;
	height: auto;
}

/* -------------------------------------------------------------------------
 * MODO BENTO — tiles de tamanhos variados
 * --------------------------------------------------------------------- */
.hamo-gm--bento .hamo-gm__grid {
	display: grid;
	grid-template-columns: repeat(var(--hamo-gm-cols, 4), minmax(0, 1fr));
	grid-auto-rows: var(--hamo-gm-row, 120px);
	grid-auto-flow: dense;
	gap: var(--hamo-gm-gap, 12px);
}

.hamo-gm--bento .hamo-gm__img {
	height: 100%;
}

/* Spans dos tiles — aplicados por classe conforme o padrão escolhido. */
.hamo-gm__item--w2 { grid-column: span 2; }
.hamo-gm__item--w3 { grid-column: span 3; }
.hamo-gm__item--h2 { grid-row: span 2; }
.hamo-gm__item--h3 { grid-row: span 3; }

/* -------------------------------------------------------------------------
 * ITEM / IMAGEM (comum a todos os modos)
 * --------------------------------------------------------------------- */
.hamo-gm__item {
	position: relative;
	overflow: hidden;
	border-radius: var(--hamo-gm-radius, 8px);
	line-height: 0;
}

.hamo-gm__link {
	display: block;
	width: 100%;
	height: 100%;
	text-decoration: none;
}

.hamo-gm__img {
	display: block;
	width: 100%;
	object-fit: cover;
	transition:
		transform var(--hamo-gm-speed, 0.45s) ease,
		filter var(--hamo-gm-speed, 0.45s) ease;
}

/* -------------------------------------------------------------------------
 * HOVER — efeitos selecionáveis (classe modificadora na raiz)
 * --------------------------------------------------------------------- */
.hamo-gm-hover-zoom .hamo-gm__item:hover .hamo-gm__img {
	transform: scale(var(--hamo-gm-hover-scale, 1.08));
}

.hamo-gm-hover-zoom-out .hamo-gm__img {
	transform: scale(var(--hamo-gm-hover-scale, 1.12));
}
.hamo-gm-hover-zoom-out .hamo-gm__item:hover .hamo-gm__img {
	transform: scale(1);
}

.hamo-gm-hover-grayscale .hamo-gm__img {
	filter: grayscale(1);
}
.hamo-gm-hover-grayscale .hamo-gm__item:hover .hamo-gm__img {
	filter: grayscale(0);
}

.hamo-gm-hover-lift .hamo-gm__item {
	transition:
		transform var(--hamo-gm-speed, 0.45s) ease,
		box-shadow var(--hamo-gm-speed, 0.45s) ease;
}
.hamo-gm-hover-lift .hamo-gm__item:hover {
	transform: translateY(-6px);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
}

.hamo-gm-hover-blur .hamo-gm__item:hover .hamo-gm__img:not(:only-child) {
	filter: blur(2px) brightness(0.75);
}

/* -------------------------------------------------------------------------
 * OVERLAY + LEGENDA (aparece no hover)
 * --------------------------------------------------------------------- */
.hamo-gm__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: var(--hamo-gm-caption-justify, flex-end);
	align-items: flex-start;
	gap: 4px;
	padding: var(--hamo-gm-caption-pad, 14px);
	background: var(--hamo-gm-overlay, linear-gradient(to top, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0)));
	opacity: 0;
	transition: opacity var(--hamo-gm-speed, 0.45s) ease;
	pointer-events: none;
	line-height: 1.3;
}

.hamo-gm__item:hover .hamo-gm__overlay {
	opacity: 1;
}

.hamo-gm__caption-title {
	margin: 0;
	color: var(--hamo-gm-caption-color, #ffffff);
	font-size: var(--hamo-gm-caption-size, 15px);
	font-weight: 600;
}

.hamo-gm__caption-text {
	margin: 0;
	color: var(--hamo-gm-caption-color, #ffffff);
	font-size: calc(var(--hamo-gm-caption-size, 15px) * 0.82);
	opacity: 0.85;
}

/* -------------------------------------------------------------------------
 * RESPONSIVO — encolhe colunas e neutraliza spans do bento no mobile
 * --------------------------------------------------------------------- */
@media (max-width: 767px) {
	.hamo-gm--bento .hamo-gm__item--w2,
	.hamo-gm--bento .hamo-gm__item--w3 {
		grid-column: span 1;
	}
	.hamo-gm--bento .hamo-gm__item--h3 {
		grid-row: span 2;
	}
}

/* Placeholder no editor quando não há imagens. */
.hamo-gm__placeholder {
	padding: 24px;
	text-align: center;
	opacity: 0.6;
	border: 1px dashed currentColor;
	border-radius: 8px;
}

@media (prefers-reduced-motion: reduce) {
	.hamo-gm__img,
	.hamo-gm-hover-lift .hamo-gm__item {
		transition: none;
	}
}