/*
 * The event card and the list that holds it, on its own (2026-09-24).
 *
 * Split out of agenda.css because the home shows three event cards, and
 * loading the whole agenda stylesheet there put 14 kB of filters and
 * calendar in the critical path of the home for them: measured by
 * seo-performance at +68 ms of LCP on a phone. The agenda loads this as a
 * dependency, so nothing about /eventos/ changes.
 */

/* -------------------------------- a lista --------------------------------- */

.ev-list{display:grid;gap:12px;margin:18px 0 8px}

/*
 * UMA COLUNA, de propósito, e é a diferença mais importante entre esta tela e a
 * busca de profissionais.
 *
 * A grade de cartões da busca funciona porque a pergunta é "qual destes?" e a
 * comparação é lado a lado. Aqui a pergunta é "o que tem, e quando?", e a
 * resposta se lê descendo: uma coluna põe as datas numa régua vertical que o
 * olho percorre de uma vez. Em duas colunas, dia 24 fica ao lado de dia 8 e a
 * ordem cronológica, que é a única coisa que a lista promete, some.
 */

/*
 * `[hidden]` TEM QUE VENCER O `display` DA CLASSE.
 *
 * `.ev-card{display:grid}` é regra de autor e ganha de `[hidden]{display:none}`,
 * que é do navegador. Sem esta linha, `card.hidden = true` marca o atributo e o
 * cartão continua na tela: o filtro do calendário não filtrava nada, e ainda
 * dava preventDefault no link que o servidor resolvia certo. A fatia entregava
 * menos com JavaScript do que sem.
 *
 * O `home.css` já carrega o mesmo conserto para `.feat-arrow`. É uma armadilha
 * de CSS que este projeto já encontrou uma vez.
 */
.ev-card[hidden]{display:none}

.ev-card{display:grid;grid-template-columns:64px 1fr;gap:16px;align-items:start;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);
  padding:16px 18px;transition:border-color .15s var(--ease)}
.ev-card:hover{border-color:var(--petrol-soft)}

/* ------------------------------- a data ----------------------------------- */

/*
 * O bloco da data é a âncora da linha, e por isso tem fundo próprio.
 *
 * Não é decoração: é o que permite achar "dia 24" descendo a página sem ler
 * nenhum título. O verde é o mesmo do sistema, bem lavado, porque a repetição
 * vertical de qualquer cor forte cansaria em cinco cartões.
 */
.ev-when{display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:9px 6px;border-radius:var(--r-sm);background:var(--petrol-wash);
  border:1px solid var(--petrol-soft);min-height:62px}
.ev-day{font-family:var(--font-display);font-weight:var(--display-weight);font-size:26px;
  line-height:1;color:var(--petrol-deep)}
.ev-month{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--petrol);margin-top:3px}

/* -------------------------------- o corpo --------------------------------- */

.ev-body{min-width:0}
/*
 * O CARTÃO INTEIRO É O ALVO, e não os 231x16px do título.
 *
 * O link do título é a única forma de abrir o evento, e 16px de altura falha o
 * mínimo de 24px da WCAG 2.5.8 e fica muito longe dos 44px que este projeto usa
 * como orçamento. O ::after esticado sobre o cartão é o mesmo padrão do
 * .pro-card: o alvo vira o cartão todo sem acrescentar um segundo link para o
 * leitor de tela anunciar.
 *
 * O z-index das etiquetas fica acima da camada para elas continuarem
 * selecionáveis, e o position:relative do cartão é o que ancora o ::after.
 */
.ev-card{position:relative}
.ev-title{margin:0 0 5px;font-size:18px;line-height:1.3}
.ev-title a{color:inherit;text-decoration:none}
.ev-title a::after{content:"";position:absolute;inset:0;z-index:1}
.ev-title a:hover{text-decoration:underline;text-underline-offset:2px}
.ev-card:focus-within{border-color:var(--petrol)}
.ev-tags,.ev-flag{position:relative;z-index:2}

/*
 * As três informações da linha meta são separadas por um ponto DESENHADO pelo
 * CSS, não digitado no HTML.
 *
 * Um " · " escrito no template viraria texto para o leitor de tela, que
 * anunciaria "ponto médio" entre cada pedaço. Como ::before, ele é enfeite e o
 * leitor lê "19:30, Bar do Zé, Londres".
 */
/*
 * O separador nunca abre linha (2026-09-24). Com o ponto só "entre irmãos",
 * uma linha que quebrava começava com "· Salão da Igreja" - visível nos cartões
 * estreitos da home. Agora TODO item leva o ponto na frente, numa caixa de
 * largura fixa, e a linha inteira começa 17px à esquerda sob um clip-path
 * que esconde esses 17px (overflow:hidden não serve: ele recorta na borda da
 * própria caixa). O ponto do primeiro item de cada linha cai no trecho
 * escondido, e o do meio fica onde estava.
 */
.ev-meta{margin:0 0 8px -17px;clip-path:inset(0 0 0 17px);font-size:14px;color:var(--muted);
  display:flex;flex-wrap:wrap;gap:0}
.ev-meta > span::before{content:"·";display:inline-block;width:17px;text-align:center;color:var(--faint)}
.ev-hours{font-variant-numeric:tabular-nums;white-space:nowrap}
.ev-city{white-space:nowrap}
.ev-venue{overflow-wrap:anywhere}

.ev-tags{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:7px}
.ev-price{font-size:13.5px;color:var(--muted);font-weight:600}

/*
 * "Grátis" é a única etiqueta pintada da lista.
 *
 * O amarelo do sistema fica para a geometria; aqui o verde lavado basta, e o
 * peso vem do contorno, não de um bloco de cor. É a regra do projeto: a cor
 * marca, não preenche.
 */
/* 4,499:1 medido, falhava por um milésimo. #136B3F dá 5,91:1. */
.tag-free{background:var(--wa-soft);color:#136B3F;border:1px solid #BFE8CC}
/*
 * 4,40:1 medido, e esta é a pior das três para falhar: é a marca de endereço
 * residencial, a informação que a política de conteúdo obriga a mostrar a quem
 * está decidindo se vai até a casa de alguém. #6B5410 dá 6,55:1.
 */
.tag-home{background:var(--gold-soft);color:#6B5410;border:1px solid #EAD98F}

/* ------------------------- os estados do evento --------------------------- */

.ev-flag{margin:8px 0 0;font-size:13px;font-weight:700;color:var(--petrol)}
.ev-flag-now{color:var(--ok)}
.ev-flag-bad{color:#8A2A1F}

/*
 * O passado e o cancelado descoram, e continuam legíveis.
 *
 * `opacity` no cartão inteiro apagaria junto o texto do aviso, que é justamente
 * a informação nova. Então a lavagem é só na data - a âncora visual - e o corpo
 * fica inteiro.
 */
.ev-card.is-past .ev-when,
.ev-card.is-cancelled .ev-when{background:var(--bg-2);border-color:var(--line)}
.ev-card.is-past .ev-day,
.ev-card.is-cancelled .ev-day{color:var(--muted)}
.ev-card.is-past .ev-month,
.ev-card.is-cancelled .ev-month{color:var(--faint)}

.ev-card.is-cancelled .ev-title a{text-decoration:line-through;text-decoration-thickness:1px}

@media (max-width:560px){
  .ev-card{grid-template-columns:52px 1fr;gap:13px;padding:14px}
  .ev-day{font-size:22px}
  .ev-title{font-size:16.5px}
}


/*
 * A imagem do cartão (2026-09-24). Numa lista larga ela fica à direita, na
 * terceira coluna, e a data continua sendo a âncora da esquerda. Nos três
 * cartões estreitos da home (acima de 900px) e no celular ela sobe para o
 * topo, de borda a borda, e a data desce para a linha do título.
 */
.ev-card.has-media{grid-template-columns:64px minmax(0,1fr) 190px;grid-template-areas:"when body media"}
.ev-card.has-media > .ev-when{grid-area:when}
.ev-card.has-media > .ev-body{grid-area:body}
.ev-card.has-media > .cm{grid-area:media;align-self:stretch;aspect-ratio:auto;min-height:112px}
.ev-meta svg{width:13px;height:13px;vertical-align:-2px;margin-right:2px;color:var(--faint)}
.ev-tags .tag svg{width:13px;height:13px}
.ev-card.is-past .cm,.ev-card.is-cancelled .cm{filter:grayscale(1);opacity:.7}

@media (max-width:560px){
  .ev-card.has-media{grid-template-columns:52px minmax(0,1fr);grid-template-areas:"media media" "when body"}
  .ev-card.has-media > .cm{aspect-ratio:16/10;min-height:0;margin:-14px -14px 0;
    border-radius:calc(var(--r-md) - 1px) calc(var(--r-md) - 1px) 0 0}
}

/* O destaque pago do evento (2026-09-24) usa o mesmo tratamento do perfil em
   Destaque desde 2026-10-02, quando o dono recusou o filete amarelo de 3px e a
   etiqueta amarela: a borda fina verde-azul (--destaque-edge, app.css) com o
   primeiro degrau da sombra, e "DESTAQUE" em versalete com a estrela dourada.
   A palavra continua escrita, porque espaço pago tem de se dizer pago
   (ASA/CAP), mas sem pílula e sem campo de cor. */
.ev-card.is-featured,.ev-card.is-featured:hover{border-color:transparent;box-shadow:var(--shadow-1);
  background:linear-gradient(var(--card),var(--card)) padding-box,var(--destaque-edge) border-box}
.tag.tag-featured{background:none;border:0;padding:3px 2px 3px 0;color:var(--petrol-deep);
  font-size:10.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase}
.tag.tag-featured svg{width:12px;height:12px;color:var(--gold)}