/* ==========================================================================
   GRADE DE SERVIÇOS COM ÍCONE — prefixo gsv-
   Quatro células de peso igual: filete no alto, segmento de marca, ícone em
   caixa, título de uma a três palavras e uma frase. Sem foto, sem hover, sem
   estado, sem JavaScript.

   Tokens usados:
     --accent           o segmento de 2px no alto de cada célula
     --display          face do título do item
     --fg               tinta do título e — via currentColor — do TRAÇO DO ÍCONE
     --fg-2             tinta da frase
     --rule             filete no alto da célula
     --rule-2           contorno da caixa do ícone
     --radius-media     canto da caixa do ícone
     --sec-gap          respiro da dobra, via .sec-pad do core

   A REGRA QUE ORGANIZA O ARQUIVO: o que alinha as células é RESERVA DE
   ESPAÇO, não redação. --gsv-title-min guarda duas linhas de título, e é só
   por isso que uma célula com título de uma palavra e outra com título que
   quebra põem a frase no mesmo y. Precedente da casa para o mesmo problema:
   a faixa de altura fixa do .ent-brand em conteudo/grid-entidades.

   E A RESERVA É O VÃO, o que é a única razão de ela não custar nada. A frase
   não tem margem própria: com título de uma linha, a segunda linha reservada
   aparece como o respiro entre título e frase (24px em 1440, medido) — vão de
   verdade, derivado da entrelinha do próprio título em vez de um número
   inventado. Com título que quebra em duas, o vão fecha e a frase encosta:
   feio de propósito, porque é o sinal visível de que o título passou de três
   palavras. Alinhamento não se perde em nenhum dos dois casos.
   Pôr `margin-top` na frase reabre a conta e devolve o ar morto.

   SUBGRID RESOLVERIA ISTO SEM RESERVA — e foi descartado. Ele exige faixas
   explícitas no contêiner (`repeat(N,auto)`), e `repeat()` não aceita var()
   na contagem: com seis itens em duas fileiras, cada fileira pediria a sua
   faixa e a peça deixaria de servir qualquer contagem. É a armadilha que
   conversao/planos-honorarios documenta, e lá ela se paga porque as doze
   linhas são fixas. Aqui não.

   NÃO HÁ @media(prefers-reduced-motion) AQUI, e a ausência é deliberada: todo
   o movimento da peça é o [data-rv] do core, que o próprio core desliga. Uma
   regra local não teria o que desligar.

   O ÍCONE NÃO TEM `color` PRÓPRIO, e é isso que o mantém tematizável: o traço
   é currentColor e herda a tinta da seção, então a mesma peça troca de tom ao
   trocar .sec-deep por .sec-paper sem tocar em nenhuma linha daqui. --accent
   aparece num lugar só, o segmento do filete — dois pontos de cor de marca
   por célula transformariam a fileira em decoração.
   ========================================================================== */

.gsv{
  /* Quantas colunas. É o único parafuso de LAYOUT, e existe para o caso de
     seis itens: 4 em quatro colunas, 6 em três (duas fileiras cheias). Quem
     muda não é style inline, é a classe .gsv-cols-3 logo abaixo — ver o
     comentário dela. */
  --gsv-cols:4;
  /* Calha entre as colunas. A fileira respira mais na vertical que na
     horizontal de propósito: em duas fileiras, o vão de baixo tem de ler
     como separação de FILEIRA, e não como mais uma coluna virada. */
  --gsv-gap:clamp(24px,2.8vw,44px);
  --gsv-row-gap:clamp(40px,4.4vw,64px);
  --gsv-icon:clamp(46px,3.6vw,54px);
  /* Duas linhas de título, em em para acompanhar o corpo da letra: 2 × a
     entrelinha 1.2 do .gsv-title. Medido a 1440 no tema liberta-wealth, os
     quatro títulos de exemplo (até 22 caracteres) cabem numa linha só na
     célula de 244px — a segunda linha existe para o título que quebra e,
     enquanto não quebra, é o vão até a frase. Ver o cabeçalho. */
  --gsv-title-min:2.4em;
  /* Largura do segmento de marca. Mesma família do traço de 22px que o
     .eyebrow do core desenha antes do rótulo: é a assinatura da casa, e
     repeti-la aqui é o que faz as quatro células lerem como um conjunto. */
  --gsv-tick:26px;
  --gsv-text-max:34ch;
}

.gsv-grid{
  display:grid;
  /* minmax(0,1fr) e não 1fr: com 1fr a coluna nasce com min-width:auto e uma
     palavra longa ("internacionalização") empurra a grade para fora da
     coluna do .wrap em vez de quebrar. */
  grid-template-columns:repeat(var(--gsv-cols),minmax(0,1fr));
  column-gap:var(--gsv-gap);
  row-gap:var(--gsv-row-gap);
  margin-top:clamp(40px,6vh,64px);
}

/* Seis itens em duas fileiras de três. Classe, e não style="--gsv-cols:3":
   valor inline vale mais que qualquer seletor de autor e venceria a media
   query do fim deste arquivo — a grade ficaria em três colunas em 390px. Com
   a classe, a media query carrega depois e ganha, que é o que se quer.

   A alternativa automática seria uma consulta de quantidade —
   `.gsv-grid:has(.gsv-item:first-child:nth-last-child(6))` — e ela dispensaria
   a classe. Não foi usada por duas razões: a casa não depende de :has() em
   regra nenhuma (as duas únicas menções, em conversao/planos-honorarios e
   prova/grade-logos-miolo, são comentários explicando por que se desviou
   dele), e onde :has() não existisse a grade cairia calada em 4 + 2. A classe
   também aparece no HTML, o que importa para o alvo do §1: um bloco colado no
   Elementor mostra a configuração a quem for editá-lo. */
.gsv-cols-3{--gsv-cols:3}

.gsv-item{
  position:relative;
  padding-top:clamp(22px,2vw,28px);
  /* Filete por CÉLULA, não no contêiner. Assim a fileira de baixo ganha o
     próprio filete de graça quando há seis itens, sem nenhum :nth-child
     amarrado à contagem de colunas. A calha entre colunas parte a linha em
     segmentos, e é esse corte que faz a grade ser vista. */
  border-top:1px solid var(--rule);
}

/* O segmento de marca, 2px sobre o filete de 1px. `top:-1px` para cobrir o
   filete em vez de encostar nele: um segmento de 2px pousado ABAIXO de uma
   régua de 1px lê como duas linhas empilhadas, e não como uma marca. */
.gsv-item::before{
  content:"";
  position:absolute;top:-1px;left:0;
  width:var(--gsv-tick);height:2px;
  background:var(--accent);
}

.gsv-icon{
  display:grid;place-items:center;
  width:var(--gsv-icon);height:var(--gsv-icon);
  border:1px solid var(--rule-2);
  border-radius:var(--radius-media);
}
/* `svg` como descendente da classe segue o precedente do `.btn svg` do core:
   preso ao prefixo, não vaza para a folha da página. 46% é a proporção que
   deixa o desenho de 24 com a mesma presença óptica em toda a faixa do
   clamp — um valor fixo de 24px encolhe visualmente numa caixa de 54. */
.gsv-icon svg{width:46%;height:46%;display:block}

.gsv-title{
  margin-top:clamp(18px,1.8vw,24px);
  min-height:var(--gsv-title-min);
  font-family:var(--display);font-weight:700;
  font-size:clamp(17px,1.35vw,20px);
  line-height:1.2;letter-spacing:-.018em;
  color:var(--fg);
}

/* Sem `margin-top`: o vão até a frase é a segunda linha reservada do título
   (ver o cabeçalho). Uma margem aqui somaria ao que já existe e devolveria o
   ar morto que a reserva foi desenhada para NÃO custar. */
.gsv-text{
  font-size:15px;line-height:1.6;
  color:var(--fg-2);
  max-width:var(--gsv-text-max);
}

/* ---- mobile ---- */

/* Duas colunas antes de uma. Em 1080px a célula de quatro colunas chega a
   217px, e ali um título de três palavras já procura a segunda linha —
   melhor cair para duas colunas largas do que apertar quatro. */
@media(max-width:1080px){
  .gsv{
    --gsv-cols:2;
    /* O teto de 34ch SAI aqui, e isto foi medido. Em quatro colunas ele nunca
       encosta (célula de 244px contra um teto de ~315px), então ele só age em
       duas — e agindo ali é ele que faz as contagens de linha divergirem:
       a 900px, COM o teto as quatro frases de exemplo dão 2/3/2/2 linhas, o
       que abre 24px de vão morto na primeira fileira; SEM ele, 2/2/2/2. A
       célula de duas colunas tem 326 a 463px, o que dá uma medida de 40 a 54
       caracteres por linha — dentro da faixa legível, sem precisar de teto. */
    --gsv-text-max:none;
  }
}
/* Uma coluna. A reserva do título FICA, mesmo sem ninguém com quem alinhar:
   ela é o vão até a frase, e zerá-la aqui colaria as duas. O teto da frase já
   saiu no bloco acima, que continua valendo aqui. */
@media(max-width:560px){
  .gsv{--gsv-cols:1}
}