/**
 * Banner (hero): espaço sob o cabeçalho transparente, botões e faixas de título no celular e no notebook.
 */

/* Hero com título centrado na área visível: o cabeçalho transparente cobre o topo
   da faixa (padding-top = base do menu), e o conjunto título e botões fica no
   meio do que sobra, com a mesma folga acima e abaixo. O deslocamento vertical
   por página (--garagem-banner-desloc) deixa de valer, porque servia ao
   posicionamento antigo, ancorado na faixa inteira. */
body.garagem-tem-banner .wp-block-garagem-banner {
	--garagem-hero-topo: 8rem;
	box-sizing: border-box;
	align-items: center;
	padding-top: var(--garagem-hero-topo);
}

body.garagem-tem-banner .wp-block-garagem-banner .garagem-blocks-banner__conteudo {
	padding-block: 1.5rem;
	inset-block-start: 0;
}

@media (min-width: 600px) and (max-width: 781px) {
	body.garagem-tem-banner .wp-block-garagem-banner {
		--garagem-hero-topo: 9.5rem;
	}
}

body .wp-block-garagem-banner .garagem-blocks-banner__botao.is-secundario {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 238px;
	min-height: 54px;
	border-width: 2px;
	font-weight: 600;
	letter-spacing: 0.1em;
}

/* Botão do hero branco com letra e borda na cor da página (feedback de 27/10/2026): verde em Tração,
   Diversidade e Comunidade (#008633, 4,7:1 sobre branco) e aqua em Startups e Destaques (#126e5b, 6,6:1);
   o hover inverte as cores. Criação, Inscreva-se e Home seguem com a letra azul-garagem. */
body:is(.garagem-pagina-tracao, .garagem-pagina-diversidade, .garagem-pagina-comunidade) {
	--garagem-hero-botao-cor: #008633;
}

body:is(.garagem-pagina-startups, .garagem-pagina-destaques) {
	--garagem-hero-botao-cor: #126e5b;
}

body:is(.garagem-pagina-tracao, .garagem-pagina-diversidade, .garagem-pagina-comunidade, .garagem-pagina-startups, .garagem-pagina-destaques)
	.wp-block-garagem-banner .garagem-blocks-banner__botao:is(.is-branco, .is-primario) {
	border: 2px solid var(--garagem-hero-botao-cor);
	background-color: var(--wp--preset--color--branco, #fff);
	color: var(--garagem-hero-botao-cor);
}

body:is(.garagem-pagina-tracao, .garagem-pagina-diversidade, .garagem-pagina-comunidade, .garagem-pagina-startups, .garagem-pagina-destaques)
	.wp-block-garagem-banner .garagem-blocks-banner__botao:is(.is-branco, .is-primario):is(:hover, :focus-visible) {
	background-color: var(--garagem-hero-botao-cor);
	color: var(--wp--preset--color--branco, #fff);
}

/* Botão do banner com largura medida do desktop (min-width por variável) nunca passa da coluna no celular; o rótulo quebra em linhas. */
@media (max-width: 767px) {
	.wp-block-garagem-banner.garagem-blocks-banner--titulo-simples .garagem-blocks-banner__botao {
		min-width: min(var(--garagem-banner-botao-largura, 20.9rem), 100%);
		white-space: normal;
	}
}

/* Faixas de título abaixo de 782px: entrelinha de 1,2 para o título de três linhas
   (Inscreva-se) não crescer. */
@media (max-width: 781px) {
	body.garagem-tem-banner .wp-block-garagem-banner.garagem-blocks-banner--titulo-simples .garagem-blocks-banner__heading {
		line-height: 1.2;
	}
}