/*
  Cap 5 · Projetos (Figma 123:2 › "CAP 5 · Projetos" 131:2), 1440 × 1498.
  Medidas do Figma:
    título a 113px do topo (Geist Medium 56), 700px; 93px até o destaque;
    144px de respiro embaixo; 20px entre o destaque e a linha de baixo;
    destaque 1200 × 640, raio 40, borda 1px linha, mármore + véu (veu/bloco a 60%):
      janela 700 × 470 em (60, 86): superficie/janela, borda 1px linha, raio 20,
        sombra 0 30 60 #000 a 50%; pontos de 9 em superficie/sutil;
        endereço JetBrains Mono 11 (texto-apoio) numa pílula superficie/sutil;
        print a partir de 40px do topo, 700 × 422;
      celular 210 × 430 em (660, 170): raio 38, padding 8, tela com raio 31;
      card 270 em (870, 332): superficie/janela, raio 30, padding 24, gap 16,
        desfoque do fundo 30; endereço (JetBrains Mono 12) com bolinha destaque;
        nome Geist Medium 26 (−1%); descrição Geist 14; seta de 44 em
        cta/fundo + "Ver o site" (Geist Medium 15), gap 12;
    projetos 590 × 429, raio 40, fundo superficie/sutil, borda 1px linha:
      cabeçalho a 36px (nome 26, descrição 14, gap 6; seta de 44);
      janela 500 × 360 em (45, 160), cortada pela base do card (269px visíveis);
      print 484 × 312 em (8, 40), raio 14, fundo superficie/sutil-2.

  Link esticado: .projeto-link::after cobre o card inteiro. Nenhum ancestral
  entre o link e o card pode ter position, transform, filter,
  backdrop-filter ou container-type, senão a área clicável fica presa nele.
  Por isso o destaque é montado em CSS Grid (sem position nos filhos) e o
  desfoque do card de informação fica numa camada irmã (.projeto-info-vidro).
  A ordem de pintura vem de z-index nos itens da grade (janela 1, celular 2,
  vidro 3, card 4): em item de grade, z-index funciona sem position e não
  prende o link esticado.
*/
/* A partir de 1024px (faixas B e C), esta seção tem regras em assets/css/encaixe.css */

.secao-projetos {
  /* Figma: 113px no topo e 144px embaixo */
  padding-top: calc(var(--secao-respiro) - 7px);
  padding-bottom: calc(var(--secao-respiro) + 24px);
  background-color: var(--fundo);
}

.projetos-titulo {
  max-width: 700px;
  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);
}

.projetos-lista {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 93px;
  padding: 0;
  list-style: none;
}

.projeto-destaque {
  grid-column: 1 / -1;
}

/* ------------------------------------------------------------------
   Link esticado ao card inteiro
   ------------------------------------------------------------------ */
.projeto-nome {
  color: var(--texto);
  font-size: var(--titulo-card);
  font-weight: var(--peso-medio);
  letter-spacing: var(--titulo-card-letra);
  line-height: normal;
}

.projeto-link {
  color: inherit;
  text-decoration: none;
}

.projeto-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
}

/* O anel de foco aparece no card todo */
.projeto-link:focus-visible {
  outline: none;
  box-shadow: none;
}

.projeto-simples:has(.projeto-link:focus-visible),
.projeto-destaque-bloco:has(.projeto-link:focus-visible) {
  outline: 2px solid var(--destaque);
  outline-offset: 3px;
}

/* Navegador sem :has(): o anel volta para o próprio link */
@supports not selector(:has(a)) {
  .projeto-link:focus-visible {
    outline: 2px solid var(--destaque);
    outline-offset: 3px;
  }
}

/* Estado de hover provisório: o Figma não define hover */
.projeto-link:hover {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.projeto-descricao {
  color: var(--texto-apoio);
  font-size: var(--apoio-card);
  line-height: normal;
}

.projeto-seta {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--raio-999);
  background-color: var(--cta-fundo);
  color: var(--cta-texto);
}

/* ------------------------------------------------------------------
   Janela do navegador (destaque e projetos)
   ------------------------------------------------------------------ */
.projeto-janela {
  --endereco-x: 50%;
  position: relative;
  overflow: hidden;
  padding: 40px 8px 8px;
  border-radius: var(--raio-20);
  background-color: var(--superficie-janela);
  box-shadow: inset 0 0 0 1px var(--linha), 0 30px 60px rgb(0 0 0 / 0.5);
}

/* Posição do endereço na barra, como em cada janela do Figma */
.projeto-janela-portfolio { --endereco-x: 40.93%; }
.projeto-janela-voge { --endereco-x: 37.3%; }
.projeto-janela-spirito { --endereco-x: 35.3%; }

.projeto-janela-pontos {
  position: absolute;
  top: 16px;
  left: 18px;
  display: flex;
  gap: 6px;
}

.projeto-janela-pontos span {
  width: 9px;
  height: 9px;
  border-radius: var(--raio-999);
  background-color: var(--superficie-sutil);
}

.projeto-janela-endereco {
  position: absolute;
  top: 9px;
  left: var(--endereco-x);
  padding: 5px 14px;
  border-radius: var(--raio-999);
  background-color: var(--superficie-sutil);
  color: var(--texto-apoio);
  font-family: var(--fonte-mono);
  font-size: var(--rotulo-endereco);
  line-height: normal;
  white-space: nowrap;
}

.projeto-janela-print {
  overflow: hidden;
  aspect-ratio: 484 / 312;
  border-radius: 14px;
  background-color: var(--superficie-sutil-2);
}

.projeto-janela-print img {
  width: 100%;
  height: auto;
}

/* ------------------------------------------------------------------
   Destaque (grade: colunas e linhas nas posições do Figma, em cqi)
   Colunas: 60 | 600 | 100 | 110 | 270 | 60  (janela: 60–760; celular:
   660–870; card: 870–1140). Linhas: 86 | 84 | 162 | 224+ | 24 | 20 | 40
   (janela: 86–556; celular: 170–600; card: 332–580).
   ------------------------------------------------------------------ */
.projeto-destaque-limite {
  container-type: inline-size;
}

.projeto-destaque-bloco {
  --f: calc(100cqi / 1200);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns:
    calc(60 * var(--f)) calc(600 * var(--f)) calc(100 * var(--f))
    calc(110 * var(--f)) calc(270 * var(--f)) calc(60 * var(--f));
  grid-template-rows:
    calc(86 * var(--f)) calc(84 * var(--f)) calc(162 * var(--f))
    minmax(calc(224 * var(--f)), auto) calc(24 * var(--f)) calc(20 * var(--f)) calc(40 * var(--f));
  border-radius: var(--raio-40);
  background-color: var(--fundo);
  box-shadow: inset 0 0 0 1px var(--linha);
}

.projeto-marmore {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.projeto-marmore-claro,
[data-tema="claro"] .projeto-marmore-escuro {
  display: none;
}

[data-tema="claro"] .projeto-marmore-claro {
  display: block;
}

/* Véu: veu/bloco a 60% (camada com opacidade 0,6 no Figma) */
.projeto-destaque-veu {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--veu-bloco);
  opacity: 0.6;
}

.projeto-destaque-janela {
  z-index: 1;
  grid-column: 2 / 4;
  grid-row: 2 / 5;
  align-self: start;
}

.projeto-destaque-print {
  display: block;
  width: calc(100% + 16px);
  max-width: none;
  height: auto;
  margin-inline: -8px;
}

/* Largura: 210px do Figma, mas nunca além do ponto onde o card de
   informação começa (40cqi − 270px). Em 1200px as duas contas dão 210; entre
   1024 e 1199px o celular encolhe, com a mesma proporção, e o card não o cobre. */
.projeto-celular {
  z-index: 2;
  grid-column: 3 / 5;
  grid-row: 3 / 7;
  align-self: start;
  justify-self: start;
  width: min(calc(210 * var(--f)), calc(40cqi - 270px));
  padding: 8px;
  border-radius: 38px;
  background-color: var(--superficie-janela);
  box-shadow: inset 0 0 0 1px var(--linha), 0 30px 60px rgb(0 0 0 / 0.5);
}

.projeto-celular-tela {
  overflow: hidden;
  aspect-ratio: 194 / 414;
  border-radius: 31px;
  background-color: var(--superficie-sutil-2);
}

.projeto-celular-tela img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Card de informação e o vidro atrás dele, na mesma célula (870–1140).
   Largura fixa de 270px, presa à direita com a margem do Figma; entre 1024
   e 1199px ele avança um pouco sobre o celular. */
.projeto-info,
.projeto-info-vidro {
  grid-column: 4 / 7;
  grid-row: 4 / 6;
  justify-self: end;
  width: 270px;
  margin-right: calc(60 * var(--f));
  border-radius: 30px;
}

.projeto-info-vidro {
  z-index: 3;
  align-self: stretch;
  /* Figma: desfoque do fundo 30 (equivale a 12px no CSS) */
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* Estica até a altura da célula (248px no Figma), igual ao vidro atrás */
.projeto-info {
  z-index: 4;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  background-color: var(--superficie-janela);
  box-shadow: inset 0 0 0 1px var(--linha), 0 30px 60px rgb(0 0 0 / 0.5);
}

.projeto-info-endereco {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  padding: 7px 14px 7px 12px;
  border-radius: var(--raio-999);
  background-color: var(--superficie-sutil);
  color: var(--texto);
  font-family: var(--fonte-mono);
  font-size: var(--rotulo-coluna);
  line-height: normal;
}

.projeto-info-bolinha {
  width: 7px;
  height: 7px;
  border-radius: var(--raio-999);
  background-color: var(--destaque);
}

.projeto-info-texto {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.projeto-info-ver {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--texto);
  font-size: var(--navegacao);
  font-weight: var(--peso-medio);
  line-height: normal;
}

/* ------------------------------------------------------------------
   Projetos com a janela surgindo de baixo
   ------------------------------------------------------------------ */
.projeto-simples {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding-top: 36px;
  border-radius: var(--raio-40);
  background-color: var(--superficie-sutil);
  box-shadow: inset 0 0 0 1px var(--linha);
}

.projeto-cabecalho {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-inline: 36px;
}

.projeto-cabecalho-texto {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Janela de 500px em 590 (84,75%), 66px abaixo do cabeçalho, cortada pela
   base do card: só 269 dos 360px aparecem (proporção 500 / 269) */
.projeto-janela-recorte {
  width: 84.75%;
  margin: 66px auto 0;
  overflow: hidden;
  aspect-ratio: 500 / 269;
}

/* ------------------------------------------------------------------
   Abaixo de 1024px: o destaque vira coluna (janela; depois celular e card
   lado a lado, sem sobreposição) e os projetos ficam em coluna.
   Respiros provisórios até o mobile do Figma.
   ------------------------------------------------------------------ */
@media (max-width: 1023.98px) {
  .projetos-lista {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 48px;
  }

  .projeto-destaque-bloco {
    grid-template-columns: 210px minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 24px;
    padding: 40px;
  }

  .projeto-destaque-janela {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .projeto-celular {
    grid-column: 1;
    grid-row: 2;
    width: auto;
  }

  /* Card e vidro com a mesma altura da linha (a do celular), para o vidro
     não aparecer sozinho abaixo do card */
  .projeto-info,
  .projeto-info-vidro {
    grid-column: 2;
    grid-row: 2;
    align-self: stretch;
    justify-self: stretch;
    width: auto;
    margin-right: 0;
  }
}

@media (max-width: 767.98px) {
  .projeto-destaque-bloco {
    grid-template-columns: minmax(0, 1fr);
    padding: 24px;
  }

  .projeto-celular {
    justify-self: center;
    width: min(210px, 100%);
  }

  .projeto-info,
  .projeto-info-vidro {
    grid-column: 1;
    grid-row: 3;
  }

  .projeto-simples {
    padding-top: 28px;
  }

  .projeto-cabecalho {
    padding-inline: 24px;
  }

  .projeto-janela-recorte {
    width: calc(100% - 48px);
    margin-top: 40px;
  }

  /* Janela estreita: o endereço vai logo depois dos pontos, sem passar por
     cima deles nem sair da janela */
  .projeto-janela-endereco {
    left: 76px;
    max-width: calc(100% - 88px);
    overflow: hidden;
    text-overflow: ellipsis;
  }
}