/* ==========================================================================
   Agenda — seção da Home e página completa.

   Herda o sistema do site: mesmos tokens de cor, mesma família, mesmo
   container, mesmos botões, mesmos breakpoints. Nada aqui inventa uma segunda
   direção de arte — o que muda em relação à versão anterior é a composição, que
   deixou de parecer listagem administrativa.
   ========================================================================== */

/* ----- fundo -------------------------------------------------------------
   A Agenda encosta em "Iniciativas registradas na Assembleia", que usa
   --adjuto-campaign-surface (#e7e7e7). Dois cinzas próximos faziam as duas
   lerem como um bloco único. Este off-white é claro o bastante para separar
   sem estrear uma cor de marca: é o mesmo azul da identidade dessaturado até
   quase branco, então continua dentro da paleta.
   Os cartões seguem brancos, e é o contraste contra este fundo que dá corpo
   ao quadro — não uma borda mais pesada. */
:root[data-site-mode="officialCampaign"] #agenda-home.adjuto-section,
:root[data-site-mode="officialCampaign"] .adjuto-section--agenda {
  background: #f6f9fc;
  /* O padding padrão da seção (campaign.css:119) abriria um vão morto entre o
     cabeçalho e a geometria. O seletor casa aquela especificidade (0-2-1) em
     vez de recorrer a !important, que resolveria escondendo a regra maior. */
  padding-top: 0;
  padding-bottom: 0;
}

/* ==========================================================================
   GEOMETRIA
   ==========================================================================
   A campanha já tem uma assinatura geométrica própria: o corte diagonal que
   sobe da esquerda para a direita, em --adjuto-cut, usado no rodapé do hero,
   no topo de "Trabalho que chega à vida das pessoas" e no de "Iniciativas".
   As faixas anteriores (barra azul + barra verde) não conversavam com isso —
   eram um gradiente qualquer. A geometria abaixo parte do corte que já existe,
   em vez de propor uma segunda direção de arte.

   Foi escolhida na auditoria visual de 28/08/2026 contra uma alternativa
   minimalista (fio de 3px + chanfro no quadro), descartada por ficar abaixo do
   nível gráfico das seções vizinhas. A classe .ag-geo-a no HTML é o marcador
   dessa escolha.
   ========================================================================== */

/* ----- divisor geométrico full-width --------------------------------------
   Reprovada a tentativa anterior (marca angular de 168px + fio): geometria
   localizada num canto, com o resto da largura entregue a um fio de 4px. O que
   a referência pede é o oposto — dois PLANOS grandes dividindo a tela.

   Construção: o elemento inteiro é o plano azul e atravessa a viewport; sobre
   ele, um plano verde recortado por polígono ocupa a direita, e a fronteira
   entre os dois é uma diagonal que percorre mais de 60% da largura. O terço
   superior fica azul em toda a extensão, funcionando como a base sólida da
   referência: é ali que a barra azul cruza a tela inteira antes de a
   composição azul+verde começar.

   Tudo em porcentagem, nunca em offset fixo: a diagonal guarda a mesma
   proporção em 375 e em 1440 em vez de encolher para um recorte curto no
   mobile. Cores chapadas recortadas por clip-path — sem transparência, sem
   branco entre os planos, sem brecha lateral, por construção e não por
   ajuste. */
.adjuto-ag-faixa {
  --ag-faixa-h: clamp(46px, 4.2vw, 64px);
  display: block;
  width: 100%;
  height: var(--ag-faixa-h);
  position: relative;
  overflow: hidden;
  background: var(--adjuto-campaign-ink, #114093);
}
.adjuto-ag-faixa::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 66%;
  background: var(--adjuto-campaign-accent, #6db800);
  clip-path: polygon(22% 100%, 86% 0, 100% 0, 100% 100%);
}

/* A faixa de baixo espelha a lógica em vez de repetir o desenho: a base azul
   passa para o rodapé do divisor e o verde sobe para a esquerda, com a
   diagonal descendo. Termina em azul cheio, encostando na seção azul que vem
   logo abaixo. */
.adjuto-ag-faixa--baixo::before {
  top: 0;
  bottom: auto;
  height: calc(var(--ag-faixa-h) * 0.66);
  clip-path: polygon(0 0, 78% 0, 14% 100%, 0 100%);
}

/* Na Home, "Trabalho que chega à vida das pessoas" corta o próprio topo na
   diagonal (campaign.css:832) e o triângulo removido revela o branco do body.
   Sem esta sobreposição sobraria uma fatia branca entre o divisor e a seção
   azul. Puxando a seção para dentro da faixa, o corte dela passa a revelar os
   planos do divisor: as duas diagonais se encaixam em vez de disputar. É o
   mesmo idioma já usado em campaign.css:477. */
/* A sobreposição precisa valer o corte inteiro: com menos que isso, sobra
   branco na ponta esquerda. Em compensação ela come até --adjuto-cut da faixa
   no lado direito — por isso a faixa cresce exatamente o mesmo tanto, e o que
   a seção azul consome é só a base azul do rodapé do divisor, que some contra
   o azul dela. A composição verde/azul fica acima, intacta em toda a largura,
   e a altura útil da Agenda não muda: a margem negativa devolve o que a altura
   extra tomou. */
#agenda-home .adjuto-ag-faixa--baixo {
  height: calc(var(--ag-faixa-h) + var(--adjuto-cut, 3rem));
  margin-bottom: calc(-1 * var(--adjuto-cut, 3rem));
}

.adjuto-ag-corpo {
  /* padding-block, NÃO o atalho `padding`.

     Este elemento é também .adjuto-container, de quem herda
     `padding-inline: var(--adjuto-space-5)`. O atalho de quatro lados
     redefinia esse eixo para 0 e colava eyebrow, título, seletor de dias e o
     quadro dos compromissos na borda física da tela — medido em 375px:
     esquerda 0, direita 0. Só o CTA escapava, por ter recuo próprio.

     Mexer no eixo vertical sem tocar no horizontal preserva a área útil do
     container em todas as larguras, sem wrapper novo e sem recuo item a item. */
  padding-block: 2.6rem 2.8rem;
}

/* ----- introdução: texto à esquerda, seletor à direita ------------------- */
/*
   Compor os dois na mesma faixa é o que faz a seção aproveitar a largura do
   desktop em vez de empilhar título, apoio e seletor um sob o outro. Foi a
   diferença mais visível entre a referência aprovada e a primeira tentativa.
*/
.adjuto-ag__intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.adjuto-ag__intro-texto { flex: 1 1 26rem; min-width: 0; }
.adjuto-ag__intro-texto .adjuto-section__lead { margin-bottom: 0; }
.adjuto-ag__intro > #adjuto-agenda-abas { flex: 0 0 auto; }

/* ----- seletor de dias --------------------------------------------------- */
.adjuto-ag__dias {
  display: inline-flex;
  gap: 4px;
  padding: 5px;
  background: #e8edf4;
  border-radius: 999px;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.adjuto-ag__dias::-webkit-scrollbar { display: none; }

.adjuto-ag__dia-btn {
  font-family: var(--adjuto-campaign-font-display, inherit);
  font-weight: 700;
  font-size: 0.92rem;
  padding: 0.58rem 1.25rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--adjuto-color-muted, #5f6b80);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.adjuto-ag__dia-btn:hover { color: var(--adjuto-campaign-ink, #114093); }
.adjuto-ag__dia-btn.is-ativo {
  background: var(--adjuto-campaign-ink, #114093);
  color: #ffffff;
}
@media (prefers-reduced-motion: reduce) {
  .adjuto-ag__dia-btn { transition: none; }
}

/* ----- quadro único ------------------------------------------------------ */
/*
   Um componente só: borda e raio ficam no quadro, e as colunas por dentro.
   As divisórias saem de um gap de 1px sobre fundo cinza — assim a linha
   aparece entre colunas e entre linhas quando o dia tem mais paradas do que
   cabe numa fileira, sem precisar acertar border em item de canto.
*/
.adjuto-ag__quadro {
  background: var(--adjuto-color-border, #dfe6ec);
  border: 1px solid var(--adjuto-color-border, #dfe6ec);
  border-radius: var(--adjuto-campaign-radius, 10px);
  overflow: hidden;
}

/* Flex, e não grid, por causa da última linha.

   Com repeat(auto-fit, minmax(12.5rem, 1fr)) o número de colunas vem da
   largura, e o que sobra na última linha mantém a largura da trilha: um
   domingo com 7 compromissos virava [6,1] em 1440, com um card de 204px ao
   lado de 1026px de cinza. Não era só o domingo — em 1024 a sexta com 5 caía
   em [4,1], e em 768 o domingo virava [3,3,1].

   No flex-wrap os itens da última linha CRESCEM até preencher: sobrando um,
   ele ocupa a linha inteira — que é exatamente o tratamento que a página já
   dava aos dias com um compromisso só. Sobrando dois ou três, dividem.

   A base de 12.5rem é a mesma do minmax anterior, então a quantidade de cards
   por linha não muda. O gap de 1px sobre o fundo cinza continua desenhando as
   divisórias, e align-items: stretch (padrão nos dois modelos) mantém a altura
   igual dentro da linha. */
.adjuto-ag__grade {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: var(--adjuto-color-border, #dfe6ec);
}

.adjuto-ag__card {
  background: #ffffff;
  padding: 1.15rem 1.2rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  /* min-width: 0 porque o mínimo automático do flex é o conteúdo: sem isto um
     endereço longo empurraria o card para além da linha. */
  flex: 1 1 12.5rem;
  min-width: 0;
}

/* Horário e selo dividem a primeira linha da coluna. */
.adjuto-ag__topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.55rem;
}
.adjuto-ag__hora {
  font-family: var(--adjuto-campaign-font-display, inherit);
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--adjuto-campaign-ink, #114093);
  font-variant-numeric: tabular-nums;
  margin: 0;
}
.adjuto-ag__municipio {
  font-family: var(--adjuto-campaign-font-display, inherit);
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.25;
  color: var(--adjuto-color-text, #101f39);
  margin: 0;
}
.adjuto-ag__atividade,
.adjuto-ag__resumo,
.adjuto-ag__endereco {
  font-size: 0.88rem;
  line-height: 1.35;
  color: var(--adjuto-color-muted, #5f6b80);
  margin: 0;
}
.adjuto-ag__endereco { font-size: 0.8rem; }

/* Observação sobre o compromisso — secundária à atividade, sem selo, caixa nem
   fundo: só o corpo menor e um respiro que a separa da linha de cima. Nada
   aqui reserva espaço, porque o elemento só existe quando há texto. */
.adjuto-ag__resumo {
  font-size: 0.8rem;
  margin-top: 0.15rem;
}

.adjuto-ag__selo {
  font-family: var(--adjuto-campaign-font-display, inherit);
  font-weight: 700;
  font-size: 0.66rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #4d8a00;
  white-space: nowrap;
  margin: 0;
}

/* A próxima parada é uma COLUNA tingida dentro do quadro, não um cartão à
   parte: o realce não pode quebrar a unidade do componente. */
.adjuto-ag__card.is-proxima { background: #f2f9e6; }
.adjuto-ag__card.is-aconfirmar .adjuto-ag__selo { color: #7a5200; }
.adjuto-ag__card.is-cancelado { opacity: 0.62; }
.adjuto-ag__card.is-cancelado .adjuto-ag__municipio { text-decoration: line-through; }
.adjuto-ag__card.is-cancelado .adjuto-ag__selo { color: #b42318; }

/* ----- rodapé, dentro do quadro ------------------------------------------ */
.adjuto-ag__rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  background: #ffffff;
  padding: 0.9rem 1.2rem;
  border-top: 1px solid var(--adjuto-color-border, #dfe6ec);
}
.adjuto-ag__contador {
  margin: 0;
  font-size: 0.95rem;
  color: var(--adjuto-color-muted, #5f6b80);
}

/* ----- página completa --------------------------------------------------- */
.adjuto-ag__dia-bloco + .adjuto-ag__dia-bloco { margin-top: 2.4rem; }

.adjuto-ag__dia-cab {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 0 0 0.9rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--adjuto-campaign-accent, #6db800);
}
.adjuto-ag__dia-titulo {
  font-family: var(--adjuto-campaign-font-display, inherit);
  font-weight: 800;
  font-size: 1.35rem;
  line-height: 1.15;
  color: var(--adjuto-campaign-ink, #114093);
  margin: 0;
}
.adjuto-ag__dia-cont {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--adjuto-color-muted, #5f6b80);
}

.adjuto-ag__vazio {
  padding: 1.4rem 0;
  color: var(--adjuto-color-muted, #5f6b80);
  max-width: 52ch;
}
.adjuto-ag__aviso {
  margin: 2rem 0 0;
  font-size: 0.8rem;
  color: var(--adjuto-color-muted, #5f6b80);
}

/* ----- mobile ------------------------------------------------------------ */
@media (max-width: 560px) {
  /* Mesma razão da regra base: só o eixo vertical. */
  .adjuto-ag-corpo { padding-block: 2rem 2.2rem; }
  /* A altura encolhe; a diagonal não, porque é definida em porcentagem. */
  .adjuto-ag-faixa { --ag-faixa-h: 34px; }

  /* O seletor ocupa a linha inteira. Sem soltar o wrapper do flex da
     introdução ele encolheria até o conteúdo e ficaria com 225px num
     viewport de 375, deixando os três dias apertados à esquerda. */
  .adjuto-ag__intro > #adjuto-agenda-abas { flex: 1 1 100%; }
  .adjuto-ag__dias {
    display: flex;
    width: 100%;
    border-radius: 12px;
  }
  .adjuto-ag__dia-btn {
    flex: 1 1 0;
    text-align: center;
    /* 44px de altura: alvo de toque confortável, e o padding sozinho deixava
       em 36. */
    min-height: 44px;
    padding: 0.5rem;
    font-size: 0.86rem;
    border-radius: 9px;
  }

  /* No mobile a grade é uma coluna, e as divisórias viram linhas — o quadro
     continua sendo um componente só, empilhado. */
  .adjuto-ag__grade { display: flex; flex-direction: column; }
  .adjuto-ag__card { padding: 0.95rem 1rem 1.05rem; }
  .adjuto-ag__hora { font-size: 1.35rem; }
  .adjuto-ag__rodape { flex-direction: column; align-items: stretch; gap: 0.7rem; }
  .adjuto-ag__rodape .adjuto-btn { text-align: center; }
  .adjuto-ag__dia-titulo { font-size: 1.15rem; }
}