/* ============================================================================
   Blog — Figma node 7803:2787 (frame "Desktop", 1440 × 6532,5)
   ----------------------------------------------------------------------------
   Prefixo .blg-. Serve home.php (página de posts), archive.php e search.php:
   as três reusam o mesmo grid de cards, porque no Figma o card é um só.

   Todos os CSS de página são enfileirados globalmente, então .blg- não pode
   colidir com .svc- / .sbr- / .cmp- / .dyn- / .con- / .obs-.
   ========================================================================== */

/* Todo texto de card no Figma tem maxLines: 2 e truncation: ENDING —
   conferido nos nós 8021:1536, 8021:1537, 8018:1784, 8020:1534 e 8018:1794.
   Sem isso, um título longo empurra o card e desalinha a linha inteira. */
.blg-clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* Tipografia comum às seções ------------------------------------------------ */
.blg-h1, .blg-h2, .blg-h3 {
  margin: 0;
  font-family: 'Trebuchet MS', sans-serif;
  font-weight: 700;
  color: #0c111d;
}
.blg-h1 { font-size: 52px; line-height: 1.2; }   /* Heading/H1 */
.blg-h2 { font-size: 32px; line-height: 1.3; }   /* Heading/H2 */
.blg-h3 { font-size: 24px; line-height: 1.4; }   /* Heading/H3 */

/* O título vira link dentro dos cards. Quem fazia ele herdar a cor era o
   preflight do Tailwind (`a { color: inherit }`) — um seletor por ELEMENTO,
   justamente o tipo que o "Remove Unused CSS" do WP Rocket descarta. Se
   caísse, todo título de card voltava ao azul sublinhado do navegador.
   Declarado aqui por classe, não depende mais disso. */
.blg-h1 a, .blg-h2 a, .blg-h3 a { color: inherit; text-decoration: none; }

.blg-desc {
  margin: 0;
  font-family: 'Trebuchet MS', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #4a5568;                                 /* Secondary/Darker */
}

/* "Saiba mais" 8021:1538 — hug, sem padding, só gap 8. */
.blg-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  align-self: flex-start;
  border-radius: 14px;
  font-family: 'Trebuchet MS', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  color: #004a8a;                                 /* Primary/Darker */
  text-decoration: none;
  transition: gap .2s cubic-bezier(.2,.7,.3,1), opacity .2s;
}
.blg-link img { display: block; width: 24px; height: 24px; flex-shrink: 0; }
.blg-link:hover { gap: 12px; opacity: .85; }

/* Imagem de card: o Figma põe #98A2B3 sob a foto, então um post sem imagem
   destacada continua com o bloco cinza em vez de buraco branco. */
.blg-img {
  display: block;
  width: 100%;
  object-fit: cover;
  border-radius: 14px;
  background: #98a2b3;
}

/* ── 1. HERO — node 7803:2788 (1440 × 80) ─────────────────────────────────── */

/* Aqui o header é o CLARO (componente 7320:3231), não o escuro das páginas
   internas. Como o #sticky-header só aparece após 10px de rolagem, o blog
   precisa deste header estático embutido — mesma solução das outras páginas. */
.blg-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #f5f9ff;
}
.blg-hero__header {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  padding: 16px var(--section-px) 0;
}
.blg-hero__header-inner {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: var(--content-w);
  padding-bottom: 16px;
}

/* ── 2. DESTAQUES — node 8018:1813 (1440 × 953,5) ─────────────────────────── */

/* fills = [PATTERN 7643:1010, #F5F9FF]. O pattern é o mesmo nó de sempre:
   elipse de 2×2px, #6B778C a 15% de opacidade, repetida a cada 16px. */
.blg-destaques {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
  padding: 120px var(--section-px);
  background-color: #f5f9ff;
  background-image: radial-gradient(circle, rgba(107, 119, 140, .15) 1px, transparent 1px);
  background-size: 16px 16px;
}
.blg-destaques__inner {
  display: flex;
  flex-direction: column;
  gap: 56px;
  width: 100%;
  max-width: var(--content-w);
}
/* Container 8018:1777 — coluna esquerda fixa em 696, direita ocupa o resto
   (1216 − 696 − 32 = 488). */
.blg-destaques__grid {
  display: grid;
  grid-template-columns: 696px minmax(0, 1fr);
  gap: 32px;
  align-items: stretch;
}

/* Main article 8018:1779 — anotação de Dev Mode em 8018:1778:
   "Conteúdo em destaque". */
.blg-dest-main { display: flex; flex-direction: column; gap: 16px; }
.blg-dest-main__img { height: 391.5px; }

/* Hover dos destaques — o mesmo do card do grid (.blg-card), que já tinha:
   a imagem sobe 4px e o título vira azul. Sem isso, a coluna de destaque e os
   três artigos ao lado eram a única parte clicável do blog sem retorno visual. */
.blg-dest-main__img,
.blg-dest-main .blg-h2,
.blg-small__img > *,
.blg-small .blg-h3 {
  transition: transform .3s cubic-bezier(.2,.7,.3,1), color .2s;
}
.blg-dest-main:hover .blg-dest-main__img { transform: translateY(-4px); }
.blg-dest-main:hover .blg-h2 { color: #006fcc; }
/* No artigo pequeno quem sobe é a <img> dentro do <a>, não o <a>: ele tem
   altura fixa de 137,25 e mover a caixa deslocaria o texto ao lado. */
.blg-small:hover .blg-small__img > * { transform: translateY(-4px); }
.blg-small:hover .blg-h3 { color: #006fcc; }

/* Column 8018:1786 — três artigos pequenos, gap 24. */
.blg-dest-side { display: flex; flex-direction: column; gap: 24px; }
.blg-small {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 32px;
  flex: 1 1 0;
}
.blg-small__row { display: flex; align-items: stretch; }
/* `flex: 0 0 50%` em vez de `flex: 1 1 0`: com box-sizing border-box, a base
   zero é elevada ao padding do filho, e a coluna com padding-left 16 sairia
   16px mais larga que a imagem. Com 50% fixo dá 244 + 244 = 488, e o texto
   fica com 228 — exatamente o que o Figma reporta no nó 8018:1794. */
.blg-small__img,
.blg-small__info { flex: 0 0 50%; min-width: 0; box-sizing: border-box; }
/* O <a> é quem recebe a altura; a <img> (ou o placeholder cinza) preenche. */
.blg-small__img {
  display: block;
  height: 137.25px;
  overflow: hidden;
  border-radius: 14px;
}
.blg-small__img > * {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 14px;
  background: #98a2b3;
}
.blg-small__info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  padding-left: 16px;
}

/* ── 3. CONTEÚDOS — node 8020:1571 (1440 × 1729) ──────────────────────────── */

.blg-conteudos {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 56px;
  padding: 120px var(--section-px);
  background: #fff;
}
.blg-conteudos__inner {
  display: flex;
  flex-direction: column;
  gap: 56px;
  width: 100%;
  max-width: var(--content-w);
}
.blg-conteudos__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
/* O H2 desta seção usa #1F1F1F, não o #0C111D das outras (nó 8020:1573). */
.blg-h2--conteudos { color: #1f1f1f; }

/* Filtros 8020:1574 — busca, categoria e ordenação. */
.blg-filtros { display: flex; align-items: center; gap: 16px; }
/* O stroke do Figma é INTERNO: uma `border` de 1px somaria 2px à altura e o
   campo sairia com 55 em vez de 53, empurrando a linha inteira do cabeçalho.
   `box-shadow: inset` desenha a mesma linha sem ocupar caixa. */
.blg-campo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1);
  border-radius: 14px;
  box-sizing: border-box;
  font-family: 'Trebuchet MS', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #0c111d;
  cursor: pointer;
  transition: box-shadow .2s;
}
.blg-campo:hover, .blg-campo:focus-within { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .3); }
.blg-campo--busca { width: 240px; }
.blg-campo img, .blg-campo svg { display: block; flex-shrink: 0; }
/* O <input> e o <select> herdam a caixa do wrapper — sem borda, sem outline,
   senão viram duas caixas empilhadas. */
.blg-campo input,
.blg-campo select {
  flex: 1 1 0;
  min-width: 0;
  border: 0;
  outline: 0;
  padding: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  cursor: inherit;
  appearance: none;
  -webkit-appearance: none;
}
.blg-campo input::placeholder { color: #0c111d; opacity: 1; }

/* ── Select estilizado ────────────────────────────────────────────────────── */
/* O <select> nativo abre a lista do sistema operacional, que não tem nada a ver
   com o resto do site. Ele continua no DOM (é o que o formulário envia sem JS),
   só que escondido, enquanto um botão + painel assumem a parte visual. */
.blg-campo--sel { position: relative; }
.blg-campo--montado { padding: 0; }
.blg-sel__nativo {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  border: 0;
}
.blg-sel__btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 16px 24px;
  background: none;
  border: 0;
  border-radius: 14px;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.blg-sel__btn img { display: block; flex-shrink: 0; }
.blg-sel__valor { flex: 1 1 auto; white-space: nowrap; }
/* O chevron é o último ícone; gira quando abre. */
.blg-sel__btn img:last-child { transition: transform .2s cubic-bezier(.2,.7,.3,1); }
.blg-sel__btn[aria-expanded="true"] img:last-child { transform: rotate(180deg); }

/* Filtro em uso ganha destaque — senão não dá para saber que a lista está
   restrita sem abrir o dropdown. */
.blg-campo--ativo {
  box-shadow: inset 0 0 0 1px #006fcc;
  color: #006fcc;
}

.blg-sel__painel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 40;
  min-width: 100%;
  max-height: 320px;
  overflow-y: auto;
  padding: 8px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, .08), 0 0 0 1px rgba(0, 0, 0, .04);
}
.blg-sel__opcao {
  display: block;
  width: 100%;
  padding: 10px 14px;
  background: none;
  border: 0;
  border-radius: 10px;
  font-family: 'Trebuchet MS', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #0c111d;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s;
}
.blg-sel__opcao:hover,
.blg-sel__opcao:focus-visible { background: #f5f9ff; outline: none; }
.blg-sel__opcao[aria-selected="true"] { background: #e6f4ff; font-weight: 700; color: #004a8a; }

/* ── Contagem viva e estado de carregamento ──────────────────────────────── */
/* A contagem viva não existe no Figma (8020:1571 não tem esse elemento), então
   ela é um acréscimo assumido. As margens negativas a encaixam no intervalo
   que já havia entre o cabeçalho e o grid, para a seção não crescer os 45px
   que dois gaps de 56 somariam. */
.blg-status {
  margin: -38px 0 -20px;
  font-family: 'DM Mono', monospace;
  font-size: 14px;
  line-height: 1.5;
  color: #6b778c;
}
/* Enquanto a resposta não chega, o grid esmaece em vez de sumir — trocar por
   um spinner faria a página pular de altura a cada tecla digitada. */
.blg-carregando [data-filtro-grid] {
  opacity: .45;
  transition: opacity .15s;
  pointer-events: none;
}

/* Grid 8020:1588 — 3 × 384 + 2 × 32 = 1216. */
.blg-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}
.blg-card { display: flex; flex-direction: column; gap: 24px; }
.blg-card__img { height: 216px; }
.blg-card__info { display: flex; flex-direction: column; gap: 16px; }
.blg-card__texto { display: flex; flex-direction: column; gap: 8px; }
.blg-card__img,
.blg-card .blg-h3 { transition: transform .3s cubic-bezier(.2,.7,.3,1), color .2s; }
.blg-card:hover .blg-card__img { transform: translateY(-4px); }
/* `:not(.blg-mat)` — o card de material usa a mesma classe base, mas vive
   sobre #004A8A na faixa do blog, onde este azul dá 1,77:1 e o título some.
   Escopar aqui é melhor que sobrescrever depois: se a regra do material for
   descartada por algum otimizador, o título fica branco, não some. */
.blg-card:not(.blg-mat):hover .blg-h3 { color: #006fcc; }

/* Paginação 8020:1688 — quadrados de 48, ativo em #006FCC. */
.blg-pag { display: flex; align-items: center; justify-content: center; gap: 16px; }
.blg-pag .page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 8px 12px;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .1);
  border-radius: 14px;
  font-family: 'Trebuchet MS', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #0c111d;
  text-decoration: none;
  transition: background .2s, color .2s, border-color .2s;
}
.blg-pag .page-numbers:hover { border-color: #006fcc; color: #006fcc; }
.blg-pag .page-numbers.current {
  background: #006fcc;
  border-color: #006fcc;
  color: #fff;
}
.blg-pag .page-numbers.dots { border-color: transparent; }

/* ── 4–7. BLOCOS DE CATEGORIA — 8018:1814, 8021:1665, 8021:1753, 8022:1530 ── */

.blg-cat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
  padding: 120px var(--section-px);
}
.blg-cat--claro { background: #f5f9ff; }
.blg-cat--azul  { background: #004a8a; }          /* Primary/Darker */
.blg-cat__inner {
  display: flex;
  flex-direction: column;
  gap: 56px;
  width: 100%;
  max-width: var(--content-w);
}
/* align-items: flex-end — o "Ver todos" alinha pela base do título. */
.blg-cat__topo {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
.blg-cat__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  align-items: center;
}
/* No bloco azul tudo vira branco. */
.blg-cat--azul .blg-h2,
.blg-cat--azul .blg-h3,
.blg-cat--azul .blg-link,
.blg-cat--azul .blg-mat__tipo { color: #fff; }

/* Capa ilustrada 8022:1574 — sem foto: dois retângulos #E6F4FF encostados na
   base, sobre #006FCC, com o pattern por cima a 5%. */
.blg-mat__capa {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 216px;
  background: #006fcc;
  border-radius: 14px;
  overflow: hidden;
}
.blg-mat__pattern {
  position: absolute;
  left: 0;
  top: .5px;
  width: 384px;
  height: 216px;
  opacity: .05;
  pointer-events: none;
}
/* strokeAlign OUTSIDE no Figma — content-box mantém 74×98 e 221×167 de miolo,
   com os 2px sobrando para fora, como no design. */
.blg-mat__shape {
  position: relative;
  z-index: 1;
  box-sizing: content-box;
  background: #e6f4ff;                            /* Primary/Lighter */
  border: 2px solid rgba(255, 255, 255, .25);
  border-radius: 8px 8px 0 0;
  transition: transform .35s cubic-bezier(.2,.7,.3,1);
}
.blg-mat__shape--a {
  width: 74px;
  height: 98px;
  box-shadow: 1px 2px 5px rgba(0,0,0,.1), 4px 7px 8px rgba(0,0,0,.09),
              9px 17px 11px rgba(0,0,0,.05), 16px 30px 14px rgba(0,0,0,.01);
}
/* gap: -30px do Figma não existe em CSS — vira margem negativa. */
.blg-mat__shape--b { width: 221px; height: 167px; margin-left: -30px; }
.blg-mat:hover .blg-mat__shape--a { transform: translateY(-6px) rotate(-3deg); }
.blg-mat:hover .blg-mat__shape--b { transform: translateY(-6px); }

/* Foto no lugar da arte, quando o material tem imagem destaque. A arte dos
   dois retângulos continua sendo o fallback — ver material-card.php. */
.blg-mat__capa--foto { display: block; background: #006fcc; }
.blg-mat__foto {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s cubic-bezier(.2,.7,.3,1);
}
.blg-mat:hover .blg-mat__foto { transform: scale(1.04); }

/* Era `#fff` fixo, o que servia só dentro da faixa azul: no arquivo "Ver
   todos", que tem fundo claro, o rótulo ficava branco sobre branco. O branco
   agora vem da regra de contexto `.blg-cat--azul .blg-mat__tipo`. */
.blg-mat__tipo {
  margin: 0;
  font-family: 'Trebuchet MS', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #006fcc;
}
/* "Baixar agora" não é negrito no Figma, ao contrário de "Saiba mais". */
.blg-link--download { font-weight: 400; }

/* ── Hover do card de material ──────────────────────────────────────────
   O hover dos outros cards escurece o título para #006FCC. Sobre o #004A8A da
   faixa do blog isso dá 1,77:1 — abaixo de qualquer mínimo, e o título sumia
   ao passar o mouse. Num fundo escuro não existe "mais claro que branco",
   então aqui o retorno do hover não é cor: é sublinhado, que funciona igual
   nos dois fundos (faixa azul e listagem clara) e não depende de contraste.

   Somam-se a capa clareando e os retângulos subindo 6px, que já eram do
   design — três sinais, nenhum deles dependente de cor de texto. */
.blg-mat:hover .blg-h3,
.blg-mat:hover .blg-h3 a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.blg-mat__capa { transition: background-color .25s; }
.blg-mat:hover .blg-mat__capa { background-color: #1a82db; }

/* ── Cabeçalho dos arquivos (categoria, tag, autor, data, busca) ─────────── */
/* Não há tela desenhada para arquivos no Figma; esta faixa repete a receita da
   seção de destaques (8018:1813) para eles não destoarem do resto. */
.blg-cab {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 120px var(--section-px);
  background-color: #f5f9ff;
  background-image: radial-gradient(circle, rgba(107, 119, 140, .15) 1px, transparent 1px);
  background-size: 16px 16px;
}
.blg-cab__inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: var(--content-w);
}
.blg-cab__tag {
  margin: 0;
  font-family: 'DM Mono', monospace;
  font-size: 14px;
  line-height: 1.5;
  color: #004a8a;
}
.blg-cab__linha { display: flex; align-items: center; gap: 24px; }
.blg-cab__avatar { display: block; flex-shrink: 0; line-height: 0; }
.blg-cab__avatar img {
  display: block;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  background: #e6f4ff;
}
.blg-cab__titulo {
  margin: 0;
  font-family: 'Trebuchet MS', sans-serif;
  font-weight: 700;
  font-size: 52px;
  line-height: 1.2;
  color: #0c111d;
}
.blg-cab__desc {
  max-width: 720px;
  margin: 0;
  font-family: 'Trebuchet MS', sans-serif;
  font-size: 18px;
  line-height: 1.5;
  color: #4a5568;
}

/* ── Campo de busca na faixa do termo ─────────────────────────────────────── */
/* A busca vive dentro do `.blg-cab` (a mesma faixa dos arquivos do blog), não
   num hero próprio: o assunto da página é o RESULTADO, e um hero centralizado
   de 544px empurrava o primeiro card para fora da primeira tela. */
.bsc-cab .blg-cab__inner { gap: 20px; }

/* Título à esquerda, campo à direita, na mesma linha — a diferença desta tela
   para a de categoria. `align-items: end` alinha o campo pela base do H1, que
   é bem mais alto; centralizado ele flutuava no meio do título. */
.bsc-cab__linha {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  width: 100%;
}
/* O H1 fica com a largura do texto e cede o resto; sem `min-width: 0` um termo
   longo empurraria o campo para fora do container. */
.bsc-cab__titulo { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }

.bsc-campo {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
  width: 100%;
  max-width: 360px;
  margin-top: 4px;
  padding: 14px 20px;
  background: #fff;
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1);
  box-sizing: border-box;
  transition: box-shadow .2s;
}
.bsc-campo:focus-within { box-shadow: inset 0 0 0 1px #006fcc, 0 4px 18px rgba(0, 111, 204, .12); }
.bsc-campo img { display: block; flex-shrink: 0; }
.bsc-campo input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: 0;
  padding: 0;
  background: transparent;
  font-family: 'Trebuchet MS', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #0c111d;
}
.bsc-campo input[type="search"]::placeholder { color: #8b99ad; }
/* ── Estado vazio ─────────────────────────────────────────────────────────── */
.blg-vazio {
  grid-column: 1 / -1;
  margin: 0;
  font-family: 'Trebuchet MS', sans-serif;
  font-size: 18px;
  line-height: 1.5;
  color: #4a5568;
}