/**
 * Containers com ícone: cartões de altura igual e benefícios.
 */

/* 7.2: cartões de altura igual na linha. */
.wp-block-garagem-containers-icone {
	align-items: stretch;
}

/* Quadrado e prêmio têm proporção própria: height:100% travaria a altura na
   proporção e o texto maior vazaria do cartão. */
.wp-block-garagem-containers-icone .wp-block-garagem-container-icone:not(.garagem-container-icone--quadrado, .garagem-container-icone--premio) {
	height: 100%;
	box-sizing: border-box;
}

/* Porque participar (Home e Inscreva-se): premiação à esquerda e grade de cartões teal à direita.
   Borda e raio de container únicos, de base.css (feedback do cliente de 26 e 27/10/2026). */
.garagem-porque-participar__colunas {
	margin-block-start: 2rem;
	align-items: stretch;
}

.garagem-porque-participar__botoes {
	margin-block-start: 2.5rem;
}

.garagem-porque-participar__colunas .wp-block-garagem-container-icone {
	box-sizing: border-box;
	align-items: flex-start;
	padding: 1.5rem;
	border: var(--garagem-container-borda);
	border-radius: var(--garagem-container-borda-raio, 24px);
	text-align: start;
	overflow-wrap: anywhere;
}

.garagem-porque-participar__colunas .garagem-container-icone__texto {
	font-weight: 700;
}

/* Premiação: a coluna estica a altura da grade e o cartão a preenche, em azul-garagem.
   Seletor acima do (0,2,0) do estilo da variante premio no plugin. */
.garagem-porque-participar__colunas .wp-block-column:has(.garagem-container-icone--premio) {
	display: flex;
}

.garagem-porque-participar__colunas .wp-block-garagem-containers-icone:has(> .garagem-container-icone--premio) {
	flex: 1 1 auto;
	width: 100%;
}

.garagem-porque-participar__colunas .wp-block-garagem-container-icone.garagem-container-icone--premio {
	height: 100%;
	aspect-ratio: auto;
	justify-content: flex-start;
	border-width: var(--garagem-container-borda-largura, 4px);
	background-color: var(--wp--preset--color--azul-garagem);
	color: var(--wp--preset--color--branco);
}

.garagem-porque-participar__colunas .garagem-container-icone--premio .garagem-container-icone__texto-secundario {
	font-size: 1rem;
	font-weight: 400;
}

/* Colunas empilhadas até 899px (o core só empilha até 781px). */
@media (max-width: 899px) {
	.garagem-porque-participar__colunas {
		flex-wrap: wrap !important;
	}

	.garagem-porque-participar__colunas > .wp-block-column {
		flex-basis: 100% !important;
	}
}