/*
 * Componentes compartilhados: cabeçalho, rodapé, botão e card.
 * Cada um existe só aqui. Medidas copiadas do export renderizado,
 * convertidas para tokens.
 */

/* ============ Cabeçalho (navbar fixa) ============ */
.cabecalho {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  background: var(--cor-navbar);
  -webkit-backdrop-filter: var(--desfoque-navbar);
  backdrop-filter: var(--desfoque-navbar);
  border-bottom: var(--linha-fina) solid var(--cor-ouro-filete);
}
.cabecalho__interno {
  /* content-box: no export os 1180 px são só do conteúdo, e a margem soma por fora. */
  box-sizing: content-box;
  max-width: var(--largura-navbar);
  margin: 0 auto;
  padding: var(--navbar-respiro) var(--margem-navbar);
  line-height: normal;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--navbar-espaco);
}
.cabecalho__marca {
  display: flex; align-items: center; gap: var(--espaco-3);
  margin-right: auto;
  color: var(--cor-texto-invertido);
  font-size: var(--texto-mini);
  letter-spacing: var(--tracking-marca);
  text-transform: uppercase;
}
.cabecalho__marca:hover { color: var(--cor-texto-invertido); }
.cabecalho__marca img { width: var(--tamanho-brasao-nav); height: auto; }
.cabecalho__menu {
  display: flex; flex-wrap: wrap; gap: var(--navbar-espaco-links);
  margin: 0; padding: 0; list-style: none;
  font-size: var(--texto-rotulo);
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
}
.cabecalho__menu a {
  display: inline-block;
  color: var(--cor-invertido-78);
  padding: var(--espaco-1) 0;
  border-bottom: var(--linha-fina) solid transparent;
}
/* Página atual (aria-current) usa o mesmo realce do hover do export. */
.cabecalho__menu a:hover,
.cabecalho__menu a[aria-current="page"] {
  color: var(--cor-ouro);
  border-bottom-color: var(--cor-ouro);
}

/* ============ Rodapé ============ */
.rodape {
  background: var(--cor-azul-rodape);
  color: var(--cor-texto-invertido);
  padding: var(--rodape-respiro-topo) var(--rodape-margem) var(--rodape-respiro-base);
  line-height: normal;
}
.rodape__interno {
  max-width: var(--largura-rodape);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
  gap: var(--rodape-colunas-espaco);
  align-items: start;
}
.rodape__sobre { display: flex; flex-direction: column; gap: var(--espaco-4-5); max-width: 32em; }
.rodape__sobre img { width: var(--tamanho-brasao-rodape); height: auto; }
.rodape__nome {
  font-size: var(--texto-h3);
  letter-spacing: var(--tracking-nome);
  line-height: 1.1;
}
.rodape__texto {
  margin: 0;
  font-size: var(--texto-destaque);
  line-height: 1.6;
  color: var(--cor-invertido-68);
  text-wrap: pretty;
}
.rodape__coluna { display: flex; flex-direction: column; gap: var(--espaco-4); }
.rodape__rotulo {
  margin: 0;
  font-size: var(--texto-rotulo);
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
  color: var(--cor-invertido-60);
  font-weight: 400;
}
.rodape__links {
  display: flex; flex-direction: column; gap: var(--espaco-3);
  margin: 0; padding: 0; list-style: none;
  font-size: var(--texto-destaque);
}
.rodape__links a { color: var(--cor-texto-invertido); }
.rodape__links a:hover,
.rodape__links a[aria-current="page"] { color: var(--cor-ouro); }
/* Botão com aparência de link (ex.: "Preferências de cookies" na Fase 5). */
.rodape__links button {
  font: inherit; color: var(--cor-texto-invertido); background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
}
.rodape__links button:hover { color: var(--cor-ouro); }

/* ============ Botão (contorno, como no export) ============ */
.botao {
  display: inline-block;
  font-family: var(--fonte-texto);
  font-size: var(--texto-mini);
  letter-spacing: var(--espacamento-caixa-alta);
  text-transform: uppercase;
  color: var(--cor-azul-noite);
  background: transparent;
  border: var(--linha-fina) solid var(--cor-azul-noite);
  border-radius: var(--raio-0);
  padding: var(--espaco-botao);
  cursor: pointer;
  text-align: center;
}
.botao:hover { background: var(--cor-azul-noite); color: var(--cor-texto-invertido); }
/* Variante para fundo azul */
.botao--invertido { color: var(--cor-texto-invertido); border-color: var(--cor-ouro); }
.botao--invertido:hover { background: var(--cor-ouro); color: var(--cor-azul-noite); }

/* ============ Card (notícia, encontro, destaque) ============ */
.card {
  background: var(--cor-papel);
  border: var(--linha-fina) solid var(--cor-linha);
  padding: var(--espaco-card);
  display: flex; flex-direction: column; gap: var(--espaco-3);
  color: inherit;
}
a.card:hover { border-color: var(--cor-ouro); color: inherit; }
.card--creme { background: var(--cor-creme); }
.card__rotulo {
  font-size: var(--texto-micro);
  letter-spacing: var(--tracking-card);
  text-transform: uppercase;
  /* O export usava ouro #C89B5C aqui (2,2:1 no papel); ouro-texto passa AA. */
  color: var(--cor-ouro-texto);
}
.card__titulo {
  margin: 0;
  font-family: var(--fonte-texto);
  font-weight: 600;
  font-size: var(--texto-h4);
  line-height: 1.25;
  color: var(--cor-azul-noite);
}
.card__texto {
  margin: 0;
  font-size: var(--texto-apoio);
  font-weight: 400;
  line-height: 1.58;
  color: var(--cor-texto-suave);
  text-wrap: pretty;
}
.card__acao {
  margin-top: auto;
  font-size: var(--texto-rotulo);
  letter-spacing: var(--espacamento-caixa-alta);
  text-transform: uppercase;
  color: var(--cor-celeste);
}

/* Os elementos personalizados são inline por padrão; bloco evita espaço fantasma. */
fontana-cabecalho, fontana-rodape { display: block; }

/* Enquanto a lista, o post ou a árvore carregam, a área já ocupa a tela: o
   rodapé e a caixa "envie ao acervo" ficam abaixo e não pulam depois. */
[data-carregando] [data-lista], [data-carregando] [data-arvore] { min-height: 100vh; }
[data-carregando] [data-so-lista] { visibility: hidden; }

/* ============ Seção (bloco de página com título) ============ */
.secao {
  padding: var(--espaco-secao) var(--margem-lateral);
  background: var(--cor-creme);
}
.secao--papel { background: var(--cor-papel); }
.secao--padrao { background: var(--padrao-diagonal-claro), var(--cor-creme); }
.secao--escura {
  background: var(--padrao-diagonal-escuro), var(--cor-azul-noite);
  color: var(--cor-texto-invertido);
}
.secao__interno { max-width: var(--largura-conteudo); margin: 0 auto; }
.secao__interno--largo { max-width: var(--largura-arvore); }
.secao__titulo {
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: var(--texto-h2);
  line-height: var(--entrelinha-titulo);
  letter-spacing: var(--tracking-titulo);
  color: var(--cor-azul-noite);
  margin: 0 0 var(--espaco-titulo-secao);
}
.secao--escura .secao__titulo { color: var(--cor-texto-invertido); }
.secao__intro {
  font-size: var(--texto-intro);
  line-height: 1.55;
  color: var(--cor-texto-suave);
  max-width: 38em;
  margin: 0 0 var(--espaco-intro);
  text-wrap: pretty;
}
.secao--escura .secao__intro { color: var(--cor-invertido-70); }

/* Rótulo dourado acima de um bloco ("DE ONDE VEIO A FAMÍLIA FONTANA") */
.kicker {
  font-size: var(--texto-kicker);
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--cor-ouro-texto);
  margin: 0 0 var(--espaco-3);
  font-weight: 400;
}
.kicker--largo { letter-spacing: var(--tracking-kicker-largo); font-size: var(--texto-kicker-fixo); }

/* Parágrafo longo de leitura */
.leitura {
  font-size: var(--texto-leitura);
  line-height: 1.62;
  color: var(--cor-texto);
  margin: 0;
  text-wrap: pretty;
}
.leitura strong { font-weight: 600; color: var(--cor-azul-noite); }
.nota {
  font-size: var(--texto-destaque);
  line-height: 1.55;
  color: var(--cor-texto-suave);
  max-width: 52em;
  margin: var(--espaco-paragrafo-final) 0 0;
  text-wrap: pretty;
}

/* Foto com moldura (proporção reservada: sem salto de layout) */
.foto {
  position: relative; /* referência para o enquadramento ajustado no painel */
  margin: 0;
  width: 100%;
  border: var(--linha-fina) solid var(--cor-linha);
  background: var(--cor-branco);
  overflow: hidden;
}
.foto img { width: 100%; height: 100%; object-fit: cover; }

/* ============ Ficha (dado curto: pessoa, lugar, data) ============ */
.grade-fichas { display: grid; gap: var(--espaco-3); margin: 0; padding: 0; list-style: none; }
.ficha {
  background: var(--cor-branco);
  border: var(--linha-fina) solid var(--cor-linha);
  padding: var(--espaco-4) var(--espaco-4-5);
  min-width: 0;
}
.ficha__rotulo {
  font-size: var(--texto-micro);
  letter-spacing: var(--espacamento-caixa-alta);
  text-transform: uppercase;
  color: var(--cor-ouro-texto);
  margin-bottom: var(--espaco-1-5);
}
.ficha__nome { font-size: var(--texto-corpo); color: var(--cor-azul-noite); line-height: 1.25; }
.ficha__detalhe { font-size: var(--texto-corpo); color: var(--cor-texto-suave); line-height: 1.4; margin-top: var(--espaco-1); }

/* ============ Grade de cards ============ */
.grade-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(18.125rem, 100%), 1fr));
  gap: var(--espaco-5);
}

/* ============ Chamada (caixa tracejada com botão) ============ */
.chamada {
  margin-top: var(--espaco-intro);
  border: var(--linha-fina) dashed var(--cor-ouro);
  padding: var(--espaco-chamada);
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--espaco-4-5) var(--espaco-6);
  background: var(--cor-creme);
}
.chamada__texto { flex: 1 1 16.25rem; }
.chamada__titulo { font-size: var(--texto-destaque); color: var(--cor-azul-noite); margin: 0 0 var(--espaco-2); font-weight: 400; }
.chamada__descricao { font-size: var(--texto-destaque); line-height: 1.55; color: var(--cor-texto-suave); margin: 0; text-wrap: pretty; }

/* ============ Linha do tempo ============ */
.linha-tempo { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.linha-tempo__evento {
  display: grid;
  grid-template-columns: var(--linha-tempo-ano) var(--espaco-5) 1fr;
  gap: 0 var(--linha-tempo-coluna);
  align-items: start;
}
.linha-tempo__ano { font-size: var(--texto-ano); color: var(--cor-ouro); }
/* Ponto + trilho vertical desenhados em CSS, sem elementos vazios no HTML */
.linha-tempo__marco { display: flex; flex-direction: column; align-items: center; align-self: stretch; }
.linha-tempo__marco::before {
  content: ''; width: var(--ponto-linha-tempo); height: var(--ponto-linha-tempo);
  border-radius: 50%; background: var(--cor-ouro); margin-top: var(--ponto-deslocamento); flex: 0 0 auto;
}
.linha-tempo__marco::after {
  content: ''; width: var(--linha-fina); flex: 1; background: var(--cor-ouro-trilho); min-height: var(--espaco-5);
}
.linha-tempo__evento:last-child .linha-tempo__marco::before { background: var(--cor-texto-invertido); border: var(--linha-media) solid var(--cor-ouro); }
.linha-tempo__evento:last-child .linha-tempo__marco::after { display: none; }
.linha-tempo__conteudo { padding-bottom: var(--linha-tempo-item); }
.linha-tempo__evento:last-child .linha-tempo__conteudo { padding-bottom: 0; }
.linha-tempo__titulo { font-size: var(--texto-item); color: var(--cor-texto-invertido); margin: 0 0 var(--espaco-2); font-weight: 400; }
.linha-tempo__texto { font-size: var(--texto-apoio); line-height: 1.55; color: var(--cor-invertido-72); max-width: 44em; margin: 0; text-wrap: pretty; }

/* ============ Topo das páginas internas ============ */
/* Só CSS: <fontana-topo><h1>Notícias</h1></fontana-topo>. Antes o JavaScript
   montava o topo depois de a página aparecer, e tudo pulava para baixo (CLS
   de 0,5 no Lighthouse). O brasão entra como fundo decorativo do título. */
fontana-topo {
  display: block; position: relative; overflow: hidden;
  background: var(--fundo-topo);
  padding: var(--topo-respiro);
  /* No export, entre ~600 e 800 px a navbar quebra em duas linhas e cobre o
     título. max() mantém o respiro do export e só empurra quando ela cobriria.
     --topo-folga-titulo desconta espaço que o título já tem acima (Árvore). */
  padding-top: max(var(--topo-respiro-topo), calc(var(--altura-navbar) + var(--espaco-6) - var(--topo-folga-titulo, 0px)));
}
fontana-topo::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: var(--padrao-aneis-topo); }
fontana-topo h1 {
  position: relative; max-width: var(--largura-arvore); margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--espaco-5);
  font-family: var(--fonte-marca); font-weight: 700;
  font-size: var(--texto-h1-pagina); letter-spacing: var(--tracking-nome); line-height: 1.08;
  color: var(--cor-texto-invertido);
}
fontana-topo h1::before {
  content: ''; flex: 0 0 auto;
  width: var(--topo-brasao); aspect-ratio: 1;
  background: url('/img/brasao-184.webp') center / contain no-repeat;
}

/* ============ Área de conteúdo das páginas internas ============ */
.pagina { max-width: var(--largura-navbar); margin: 0 auto; padding: var(--pagina-respiro); box-sizing: content-box; }

/* ============ Filtro por categoria (chips) ============ */
.chips { display: flex; flex-wrap: wrap; gap: var(--espaco-2); margin: 0 0 var(--espaco-chips); padding: 0; list-style: none; }
.chip {
  font-family: var(--fonte-titulo); font-size: var(--texto-rotulo);
  letter-spacing: var(--tracking-nav); text-transform: uppercase;
  padding: var(--espaco-chip); cursor: pointer;
  border: var(--linha-fina) solid var(--cor-linha); background: var(--cor-papel); color: var(--cor-texto-suave);
}
.chip[aria-pressed="true"] { border-color: var(--cor-azul-noite); background: var(--cor-azul-noite); color: var(--cor-texto-invertido); }
.chip:hover { border-color: var(--cor-ouro); }

/* ============ Lista de publicações ============ */
.lista-posts { display: flex; flex-direction: column; gap: var(--espaco-lista-posts); margin: 0; padding: 0; list-style: none; }
.post-card {
  position: relative;
  background: var(--cor-papel); border: var(--linha-fina) solid var(--cor-linha);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(17.5rem, 100%), 1fr));
  min-width: 0; overflow: hidden;
}
.post-card:hover { border-color: var(--cor-ouro); }
.post-card__foto { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--cor-creme); margin: 0; }
.post-card__foto img { width: 100%; height: 100%; object-fit: cover; }
.post-card__corpo { padding: var(--espaco-card-post); display: flex; flex-direction: column; gap: var(--espaco-4); justify-content: center; min-width: 0; }
.post-card__titulo {
  font-family: var(--fonte-titulo); font-weight: 600; font-size: var(--texto-titulo-lista);
  line-height: 1.25; letter-spacing: var(--tracking-titulo); color: var(--cor-azul-noite); margin: 0;
}
/* O link cobre o card inteiro (clicável em qualquer ponto), mas só o título é lido como link. */
.post-card__titulo a { color: inherit; }
.post-card__titulo a::after { content: ''; position: absolute; inset: 0; }
.post-card__titulo a:focus-visible { outline: none; }
.post-card:has(a:focus-visible) { outline: var(--foco-contorno); outline-offset: var(--foco-afastamento); }
.post-card__resumo { font-size: var(--texto-resumo); line-height: 1.6; color: var(--cor-texto-suave); margin: 0; text-wrap: pretty; }
.post-card__meta { font-size: var(--texto-meta); color: var(--cor-texto-suave); margin: var(--espaco-2) 0 0; }
.lista-vazia { font-size: var(--texto-leitura); color: var(--cor-texto-suave); padding: var(--espaco-7) 0; }
.chamada--lista { margin-top: var(--espaco-chamada-lista); background: var(--cor-papel); }

/* ============ Post ============ */
.post { background: var(--cor-papel); border: var(--linha-fina) solid var(--cor-linha); padding: var(--espaco-post); }
.migalha { display: flex; flex-wrap: wrap; gap: var(--espaco-2); font-size: var(--texto-migalha); color: var(--cor-texto-suave); margin: 0 0 var(--espaco-migalha); padding: 0; list-style: none; }
.migalha li + li::before { content: '/'; margin-right: var(--espaco-2); }
.post__rotulo, .relacionados__rotulo {
  font-size: var(--texto-micro-post); letter-spacing: var(--tracking-card); text-transform: uppercase; color: var(--cor-ouro-texto);
}
.post__titulo {
  font-family: var(--fonte-titulo); font-weight: 600; font-size: var(--texto-titulo-post);
  line-height: 1.15; letter-spacing: var(--tracking-titulo); color: var(--cor-azul-noite);
  margin: var(--espaco-4) 0 0; max-width: 20em;
}
.post__autor { font-size: var(--texto-corpo); color: var(--cor-texto-suave); margin-top: var(--espaco-titulo-secao); }
.post__foto { position: relative; margin: var(--espaco-chamada) 0 0; aspect-ratio: 16 / 9; border: var(--linha-fina) solid var(--cor-linha); background: var(--cor-creme); overflow: hidden; }
.post__foto img { width: 100%; height: 100%; object-fit: cover; }
.post__texto { margin-top: var(--espaco-chamada); display: flex; flex-direction: column; gap: var(--espaco-4-5); max-width: 44em; }
.post__texto p { font-size: var(--texto-intro); line-height: 1.65; color: var(--cor-texto); margin: 0; text-wrap: pretty; }
.post__fim {
  margin-top: var(--espaco-post-bloco); border-top: var(--linha-fina) solid var(--cor-linha); padding-top: var(--espaco-5);
  display: flex; flex-wrap: wrap; gap: var(--espaco-titulo-secao) var(--espaco-5); align-items: center; justify-content: space-between;
}
.post__rodape { font-size: var(--texto-corpo); color: var(--cor-texto-suave); margin: 0; }
.relacionados { margin-top: var(--espaco-post-bloco); border-top: var(--linha-fina) solid var(--cor-linha); padding-top: var(--espaco-5); }
.relacionados__rotulo { margin: 0 0 var(--espaco-titulo-secao); font-weight: 400; }
.relacionados__lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); gap: var(--espaco-titulo-secao); margin: 0; padding: 0; list-style: none; }
.relacionado { position: relative; border: var(--linha-fina) solid var(--cor-linha); background: var(--cor-branco); padding: var(--espaco-4) var(--espaco-4-5); min-width: 0; }
.relacionado:hover { border-color: var(--cor-ouro); }
.relacionado__categoria { font-size: var(--texto-micro-post); letter-spacing: var(--espacamento-caixa-alta); text-transform: uppercase; color: var(--cor-ouro-texto); margin-bottom: var(--espaco-2); }
.relacionado a { font-size: var(--texto-relacionado); color: var(--cor-azul-noite); line-height: 1.3; }
.relacionado a::after { content: ''; position: absolute; inset: 0; }