/* ==========================================================================
   NEXUS theme-final / assets/css/sections/confianca.css
   Territorio exclusivo da secao #confianca (as 7 respostas de due diligence).

   So consome tokens de 01-tokens.css e primitivos/transversais existentes
   (.section, .section__head, .eyebrow, .lead ja vem de 02-base.css). Nenhum
   hex, nenhum px de raio, nenhuma familia de fonte literal.

   Motion: nada anima aqui alem do que o motor global de [data-reveal] ja
   cobre (transform + opacity). Nenhuma transicao de layout.

   REDESENHO (defeito reportado pelo dono com captura da secao, agosto de
   2026): a versao anterior media o filete vertical entre colunas por uma
   container query aplicada so a nth-child(par) — o efeito pratico era um
   filete de LADO em metade dos itens e nenhum nos outros, somado ao filete
   de TOPO da propria grade, que so encosta visualmente nos itens da
   primeira linha. Resultado: sete respostas com quatro combinacoes
   diferentes de borda, sem nenhuma delas ser "a" borda da secao. O setimo
   item (numero impar de respostas) ainda tinha um layout de FECHO proprio,
   que trocava numero+pergunta-sobre-resposta por tres trilhas lado a lado
   (numero, pergunta, resposta) so nesse item — a "faixa esquisita com o
   texto jogado a direita" do relato.

   Escolha: UMA borda para os sete, sempre a mesma regra, sem excecao de
   posicao. Cada item carrega border-block-end (nunca inline, nunca so na
   primeira linha) — e só isso. A grade NÃO carrega borda própria: uma
   primeira versao deste redesenho pos border-block-start na propria
   .confianca__grid para "fechar a mesa por cima", e essa linha nascia
   solta, sem encostar em nada (o espaco entre .section__head e a grade
   nao e o mesmo espaco que separa os itens entre si) — o dono reportou
   de novo, "linha acima disso ta bugando", com captura mostrando o
   filete flutuando entre o lead e o item 01/02. Removida: a tabela
   comeca direto no item 01, sem filete acima, e o filete depois do
   item 07 continua existindo (e nao e orfao: encosta direto no proprio
   item 07, a mesma relacao que qualquer filete tem com o item que vem
   antes dele — e o unico fechamento que sobra, no fim, nao no comeco).
   Com align-items: stretch (explicito abaixo) cada item ocupa a altura
   da propria LINHA da grade, entao o filete de baixo de um item curto e
   o de um item longo pousam na mesma cota — linhas retas de ponta a
   ponta, o mesmo acerto que ja foi feito em #contratacao e #govtech (ver
   os comentarios identicos em sections/contratacao.css e
   sections/govtech.css). O setimo item deixa de ter regra propria: sobra
   sozinho na ultima linha, com a MESMA grade interna dos outros seis —
   uma celula vaga ao lado dele e normal em qualquer grade com contagem
   impar, nao pede tratamento especial.

   Grade sempre repeat(auto-fit, minmax(min(100%, 420px), 1fr)): dentro do
   container de 1240px o resultado pratico e duas colunas do notebook 14"
   ao 4K (a largura do container trava, quem cresce acima de 1900px e a
   tipografia, nao a grade) e uma coluna em mobile e tablet retrato, sem
   nunca fixar contagem de colunas. Sem filete vertical entre as colunas:
   o espaco entre elas (column-gap generoso) já basta para ler duas
   colunas, e tirar a linha tira também a única fonte de tratamento
   desigual entre itens.

   [data-skin="surface"] mede a propria matriz de celulas sobre estas
   mesmas classes (.confianca__grid, .confianca__item, .confianca__item:
   last-child, .confianca__num/q/a) com border proprio (as quatro faces,
   de proposito — caixa fechada, nao filete solto) e maior especificidade;
   o redesenho abaixo so usa border-block-end no item, exatamente a
   propriedade que a pele ja sabe vencer via border-block-end/border-
   inline-start proprios; nenhuma pele precisou mudar por causa desta
   folha (12-secoes.css ganhou uma guarda de surface à parte para as
   variantes de lay, nao para o desenho padrao aqui).
   ========================================================================== */

/* Cabeçalho em coluna única (agosto/2026, pedido do dono: "lead abaixo do
   título, em todos"). Mesmo caso de #capacidades e #modelos: a pele surface
   reabre .section__head em duas faixas a partir de 900px para as seções
   que não pediram exceção ainda (08-skin-surface.css §4.3); #confianca
   entra na mesma lista de #cases/#tese/#metodo/#govtech, por especificidade
   de ID, sem tocar a folha da pele. */
#confianca > .container > .section__head {
  grid-template-columns: minmax(0, 1fr);
}

#confianca > .container > .section__head > .lead {
  grid-column: 1;
  max-width: var(--measure);
}

.confianca__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  column-gap: var(--space-10);
  row-gap: 0;
  /* stretch é o valor de fábrica do CSS Grid; explícito de propósito, pelo
     mesmo motivo do comentário em .contratacao__grid e .govtech-panels: sem
     ele cada item só cresce até a altura do próprio conteúdo e o filete de
     baixo de item curto e item longo, na mesma linha, para em cotas
     diferentes. */
  align-items: stretch;
}

.confianca__item {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--space-5);
  row-gap: var(--space-2);
  align-content: start;
  padding-block: var(--space-8);
  /* Única borda da secao, na mesma propriedade para os sete itens, sem
     excecao para o primeiro (que ja fecha visualmente com o border-block-
     start da grade acima) nem para o ultimo (fecha a mesa por baixo,
     simetrico ao topo). */
  border-block-end: var(--hairline) solid hsl(var(--border));
}

.confianca__num {
  grid-row: 1 / span 2;
  padding-block-start: 0.2em;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  color: hsl(var(--primary));
  font-variant-numeric: tabular-nums;
}

.confianca__q {
  grid-column: 2;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: var(--lh-tight);
  color: hsl(var(--foreground));
}

.confianca__a {
  grid-column: 2;
  max-width: var(--measure);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: hsl(var(--muted-foreground));
}

/* Mobile pequeno: respiro reduzido para o filete não parecer alto demais
   diante de pouca largura disponível. */
@media (max-width: 480px) {
  .confianca__item {
    column-gap: var(--space-4);
    padding-block: var(--space-6);
  }
}

/* --------------------------------------------------------------------------
   Item 07 em faixa cheia, pedido do dono (15ª rodada): o último item ímpar
   ficava sozinho na coluna esquerda, quebrando a simetria da mesa. Quando a
   grade está em duas colunas (o :has garante que só dispara com irmão ao
   lado, nunca no empilhado do mobile), o item final ímpar atravessa as duas
   colunas e o conteúdo corre "direto": número, pergunta e resposta na mesma
   linha, com a resposta usando a largura restante.
   -------------------------------------------------------------------------- */
@media (min-width: 900px) {
  .confianca__grid > .confianca__item:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    grid-template-columns: auto minmax(0, 22ch) minmax(0, 1fr);
    align-items: baseline;
    column-gap: var(--space-8);
  }

  .confianca__grid > .confianca__item:last-child:nth-child(odd) > .confianca__num {
    grid-row: auto;
  }

  .confianca__grid > .confianca__item:last-child:nth-child(odd) > .confianca__q,
  .confianca__grid > .confianca__item:last-child:nth-child(odd) > .confianca__a {
    grid-column: auto;
  }

  .confianca__grid > .confianca__item:last-child:nth-child(odd) > .confianca__a {
    max-width: none;
  }
}