/*
 * Números (RF14–RF17).
 * Pattern: patterns/numeros.php
 */

.almar-numeros {
	background-color: var(--wp--preset--color--fundo-principal);
}

/* O core injeta padding em .has-background; aqui a foto precisa colar na borda esquerda. */
.almar-numeros.wp-block-group.has-background {
	padding: 0;
}

.almar-numeros .wp-block-columns {
	gap: 0;
	align-items: stretch;
}

.almar-numeros__foto {
	position: relative;
	min-height: 420px;
	overflow: hidden;
}

.almar-numeros__foto .wp-block-image,
.almar-numeros__foto figure {
	margin: 0;
	position: absolute;
	inset: 0;
}

.almar-numeros__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.almar-numeros .almar-numeros__conteudo {
	padding-block: 56px;
	padding-inline: var(--almar-margem-lateral);
	display: flex;
	align-items: center;
}

/*
 * 34rem, não os 28rem (max-w-md) do design: com 448px as três colunas ficam com
 * 139px e "+1.000" a 48px quebra em duas linhas. RF16 pede que trocar o número
 * não mexa no layout.
 */
.almar-numeros__interno {
	width: 100%;
	max-width: 34rem;
}

.almar-numeros .almar-numeros__grade {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	width: 100%;
}

/* Especificidade acima de block-styles.css (carregado depois) para alinhar à esquerda. */
.almar-numeros .wp-block-separator.is-style-almar-ondas-claro {
	margin-inline: 0;
	background-position: left center;
}

.almar-numeros__valor {
	line-height: 1;
	font-weight: 700;
	color: var(--wp--preset--color--teal-destaque);
}

.almar-numeros__rotulo {
	color: rgb(244 241 236 / 0.8);
}

@media (max-width: 1280px) {
	.almar-numeros__foto {
		min-height: 320px;
	}

	.almar-numeros .almar-numeros__conteudo {
		padding-block: 48px;
	}
}

@media (min-width: 2080px) {
	.almar-numeros__foto {
		min-height: 520px;
	}

	.almar-numeros .almar-numeros__conteudo {
		padding-block: 88px;
	}

	.almar-numeros .wp-block-separator.is-style-almar-ondas-claro {
		margin-bottom: 40px !important;
	}
}