/* ==========================================================================
   IEL Sergipe: CSS da listagem de noticias (blog.php, o filtro de categorias, category_filter(), o destaque,
   featured_post_card(), e o selo de categoria, category_badge(), em includes/components.php; carregado pela propria
   pagina, pela chave `'css' => 'blog.css'` do page_head()).

   Onda 7 da migracao do Tailwind (docs/tailwind/migracao-tailwind.md). Copiado de blog.php e dessas tres funcoes, sem
   apagar nada do `style.css` antigo. Os tokens (cor, fonte, espaco, raio, sombra), o miolo `.secao__interno`, o hero
   de pagina, o card de noticia (`.card-noticia`) e a paginacao (`.paginacao`) sao globais (onda 0) e vem do `styles.css`,
   que carrega antes. O texto do artigo (`single-blog.php`) e da onda 8 e nao entra aqui.

   Figma: Screen/Desktop/Blog-Listing (11843:2271, arte de 1600px), Tablet (12015:11309, 768px), Mobile (11981:7004, 390px).
   Breakpoints (min-width, mobile-first, em `em`): md = 48em, xl = 80em. O xl tambem mexe na margem lateral da secao,
   que e o token `--margem-x`.
   ========================================================================== */

/* ==========================================================================
   LISTAGEM - secao com o filtro, o destaque, a grade de noticias e a paginacao
   O espaco lateral e o `--margem-x` do site (1rem; 2.5rem em 48em; 11.875rem em 80em), o mesmo das outras secoes.
   ========================================================================== */

.listagem-blog {
  width: 100%;
  padding: var(--espaco-xl) var(--margem-x);
}

.listagem-blog__interno {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-xl);
}

/* Grade dos cards (news_card): uma coluna no celular, duas no tablet, quatro no desktop */
.listagem-blog__grade {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: var(--espaco-md);
}

/* Mensagem de lista vazia (o texto vem do CMS) */
.listagem-blog__vazio {
  text-align: center;
  font-size: var(--fonte-16);
  line-height: var(--entrelinha-16-24);
  color: var(--tinta-dark);
}

/* ==========================================================================
   FILTRO DE CATEGORIAS (category_filter) - trilha de pilulas
   No celular a lista nao cabe e rola na horizontal, sem barra, e vaza ate a borda da tela (margem negativa = a da secao);
   do tablet em diante quebra linha. A categoria ativa e a que o PHP marca com `aria-current="page"`.
   ========================================================================== */

.filtro-categorias {
  display: flex;
  align-items: center;
  gap: var(--espaco-xs);
  margin-inline: -1rem;
  padding-inline: var(--espaco-md);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.filtro-categorias::-webkit-scrollbar { display: none; }

.filtro-categorias__item {
  display: flex;
  height: 2.375rem;
  flex-shrink: 0;
  align-items: center;
  padding: var(--espaco-10) var(--espaco-20);
  border: 1px solid var(--tinta-lighter);
  border-radius: var(--raio-pill);
  background-color: var(--tinta-white);
  white-space: nowrap;
  font-size: var(--fonte-14);
  font-weight: 500;
  line-height: var(--entrelinha-14-20);
  color: var(--tinta-dark);
  transition-property: var(--transicao-cores);
  transition-duration: .15s;
  transition-timing-function: var(--suavizacao-padrao);
}
.filtro-categorias__item:hover {
  border-color: var(--iel-dark);
  color: var(--iel-dark);
}
/* Depois do :hover, de proposito: a ativa nao muda com o ponteiro (mesma especificidade, vale a ordem) */
.filtro-categorias__item[aria-current="page"] {
  border-color: transparent;
  background-color: var(--iel-deep);
  font-weight: 700;
  color: var(--tinta-white);
}

/* ==========================================================================
   SELO DE CATEGORIA (category_badge) - pilula clara; so o destaque o usa
   ========================================================================== */

.selo-categoria {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--espaco-micro) var(--espaco-sm);
  border-radius: var(--raio-pill);
  background-color: var(--iel-lightest);
  font-size: var(--fonte-12);
  font-weight: 500;
  line-height: var(--entrelinha-12-16);
  color: var(--iel-darkest);
}

/* ==========================================================================
   DESTAQUE (featured_post_card) - a noticia grande da pagina
   Imagem e texto empilhados ate o tablet e lado a lado no desktop (imagem com 60% da largura).
   Com o ponteiro sobre o cartao a imagem cresce um pouco (era `group-hover:scale-105`; o Tailwind so gerava :hover, sem foco).
   ========================================================================== */

.destaque-noticia {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--tinta-lightest);
  border-radius: var(--raio-lg);
  background-color: var(--tinta-white);
  box-shadow: var(--sombra-card);
}

.destaque-noticia__capa {
  display: block;
  height: 12.5rem;
  overflow: hidden;
}

/* A imagem enche a capa (200px no celular, 324px no tablet); os 450px (28.125rem) de altura sao so do desktop, onde a capa acompanha o
   texto (84c06f9). Com 450px em toda largura, o celular mostrava so o topo da foto. */
.destaque-noticia__imagem {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition-property: transform;
  transition-duration: .5s;
  transition-timing-function: var(--suavizacao-padrao);
}
.destaque-noticia:hover .destaque-noticia__imagem { transform: scale(1.05); }

.destaque-noticia__corpo {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--espaco-lg);
  padding: var(--espaco-lg);
}

.destaque-noticia__conteudo {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-md);
}

.destaque-noticia__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-md);
}

.destaque-noticia__data {
  white-space: nowrap;
  font-size: var(--fonte-12);
  font-weight: 500;
  line-height: var(--entrelinha-12-16);
  color: var(--tinta-dark);
}

.destaque-noticia__textos {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-md);
}

/* Titulo limitado a 4 linhas no celular e a 2 do tablet em diante */
.destaque-noticia__titulo {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--fonte-24);
  font-weight: 700;
  line-height: var(--entrelinha-24-36);
  color: var(--corporativo-pure);
}

.destaque-noticia__link-titulo:hover { text-decoration-line: underline; }

.destaque-noticia__resumo {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--fonte-16);
  font-weight: 400;
  line-height: var(--entrelinha-16-24);
  color: var(--tinta-dark);
}

.destaque-noticia__leia-mais {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: var(--espaco-xs);
  font-size: var(--fonte-16);
  font-weight: 700;
  line-height: var(--entrelinha-16-24);
  color: var(--iel-dark);
}
.destaque-noticia__leia-mais:hover { text-decoration-line: underline; }
/* O "Leia mais" estica a area clicavel por todo o card */
.destaque-noticia__leia-mais::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* ==========================================================================
   RESPONSIVO
   Sempre no fim do arquivo, em ordem crescente (48em, 80em); dentro de cada @media, na ordem dos blocos acima.
   ========================================================================== */

@media (min-width: 48em) {
  .listagem-blog { padding-block: var(--espaco-64); }
  .listagem-blog__interno { gap: var(--espaco-48); }
  .listagem-blog__grade {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--espaco-xl);
  }

  .filtro-categorias {
    flex-wrap: wrap;
    gap: var(--espaco-md);
    margin-inline: 0;
    padding-inline: 0;
  }

  .destaque-noticia__capa { height: 20.25rem; }
  .destaque-noticia__corpo { padding: var(--espaco-xl); }
  .destaque-noticia__conteudo { gap: var(--espaco-lg); }
  .destaque-noticia__titulo { -webkit-line-clamp: 2; }
}

@media (min-width: 80em) {
  .listagem-blog__grade { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .destaque-noticia {
    display: flex;
    align-items: stretch;
  }
  .destaque-noticia__capa {
    width: 60%;
    height: auto;
    flex-shrink: 0;
  }
  .destaque-noticia__imagem { height: 28.125rem; }
  .destaque-noticia__corpo {
    min-width: 0;
    flex: 1 1 0%;
  }
  .destaque-noticia__titulo {
    font-size: var(--fonte-40);
    line-height: var(--entrelinha-40-52);
  }
}