/* ============================================================================
   AGENDA DE CURSOS

   Duas seções, não uma lista. Ao vivo e gravado são decisões diferentes:
   no ao vivo a data é quando começa, no gravado é até quando dá para assistir.
   Ao vivo vira carrossel por mês; gravado vira prateleira por vencimento.
   ============================================================================ */

.agenda-pg{background:var(--paper);padding-bottom:clamp(80px,10vw,140px)}

/* ---------- cabeçalho ---------- */
.ag-cab{background:var(--forest-sec);color:#fff;padding:clamp(140px,15vw,190px) 0 clamp(52px,6vw,76px)}
.ag-cab h1{font-size:clamp(2.4rem,5.6vw,4.2rem);max-width:14ch}
.ag-cab .kicker{color:var(--terra)}
.ag-cab em{color:var(--terra)}
.ag-cab .lead{color:rgba(255,255,255,.8);margin-top:24px;max-width:48ch}

/* ---------- filtros ---------- */
/* Grudam no topo: filtrar é a ação principal da página, não pode ficar
   para trás quando a pessoa desce. */
.ag-filtros-barra{
  position:sticky;top:0;z-index:40;
  background:rgba(246,242,234,.92);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--hair-d);
}
.ag-filtros{
  list-style:none;display:flex;gap:8px;overflow-x:auto;
  padding:16px 0;scrollbar-width:none;
}
.ag-filtros::-webkit-scrollbar{display:none}
.ag-filtros button{
  white-space:nowrap;font-size:.86rem;font-weight:500;color:var(--ink-2);
  padding:9px 16px;border-radius:100px;border:1px solid var(--hair-d);
  background:transparent;transition:.3s var(--ease);
}
.ag-filtros button b{font-weight:600;opacity:.5;margin-left:5px}
.ag-filtros button:hover{border-color:var(--ink-3);color:var(--ink)}
.ag-filtros button.ativo{background:var(--forest-sec);border-color:var(--forest-sec);color:#fff}
.ag-filtros button.ativo b{opacity:.6}

/* ---------- as duas seções ---------- */
.ag-secao{padding-top:clamp(52px,6vw,86px)}
.ag-secao-cab h2,.ag-secao-cab p{max-width:58ch}
.ag-secao-cab .kicker{color:var(--terra-texto)}
.ag-secao-cab h2{font-size:clamp(1.7rem,3.4vw,2.6rem);margin-top:10px}
.ag-secao-cab p{color:var(--ink-2);margin-top:14px;max-width:58ch}
.ag-nota{font-size:.86rem;color:var(--ink-3);margin-top:10px}

/* O chapeu da secao de gravados vira balao laranja: e o aviso de que a logica
   da lista mudou -- aqui a data nao e quando comeca, e ate quando da para
   assistir. Texto escuro sobre o laranja, e nao branco: branco sobre esse
   laranja reprova no contraste, e a regra da marca ja e essa nas LPs. */
.ag-secao-gravados .kicker{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--terra);color:var(--forest-deep);
  padding:7px 15px;border-radius:100px;
  font-weight:700;letter-spacing:.14em;
}
.ag-secao-gravados .kicker::before{
  content:'';width:7px;height:7px;border-radius:50%;
  background:var(--forest-deep);opacity:.55;
}

/* A seção de gravados muda de fundo: é o sinal mais barato de que a lógica
   da lista mudou junto — de data que começa para prazo que acaba. */
.ag-secao-gravados{
  background:var(--paper-2);margin-top:clamp(64px,7vw,100px);
  padding-bottom:clamp(48px,6vw,72px);
  border-top:1px solid var(--hair-d);
}

/* ---------- carrossel do mês ---------- */
.mes{margin-top:clamp(30px,3.4vw,46px)}
.mes-cab{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.mes-cab h3{
  font-family:var(--serif);font-weight:300;letter-spacing:-.02em;
  font-size:clamp(1.35rem,2.6vw,1.9rem);
}
.mes-cab h3 small{font-size:.56em;color:var(--ink-3);margin-left:8px}
.mes-dica{font-size:.78rem;color:var(--ink-3);white-space:nowrap}

/* Lista vertical, e nao carrossel. A agenda existe para a pessoa varrer o que
   a escola tem; esconder metade dos cursos atras de um arraste que ninguem
   descobre trabalha contra isso. O carrossel horizontal ficou so na home,
   onde a faixa e uma amostra e o caminho para a lista inteira esta ao lado. */
.trilha{
  display:grid;grid-template-columns:1fr;gap:12px;
  width:min(var(--wrap),100%);margin-inline:auto;
  padding:18px var(--gutter) 8px;
}
.trilha-gravados{margin-top:clamp(24px,3vw,38px)}

/* ---------- card ---------- */
/* O card vira linha. Em lista vertical, card em pe obrigaria a rolar uma tela
   por curso; deitado, cabem varios na altura e a pessoa compara de relance. */
.cur{
  display:grid;
  grid-template-columns:112px 1fr auto;
  grid-template-areas:"poster corpo pe";
  align-items:center;gap:clamp(14px,2vw,22px);
  background:#fff;border:1px solid var(--hair-d);border-radius:14px;
  overflow:hidden;padding-right:clamp(16px,2vw,22px);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .3s;
}
.cur:hover{transform:translateY(-4px);box-shadow:0 18px 40px -22px rgba(16,30,22,.4);border-color:var(--hair-2)}
.cur.destacado{border-color:var(--terra);box-shadow:0 0 0 1px var(--terra)}

/* O poster nao encosta na borda do card. Sangrando de ponta a ponta ele
   competia com a borda do proprio card e a arte ficava apertada; recuado,
   ganha respiro branco em volta e o fio verde fecha o quadro. */
.cur-poster{
  grid-area:poster;display:block;aspect-ratio:4/5;overflow:hidden;
  margin:14px 0 14px 14px;border-radius:10px;
  background:var(--paper-3);
  box-shadow:0 0 0 1px rgba(20,58,40,.16);
}
.cur-poster img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s var(--ease)}
.cur:hover .cur-poster img{transform:scale(1.04)}

.cur-corpo{grid-area:corpo;padding:14px 0;display:flex;flex-direction:column;gap:7px}
.cur-topo{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cur-area{
  font-size:.62rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--terra-texto);
}
.cur-estado{
  font-size:.68rem;font-weight:600;padding:3px 9px;border-radius:100px;
  background:var(--paper-2);color:var(--ink-2);white-space:nowrap;
}
.cur-estado.est-urgente{background:rgba(190,65,14,.12);color:var(--terra-texto)}
.cur-estado.est-ultimos-dias{background:rgba(190,65,14,.12);color:var(--terra-texto)}
.cur-estado.est-proximo,.cur-estado.est-aberto{background:rgba(29,185,84,.12);color:var(--leaf-deep)}

.cur h3{
  font-family:var(--serif);font-weight:300;line-height:1.24;
  font-size:clamp(1.02rem,1.5vw,1.22rem);max-width:44ch;letter-spacing:-.01em;text-wrap:pretty;
}
.cur h3 a{color:inherit;text-decoration:none}
.cur h3 a:hover{color:var(--terra-texto)}
.cur-prof{font-size:.84rem;color:var(--ink-2)}
.cur-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:4px}
.cur-tag{
  font-size:.68rem;color:var(--ink-3);
  border:1px solid var(--hair-d);border-radius:100px;padding:3px 9px;
}

.cur-pe{
  grid-area:pe;display:flex;align-items:center;gap:clamp(14px,2vw,26px);
  padding:0;border-top:0;
}
.cur-pe > div{text-align:right}
.cur-quando{display:block;font-size:.74rem;color:var(--ink-3);text-transform:lowercase}
/* Nos gravados o prazo ganha a cor da marca. E o unico numero da pagina que
   corre contra a pessoa: nas turmas ao vivo a data diz quando comeca, aqui
   diz quando acaba. */
.trilha-gravados .cur-quando{color:var(--terra-texto);font-weight:600}
.cur-preco{
  display:block;font-family:var(--serif);font-size:1.24rem;font-weight:400;
  color:var(--ink);margin-top:2px;
}
.cur-falta{font-family:var(--sans);font-size:.82rem;font-style:normal;color:var(--ink-3)}
.cur-btn{padding:9px 15px;font-size:.79rem;flex:none}

.ag-vazio{
  width:min(var(--wrap),100%);margin:24px auto 0;padding-inline:var(--gutter);
  color:var(--ink-2);
}


/* No celular nao cabe a terceira coluna: preco e botao descem para baixo do
   texto, e o poster continua ao lado. */
@media(max-width:760px){
  .cur{
    grid-template-columns:96px 1fr;
    grid-template-areas:"poster corpo" "poster pe";
    align-items:start;padding-right:14px;
  }
  .cur-poster{align-self:center}
  .cur-corpo{padding:14px 0 0}
  .cur-pe{padding:6px 0 14px;justify-content:space-between;width:100%}
  .cur-pe > div{text-align:left}
  .cur-tags{display:none}
  .mes-dica{display:none}
}

@media print{
  .trilha{display:block;overflow:visible;margin:0;padding:0}
  .cur{width:auto;break-inside:avoid;margin-bottom:10px}
  .cur-poster{display:none}
}

@media (prefers-reduced-motion:reduce){
  .cur,.cur-poster img{transition:none}
  .cur:hover{transform:none}
  .cur:hover .cur-poster img{transform:none}
}