/* ==========================================================================
   GRADE DE CASES COM FOTO — prefixo gcs-
   Quatro retratos em fileira; cada card é um <a> e cada legenda vive DENTRO
   da foto. CSS puro: nenhuma linha de JavaScript, nenhum observer próprio
   (o script.js da pasta só serve à variação "ver mais", no fim do arquivo).

   Tokens usados:
     --display --sans     tipografia do título e da categoria
     --ease               curva única do projeto
     --accent             categoria e o filete que acende no hover
     --light              texto sobre a foto (ilha escura, ver abaixo)
     --dark-rgb           degradê do véu da legenda
     --radius-media       canto do card
     --rule               borda de repouso do card
     --bg                 fundo do card enquanto a foto não pinta

   O CARD É UMA ILHA ESCURA, e essa frase decide DUAS cores. Dentro dele o
   fundo é sempre foto sob véu escuro, mesmo que a seção seja clara — então:

     - o título lê --light, e nunca --fg. Mesma decisão do
       midia/galeria-scroll-horizontal.
     - a categoria lê --accent PURO, e nunca --accent-ink. O --accent-ink é
       novo no core e existe porque em escopo claro o accent puro não fecha
       contraste como TEXTO (medido: o sage da Liberta sobre o creme dá
       1.36:1). Aqui não vale, porque a categoria não está sobre o creme: está
       sobre o scrim escuro dentro da foto. Medido nesta peça, o accent puro
       dá de 5.1:1 a 10.4:1 sobre a região real; o --accent-ink na .sec-paper
       cairia para cerca de 3.5:1, porque a mistura escurece a tinta contra um
       fundo que já é escuro. QUEM FIZER UMA VARREDURA trocando --accent por
       --accent-ink em texto vai piorar este componente sem que nada acuse.

   As duas escolhas são a mesma escolha, e é o que faz o arquivo servir aos
   quatro escopos de tom sem uma variação de código.

   O QUE NÃO ESTÁ AQUI, de propósito:
     - anel de foco. O card é o próprio <a>, então o :focus-visible do core
       desenha o anel em volta da caixa do CARD, que é a área do clique. Um
       `outline` local seria pior que o de graça, e um `outline:none` mataria
       o único sinal de onde o teclado está (ver MANUAL §6).
     - .glass. São quatro cards de foto cheia: o vidro não tem o que
       translucidar e ainda pressupõe fundo escuro.
     - .sec-head. A primitiva do core é cabeçalho CENTRADO; aqui olho, título
       e apoio são alinhados à esquerda, na coluna, como numa dobra de texto.
   ========================================================================== */

.gcs{
  /* Vão entre as células. Estreito de propósito: o que se lê é a FILEIRA, e
     vão largo transforma quatro cards em quatro peças soltas. */
  --gcs-gap:clamp(12px,1.4vw,18px);
  /* Proporção da célula, e é UMA para todas — trocar aqui troca as quatro
     juntas, que é justamente a razão de o número morar no ancestral e não no
     card. 3:4 é o retrato da casa e a proporção exata dos placeholders
     900x1200: no preview o object-fit não corta nada, e o que se vê é o que
     o consumidor vai entregar. */
  --gcs-ratio:3/4;
  /* --dur do core é .9s: certo para entrada de dobra, arrastado para a foto
     responder ao ponteiro. Duração de interação é local. */
  --gcs-dur:.55s;
  /* Quanto o véu desfocado sobe ACIMA da legenda, em fração da altura DELA.
     Não é fração do card, e a diferença é o que impede uma falha: a legenda é
     ancorada embaixo e cresce para dentro da foto, então um véu medido em % do
     card é ultrapassado por um título de três linhas em tela estreita — medido
     em 320px, legenda de 122px contra véu de 93px, e a primeira linha do título
     caía sobre a parte nítida da foto. Medido em fração da legenda, o véu
     acompanha o texto que ele existe para servir e não pode ficar atrás. */
  --gcs-veil-fade:85%;
}

.gcs-grid{
  display:grid;
  /* minmax(0,1fr) e não 1fr: o mínimo automático de uma célula de grade é o
     CONTEÚDO dela, e com 1fr um título longo empurraria a coluna e
     desigualaria a fileira — que é exatamente o defeito que esta peça existe
     para não ter. */
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--gcs-gap);
  margin-top:clamp(40px,6vh,68px);
}

.gcs-item{min-width:0}

/* ---------------------------------------------------------------- o card */
/* É o <a>. Não é um <article> com link esticado por ::after: sendo o próprio
   link a caixa do card, o clique, o foco e o anel de foco falam da mesma
   área, sem pseudo-elemento nenhum no meio. */
.gcs-card{
  display:block;
  position:relative;
  overflow:hidden;
  /* Contexto de empilhamento próprio, para o desfoque do véu não vazar para
     as células vizinhas. Herdado do conteudo/pilares-texto-na-foto. */
  isolation:isolate;
  aspect-ratio:var(--gcs-ratio);
  border-radius:var(--radius-media);
  /* Enquanto a foto não pinta, o card é uma caixa da cor da seção e não um
     retângulo branco. */
  background:var(--bg);
  border:1px solid var(--rule);
  color:inherit;
  text-decoration:none;
}

/* A borda NÃO muda no hover, e isso é escolha: o hover já acende a foto e o
   filete de marca embaixo. Uma terceira coisa piscando ao mesmo tempo lê
   como falha de renderização, não como resposta. */

/* ---------------------------------------------------------------- a foto */
.gcs-img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  /* O enquadramento é do CARD, não do arquivo: quem publica ajusta por
     --gcs-pos no style em vez de recortar a foto de novo. */
  object-position:var(--gcs-pos,50% 50%);
  /* Dessaturação parcial, nunca total: em repouso a fileira fica coesa e o
     card sob o ponteiro ganha cor sem virar outra imagem. */
  filter:grayscale(.42);
  transition:filter var(--gcs-dur) var(--ease);
}

/* :focus-visible junto do :hover — quem chega pelo teclado vê o mesmo card
   acender que quem chega pelo mouse. */
/* HOVER NÃO MEXE NA IMAGEM (CLAUDE.md §6, regra de 2026-09-29). O zoom de
   foto sob o ponteiro saiu: escala e deslocamento de mídia no hover mexem
   em recorte e composição, e é o que quebra a página quando o componente
   é colado noutro lugar. O retorno ficou em cor e brilho, que não mudam
   a geometria de nada. */
.gcs-card:hover .gcs-img,
.gcs-card:focus-visible .gcs-img{filter:grayscale(0)}

/* ---------------------------------------------------------- véu da legenda */
/* Duas camadas, e uma não substitui a outra (contrato §6, e a receita é a do
   conteudo/pilares-texto-na-foto):
     scrim  degradê que garante contraste em qualquer foto;
     veil   desfoque que separa o texto do DETALHE da foto.
   Só o degradê deixa o texto sobre textura; só o desfoque deixa claro demais
   em foto clara. */
/* O degradê chega a zero em 92% da altura, e não em 72% como na primeira
   versão. A diferença só aparece em tela estreita: com título de três linhas
   em 320px a legenda ocupa 72% do card, e ali o scrim antigo já era zero — a
   primeira linha ficava por conta do desfoque, que sozinho não garante
   contraste em foto clara (MANUAL §6). O custo é um véu quase imperceptível
   no alto de toda foto: .04 em 85% da altura. */
.gcs-scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,
    rgba(var(--dark-rgb),.94) 0%,
    rgba(var(--dark-rgb),.74) 22%,
    rgba(var(--dark-rgb),.34) 48%,
    rgba(var(--dark-rgb),.14) 68%,
    transparent 92%);
}

/* ------------------------------------------------------------- a legenda */
.gcs-cap{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:18px;
}

/* O véu desfocado. É um ::before DA LEGENDA, e não um elemento irmão com
   altura própria, por duas razões:

   1. ele mede a legenda. `top` negativo em porcentagem resolve contra a
      altura do .gcs-cap, então o véu é sempre 1.85x o texto que ele serve —
      cresce com um título de três linhas e encolhe com um de uma;
   2. sendo pseudo-elemento IRMÃO do texto na ordem de pintura, e não
      ancestral dele, a máscara não toca o título. Máscara aplica-se aos
      descendentes: o texto dentro do elemento mascarado apareceria esmaecido
      no topo, e esse é o erro que a separação evita.

   backdrop-filter SEMPRE com máscara em degradê (contrato §6). Caixa reta
   produz borda dura contra a parte nítida da foto e lê "chapado" — é a
   diferença entre um véu e uma tarja. Se alguém apagar a máscara para
   "simplificar", é isso que volta.

   z-index:-1 dentro do .gcs-cap, que já é contexto de empilhamento próprio
   (position + z-index:2): o véu fica atrás do texto e ainda assim acima do
   scrim e da foto. */
.gcs-cap::before{
  content:"";
  position:absolute;
  top:calc(-1 * var(--gcs-veil-fade));
  left:0;right:0;bottom:0;
  z-index:-1;pointer-events:none;
  backdrop-filter:blur(8px) saturate(1.12);
  -webkit-backdrop-filter:blur(8px) saturate(1.12);
  -webkit-mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.9) 46%,transparent 100%);
  mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.9) 46%,transparent 100%);
}

.gcs-cat{
  display:block;
  font-family:var(--sans);font-weight:400;
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  /* --accent PURO, não --accent-ink: ver o cabeçalho deste arquivo. A tinta
     de realce do escopo existe para texto sobre o FUNDO DA SEÇÃO; esta linha
     está sobre o scrim escuro dentro da foto. */
  color:var(--accent);
}

/* Categoria como LINHA, e não como a .pill do core: a célula desktop mede
   ~260px e sobram ~216px de texto útil. "Consolidação" numa pílula de 11px
   com tracking de .16em mais 24px de padding encosta na borda, e pílula que
   quebra em duas linhas lê como defeito. A .pill continua certa em card
   largo — é o que o midia/galeria-scroll-horizontal faz, com card de 460px. */

.gcs-title{
  font-family:var(--display);font-weight:700;
  font-size:17px;line-height:1.16;letter-spacing:-.02em;
  color:var(--light);
  margin-top:7px;
}

/* O text-wrap:balance que o core dá a todo h1..h4 FICA. Numa caixa estreita
   ele iguala as linhas do título, e quatro legendas de linhas iguais é o que
   faz a fileira parecer composta em vez de justificada à sorte. Aqui o
   text-wrap:pretty do prova/manchetes-imprensa seria o contrário do que se
   quer: lá o alvo é o bloco cheio de jornal, aqui é a mancha simétrica. */

/* ------------------------------------------------- o filete que acende */
/* Afordância de link, no lugar do distintivo redondo do
   midia/galeria-scroll-horizontal: disco de 38px come um oitavo da largura de
   uma célula de 260px, e o filete não come nada. Mora num ::after do CARD, e
   não num filho, porque é decoração e não conteúdo. */
.gcs-card::after{
  content:"";
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  height:2px;
  background:var(--accent);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .45s var(--ease);
  /* Sem isto o filete cobre os 2px de baixo do card e come o clique ali. */
  pointer-events:none;
}
.gcs-card:hover::after,
.gcs-card:focus-visible::after{transform:scaleX(1)}

/* Toque não tem hover, e sem esta regra o celular ficaria com quatro fotos
   dessaturadas para sempre e sem nenhum sinal de que os cards levam a algum
   lugar. Na ausência de ponteiro os dois estados de hover passam a ser o
   estado de repouso: foto em cor cheia e o filete de marca aceso. */
@media (hover:none){
  .gcs-img{filter:grayscale(0)}
  .gcs-card::after{transform:scaleX(1)}
}

/* Colado nas regras que animam (contrato §6.6). Sai o DESLOCAMENTO — o
   crescimento do filete, que agora aparece inteiro de uma vez. Fica a resposta: a cor volta à foto e o filete acende no card sob o
   ponteiro. Apagar as duas transformaria o card numa foto morta, e movimento
   reduzido desliga o que anda sozinho, não o que a pessoa pediu. */
@media (prefers-reduced-motion:reduce){
  .gcs-img,
  .gcs-card::after{transition:none}
}

/* ------------------------------------------------- variação: ver mais */
/* A grade com mais cards do que a primeira fileira mostra. O script
   esconde os data-gcs-extra e mostra este invólucro, que nasce [hidden].
   O botão é o .btn-ghost do core, sem retoque.

   O NÚMERO DE CARDS ESCONDIDOS SEGUE A REGRA DA GRADE: múltiplo de quatro
   (de dois no celular, que é múltiplo de quatro também). Três escondidos
   abririam uma fileira com uma célula vazia — o defeito que a peça existe
   para não ter. */
.gcs-acoes{
  display:flex;
  justify-content:center;
  margin-top:clamp(28px,4vh,44px);
}
.gcs-acoes[hidden]{display:none}          /* contrato §6.5 */

/* ---------------------------------------------------------------- mobile */
/* DUAS colunas, nunca uma, e é a decisão de desenho desta peça. A grade
   existe porque mostra o conjunto de uma vez; empilhar em coluna única a
   transformaria numa lista de ~1900px de rolagem — o defeito do trilho sem
   nenhuma das compensações dele. Medido em 390px: o 2x2 mede 951px de altura
   com a dobra inteira, e as quatro células continuam caindo numa tela.
   Não existe passo de TRÊS colunas: quatro itens em três colunas deixam uma
   célula vazia, que é o defeito que esta peça existe para não ter.

   O CORPO DO TÍTULO É CLAMP AQUI DENTRO, e fixo lá em cima, e a ordem
   importa. Medido: na faixa de quatro colunas a célula varia pouco (206px em
   981 de tela, 262px em 1240) e um número fixo acerta a faixa inteira. Na de
   duas colunas ela varia de 126 a 426px — mais de três vezes — e aí o corpo
   tem de acompanhar. O que NÃO funciona é um clamp por vw atravessando a
   troca de contagem de coluna: em 981px a célula tem 206px e o clamp
   devolveria o corpo maior; em 980px ela salta para 426px e o clamp
   devolveria o menor. O tamanho andaria ao contrário da caixa, e isso foi
   medido antes de virar isto. */
@media (max-width:980px){
  .gcs-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gcs-title{font-size:clamp(15.5px,2.9vw,22px)}
  .gcs-cap{padding:clamp(13px,2.4vw,24px)}
}