/* cms-fx.css — as regras ESTÁTICAS do renderizador genérico do CMS.
 *
 * ⚠️ O que é valor do desenho (cor, respiro, tamanho de fonte) vai no `style`
 * inline de cada nó, porque varia por seção. O que precisa de media query mora
 * aqui, servido UMA vez para todas as páginas — regra por página multiplicaria
 * a mesma folha por N e é o tipo de coisa que só aparece na conta de banda.
 *
 * ⚠️ TUDO escopado em `.cms-fx`. As 24 páginas legadas do site são blobs de
 * HTML escritos à mão com CSS global; qualquer regra solta aqui vazaria para
 * elas. É a mesma disciplina do `.wtm-lp` e do `.cms-imported`.
 *
 * ⚠️ O ponto de quebra é o que o Figma NÃO declara. O arquivo tem uma largura
 * só (1920) e não diz o que acontece em 390px. As regras abaixo são a resposta
 * derivada: fileira vira pilha, e a partir daí o `clamp()` de cada nó (ver
 * `fluido()` em lib/cms/figma-layout.ts) cuida da escala. Se o designer criar
 * uma variante mobile no arquivo, ela substitui esta inferência.
 */

.cms-fx {
  /* Respiro lateral mínimo. O desenho sangra a faixa e centraliza o conteúdo;
     no celular, texto colado na borda não se lê. */
  --fx-pad: 20px;
  --fx-max: 1280px;
  display: block;
  width: 100%;
  overflow-x: clip; /* NUNCA `hidden`: cria contexto de rolagem e mata `sticky` */
}

@media (min-width: 768px) {
  .cms-fx {
    --fx-pad: 40px;
  }
}

/* O limitador de largura. Sem ele a faixa estica num monitor ultrawide e o
   desenho, feito para 1920, perde a proporção. */
.cms-fx .fx-limite {
  width: 100%;
  max-width: var(--fx-max);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: inherit;
}

.cms-fx .fx-caixa {
  display: flex;
  flex-direction: column;
  min-width: 0; /* item de flex não encolhe abaixo do conteúdo sem isto */
}

.cms-fx .fx-linha {
  flex-direction: row;
  flex-wrap: wrap;
}

.cms-fx .fx-coluna {
  flex-direction: column;
}

/* `preencher` = o nó tinha layoutGrow/STRETCH no Auto Layout. */
.cms-fx .fx-preenche {
  flex: 1 1 0;
  width: 100%;
}

/* ⚠️ A GRADE NÃO IMPÕE LARGURA IGUAL A TODO MUNDO.
 *
 * A primeira versão dava `flex: 1 1 240px` a todo filho de uma fileira que
 * quebra. Isso estica o que o desenho fez abraçar o conteúdo — dois botões
 * viravam duas barras de meia largura, e uma fileira de rótulos virava colunas
 * de largura igual, desalinhada do desenho.
 *
 * Quem cresce é quem o Auto Layout mandou crescer (`fx-preenche`). O piso de
 * largura só entra para permitir a quebra em telas estreitas. */
.cms-fx .fx-quebra > * {
  min-width: min(240px, 100%);
}

.cms-fx .fx-quebra > .fx-preenche {
  flex: 1 1 240px;
}

/* Botão abraça o conteúdo, como no desenho. */
.cms-fx .fx-botao {
  flex: 0 0 auto;
  width: auto;
}

@media (max-width: 720px) {
  .cms-fx .fx-botao {
    width: 100%;
  }
}

/* ⚠️ ABAIXO DE 720px, TODA FILEIRA VIRA PILHA.
 *
 * É a inferência mais consequente deste arquivo. Quatro colunas de 250px numa
 * tela de 390px dariam colunas de 80px, e o texto quebraria letra a letra. */
@media (max-width: 720px) {
  .cms-fx .fx-linha {
    flex-direction: column;
    align-items: stretch;
  }
  .cms-fx .fx-linha > * {
    width: 100%;
  }
}

.cms-fx .fx-texto {
  margin: 0;
  /* Quebra de palavra longa (URL, nome composto) em vez de estourar a caixa. */
  overflow-wrap: anywhere;
}

.cms-fx .fx-titulo {
  /* O desenho já traz peso e tamanho; o que falta é o respiro entre linhas
     quando o texto real é mais longo que o preenchimento do arquivo. */
  line-height: 1.1;
  text-wrap: balance;
}

.cms-fx .fx-subtitulo {
  line-height: 1.45;
}

.cms-fx .fx-corpo {
  line-height: 1.6;
}

.cms-fx .fx-rotulo {
  line-height: 1.3;
}

/* Realce de trecho no título, como no desenho. A cor sai do token do site para
   que uma faixa nova continue parecendo a marca. */
.cms-fx .hl {
  color: var(--wtm-accent, #7c5cff);
}

.cms-fx .fx-midia {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.cms-fx .fx-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.cms-fx .fx-icone svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Link dentro do conteúdo herda a cor do texto e sublinha, para nunca sumir
   contra um fundo que o desenho escolheu. */
.cms-fx a {
  color: inherit;
  text-underline-offset: 3px;
}

/* ⚠️ SEM ANIMAÇÃO DE ENTRADA, e isto é deliberado.
 *
 * A primeira versão tinha `opacity:0` nos filhos até a seção ganhar uma classe
 * `is-in` — que NADA no site define. Resultado: as nove faixas renderizavam
 * corretas no HTML e invisíveis na tela. E a seção ainda levava a classe
 * `reveal`, que o `lp.css` legado também zera (`.wtm-lp .reveal{opacity:0}`)
 * até o observador do `shared.js` acrescentar `.in`.
 *
 * Duas fontes de invisibilidade para um recurso que ainda estava sendo
 * validado. Conteúdo visível vale mais do que entrada animada; a animação entra
 * depois, ligada ao mecanismo que o site JÁ tem funcionando.
 */