/* ═══════════════════════════════════════════════════════════════════
   AGENDA DA CASA — folha compartilhada pelas três

   Mesma regra da folha de reserva: nenhuma cor aqui dentro. A casa
   declara os tokens --agd-* no :root dela apontando para as cores que
   já tem, e a agenda sai vestida da casa.

     --agd-fundo      fundo de cada cartão
     --agd-fundo-hover
     --agd-tinta      texto
     --agd-tinta-fraca  hora, entrada
     --agd-fio        as linhas da grade
     --agd-acento     o dia da semana em tamanho grande
     --agd-destaque   fundo do cartão em destaque
     --agd-destaque-tinta  texto SOBRE o destaque
     --agd-display    fonte dos títulos
   ═══════════════════════════════════════════════════════════════════ */

.agd {
  --_fundo:    var(--agd-fundo, transparent);
  --_hover:    var(--agd-fundo-hover, var(--_fundo));
  --_tinta:    var(--agd-tinta, currentColor);
  --_fraca:    var(--agd-tinta-fraca, color-mix(in srgb, var(--_tinta) 62%, transparent));
  --_fio:      var(--agd-fio, color-mix(in srgb, var(--_tinta) 16%, transparent));
  --_acento:   var(--agd-acento, var(--_tinta));
  --_dest:     var(--agd-destaque, var(--_acento));
  --_destTint: var(--agd-destaque-tinta, var(--_fundo));

  color: var(--_tinta);
}

/* Enquanto a agenda não chegou — e se o sistema estiver fora do ar — a
   seção inteira fica escondida. Agenda vazia na página é pior que
   nenhuma: o cliente lê "nada acontece aqui". */
.agd-secao[hidden] { display: none; }

.agd__grade {
  /* <ul> sem cara de lista: a marca e o recuo do navegador não somem
     sozinhos, e sem isto a grade nasce torta e com bolinha em cada dia. */
  list-style: none; margin: 0; padding: 0;

  display: grid; gap: 1px;
  background: var(--_fio);
  border-block: 1px solid var(--_fio);

  /* `auto-fit`, e não `repeat(5, 1fr)`: com quatro atrações na semana o
     número fixo deixava uma célula vazia acendendo no fim da fileira. As
     colunas se ajustam a quantas atrações a casa cadastrou. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}
.agd__grade[hidden] { display: none; }

.agd__dia {
  background: var(--_fundo);
  padding: 26px 12px 30px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-align: center;
  transition: background .2s ease;
}
.agd__dia:hover { background: var(--_hover); }

.agd__sigla {
  font-family: var(--agd-display, inherit);
  font-size: clamp(30px, 3.6vw, 44px); font-weight: 800;
  color: var(--_acento); line-height: 1; letter-spacing: -.04em;
  text-transform: lowercase;
}
.agd__data { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--_fraca); }
.agd__o { margin: 0; font-size: 14.5px; font-weight: 700; line-height: 1.35; max-width: 22ch; }
.agd__quem { font-size: 13.5px; line-height: 1.35; max-width: 22ch; color: var(--_fraca); }
.agd__h { font-size: 12px; color: var(--_fraca); font-variant-numeric: tabular-nums; letter-spacing: .06em; }

.agd__dia--destaque { background: var(--_dest); color: var(--_destTint); }
.agd__dia--destaque:hover { background: var(--_dest); }
.agd__dia--destaque .agd__sigla { color: var(--_destTint); }
.agd__dia--destaque .agd__data,
.agd__dia--destaque .agd__quem,
.agd__dia--destaque .agd__h { color: color-mix(in srgb, var(--_destTint) 74%, transparent); }

@media (prefers-reduced-motion: reduce) { .agd__dia { transition: none; } }