/* =====================================================================
   VITRINE DE CONCURSOS — a entrada do site (17/09/2026)
   =====================================================================

   Regras da casa que mandam aqui: paleta Festival, nada de azul nem de
   dourado, nada de menu quadrado, piso de 11px e alvo de toque de 44px.

   A decisão de forma: o cartão INTEIRO é o link. Cartão com botãozinho
   dentro entrega ao dedo um alvo de 30px cercado de área morta; o cartão
   inteiro entrega mais de 90px de altura. Quem usa no celular sente a
   diferença antes de saber explicar.
   ===================================================================== */

.vitrine {
  --festa-brasa: #ff675d;
  --festa-vinho: #b72f67;
  --festa-terra: #b94f42;
  --festa-mata: #4f9b58;
  --festa-limo: #b7d94b;
  --festa-papel: #fff4df;
  --festa-ameixa: #4e243d;
  --festa-noite: #32192b;

  margin: 0 0 clamp(20px, 4vw, 34px);
}

.vitrine__topo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  margin-bottom: 14px;
}

.vitrine__topo h2 {
  margin: 0;
  font-size: clamp(19px, 2.6vw, 25px);
  letter-spacing: .01em;
  color: var(--festa-papel);
}

.vitrine__topo p {
  margin: 0;
  font-size: 13px;
  color: rgba(255, 244, 223, .72);
}

/* Grade que respira: cresce em coluna no celular e vira duas ou três no
   desktop sem media query, porque o conteúdo é que decide a quebra. */
.vitrine__grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 310px), 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.vitrine__cartao {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  min-height: 92px;           /* muito acima dos 44px de alvo de toque */
  padding: 14px 16px;
  border: 1px solid rgba(255, 244, 223, .16);
  border-radius: 18px 6px 18px 6px;   /* nada de menu quadrado */
  background:
    linear-gradient(135deg, rgba(78, 36, 61, .92), rgba(50, 25, 43, .96));
  color: var(--festa-papel);
  text-decoration: none;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.vitrine__cartao:hover,
.vitrine__cartao:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(183, 217, 75, .55);
  box-shadow: 0 10px 26px rgba(24, 12, 20, .42);
}

.vitrine__cartao:focus-visible {
  outline: 3px solid var(--festa-limo);
  outline-offset: 3px;
}

.vitrine__marca {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px 4px 14px 4px;
  background: rgba(255, 103, 93, .18);
  border: 1px solid rgba(255, 103, 93, .38);
}

.vitrine__marca svg,
.vitrine__marca img {
  width: 26px;
  height: 26px;
}

.vitrine__corpo {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.vitrine__nome {
  font-size: 17px;
  line-height: 1.2;
  color: var(--festa-papel);
}

.vitrine__nome small {
  font-size: 12px;
  font-weight: 400;
  color: rgba(255, 244, 223, .62);
}

.vitrine__banca {
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--festa-limo);
}

.vitrine__chamada {
  font-size: 12.5px;
  line-height: 1.35;
  color: rgba(255, 244, 223, .78);
  /* Duas linhas bastam: o resto está dentro do curso, não no cartão.
     A altura é declarada junto com o clamp porque `-webkit-line-clamp`
     sozinho não reserva espaço — medido em 1280 e 1920, o conteúdo saía
     6px por baixo da caixa e encostava no que vinha depois. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: calc(12.5px * 1.35 * 2);
}

/* O prazo é a informação que decide, então tem peso visual próprio. */
.vitrine__prazo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-width: 84px;
  padding: 8px 10px;
  border-radius: 14px 4px 14px 4px;
  background: rgba(24, 12, 20, .42);
  border: 1px solid rgba(255, 244, 223, .12);
  text-align: center;
}

.vitrine__dia {
  font-size: 23px;
  line-height: 1;
  color: var(--festa-papel);
  font-variant-numeric: tabular-nums;
}

.vitrine__dia--vazio {
  color: rgba(255, 244, 223, .38);
}

.vitrine__mes {
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 244, 223, .66);
}

.vitrine__rotulo {
  margin-top: 3px;
  font-size: 11px;
  line-height: 1.25;
  color: rgba(255, 244, 223, .74);
}

/* Urgência é sinal, não enfeite: só aparece quando a data aperta de verdade
   (prova em até 45 dias, ou inscrição fechando em uma semana). */
.vitrine__cartao--urgente {
  border-color: rgba(255, 103, 93, .58);
}

.vitrine__cartao--urgente .vitrine__prazo {
  background: rgba(255, 103, 93, .2);
  border-color: rgba(255, 103, 93, .5);
}

.vitrine__cartao--urgente .vitrine__rotulo {
  color: #ffd9d3;
}

.vitrine__cartao--encerrado {
  opacity: .58;
}

.vitrine__cartao--encerrado .vitrine__prazo {
  background: rgba(24, 12, 20, .55);
}

.vitrine__nota {
  margin: 12px 2px 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: rgba(255, 244, 223, .58);
}

/* =====================================================================
   NO CELULAR, A VITRINE É UMA FAIXA QUE DESLIZA (17/09/2026)
   =====================================================================

   Medido: com seis cartões empilhados, a vitrine empurrava o palco imersivo
   da Home para y = 1444 numa tela de 844px — ele saía inteiro da primeira
   dobra, e a auditoria da casa exige a cena em tela cheia ali.

   O dono quer as duas coisas, e as duas cabem: em vez de escolher entre o
   concurso e a cena, a faixa horizontal entrega os seis concursos em ~150px.
   Ninguém perde cartão — desliza-se o dedo, que é gesto que se aprende sem
   instrução. A rolagem é DO CONTÊINER, não da página: a regra da casa proíbe
   a página rolar de lado, não uma faixa.
   ===================================================================== */
@media (max-width: 760px) {
  .vitrine__grade {
    grid-auto-flow: column;
    grid-auto-columns: min(78vw, 272px);
    grid-template-columns: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    /* respiro para o cartão não colar na borda ao deslizar */
    padding: 2px 2px 10px;
    margin-inline: -2px;
    scrollbar-width: thin;
  }

  .vitrine__grade > li {
    scroll-snap-align: start;
  }

  .vitrine__cartao {
    min-height: 0;
    padding: 12px 13px;
    /* alvo de toque continua muito acima dos 44px: o cartão tem ~76px */
  }

  .vitrine__chamada {
    -webkit-line-clamp: 1;
    max-height: calc(12.5px * 1.35);
  }

  .vitrine__topo h2 {
    font-size: 18px;
  }

  /* A nota de rodapé é honestidade, não instrução de uso: no celular ela
     custa altura demais para o que entrega. Continua no desktop. */
  .vitrine__nota {
    display: none;
  }
}

@media (max-width: 420px) {
  /* Dentro da faixa horizontal o cartão NÃO empilha: empilhar devolveria a
     altura que a faixa acabou de economizar. Só encolhe. */
  .vitrine__cartao {
    gap: 10px;
  }
  .vitrine__marca {
    width: 40px;
    height: 40px;
  }
  .vitrine__marca { grid-area: marca; }
  .vitrine__corpo { grid-area: corpo; }
  .vitrine__prazo {
    grid-area: prazo;
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-start;
    gap: 8px;
    min-width: 0;
    text-align: left;
  }
  .vitrine__rotulo { margin-top: 0; }
}

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