/* ==================================================================
   05 · EXPERIENCIA  (widget fp-experiencia)

   Copiado do lab (lab/home/secoes/experiencia/experiencia.css). A partir
   daqui, este arquivo e o que vale. Diferencas em relacao ao lab, todas
   controles do widget, com o valor do lab como padrao: proporcao das
   colunas (--corpo-e, --corpo-d), coluna presa ou nao (data-presa),
   logos por linha (--logos-cols) e a largura do numero mais largo, em em
   (--fig-em, medida por experiencia.js; nunca abaixo de 2.35, a de "350+").

   Papel. Titulo na largura inteira; abaixo, uma divisao assimetrica: H3 e
   texto numa coluna estreita, presa na tela, enquanto os quatro numeros
   passam empilhados na coluna larga (quatro no documento). Os numeros nao vao em linha (as
   etapas de Como trabalhamos acabaram de ir) nem ganham regua (os fios sao
   da Base). Cada numero e seguido do rotulo em contorno, na mesma linha de
   base. Depois, os logos dos clientes em cinza, com a cor propria no hover.
   ================================================================== */

.experiencia{
  position:relative;
  background:var(--paper);
  color:var(--fg);
  padding-block:clamp(6rem,15vh,11rem) clamp(5rem,13vh,9rem);
}

.experiencia__h2{
  max-width:15em;
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(2.5rem,5vw,5.5rem);
  line-height:.94;
  letter-spacing:-.04em;
  color:var(--navy);
  text-wrap:balance;
}

.experiencia__corpo{
  display:grid;
  grid-template-columns:minmax(0,var(--corpo-e,5fr)) minmax(0,var(--corpo-d,7fr));
  column-gap:clamp(3rem,6vw,8rem);
  margin-top:clamp(3.5rem,10vh,7rem);
}

/* Presa enquanto os numeros passam, abaixo da altura da barra. */
.experiencia__lado{
  align-self:start;
  position:sticky;
  top:calc(var(--topo) + clamp(1rem,4vh,3rem));
  padding-top:clamp(.5rem,2vh,1.5rem);
}
.experiencia__h3{
  max-width:17em;
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(1.5rem,2.3vw,2.5rem);
  line-height:1.1;
  letter-spacing:-.022em;
  color:var(--navy);
  text-wrap:balance;
}
.experiencia__texto{
  margin-top:clamp(1.25rem,3vh,2rem);
  max-width:40ch;
  font-size:var(--t-lead);
  line-height:1.55;
  color:var(--ink-2);
  text-wrap:pretty;
}

/* ---- numeros ------------------------------------------------------ */

.numeros{
  container-type:inline-size;
  display:grid;
  row-gap:clamp(2rem,6.5vh,4.5rem);
}
/* Numero e rotulo na mesma linha de base. Com o rotulo na borda da
   coluna, longe do numero, ele se soltava (visto a 1440). O corpo do
   numero fica no li: fenda, sinal e rotulo medem a partir dele. */
.numero{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  /* Vao curto: o "+" sobrescrito ja abre espaco antes do rotulo. */
  column-gap:clamp(.375rem,.6vw,.75rem);
  font-size:min(100cqw / 4, 22.4vh, 12rem);
}
.numero__fenda,.numero__fig{display:block}
.numero__fig{
  font-family:var(--font-display);
  font-weight:900;
  line-height:.8;
  letter-spacing:-.05em;
  color:var(--navy);
  font-variant-numeric:lining-nums;
}
/* O tracking negativo tambem vale depois do ultimo algarismo e encolhe a
   caixa: sem o sinal para cobrir, "países" encostava no 4 (visto a 1280). */
.numero__fig:not(:has(.numero__sinal)){margin-right:.05em}
/* A fenda: o recorte de baixo fica na linha de base (entrelinha .8 poe a
   base da caixa a .03em dela); dos outros lados, folga. So com movimento. */
.experiencia.anima .numero__fenda{clip-path:inset(-.4em -.3em 0 -.3em)}
/* O sinal em metade do corpo, com o topo na altura dos algarismos: no
   mesmo corpo e peso do numero, o "+" vermelho virava um bloco mais pesado
   que o proprio numero (medido a 1440). */
.numero__sinal{
  margin-left:.03em;
  font-size:.5em;
  font-weight:600;
  letter-spacing:0;
  vertical-align:.78em;
  color:var(--red);
}
/* Rotulo em contorno, com o miolo na cor do papel (cobre as linhas
   internas da Outfit, como no marquee). Em corpo pequeno o contorno pede
   letra mais leve e mais aberta: com peso 700, tracking zero e traco de
   1px, as letras encostavam e os miolos fechavam (visto a 1440 e 390). */
.numero__rotulo{
  --traco:.75px;
  font-family:var(--font-display);
  font-weight:600;
  font-size:max(1.25rem,.18em);
  line-height:1.1;
  letter-spacing:.03em;
  -webkit-text-fill-color:var(--paper);
  -webkit-text-stroke:calc(2 * var(--traco)) var(--navy);
  paint-order:stroke fill;
}

/* ---- clientes ----------------------------------------------------- */

.clientes{margin-top:clamp(6rem,17vh,12rem)}
.clientes__h3{
  font-family:var(--font-display);
  font-weight:800;
  font-size:var(--t-md);
  line-height:1.15;
  letter-spacing:-.02em;
  color:var(--navy);
  /* A 390, sem equilibrar, "trabalho" ficava sozinho na segunda linha. */
  text-wrap:balance;
}
.clientes__lista{
  --cols:var(--logos-cols,6);
  --vao:clamp(1rem,2.2vw,2.5rem);
  container-type:inline-size;
  display:grid;
  grid-template-columns:repeat(var(--cols),minmax(0,1fr));
  gap:clamp(.5rem,1.6vh,1.25rem) var(--vao);
  margin-top:clamp(2rem,5vh,3.5rem);
}
.cliente{
  display:grid;
  place-items:center;
  aspect-ratio:3/2;
}
/* Cinza parado e cor propria no hover, como na v2. Os valores de cada logo
   vem de lab/gerar-logos.mjs: --largura iguala o peso visual; --brilho
   escurece as marcas claras e --opacidade clareia as escuras, para as
   dezessete terem o mesmo tom de cinza (com cinza e opacidade iguais para
   todas, Jobs e Everyway quase sumiam ao lado de Suzano e AAA20). */
.cliente img{
  width:calc(var(--largura) * (100cqw - (var(--cols) - 1) * var(--vao)) / var(--cols));
  height:auto;
  filter:grayscale(1) brightness(var(--brilho,1));
  opacity:var(--opacidade,.55);
  transition:filter .4s var(--ease-out),opacity .4s var(--ease-out);
}
@media (hover:hover){
  .cliente:hover img{filter:grayscale(0) brightness(1);opacity:1}
}

/* Tela baixa demais para a coluna presa fazer sentido, ou coluna presa
   desligada no widget. */
@media (min-width:1100px) and (max-height:639.98px){
  .experiencia__lado{position:static}
}
.experiencia[data-presa="nao"] .experiencia__lado{position:static}

/* ------------------------------------------------------------------
   Abaixo de 1100px: tudo empilhado, nada preso; numeros em 2x2 com o
   rotulo embaixo (ao lado nao cabe: a 390 cada coluna tem uns 170px e
   "350+" sozinho ja ocupa perto de 140); logos em tres colunas.
   ------------------------------------------------------------------ */

@media (max-width:1099.98px){
  .experiencia{padding-block:clamp(4.5rem,14vw,7rem) clamp(3.5rem,12vw,6rem)}
  .experiencia__h2{font-size:clamp(2.25rem,9.5vw,4rem)}
  .experiencia__corpo{
    grid-template-columns:minmax(0,1fr);
    row-gap:clamp(3rem,12vw,5rem);
    margin-top:clamp(2.5rem,10vw,4rem);
  }
  .experiencia__lado{position:static;padding-top:0}
  .experiencia__h3{font-size:clamp(1.375rem,6vw,2rem)}
  .numeros{
    --vao-num:clamp(1rem,4vw,2rem);
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:var(--vao-num);
    row-gap:clamp(2rem,8vw,3rem);
  }
  /* "350+" mede cerca de 2.35em; um numero mais largo vem medido em
     --fig-em. */
  .numero{display:block;font-size:min((100cqw - var(--vao-num)) / 2 / var(--fig-em,2.35), 8rem)}
  .numero__rotulo{
    --traco:.6px;
    display:block;
    margin-top:.6rem;
    font-size:clamp(1.125rem,5vw,1.5rem);
    text-wrap:balance;
  }
  .clientes{margin-top:clamp(4.5rem,16vw,7rem)}
  .clientes__lista{--cols:3}
}