/* ============================================================
   DAidea — linha do tempo do Prêmio + agenda de ações
   Carregado só em projetos.html e index.html.

   REGRA DESTA FOLHA: o trilho horizontal é ENFEITE. O estado padrão,
   sem JS nenhum, é uma lista vertical legível. Só quando o premio.js
   confirma que dá (tela larga, sem "reduzir movimento") ele põe a
   classe .js-trilho na seção e o enfeite liga. Mesmo plano B que
   protege o momento 3D das lâmpadas.
   ============================================================ */

/* ---------- 1. Estado padrão: lista vertical ---------- */

.premio-olho{
  font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--verde-marca);margin-bottom:var(--e2);font-variant-numeric:tabular-nums;
}
.premio-lede{font-size:17px;line-height:1.6;color:var(--tinta-fraca);max-width:52ch;margin-top:var(--e2)}

/* na lista, o trilho respeita a mesma largura do resto da página;
   no modo trilho ele ocupa a tela inteira, senão os cartões não
   têm por onde correr */
.premio-trilho{width:min(var(--largura),calc(100% - 48px));margin-inline:auto}

.premio-pista{list-style:none;margin:var(--e5) 0 0;padding:0;display:grid;gap:0}

.premio-ano{
  display:grid;grid-template-columns:5.5rem 1fr;gap:var(--e1) var(--e3);align-items:start;
  padding:var(--e3) 0;border-top:1px solid var(--linha-clara);
}
.premio-numeral{
  font-family:var(--fonte-titulo);font-weight:600;
  font-size:clamp(30px,4.6vw,42px);line-height:1;color:var(--verde-marca);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}
.premio-ano h3{font-size:18px;line-height:1.25;font-family:var(--fonte-texto);font-weight:600;letter-spacing:0}
.premio-ano p{font-size:15px;color:var(--tinta-fraca);margin-top:6px}
.premio-foto{margin-top:var(--e2);border-radius:14px;overflow:hidden}
.premio-foto img{width:100%;height:auto;object-fit:cover}

/* ---------- 2. Estado trilho: um ano de cada vez ---------- */

.js-trilho.premio{padding:0}
.js-trilho .premio-trilho{width:100%;margin:0}
.js-trilho .premio-palco{height:calc(100vh + var(--passos,11) * 44vh)}
.js-trilho .premio-tela{
  position:sticky;top:0;height:100vh;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;gap:var(--e4);
}
.js-trilho .premio-trilho{overflow:hidden}

.js-trilho .premio-pista{
  display:flex;flex-wrap:nowrap;width:max-content;gap:var(--e3);margin:0;
  /* meia tela de folga dos dois lados: o primeiro e o último ano
     conseguem chegar ao centro da tela */
  padding-inline:calc(50vw - min(38vw,230px));
  will-change:transform;
}
.js-trilho .premio-ano{
  display:block;flex:none;width:min(76vw,460px);
  padding:var(--e4);border-top:0;
  background:#fff;border:1px solid var(--linha-clara);border-radius:var(--raio);
  opacity:.38;transform:scale(.94);
  transition:opacity .45s ease,transform .45s ease,box-shadow .45s ease;
}
.js-trilho .premio-ano.ativo{
  opacity:1;transform:scale(1);
  box-shadow:0 18px 50px rgba(20,32,26,.10);
}
.js-trilho .premio-numeral{display:block;font-size:clamp(46px,7vw,76px);margin-bottom:var(--e1)}
.js-trilho .premio-ano h3{font-size:19px}

/* barra de progresso: mostra onde a pessoa está nos 11 anos */
.premio-regua{display:flex;align-items:center;gap:var(--e2);margin-top:var(--e2)}
.premio-regua span{
  font-size:13px;font-weight:600;color:var(--tinta-fraca);
  font-variant-numeric:tabular-nums;flex:none;
}
.premio-barra{flex:1;height:2px;background:var(--linha-clara);position:relative;border-radius:2px}
.premio-barra i{
  position:absolute;top:0;left:0;bottom:0;width:0;display:block;
  background:var(--verde-folha);border-radius:2px;transition:width .12s linear;
}
.premio-tela .premio-regua{display:none}
.js-trilho .premio-tela .premio-regua{display:flex}

/* ---------- 3. Agenda de ações ---------- */

.agenda-lista{list-style:none;margin:var(--e4) 0 0;padding:0;display:grid;gap:var(--e2)}
.agenda-item{
  display:grid;grid-template-columns:auto 1fr;gap:var(--e1) var(--e3);align-items:baseline;
  background:#fff;border:1px solid var(--linha-clara);border-left:3px solid var(--verde-folha);
  border-radius:14px;padding:var(--e3);
}
.agenda-item time{
  font-family:var(--fonte-titulo);font-size:17px;font-weight:600;color:var(--verde-marca);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.agenda-item h3{font-size:18px;font-family:var(--fonte-texto);font-weight:600;letter-spacing:0}
.agenda-item p{grid-column:2;font-size:15px;color:var(--tinta-fraca)}
.agenda-local{display:flex;flex-wrap:wrap;gap:var(--e1);align-items:center}
/* ARMADILHA: `display:grid` na regra acima ganha do atributo [hidden], e o
   item vencido continuaria na tela. Tem que desligar explicitamente. */
.agenda-item[hidden],.faixa-agenda[hidden]{display:none}

.agenda-vazia{
  background:#fff;border:1px dashed var(--linha-clara);border-radius:14px;
  padding:var(--e4);text-align:center;color:var(--tinta-fraca);
}
.agenda-vazia p{margin-bottom:var(--e3)}

/* faixa curta da home, com a próxima data */
.faixa-agenda{background:var(--verde-marca);color:#fff}
.faixa-agenda .envolt{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--e2) var(--e3);
  padding:var(--e3) 0;
}
.faixa-agenda time{
  font-family:var(--fonte-titulo);font-size:19px;font-weight:600;
  font-variant-numeric:tabular-nums;color:var(--verde-folha);white-space:nowrap;
}
.faixa-agenda p{font-size:15.5px;color:rgba(255,255,255,.94)}
.faixa-agenda a{
  margin-left:auto;color:#fff;font-weight:600;font-size:15px;text-decoration:none;
  min-height:44px;display:inline-flex;align-items:center;gap:6px;
  border-bottom:1px solid rgba(255,255,255,.45);
}
.faixa-agenda a:hover{border-bottom-color:var(--verde-folha)}

/* ---------- 4. Telas estreitas ---------- */

@media (max-width:720px){
  .premio-ano{grid-template-columns:1fr;gap:4px}
  .agenda-item{grid-template-columns:1fr;gap:4px}
  .agenda-item p{grid-column:1}
  .faixa-agenda a{margin-left:0}
}