/* =========================================================
   paginas.css — ajustes específicos de cada página
   Cada bloco é prefixado pela classe da página no <body>
   (ex.: .home, .pagina-bio), para não vazar para as outras.
   ========================================================= */

/* ===== Home ===== */

/* Hero: espaçamentos medidos no original em 1440px; camada azul a 40% (internas: 30%) */
.home .hero {
  --opacidade-banner: 0.4;
  /* No desktop o texto termina antes do ombro e ocupa mais linhas; com menos espaço
     no pé, a seção fica com a mesma altura do original e a foto não é ampliada demais */
  padding: 179px 0 184px;
}

/* Foco da foto no rosto (ponto focal do original: 66,6% x 19,2%) */
.home .hero .banner__imagem {
  object-position: 66.6% 19.2%;
}

/* h1 com no máximo 550px: o nome quebra em duas linhas, como no original */
.home .hero h1 {
  max-width: 550px;
  margin: 0;
  color: var(--branco);
}

/* "Da Procuradoria ao Parecerismo", logo abaixo do nome, como subtítulo */
.home .hero__subtitulo {
  margin: 14px 0 40px;
  font-size: 1.3rem;
  line-height: 1.4;
  opacity: 0.92;
}

/* Texto de apresentação: tamanho "large" do original (24px no desktop) */
.home .hero__texto {
  max-width: 700px;
  margin: 0 0 41px;
  font-size: min(calc(0.5 * 1.2vw + 1rem), 1.5rem);
  line-height: 1.8;
}



/* O próximo capítulo: 2 vídeos lado a lado */
.home .proximo-capitulo {
  padding-top: calc(95px + var(--recorte));
  padding-bottom: 109px;
}

.home .proximo-capitulo .secao__titulo {
  margin-bottom: 70px;
}

.home .videos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 112px;
}

/* Opinião: artigos em 3 colunas */
.home .artigos {
  display: grid;
  /* minmax(0, 1fr): deixa a coluna encolher mesmo com palavras longas (sem isso ela vaza) */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 60px;
  align-items: start; /* cada card com a própria altura, como no original */
  margin-bottom: 141px;
}

/* Agenda: a seção só aparece quando houver eventos na lista
   (:has() = "a seção que contém uma lista de eventos vazia") */
.home .agenda:has(.eventos:empty) {
  display: none;
}

/* Tablet (medidas do original em 768px) */
@media (max-width: 1024px) {
  .home .hero {
    padding: 173px 0 181px;
  }

  .home .hero__texto {
    max-width: 412px;
    margin-bottom: 0;
  }


  .home .proximo-capitulo {
    padding-top: calc(155px + var(--recorte));
    padding-bottom: 200px;
  }

  .home .videos {
    gap: 70px;
  }

  /* No tablet o original estreita o título (quebra em 2 linhas) */
  .home .proximo-capitulo .secao__titulo {
    max-width: 50%;
    margin-bottom: 38px;
  }

  .home .opiniao {
    padding-top: 51px;
  }

  .home .opiniao .secao__titulo,
  .home .agenda .secao__titulo {
    margin-bottom: 29px;
  }

  /* Tablet: os 3 cards menores continuam lado a lado (com 2 colunas sobraria um sozinho) */
  .home .artigos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 28px;
  }

  .home .artigos .post-card:not(.post-card--destaque) .post-card__titulo {
    font-size: 21px;
  }

}

/* Celular (medidas do original em 375px) */
@media (max-width: 767px) {
  /* Espaço grande no alto: no celular o original deixa o rosto à mostra acima do texto */
  .home .hero {
    padding: 433px 0 130px;
  }

  /* Desfaz o estreitamento do tablet: no celular ocupa a largura toda */
  .home .proximo-capitulo .secao__titulo {
    max-width: none;
  }

  /* Limite de 17vw: "Rosenvald" ocupa ~5,06× o tamanho da fonte e há 88vw livres,
     então o nome cabe inteiro (no original ele quebra como "Rosenval / d") */
  .home .hero__subtitulo {
    margin: 10px 0 28px;
    font-size: 1.15rem;
  }

  .home .hero h1 {
    margin: 0;
    font-size: min(calc(5.37 * 1.2 * min(1vh, 9px) + 1rem), 17vw);
  }

  /* No celular em pé o original calcula o texto "large" pela altura da tela */
  .home .hero__texto {
    max-width: none;
    margin-bottom: 0;
    font-size: calc(0.5 * 1.2 * min(1vh, 9px) + 1rem);
  }


  .home .proximo-capitulo {
    padding-top: calc(53px + var(--recorte));
    padding-bottom: 102px;
  }

  .home .proximo-capitulo .secao__titulo {
    margin-bottom: 32px;
  }

  .home .videos {
    grid-template-columns: 1fr;
    gap: 94px;
  }

  .home .opiniao {
    padding-top: 40px;
  }

  .home .opiniao .secao__titulo,
  .home .agenda .secao__titulo {
    margin-bottom: 41px;
  }

  .home .artigos {
    grid-template-columns: minmax(0, 1fr);
  }


}

/* ===== Biografia ===== */

/* Duas colunas na proporção do original (550 | 50 | 600 em 1200px) */
.pagina-bio .bio__colunas {
  display: grid;
  grid-template-columns: 11fr 12fr;
  column-gap: 4.1667%; /* 50px em 1200px */
  align-items: start;
}

/* Frase de destaque: aparência de h4, em verde */
.pagina-bio .bio__destaque {
  margin: 0 0 80px;
  color: var(--verde-escuro);
}

.pagina-bio .bio p {
  margin: 1rem 0;
  text-align: justify;
}

.pagina-bio .bio__coluna > p:first-of-type {
  margin-top: 0;
}

.pagina-bio .bio__foto {
  margin: 0 0 52px;
}

/* O original mostra a foto recortada na proporção 600 x 722 */
.pagina-bio .bio__foto img {
  width: 100%;
  aspect-ratio: 600 / 722;
  object-fit: cover;
  border-radius: 5px; /* cantos levemente arredondados, como no original */
}

/* Na coluna da direita o texto fica recuado 50px em relação à foto */
.pagina-bio .bio__coluna--direita > p {
  padding-left: 8.333%;
}

/* Vídeo no fim, ocupando a largura do conteúdo */
.pagina-bio .bio__video {
  margin-top: 273px;
}

.pagina-bio .bio {
  padding-bottom: 124px;
}

@media (max-width: 1024px) {
  /* No tablet o original deixa um espaço grande entre a foto e o texto da direita */
  .pagina-bio .bio__foto {
    margin-bottom: 610px;
  }

  .pagina-bio .bio__video {
    margin-top: 151px;
  }

  .pagina-bio .bio {
    padding-bottom: 83px;
  }
}

/* Celular: uma coluna só, com o vídeo antes do texto (como no original) */
@media (max-width: 767px) {
  .pagina-bio .bio__conteudo {
    display: flex;
    flex-direction: column;
  }

  .pagina-bio .bio__video {
    order: -1; /* "order" muda a ordem visual sem mexer no HTML */
    margin: 0 0 54px;
  }

  .pagina-bio .bio__colunas {
    display: block;
  }

  .pagina-bio .bio__foto {
    margin: 24px 0;
  }

  /* No celular a foto fica um pouco mais "deitada" (330 x 432) */
  .pagina-bio .bio__foto img {
    aspect-ratio: 330 / 432;
  }

  .pagina-bio .bio__coluna--direita > p {
    padding-left: 0;
  }

  .pagina-bio .bio {
    padding-bottom: 46px;
  }
}

/* ===== Atuação ===== */

/* Duas colunas paralelas: Brasil | Internacional */
.pagina-atuacao .atuacao__colunas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 8.333%; /* 100px em 1200px */
}

.pagina-atuacao .atuacao__coluna {
  display: flex;
  flex-direction: column; /* o painel decorativo estica até o fim da coluna */
}

.pagina-atuacao .atuacao__titulo {
  margin: 0 0 36px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(22, 56, 59, 0.25); /* verde-escuro, bem suave */
  color: var(--verde-escuro);
}

.pagina-atuacao .atuacao p {
  margin: 0 0 1rem;
  text-align: justify;
  hyphens: auto; /* divide palavras longas: evita buracos no texto justificado */
}

.pagina-atuacao .atuacao p:last-of-type {
  margin-bottom: 0; /* o painel termina na mesma altura do texto ao lado */
}

.pagina-atuacao .atuacao strong {
  color: var(--verde-escuro);
}

/* A coluna internacional é mais curta: o espaço que sobra vira um painel
   azul-marinho com o monograma, com o mesmo recorte em "V" dos banners */
.pagina-atuacao .atuacao__painel {
  flex: 1;
  display: grid;
  place-items: center;
  min-height: 260px;
  margin-top: 40px;
  background: var(--azul-marinho);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 48px), 75% 100%, 0 calc(100% - 48px));
}

/* Monograma em cor clara: o PNG serve de máscara e a cor vem do CSS */
.pagina-atuacao .atuacao__monograma {
  width: 132px;
  aspect-ratio: 258 / 255;
  margin-bottom: 48px; /* centraliza na parte reta, acima do recorte */
  background: var(--fundo);
  -webkit-mask: url("../img/monograma.png") center / contain no-repeat;
  mask: url("../img/monograma.png") center / contain no-repeat;
}

.pagina-atuacao .atuacao {
  padding-bottom: 124px;
}

@media (max-width: 767px) {
  .pagina-atuacao .atuacao__colunas {
    display: block;
  }

  .pagina-atuacao .atuacao__coluna + .atuacao__coluna {
    margin-top: 56px;
  }

  .pagina-atuacao .atuacao__titulo {
    margin-bottom: 24px;
  }

  /* Coluna estreita: alinhado à esquerda lê melhor que justificado */
  .pagina-atuacao .atuacao p {
    text-align: left;
  }

  /* No celular as colunas ficam uma embaixo da outra: não sobra espaço a preencher */
  .pagina-atuacao .atuacao__painel {
    display: none;
  }

  .pagina-atuacao .atuacao {
    padding-bottom: 46px;
  }
}

/* ===== Quem somos ===== */

.pagina-quem-somos .equipe {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 60px;
  align-items: start;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pagina-quem-somos .equipe-secao {
  padding-bottom: 95px;
}

@media (max-width: 1024px) {
  .pagina-quem-somos .equipe {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .pagina-quem-somos .equipe-secao {
    padding-bottom: 67px;
  }
}

@media (max-width: 767px) {
  /* No celular o original deixa a lista um pouco mais larga que o texto (15px de margem) */
  .pagina-quem-somos .equipe {
    grid-template-columns: minmax(0, 1fr);
    margin: 0 calc(4vw - var(--margem));
  }

  .pagina-quem-somos .equipe-secao {
    padding-bottom: 53px;
  }
}

/* ===== Opinião (lista) =====
   No original a lista fica num contêiner de 1085px, em 3 colunas. */

.pagina-opiniao .banner {
  --opacidade-banner: 0.2;
}

.pagina-opiniao .banner + .secao {
  padding-top: calc(57px + var(--recorte));
}

.pagina-opiniao .lista-artigos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 65px 60px;
  align-items: start;
  max-width: 1085px;
  margin: 0 auto;
}

.pagina-opiniao .paginacao {
  max-width: 1085px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 1024px) {
  .pagina-opiniao .lista-artigos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .pagina-opiniao .lista-artigos {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ===== Artigo =====
   Coluna central com metade da largura útil (662px em 1440px), como no original. */

.pagina-artigo .artigo {
  padding: 58px var(--margem) 100px;
}

.pagina-artigo .artigo__coluna {
  width: min(calc((100vw - 2 * var(--margem)) / 2), 662px);
  margin: 0 auto;
}

/* Título: tamanho de h3, verde, com a altura de linha do original (1,33) */
.pagina-artigo .artigo__titulo {
  margin: 0;
  font-size: min(calc(1.74 * 1.2vw + 1rem), 2.74rem);
  line-height: 1.33;
  color: var(--verde-escuro);
}

.pagina-artigo .artigo__meta {
  margin: 32px 0 0;
  font-family: var(--fonte-titulo);
  font-weight: 500;
  font-size: 1.08rem;
  line-height: 1.3;
  letter-spacing: 0;
}

.pagina-artigo .entry-content {
  margin-top: 70px;
  /* Endereços de sites escritos no texto (sem espaços) quebram em vez de vazar no celular */
  overflow-wrap: break-word;
}

/* O conteúdo vem sem classes (WordPress), então os estilos vão pelas tags */
.pagina-artigo .entry-content p,
.pagina-artigo .entry-content ul,
.pagina-artigo .entry-content ol,
.pagina-artigo .entry-content blockquote {
  margin: 1rem 0;
}

.pagina-artigo .entry-content img {
  width: 100%;
  margin: 2rem 0;
}

.pagina-artigo .entry-content blockquote {
  padding-left: 1.5rem;
  border-left: 2px solid var(--verde-escuro);
}

.pagina-artigo .entry-content a {
  color: var(--verde-escuro);
  overflow-wrap: anywhere; /* links longos (endereços) quebram em vez de vazar */
}

/* Linha antes das notas de rodapé */
.pagina-artigo .entry-content hr {
  margin: 2rem 0;
  border: 0;
  border-top: 1px solid #808080;
}

/* Notas de rodapé: lista numerada, um pouco menor que o texto */
.pagina-artigo .entry-content hr + ol {
  padding-left: 1.4em;
  font-size: 0.9em;
}

.pagina-artigo .entry-content sup {
  font-size: 0.7em;
  line-height: 0; /* não aumenta a altura da linha */
}

/* Linha da fonte original, logo abaixo do "Escrito por" (mesma fonte do meta) */
.pagina-artigo .artigo__fonte {
  margin: 10px 0 0;
  font-family: var(--fonte-titulo);
  font-weight: 500;
  font-size: 1.08rem;
  line-height: 1.4;
  letter-spacing: 0;
}

.pagina-artigo .artigo__fonte a {
  color: var(--verde-escuro);
}

/* Caixa dos autores, separada por uma linha verde como no original */
.pagina-artigo .artigo__autores {
  margin-top: 60px;
  padding-top: 60px;
  border-top: 1px solid var(--verde-escuro);
}

@media (max-width: 1024px) {
  .pagina-artigo .artigo {
    padding-top: 31px;
  }
}

@media (max-width: 767px) {
  .pagina-artigo .artigo {
    padding-top: 23px;
  }

  .pagina-artigo .artigo__coluna {
    width: auto;
  }

  .pagina-artigo .artigo__titulo {
    font-size: calc(1.74 * 1.2 * min(1vh, 9px) + 1rem);
  }
}

/* ===== Publicações ===== */

.pagina-publicacoes .livros {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 60px;
  align-items: start;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pagina-publicacoes .livros-secao {
  padding-bottom: 95px;
}

@media (max-width: 1024px) {
  .pagina-publicacoes .livros {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .pagina-publicacoes .livros-secao {
    padding-bottom: 68px;
  }
}

@media (max-width: 767px) {
  /* Como no Quem somos: lista um pouco mais larga que o texto (15px de margem) */
  .pagina-publicacoes .livros {
    grid-template-columns: minmax(0, 1fr);
    margin: 0 calc(4vw - var(--margem));
  }

  .pagina-publicacoes .livros-secao {
    padding-bottom: 54px;
  }
}

/* ===== Videos e Podcasts ===== */

.pagina-videos .banner {
  --opacidade-banner: 0.2;
}

/* Espaços medidos no original: 72px acima do título "YouTube", 71px no fim */
.pagina-videos .banner + .secao {
  padding-top: calc(72px + var(--recorte));
  padding-bottom: 71px;
}

.pagina-videos .secao__titulo {
  margin-bottom: 34px;
  color: var(--verde-escuro);
}

.pagina-videos .botao--canal {
  margin-top: 56px;
}

.pagina-videos .videos-youtube {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 11px;
  align-items: start;
}


@media (max-width: 1024px) {
  .pagina-videos .banner + .secao {
    padding-top: calc(51px + var(--recorte));
    padding-bottom: 52px;
  }

  /* No tablet o original quebra "YouTube" em 2 linhas (defeito); aqui fica numa
     linha só e o espaço abaixo compensa, para os vídeos ficarem na mesma altura */
  .pagina-videos .secao__titulo {
    margin-bottom: 63px;
  }

}

@media (max-width: 767px) {
  .pagina-videos .banner + .secao {
    padding-top: calc(40px + var(--recorte));
    padding-bottom: 41px;
  }

  .pagina-videos .secao__titulo {
    margin-bottom: 16px;
  }

  .pagina-videos .videos-youtube {
    grid-template-columns: minmax(0, 1fr);
    gap: 46px;
  }

}

/* ===== Agenda ===== */

/* O subtítulo do banner da Agenda é mais estreito (500px no original) */
.pagina-agenda .banner__texto {
  max-width: 500px;
}

/* Sem eventos: só a mensagem, com um respiro normal de seção */
.pagina-agenda .agenda-secao {
  padding-bottom: 120px;
}

@media (max-width: 1024px) {
  .pagina-agenda .banner__texto {
    max-width: 41.6%;
  }
}

@media (max-width: 767px) {
  .pagina-agenda .banner__texto {
    max-width: none;
  }
}

/* ===== Página não encontrada (404) ===== */

.pagina-erro .erro {
  padding: 120px 0 160px;
}

.pagina-erro .erro__codigo {
  margin: 0 0 12px;
  font-family: var(--fonte-titulo);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.6;
}

.pagina-erro .erro__titulo {
  margin: 0 0 24px;
  color: var(--verde-escuro);
}

.pagina-erro .erro__texto {
  max-width: 34em;
  margin: 0 0 36px;
}

.pagina-erro .erro__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

@media (max-width: 767px) {
  .pagina-erro .erro {
    padding: 64px 0 96px;
  }
}

/* ===== Grades com cards alinhados (ver "subgrid" em componentes.css) =====
   Com subgrid, o espaço entre fileiras da grade também se espalharia por dentro
   de cada card. Por isso o espaço vertical fica zerado na grade e vira um
   espaço no fim de cada card. */
@supports (grid-template-rows: subgrid) {
  .home .artigos,
  .pagina-opiniao .lista-artigos,
  .pagina-publicacoes .livros,
  .pagina-quem-somos .equipe {
    row-gap: 0;
  }

  .pagina-publicacoes .livro-card,
  .pagina-quem-somos .pessoa-card {
    padding-bottom: 60px;
  }

  .pagina-opiniao .lista-artigos .post-card {
    padding-bottom: 65px;
  }

  .home .artigos {
    margin-bottom: 72px;         /* espaço até o botão "Ler mais artigos" */
  }
}

/* ===== Respiro no celular (home) ===== */
@media (max-width: 767px) {
  /* Botão do topo não gruda no texto */
  .home .hero .botao {
    margin-top: 28px;
  }

  /* Cards de artigo empilhados: espaço entre um e outro */
  .home .artigos .post-card {
    padding-bottom: 48px;
  }

  .home .post-card--destaque {
    margin-bottom: 0;
  }

  .home .artigos {
    margin-bottom: 24px;
  }
}

/* ===== Contato ===== */

/* Banner sem foto: só o azul-marinho do site com o recorte em V */
.banner--liso::after {
  display: none;
}

/* Contato: banner baixo, para o e-mail já aparecer na primeira tela */
.banner--liso {
  min-height: 0;
  /* o texto precisa terminar acima do recorte em V (senão o recorte corta a última linha) */
  padding-bottom: calc(var(--recorte) + 36px);
}

.banner--liso + .secao {
  padding-top: calc(48px + var(--recorte));
}

/* O título da página já é "Vamos conversar" e a página tem e-mail, endereço e redes:
   aqui o rodapé não repete esse bloco (fica só a faixa branca com o monograma) */
.pagina-contato .rodape {
  display: none;
}

@media (max-width: 767px) {
  .banner--liso {
    padding-bottom: calc(var(--recorte) + 24px);
  }

  .banner--liso + .secao {
    padding-top: calc(32px + var(--recorte));
  }
}

.pagina-contato .contato__destaque {
  max-width: 760px;
  padding-bottom: 64px;
}

.pagina-contato .contato__rotulo {
  margin: 0 0 8px;
  font-family: var(--fonte-titulo);
  font-weight: 500;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.6;
}

/* O e-mail em destaque, grande */
.pagina-contato .contato__email {
  display: inline-block;
  font-family: var(--fonte-titulo);
  font-weight: 900;
  font-size: min(calc(1.6 * 1.2vw + 1rem), 3rem);
  line-height: 1.1;
  color: var(--verde-escuro);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.pagina-contato .contato__email:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.15em;
}

.pagina-contato .contato__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
}

.pagina-contato .contato__aviso {
  font-family: var(--fonte-titulo);
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--verde-escuro);
}

.pagina-contato .contato__dica {
  max-width: 34em;
  margin: 24px 0 0;
  opacity: 0.8;
}

/* Três blocos lado a lado (empilham no celular) */
.pagina-contato .contato__blocos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px 60px;
  padding-top: 56px;
  border-top: 1px solid rgba(19, 19, 19, 0.12); /* linha na largura toda, acima dos 3 blocos */
}

.pagina-contato .contato__titulo {
  margin: 0 0 12px;
  color: var(--verde-escuro);
}

.pagina-contato .contato__bloco p {
  margin: 0 0 10px;
}

.pagina-contato .contato__lista {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pagina-contato .contato__lista li + li {
  margin-top: 6px;
}

.pagina-contato .contato__link {
  color: var(--verde-escuro);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.pagina-contato .contato {
  padding-bottom: 110px;
}

@media (max-width: 767px) {
  .pagina-contato .contato__blocos {
    grid-template-columns: minmax(0, 1fr);
  }

  .pagina-contato .contato__destaque {
    padding-bottom: 44px;
  }
}