/* ==========================================================================
   MGX — ilustrações próprias (images/ilustra/*.svg)

   Substituem as capturas de tela da comunidade da marca de origem. Cada painel
   é um desenho vetorial nosso: nada de nome, foto, faturamento ou logo de
   terceiro. Os números dentro da arte são ilustrativos por construção.

   Esta folha cuida só do ENQUADRAMENTO: proporção, grade, legenda e o
   comportamento com "menos movimento" (prefers-reduced-motion, a preferência
   do sistema operacional de reduzir animação). A arte em si vive no SVG.

   Ordem de carga: depois de css/mgx-identidade.css.
   ========================================================================== */

:root {
  /* raio (arredondamento do canto) e tom dos painéis */
  --mgx-il-raio: 14px;
  --mgx-il-vao: clamp(0.9rem, 0.6rem + 1.4vw, 1.75rem);
  --mgx-il-texto: #fff;
  --mgx-il-apoio: #D4D4D8;
  --mgx-il-secundario: #8A8A94;
}

/* --------------------------------------------------------------------------
   1. O painel
   -------------------------------------------------------------------------- */

.mgx-ilustra {
  margin: 0;
  display: grid;
  gap: 0.75rem;
  /* nunca deixa o painel abaixo de 280px, mas também nunca força a página a
     rolar de lado: o `min(100%, …)` desarma o estouro em telas de 320px */
  min-inline-size: min(100%, 17.5rem);
}

.mgx-ilustra__arte {
  display: block;
  inline-size: 100%;
  block-size: auto;
  /* proporção fixa = a página não pula quando o SVG termina de carregar */
  aspect-ratio: 4 / 3;
  border-radius: var(--mgx-il-raio);
  /* o preto entra antes da arte: sem clarão branco no carregamento */
  background: #000;
}

/* A arte já desenha a própria superfície. A moldura é OPCIONAL e só entra
   onde o painel precisa se separar de um fundo que não é preto puro. */
.mgx-ilustra--moldura .mgx-ilustra__arte {
  border: 1px solid rgba(255, 255, 255, 0.09);
}

/* --------------------------------------------------------------------------
   2. Legenda
   -------------------------------------------------------------------------- */

.mgx-ilustra__legenda {
  display: grid;
  gap: 0.25rem;
  /* largura de LEITURA, independente da largura de composição da grade */
  max-inline-size: 46ch;
}

.mgx-ilustra__titulo {
  font-family: 'Montserrat', 'Outfit', sans-serif;
  font-weight:800;
  font-size: 1.125rem;
  line-height:1.1;
  letter-spacing: -0.01em;
  color: var(--mgx-il-texto);
  text-wrap: balance;
}

.mgx-ilustra__apoio {
  font-family: 'Outfit', sans-serif;
  font-size: 1rem;
  line-height:1.6;
  color: var(--mgx-il-apoio);
}

/* linha miúda de honestidade ("números ilustrativos") */
.mgx-ilustra__aviso {
  font-family: 'Outfit', sans-serif;
  font-size: 0.875rem;
  line-height:1.35;
  color: var(--mgx-il-secundario);
}

/* --------------------------------------------------------------------------
   3. Grade de painéis

   No celular fica UMA coluna, e isso não é a "pilha morta" que a doutrina
   proíbe: cada painel carrega mais de 160 caracteres de texto dentro da arte.
   Em duas colunas a 360px cada painel ficaria com ~160px de largura e o texto
   do SVG cairia para ~6px na tela — ilegível. A regra de legibilidade vence a
   de composição aqui, e é decisão declarada, não omissão.
   -------------------------------------------------------------------------- */

.mgx-ilustra-grade {
  display: grid;
  gap: var(--mgx-il-vao);
  grid-template-columns: minmax(0, 1fr);
}

/* tablet e desktop: duas colunas (8 painéis = 4 linhas cheias, sem órfã) */
@media (min-width: 37.5rem) {
  .mgx-ilustra-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Quatro colunas só a partir de 1280px, e como opção declarada: a 1280px cada
   painel fica com ~280px, que é o piso de legibilidade destes SVGs. */
@media (min-width: 80rem) {
  .mgx-ilustra-grade--quatro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* painel que ocupa a linha inteira da grade */
.mgx-ilustra--largo { grid-column: 1 / -1; }

/* --------------------------------------------------------------------------
   4. Movimento

   Discreto e só onde acrescenta: `achar-o-produto` cresce as barras de demanda,
   `acompanhar-resultado` sobe as barras do gráfico e `tres-primeiras-linhas`
   pisca o cursor. Tudo isso é `animation` CSS DENTRO do próprio SVG — cada
   arquivo carrega o seu `prefers-reduced-motion`, porque um SVG embutido por
   tag img não enxerga esta folha.
   -------------------------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {
  .mgx-ilustra__arte { transition: transform 220ms cubic-bezier(.22, 1, .36, 1); }
  .mgx-ilustra:hover .mgx-ilustra__arte { transform: translateY(-2px); }
}

@media (prefers-reduced-motion: reduce) {
  .mgx-ilustra__arte { transition: none; }
  .mgx-ilustra:hover .mgx-ilustra__arte { transform: none; }
  /* alcança o caso do SVG colado inline no HTML */
  .mgx-ilustra svg * { animation: none !important; }
}

/* --------------------------------------------------------------------------
   Painel solto dentro de um cartão do construtor de página

   Nos cartões de persona, a ilustração entra sem a moldura `<figure>`: ela
   substitui três blocos de 270×94 que sustentavam a coluna do cartão. Guardar
   a mesma caixa é o que impede o cartão de se refazer e o texto de subir por
   cima da arte — medido em 23/09/2026, quando os três blocos saíram sem
   substituto e a composição quebrou.
   -------------------------------------------------------------------------- */
.mgx-ilustra--solta {
  display: block;
  inline-size: 100%;
  max-inline-size: 270px;
  block-size: auto;
  aspect-ratio: 270 / 94;
  border-radius: 0.75rem;
  object-fit: contain;
}