/*
 * ══════════════════════════════════════════════════════════════════════════════════════
 * O BLOG — a mesma identidade do app, em formato de leitura.
 *
 * ── POR QUE ELE É UM CSS ESTÁTICO ───────────────────────────────────────────────────
 *
 * O blog é servido pelo Laravel, e a razão está registrada: buscador de IA não executa
 * JavaScript. Nada aqui depende de bundle — o `/tokens.css` (gerado de `brandTokens.js` e
 * verificado no build) entra antes e traz as `--revolu-*`.
 *
 * ── E POR QUE NENHUM HEX ────────────────────────────────────────────────────────────
 *
 * Até 11/08/2026 o `BlogController` tinha `#0059ff`, `#141414` e `Montserrat` escritos à mão
 * dentro de uma `<style>` no PHP. Era a mesma identidade em dois lugares, e o segundo envelhecia
 * sozinho. Aqui não existe cor literal: quem muda a marca muda `brandTokens.js`, e o build
 * reprova se este arquivo divergir.
 *
 * ── O LAYOUT VEIO DO TEMPLATE DO MUI, e o código não ────────────────────────────────
 *
 * Dono, 11/08/2026: *"não quero reinventar a roda"*. A composição do template de blog do MUI é
 * a referência — hero com destaque, grade de cards, tag. O código dele é React de cliente e o
 * CSS é Emotion em tempo de execução: nenhum dos dois atravessa para cá. O que atravessa são as
 * decisões de layout, que é a parte cara.
 *
 * O que ficou de fora, por pedido: avatar de autor, busca, newsletter e barra lateral.
 * ══════════════════════════════════════════════════════════════════════════════════════
 */

*, *::before, *::after { box-sizing: border-box; }

.rb-corpo {
  margin: 0;
  background: var(--revolu-white);
  color: var(--revolu-text);
  font-family: var(--revolu-font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.rb-wrap {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 var(--revolu-space-4);
}

/* ── O cabeçalho ─────────────────────────────────────────────────────────────────── */

/* Sticky (dono, 17/08/2026): o cabeçalho acompanha a rolagem. O fundo sólido já existia
   e é o que impede o texto de passar legível por baixo; z-index acima do conteúdo. */
.rb-cabeca {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--revolu-border);
  background: var(--revolu-white);
}

.rb-cabeca__wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--revolu-space-4);
  min-height: 64px;
}

/* Altura fixa, largura automática — a regra do `Wordmark.jsx`, e pelo mesmo motivo: apertar a
   marca deforma, e `cover` com largura arbitrária come o `t` de `.pet`. */
.rb-cabeca__marca img { height: 26px; width: auto; display: block; }

.rb-cabeca__nav {
  display: flex;
  align-items: center;
  gap: var(--revolu-space-6);
  font-size: 13px;
  font-weight: 700;
}

.rb-cabeca__nav a { color: var(--revolu-text); text-decoration: none; }
.rb-cabeca__nav a:hover { color: var(--revolu-primary); }
.rb-cabeca__nav a[aria-current='page'] { color: var(--revolu-primary); }
.rb-cabeca__entrar { color: var(--revolu-primary) !important; }

.rb-main { padding: var(--revolu-space-12) 0 var(--revolu-space-16); }

/* ── O hero: o artigo mais recente, e ele NÃO se repete na grade ─────────────────── */

.rb-hero {
  display: grid;
  gap: var(--revolu-space-6);
  margin-bottom: var(--revolu-space-12);
  padding-bottom: var(--revolu-space-12);
  border-bottom: 1px solid var(--revolu-border);
}

@media (min-width: 860px) {
  .rb-hero { grid-template-columns: 1.15fr 1fr; align-items: center; }
  .rb-hero--sem-capa { grid-template-columns: 1fr; }
}

.rb-hero__capa {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--revolu-radius-lg);
  background: var(--revolu-bg);
}

.rb-hero__titulo {
  font-family: var(--revolu-font-display);
  font-size: clamp(28px, 4.4vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: var(--revolu-space-3) 0;
  text-wrap: balance;
}

.rb-hero__titulo a { color: inherit; text-decoration: none; }
.rb-hero__titulo a:hover { color: var(--revolu-primary); }

.rb-hero__resumo {
  margin: 0 0 var(--revolu-space-4);
  color: var(--revolu-text-soft);
  font-size: 17px;
  max-width: 58ch;
}

/* ── A grade ─────────────────────────────────────────────────────────────────────── */

.rb-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--revolu-space-8) var(--revolu-space-6);
  list-style: none;
  margin: 0;
  padding: 0;
}

.rb-card { display: grid; gap: var(--revolu-space-2); align-content: start; }

.rb-card__capa {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--revolu-radius-md);
  background: var(--revolu-bg);
  margin-bottom: var(--revolu-space-1);
}

.rb-card__titulo {
  font-family: var(--revolu-font-display);
  font-size: 20px;
  line-height: 1.25;
  margin: 0;
  text-wrap: balance;
}

.rb-card__titulo a { color: inherit; text-decoration: none; }
.rb-card__titulo a:hover { color: var(--revolu-primary); }

.rb-card__resumo {
  margin: 0;
  color: var(--revolu-text-soft);
  font-size: 14.5px;
}

/* ── A tag e a data ──────────────────────────────────────────────────────────────── */

.rb-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--revolu-space-2);
  font-size: 12px;
  color: var(--revolu-text-muted);
}

.rb-tag {
  display: inline-block;
  padding: var(--revolu-space-1) var(--revolu-space-3);
  border-radius: var(--revolu-radius-pill);
  background: var(--revolu-bg-warm);
  border: 1px solid var(--revolu-bg-warm-border);
  color: var(--revolu-secondary-ink);
  font-size: 11.5px;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.01em;
}

.rb-tag:hover { background: var(--revolu-white); border-color: var(--revolu-secondary-ink); }
.rb-tag[aria-current='page'] { background: var(--revolu-secondary-ink); border-color: var(--revolu-secondary-ink); color: var(--revolu-white); }

.rb-data { font-variant-numeric: tabular-nums; }

/* ── O cabeçalho da lista, e o filtro por tag ────────────────────────────────────── */

.rb-topo { margin-bottom: var(--revolu-space-8); }

.rb-topo__titulo {
  font-family: var(--revolu-font-display);
  font-size: clamp(26px, 3.4vw, 34px);
  margin: 0 0 var(--revolu-space-2);
}

.rb-topo__lede { margin: 0; color: var(--revolu-text-soft); max-width: 60ch; }

.rb-filtro {
  display: flex;
  flex-wrap: wrap;
  gap: var(--revolu-space-2);
  margin-top: var(--revolu-space-4);
}

/* ── O artigo ────────────────────────────────────────────────────────────────────── */

.rb-artigo { max-width: 44rem; margin: 0 auto; }

.rb-artigo__titulo {
  font-family: var(--revolu-font-display);
  font-size: clamp(30px, 5vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: var(--revolu-space-3) 0 var(--revolu-space-4);
  text-wrap: balance;
}

.rb-artigo__resumo {
  font-size: 18px;
  color: var(--revolu-text-soft);
  margin: 0 0 var(--revolu-space-8);
}

.rb-artigo__capa {
  width: 100%;
  border-radius: var(--revolu-radius-lg);
  display: block;
  margin-bottom: var(--revolu-space-8);
}

/*
  O CORPO DO ARTIGO MORA EM `/artigo.css`, e não aqui.

  Ele é a única parte do blog que o CONSOLE também carrega: o conteúdo do Tiptap leva a classe
  `rb-texto`, e assim quem escreve vê a mesma régua de quem lê. Manter a tipografia aqui
  significaria mantê-la duas vezes — e os números já tinham divergido.
*/

.rb-voltar {
  display: inline-block;
  margin-top: var(--revolu-space-12);
  color: var(--revolu-primary);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
}

/* ── O vazio, e a paginação ──────────────────────────────────────────────────────── */

.rb-vazio { color: var(--revolu-text-soft); }

.rb-paginas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--revolu-space-4);
  margin-top: var(--revolu-space-12);
  font-size: 14px;
}

.rb-paginas a { color: var(--revolu-primary); font-weight: 700; text-decoration: none; }
.rb-paginas span { color: var(--revolu-text-muted); }

/* ── O rodapé ────────────────────────────────────────────────────────────────────── */

/* A ASSINATURA SOBRE A BANDA (dono, 17/08/2026: "replicar o mesmo rodapé da home, com o
   doguinho e assinatura sobre ele") — o espelho de `ui/AssinaturaDoMascote.css` do app:
   mascote de 86px, frase ao lado, e os -11px que põem a pata exatamente sobre o rodapé
   sem sobrepor demais (a medida do dono, documentada lá). Funciona porque este bloco
   renderiza no parcial do rodapé, colado na banda, fora do <main>. */
.rb-assinatura {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: var(--revolu-space-3, 12px);
  position: relative;
  z-index: 1;
  margin: var(--revolu-space-6, 24px) 0 -11px;
}

/*
 * ── OS MASCOTES ESTAVAM ESTICADOS 2,1× (dono, 28/08/2026) ──────────────────────────
 *
 * `aspect-ratio: 800 / 913` é a proporção de **um** mascote em pé — mais alto que largo. A
 * imagem virou `dupla.png`, que é o cão e o gato lado a lado: 868×480, quase o dobro de
 * largura sobre altura. Forçar a proporção antiga espremia os dois na horizontal e os
 * esticava na vertical.
 *
 * O `<img>` do Blade já declara `width="177" height="98"` — a proporção certa. Era o CSS que
 * a desmentia, e o CSS vence.
 *
 * ── QUEM MANDA É A ALTURA, e é o que o app já fazia ───────────────────────────────
 *
 * `ui/AssinaturaDoMascote.css` — de quem este bloco é o espelho — resolve assim, com a regra
 * escrita ao lado: *"a dupla é mais larga que alta: quem manda é a ALTURA, e a largura
 * acompanha o arquivo"*. Aqui a largura é que mandava, e por isso a distorção nasceu.
 *
 * Espelho que diverge do original é a mina desta casa em forma de CSS: as duas telas mostram
 * a mesma assinatura, e só uma estava certa.
 *
 * ── E O `aspect-ratio` FICA ───────────────────────────────────────────────────────
 *
 * Ele reserva o espaço antes de a imagem carregar. Sem ele, o rodapé pula quando o PNG
 * chega — e este bloco fica colado na banda, então o pulo empurra a página inteira. Com a
 * altura fixa, ele só precisa estar certo: 868/480, a proporção real da dupla.
 */
.rb-assinatura img { width: auto; height: 98px; aspect-ratio: 868 / 480; }

.rb-assinatura span {
  padding-bottom: 16px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--revolu-text-soft, #4A4A4A);
}

/* Grafite do token, não o preto do texto: a MESMA banda do app e da home pública
   (dono, 13/08/2026: "normalizar o footer a #3a3b49"). O © saiu junto, como lá. */
.rb-rodape {
  background: var(--revolu-footer-bg, #3A3B49);
  color: var(--revolu-white);
  padding: var(--revolu-space-8) 0;
  text-align: center;
}

.rb-rodape__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--revolu-space-2);
  font-size: 12.5px;
}

.rb-rodape__links a { color: rgb(255 255 255 / 82%); text-decoration: none; }
.rb-rodape__links a:hover { color: var(--revolu-white); }
.rb-rodape__links span { color: rgb(255 255 255 / 35%); }

/* O foco visível, que o CSS estático costuma esquecer e o teclado precisa. */
a:focus-visible { outline: 2px solid var(--revolu-primary); outline-offset: 3px; border-radius: 3px; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}