/* ==========================================================================
   BLOG — busca, filtro de assunto e listagem
   ==========================================================================

   Mesma regra dos cases: só tokens da Fase 1. Nenhuma cor, tamanho de
   letra, espaçamento ou raio novo nasce aqui.

   A listagem cai sobre o navy do site, como Cases. O contraste do texto
   secundário usa o azul claro do sistema, não um cinza avulso.
   ========================================================================== */

.bfd-blog {
	display: flex;
	flex-direction: column;
	gap: var( --bf-space-md );
}

/* ---------------------------------------------------------------- busca -- */

.bfd-blog-busca-rotulo {
	display: block;
	margin-block-end: var( --bf-space-2xs );
	font-family: var( --e-global-typography-caption-font-family ), sans-serif;
	font-size: var( --e-global-typography-caption-font-size );
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --bf-blue-200 );
}

.bfd-blog-busca-linha {
	display: flex;
	flex-wrap: wrap;
	gap: var( --bf-space-2xs );
}

.bfd-blog-busca input[type="search"] {
	flex: 1 1 16rem;
	min-width: 0;
	padding: var( --bf-space-2xs ) var( --bf-space-sm );
	border: 1px solid var( --bf-navy-500 );
	border-radius: var( --bf-radius-sm );
	background: var( --bf-white );
	color: var( --bf-navy-900 );
	font-family: inherit;
	font-size: 1rem;
}

.bfd-blog-busca button {
	flex: 0 0 auto;
	padding: var( --bf-space-2xs ) var( --bf-space-md );
	border: 1px solid var( --bf-blue-400 );
	border-radius: var( --bf-radius-sm );
	background: var( --bf-blue-400 );
	color: var( --bf-white );
	font-family: inherit;
	font-size: 1rem;
	cursor: pointer;
}

.bfd-blog-busca button:hover {
	background: var( --bf-navy-500 );
	border-color: var( --bf-navy-500 );
}

/* --------------------------------------------------------------- filtro -- */

.bfd-blog-filtro {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var( --bf-space-2xs ) var( --bf-space-sm );
}

.bfd-blog-filtro-rotulo {
	flex: 0 0 auto;
	min-width: 5.5rem;
	font-family: var( --e-global-typography-caption-font-family ), sans-serif;
	font-size: var( --e-global-typography-caption-font-size );
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --bf-blue-200 );
}

.bfd-blog-filtro ul {
	display: flex;
	flex-wrap: wrap;
	gap: var( --bf-space-2xs );
	margin: 0;
	padding: 0;
	list-style: none;
}

.bfd-blog-filtro a {
	display: inline-block;
	padding: var( --bf-space-3xs ) var( --bf-space-sm );
	border: 1px solid var( --bf-navy-500 );
	border-radius: var( --bf-radius-pill );
	color: var( --bf-blue-200 );
	font-size: 0.9375rem;
	text-decoration: none;
}

.bfd-blog-filtro a:hover {
	border-color: var( --bf-blue-400 );
	color: var( --bf-white );
}

/* O assunto atual é estado, não decoração: quem usa leitor de tela recebe
   pelo aria-current, e quem enxerga recebe pelo preenchimento. */
.bfd-blog-filtro a[aria-current] {
	background: var( --bf-blue-400 );
	border-color: var( --bf-blue-400 );
	color: var( --bf-white );
}

/* ------------------------------------------------------------- listagem -- */

.bfd-blog-contagem {
	margin: 0;
	color: var( --bf-blue-200 );
	font-size: 0.9375rem;
}

.bfd-blog-grade {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 17rem, 1fr ) );
	gap: var( --bf-space-md );
	margin: 0;
	padding: 0;
	list-style: none;
}

.bfd-blog-item {
	display: flex;
	flex-direction: column;
	gap: var( --bf-space-xs );
	background: var( --bf-navy-700 );
	border-radius: var( --bf-radius-md );
	overflow: hidden;
}

.bfd-blog-capa img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.bfd-blog-corpo {
	display: flex;
	flex-direction: column;
	gap: var( --bf-space-2xs );
	padding: var( --bf-space-sm );
}

.bfd-blog-cat {
	font-family: var( --e-global-typography-caption-font-family ), sans-serif;
	font-size: var( --e-global-typography-caption-font-size );
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --bf-blue-200 );
}

.bfd-blog-titulo {
	margin: 0;
	font-size: 1.25rem;
	line-height: 1.25;
}

.bfd-blog-titulo a {
	color: var( --bf-white );
	text-decoration: none;
}

.bfd-blog-titulo a:hover {
	text-decoration: underline;
}

.bfd-blog-resumo {
	margin: 0;
	color: var( --bf-blue-200 );
	font-size: 0.9375rem;
	line-height: 1.5;
}

.bfd-blog-data {
	color: var( --bf-blue-200 );
	font-size: 0.875rem;
}

/* --------------------------------------------------------- vazio e páginas -- */

.bfd-blog-vazio {
	margin: 0;
	padding: var( --bf-space-md );
	border: 1px dashed var( --bf-navy-500 );
	border-radius: var( --bf-radius-md );
	color: var( --bf-blue-200 );
}

.bfd-blog-vazio a {
	color: var( --bf-white );
}

.bfd-blog-paginas ul {
	display: flex;
	flex-wrap: wrap;
	gap: var( --bf-space-2xs );
	margin: 0;
	padding: 0;
	list-style: none;
}

.bfd-blog-paginas a,
.bfd-blog-paginas span {
	display: inline-block;
	padding: var( --bf-space-3xs ) var( --bf-space-sm );
	border: 1px solid var( --bf-navy-500 );
	border-radius: var( --bf-radius-sm );
	color: var( --bf-blue-200 );
	text-decoration: none;
}

.bfd-blog-paginas .current {
	background: var( --bf-blue-400 );
	border-color: var( --bf-blue-400 );
	color: var( --bf-white );
}

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

/* A folha nasceu sem trecho de celular, e os controles ficaram com a altura
   que o padding deu: 33px nas pílulas de assunto e 42px na busca. O alvo de
   toque do site é 44. Nada aqui muda desenho, só a área que responde ao
   dedo, e o rótulo do filtro passa a ocupar a própria linha, como já faz na
   página de Cases. */
@media ( max-width: 767px ) {
	.bfd-blog-filtro-rotulo {
		min-width: 100%;
	}

	.bfd-blog-filtro a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	.bfd-blog-busca input[type="search"],
	.bfd-blog-busca button {
		min-height: 44px;
	}

	/* O campo já ocupa a linha inteira e o botão caía embaixo dele, curto e
	   encostado à esquerda. Inteiro, lê como o passo seguinte do campo. */
	.bfd-blog-busca button {
		flex: 1 1 100%;
	}

	.bfd-blog-paginas a,
	.bfd-blog-paginas span {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}
}