/* ==========================================================================
   NÚMERO GIGANTE — prefixo ngig-
   Uma cifra em corpo de dobra, com rótulo embaixo e, ao lado, a frase de
   contexto e a linha de fonte e data. Sem JavaScript, sem @keyframes: a
   entrada é o [data-rv] do core e não há mais movimento nenhum na peça.

   Tokens usados:
     --display          a face da cifra e dos afixos
     --fg --fg-2        tinta da cifra / dos afixos, da prosa e da linha de fonte
     --accent           na variação .ngig--accent
     --rule             o filete acima da linha de fonte
     --sec-gap          o respiro da dobra, via .sec-pad do core

   Primitivas do core (usadas, NÃO recopiadas):
     .wrap  .sec-pad  .sec-paper  .eyebrow  .sec-lead  .display-xl

   A CONTA QUE É O COMPONENTE, e a medição que a sustenta. Nesta face, com
   algarismos tabulares e o tracking de -.02em da primitiva, cada dígito ocupa
   0,60em e a vírgula 0,28em — medido: "0000" dá 240px em corpo 100px, "2,3"
   dá 148,36px, e "1111" e "8888" dão exatamente o mesmo. Logo a largura da
   cifra é glifos x 0,60em. Dividir o CORPO pela contagem de glifos faz os
   dois fatores se cancelarem: a largura da figura fica praticamente
   constante, seja o valor "19", "2,3" ou "1.240".

   A contagem que o markup declara em --ngig-glifos:
       cada dígito ................ 1
       vírgula ou ponto ........... 0,5
       cada afixo (o bloco todo) .. 0,5
   Os dois últimos pesos foram calibrados contra a medição, não estimados: a
   contagem declarada e a contagem real (tinta / corpo / 0,60) ficam a menos
   de 5% uma da outra em todos os casos de 1 a 4 dígitos com afixos de até 3
   caracteres. Resultado medido: a figura ocupa entre 66% e 90% da coluna, em
   oito formatos de número por seis larguras de tela (320 a 1920), sem
   estourar em nenhuma.

   O QUE QUEBRA SE ALGUÉM "CONSERTAR":
   - tirar `font-variant-numeric:tabular-nums` do .ngig-valor. Aqui ele não
     está segurando contagem nenhuma (não há contagem): é o que torna a conta
     acima EXATA. Sem ele, "1111" mede 0,42em por dígito e "8888" mede 0,59em
     — 42% de diferença —, e o mesmo --ngig-glifos passa a produzir figuras de
     larguras muito diferentes conforme os algarismos sorteados.
   - pôr uma palavra de unidade no afixo ("anos", "famílias"). Um afixo de 8
     caracteres vale ~1,8 glifo e não 0,5, e a figura salta para 98% da coluna
     — medido. Palavra de unidade é trabalho do .ngig-rotulo.
   - trocar o --display-xl-lh de .8 por um valor >=1. Entrelinha frouxa em
     corpo de 280px abre um vão morto entre a cifra e o rótulo que nenhuma
     margem negativa conserta sem virar número mágico.
   ========================================================================== */

.ngig{
  /* ---- os três parafusos ------------------------------------------------
     --ngig-glifos  a contagem de glifos da figura, pela regra do cabeçalho.
                    Declarado no MARKUP, na própria seção, porque é o único
                    número que muda junto com o conteúdo. Mínimo prático 2:
                    um número de um dígito declarado como 1 leva o corpo a
                    993px em 1440, o que não é mais tipografia, é acidente.
     --ngig-passo   quanto da tela a figura toma, calibrado para TRÊS glifos.
                    É o único valor a mexer para a cifra ficar maior ou menor.
     --ngig-afixo   corpo dos afixos, como fração do corpo da cifra. */
  --ngig-glifos:3;
  --ngig-passo:23vw;
  --ngig-afixo:.24;

  /* O piso e o teto são divididos pela mesma contagem que o valor ideal, e
     isso é de propósito: um clamp com piso fixo passaria a estourar a coluna
     justamente no caso que a conta existe para cobrir — número comprido em
     tela estreita, onde o piso venceria. */
  --ngig-corpo:calc(clamp(48px,var(--ngig-passo),332px) * 3 / var(--ngig-glifos));

  /* Alimenta os dois parafusos da primitiva .display-xl do core. Ficam AQUI,
     no ancestral, e não no .ngig-valor: a primitiva os lê como fallback
     dentro do var(), e declarados no mesmo elemento eles venceriam o valor
     que o componente quisesse pôr por fora. Mesma forma do --frase-corpo do
     conteudo/manifesto-com-imagens.

     A entrelinha é .8 — mais fechada que o .95 padrão da primitiva — e o
     motivo é que aqui a linha é só de algarismos: não há descendente de "q"
     nem ascendente de "l" para colidir, e o padrão .95 sobraria como vão
     morto abaixo da cifra. É o mesmo raciocínio que fez o .82 antigo da
     primitiva funcionar em caixa alta. */
  --display-xl:var(--ngig-corpo);
  --display-xl-lh:.8;
}

/* ---------------------------------------------------------------- a coluna */
/* A cifra fica na coluna larga; o contexto e a fonte, numa estreita ao lado,
   alinhados pelo PÉ. Alinhar pelo pé e não pelo topo é o que faz a prosa
   parecer legenda da cifra em vez de uma segunda coluna de texto.
   Nada aqui toca padding-inline, max-width ou margin lateral: a coluna
   continua sendo só a .wrap (contrato §4). */
.ngig-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(220px,28%);
  gap:clamp(30px,4vw,64px);
  align-items:end;
}

/* ---------------------------------------------------------------- a figura */
/* Flex com alinhamento por linha de base: os afixos são corpo reduzido e
   têm de sentar na mesma base da cifra, senão a figura deixa de ler como
   uma linha de tipografia e passa a ler como três peças empilhadas.

   `line-height:1` aqui é para os AFIXOS (a cifra tem a sua, da primitiva):
   sem isto eles herdariam o 1.6 do corpo do texto e inflariam a linha do
   flex, empurrando o rótulo para baixo.

   `flex-wrap` fica no padrão (nowrap) e o `white-space:nowrap` cobre o caso
   de alguém escrever um valor com espaço dentro. Se o número for comprido
   demais para a contagem declarada, o transbordo é para SER VISTO e
   corrigido — igual ao que a régua faz na célula dela. */
.ngig-figura{
  display:flex;
  align-items:baseline;
  gap:.07em;
  font-size:var(--ngig-corpo);
  line-height:1;
  white-space:nowrap;
  margin-top:clamp(10px,1.6vh,22px);
}

/* O desenho da cifra é a primitiva .display-xl do core. Sobra aqui só o que
   é desta peça. */
.ngig-valor{
  /* Ver o cabeçalho: é o que torna exata a conta de --ngig-glifos. */
  font-variant-numeric:tabular-nums;
}

/* Afixo: moeda na frente, multiplicador atrás — de 1 a 3 caracteres. Em
   --fg-2 e não em --fg de propósito: no mesmo tom da cifra ele disputa com
   ela, e o que tem de dominar a dobra é o algarismo. */
.ngig-afixo{
  font-family:var(--display);
  font-weight:700;
  font-size:calc(var(--ngig-afixo) * 1em);
  letter-spacing:-.01em;
  color:var(--fg-2);
}
/* Um respiro a mais na frente: "R$" encostado no primeiro algarismo lê como
   um glifo só, e o vão do `gap` sozinho não resolve porque ele é calculado no
   corpo da CIFRA, não no do afixo. O de trás é multiplicador ("bi", "mi",
   "%") e já se separa sozinho — a classe dele existe para a skill de layout
   saber onde escrever cada metade (ver o bloco editorial do componente.json). */
.ngig-afixo-antes{margin-right:.08em}

/* ---------------------------------------------------------------- rótulo */
/* O que o número mede. Segue em --sans (a cifra já é a display) e em corpo
   médio: é a legenda da cifra, não um título de seção — se ele precisar de
   corpo de título, o número não estava carregando o argumento sozinho e a
   peça é a errada.

   O tracking do corpo do texto (--ls-body, .05em) é calibrado para 17px; em
   30px ele abre a linha demais. Daqui em diante é tipografia desta peça. */
.ngig-rotulo{
  font-size:clamp(18px,2.1vw,30px);
  line-height:1.32;
  letter-spacing:.01em;
  color:var(--fg);
  max-width:24ch;
  /* O VÃO É PROPORCIONAL AO CORPO DA CIFRA, e não à janela, e a razão é a
     vírgula. Com `--display-xl-lh:.8` a caixa da cifra fecha nos algarismos,
     que não têm descendente — mas a vírgula tem, e a tinta dela passa 0,109em
     ABAIXO da caixa (medido: 35,4px num corpo de 283,9). Um vão em px ou vh
     acerta uma largura de tela e erra as outras: medido antes desta correção,
     o rabo da vírgula sobrepunha os ascendentes do rótulo em 4,8px em 1440 e
     1px em 1920, e sobrava folga só em 390. Em em da cifra, a folga é a mesma
     em toda tela. O piso de 16px existe para tela muito estreita, onde a
     cifra é pequena e o vão proporcional ficaria apertado para o olho. */
  margin-top:max(16px,calc(var(--ngig-corpo) * .14));
}

/* ---------------------------------------------------------------- o lado */
/* A frase de contexto veste a primitiva .sec-lead do core (corpo, entrelinha,
   tinta de apoio e teto de 60ch) — aqui a coluna é mais estreita que 60ch, e
   o teto não tem efeito. O que sobra é a ressalva: ela vive nesta frase, ao
   lado do número, e não num rodapé de página.

   O margin-top de 18px que a primitiva traz FICA: com a coluna alinhada pelo
   pé ele é invisível no desktop, e no mobile empilhado é justamente o respiro
   que separa o rótulo do contexto. */
.ngig-lado{align-self:end}

/* A linha de fonte e data. Slot EXIGIDO — ver o cabeçalho do markup.
   Em --fg-2 e não em --fg-muted, e a escolha é de compliance e não de gosto:
   a fonte do dado é o que transforma alegação em fato, e um cinza de rodapé
   diz o contrário do que a linha existe para dizer.

   O filete mora aqui, e não num invólucro, para que apagar a linha apague o
   fechamento da coluna junto: a composição fica visivelmente inacabada, que
   é a única defesa que CSS consegue dar a um slot obrigatório. */
.ngig-fonte{
  margin-top:clamp(16px,2.2vh,26px);
  padding-top:13px;
  border-top:1px solid var(--rule);
  font-size:12.5px;
  line-height:1.55;
  letter-spacing:.04em;
  color:var(--fg-2);
}

/* ---------------------------------------------------------------- variações */
/* Cifra na cor de marca. Use quando a dobra inteira é sobre o número; em
   página que já gasta accent em título e botão, deixe em --fg.

   Lê --accent-ink e NÃO --accent, seguindo o `h2.sec-title em` do core: o
   accent puro é cor de botão e de filete, não de texto sobre claro — com o
   sage da Liberta sobre o creme do .sec-paper ele dá 1,36:1 (MANUAL §3), e
   o padrão desta peça É o .sec-paper. Numa cifra de 280px isso não seria um
   realce discreto, seria a dobra inteira ilegível. O fallback mantém a
   variação de pé para quem colar o bloco fora de um escopo de tom. */
.ngig--accent .ngig-valor{color:var(--accent-ink,var(--accent))}

/* Composição centrada: uma coluna só, tudo no meio. Vira pôster — e aí o
   número tem de ser curto (2 ou 3 glifos), senão a figura toma a linha
   inteira e o rótulo perde o apoio da margem esquerda. */
.ngig--centro .ngig-grid{grid-template-columns:1fr;justify-items:center;text-align:center}
.ngig--centro .ngig-figura{justify-content:center}
.ngig--centro .ngig-rotulo{max-width:32ch}

/* Afixo da frente à meia-altura da cifra, em vez de na linha de base. É a
   convenção de cifra financeira; ficou fora do padrão porque, com o afixo de
   trás sendo palavra ("bi"), os dois em alturas diferentes desalinham a
   leitura da linha. Vale quando os dois afixos são símbolo. */
.ngig--afixo-alto .ngig-afixo-antes{align-self:center}

/* ---------------------------------------------------------------- mobile */
/* Empilha, e a cifra CRESCE em relação à tela: com uma coluna só ela tem a
   largura inteira para ocupar, e o --ngig-passo de desktop a deixaria pequena
   no meio de tanto espaço. É a mesma peça, recalibrada — e o recálculo é uma
   linha porque a conta do corpo está toda em --ngig-passo. */
@media(max-width:900px){
  .ngig{--ngig-passo:40vw}
  .ngig-grid{grid-template-columns:1fr;gap:clamp(24px,4vh,38px)}
  .ngig-rotulo{max-width:30ch}
}