/*
  Cap 2 · A busca (Figma 123:2 › "CAP 2 · A busca" 123:36), 1440 × 1020 no desktop.
  Medidas do Figma:
    respiro de 120px no topo e na base;
    título 740px (Geist Medium 56, 106%, −2%); apoio 319px alinhado à direita
      (Geist 19, 150%, texto-apoio), base alinhada à do título;
    142px entre o título e o corpo;
    bloco 740 × 520, raio 36, borda 1px linha, mármore + véu veu/bloco;
    celular 316 × 651, centralizado no bloco, 61px acima e 70px abaixo dele;
    passos 440 × 160 com 20px de gap, raio 32, padding 24/28, gap 20;
      número 52 × 52 (JetBrains Mono 14, destaque, fundo superficie/sutil);
      título Geist Medium 24 (−1%); texto Geist 15/145% em 280px;
      passos 1 e 2: fundo superficie/vidro, borda 1px linha;
      passo 3 invertido: fundo cta/fundo, número em cta/tinta, texto cta/texto
      (descrição a 72%).
*/
/* A partir de 1024px (faixas B e C), esta seção tem regras em assets/css/encaixe.css */

.secao-busca {
  padding-block: var(--secao-respiro);
  background-color: var(--fundo);
}

/* ------------------------------------------------------------------
   Título e apoio
   ------------------------------------------------------------------ */
.busca-cabecalho {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
}

/* Tamanho do Figma a partir de 1440px; abaixo, proporcional (mínimo provisório) */
.busca-titulo {
  /* Caixa de 740px no Figma. No navegador a 2ª linha mede 750px e quebraria
     em 3 linhas; 760px mantém as 2 linhas do Figma. */
  max-width: 760px;
  color: var(--texto);
  font-size: clamp(2rem, 3.89vw, var(--titulo-secao));
  font-weight: var(--peso-medio);
  line-height: var(--titulo-secao-altura);
  letter-spacing: var(--titulo-secao-letra);
  text-wrap: balance;
}

.busca-apoio {
  max-width: 319px;
  color: var(--texto-apoio);
  font-size: var(--apoio-grande);
  line-height: var(--apoio-grande-altura);
  text-align: right;
}

/* ------------------------------------------------------------------
   Corpo: bloco com o celular + passos
   ------------------------------------------------------------------ */
.busca-corpo {
  display: grid;
  grid-template-columns: minmax(0, 740fr) minmax(0, 440fr);
  gap: 20px;
  margin-top: 142px;
}

.busca-palco {
  position: relative;
  min-height: 520px;
}

.busca-bloco {
  position: absolute;
  inset: 0;
  border: 1px solid var(--linha);
  border-radius: var(--raio-36);
  background-color: var(--fundo);
  background-image:
    linear-gradient(var(--veu-bloco), var(--veu-bloco)),
    url("../../imagens/borda-marmore-escuro-1x.webp");
  background-image:
    linear-gradient(var(--veu-bloco), var(--veu-bloco)),
    image-set(url("../../imagens/borda-marmore-escuro-1x.webp") 1x, url("../../imagens/borda-marmore-escuro-2x.webp") 2x);
  background-position: center;
  background-size: cover;
}

[data-tema="claro"] .busca-bloco {
  background-image:
    linear-gradient(var(--veu-bloco), var(--veu-bloco)),
    url("../../imagens/borda-marmore-claro-1x.webp");
  background-image:
    linear-gradient(var(--veu-bloco), var(--veu-bloco)),
    image-set(url("../../imagens/borda-marmore-claro-1x.webp") 1x, url("../../imagens/borda-marmore-claro-2x.webp") 2x);
}

/* Celular: centro 4,5px abaixo do centro do bloco, passando por cima e por baixo */
.busca-celular {
  position: absolute;
  top: calc(50% + 4.5px);
  left: 50%;
  width: 316px;
  height: auto;
  transform: translate(-50%, -50%);
}

/* ------------------------------------------------------------------
   Passos
   ------------------------------------------------------------------ */
.busca-passos {
  display: grid;
  gap: 20px;
  padding: 0;
  list-style: none;
}

.busca-passo {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 160px;
  padding: 24px 28px;
  border-radius: var(--raio-32);
  background-color: var(--superficie-vidro);
  /* Borda de 1px por dentro, como no Figma */
  box-shadow: inset 0 0 0 1px var(--linha);
}

.busca-passo-numero {
  display: grid;
  flex: none;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: var(--raio-999);
  background-color: var(--superficie-sutil);
  color: var(--destaque);
  font-family: var(--fonte-mono);
  font-size: var(--rotulo-numero-passo);
  line-height: normal;
}

.busca-passo-texto {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 280px;
}

.busca-passo-titulo {
  color: var(--texto);
  font-size: var(--titulo-etapa);
  font-weight: var(--peso-medio);
  letter-spacing: var(--titulo-etapa-letra);
  line-height: normal;
}

.busca-passo-descricao {
  color: var(--texto-apoio);
  font-size: var(--apoio-etapa);
  line-height: var(--apoio-etapa-altura);
}

/* Passo 3 invertido */
.busca-passo-invertido {
  background-color: var(--cta-fundo);
  box-shadow: none;
}

.busca-passo-invertido .busca-passo-numero {
  background-color: var(--cta-tinta);
  color: var(--cta-texto);
}

.busca-passo-invertido .busca-passo-titulo {
  color: var(--cta-texto);
}

.busca-passo-invertido .busca-passo-descricao {
  color: color-mix(in srgb, var(--cta-texto) 72%, transparent);
}

/* ------------------------------------------------------------------
   Abaixo de 1024px: título e apoio empilhados; bloco antes dos passos,
   os dois com largura total. Espaçamentos provisórios.
   ------------------------------------------------------------------ */
@media (max-width: 1023.98px) {
  .busca-cabecalho {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .busca-apoio {
    max-width: 36rem;
    text-align: left;
  }

  .busca-corpo {
    grid-template-columns: minmax(0, 1fr);
    /* O celular passa 61px acima e 70px abaixo do bloco */
    row-gap: calc(70px + 20px);
    margin-top: calc(48px + 61px);
  }
}

/* ------------------------------------------------------------------
   Abaixo de 768px: o bloco acompanha a altura da imagem, sem corte, com
   respiro interno para o mármore aparecer em volta do celular (celular com
   70% da largura do bloco, centralizado). O sizes do <img> usa a mesma conta.
   ------------------------------------------------------------------ */
@media (max-width: 767.98px) {
  .busca-corpo {
    row-gap: 20px;
    margin-top: 40px;
  }

  .busca-palco {
    min-height: 0;
    padding: 32px 15%;
  }

  .busca-celular {
    position: relative;
    top: auto;
    left: auto;
    display: block;
    width: 100%;
    transform: none;
  }

  .busca-passo {
    min-height: 0;
    padding: 20px;
    gap: 16px;
  }
}

/* ------------------------------------------------------------------
   Celular por tema, como os mármores (Figma 121:42 escuro, 121:43 claro).
   O do tema inativo fica com display: none e, lazy, não é baixado. No fim
   do arquivo para valer sobre o display: block de abaixo de 768px.
   ------------------------------------------------------------------ */
.busca-celular-claro,
[data-tema="claro"] .busca-celular-escuro {
  display: none;
}

[data-tema="claro"] .busca-celular-claro {
  display: block;
}