/* =================================================================
   filosofia-arquivo.css · Portal I · Filosofia e Política · ARQUIVO DE ENSAIOS
   Estilo: MANIFESTO (neobrutalista editorial)
   Ligado a: filosofia-arquivo.html
   ================================================================= */

/* -----------------------------------------------------------------
   BASE COMPARTILHADA DO PORTAL FILOSOFIA E POLÍTICA
   Este bloco se repete em todos os CSS do portal para que cada página
   funcione sozinha. Se preferir, mova-o para um arquivo único
   (ex.: filosofia-base.css) e importe-o em cada página.
   ----------------------------------------------------------------- */

/* Fontes: Archivo Black (títulos), Manrope (texto), JetBrains Mono (rótulos) */
@import url("https://fonts.googleapis.com/css2?family=Archivo+Black&family=JetBrains+Mono:wght@400;700&family=Manrope:wght@400;600;700&display=swap");

/* ---------- Tokens ---------- */
:root {
  --fundo: #F2E6C4;        /* luar: fundo do portal */
  --tinta: #0B1029;        /* noite: texto e bordas */
  --violeta: #5A4FB0;      /* cor de destaque do portal */
  --papel-claro: #FFF8E6;  /* caixas e campos */
  --borda: 3px solid var(--tinta);

  --fonte-bloco: "Archivo Black", Impact, sans-serif;
  --fonte-texto: "Manrope", system-ui, sans-serif;
  --fonte-mono: "JetBrains Mono", ui-monospace, monospace;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font: 16px/1.6 var(--fonte-texto);
}
a { color: inherit; }
:focus-visible { outline: 3px solid var(--violeta); outline-offset: 2px; }

/* Container que mantém o rodapé no fim da tela */
.pagina { min-height: 100vh; display: flex; flex-direction: column; }
.pagina > main { flex: 1; }

/* ---------- Navegação do portal ---------- */
.nav {
  display: flex; align-items: stretch; flex-wrap: wrap;
  border-bottom: var(--borda);
  font: 12px var(--fonte-mono); letter-spacing: .08em;
}
.nav__marca {
  margin-right: auto; padding: 12px 20px;
  font: 400 17px var(--fonte-bloco); letter-spacing: 0; text-decoration: none;
}
.nav__link { padding: 12px 16px; border-left: var(--borda); text-decoration: none; display: flex; align-items: center; }
.nav__link:hover { background: var(--papel-claro); }
/* Página atual (marcada com aria-current="page" no HTML) */
.nav__link[aria-current="page"] { background: var(--tinta); color: var(--fundo); }

/* ---------- Tipografia ---------- */
.mono { font: 12px var(--fonte-mono); letter-spacing: .08em; }
.titulo-gigante {
  margin: 0;
  font: 400 clamp(40px, 7.4vw, 96px)/.9 var(--fonte-bloco);
  text-transform: uppercase; letter-spacing: -.015em;
}
.titulo-gigante em { font-style: normal; color: var(--violeta); }
.titulo-grande { margin: 0; font: 400 clamp(28px, 4.4vw, 52px)/.95 var(--fonte-bloco); text-transform: uppercase; }
.titulo-bloco { margin: 6px 0 8px; font: 400 22px/1 var(--fonte-bloco); text-transform: uppercase; }
.chamada { font-size: 17px; max-width: 46ch; margin: 16px 0 0; }

/* ---------- Etiquetas ---------- */
.tag {
  display: inline-block; margin-right: 6px; padding: 3px 8px;
  border: 2px solid var(--tinta);
  font: 11px var(--fonte-mono); letter-spacing: .1em;
}
.tag--violeta { background: var(--violeta); border-color: var(--violeta); color: #fff; }

/* ---------- Botões (links e <button> usam a mesma classe) ---------- */
.botao {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 18px;
  background: var(--tinta); color: var(--fundo);
  border: var(--borda);
  font: 400 16px var(--fonte-bloco); text-transform: uppercase; text-decoration: none;
  cursor: pointer;
}
.botao:hover { background: var(--violeta); border-color: var(--violeta); color: #fff; }
.botao--contorno { background: transparent; color: var(--tinta); }
.botao--violeta { background: var(--violeta); border-color: var(--violeta); color: #fff; }
.botao--violeta:hover { background: var(--tinta); border-color: var(--tinta); }

/* ---------- Blocos e grades ---------- */
.espaco { padding: 24px 20px; }
.escuro { background: var(--tinta); color: var(--fundo); }
.violeta { background: var(--violeta); color: #fff; }
.grade-2, .grade-3 { display: grid; border-top: var(--borda); }
.grade-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grade-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grade-2 > *, .grade-3 > * { padding: 18px 20px; }
.grade-2 > * + *, .grade-3 > * + * { border-left: var(--borda); }

/* ---------- Rodapé ---------- */
.rodape {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
  padding: 12px 20px; border-top: var(--borda);
  font: 11px var(--fonte-mono); letter-spacing: .08em;
}
.rodape a { text-decoration: none; }
.rodape a:hover { color: var(--violeta); }

/* ---------- Celular ---------- */
@media (max-width: 640px) {
  .grade-2, .grade-3 { grid-template-columns: minmax(0, 1fr); }
  .grade-2 > * + *, .grade-3 > * + * { border-left: 0; border-top: var(--borda); }
  .nav__marca { width: 100%; border-bottom: var(--borda); }
  .nav__link:first-of-type { border-left: 0; }
}

/* -----------------------------------------------------------------
   ESPECÍFICO DO ARQUIVO DE ENSAIOS
   ----------------------------------------------------------------- */
/* Barra de filtros por eixo */
.filtros { display: flex; flex-wrap: wrap; border-top: var(--borda); border-bottom: var(--borda); }
.filtro {
  padding: 10px 16px; border: 0; border-right: var(--borda);
  background: transparent; color: var(--tinta);
  font: 12px var(--fonte-mono); letter-spacing: .08em; cursor: pointer;
}
.filtro:hover { background: var(--papel-claro); }
.filtro[aria-pressed="true"] { background: var(--tinta); color: var(--fundo); }

/* Lista de ensaios em linhas de borda grossa */
.lista { list-style: none; margin: 0; padding: 0; }
.lista__item a {
  display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 16px; align-items: center;
  padding: 14px 20px; border-bottom: var(--borda); text-decoration: none;
}
.lista__item a:hover { background: var(--papel-claro); }
.lista__titulo { font: 400 clamp(17px, 2.4vw, 24px)/1.05 var(--fonte-bloco); text-transform: uppercase; }
.lista__seta { font: 400 22px var(--fonte-bloco); }

@media (max-width: 640px) {
  .lista__item a { grid-template-columns: minmax(0, 1fr); }
  .lista__seta { display: none; }
}