/* ==========================================================================
   CEUA — Comissão de Ética no Uso de Animais.

   Referência: https://www2.unisuam.edu.br/ceua. De lá vêm o ritmo das seções
   (faixa azul, seção clara, faixa azul…) e a tabela do cronograma; o desenho é o
   do site novo — accordion de components.css, .btn, .link-arrow e os tokens.

   Escrito mobile-first: tudo empilha em uma coluna e o desktop abre os membros
   em três e a tabela na largura cheia.
   ========================================================================== */

/* ==========================================================================
   Topo com foto — o `.HeaderInterna` do www2

   Mesma receita do hero da home: a foto é um <img> com `object-fit: cover`
   preenchendo a seção, o texto vem por cima em `position: relative` e um
   pseudo-elemento escurece o meio de campo.
   ========================================================================== */

.ceua-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  /* 15rem no mobile e 18.5rem no desktop: cabe a trilha, o H1 em duas linhas e
     o subtítulo sem que a foto vire uma tarja. */
  min-height: 15rem;
  padding-block: var(--sp-8);
  overflow: hidden;
  color: var(--white);
}

@media (min-width: 64rem) {
  .ceua-hero {
    min-height: 18.5rem;
  }
}

.ceua-hero__media {
  position: absolute;
  inset: 0;
}

.ceua-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* A foto é panorâmica (3.24:1) e a seção é bem mais alta em proporção: no
     mobile o `cover` recorta as laterais, e centralizar deixa no quadro o grupo
     do meio em vez de meia pessoa de cada lado. */
  object-position: center;
}

/**
 * Escurecimento em degradê, mais forte à esquerda, onde fica o texto.
 *
 * NÃO É ENFEITE, é o que faz o branco passar em AA. A foto já vem escurecida da
 * origem, mas os brilhos (dentes, camiseta branca) chegam a 2,81:1 contra o
 * branco na faixa que o texto ocupa — abaixo até do mínimo de texto grande. Com
 * os 42% que o degradê garante ali, o pior pixel vai a 7,2:1. À direita afrouxa
 * para 28%, que é onde estão os rostos e não há texto por cima.
 */
.ceua-hero::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgb(0 0 0 / 62%) 0%,
    rgb(0 0 0 / 45%) 50%,
    rgb(0 0 0 / 28%) 100%
  );
  content: "";
}

.ceua-hero__inner {
  position: relative;
  z-index: 1;
}

/* O .page-intro traz as cores de página clara; aqui o fundo é foto. */
.ceua-hero .page-head__title,
.ceua-hero .page-head__sub {
  color: var(--white);
}

.ceua-hero .page-head__title {
  /* A sombra segura os brilhos que sobram da foto sob as hastes das letras. */
  text-shadow: 0 1px 12px rgb(0 0 0 / 45%);
}

/* ==========================================================================
   Faixa azul — as três seções que no www2 têm fundo #01708b

   --us-blue-light (#076b8f) é o mesmo tom, já nos tokens. As cores de texto
   seguem o que .section--dark faz em base.css: trocar --color-link junto, para
   que .btn--outline e .link-arrow acompanhem sem regra própria.
   ========================================================================== */

.ceua-faixa {
  --color-heading: var(--white);
  --color-text: var(--white);
  --color-text-muted: var(--gray-200);
  --color-link: var(--white);
  --color-border: rgba(255, 255, 255, 0.24);
  /* O rótulo do .btn--outline no hover: o fundo vira branco, então o texto
     precisa contrastar com ELE, e não com a faixa. Mesmo raciocínio das faixas
     de .media-block em components.css. */
  --btn-color-rotulo-hover: var(--us-blue-light);
  background: var(--us-blue-light);
  color: var(--white);
}

.ceua-faixa .lead {
  color: var(--gray-200);
}

/**
 * O accordion sobre a faixa: cartão branco, como na seção clara.
 *
 * Devolve TODAS as variáveis que a faixa trocou, e não só as duas do texto — o
 * cartão é branco, então o que a faixa definiu para fundo escuro (o cinza claro
 * do --color-text-muted, a borda translúcida) some no branco. Foi o que apagou o
 * rótulo "em breve" e a linha do formato indisponível.
 */
.ceua-faixa .accordion__item {
  --color-heading: var(--gray-800);
  --color-text: var(--gray-800);
  --color-text-muted: var(--gray-600);
  --color-link: var(--us-orange);
  --color-border: var(--gray-200);
  background: var(--white);
  color: var(--color-text);
}

/* ==========================================================================
   Títulos de seção
   ========================================================================== */

.ceua-titulo-secao {
  text-wrap: balance;
}

/* ==========================================================================
   Sobre a CEUA

   Tudo à esquerda, como no original: lá o `.center` é só uma coluna de 70%
   centralizada na página, e `.Txtpadrao` não tem `text-align` nenhum — o texto
   corre da margem esquerda dessa coluna. É também o alinhamento das outras seis
   seções desta página.
   ========================================================================== */

.ceua-sobre__texto {
  display: grid;
  gap: var(--sp-4);
  /* 34em @18px ≈ 612px: sem teto, a linha correria os 1140px do container e
     ficaria longa demais para ler. */
  max-width: 34em;
  font-size: clamp(var(--fs-md), 0.93rem + 0.3vw, var(--fs-body));
  line-height: var(--lh-body);
}

.ceua-sobre__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-top: var(--sp-10);
}

/* No mobile os dois CTAs ocupam a linha inteira: lado a lado, o rótulo
   "Calendário de Reuniões" quebraria dentro do botão. */
@media (max-width: 29.99rem) {
  .ceua-sobre__ctas .btn {
    width: 100%;
  }
}

/* ==========================================================================
   Membros e gestão

   O www2 empilha as nove pessoas numa coluna de <li> soltos dentro de um <p>.
   Aqui cada grupo é uma <section> com <h3> e a lista abre em grade — a mesma
   informação, navegável por título no leitor de tela.
   ========================================================================== */

.ceua-membros__grupos {
  display: grid;
  gap: var(--sp-10);
}

.ceua-grupo__titulo {
  padding-bottom: var(--sp-3);
  color: var(--us-blue-light);
  font-size: var(--fs-md);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--color-border);
}

.ceua-grupo__lista {
  display: grid;
  gap: var(--sp-6);
  margin-top: var(--sp-6);
}

@media (min-width: 48rem) {
  .ceua-grupo__lista {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .ceua-grupo__lista {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.ceua-membro {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  align-items: flex-start;
  padding: var(--sp-5);
  background: var(--surface-alt);
  border-radius: var(--radius-md);
}

.ceua-membro__nome {
  color: var(--color-heading);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}

.ceua-membro__area {
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

.ceua-membro__lattes {
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
}

.ceua-membros__nota {
  margin-top: var(--sp-10);
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

/* ==========================================================================
   Prosa dentro dos accordions (Etapas 1 a 4)
   ========================================================================== */

.ceua-prosa {
  color: var(--color-text-muted);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
}

.ceua-prosa > * + * {
  margin-top: var(--sp-4);
}

/* `:not(.btn)` porque o CTA "Enviar e-mail" da Etapa 2 é um <a>: sem a exceção
   ele herdava daqui o laranja do link e ficava laranja sobre o laranja do
   próprio botão — retângulo vazio. */
.ceua-prosa a:not(.btn) {
  color: var(--color-link);
  font-weight: var(--fw-bold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ceua-prosa strong {
  color: var(--color-heading);
}

/* Marcador desenhado, e não `list-style`: o reset de base.css tira a bolinha de
   toda <ul> do site, e o pseudo-elemento posiciona melhor em linha de 1.778. */
.ceua-lista {
  display: grid;
  gap: var(--sp-3);
}

.ceua-lista > li {
  position: relative;
  padding-left: var(--sp-5);
}

.ceua-lista > li::before {
  position: absolute;
  top: 0.65em;
  left: 0;
  width: 6px;
  height: 6px;
  background: var(--us-orange);
  border-radius: 50%;
  content: "";
}

.ceua-lista--aninhada {
  margin-top: var(--sp-3);
}

.ceua-lista--aninhada > li::before {
  background: var(--color-border-strong);
}

/* Caixa do e-mail e do prazo crítico, na Etapa 2. */
.ceua-destaque {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-5);
  background: var(--white);
  border-left: 4px solid var(--us-orange);
  border-radius: var(--radius-sm);
}

/* O que ainda não tem arquivo publicado. */
.ceua-tag {
  display: inline-block;
  padding: 0.1em 0.6em;
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: 0.1em;
  background: var(--gray-200);
  border-radius: var(--radius-pill);
}

/* ==========================================================================
   Downloads e documentos
   ========================================================================== */

/* Título de documento é frase inteira, não rótulo: sem caixa alta e sem o
   `letter-spacing` que .accordion__trigger aplica. */
.accordion__trigger--doc {
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
  letter-spacing: 0;
  text-transform: none;
}

.ceua-formatos {
  display: grid;
  gap: var(--sp-2);
}

.ceua-formato {
  display: inline-flex;
  gap: var(--sp-3);
  align-items: center;
  min-height: 2.75rem;
  padding: var(--sp-2) 0;
  color: var(--color-link);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
}

.ceua-formato:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ceua-formato--off {
  color: var(--color-text-muted);
  font-weight: var(--fw-regular);
}

/* ==========================================================================
   Tabelas — o quadro de relatórios (Etapa 4) e o cronograma

   Mesma receita de .polos-tabela (home.css): rola dentro do próprio contêiner
   para não empurrar a página na horizontal no mobile.
   ========================================================================== */

.ceua-tabela__wrap {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.ceua-tabela {
  width: 100%;
  font-size: var(--fs-sm);
  border-collapse: collapse;
}

.ceua-tabela th,
.ceua-tabela td {
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--color-border);
}

.ceua-tabela thead th {
  color: var(--color-heading);
  font-weight: var(--fw-bold);
  white-space: nowrap;
  background: var(--surface-alt);
}

.ceua-tabela tbody th {
  color: var(--color-heading);
  font-weight: var(--fw-bold);
  white-space: nowrap;
}

.ceua-tabela tbody td {
  color: var(--color-text-muted);
}

/* As duas datas em destaque, como o documento pede. */
.ceua-tabela--calendario tbody strong {
  color: var(--us-blue-light);
}

.ceua-tabela tbody tr:last-child th,
.ceua-tabela tbody tr:last-child td {
  border-bottom: 0;
}

@media (min-width: 48rem) {
  .ceua-tabela {
    font-size: var(--fs-md);
  }
}

/* ==========================================================================
   Legislação e normativas
   ========================================================================== */

.ceua-legislacao__lista {
  display: grid;
  gap: var(--sp-5);
}

/* Lista de três links longos: alinha o ícone com a primeira linha em vez de
   centralizar na altura do bloco, que é o que o `align-items: center` do
   .link-arrow faria quando o rótulo quebra em duas linhas. */
.ceua-legislacao__lista .link-arrow {
  align-items: flex-start;
}

.ceua-legislacao__lista .icon {
  margin-top: 0.15em;
}

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

.ceua-contato__email .link-arrow {
  font-size: clamp(var(--fs-md), 0.93rem + 0.4vw, var(--fs-h4));
}

.ceua-contato__ciaep {
  margin-top: var(--sp-4);
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}