/* ==========================================================================
   NOSSAS LIDERANÇAS — um perfil por pessoa
   ==========================================================================

   Nenhum valor novo: cor, espaço, tipo e raio saem dos tokens da Fase 1. O
   estilo é o que a seção já tinha (retrato circular em preto e branco sobre
   o navy da marca); o que muda é a geometria.

   GRADE E NÃO PORCENTAGEM À MÃO

   As colunas antigas tinham 25%, 17,582% e 15,897% de largura, ajustadas
   arrastando a alça até parecerem alinhadas com os rostos de uma imagem
   composta. Aqui são três colunas iguais que viram uma só nas telas
   estreitas, então o alinhamento é consequência da grade e não precisa de
   manutenção.

   O RETRATO MANDA NA ALTURA

   O círculo tem largura fixa e aspect-ratio 1, então ele nunca achata: era o
   que acontecia com a tira composta, que no celular virava 84px de altura
   com rostos de 28px.

   TRÊS COLUNAS SÓ ONDE CABE UM PARÁGRAFO

   Medido: em três colunas o tablet dava 216px por coluna e a descrição caía
   para 24 caracteres por linha. Linha curta demais cansa mais que linha
   longa, e era exatamente o defeito da versão antiga. Daí o perfil deitar a
   partir de 1024px, e no celular a descrição descer para a linha inteira.
   ========================================================================== */

.bfd-liderancas {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: var( --bf-space-lg );
	align-items: start;
}

.bfd-lider {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var( --bf-space-sm );
}

/* --------------------------------------------------------- o retrato ---- */

.bfd-liderancas .bfd-lider-foto {
	display: block;
	width: 100%;
	max-width: 232px;
	height: auto;
	aspect-ratio: 1;
	border-radius: var( --bf-radius-pill );

	/* O arquivo já é circular e transparente. O object-fit existe para o dia
	   em que alguém trocar por uma foto quadrada e o círculo continuar. */
	object-fit: cover;
}

/* ----------------------------------------------------------- o texto ---- */

/* Sem largura máxima aqui: a coluna já limita a linha em 348px, e o teto de
   34ch que havia antes estreitava a descrição para 293px sem necessidade,
   deixando 33 caracteres por linha onde cabiam 45. */
.bfd-lider-texto {
	display: flex;
	flex-direction: column;
	gap: var( --bf-space-3xs );
}

.bfd-lider-nome {
	margin: 0;
	font-size: 1.25rem;
	line-height: 1.2;
	font-weight: 600;
	color: var( --bf-white );
}

.bfd-lider-cargo {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.4;
	letter-spacing: 0.02em;
	color: var( --bf-blue-200 );
}

/* O espaço maior acima da descrição separa a identificação (nome e cargo) do
   texto corrido, que é o que a hierarquia pede: duas informações curtas e
   ligadas, depois um parágrafo. */
.bfd-lider-desc {
	margin: var( --bf-space-2xs ) 0 0;
	font-size: 1rem;
	line-height: 1.55;
	color: var( --bf-white );
	opacity: 0.86;
}

/* ---------------------------------------------------------- tablet ------ */

/* Uma pessoa por linha, retrato à esquerda e texto ao lado. Três colunas aqui
   deixavam 216px de largura para um parágrafo de 170 caracteres. */
@media ( max-width: 1024px ) {
	.bfd-liderancas {
		grid-template-columns: 1fr;
		gap: var( --bf-space-lg );
	}

	.bfd-lider {
		flex-direction: row;
		align-items: center;
		text-align: left;
		gap: var( --bf-space-sm );
	}

	.bfd-liderancas .bfd-lider-foto {
		flex: 0 0 auto;
		width: 180px;
		max-width: none;
	}

	/* Agora o limite é necessário: deitado, o texto pegaria a largura toda do
	   container e passaria de 90 caracteres por linha perto de 1024px.

	   O valor está em ch medido no corpo de 16px do container, e a descrição
	   renderiza em 15px, então 52ch aqui dão as 64 letras por linha que eu
	   quero de fato. Com 62ch a linha chegava a 77. */
	.bfd-lider-texto {
		max-width: 52ch;
	}

	.bfd-lider-nome {
		font-size: 1.125rem;
	}

	.bfd-lider-desc {
		font-size: 0.9375rem;
	}
}

/* ---------------------------------------------------------- celular ----- */

/* No celular o retrato deitado ainda funciona para o nome e o cargo, que são
   linhas curtas, mas não para a descrição: sobravam 242px, ou 28 caracteres
   por linha, e a 360px caía para 24.

   Então o retrato divide a primeira faixa com a identificação, e a descrição
   desce para a linha inteira. O display:contents é o que permite isso sem
   mexer no HTML: nome, cargo e descrição passam a ser itens desta grade, em
   vez de ficarem presos dentro da coluna de texto. */
@media ( max-width: 767px ) {
	.bfd-liderancas {
		gap: var( --bf-space-md );
	}

	.bfd-lider {
		display: grid;
		grid-template-columns: auto 1fr;
		grid-template-areas:
			'foto nome'
			'foto cargo'
			'desc desc';
		column-gap: var( --bf-space-sm );
		row-gap: var( --bf-space-3xs );
		align-items: start;
	}

	.bfd-lider-texto {
		display: contents;
	}

	.bfd-liderancas .bfd-lider-foto {
		grid-area: foto;
		width: 96px;
	}

	/* Nome e cargo encostam no meio da altura do retrato: o nome desce até a
	   base da primeira faixa, o cargo sobe até o topo da segunda. */
	.bfd-lider-nome {
		grid-area: nome;
		align-self: end;
		font-size: 1.0625rem;
	}

	/* O cargo mantém os 14px do desktop. Tinha caído para 13 aqui, e ficava
	   menor que a descrição de 15 logo abaixo: quem é a pessoa lia menor do
	   que o que a pessoa faz. Os 242px da coluna ao lado do retrato cabem o
	   cargo mais longo em duas linhas. */
	.bfd-lider-cargo {
		grid-area: cargo;
		align-self: start;
	}

	.bfd-lider-desc {
		grid-area: desc;
		font-size: 0.9375rem;
		line-height: 1.5;
	}
}