/* Granbel Missão e Visão
 * Paleta: #45444A  #3B7A75  #013F3E  #BDDBD4  #89AFA7  |  Fonte: Montserrat
 *
 * Em repouso: caixa #89AFA7, título e ícone #013F3E, texto branco.
 * Com o mouse: a caixa cresce, vira #013F3E, o título e o ícone ficam #BDDBD4 e o texto continua branco.
 * Tamanhos de letra: título 22px e texto 14px (iguais ao texto da página). Para ajustar: mude as variáveis --gmv-* abaixo.
 */

.granbel-mv {
	--gmv-repouso: #89AFA7;
	--gmv-hover: #013F3E;
	--gmv-titulo: #013F3E;
	--gmv-titulo-hover: #BDDBD4;
	--gmv-texto: #fff;
	--gmv-zoom: 1.02;                          /* quanto a caixa cresce com o mouse */
	--gmv-raio: 50px;
	--gmv-icone: 54px;                         /* altura do ícone */
	--gmv-fs-titulo: 22px;                     /* mesmo tamanho do título do texto da página */
	--gmv-fs-texto: 14px;                      /* mesmo tamanho do texto da página */

	display: flex;
	flex-direction: column;
	gap: 36px;
	box-sizing: border-box;
	width: 100%;
	max-width: 1340px;                         /* same width as the page text ("Largura ampla") */
	margin: 0 auto;
	padding: 24px 0;                           /* no side padding: the box lines up with the text above it */
	font-family: 'Montserrat', sans-serif;
}

.granbel-mv *,
.granbel-mv *::before,
.granbel-mv *::after {
	box-sizing: border-box;
}

.granbel-mv .granbel-mv__card {
	display: grid;
	grid-template-columns: 120px minmax(0, 1fr);
	align-items: center;
	column-gap: 24px;
	min-height: 150px;
	margin: 0;
	padding: 28px 44px 28px 32px;
	background: var(--gmv-repouso);
	border-radius: var(--gmv-raio);
	transition: transform .3s ease, background-color .3s ease, box-shadow .3s ease;
}

.granbel-mv .granbel-mv__lado {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	color: var(--gmv-titulo);
	transition: color .3s ease;
}

.granbel-mv .granbel-mv__titulo {
	margin: 0;
	padding: 0;
	border: 0;
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: var(--gmv-fs-titulo) !important;   /* !important: o tema não pode sobrescrever o tamanho */
	line-height: 1.2 !important;
	color: inherit;
	text-align: center;
	text-transform: none;
	letter-spacing: normal;
}

.granbel-mv .granbel-mv__icone {
	display: block;
	width: auto;
	height: var(--gmv-icone);
	max-width: none;
	color: inherit;
}

.granbel-mv .granbel-mv__texto {
	margin: 0;
	padding: 0;
	font-weight: 500;
	font-size: var(--gmv-fs-texto) !important;
	line-height: 1.5 !important;
	color: var(--gmv-texto);
}

/* Efeito do mouse */
@media (hover: hover) {
	.granbel-mv .granbel-mv__card:hover {
		position: relative;
		z-index: 2;
		transform: scale(var(--gmv-zoom));
		background: var(--gmv-hover);
		box-shadow: 0 16px 34px rgba(1, 63, 62, .28);
	}
	.granbel-mv .granbel-mv__card:hover .granbel-mv__lado {
		color: var(--gmv-titulo-hover);
	}
}

/* Tablet e celular */
@media (max-width: 760px) {
	.granbel-mv {
		--gmv-raio: 32px;
	}
	.granbel-mv .granbel-mv__card {
		grid-template-columns: 1fr;
		row-gap: 14px;
		padding: 24px 22px;
	}
	.granbel-mv .granbel-mv__lado {
		flex-direction: row;
		justify-content: center;
		gap: 16px;
	}
	.granbel-mv .granbel-mv__icone {
		height: 40px;
	}
	.granbel-mv .granbel-mv__texto {
		text-align: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.granbel-mv .granbel-mv__card,
	.granbel-mv .granbel-mv__lado {
		transition: none;
	}
}

/* ------------------------------------------------------------------
 * Classe para qualquer bloco do editor: "granbel-card-efeito"
 * No editor: selecione o bloco (Grupo, Colunas...) > Avançado > "Classe(s) CSS adicional(is)" > granbel-card-efeito
 * O bloco cresce e vira #013F3E; títulos (h1 a h6) ficam #BDDBD4; o resto do texto fica branco.
 * ------------------------------------------------------------------ */
.granbel-card-efeito {
	transition: transform .3s ease, background-color .3s ease, box-shadow .3s ease;
}

@media (hover: hover) {
	.granbel-card-efeito:hover {
		position: relative;
		z-index: 2;
		transform: scale(1.02);
		background-color: #013F3E !important;
		box-shadow: 0 16px 34px rgba(1, 63, 62, .28);
	}
	.granbel-card-efeito:hover :is(h1, h2, h3, h4, h5, h6) {
		color: #BDDBD4 !important;
	}
	.granbel-card-efeito:hover :is(p, li, span, a) {
		color: #fff !important;
	}
}