/* ==========================================================================
   CPA — Comissão Própria de Avaliação. Figma "Página CPA", nó 1:1494.
   ========================================================================== */

/* ---------- Seções ---------- */

.cpa-secao {
  padding-block: var(--sp-10) var(--sp-12);
}

.cpa-faixa {
  background: var(--surface-alt);
}

/* Filete entre duas seções brancas, na largura do conteúdo. */
.cpa-secao--divisor {
  padding-top: 0;
}

.cpa-secao--divisor > .container::before {
  content: "";
  display: block;
  height: 1px;
  margin-bottom: var(--sp-10);
  background: var(--color-border);
}

@media (min-width: 64rem) {
  .cpa-secao {
    padding-block: var(--sp-16) var(--sp-20);
  }

  .cpa-secao--divisor {
    padding-top: 0;
  }

  .cpa-secao--divisor > .container::before {
    margin-bottom: var(--sp-16);
  }
}

/* ---------- Tipografia ---------- */

.cpa-intro__titulo {
  margin-bottom: var(--sp-8);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 1.9375rem);
  line-height: 1.2;
  text-align: center;
}

.cpa-titulo {
  margin-bottom: var(--sp-6);
  font-size: clamp(1.375rem, 1.25rem + 0.5vw, 1.625rem);
  font-weight: var(--fw-regular);
  line-height: 1.2;
}

.cpa-titulo strong {
  font-weight: var(--fw-bold);
}

.cpa-titulo--colado {
  margin-bottom: var(--sp-2);
}

@media (min-width: 64rem) {
  .cpa-intro {
    padding-top: var(--sp-20);
  }

  .cpa-intro__titulo {
    margin-bottom: var(--sp-12);
  }

  .cpa-titulo {
    margin-bottom: var(--sp-10);
  }

  .cpa-titulo--colado {
    margin-bottom: var(--sp-2);
  }

  .cpa-titulo--afastado {
    margin-bottom: var(--sp-12);
  }
}

.cpa-prosa {
  color: var(--color-text-muted);
  font-size: clamp(var(--fs-md), 0.93rem + 0.3vw, var(--fs-body));
  line-height: 1.5;
}

.cpa-prosa :is(p, ul) + :is(p, ul) {
  margin-top: var(--sp-4);
}

.cpa-prosa a {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cpa-prosa__italico {
  font-style: italic;
}

/* Duas colunas de texto no desktop; no celular viram um texto só. */
.cpa-colunas {
  display: grid;
  gap: var(--sp-4);
}

@media (min-width: 64rem) {
  .cpa-colunas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-6);
  }
}

/* ---------- Membros ---------- */

.cpa-membros__grade {
  display: grid;
  gap: var(--sp-8);
}

/* 5/7 e não metade: no container de 1140px, a meia coluna quebraria os nomes dos cartões. */
@media (min-width: 64rem) {
  .cpa-membros__grade {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--sp-6);
    align-items: start;
  }
}

.cpa-quadro {
  padding: var(--sp-6) var(--sp-4);
  background: var(--us-blue-light);
  border-radius: var(--radius-md);
}

@media (min-width: 48rem) {
  .cpa-quadro {
    padding: var(--sp-8) var(--sp-6) var(--sp-10);
  }
}

.cpa-quadro__intro {
  margin-bottom: var(--sp-6);
  color: var(--white);
  font-size: clamp(var(--fs-md), 0.93rem + 0.3vw, var(--fs-body));
  font-weight: var(--fw-bold);
  line-height: 1.5;
  text-align: center;
}

.cpa-quadro__grupos {
  display: grid;
  gap: var(--sp-4);
}

@media (min-width: 36rem) {
  .cpa-quadro__grupos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-4) var(--sp-6);
  }
}

.cpa-grupo {
  padding: var(--sp-4) var(--sp-5) var(--sp-5);
  color: var(--color-text-muted);
  font-size: 0.9375rem;
  line-height: 1.5;
  background: var(--white);
  border-radius: var(--radius-md);
}

.cpa-grupo__titulo {
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

.cpa-grupo__nomes--lista {
  margin-top: var(--sp-2);
}

/* ---------- Agenda ---------- */

.cpa-meses {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-6);
}

.cpa-mes {
  min-height: 2.75rem;
  padding: var(--sp-2) var(--sp-4);
  color: var(--color-text-muted);
  font-size: 0.9375rem;
  line-height: 1.5;
  text-transform: uppercase;
  background: var(--white);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.cpa-mes:not([aria-selected="true"]):hover {
  color: var(--us-blue-light);
  border-color: var(--us-blue-light);
}

.cpa-mes[aria-selected="true"] {
  color: var(--white);
  background: var(--us-blue-light);
  border-color: var(--us-blue);
}

@media (min-width: 48rem) {
  .cpa-mes {
    min-height: 0;
    padding: var(--sp-2) var(--sp-6);
  }

  .cpa-meses {
    margin-bottom: var(--sp-8);
  }
}

.cpa-reunioes {
  display: grid;
  gap: var(--sp-2);
}

.cpa-reuniao {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3) var(--sp-6);
  margin: 0;
  padding: var(--sp-4) var(--sp-5);
  color: var(--color-text-muted);
  line-height: 1.5;
  background: var(--surface-alt);
  border-radius: var(--radius-md);
}

.cpa-reuniao__pauta {
  grid-column: 1 / -1;
}

.cpa-reuniao dt {
  font-size: 0.9375rem;
  font-weight: var(--fw-bold);
}

.cpa-reuniao dd {
  margin: 0;
  font-size: clamp(var(--fs-md), 0.93rem + 0.3vw, var(--fs-body));
}

@media (min-width: 48rem) {
  .cpa-reuniao {
    grid-template-columns: 10.8125rem 12.875rem minmax(0, 1fr);
    padding: 0.9375rem var(--sp-8);
  }

  .cpa-reuniao__pauta {
    grid-column: auto;
  }
}

.cpa-agenda__vazio {
  padding: var(--sp-5) var(--sp-8);
  color: var(--color-text-muted);
  background: var(--surface-alt);
  border-radius: var(--radius-md);
}

/* ---------- Legislação ---------- */

.cpa-normas {
  display: grid;
  gap: var(--sp-6);
  color: var(--color-text-muted);
  font-size: clamp(var(--fs-md), 0.93rem + 0.3vw, var(--fs-body));
  line-height: 1.5;
}

.cpa-normas__coluna {
  display: grid;
  gap: var(--sp-6);
  align-content: start;
}

@media (min-width: 64rem) {
  .cpa-normas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cpa-normas__coluna {
    gap: var(--sp-10);
  }
}

/* --us-sky sobre cinza dá 3,1:1 — par que já está na dívida de contraste da marca. */
.cpa-norma__link {
  color: var(--us-sky);
  font-weight: var(--fw-bold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cpa-norma__link:hover {
  color: var(--us-blue-light);
}

/* ---------- Histórico ---------- */

.cpa-pilares {
  padding-left: 1.5em;
  font-weight: var(--fw-bold);
  list-style: disc;
}

.cpa-pilares > li + li {
  margin-top: var(--sp-2);
}

/* ---------- Relatórios ---------- */

/* Colunas de texto, e não grade: a ordem desce pela coluna (2026 a 2021 na primeira). */
.cpa-relatorios__lista {
  column-gap: var(--sp-6);
}

.cpa-relatorios__lista > li {
  padding-bottom: var(--sp-2);
  break-inside: avoid;
}

@media (min-width: 48rem) {
  .cpa-relatorios__lista {
    columns: 2;
  }
}

@media (min-width: 64rem) {
  .cpa-relatorios__lista {
    columns: 3;
  }
}

.cpa-relatorio {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
  justify-content: center;
  padding: var(--sp-4) var(--sp-6);
  color: var(--color-text-muted);
  font-size: clamp(var(--fs-md), 0.93rem + 0.3vw, var(--fs-body));
  font-weight: var(--fw-bold);
  line-height: 1.5;
  background: var(--surface-alt);
  border-radius: var(--radius-md);
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

a.cpa-relatorio:hover {
  color: var(--color-heading);
  background: var(--gray-200);
}

.cpa-relatorio--off {
  font-weight: var(--fw-regular);
}

.cpa-tag {
  padding: 0.1em 0.6em;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--gray-200);
  border-radius: var(--radius-pill);
}

/* ---------- Fale com a CPA ---------- */

.cpa-contato__caixa {
  --color-heading: var(--white);
  padding: var(--sp-6) var(--sp-4);
  color: var(--white);
  font-size: clamp(var(--fs-md), 0.93rem + 0.3vw, var(--fs-body));
  line-height: 1.5;
  text-align: center;
  background: var(--us-blue-light);
  border-radius: var(--radius-md);
}

@media (min-width: 48rem) {
  .cpa-contato__caixa {
    padding: var(--sp-8);
  }
}

.cpa-contato__caixa .cpa-titulo {
  margin-bottom: var(--sp-2);
}

.cpa-contato__caixa a {
  font-weight: var(--fw-bold);
  overflow-wrap: anywhere;
}

.cpa-contato__caixa a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* O anel de foco padrão é o próprio azul da caixa. */
.cpa-contato__caixa a:focus-visible {
  outline-color: var(--white);
}

/* ---------- Links ---------- */

.cpa-links__lista {
  display: grid;
  gap: var(--sp-4);
}

@media (min-width: 48rem) {
  .cpa-links__lista {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-4) var(--sp-6);
  }
}

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

.cpa-link {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  height: 100%;
  padding: var(--sp-6);
  color: var(--color-text-muted);
  border: 1px solid var(--gray-400);
  border-radius: var(--radius-md);
  transition: border-color var(--dur) var(--ease);
}

.cpa-link__nome {
  font-size: clamp(var(--fs-md), 0.93rem + 0.3vw, var(--fs-body));
  line-height: 1.5;
  text-transform: uppercase;
}

/* Laranja sobre cinza: dívida de contraste da marca já registrada. */
.cpa-link__acao {
  display: inline-flex;
  gap: var(--sp-1);
  align-items: center;
  margin-top: auto;
  color: var(--color-link);
  font-size: 0.9375rem;
  font-weight: var(--fw-bold);
  line-height: 1.5;
  transition: gap var(--dur) var(--ease);
}

.cpa-link__acao .icon {
  width: 1rem;
  height: 1rem;
  stroke-width: 1.5;
}

.cpa-link:hover {
  border-color: var(--us-orange);
}

.cpa-link:hover .cpa-link__acao {
  gap: var(--sp-2);
}