/**
 * Agenda — só o miolo.
 *
 * Reset, base e utilitários vêm de `compartilhado/css/base.css`; topo e rodapé
 * de `topo.css` e `rodape.css`. Esta folha entra depois deles e depois do
 * `tokens.css` desta pasta.
 *
 * Mobile-first de verdade, não por hábito: o briefing diz que a maior parte do
 * acesso tende a ser por celular. A lista nasce empilhada e só ganha a coluna
 * do horário quando há largura para ela.
 */

/* ==========================================================================
   estrutura comum
   ========================================================================== */

.agenda {
  background: var(--a-cor-fundo);
  color: var(--a-cor-corpo);
}

.agenda__container {
  width: min(100% - 2 * var(--gutter), var(--container-max));
  margin-inline: auto;
}

.agenda__selo {
  font-family: var(--fonte-titulo);
  font-size: var(--a-texto-chip);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--a-cor-chapeu);
}

.agenda__titulo {
  margin-top: var(--espaco-2);
  font-family: var(--fonte-titulo);
  font-size: var(--a-texto-titulo-pagina);
  font-weight: 900;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--a-cor-titulo);
}

.agenda__apoio {
  max-width: 56ch;
  margin-top: var(--espaco-3);
  font-size: var(--a-texto-corpo);
  line-height: var(--a-lh-corpo);
  color: var(--a-cor-apoio);
}

.agenda__secao {
  font-family: var(--fonte-titulo);
  font-size: var(--a-texto-secao);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--a-cor-titulo);
}

.chip {
  display: inline-block;
  padding: 0.1875rem 0.625rem;
  font-size: var(--a-texto-chip);
  font-weight: 700;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--a-cor-titulo);
  background: color-mix(in srgb, var(--acento, var(--a-cor-chapeu)) 22%, transparent);
  border-inline-start: 3px solid var(--acento, var(--a-cor-chapeu));
  border-radius: var(--raio-s);
}

/* ==========================================================================
   cabeçalho + aviso
   ========================================================================== */

.agenda__cabecalho {
  padding-block: var(--espaco-6) var(--espaco-4);
}

/* Amarelo de aviso, com a barra à esquerda. A cor sozinha não basta para quem
   não a distingue, por isso "Agenda sujeita a alterações" também vai em
   negrito no começo da frase. */
.aviso {
  max-width: 70ch;
  margin-top: var(--espaco-4);
  padding: var(--espaco-3);
  font-size: var(--a-texto-corpo);
  line-height: var(--a-lh-corpo);
  color: var(--a-cor-aviso-texto);
  background: var(--a-cor-aviso-fundo);
  border-inline-start: 4px solid currentColor;
  border-radius: var(--raio-s);
}

/* ==========================================================================
   filtros
   ========================================================================== */

.agenda__filtros {
  padding-block: var(--espaco-3) var(--espaco-4);
}

.grupo-filtro + .grupo-filtro {
  margin-top: var(--espaco-3);
}

.grupo-filtro__rotulo {
  font-size: var(--a-texto-meta);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--a-cor-apoio);
}

.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.filtro {
  min-height: 44px;
  padding-inline: var(--espaco-3);
  font-size: var(--a-texto-chip);
  font-weight: 600;
  color: var(--a-cor-corpo);
  background: var(--a-cor-superficie);
  border: 1px solid var(--a-cor-borda);
  border-radius: 999px;
  transition:
    background-color var(--dur-rapida) var(--ease-padrao),
    border-color var(--dur-rapida) var(--ease-padrao);
}

.filtro:hover {
  border-color: var(--acento, var(--a-cor-chapeu));
}

/* Estado ligado: cor, peso E espessura de borda — para sobreviver ao alto
   contraste e a quem não distingue cor. */
.filtro[aria-pressed='true'] {
  font-weight: 800;
  color: var(--a-cor-titulo);
  background: color-mix(in srgb, var(--acento, var(--a-cor-chapeu)) 24%, transparent);
  border: 2px solid var(--acento, var(--a-cor-chapeu));
}

.agenda__contador {
  margin-top: var(--espaco-3);
  font-size: var(--a-texto-meta);
  color: var(--a-cor-apoio);
}

/* ==========================================================================
   próximos compromissos
   ========================================================================== */

.agenda__lista {
  padding-block: 0 var(--espaco-6);
}

.dia {
  margin-top: var(--espaco-5);
}

.dia__cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espaco-2);
  padding-bottom: 0.5rem;
  font-size: var(--a-texto-dia);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--a-cor-titulo);
  border-bottom: 2px solid var(--a-cor-borda);
}

/*
 * Selo "Hoje".
 *
 * Texto ESCURO sobre o verde, e não branco. Branco sobre `#00b923` dá 2.66:1 e
 * reprova o piso de 4.5 — e como esta página não tem PSD, não há layout a
 * respeitar: é decisão nossa e a decisão errada era nossa. O escuro dá 5.02:1
 * sem tirar o verde, que é o que faz o selo ser notado.
 */
.dia__hoje {
  padding: 0.125rem 0.5rem;
  font-size: var(--a-texto-chip);
  font-weight: 800;
  color: var(--a-cor-hoje-texto);
  background: var(--a-cor-hoje);
  border-radius: 999px;
}

.dia__lista {
  display: grid;
  gap: var(--espaco-3);
  margin: var(--espaco-3) 0 0;
  padding: 0;
  list-style: none;
}

/* Página branca e card branco: a borda é o que desenha o limite. A tarja do
   tipo continua na esquerda, sobrescrevendo aquele lado. */
.evento {
  display: grid;
  gap: var(--espaco-2);
  padding: var(--espaco-3);
  background: var(--a-cor-superficie);
  border: 1px solid var(--a-cor-borda);
  border-radius: var(--a-raio);
  border-inline-start: 5px solid var(--acento, var(--a-cor-chapeu));
  box-shadow: var(--a-sombra);
}

/* O alvo do link direto (#evento-N, vindo de /noticias) precisa se anunciar,
   senão a pessoa chega na página sem saber qual item era. */
.evento:target {
  outline: 3px solid var(--acento, var(--cor-foco));
  outline-offset: 3px;
}

.evento__hora {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  font-family: var(--fonte-titulo);
  font-size: var(--a-texto-hora);
  font-weight: 900;
  line-height: 1;
  color: var(--a-cor-titulo);
}

.evento__fuso {
  font-family: var(--fonte-texto);
  font-size: var(--a-texto-meta);
  font-weight: 500;
  text-transform: none;
  color: var(--a-cor-apoio);
}

.evento__corpo {
  display: grid;
  gap: 0.5rem;
}

.evento__titulo {
  font-size: var(--a-texto-evento);
  font-weight: 800;
  line-height: 1.25;
  color: var(--a-cor-titulo);
}

.evento__local {
  font-size: var(--a-texto-corpo);
  color: var(--a-cor-apoio);
}

/* A partir de 40rem o horário vira coluna própria, à esquerda: é o que permite
   varrer a lista com o olho procurando "que horas". */
@media (width >= 40rem) {
  .evento {
    grid-template-columns: 7.5rem minmax(0, 1fr);
    gap: var(--espaco-4);
    align-items: start;
    padding: var(--espaco-4);
  }

  .evento__hora {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }
}

/* ---------- ficha (details/summary) ---------- */

.ficha {
  margin-top: 0.25rem;
  border-top: 1px solid var(--a-cor-borda);
}

.ficha__gatilho {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  font-size: var(--a-texto-meta);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--a-cor-chapeu);
  cursor: pointer;
  list-style: none; /* Firefox */
}

.ficha__gatilho::-webkit-details-marker {
  display: none;
}

/* Seta desenhada em CSS, que gira ao abrir: é o único caso da página em que um
   ícone diria menos que a própria rotação. */
.ficha__gatilho::before {
  content: '';
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  rotate: -45deg;
  translate: 0 -1px;
  transition: rotate var(--dur-rapida) var(--ease-padrao);
}

.ficha[open] .ficha__gatilho::before {
  rotate: 45deg;
  translate: 0 -2px;
}

.ficha__gatilho:focus-visible {
  outline: 2px solid var(--cor-foco);
  outline-offset: 2px;
}

.ficha__lista {
  display: grid;
  gap: 0.25rem var(--espaco-3);
  margin: 0 0 var(--espaco-2);
  font-size: var(--a-texto-corpo);
  line-height: var(--a-lh-corpo);
}

.ficha__lista dt {
  font-size: var(--a-texto-meta);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--a-cor-apoio);
}

.ficha__lista dd {
  margin: 0 0 0.5rem;
}

.ficha__lista a {
  color: var(--a-cor-chapeu);
}

@media (width >= 40rem) {
  .ficha__lista {
    grid-template-columns: 8rem minmax(0, 1fr);
    align-items: baseline;
  }

  .ficha__lista dd {
    margin-bottom: 0.25rem;
  }
}

/* ==========================================================================
   arquivo histórico
   ========================================================================== */

/* Era uma faixa branca sobre o creme. Com a página branca isso deixou de
   separar coisa alguma, então a divisão passou a ser uma linha. */
.arquivo {
  padding-block: var(--espaco-6) var(--espaco-7);
  border-top: 1px solid var(--a-cor-borda);
}

.arquivo__campo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espaco-2);
  margin-top: var(--espaco-4);
  font-size: var(--a-texto-corpo);
}

.arquivo__campo label {
  font-weight: 700;
}

.arquivo__campo select {
  min-height: 44px;
  padding-inline: var(--espaco-2);
  font: inherit;
  color: inherit;
  background: var(--a-cor-fundo);
  border: 1px solid var(--a-cor-borda);
  border-radius: var(--raio-s);
}

.arquivo__lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: var(--espaco-3);
  margin: var(--espaco-4) 0 0;
  padding: 0;
  list-style: none;
}

.passado {
  display: grid;
  gap: 0.5rem;
  align-content: start;
  padding: var(--espaco-3);
  background: var(--a-cor-fundo);
  border: 1px solid var(--a-cor-borda);
  border-radius: var(--a-raio);
  border-top: 4px solid var(--acento, var(--a-cor-chapeu));
}

.passado__data {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  font-size: var(--a-texto-meta);
  color: var(--a-cor-apoio);
}

.passado__titulo {
  font-size: var(--a-texto-corpo);
  font-weight: 800;
  line-height: 1.3;
  color: var(--a-cor-titulo);
}

.passado__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--a-texto-meta);
  color: var(--a-cor-apoio);
}

.passado__ligacao a {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 44px;
  font-size: var(--a-texto-meta);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--a-cor-chapeu);
  text-decoration: none;
}

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

/* ==========================================================================
   estado vazio
   ========================================================================== */

.agenda__vazio {
  margin-top: var(--espaco-4);
  font-size: var(--a-texto-corpo);
  line-height: var(--a-lh-corpo);
  color: var(--a-cor-apoio);
}

.agenda__limpar {
  font: inherit;
  color: var(--a-cor-chapeu);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .filtro,
  .ficha__gatilho::before {
    transition: none;
  }
}