/* ==========================================================================
   INAEC · PESSOAS
   Cartões de especialistas e conselho, e a página individual de cada pessoa.

   O PROBLEMA QUE ESTE ARQUIVO RESOLVE
   A versão anterior imprimia a biografia inteira dentro do cartão. Como as
   biografias variam de dois a cinco parágrafos, cada cartão terminava com uma
   altura diferente e a página parecia desmontada — cartões "jogados" pela
   grade, sem linha de base comum.

   A correção tem três partes, e nenhuma delas é decorativa:

   1. O cartão passa a mostrar SEMPRE a mesma coisa, na mesma ordem: retrato,
      nome, cargo, resumo curto, produção e botão.
   2. O resumo é limitado a quatro linhas (`line-clamp`), então o miolo tem
      altura máxima previsível.
   3. O rodapé é empurrado para baixo com `margin-top: auto`, o que alinha
      estrelas e botões de todos os cartões da fileira na mesma linha — é esse
      alinhamento, mais do que a altura em si, que faz a grade parecer
      construída em vez de improvisada.

   >>> ELEMENTOR: Loop Grid com um Loop Item único. As três regras acima
   correspondem a "Altura igual" + "Alinhar itens: esticar" no container.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · SEÇÕES
   -------------------------------------------------------------------------- */

.pessoas-secao + .pessoas-secao { margin-top: var(--space-xl); }

.pessoas-secao__titulo {
  font-family: var(--font-display);
  font-size: var(--fs-subtitle);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-subtitle);
  color: var(--color-heading);
  margin: 0 0 var(--space-sm);
  padding-bottom: var(--space-2xs);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: baseline;
  gap: var(--space-2xs);
}

.pessoas-secao__contagem {
  font-family: var(--font-body);
  font-size: var(--fs-legend);
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
  background: var(--inaec-nevoa);
  border-radius: var(--radius-pill);
  padding: 0.15em 0.7em;
}

/* --------------------------------------------------------------------------
   2 · GRADE
   `auto-fill` com mínimo de 17rem: em telas largas dá três ou quatro colunas,
   em tablet duas, no celular uma — sem uma única media query.
   -------------------------------------------------------------------------- */

.pessoas-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: var(--space-sm);
  align-items: stretch;
}

/* --------------------------------------------------------------------------
   3 · CARTÃO
   -------------------------------------------------------------------------- */

.pessoa-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  height: 100%;
  padding: var(--space-sm);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  transition: transform var(--duration) var(--ease),
              box-shadow var(--duration) var(--ease),
              border-color var(--duration) var(--ease);
}

.pessoa-card:focus-within {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--color-border-strong);
}


@media (hover: hover) {
  .pessoa-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--color-border-strong);
}
}

/* O retrato é redondo e pequeno: o cartão é uma ficha, não uma galeria. */
.pessoa-card__retrato {
  width: 4.5rem;
  height: 4.5rem;
  margin: 0;
  border-radius: 50%;
  overflow: hidden;
  background: var(--inaec-nevoa);
  flex-shrink: 0;
}

.pessoa-card__retrato img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Tratamento institucional: leve dessaturação, que volta ao normal no hover. */
  filter: saturate(0.82);
  transition: filter 420ms var(--anim-curva), transform 620ms var(--anim-curva);
}

@media (hover: hover) {
  .pessoa-card:hover .pessoa-card__retrato img { filter: saturate(1); transform: scale(1.05); }
}

.pessoa-card__retrato--vazio {
  display: grid;
  place-items: center;
  color: var(--color-text-muted);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.02em;
}

.pessoa-card__corpo { display: flex; flex-direction: column; gap: 0.35rem; }

.pessoa-card__nome {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: var(--fw-semibold);
  line-height: 1.3;
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  margin: 0;
}

.pessoa-card__cargo {
  font-size: var(--fs-legend);
  line-height: var(--lh-legend);
  color: var(--inaec-verde);
  font-weight: var(--fw-medium);
  margin: 0;
}

.pessoa-card__entidade { color: var(--color-text-muted); font-weight: var(--fw-regular); }

/*
   O corte em quatro linhas é o que dá altura previsível ao miolo.
   `line-clamp` sem prefixo já é padrão; o prefixado permanece para o Safari
   mais antigo, que ainda exige `-webkit-box`.
*/
.pessoa-card__resumo {
  font-size: var(--fs-legend);
  line-height: 1.55;
  color: var(--color-text-muted);
  margin: 0.25rem 0 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
}

/* `margin-top:auto` alinha o rodapé de todos os cartões da fileira. */
.pessoa-card__rodape {
  margin-top: auto;
  padding-top: var(--space-xs);
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xs);
  flex-wrap: wrap;
}

.pessoa-card__producao { display: flex; flex-direction: column; gap: 0.2rem; }

.pessoa-card__contagem {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

/* Estado vazio dentro do cartão: uma frase, não um contador em zero. */
.pessoa-card__vazio {
  font-size: 0.8125rem;
  font-style: italic;
  color: var(--color-text-muted);
  margin: 0;
  max-width: 12rem;
}

/* `margin-left:auto` mantém o botão à direita mesmo quando não há linha de
   produção ao lado — é o caso do HTML de reserva, antes de o banco responder. */
.pessoa-card__acao { flex-shrink: 0; margin-left: auto; }

/* --------------------------------------------------------------------------
   4 · ESTRELAS
   Cinco marcas fixas: as vazias permanecem visíveis para que a nota se leia
   como fração, e não como uma quantidade solta de estrelas.
   -------------------------------------------------------------------------- */

.estrelas { display: inline-flex; gap: 1px; line-height: 0; }

.estrelas__item svg {
  width: 0.9375rem;
  height: 0.9375rem;
  fill: color-mix(in srgb, var(--inaec-grafite) 14%, transparent);
  stroke: none;
  display: block;
}

.estrelas__item.esta-cheia svg { fill: var(--inaec-amarelo); }

/* --------------------------------------------------------------------------
   5 · CARTÃO DE DESTAQUE (direção)
   -------------------------------------------------------------------------- */

.pessoa-destaque {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: var(--space-md);
  align-items: start;
  padding: var(--space-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

.pessoa-destaque__retrato {
  margin: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--inaec-nevoa);
  aspect-ratio: 1;
}

.pessoa-destaque__retrato img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(0.82);
  transition: filter 420ms var(--anim-curva);
}

@media (hover: hover) {
  .pessoa-destaque:hover .pessoa-destaque__retrato img { filter: saturate(1); }
}

.pessoa-destaque__retrato--vazio {
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: var(--fw-semibold);
  color: var(--color-text-muted);
}

.pessoa-destaque__texto { display: flex; flex-direction: column; gap: var(--space-xs); }

.pessoa-destaque__nome {
  font-family: var(--font-display);
  font-size: var(--fs-title);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-title);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  margin: 0;
}

.pessoa-destaque__cargo {
  display: block;
  font-size: var(--fs-lead);
  color: var(--inaec-verde);
  font-weight: var(--fw-medium);
  margin-top: 0.15rem;
}

.pessoa-destaque__rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  flex-wrap: wrap;
  padding-top: var(--space-xs);
  border-top: 1px solid var(--color-border);
}

@media (max-width: 720px) {
  .pessoa-destaque { grid-template-columns: 1fr; }
  .pessoa-destaque__retrato { max-width: 12rem; }
}

/* --------------------------------------------------------------------------
   6 · PÁGINA INDIVIDUAL
   -------------------------------------------------------------------------- */

.perfil-topo {
  display: grid;
  /* Coluna fixa para o retrato: circular, ele precisa de largura previsível —
     uma coluna elástica produziria um círculo diferente a cada largura de tela. */
  grid-template-columns: 13.5rem minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid var(--color-border);
}

/*
 * Retrato circular, 1:1 exato.
 *
 * `aspect-ratio: 1` garante o quadrado mesmo que a foto de origem não seja
 * quadrada, e `object-fit: cover` recorta pelo centro em vez de distorcer.
 * Sem os dois juntos, um retrato retangular vira uma elipse — que é o defeito
 * clássico de aplicar apenas `border-radius: 50%`.
 */
.perfil-topo__retrato {
  margin: 0;
  inline-size: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--inaec-nevoa);
  /* Um anel claro separa o retrato do fundo cinza do portal sem pesar. */
  box-shadow: 0 0 0 6px var(--color-surface), var(--shadow-card);
}

.perfil-topo__retrato img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  /* Retrato costuma ter a cabeça no terço superior: puxar o enquadramento
     para cima evita cortar o queixo em fotos mais altas que largas. */
  object-position: 50% 25%;
  display: block;
}

.perfil-topo__retrato--vazio {
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-size: 3.25rem;
  font-weight: var(--fw-semibold);
  color: var(--color-text-muted);
}

.perfil-topo__texto { display: flex; flex-direction: column; gap: var(--space-xs); }

.perfil-topo__nome {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  color: var(--color-text);
  margin: 0;
}

.perfil-topo__cargo {
  font-size: var(--fs-lead);
  color: var(--inaec-verde);
  font-weight: var(--fw-medium);
  margin: 0;
}

.perfil-topo__producao {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  padding: var(--space-xs) 0;
}

.perfil-numeros { display: flex; gap: var(--space-sm); flex-wrap: wrap; margin: 0; }

.perfil-numeros__item { display: flex; align-items: baseline; gap: 0.4rem; }

.perfil-numeros__item dd {
  order: -1;
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  line-height: 1;
}

.perfil-numeros__item dt {
  font-size: var(--fs-legend);
  color: var(--color-text-muted);
}

/* Redes sociais: rótulo escrito, e não só ícone — um ícone solto obriga a
   adivinhar, e o ganho de espaço não compensa. */
.pessoa-redes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--space-2xs);
  flex-wrap: wrap;
}

.pessoa-rede {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-size: 0.8125rem;
  color: var(--color-text);
  text-decoration: none;
  background: var(--color-surface);
  transition: border-color var(--duration) var(--ease),
              color var(--duration) var(--ease),
              transform var(--duration) var(--ease);
}

.pessoa-rede svg {
  width: 0.9375rem; height: 0.9375rem;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

@media (hover: hover) {
  .pessoa-rede:hover {
  border-color: var(--inaec-verde);
  color: var(--inaec-verde);
  transform: translateY(-1px);
}
}

.perfil-bio { margin-top: var(--space-lg); }

.perfil-secao__titulo {
  font-family: var(--font-display);
  font-size: var(--fs-subtitle);
  font-weight: var(--fw-semibold);
  color: var(--color-heading);
  margin: 0 0 var(--space-sm);
  display: flex;
  align-items: baseline;
  gap: var(--space-2xs);
}

.perfil-producao { margin-top: var(--space-xl); }

.perfil-artigos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: var(--space-sm);
}

.perfil-artigo {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}

@media (hover: hover) {
  .perfil-artigo:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); }
}

.perfil-artigo__capa { margin: 0; aspect-ratio: 16 / 9; overflow: hidden; background: var(--inaec-nevoa); }
.perfil-artigo__capa img { width: 100%; height: 100%; object-fit: cover; display: block; }

.perfil-artigo__corpo { padding: var(--space-sm); display: flex; flex-direction: column; gap: 0.4rem; }

.perfil-artigo__data {
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0;
}

.perfil-artigo__titulo {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: var(--fw-semibold);
  line-height: 1.32;
  margin: 0;
}

.perfil-artigo__titulo a { color: var(--color-text); text-decoration: none; }
@media (hover: hover) {
  .perfil-artigo__titulo a:hover { color: var(--inaec-verde); }
}

.perfil-artigo__resumo {
  font-size: var(--fs-legend);
  line-height: 1.55;
  color: var(--color-text-muted);
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   7 · ESTADOS VAZIOS
   Uma frase que explica, e não um zero que parece defeito.
   -------------------------------------------------------------------------- */

.estado-vazio {
  padding: var(--space-lg);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--inaec-nevoa) 60%, transparent);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  align-items: center;
}

.estado-vazio__titulo {
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  margin: 0;
}

.estado-vazio__texto {
  font-size: var(--fs-legend);
  color: var(--color-text-muted);
  margin: 0;
  max-width: 46ch;
  line-height: 1.6;
}

/* Perfil inexistente: evita 404 quando um endereço muda. */
.perfil-ausente { padding: var(--space-xl) 0; max-width: 52ch; }

.perfil-ausente__titulo {
  font-family: var(--font-display);
  font-size: var(--fs-title);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  margin: 0 0 var(--space-xs);
}

.perfil-ausente__texto { color: var(--color-text-muted); line-height: var(--lh-body); margin: 0 0 var(--space-sm); }
.perfil-ausente__acoes { display: flex; gap: var(--space-2xs); flex-wrap: wrap; }

@media (max-width: 860px) {
  .perfil-topo {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
    justify-items: start;
    padding-bottom: var(--space-lg);
  }
  .perfil-topo__retrato { inline-size: 9.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .pessoa-card,
  .perfil-artigo,
  .pessoa-rede,
  .pessoa-card__retrato img { transition: none; }
  @media (hover: hover) {
  .pessoa-card:hover,
  .perfil-artigo:hover,
  .pessoa-rede:hover { transform: none; }
}
  @media (hover: hover) {
  .pessoa-card:hover .pessoa-card__retrato img { transform: none; }
}
}

/* --------------------------------------------------------------------------
   8 · CARREGAMENTO
   Um estado explícito, e não uma página em branco: o perfil vem do banco, e
   entre a abertura e a resposta existe um intervalo real.
   -------------------------------------------------------------------------- */

.perfil-carregando { padding: var(--space-2xl) 0; text-align: center; }

.miv-carregando {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--fs-legend);
  color: var(--color-text-muted);
  margin: 0;
}

.miv-carregando::before {
  content: "";
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  border-top-color: var(--inaec-verde);
  animation: girar 720ms linear infinite;
}

@keyframes girar { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .miv-carregando::before { animation-duration: 2.4s; }
}