/* ==========================================================================
   AGENDA DE EVENTOS — agn-
   Lista de encontros com a data grande, e o convite que expira sozinho.
   Tokens usados: --fg --fg-2 --fg-muted --rule --rule-2 --accent
                  --accent-ink --display --radius-pill --ease
   ========================================================================== */

.agn-topo{max-width:720px}

.agn-lista{margin-top:clamp(34px,5vh,52px);border-top:1px solid var(--rule)}

/* Três colunas: a data, o corpo, a ação. A data tem largura fixa para os
   dias de um e de dois dígitos alinharem pela mesma borda. */
.agn-item{
  display:grid;
  grid-template-columns:clamp(84px,9vw,120px) minmax(0,1fr) auto;
  gap:clamp(18px,3vw,44px);
  align-items:center;
  padding:clamp(22px,3vh,30px) 0;
  border-bottom:1px solid var(--rule);
}

/* ---------------------------------------------------------------- a data
   O dia é a peça gráfica: é por ele que o olho percorre a lista. Algarismos
   tabulares, para 06 e 23 ocuparem a mesma largura. */
.agn-data{display:grid;justify-items:start;line-height:1}
.agn-dia{
  font-family:var(--display);font-weight:700;
  font-size:clamp(38px,4.2vw,58px);letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;color:var(--fg);
}
.agn-mes{
  margin-top:6px;
  font-family:var(--display);font-weight:700;font-size:12px;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent-ink,var(--accent));
}
.agn-sem{margin-top:4px;font-size:11.5px;letter-spacing:.06em;color:var(--fg-muted)}

/* ---------------------------------------------------------------- corpo */
.agn-corpo{display:grid;gap:7px}
.agn-formato{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-muted)}
.agn-titulo{
  font-family:var(--display);font-weight:700;
  font-size:clamp(18px,1.7vw,23px);line-height:1.2;letter-spacing:-.016em;
  color:var(--fg);text-wrap:pretty;
}
.agn-desc{font-size:14.5px;line-height:1.6;color:var(--fg-2);max-width:62ch}
.agn-hora{font-size:13px;color:var(--fg-muted);font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------------- ação
   Os selos são criados pelo script, nunca escritos: "Acontecendo agora"
   durante o evento, "Encerrado" depois dele. */
.agn-fim{display:flex;align-items:center;justify-content:flex-end;gap:12px}
.agn-selo{
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  font-family:var(--display);font-weight:700;font-size:10.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--fg-muted);
  border:1px solid var(--rule-2);border-radius:var(--radius-pill);padding:8px 14px;
}
.agn-item[data-estado="agora"] .agn-selo{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 50%,transparent)}
/* O ponto aceso do "agora". Pulsa por opacidade — nada escala —, e o reduce
   o deixa parado e aceso. */
.agn-item[data-estado="agora"] .agn-selo::before{
  content:"";width:7px;height:7px;border-radius:50%;background:currentColor;
  animation:agnPulso 1.6s ease-in-out infinite;
}
@keyframes agnPulso{0%,100%{opacity:1}50%{opacity:.3}}
@media(prefers-reduced-motion:reduce){
  .agn-item[data-estado="agora"] .agn-selo::before{animation:none}
}
.agn-gravacao{
  font-family:var(--display);font-weight:700;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--fg-2);white-space:nowrap;
  border-bottom:1px solid var(--rule-2);padding-bottom:3px;
  transition:color .25s,border-color .25s;
}
.agn-gravacao:hover{color:var(--accent-ink,var(--accent));border-color:currentColor}

/* Encerrado: o evento continua na lista como registro, com menos peso. Só o
   corpo apaga — a data segue legível, porque "quando foi" é a informação que
   sobra de um evento passado. */
.agn-item[data-estado="encerrado"] .agn-corpo{opacity:.55}
.agn-item[data-estado="encerrado"] .agn-dia{color:var(--fg-muted)}

.agn-vazio{
  padding:28px 0;border-bottom:1px solid var(--rule);
  font-size:15px;color:var(--fg-muted);
}
.agn-vazio[hidden],.agn-item[hidden]{display:none}

@media(max-width:760px){
  .agn-item{grid-template-columns:72px minmax(0,1fr);row-gap:16px;align-items:start}
  .agn-fim{grid-column:2;justify-content:flex-start}
  .agn-dia{font-size:40px}
}