/* Belo Horizonte (page-belo-horizonte.php). Composição da página; componentes globais em style.css, cores e tipos
   em tokens.css. Abertura em verde com o quarto de círculo salmão, como o card de BH da home; o endereço é o dado
   principal e vem em destaque tipográfico. */

/* ---------- comum às três páginas de modalidade e local (online, BH, Carmo) ----------
   Repetido em page-consulta-online-brasil.css, page-belo-horizonte.css e page-carmo-da-cachoeira.css: a etapa B2 não
   edita style.css. Se as três ficarem aprovadas, este bloco pode subir para style.css como componente global. */
.m-loc-hero { position: relative; overflow: hidden; }
.m-loc-hero .m-wrap {
	position: relative; z-index: 1; display: grid; grid-template-columns: 7fr 5fr; gap: 56px; align-items: center;
	min-height: 460px; padding-block: 72px 96px;
}
.m-loc-hero__copy { max-width: 40em; }
.m-loc-hero__id { margin: 0 0 18px; font-size: var(--tipo-legenda-tamanho); line-height: var(--tipo-legenda-entrelinha); }
.m-loc-hero h1 {
	margin: 0; font-weight: var(--tipo-titulo-peso); line-height: 1.06; letter-spacing: var(--tracking-titulo);
	font-size: clamp(36px, 4.4vw, calc(var(--tipo-display-tamanho) * 1.25));
}
.m-loc-hero__lead { margin: 24px 0 0; max-width: 34em; }
.m-loc-hero__cta { margin-top: 32px; }

.m-loc-duas { display: grid; grid-template-columns: 4fr 7fr; gap: 24px 64px; align-items: start; }
.m-loc-duas > .m-titulo { max-width: 12em; }
.m-loc-curta { padding-block: 72px; }
.m-loc .m-prosa a, .m-loc .m-cabeca a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.m-loc-forma-canto { right: 0; top: 0; width: 160px; height: 160px; }
.m-loc-faixa .m-cabeca { max-width: 36em; }

@media (max-width: 900px) {
	.m-loc-hero .m-wrap { grid-template-columns: 1fr; min-height: 0; gap: 40px; padding-block: 56px 72px; }
	.m-loc-duas { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
	.m-loc-curta { padding-block: 56px; }
	.m-loc-forma-canto { width: 96px; height: 96px; }
}

/* ---------- só desta página ---------- */
.m-loc-hero--bh { background: var(--cor-apoio-1); color: var(--cor-branco); }
.m-loc-hero--bh h1 { color: var(--cor-branco); }
.m-loc-bh__quarto { right: 0; bottom: 0; width: min(420px, 36vw); height: min(420px, 36vw); }
.m-loc-bh__lua { right: min(420px, 36vw); bottom: 0; width: 90px; height: 180px; }
.m-loc-endereco {
	display: flex; flex-direction: column; font-style: normal; color: var(--cor-contraste);
	font-weight: var(--tipo-display-peso); font-size: clamp(24px, 2.6vw, 34px); line-height: 1.3; letter-spacing: var(--tracking-titulo);
}
.m-loc-endereco strong { font-weight: var(--tipo-titulo-peso); }
.m-loc-endereco__info { margin-top: 32px; }
.m-loc-faixa__forma { right: 0; bottom: 0; width: 260px; height: 260px; }

@media (max-width: 900px) {
	.m-loc-hero--bh .m-wrap { padding-bottom: 200px; }
	.m-loc-bh__quarto { width: 180px; height: 180px; }
	.m-loc-bh__lua { right: 180px; width: 60px; height: 120px; }
}
@media (max-width: 640px) {
	.m-loc-hero--bh .m-wrap { padding-bottom: 170px; }
	.m-loc-bh__quarto { width: 140px; height: 140px; }
	.m-loc-bh__lua { right: 140px; width: 50px; height: 100px; }
	.m-loc-faixa__forma { width: 140px; height: 140px; }
	.m-loc--bh .m-loc-faixa .m-wrap { padding-bottom: 96px; }
}