/*
  Cap 7 · Quem sou (Figma 123:2 › "CAP 7 · Quem constrói" 130:2), 1440 × 960.
  Medidas do Figma:
    respiro de 120px no topo e na base;
    retrato 540 × 720, raio 40, borda 1px linha (por dentro);
    120px entre o retrato e o texto; texto em 480px, centralizado na vertical,
      com 24px de gap;
    título Geist Medium 60 (102%, −2,5%); bios Geist 18/155% em texto-apoio,
      460px;
    botão: 226 × 48, raio 999, cta/fundo, texto Geist Medium 15 em cta/texto,
      22px à esquerda; seta num círculo de 38 × 48 com traço de 1,8.
*/
/* A partir de 1024px (faixas B e C), esta seção tem regras em assets/css/encaixe.css */

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

.quem-sou-grade {
  display: grid;
  /* Duas colunas iguais: em 1440 dá 540 + 120 + 540, com o texto limitado a
     480px (sobram 60px à direita dele, como no Figma) */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  /* 120px do Figma em 1440 (8,334vw), menor em telas mais estreitas */
  column-gap: clamp(48px, 8.334vw, 120px);
}

/* ------------------------------------------------------------------
   Retrato
   ------------------------------------------------------------------ */
.quem-sou-retrato {
  position: relative;
  overflow: hidden;
  border-radius: var(--raio-40);
  aspect-ratio: 540 / 720;
  background-color: var(--superficie-sutil);
}

.quem-sou-retrato img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Borda de 1px por dentro, por cima da foto */
.quem-sou-retrato::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--linha);
  border-radius: inherit;
  pointer-events: none;
}

/* ------------------------------------------------------------------
   Texto
   ------------------------------------------------------------------ */
.quem-sou-texto {
  max-width: 480px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

/* Tamanho do Figma a partir de 1440px; abaixo, proporcional (mínimo provisório) */
.quem-sou-titulo {
  color: var(--texto);
  font-size: clamp(2.25rem, 4.167vw, var(--titulo-quem-sou));
  font-weight: var(--peso-medio);
  line-height: var(--titulo-quem-sou-altura);
  letter-spacing: var(--titulo-quem-sou-letra);
  text-wrap: balance;
}

.quem-sou-bio {
  max-width: 460px;
  color: var(--texto-apoio);
  font-size: var(--apoio-bio);
  line-height: var(--apoio-bio-altura);
}

.quem-sou-cta {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding-left: 22px;
  border-radius: var(--raio-999);
  background-color: var(--cta-fundo);
  color: var(--cta-texto);
  font-size: var(--navegacao);
  font-weight: var(--peso-medio);
  line-height: normal;
  text-decoration: none;
  white-space: nowrap;
}

.quem-sou-cta-seta {
  display: grid;
  place-items: center;
  width: 38px;
  height: 48px;
}

/* ------------------------------------------------------------------
   Abaixo de 1024px: retrato primeiro, largura total e proporção mantida;
   texto depois. Espaçamento provisório até o mobile do Figma.
   ------------------------------------------------------------------ */
@media (max-width: 1023.98px) {
  .quem-sou-grade {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 48px;
  }
}

@media (max-width: 767.98px) {
  .quem-sou-grade {
    row-gap: 40px;
  }
}