/* =========================================================
   componentes.css — topo, rodapé, botões e blocos reutilizáveis
   ========================================================= */

/* ===== Contêiner central =====
   Limita o conteúdo a 1200px e centraliza, com margem lateral de 4vw. */
.conteiner {
  width: 100%;
  max-width: calc(var(--largura-max) + 2 * var(--margem));
  margin: 0 auto;
  padding: 0 var(--margem);
}

/* ===== Topo ===== */

.topo {
  position: fixed; /* fica sempre visível no alto da tela */
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  height: var(--altura-topo);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  padding: 0 var(--margem-topo);
  background: var(--azul-marinho);
  /* Como no original, o topo encolhe ao rolar (136px -> 102px no desktop).
     O fundo azul NÃO tem transição de propósito: no original ele aparece aos
     poucos e o texto do banner passa visível por trás do logo nesse instante. */
  transition: height 0.3s;
}

.topo.rolado {
  height: var(--altura-topo-rolado);
}

/* Páginas que começam com banner escuro (home e internas, como no original):
   topo transparente até rolar. A classe fica no <body>, assim o bloco do
   header continua idêntico em todas as páginas (no WordPress: body_class). */
.topo-sobre-banner .topo:not(.rolado):not(.menu-aberto) {
  background: transparent;
}

/* Páginas sem banner (ex.: artigos): empurra o conteúdo para baixo do topo */
body:not(.topo-sobre-banner) main {
  padding-top: var(--altura-topo);
}

.topo__logo {
  flex-shrink: 0;
}

.topo__logo img {
  height: 50px; /* max-height do logo no original */
  width: auto;
}

.menu__lista {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu__item {
  margin: 0 0.7vw; /* 1,4vw entre itens, como no original */
}

.menu__item:last-child {
  margin-right: 0;
}

.menu__link {
  display: block;
  padding: 0.1em 0;
  color: var(--branco);
  text-decoration: none;
  white-space: nowrap;
}

/* Sublinhado de 1px no item ativo (e ao passar o mouse).
   Como no original, é um fundo de 1px de altura desenhado a 0,1em da base
   da caixa do link, por isso fica mais afastado do texto que um underline comum. */
.menu__link:hover,
.menu__link.ativo {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: repeat-x;
  background-size: 1px 1px;
  background-position: 0 calc(100% - 0.1em);
}

/* Botão ☰: escondido no desktop. As 3 barras são <span> desenhados em CSS. */
.menu-botao {
  display: none;
  position: relative;
  z-index: 2;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--branco);
  cursor: pointer;
}

.menu-botao__barra {
  display: block;
  width: 28px;
  height: 1px;
  margin: 7px auto;
  background: currentColor;
  transition: transform 0.25s, opacity 0.25s;
}

/* Menu aberto: as barras viram um "X" */
.menu-aberto .menu-botao__barra:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.menu-aberto .menu-botao__barra:nth-child(2) {
  opacity: 0;
}

.menu-aberto .menu-botao__barra:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* ===== Botões ===== */

.botao {
  /* Botão em "pílula", no estilo Apple: cantos totalmente arredondados,
     largura pelo texto e altura confortável para o dedo (44px) */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  min-height: 44px;
  padding: 0 1.4em;
  border: 0;
  border-radius: 980px;
  background: var(--verde-escuro);
  color: var(--branco);
  font-family: var(--fonte-titulo);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.2;
  letter-spacing: 0;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.15s;
}

.botao:hover {
  background: #245459; /* verde um pouco mais claro ao passar o mouse */
}

.botao:active {
  transform: scale(0.98); /* leve "afundada" ao clicar */
}

/* Contorno do foco no teclado em verde (o branco sumiria no fundo bege) */
.botao:focus-visible {
  outline: 2px solid var(--verde-escuro);
  outline-offset: 3px;
}

/* Botão menor (cards da equipe e dos livros) */
.botao--medio {
  min-height: 40px;
  padding: 0 1.2em;
  font-size: 0.94rem;
}

/* Variante clara (sobre fundo escuro, ex.: hero da home) */
.botao--claro {
  background: var(--branco);
  color: var(--azul-marinho);
}

.botao--claro:hover {
  background: rgba(255, 255, 255, 0.85);
}

.botao--claro:focus-visible {
  outline-color: var(--branco);
}

/* Variante com contorno, para ações secundárias como "Leia mais" */
.botao--contorno {
  min-height: 36px;
  padding: 0 1.1em;
  background: transparent;
  color: var(--verde-escuro);
  box-shadow: inset 0 0 0 1px var(--verde-escuro); /* borda que não muda o tamanho */
  font-size: 0.9rem;
}

.botao--contorno:hover {
  background: var(--verde-escuro);
  color: var(--branco);
}

/* Centralizado embaixo de uma seção ("Ler mais artigos", "Visite o canal") */
.botao--largo {
  display: flex;
  width: fit-content;
  min-width: 220px;
  margin-left: auto;
  margin-right: auto;
}

/* ===== Seções =====
   Espaçamentos medidos no original em 1440px. */

.secao {
  padding: 72px 0;
}

.secao--branca {
  background: var(--branco);
}

/* Título de seção: verde-escuro nas seções bege, preto nas brancas */
.secao__titulo {
  margin: 0 0 51px;
  color: var(--verde-escuro);
}

.secao--branca .secao__titulo {
  color: var(--texto);
}

/* ===== Banner (hero da home e topo das páginas internas) =====
   Foto de fundo + camada azul-marinho a 40% + recorte em "V" no pé. */

.banner {
  position: relative;
  z-index: 1; /* fica por cima da seção seguinte, que entra por baixo do recorte */
  margin-bottom: calc(-1 * var(--recorte));
  background: var(--azul-marinho);
  color: var(--branco);
  /* Recorte em "V": os lados descem até 6vw do fim e o vértice fica a 75% da largura */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--recorte)), 75% 100%, 0 calc(100% - var(--recorte)));
}

/* A seção logo depois do banner sobe por baixo do recorte, para que o "V"
   mostre a cor dela (como no original), e compensa esse espaço no padding */
.banner + .secao {
  padding-top: calc(95px + var(--recorte));
}

.banner__imagem {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* preenche a área sem distorcer, cortando as sobras */
}

/* Camada azul por cima da foto (no original: azul-marinho com opacidade 0,4) */
.banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--azul-marinho);
  opacity: var(--opacidade-banner, 0.3); /* 0,3 nas internas; a home usa 0,4 */
}

.banner__conteudo {
  position: relative;
  z-index: 2; /* texto acima da foto e da camada azul */
}

.banner__rotulo {
  margin: 0;
}

/* Banner das páginas internas: rótulo, título (h1 com tamanho de h2) e texto.
   Medidas do original: rótulo 58px abaixo do topo e 183px de espaço no pé. */
.banner--pagina {
  /* Altura mínima de ~38% da tela, como no original: só aparece em banners com
     pouco texto (ex.: "Livros") e em telas mais estreitas */
  min-height: 38vh;
  padding: calc(var(--altura-topo) + 58px) 0 183px;
}

.banner__titulo {
  max-width: 600px;
  margin: 20px 0 0;
  color: var(--branco);
}

.banner__texto {
  max-width: 600px;
  margin: 26px 0 0;
}

/* ===== Card de artigo (formato do loop do WordPress) ===== */

.post-card__imagem img {
  width: 100%;
}

.post-card__autor,
.post-card__data {
  margin: 13px 0 0;
  font-size: 13px;
  line-height: 1.4;
  opacity: 0.7;
}

.post-card__titulo {
  margin: 10px 0 0;
  font-family: var(--fonte-texto);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.2;
  letter-spacing: 0.02em;
  overflow-wrap: break-word;
}

.post-card__titulo a {
  text-decoration: none;
}

.post-card__resumo {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.4;
  /* Mostra só as primeiras linhas e termina em "…"; o texto completo fica no artigo */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  line-clamp: 6;
  overflow: hidden;
}

/* No card, os parágrafos do resumo viram um texto corrido só: assim o corte
   em "…" (line-clamp) funciona sempre, sem deixar linha cortada ao meio */
.post-card__resumo p {
  display: inline;
  margin: 0;
}

.post-card__resumo p + p::before {
  content: " ";
}

.post-card__link {
  margin-top: 16px;
}

.post-card__titulo a:hover {
  text-decoration: underline;
}

/* ===== Card de pessoa (Quem somos) ===== */

.pessoa-card__foto {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%; /* foto redonda */
  object-fit: cover;
}

.pessoa-card__nome {
  margin: 25px 0 0;
  color: var(--verde-escuro);
  /* tamanho 1,6 na fórmula do original: 25,6px no desktop */
  font-size: min(calc(0.6 * 1.2vw + 1rem), 1.6rem);
  line-height: 1.164;
}

.pessoa-card__oab,
.pessoa-card__curriculo {
  margin: 0;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: normal; /* no original este texto não tem o 0,02em do corpo */
}

.pessoa-card__oab {
  margin-top: 25px;
}

.pessoa-card__link {
  margin-top: 26px;
}

/* ===== Card de vídeo ===== */

.video-card__video {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: #000;
}

/* ===== Rodapé "Vamos conversar" ===== */

.rodape {
  background: var(--branco);
  /* espaços internos medidos no original (mudam no tablet e no celular) */
  padding: 42px 0 80px;
}

.rodape__interno {
  display: grid;
  grid-template-columns: 103px 1fr auto; /* monograma | contato | redes */
  gap: 0 47px;
  align-items: start;
}

.rodape__monograma {
  width: 103px;
  height: auto;
}

.rodape__titulo {
  margin: 0 0 0.15em;
  color: var(--texto);
}

.rodape__contato p {
  max-width: 26em; /* faz o endereço quebrar depois de "Savassi," como no original */
  margin: 0;
}

.rodape__contato a {
  text-decoration: none;
}

.rodape__contato a:hover {
  text-decoration: underline;
}

.redes {
  display: flex;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  align-self: center; /* centraliza os ícones na altura do bloco */
  margin-right: 11px; /* no original os ícones terminam 11px antes da borda do conteúdo */
}

/* Ícone quadrado com borda, como o estilo "square outline" do original */
.redes a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 2px solid var(--texto);
  border-radius: 15%;
  color: var(--texto);
  transition: opacity 0.2s;
}

.redes a:hover {
  opacity: 0.6;
}

.redes svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* ===== Telas menores ===== */

/* Abaixo de 1024px o menu não cabe ao lado do logo e vira o botão ☰.
   Medidas do original em 768px: topo de 142px que encolhe para 91px. */
@media (max-width: 1024px) {
  :root {
    --margem-topo: 6vw;          /* margem lateral do topo no celular/tablet */
    --altura-topo: 142px;
    --altura-topo-rolado: 91px;
  }

  /* Como no original: ☰ à esquerda e logo à direita (o botão já vem antes no HTML) */
  .menu-botao {
    display: block;
    width: 47px;
    height: 37px;
  }

  .menu-botao__barra {
    margin: 7px 0;
  }

  /* Menu em tela cheia, como o overlay do original */
  .menu {
    position: fixed;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;           /* lista centralizada na vertical... */
    /* topo duplo em cima: no original a lista fica um pouco abaixo do centro */
    padding: calc(2 * var(--altura-topo)) 9vw var(--altura-topo); /* alinhada a 9vw da borda */
    background: var(--azul-marinho);
    visibility: hidden; /* escondido também para o teclado e leitor de tela */
    opacity: 0;
    transition: opacity 0.25s, visibility 0.25s;
  }

  .menu-aberto .menu {
    visibility: visible;
    opacity: 1;
  }

  .menu__lista {
    flex-direction: column;
    align-items: flex-start;
  }

  .menu__item,
  .menu__item:last-child {
    margin: 3vw 0;
  }

  .menu__link {
    padding: 0; /* sem o respiro do desktop: espaçamento igual ao original */
    font-size: 6vmin;
    line-height: 1;
  }

  .topo__logo {
    position: relative;
    z-index: 2; /* logo continua visível por cima do menu aberto */
  }

  /* Banner interno no tablet (medidas do original em 768px) */
  .banner--pagina {
    padding: calc(var(--altura-topo) + 31px) 0 113px;
  }

  .banner__titulo {
    max-width: 50%;
    margin-top: 0;
  }

  .banner__texto {
    max-width: 50%;
    margin-top: 16px;
  }

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

  .rodape {
    padding: 17px 0 100px;
  }

  /* Espaços entre foto, nome, texto e botão no tablet: 19 / 19 / 20px */
  .pessoa-card__nome {
    margin-top: 19px;
  }

  .pessoa-card__oab {
    margin-top: 19px;
  }

  .pessoa-card__link {
    margin-top: 20px;
  }

  .botao--medio {
    font-size: 0.91rem;
  }
}

/* Celular (original em 375px: topo de 82px -> 69px, logo com 30px de altura) */
@media (max-width: 767px) {
  :root {
    --altura-topo: 82px;
    --altura-topo-rolado: 69px;
  }

  .topo__logo img {
    height: 30px;
  }

  /* Banner interno no celular (medidas do original em 375px) */
  .banner--pagina {
    padding: calc(var(--altura-topo) + 15px) 0 76px;
  }

  .banner__titulo,
  .banner__texto {
    max-width: none;
  }

  .banner__titulo {
    margin-top: 17px;
  }

  .banner__texto {
    margin-top: 0;
  }

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

  /* Espaços entre foto, nome, texto e botão no celular: 34 / 35 / 35px */
  .pessoa-card__nome {
    margin-top: 34px;
    font-size: calc(0.6 * 1.2 * min(1vh, 9px) + 1rem);
  }

  .pessoa-card__oab {
    margin-top: 35px;
  }

  .pessoa-card__link {
    margin-top: 35px;
  }

  .botao--medio {
    font-size: 0.94rem;
  }

  .menu__link {
    font-size: 8.5vmin;
  }

  /* Rodapé no celular, como no original: monograma ao lado do texto
     e os ícones centralizados numa linha embaixo */
  .rodape__interno {
    /* minmax(0, 1fr) e espaço que encolhe (41px em 375px): cabe até em telas de 320px */
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 50px min(41px, 11vw);
    align-items: center;
  }

  /* Em último caso, o e-mail (sem espaços) pode quebrar em qualquer ponto */
  .rodape__contato a {
    overflow-wrap: anywhere;
  }

  .rodape {
    padding: 80px 0 20px;
  }

  /* Como no original, o texto do rodapé pode avançar sobre a margem direita */
  .rodape__contato {
    margin-right: calc(-1 * var(--margem));
  }

  .rodape__monograma {
    width: 82px;
  }

  .redes {
    grid-column: 1 / -1; /* ocupa as duas colunas */
    justify-self: center;
    margin-right: 0;
  }
}

/* ===== Card de artigo — variante da lista da Opinião =====
   No original a lista usa autor e título em Inter Tight (título verde, tamanho de h4). */

.post-card--lista .post-card__imagem img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.post-card__meta {
  margin: 18px 0 0;
  font-family: var(--fonte-titulo);
  font-weight: 500;
  font-size: 1.08rem;
  line-height: 1.3;
  letter-spacing: 0;
}

.post-card--lista .post-card__titulo {
  margin-top: 10px;
  font-family: var(--fonte-titulo);
  font-weight: 900;
  font-size: min(calc(0.57 * 1.2vw + 1rem), 1.57rem);
  line-height: 1.33;
  letter-spacing: 0;
  color: var(--verde-escuro);
}

.post-card--lista .post-card__resumo {
  margin-top: 12px;
  font-size: 16px;
  line-height: 1.8;
  -webkit-line-clamp: 5;
  line-clamp: 5;
}



/* ===== Paginação da lista ("Publicações mais recentes / mais antigas") ===== */

.paginacao {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  margin-top: 80px;
}

.paginacao__link {
  text-decoration: none;
}

.paginacao__link:hover {
  text-decoration: underline;
}

/* Sem "mais recentes" (página 1), o link de "mais antigas" fica à direita */
.paginacao__link--antigas {
  margin-left: auto;
}

/* ===== Caixa do autor (fim do artigo) ===== */

.autor-box {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 0 20px;
  align-items: start;
}

.autor-box + .autor-box {
  margin-top: 28px;
}

.autor-box__foto {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
}

.autor-box__foto--vazia {
  display: block;
  background: rgba(19, 19, 19, 0.08);
}

.autor-box__nome {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-weight: 500;
  font-size: 1.1rem;
  line-height: 1.3;
  letter-spacing: 0;
}

.autor-box__bio {
  margin: 6px 0 0;
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: normal;
}

/* ===== Faixa "Anterior / Próximo" (largura toda, como no original) ===== */

.artigo-nav {
  display: grid;
  /* metade para cada link, sem espaço entre eles; minmax(0, 1fr) mantém as metades iguais */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  padding: 43px var(--margem);
  background: var(--fundo-claro);
}

.artigo-nav__link {
  display: flex;
  align-items: center;
  gap: 18px;
  color: var(--texto);
  text-decoration: none;
}

.artigo-nav__link--proximo {
  grid-column: 2;
  justify-content: flex-end;
  text-align: right;
}

/* Primeiro e último artigo só têm um vizinho: o link usa a faixa inteira
   (senão o título fica espremido em meia largura, principalmente no celular) */
.artigo-nav__link:only-child {
  grid-column: 1 / -1;
}

.artigo-nav__titulo {
  font-family: var(--fonte-titulo);
  font-weight: 900;
  font-size: min(calc(0.57 * 1.2vw + 1rem), 1.57rem);
  line-height: 1;
}

.artigo-nav__link:hover .artigo-nav__titulo {
  text-decoration: underline;
}

.artigo-nav__seta {
  flex-shrink: 0;
  width: 12px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

/* Celular: regras que precisam vir DEPOIS dos estilos gerais acima
   (com a mesma especificidade, a regra que aparece por último vence) */
@media (max-width: 767px) and (orientation: portrait) {
  .artigo-nav__titulo {
    font-size: calc(0.57 * 1.2 * min(1vh, 9px) + 1rem);
  }

  .post-card--lista .post-card__titulo {
    font-size: calc(0.57 * 1.2 * min(1vh, 9px) + 1rem);
  }
}

/* ===== Card de livro (Publicações) =====
   Capa e textos ocupam 75% da coluna, centralizados, como no original.
   A moldura branca já vem desenhada na imagem de cada capa. */

.livro-card {
  text-align: center;
}

.livro-card__capa {
  display: block;
  width: 75%;
  aspect-ratio: 191 / 256;
  margin: 0 auto;
  object-fit: cover;
}

.livro-card__titulo {
  width: 100%;                 /* a coluna inteira: palavras longas cabem sem cortar */
  margin: 20px auto 0;
  color: var(--verde-escuro);
  /* um pouco menor que o original (25,6px), para os títulos longos ficarem equilibrados */
  font-size: min(calc(0.25 * 1.2vw + 1rem), 1.25rem);
  line-height: 1.2;
  text-wrap: balance;          /* divide as linhas em tamanhos parecidos */
  overflow-wrap: break-word;   /* último recurso, só se uma palavra não couber */
}

.livro-card__volume {
  width: 75%;
  margin: 11px auto 0;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: normal;
}

.livro-card__link {
  margin-top: 20px;
}

/* ===== Vídeo do YouTube (Videos e Podcasts) ===== */

.video-card__iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
  background: #000;
}

.video-card__titulo {
  width: 87%;
  margin: 36px 0 0;
  font-family: var(--fonte-texto);
  font-weight: 700;
  font-size: inherit;
  line-height: 1.8;
  letter-spacing: 0.02em;
}

/* ===== Evento (Agenda) ===== */

.eventos {
  margin: 0;
  padding: 0;
  list-style: none;
}

.evento {
  display: grid;
  grid-template-columns: 180px 1fr; /* data à esquerda, título e local à direita */
  gap: 2rem;
  padding: 1.6rem 0;
  border-top: 1px solid rgba(19, 19, 19, 0.2);
}

.evento__data {
  font-family: var(--fonte-titulo);
  font-weight: 500;
  color: var(--verde-escuro);
}

.evento__titulo {
  margin: 0 0 0.3rem;
  color: var(--verde-escuro);
  font-size: min(calc(0.57 * 1.2vw + 1rem), 1.57rem);
}

.evento__local {
  margin: 0;
  font-style: italic;
}

.eventos__vazio {
  margin: 0;
  font-size: 1.15rem;
}

.eventos__vazio span {
  display: block;
  margin-top: 6px;
  font-size: 1rem;
  opacity: 0.75;
}

/* Quando houver eventos na lista, a mensagem de "nenhum evento" some sozinha */
.eventos:not(:empty) + .eventos__vazio {
  display: none;
}

@media (max-width: 1024px) {
  .livro-card__titulo { margin-top: 17px; }
  .livro-card__volume { margin-top: 8px; }
  .livro-card__link { margin-top: 15px; }
  .video-card__titulo { margin-top: 55px; }
}

@media (max-width: 767px) {
  .livro-card__titulo { margin-top: 28px; }
  .livro-card__volume { margin-top: 14px; }
  .livro-card__link { margin-top: 27px; }
  .video-card__titulo { width: auto; margin-top: 60px; }

  .evento {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
}

@media (max-width: 767px) and (orientation: portrait) {
  .livro-card__titulo { font-size: calc(0.6 * 1.2 * min(1vh, 9px) + 1rem); }
}

/* ===== Seletor de idioma =====
   Pequeno e discreto: mesma fonte dos botões, mesmo sublinhado fino do menu. */

.menu__item--idioma {
  display: flex;
  align-items: center;
  margin-left: 1.6vw;
}

.idioma {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--fonte-titulo);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--branco);
}

.idioma__opcao {
  padding: 0.15em 0;
  opacity: 0.6;
  cursor: default;
}

.idioma__opcao--ativa {
  opacity: 1;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: repeat-x;
  background-size: 1px 1px;
  background-position: 0 100%;
}

.idioma__separador {
  opacity: 0.35;
}

/* Entre 1025 e 1250px o menu (com Contato e o seletor de idioma) não cabe ao lado
   do logo no tamanho normal: só nessa faixa, logo, letras e espaços um pouco menores */
@media (min-width: 1025px) and (max-width: 1250px) {
  .topo__logo img {
    height: 42px;
  }

  .menu__item {
    margin: 0 0.5vw;
  }

  .menu__link {
    font-size: 0.95rem;
  }

  .menu__item--idioma {
    margin-left: 1vw;
  }
}

/* Celular/tablet: dentro do menu ☰, abaixo dos links */
@media (max-width: 1024px) {
  .menu__item--idioma,
  .menu__item--idioma:last-child {
    margin: 6vw 0 0;
  }

  .idioma {
    font-size: 4vmin;
  }
}

/* ===== Alinhamento dos cards (Publicações e Quem somos) =====
   "subgrid": cada card usa as mesmas linhas da grade da página, então título,
   volume/OAB, texto e botão de todos os cards de uma fileira ficam na mesma altura. */

@supports (grid-template-rows: subgrid) {
  .livro-card {
    display: grid;
    grid-row: span 4;              /* capa | título | editora e ano | botão */
    grid-template-rows: subgrid;
    row-gap: 0;
    justify-items: center;
    align-self: stretch;           /* ocupa a fileira inteira (a grade alinha pelo topo) */
  }

  .pessoa-card {
    display: grid;
    grid-row: span 5;              /* foto | nome | OAB | currículo | botão */
    grid-template-rows: subgrid;
    row-gap: 0;
    justify-items: start;
    align-self: stretch;
  }

  /* Cards de artigo (home e Opinião): imagem | autor | título | resumo | botão */
  .post-card {
    display: grid;
    grid-row: span 5;
    grid-template-rows: subgrid;
    row-gap: 0;
    align-self: stretch;
    align-content: start;
  }

  .livro-card__link,
  .pessoa-card__link,
  .post-card__link {
    align-self: start;             /* botões no topo da última linha: todos alinhados */
    justify-self: start;
  }

  .livro-card__link {
    justify-self: center;
  }
}

/* Imagens dos cards da home na mesma proporção, para as fileiras ficarem simétricas */
.post-card:not(.post-card--lista) .post-card__imagem img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Linha "Editora · Ano" dos livros: igual em todos os cards, pequena e discreta */
.livro-card__meta {
  width: 100%;
  margin: 10px 0 0;
  font-family: var(--fonte-titulo);
  font-weight: 500;
  font-size: 0.85rem;
  line-height: 1.4;
  letter-spacing: 0.02em;
  opacity: 0.7;
}

/* ===== Card de artigo em destaque (home) =====
   Imagem grande à esquerda, texto à direita; ocupa a largura toda da grade. */

.post-card--destaque {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 7fr 5fr;
  grid-template-rows: auto;
  grid-row: auto;                /* não usa as linhas compartilhadas dos outros cards */
  column-gap: 56px;
  align-content: start;
  align-items: start;
  margin-bottom: 72px;           /* espaço até os 3 cards menores */
}

.post-card--destaque > * {
  grid-column: 2;
}

.post-card--destaque .post-card__imagem {
  grid-column: 1;
  grid-row: 1 / span 5;
  align-self: start;             /* topo da imagem alinhado ao topo do texto */
}

.post-card--destaque .post-card__imagem img {
  aspect-ratio: 3 / 2;
}

.post-card--destaque .post-card__autor {
  margin-top: 0;
}

.post-card--destaque .post-card__titulo {
  margin-top: 14px;
  font-size: min(calc(1.3 * 1.2vw + 1rem), 2.4rem);
  line-height: 1.15;
}

.post-card--destaque .post-card__resumo {
  margin-top: 16px;
  font-size: 1rem;
  line-height: 1.6;
  -webkit-line-clamp: 5;
  line-clamp: 5;
}

.post-card--destaque .post-card__link {
  margin-top: 22px;
}

/* Celular: destaque empilhado (imagem em cima) */
@media (max-width: 767px) {
  .post-card--destaque {
    grid-template-columns: minmax(0, 1fr);
  }

  .post-card--destaque > *,
  .post-card--destaque .post-card__imagem {
    grid-column: 1;
    grid-row: auto;
  }

  .post-card--destaque .post-card__autor {
    margin-top: 16px;
  }
}

/* Links extras do rodapé (Migalhas, IBERC): menores, na fonte dos botões */
.rodape__contato .rodape__links {
  margin-top: 12px;
  font-family: var(--fonte-titulo);
  font-weight: 500;
  font-size: 0.9rem;
  letter-spacing: 0;
}

.rodape__links span {
  margin: 0 0.4em;
  opacity: 0.5;
}

.rodape__links a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}

/* Capa e título do livro também levam à página da editora */
.livro-card__capa-link {
  display: block;
  transition: transform 0.2s, opacity 0.2s;
}

.livro-card__capa-link:hover {
  transform: translateY(-3px);   /* a capa "sobe" de leve ao passar o mouse */
}

.livro-card__titulo a {
  color: inherit;
  text-decoration: none;
}

.livro-card__titulo a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

/* ===== Faixa "Anterior / Próximo": etiqueta + título =====
   min-width: 0 deixa o texto quebrar dentro da sua metade (sem isso, no Safari
   do iPhone o título "vazava" por cima do link vizinho). */
.artigo-nav__link,
.artigo-nav__texto {
  min-width: 0;
}

.artigo-nav__texto {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.artigo-nav__rotulo {
  font-family: var(--fonte-titulo);
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.6;
}

.artigo-nav__titulo {
  overflow-wrap: break-word;
}

/* Celular: um link embaixo do outro, cada um com a largura toda */
@media (max-width: 767px) {
  .artigo-nav {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 28px;
    padding-top: 36px;
    padding-bottom: 36px;
  }

  .artigo-nav__link--proximo {
    grid-column: 1;
  }

  .artigo-nav__link--anterior + .artigo-nav__link--proximo {
    padding-top: 28px;
    border-top: 1px solid rgba(19, 19, 19, 0.12);
  }
}

/* ===== Respiro no celular ===== */
@media (max-width: 767px) {
  /* Rodapé: monograma em cima e texto com a largura toda (antes ficava espremido ao lado) */
  .rodape__interno {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    align-items: start;
  }

  .rodape__monograma {
    width: 64px;
  }

  .rodape__contato {
    margin-right: 0;
  }

  .redes {
    grid-column: auto;
    justify-self: start;
  }

  /* Banner das páginas internas: texto não gruda no título */
  .banner__texto {
    margin-top: 16px;
  }
}

/* Autor sem mini-bio (ex.: coautores externos): nome centralizado na altura da foto */
.autor-box:not(:has(.autor-box__bio)) {
  align-items: center;
}

/* Menu do celular/tablet em telas baixas (tablet deitado, celular pequeno): menos espaço
   acima e entre os itens, e o menu rola se ainda assim não couber. A margem automática
   centraliza a lista sem cortar o começo dela quando há rolagem. */
@media (max-width: 1024px) and (max-height: 820px) {
  .menu {
    align-items: flex-start;
    overflow-y: auto;
    padding-top: calc(var(--altura-topo) + 16px);
    padding-bottom: 24px;
  }

  .menu__lista {
    margin: auto 0;
  }

  .menu__item:not(.menu__item--idioma) {
    margin: min(3vw, 1.6vh) 0;
  }

  .menu__link {
    font-size: min(6vmin, 5vh);
  }

  .menu__item--idioma,
  .menu__item--idioma:last-child {
    margin-top: min(6vw, 4vh);
  }
}