/* =============================================================================
   CTL Hub Quiz — landing pública (vitrine) e botão de mudo
   -----------------------------------------------------------------------------
   Estrutura no padrão Cobalt: hero em duas colunas (texto à esquerda, preview
   do produto à direita), faixas separadas por respiro generoso e cartões de
   canto largo.

   Zero cor fixa: tudo sai de tokens.css. Auditado em 320 px sem rolagem
   lateral — todas as grades caem para uma coluna antes disso.
   ========================================================================== */

/* Substitui a classe `conteudo` da base: aqui o hero encosta no topo e o
   espaçamento entre faixas é controlado por gap. */
.vitrine {
  display: flex;
  flex-direction: column;
  gap: var(--e12);
  padding-block: 0 var(--e16);
}

/* ---------------------------------------------------------------------- hero */

.vitrine-hero {
  padding-block: var(--e10) var(--e6);
}

.vitrine-hero__grade {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e8);
  align-items: center;
}

.vitrine-hero__texto {
  gap: var(--e5);
  min-width: 0;
}

.vitrine-hero__titulo {
  font-family: var(--fonte-titulo);
  font-size: var(--texto-hero);
  font-weight: var(--peso-black);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--tinta-titulo);
}

/* A palavra em destaque usa o azul de apoio (PDF seção 4.1). */
.vitrine-hero__realce {
  color: var(--apoio);
}

.vitrine-hero__resumo {
  max-width: 34rem;
}

.vitrine-hero__acoes {
  gap: var(--e3);
}

.vitrine-hero__provas {
  gap: var(--e2) var(--e5);
  margin-top: var(--e1);
}

.vitrine-hero__provas li {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
}

/* Bolinha marcadora feita em CSS para não depender de emoji. */
.vitrine-hero__provas li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--raio-pill);
  background: var(--teal);
  flex-shrink: 0;
}

/* ------------------------------------------------------- preview do produto */

.vitrine-preview {
  display: flex;
  flex-direction: column;
  gap: var(--e4);
  min-width: 0;
  background: var(--superficie);
  /* Fundo levemente degradê, assinatura do Cobalt. */
  background-image: linear-gradient(
    160deg,
    color-mix(in srgb, var(--marca) 6%, transparent),
    transparent 55%
  );
}

.vitrine-preview__marca {
  gap: var(--e2);
  min-width: 0;
}

.vitrine-preview__marca .forte {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vitrine-preview__emoji {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  border-radius: var(--raio);
  background: var(--marca-suave);
  font-size: var(--texto-md);
}

.vitrine-preview__stats {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e3);
}

.vitrine-preview__stats .stat {
  padding: var(--e3);
  background: var(--superficie-2);
}

/* Sem hover no enfeite: ele não é clicável. */
.vitrine-preview__stats .stat:hover {
  transform: none;
  box-shadow: none;
}

.vitrine-preview__legenda,
.vitrine-preview__rodape {
  gap: var(--e2);
}

/* Larguras das barrinhas de stat: classes em vez de style inline. */
.vitrine-barra {
  display: block;
  height: 100%;
}

.vitrine-barra--alta { width: 88%; }
.vitrine-barra--media { width: 62%; }

/* Mini gráfico de colunas (o `.pvbar` do Cobalt). */
.vitrine-grafico {
  display: flex;
  align-items: flex-end;
  gap: var(--e2);
  height: 92px;
  padding: var(--e3);
  border: 1px solid var(--linha);
  border-radius: var(--raio-lg);
  background: var(--superficie-2);
}

.vitrine-grafico__barra {
  flex: 1;
  min-width: 0;
  border-radius: var(--raio-xs);
  background: linear-gradient(180deg, var(--apoio), var(--marca));
}

.vitrine-grafico__barra--1 { height: 45%; }
.vitrine-grafico__barra--2 { height: 68%; }
.vitrine-grafico__barra--3 { height: 52%; }
.vitrine-grafico__barra--4 { height: 84%; }
.vitrine-grafico__barra--5 { height: 71%; }
.vitrine-grafico__barra--6 { height: 96%; }
.vitrine-grafico__barra--7 { height: 60%; }

/* --------------------------------------------------- atalho ?host= do painel */

.vitrine-host {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e5);
  border-color: var(--apoio);
  box-shadow: var(--sombra-md);
}

.vitrine-host .pilha-sm {
  min-width: 0;
}

/* --------------------------------------------------- bloco do código da sala */

.vitrine-codigo__grade {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e6);
  align-items: center;
}

.vitrine-codigo__cartao {
  display: flex;
  flex-direction: column;
  gap: var(--e4);
  min-width: 0;
  /* Fundo pontilhado não entra aqui: o campo precisa de contraste limpo. */
  background: var(--superficie);
}

.vitrine-codigo__form {
  gap: var(--e4);
}

/* O campo de código já vem monoespaçado e espaçado da base; aqui só cresce. */
.vitrine-codigo__form .entrada--codigo {
  padding-block: var(--e4);
}

.vitrine-codigo__lenilson {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e3);
}

.vitrine-codigo__lenilson img {
  width: min(100%, 320px);
  height: auto;
  /* `drop-shadow()` não aceita o token de box-shadow (ele tem spread), então a
     sombra do recorte do PNG é montada com a cor da marca. */
  filter: drop-shadow(0 16px 24px color-mix(in srgb, var(--marca) 28%, transparent));
}

/* ------------------------------------------------------- vitrine de quizzes */

.vitrine-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: var(--e4);
}

.vitrine-quiz {
  display: flex;
  flex-direction: column;
  gap: var(--e3);
  height: 100%;
  min-width: 0;
}

.vitrine-quiz__emoji {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  border-radius: var(--raio-md);
  background: var(--marca-suave);
  font-size: var(--texto-xl);
  line-height: 1;
}

.vitrine-quiz .cartao__titulo {
  /* Título de até duas linhas; o resto vira reticências. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.vitrine-quiz__categoria {
  align-self: flex-start;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vitrine-quiz__descricao {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.vitrine-quiz__rodape {
  margin-top: auto;
  padding-top: var(--e3);
  border-top: 1px solid var(--linha);
}

.vitrine-paginacao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  flex-wrap: wrap;
}

/* ------------------------------------------------------------- respiro maior */

@media (min-width: 720px) {
  .vitrine-codigo__grade {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
  }

  .vitrine-quiz .cartao__titulo {
    -webkit-line-clamp: 2;
  }
}

@media (min-width: 960px) {
  .vitrine-hero {
    padding-block: var(--e16) var(--e10);
  }

  .vitrine-hero__grade {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: var(--e10);
  }

  .vitrine-preview {
    padding: var(--e6);
  }
}

/* ---------------------------------------------------------------- 320 px */

@media (max-width: 400px) {
  .vitrine {
    gap: var(--e10);
  }

  .vitrine-hero {
    padding-block: var(--e8) var(--e4);
  }

  .vitrine-preview__stats {
    grid-template-columns: minmax(0, 1fr);
  }

  .vitrine-grafico {
    height: 72px;
  }

  .vitrine-host {
    gap: var(--e4);
  }

  .vitrine-host form,
  .vitrine-host .btn {
    width: 100%;
  }
}

/* O botão de mudo é o caminho para o silêncio; movimento reduzido não desliga
   o som, mas desliga a flutuação do Lenilson. */
@media (prefers-reduced-motion: reduce) {
  .vitrine-codigo__lenilson img {
    animation: none;
  }
}