/*
 * Vitrine de creators — Casa do Futuro
 *
 * As medidas vieram do levantamento da página 59, e não de aproximação:
 * proporção 4/5, raio de 18px (12px no celular), título de 30px (26px no
 * celular) na fileira de destaque, cor secundária em --cdf-cinza-medio, e as
 * duas grades de 3 e 5 colunas.
 *
 * Na 1.0.2 a tipografia foi conferida contra o arquivo real —
 * `global-59-frontend-desktop.css` e o `-mobile` — e quatro valores estavam
 * fora: o espaço entre as fileiras, o tamanho do nome nos cards secundários, a
 * entrelinha do nome e a cor da linha de nicho/cidade. Cada um deles está
 * comentado onde foi corrigido, com a regra de origem.
 *
 * A conferência anterior tinha medido só a grade — colunas e largura de card.
 * Ela estava certa no que mediu, e não mediu a tipografia.
 *
 * As colunas são as mesmas do original — 3 no destaque, 5 na fileira de baixo, e
 * os mesmos pontos de quebra. Crescer é ganhar linhas, não mudar a largura dos
 * cards.
 *
 * Houve uma tentativa de usar `auto-fill` para "crescer sozinho". Medida a 1425
 * px, ela produziu **seis** colunas em vez de cinco, e cards mais estreitos que
 * os do V4. Ficou a grade fixa: com cinco cards ela é idêntica ao original, e
 * com mais ela repete a linha.
 *
 * A única diferença proposital: a fileira de destaque mostra de 1 a 3 cards, sem
 * completar com figurante.
 *
 * Tudo prefixado. Nada aqui alcança o resto do site.
 */

/*
 * O espaço entre a fileira de destaque e a de baixo é 40px, não 20px.
 *
 * No V4 as duas grades são filhas diretas de `gs-in`, que tem `gap: 40px`
 * (28px no celular). Aqui elas moram dentro de `.cdf-vitrine`, então é este
 * elemento que precisa carregar a mesma distância. Os 20px que estavam aqui
 * eram o gap **interno** das grades, que é outra medida e continua 20px.
 */
.cdf-vitrine {
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 100%;

  /* Os tokens do kit quando existirem; valores equivalentes quando não. */
  --cdf-vitrine-texto: var(--cdf-branco, #ffffff);
  --cdf-vitrine-secundario: var(--cdf-cinza-medio, #7a7a7a);
  --cdf-vitrine-superficie: var(--cdf-superficie, #1c1c1c);
  --cdf-vitrine-titulo: var(--cdf-font-titulo, 'Space Grotesk'), system-ui, sans-serif;
  --cdf-vitrine-corpo: var(--cdf-font-corpo, 'Inter'), system-ui, sans-serif;
}

/* ------------------------------------------------------------ as duas grades */

.cdf-vitrine-destaques {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 20px;
  row-gap: 20px;
  width: 100%;
}

.cdf-vitrine-grade {
  display: grid;
  /* Cinco colunas, como o original. Mais creators viram mais linhas. */
  grid-template-columns: repeat(5, 1fr);
  column-gap: 20px;
  row-gap: 20px;
  width: 100%;
}

/* ------------------------------------------------------------------- o card */

.cdf-vitrine-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  margin: 0;
}

/*
 * O prefixo `.cdf-vitrine` nos seletores abaixo chegou na 1.0.4, e é a
 * correção inteira daquela versão. Ele não muda nenhum valor.
 *
 * O kit global do Elementor (`post-6.css`) carrega, para a página toda:
 *   .elementor-kit-6 h2  { font-family:"Montserrat"; font-size:2.5rem; ... }
 *   .elementor-kit-6 img { border-radius:8px 8px 8px 8px; }
 * que é especificidade 0,1,1 — mais que uma classe sozinha (0,1,0). Até a
 * 1.0.3 este arquivo escrevia `.cdf-vitrine-nome` e `.cdf-vitrine-foto`, e
 * perdia: os nomes saíam em Montserrat, os da fileira de baixo em 40px, e as
 * fotos com 8px de raio. Medido em harness, não suposto.
 *
 * O Elementor não sofre disso porque prefixa todos os seus seletores com
 * `.elementor` — `.elementor .cdf-nome` é 0,2,0. O prefixo daqui é o próprio
 * container da vitrine: mesma especificidade, e sem depender do Elementor
 * existir, o que mantém o shortcode funcionando em página clássica.
 *
 * Só recebem o prefixo os seletores que o kit alcança (`h2`, `img`) e os que
 * ficam ao lado deles no mesmo card. As grades e o card continuam sem prefixo:
 * o kit não estiliza `div` nem `article`, e mexer neles mudaria o layout, que
 * nesta versão não muda.
 */

.cdf-vitrine .cdf-vitrine-foto {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 18px;
  background: var(--cdf-vitrine-superficie);
}

/*
 * Estes números vieram de `.cdf-nome` em global-59-frontend-desktop.css:
 *   font-family: var(--cdf-font-titulo); font-weight: 700; font-size: 19px;
 *   color: var(--cdf-branco); line-height: 1.2; margin: 0;
 * e, no mobile, font-size: 16px.
 *
 * O 19px é o tamanho dos cards da fileira de baixo. Antes ele estava ausente
 * aqui, e o `h` herdava o tamanho do tema — que não é 19px. Os cards de
 * destaque sobrescrevem para 30px logo abaixo, como o V4 faz.
 */
.cdf-vitrine .cdf-vitrine-nome {
  margin: 4px 0 0;
  font-family: var(--cdf-vitrine-titulo);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.2;
  color: var(--cdf-vitrine-texto);
  overflow-wrap: anywhere;
}

/* A fileira de destaque tem o título maior, como no desenho original. */
.cdf-vitrine .cdf-vitrine-card--destaque .cdf-vitrine-nome {
  font-size: 30px;
}

/*
 * De `.cdf-meta` no mesmo arquivo:
 *   font-family: var(--cdf-font-corpo); font-size: 14px;
 *   color: var(--cdf-cinza-medio); line-height: 1.5; margin: 0;
 * e, no mobile, font-size: 12px.
 *
 * A cor era o erro maior: esta linha estava saindo em branco, e no V4 ela é
 * cinza-médio. Num card escuro, isso muda a hierarquia inteira — o nicho
 * competia com o nome em vez de acompanhá-lo.
 */
.cdf-vitrine .cdf-vitrine-meta {
  margin: 0;
  font-family: var(--cdf-vitrine-corpo);
  font-size: 14px;
  line-height: 1.5;
  color: var(--cdf-vitrine-secundario);
  overflow-wrap: anywhere;
}

.cdf-vitrine .cdf-vitrine-redes {
  margin: 0;
  font-family: var(--cdf-vitrine-corpo);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--cdf-vitrine-secundario);
}

/* ---------------------------------------------- o ponto de montagem vazio */

/*
 * Um container vazio dentro de `gs-in` custa caro: o padrão do Elementor para
 * `e-flexbox` é `padding: 10px`, o que já dá 20px de altura, e o `gap: 40px`
 * do pai conta o item mesmo vazio — cerca de 60px de respiro que ninguém pediu.
 *
 * `display: none` tira o elemento do fluxo flex: ele deixa de ser um item, não
 * ocupa altura e não consome gap.
 *
 * Isto não esconde conteúdo. `:empty` só alcança um elemento que não tem nada
 * dentro — no instante em que a vitrine entra, a regra deixa de valer sozinha.
 *
 * É defesa secundária. A primeira é o próprio slot nascer com a visibilidade
 * desligada no Elementor, que não depende desta folha chegar ao navegador.
 */
.cdf-vitrine-slot:empty {
  display: none;
}

/* --------------------------------------------------------------- sem ninguém */

.cdf-vitrine.cdf-vitrine-vazia p {
  margin: 0;
  font-family: var(--cdf-vitrine-corpo);
  color: var(--cdf-vitrine-secundario);
}

/* ------------------------------------------------------------------- tablet */

@media (max-width: 1024px) {
  .cdf-vitrine-grade {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ------------------------------------------------------------------ celular */

@media (max-width: 767px) {
  .cdf-vitrine {
    gap: 28px;
  }

  /* Uma coluna no destaque, duas na fileira de baixo — como no original. */
  .cdf-vitrine-destaques {
    grid-template-columns: 1fr;
    row-gap: 28px;
  }

  .cdf-vitrine-grade {
    grid-template-columns: repeat(2, 1fr);
  }

  .cdf-vitrine .cdf-vitrine-foto {
    border-radius: 12px;
  }

  /* `.cdf-nome` no mobile: 16px. O destaque desce de 30 para 26. */
  .cdf-vitrine .cdf-vitrine-nome {
    font-size: 16px;
  }

  .cdf-vitrine .cdf-vitrine-card--destaque .cdf-vitrine-nome {
    font-size: 26px;
  }

  /* `.cdf-meta` no mobile: 12px. */
  .cdf-vitrine .cdf-vitrine-meta {
    font-size: 12px;
  }
}