/* A listagem de eventos.

   TRES COISAS, E NENHUMA MEXE NA MARCACAO
   ---------------------------------------

   Oito testes travam a estrutura do cartao - `subgrid`, o numero de faixas e o
   botao preso na ultima. Nada aqui remove ou contradiz isso: a folha ajusta
   ritmo, largura e cor, com escopo em `.fx-eventos`.

   1. RITMO. `.secao` vale 128px em cima e embaixo. Numa pagina de UMA secao
      curta isso vira 256px de preto em volta de 620px de conteudo.

   2. LARGURA. `.grade` e `auto-fit` com minimo de 17rem: com um evento so, a
      unica coluna recebe os 1168px inteiros e o botao atravessa a tela.

   3. COR. O ambar tem dono no sistema - o preco e a conversao final. Aqui ele
      aparecia tambem na sobrancelha do In Move, e duas vezes na mesma tela ele
      deixa de significar "e este". A sobrancelha passa a falar terracota, como
      a de "Resultados" e a de "Duvidas?". */

/* 1. Ritmo */
.fx-eventos .secao { padding-block: clamp(var(--espaco-10), 5vw, var(--espaco-16)); }
.fx-eventos .secao:first-child { padding-top: clamp(var(--espaco-8), 4vw, var(--espaco-10)); }
.fx-eventos .secao:last-child { padding-bottom: clamp(var(--espaco-12), 6vw, var(--espaco-20)); }

/* 2. Largura */
.fx-eventos .grade:has(> .cartao--evento) {
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 25rem));
  justify-content: start;
  column-gap: clamp(var(--espaco-4), 2vw, var(--espaco-6));
}
/* O botao do cartao: terracota cheia, rotulo centrado.

   Era `.botao--secundario` - so contorno de areia -, e numa listagem em que o
   cartao e a unica acao da tela isso pedia pouco. A tinta sobre terracota e
   `--cor-sobre-marca` (carvao 950), que e o papel que o sistema ja define para
   fundo solido de marca; nao e escolha nova.

   A classe no HTML continua a mesma: os oito testes que travam o cartao leem a
   marcacao, e aqui e a folha da pagina que pinta. `justify-self` devolve ao
   botao a largura do proprio rotulo - ele seguia preso na ultima faixa, so
   deixou de ser esticado pelo `stretch` padrao da grade. */
.fx-eventos .cartao--evento > .botao {
  justify-self: start;
  justify-content: center;
  text-align: center;
  border-color: var(--marca);
  background: var(--marca);
  color: var(--cor-sobre-marca);
}
.fx-eventos .cartao--evento > .botao:hover:not(:disabled) {
  border-color: var(--marca-hover);
  background: var(--marca-hover);
}
.fx-eventos .cartao--evento > .botao:active:not(:disabled) {
  border-color: var(--marca-ativa);
  background: var(--marca-ativa);
}

/* 3. Cor */
.fx-eventos .sobrancelha { color: var(--marca); }
/* O preco guarda o ambar, e perde o corpo de manchete: numa listagem ele e
   informacao ao lado da etiqueta, e nao o titulo do cartao. */
.fx-eventos .cartao__preco { font-size: var(--fs-20); }

/* A etiqueta de situacao volta ao cobre do sistema.

   O cartao da HOME ja pinta "Inscricoes abertas" com `--event-copper`; a
   listagem usava a `.etiqueta--confirmada` generica, que e verde de estado de
   formulario. Verde ao lado de terracota e ambar era a quarta cor de acento da
   mesma tela. O texto continua dizendo a situacao, entao nada depende da cor.

   Escopado: a `.etiqueta--confirmada` segue verde no painel e nas inscricoes,
   onde ela significa estado de registro, e nao agenda. */
.fx-eventos .cartao--evento .etiqueta--confirmada {
  color: var(--cor-acento-quente);
  background: color-mix(in srgb, var(--cor-acento-quente) 12%, transparent);
}

/* Hora e local em linhas proprias. Em 400px o local caia para a linha de baixo
   e deixava o ponto separador pendurado no fim da primeira. */
.fx-eventos .cartao--evento .cartao__meta { display: grid; gap: 2px; }
.fx-eventos .cartao--evento .cartao__separador { display: none; }

/* A ABERTURA: O IN MOVE SOBRE A FOTO DO PARQUE
   =============================================================================
   Referencia "secao-nova" de Lucas, 2026-09-22. A foto e fundo de CSS, com o
   veu medido pixel a pixel contra o pior ponto de cada caixa de texto, em
   360/768/1440/1920. As cores sao as do sistema: terracota da marca no "Move",
   no slogan e no preco; areia no resto. Nada de roxo ou lima aqui - a decisao
   27 continua valendo nesta pagina.

   Vive FORA do `<main>` (bloco `hero` do base.html) para ir de borda a borda;
   o `.container--larga` interno alinha com o corpo. */
.ev-heroi {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--cor-texto);
  background: var(--cor-fundo) url("../img/eventos/eventos-fundo.f220606cfc00.webp") 62% 50% / cover no-repeat;
  border-bottom: 1px solid color-mix(in srgb, var(--cor-texto) 12%, transparent);
}
.ev-heroi::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--cor-fundo) 94%, transparent) 0%,
      color-mix(in srgb, var(--cor-fundo) 88%, transparent) 44%,
      color-mix(in srgb, var(--cor-fundo) 62%, transparent) 60%,
      color-mix(in srgb, var(--cor-fundo) 30%, transparent) 78%,
      color-mix(in srgb, var(--cor-fundo) 22%, transparent) 100%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--cor-fundo) 80%, transparent) 0%,
      color-mix(in srgb, var(--cor-fundo) 72%, transparent) 30%,
      color-mix(in srgb, var(--cor-fundo) 24%, transparent) 46%,
      transparent 58%,
      color-mix(in srgb, var(--cor-fundo) 82%, transparent) 100%);
}
.ev-heroi__interno {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--espaco-6) var(--espaco-10);
  padding-block: clamp(var(--espaco-10), 5vw, var(--espaco-16)) clamp(var(--espaco-6), 3vw, var(--espaco-10));
}
.ev-heroi__copy { max-width: 37rem; }
/* A sobrancelha volta ao ambar do sistema (`--cor-texto-luz`), que e o que
   `.sobrancelha` ja usa na home em "ATENDIMENTO COM LPF+". Pedido do Lucas em
   2026-09-22. Vale dizer que isso poe ambar duas vezes na mesma tela: aqui e no
   preco do cartao, que e a conversao final. Era justamente o que a nota "3. COR"
   la em cima evitava - so que aquela regra (`.fx-eventos .sobrancelha`) nunca
   pegou esta sobrancelha, porque o heroi vive fora do `<main>`. */
.ev-heroi .ev-heroi__sobrancelha { margin: 0 0 var(--espaco-5); color: var(--cor-texto-luz); font-size: var(--fs-14); letter-spacing: .28em; }
.ev-heroi__titulo {
  margin: 0;
  color: var(--cor-texto);
  font-size: clamp(3.5rem, 8vw, 7rem);
  font-weight: var(--peso-display);
  font-stretch: var(--largura-display);
  line-height: .92;
  letter-spacing: -.03em;
}
.ev-heroi__acento { color: var(--marca); }
/* O slogan em terracota cheia (`--marca`), o mesmo do "Move" logo acima -
   pedido do Lucas em 2026-09-22. Era `--cor-texto-marca`, que e o terracota
   misturado a 80% com areia e puxa para o salmao. O terracota puro da 5,20:1
   contra o fundo da pagina e reprova a 4,35:1 dentro de CARTAO; aqui nao ha
   cartao nenhum: o slogan senta na faixa esquerda do heroi, onde o veu chega a
   94%. Medido no Firefox, com as letras apagadas, no pior pixel da caixa:
   4,75:1 em 1280, 4,76:1 em 1440, 4,81:1 em 1920 e 4,77:1 em 2560 - acima dos
   4,5:1 de texto normal, e o slogan ainda e texto grande (24px para cima). */
.ev-heroi__slogan {
  margin: var(--espaco-3) 0 0;
  color: var(--marca);
  font-size: clamp(var(--fs-24), 2.6vw, var(--fs-36));
  font-weight: var(--peso-regular);
  line-height: 1.2;
}
.ev-heroi__texto { margin: var(--espaco-6) 0 0; max-width: 34rem; font-size: var(--fs-18); line-height: 1.55; }
.ev-heroi__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-3);
  margin: var(--espaco-8) 0 0;
  padding: 0;
  list-style: none;
}
.ev-heroi__chips li {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0 var(--espaco-5);
  border: 1px solid var(--marca);
  border-radius: var(--raio-pill);
  background: color-mix(in srgb, var(--cor-fundo) 55%, transparent);
  font-size: var(--fs-15);
  line-height: 1.3;
}
/* Sobre o sol da foto: as quatro palavras em italico, com o fio terracota a
   esquerda, como na referencia que Lucas mandou em 2026-09-22.

   Nao ha nada atras das letras: nem cartao, nem halo, nem borrao. O contraste
   quem paga e o veu da SECAO, que ganhou uma faixa escura no terco de cima (ver
   `.ev-heroi::before`). Essa foi a terceira tentativa, e as duas anteriores
   estao registradas porque ambas reprovaram na medicao: o cartao de vidro
   passava (4,52:1) mas era uma caixa; o retangulo borrado passava com folga mas
   aparecia como mancha. Tirar tudo sem tocar no veu dava 1,67:1 em 1440 - o sol
   da foto passa exatamente por aqui. Escurecer a faixa inteira nao tem aresta
   nem mancha, porque atravessa a largura toda da secao. */
.ev-heroi__palavras {
  position: relative;
  align-self: start;
  margin: var(--espaco-6) 0 0;
  padding: 0 var(--espaco-5) 0 var(--espaco-8);
  font-size: var(--fs-14);
  font-style: italic;
  font-weight: var(--peso-medio);
  letter-spacing: .3em;
  line-height: 2.2;
  text-transform: uppercase;
}
/* O fio da referencia: terracota, da primeira linha a ultima. Comeca e termina
   junto com o texto, e por isso a caixa nao tem respiro em cima nem embaixo -
   com `padding-block`, o fio media a caixa e nao as palavras. */
.ev-heroi__palavras::after {
  content: "";
  position: absolute;
  left: 0;
  /* Do ALTO DA PRIMEIRA LETRA a BASE DA ULTIMA, e nao da caixa de linha - que
     com `line-height: 2.2` sobra meia entrelinha em cima e outra embaixo. Os
     dois recuos sao essa sobra: (2.2 - 1) / 2 = .6em de meia entrelinha, mais
     .1em do ascendente ate o alto da maiuscula em cima, e .2em do descendente
     embaixo. */
  inset-block: .7em .8em;
  width: 2px;
  background: var(--marca);
}

/* O cartao do evento, sobre um vidro escuro. */
.ev-cartao {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 30%) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--espaco-6) var(--espaco-8);
  padding: var(--espaco-4);
  border: 1px solid color-mix(in srgb, var(--cor-texto) 14%, transparent);
  border-radius: var(--raio-xl);
  background: color-mix(in srgb, var(--cor-fundo) 80%, transparent);
  backdrop-filter: blur(10px);
}
/* A foto do cartao manda na altura da faixa inteira. O teto em `svh` e o que
   impede que ela sozinha estoure a tela num monitor baixo. */
.ev-cartao__foto { position: relative; isolation: isolate; aspect-ratio: 2 / 1; overflow: hidden; border-radius: var(--raio-lg); }
.ev-cartao__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* A legenda perde o cartao retangular e fica compacta, como na referencia de
   Lucas (2026-09-22). O veu continua, pelo mesmo motivo da coluna de palavras:
   a foto tem a garrafa iluminada e o bokeh quente atras das letras. Aqui ele e
   um retangulo borrado, sem aresta - o mesmo recurso, para as duas pecas da
   pagina lerem igual. */
.ev-cartao__legenda {
  position: absolute;
  isolation: isolate;
  left: var(--espaco-4);
  bottom: var(--espaco-4);
  margin: 0;
  padding: 0;
  font-size: var(--fs-12);
  font-weight: var(--peso-medio);
  letter-spacing: .28em;
  line-height: 1.6;
  text-transform: uppercase;
}
.ev-cartao__legenda::before {
  content: "";
  position: absolute;
  inset: calc(var(--espaco-4) * -1);
  z-index: -1;
  pointer-events: none;
  background: color-mix(in srgb, var(--cor-fundo) 84%, transparent);
  filter: blur(10px);
}
.ev-cartao__corpo { display: grid; gap: var(--espaco-2); }
.ev-cartao__titulo { margin: 0 0 var(--espaco-2); font-size: var(--fs-24); font-weight: var(--peso-forte); line-height: 1.2; }
.ev-cartao__titulo a { color: var(--cor-texto); text-decoration: none; }
.ev-cartao__titulo a:is(:hover, :focus-visible) { color: var(--cor-texto-marca); text-decoration: underline; text-underline-offset: 4px; }
.ev-cartao__meta { display: flex; align-items: center; gap: var(--espaco-3); margin: 0; font-size: var(--fs-16); }
.ev-cartao__meta svg { flex: none; width: 1.375rem; height: 1.375rem; fill: none; stroke: var(--marca); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ev-cartao__resumo { margin: var(--espaco-3) 0 0; max-width: 30rem; font-size: var(--fs-18); line-height: 1.45; }
.ev-cartao__acao { display: grid; justify-items: end; gap: var(--espaco-3); padding-right: var(--espaco-2); }
/* O preco comeca onde a etiqueta e o botao comecam. A coluna inteira tem a
   largura do botao (`min-width: 16rem`), e os tres itens dela eram alinhados a
   direita: o preco, sendo o mais curto, era o unico que nao encostava na borda
   esquerda. `justify-self: start` resolve sem mexer na largura de ninguem. */
.ev-cartao__preco {
  justify-self: start;
  margin: 0;
  color: var(--cor-texto-marca);
  font-size: var(--fs-30);
  font-weight: var(--peso-forte);
  letter-spacing: -.02em;
  line-height: 1;
}
/* A etiqueta e o botao dividem a borda esquerda da coluna - a marca que Lucas
   fez em 2026-09-22. A coluna ja tem a largura do botao (`min-width: 16rem`),
   entao `stretch` faz a etiqueta comecar e terminar onde ele comeca e termina;
   `flex` no lugar de `inline-flex` para que o esticamento valha. O preco segue
   encostado a direita, como na marcacao. */
.ev-cartao__situacao {
  justify-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--espaco-2);
  margin: 0;
  padding: var(--espaco-2) var(--espaco-5);
  border: 1px solid var(--marca);
  border-radius: var(--raio-pill);
  color: var(--cor-texto-marca);
  font-size: var(--fs-12);
  font-weight: var(--peso-forte);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.ev-cartao__situacao--fechada { border-color: var(--cor-borda-forte); color: var(--cor-texto-suave); }
.ev-cartao__botao { min-width: 16rem; }
.ev-heroi__nota {
  margin: 0;
  color: var(--cor-texto);
  font-size: var(--fs-12);
  font-weight: var(--peso-medio);
  letter-spacing: .32em;
  text-transform: uppercase;
}
/* "Movimento transforma" no ambar da sobrancelha "Eventos" (`--cor-texto-luz`),
   pedido do Lucas em 2026-09-23. O fio ao lado e `currentColor` e acompanha. */
.ev-heroi__nota--esquerda { display: flex; align-items: center; gap: var(--espaco-4); color: var(--cor-texto-luz); }
.ev-heroi__nota--esquerda::after { content: ""; width: 3rem; height: 1px; background: currentColor; }
.ev-heroi__nota--direita { justify-self: end; }
.ev-heroi__riscos { margin-right: var(--espaco-2); color: var(--marca); letter-spacing: .1em; }

@media (max-width: 64rem) {
  .ev-heroi { background-position: 70% 50%; }
  .ev-heroi::before {
    background:
      linear-gradient(180deg,
        color-mix(in srgb, var(--cor-fundo) 88%, transparent) 0%,
        color-mix(in srgb, var(--cor-fundo) 78%, transparent) 55%,
        color-mix(in srgb, var(--cor-fundo) 90%, transparent) 100%);
  }
  .ev-heroi__interno { grid-template-columns: minmax(0, 1fr); }
  .ev-heroi__palavras { display: none; }
  .ev-cartao { grid-template-columns: minmax(0, 1fr) auto; }
  .ev-cartao__foto { grid-column: 1 / -1; max-height: 16rem; }
}
@media (max-width: 40rem) {
  .ev-cartao { grid-template-columns: minmax(0, 1fr); }
  .ev-cartao__acao { justify-items: start; padding-right: 0; }
  .ev-cartao__botao { width: 100%; }
  .ev-heroi__nota--direita { justify-self: start; }
}
/* A ABERTURA OLHA A ALTURA DA JANELA, E NAO SO A LARGURA
   -----------------------------------------------------------------------------
   Ate aqui a abertura media 1135px de altura em QUALQUER monitor, porque respiro,
   titulo e cartao so olhavam `vw`. Num monitor de 1080 sobravam 55px; num
   notebook de 864, 271px - e a barra de rolagem aparecia cortando duas linhas do
   rodape. Pedido do Lucas em 2026-09-22: caber na tela a 100% de zoom.

   Tudo mora dentro de `(min-width: 64rem)` de proposito. Abaixo disso a pagina
   nao muda uma medida sequer: no celular rolar e o comportamento certo, e nao
   havia por que mexer no que ja estava conferido a 360 e a 768.

   `svh` e nao `vh` porque `vh` conta a janela SEM a barra do navegador. O bloco
   nem chega ao celular, mas a unidade certa continua sendo a certa.

   Medido no Firefox (altura do documento contra a da janela): 1080, 1000, 960 e
   900 cabem; 864 cabe raspando; 768 ainda passa. Abaixo de 800 nao da para caber
   sem tirar da tela algo que informa sobre o evento, e isso nao foi feito. */
@media (min-width: 64rem) {
  /* A SECAO PREENCHE A JANELA ATE O RODAPE, SEM NUMERO MAGICO.

     A primeira versao disto descontava `16.25rem` - 77px de cabecalho mais
     183px de rodape - e era fragil pelo motivo obvio: mudar o rodape quebrava a
     abertura em silencio, e o rodape mudou no mesmo dia. Agora o `<body>` desta
     pagina e uma coluna flex de `100svh` (ver `.fx-eventos-tela` abaixo) e a
     abertura leva `flex: 1`. Ela recebe o que sobrar, seja qual for a altura do
     cabecalho e do rodape, e ninguem precisa saber quanto e.

     A SOBRA VAI PARA BAIXO DO CARTAO, e nao entre ele e o texto. Ate 23/09 o
     interno usava `align-content: space-between`, que encostava o cartao no fim
     da secao e abria um vao grande sob os chips; Lucas pediu o cartao perto do
     texto. Agora a grade tem tres linhas - texto, cartao, e uma terceira `1fr`
     que come a sobra - e as frases "Movimento transforma" / "/// In Move", quando
     aparecem, descem para o fim dessa terceira linha. */
  .fx-eventos-tela {
    display: flex;
    flex-direction: column;
    min-height: 100svh;
  }
  /* `display: grid` no heroi e o que faz o interno ESTICAR ate o fim dele. Sem
     isto o heroi crescia com o `flex: 1` e o interno ficava do tamanho do
     proprio conteudo: a sobra toda ia parar embaixo do cartao, numa faixa vazia
     de quase 200px. */
  .fx-eventos-tela .ev-heroi { flex: 1; display: grid; }
  /* SEM EVENTO DO PROGRAMA, QUEM CRESCE E O <main>. Nesse estado a pagina
     renderiza o cabecalho simples no lugar de `.ev-heroi`, e ninguem na coluna
     leva `flex: 1`: com a lista curta, o rodape parava no meio da janela e
     deixava um vao embaixo. So quando a abertura falta - com ela presente, a
     sobra continua sendo dela. (Revisao do PR #14, 23/09.) */
  .fx-eventos-tela:not(:has(> .ev-heroi)) > main { flex: 1; }
  .ev-heroi__interno {
    grid-template-rows: auto auto 1fr;
    /* MEDIDOS NA BANCADA pelo Lucas em 2026-09-22, e por isso fixos: nao sao
       proporcoes que o navegador deva recalcular, sao o lugar que ele achou.
       32px entre o texto e o cartao, 24px do cartao ate o rodape da secao. Os
       dois batem exatamente com `--espaco-8` e `--espaco-6`. */
    gap: var(--espaco-8) var(--espaco-10);
    padding-block: clamp(var(--espaco-6), 4.6svh, var(--espaco-16)) var(--espaco-6);
  }
  .ev-heroi__nota { align-self: end; }
  .ev-heroi .ev-heroi__sobrancelha { margin-bottom: clamp(var(--espaco-2), 2svh, var(--espaco-5)); }
  .ev-heroi__titulo { font-size: clamp(3.5rem, min(8vw, 11svh), 7rem); }
  .ev-heroi__slogan {
    margin-top: clamp(var(--espaco-2), 1.4svh, var(--espaco-3));
    font-size: clamp(var(--fs-20), min(2.6vw, 3svh), var(--fs-36));
  }
  .ev-heroi__texto { margin-top: clamp(var(--espaco-3), 2.2svh, var(--espaco-6)); }
  .ev-heroi__chips {
    gap: clamp(var(--espaco-2), 1.4svh, var(--espaco-3));
    margin-top: clamp(var(--espaco-4), 2.8svh, var(--espaco-8));
  }
  .ev-heroi__chips li { min-height: clamp(2rem, 4.2svh, 2.5rem); }
  /* 25px na bancada; `--espaco-6` sao 24. O pixel de diferenca nao aparece, e
     um literal aqui sairia da escala de espacamento por nada. */
  .ev-cartao { padding: var(--espaco-6); }
  /* A foto manda na altura da faixa inteira do cartao. */
  /* 170px na bancada. Com a coluna em 30% o `aspect-ratio: 2 / 1` ja entrega
     perto disso sozinho; o teto continua existindo para telas baixas, onde a
     foto era o que estourava a janela. */
  .ev-cartao__foto { max-height: clamp(7rem, 15svh, 10.625rem); }
}

/* TELA BAIXA: o ultimo degrau antes de a pagina passar da janela.

   Ate aqui tudo encolheu proporcionalmente. Abaixo de 1088px de janela isso nao
   basta, e a escolha passa a ser entre cortar conteudo ou deixar rolar. Cortam as
   DUAS FRASES decorativas do rodape da secao - "Movimento transforma" e
   "/// In Move" -, que repetem o que o titulo e o slogan ja dizem tres dobras
   acima. Nada que informe sobre o evento (data, local, preco, situacao, botao)
   sai da tela. */
@media (max-height: 68rem) and (min-width: 64rem) {
  .ev-heroi__nota { display: none; }
  .ev-cartao__foto { max-height: clamp(5.5rem, 13svh, 10.625rem); }
  .ev-heroi__chips { gap: var(--espaco-2); }
  .ev-heroi__chips li { min-height: 2rem; }
}

@media (forced-colors: active) {
  .ev-heroi { background-image: none; }
  .ev-heroi::before { display: none; }
  .ev-cartao, .ev-heroi__chips li, .ev-cartao__situacao { border-color: CanvasText; background: Canvas; }
  .ev-cartao__legenda::before { display: none; }
  .ev-heroi__palavras::after { background: CanvasText; }
  .ev-heroi__acento, .ev-heroi__slogan, .ev-cartao__preco, .ev-heroi__riscos { color: CanvasText; }
}
@media print {
  .ev-heroi { background-image: none; }
  .ev-heroi::before,
  .ev-cartao__legenda::before { display: none; }
}