/* ==========================================================================
   PROGRAMAÇÃO DE EVENTO — pgm-
   Cada dia um bloco: o dia grudado à esquerda, as sessões passando à direita.
   Tokens usados: --bg --fg --fg-2 --fg-muted --rule --rule-2 --accent
                  --accent-ink --display --nav-h --radius-media --radius-pill
   ========================================================================== */

.pgm-dias{display:grid;gap:clamp(48px,7vh,80px);margin-top:clamp(40px,6vh,64px)}

.pgm-dia{
  display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);
  gap:clamp(24px,4vw,64px);align-items:start;
}

/* O dia gruda enquanto as sessões dele passam. sticky dentro de [data-rv]
   funciona: filtro prende descendente fixed, não sticky (MANUAL §5). */
.pgm-dia-cab{position:sticky;top:calc(var(--nav-h) + 24px);display:grid;gap:10px}
.pgm-dia-n{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-ink,var(--accent))}
.pgm-dia-tema{
  font-family:var(--display);font-weight:700;
  font-size:clamp(24px,2.4vw,32px);line-height:1.1;letter-spacing:-.022em;color:var(--fg);
}
.pgm-dia-p{font-size:15px;line-height:1.6;color:var(--fg-2);max-inline-size:34ch}
.pgm-dia.is-hoje .pgm-dia-n::after{content:" · hoje";color:var(--fg)}

/* ---------------------------------------------------------------- sessões */
.pgm-sessoes{border-top:1px solid var(--rule)}
.pgm-sessao{
  position:relative;display:grid;gap:8px;
  padding:24px 0 26px;border-bottom:1px solid var(--rule);
}
.pgm-meta{font-size:12.5px;letter-spacing:.04em;color:var(--fg-muted);font-variant-numeric:tabular-nums}
.pgm-hora{color:var(--fg);font-weight:500}
.pgm-formato{color:var(--fg-2)}
.pgm-titulo{
  font-family:var(--display);font-weight:700;
  font-size:clamp(18px,1.6vw,22px);line-height:1.2;letter-spacing:-.015em;color:var(--fg);
}
.pgm-linha{font-size:14.5px;line-height:1.55;color:var(--fg-2);max-inline-size:60ch}
.pgm-quem{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.pgm-pessoa{
  font-size:12px;color:var(--fg-2);
  border:1px solid var(--rule-2);border-radius:var(--radius-pill);padding:4px 11px;
}

/* ---------------------------------------------------------------- estados
   Escritos pelo script, e só no dia do evento. O selo "Acontecendo agora" é
   criado por ele; nada disso está no markup. */
.pgm-agora{
  position:absolute;inset-block-start:22px;inset-inline-end:0;
  display:inline-flex;align-items:center;gap:8px;
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);
  border:1px solid color-mix(in srgb,var(--accent) 50%,transparent);
  border-radius:var(--radius-pill);padding:5px 11px;
}
.pgm-agora::before{content:"";inline-size:7px;block-size:7px;border-radius:50%;background:currentColor}
.pgm-sessao[data-estado="passou"] .pgm-titulo,
.pgm-sessao[data-estado="passou"] .pgm-linha,
.pgm-sessao[data-estado="passou"] .pgm-quem{opacity:.5}

@media(max-width:860px){
  .pgm-dia{grid-template-columns:1fr}
  .pgm-dia-cab{position:static}
  .pgm-agora{position:static;justify-self:start}
}