/* ==========================================================================
   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;
}

/* Botão de busca: o mesmo botão do site (Kit), electric com hover fundo. */
.bfd-blog-busca button {
	flex: 0 0 auto;
	padding: var( --bf-space-xs ) var( --bf-space-md );
	border: 0;
	border-radius: var( --bf-radius-xs );
	background: var( --bf-electric );
	color: var( --bf-white );
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	cursor: pointer;
}

.bfd-blog-busca button:hover {
	background: var( --bf-electric-deep );
}

/* --------------------------------------------------------------- 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;
}

/* Mesmo chip da página de Cases. */
.bfd-blog-filtro a {
	display: inline-flex;
	align-items: center;
	height: 36px;
	padding: 1px 14px 0;
	border: 1px solid var( --bf-line-strong );
	border-radius: var( --bf-radius-pill );
	color: var( --bf-mist );
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1;
	text-decoration: none;
	transition: border-color 0.18s ease, color 0.18s ease;
}

.bfd-blog-filtro a:hover {
	border-color: var( --bf-sky );
	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-sky );
	border-color: var( --bf-sky );
	color: var( --bf-ink );
}

/* ------------------------------------------------------------- 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 );
}