/* projetos.css · #projetos. Blocos grandes e FOSCOS (não vidro), como blocos de produto da Apple.

   - uPersonal e Amigo Divino: a tela do produto numa moldura de celular em CSS que sai pela borda
     de baixo do bloco, com a luz na cor da tela (--cor-tela, do conteudo.js). O projetos.js move as
     telas mais devagar que o bloco durante a rolagem (profundidade): só transform.
   - SARA: sem imagem (material do tribunal é confidencial). O título do artigo é o elemento visual.
   - Tecnologias: texto simples e quieto, separado por vírgula (não nuvem de etiquetas).
   - Links: linhas de texto agrupadas num só bloco (lista à moda do iOS), confortáveis no polegar,
     sem selo oficial de loja e sem parede de botões.
   - Zaplane: linha compacta, sem link. */

.projetos__lista {
  display: grid; gap: clamp(16px, 2.2vw, 24px);
  margin-block: 0; padding: 0; list-style: none;
}

/* ---------- Bloco ---------- */
.projeto {
  --cor-tela: #8a8a90;
  --pad-x: 22px;
  --pad-y: 34px;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding: var(--pad-y) var(--pad-x) 0;
  border-radius: var(--raio-painel);
  background: var(--fosco);
  box-shadow: inset 0 0 0 1px var(--fio), inset 0 1px 0 rgb(255 255 255 / .05);
  overflow: hidden;
  isolation: isolate;
}
.projeto__texto { position: relative; z-index: 2; display: grid; align-content: start; }
.projeto__nome { font-size: clamp(2.25rem, 4.4vw, 3.5rem); line-height: 1; letter-spacing: -.042em; }
.projeto__frase { margin-top: 16px; color: var(--nevoa); max-width: 34em; }
.projeto__nota { margin-top: 10px; font-size: var(--t-pequeno); color: var(--nevoa); }

/* tecnologias: uma linha de texto quieta */
.projeto__tags {
  display: flex; flex-wrap: wrap;
  margin-top: 22px; padding: 16px 0 0; list-style: none;
  border-top: 1px solid var(--fio);
  font-size: var(--t-pequeno); line-height: 1.6;
  color: var(--nevoa);
}
.projeto__tags li { white-space: nowrap; }
.projeto__tags li:not(:last-child)::after { content: ","; margin-right: .42em; }

/* links: um bloco com linhas de texto */
.projeto__links {
  display: grid;
  width: 100%;
  margin-top: 24px; padding: 0; list-style: none;
  border-radius: 18px;
  background: rgb(255 255 255 / .055);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .07);
  overflow: hidden;
}
.projeto__links > li + li { border-top: 1px solid rgb(255 255 255 / .08); }
.projeto__link {
  display: flex; align-items: center;
  min-height: 50px;
  padding: 12px 18px;
  font-size: .9375rem; font-weight: 500; line-height: 1.25; letter-spacing: -.01em;
  color: var(--gelo);
  transition: background-color .2s;
  -webkit-tap-highlight-color: transparent;
}
.projeto__link:active { background: rgb(255 255 255 / .1); }
@media (hover: hover) { .projeto__link:hover { background: rgb(255 255 255 / .06); } }
.projeto__link:focus-visible { outline-offset: -3px; border-radius: 18px; }

/* ---------- Tela do produto ---------- */
.projeto__tela {
  position: relative;
  height: clamp(330px, 100vw, 460px);
  margin: 34px calc(-1 * var(--pad-x)) 0;     /* vai até as bordas do bloco; a de baixo corta o celular */
}
.projeto__luz {
  position: absolute; z-index: 0;
  inset: -4% -18% -36% -18%;          /* centro um pouco abaixo do meio: a luz vem de trás do celular */
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--cor-tela), rgb(0 0 0 / 0));
  opacity: var(--luz-forca, .5);
  pointer-events: none;
}
.projeto[data-projeto="upersonal"] { --luz-forca: .85; }
.projeto[data-projeto="amigo-divino"] { --luz-forca: .5; }
.projeto__telas { position: absolute; inset: 0; z-index: 1; }

/* moldura simples de celular, a tela sai pela borda de baixo */
.projeto__moldura {
  --bisel: 6px;
  --raio-celular: 40px;
  --larg: min(62%, 270px);
  position: absolute;
  top: 9%;
  left: calc(50% - var(--larg) / 2);
  width: var(--larg);
  padding: var(--bisel);
  border-radius: var(--raio-celular);
  background: linear-gradient(150deg, #4a4a50 0%, #1b1b1e 14%, #0a0a0b 50%, #1a1a1d 86%, #3a3a40 100%);
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / .1),
    inset 0 1px 0 rgb(255 255 255 / .22),
    0 0 0 1px rgb(0 0 0 / .6),
    0 0 120px -40px var(--cor-tela),            /* a tela acesa derrama luz em volta */
    0 50px 80px -40px rgb(0 0 0 / .9);
}
/* ilha no alto da tela */
.projeto__moldura::after {
  content: "";
  position: absolute; z-index: 1;
  top: calc(var(--bisel) + 3.2%);
  left: 50%;
  width: 27%; height: 3.4%;
  margin-left: -13.5%;
  border-radius: 999px;
  background: #000;
}
.projeto__moldura img {
  width: 100%; height: auto;
  aspect-ratio: 739 / 1600;
  object-fit: cover;
  border-radius: calc(var(--raio-celular) - var(--bisel));
  background: #0b0b0d;
}
.movimento .projeto__moldura,
.movimento .projeto__luz { will-change: transform; }

/* uPersonal: dois celulares, o do aluno na frente, o do personal atrás e mais alto */
.projeto__telas--duas .projeto__moldura { --larg: min(52%, 236px); }
.projeto__telas--duas .projeto__moldura:first-child {
  z-index: 2;
  top: 12%;
  left: calc(42% - var(--larg) / 2);
}
.projeto__telas--duas .projeto__moldura:last-child {
  z-index: 1;
  top: 3%;
  left: calc(70% - var(--larg) / 2);
  --larg: min(46%, 210px);
}
.projeto__telas--duas .projeto__moldura:last-child img { filter: brightness(.82); }

/* Amigo Divino: a captura é da página, sem barra de status; a faixa de cima (na cor do cabeçalho
   do site, como o Safari faz) abriga a ilha, que assim não cobre o conteúdo */
.projeto[data-projeto="amigo-divino"] .projeto__moldura img {
  padding-top: 13.5%;
  object-position: 50% 0;
  background: #1e2c42;
}

/* ---------- SARA: bloco tipográfico ---------- */
.projeto--tipografico { --cor-tela: #c8ccd6; padding-bottom: var(--pad-y); }
.projeto__tela--artigo {
  height: auto;
  margin: 40px 0 0;
}
.projeto__tela--artigo::before {                    /* luz fria e fraca, como papel sob luz */
  content: "";
  position: absolute; z-index: -1;
  right: -40%; top: -50%;
  width: 140%; height: 200%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(214 222 240 / .13), rgb(214 222 240 / 0));
  pointer-events: none;
}
.projeto__artigo { position: relative; max-width: 36rem; }
.projeto__artigo-fonte { font-size: var(--t-pequeno); color: var(--nevoa); }
.projeto__artigo-titulo {
  margin-top: 14px;
  font-size: clamp(1.75rem, 3.4vw, 2.875rem);
  line-height: 1.07; letter-spacing: -.034em;
  font-weight: 500;
  color: var(--gelo);
  text-wrap: balance;
}
.projeto__artigo-autores {
  margin-top: 26px; padding-top: 16px;
  border-top: 1px solid var(--fio-forte);
  font-size: var(--t-pequeno);
  color: var(--nevoa);
}

/* ---------- Zaplane: linha compacta, sem link ---------- */
.projeto--compacto {
  display: grid; gap: 4px;
  padding: 22px var(--pad-x);
  border-radius: var(--raio-cartao);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--fio);
}
.projeto--compacto .projeto__nome { font-size: 1.25rem; letter-spacing: -.02em; line-height: 1.3; }
.projeto--compacto .projeto__frase { margin-top: 0; font-size: 1rem; }

/* ---------- Tablet ---------- */
@media (min-width: 768px) {
  .projeto { --pad-x: 44px; --pad-y: 48px; }
  .projeto__links { width: max-content; min-width: 15rem; max-width: 100%; }
  .projeto__tela { height: 500px; }
  .projeto__moldura { --larg: min(46%, 280px); }
  .projeto__telas--duas .projeto__moldura { --larg: 250px; }
  .projeto__telas--duas .projeto__moldura:last-child { --larg: 224px; }
  .projeto--compacto { padding: 24px var(--pad-x); }
}

/* ---------- Computador: texto de um lado, tela do outro (alternando) ---------- */
@media (min-width: 980px) {
  .projeto {
    --pad-x: 64px; --pad-y: 64px;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--vao);
    min-height: 660px;
    padding: var(--pad-y) var(--pad-x);
  }
  .projeto__texto { grid-column: 1 / 6; grid-row: 1; align-self: center; }
  .projeto__tela {
    grid-column: 6 / 13; grid-row: 1;
    height: auto;
    margin: calc(-1 * var(--pad-y)) calc(-1 * var(--pad-x)) calc(-1 * var(--pad-y)) 0;
  }
  .projeto:nth-child(2) .projeto__texto { grid-column: 8 / 13; }
  .projeto:nth-child(2) .projeto__tela {
    grid-column: 1 / 8;
    margin: calc(-1 * var(--pad-y)) 0 calc(-1 * var(--pad-y)) calc(-1 * var(--pad-x));
  }
  .projeto__luz { inset: 4% -6% -20% -6%; }
  .projeto__moldura { --larg: 300px; top: 15%; }
  .projeto__telas--duas .projeto__moldura { --larg: 276px; }
  .projeto__telas--duas .projeto__moldura:first-child { top: 21%; left: calc(40% - var(--larg) / 2); }
  .projeto__telas--duas .projeto__moldura:last-child { --larg: 252px; top: 11%; left: calc(73% - var(--larg) / 2); }

  .projeto--tipografico { min-height: 540px; }
  .projeto__tela--artigo { grid-column: 7 / 13; margin: 0; align-self: center; }

  .projeto--compacto {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--vao);
    align-items: baseline;
    min-height: 0;
    padding: 26px var(--pad-x);
  }
  .projeto--compacto .projeto__nome { grid-column: 1 / 4; }
  .projeto--compacto .projeto__frase { grid-column: 4 / 13; }
}
@media (min-width: 1280px) {
  .projeto__moldura { --larg: 316px; }
}

/* ---------- Movimento reduzido / impressão ---------- */
@media (prefers-reduced-motion: reduce) {
  .projeto__moldura, .projeto__luz, .projeto__artigo { transform: none !important; }
}
@media print {
  .projeto { background: none; box-shadow: none; border: 1px solid #bbb; color: #000; min-height: 0; }
  .projeto__tela:not(.projeto__tela--artigo) { display: none; }
  .projeto__frase, .projeto__tags, .projeto__nota { color: #333; }
  .projeto__links { background: none; box-shadow: none; }
  .projeto__link { color: #000; min-height: 0; padding: 2px 0; }
}