/* Carmo da Cachoeira (page-carmo-da-cachoeira.php). Composição da página; componentes globais em style.css, cores e
   tipos em tokens.css. Abertura em salmão com a meia-lua azul-marinho, como o card do Carmo na home. Texto em preto e
   título em contraste sobre o salmão (pares aprovados: 7,5:1 e 6,0:1). */

/* ---------- 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--carmo { background: var(--cor-composicao); color: var(--cor-preto); }
.m-loc-hero--carmo h1 { color: var(--cor-contraste); }
.m-loc-carmo__lua { right: 8%; bottom: 0; width: min(380px, 34vw); height: min(190px, 17vw); }
.m-loc-carmo__circulo { right: -70px; top: -70px; width: 240px; height: 240px; }
.m-loc-faixa__forma { right: 6%; bottom: 0; width: 260px; height: 130px; }

@media (max-width: 900px) {
	.m-loc-hero--carmo .m-wrap { padding-bottom: 170px; }
	.m-loc-carmo__lua { width: 240px; height: 120px; }
	.m-loc-carmo__circulo { width: 150px; height: 150px; right: -60px; top: -60px; }
}
@media (max-width: 640px) {
	.m-loc-hero--carmo .m-wrap { padding-bottom: 140px; }
	.m-loc-carmo__lua { width: 180px; height: 90px; }
	.m-loc-faixa__forma { width: 160px; height: 80px; }
	.m-loc-carmo__circulo { width: 110px; height: 110px; right: -55px; top: -55px; }
	.m-loc-hero--carmo .m-loc-hero__id { padding-right: 48px; }
	.m-loc--carmo .m-loc-faixa .m-wrap { padding-bottom: 72px; }
}