/* ==========================================================================
   NOSSOS PROJETOS
   Fingerprint distinto da galeria de pratos: titulo sobreposto a imagem
   (recurso do proprio deck da marca), fio de 1px como divisor, imagem
   recortada na grade, CTA tipografico, reveal em fade escalonado.
   ========================================================================== */

.projetos {
  background-color: var(--bg-cream);
  color: var(--text-dark);
}

/* ── Cabecalho sobreposto: "Nossos" acima, "Projetos" abaixo ── */
.projetos__cover {
  position: relative;
  display: grid;
  justify-items: center;
  margin-bottom: var(--space-12);
}

.projetos__cover-img {
  width: min(100%, 420px);
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
  display: block;
}

.projetos__title {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
  font-family: var(--font-display);
  font-weight: 400;
  font-style: normal;
  line-height: 0.9;
  color: var(--text-dark);
}

.projetos__word {
  font-size: clamp(2.6rem, 9vw, 5.5rem);
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
  min-width: 0;
}

/* deslocamento vertical: as palavras invadem a foto */
.projetos__word--a { transform: translateY(-0.42em); }
.projetos__word--b { transform: translateY(0.42em); }

.projetos__hint {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--text-dark);
  opacity: 0.6;
  text-align: center;
  margin-bottom: var(--space-8);
}

/* ── Grade de cases ── */
.projetos__grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-8) var(--space-6);
}

.projeto-card { min-width: 0; }

.projeto-card__link {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  text-decoration: none;
  color: inherit;
}

.projeto-card__media {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: rgba(26, 26, 26, 0.06);
}

.projeto-card__media img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-slow);
}

.projeto-card__link:hover .projeto-card__media img,
.projeto-card__link:focus-visible .projeto-card__media img {
  transform: scale(1.04);
}

/* nome do projeto sobre a foto, como no deck */
.projeto-card__name {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: var(--space-8) var(--space-3) var(--space-3);
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.6vw, 1.4rem);
  font-weight: 400;
  font-style: normal;
  line-height: 1.15;
  color: var(--text-light);
  overflow-wrap: anywhere;
  background: linear-gradient(to top, rgba(26, 26, 26, 0.85), transparent);
}

/* ── Metadados: fio de 1px por linha ── */
.projeto-card__meta {
  display: flex;
  flex-direction: column;
}

.projeto-card__row {
  display: grid;
  grid-template-columns: 4.6rem minmax(0, 1fr);
  gap: var(--space-2);
  padding: 0.5rem 0;
  border-top: 1px solid var(--border-cream);
}

.projeto-card__k {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dark);
  opacity: 0.72;
}

.projeto-card__v {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-dark);
  opacity: 0.8;
  overflow-wrap: anywhere;
}

/* ── Publicidade e parcerias ── */
.projetos__parcerias {
  margin-top: var(--space-16);
  border-top: 1px solid var(--border-cream);
  padding-top: var(--space-8);
}

.projetos__parcerias-label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dark);
  opacity: 0.72;
  margin-bottom: var(--space-4);
}

.projetos__parcerias-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
}

.projetos__parcerias-list li {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-dark);
  letter-spacing: 0.02em;
  padding: 0.55rem 1.2rem;
  border: 1px solid rgba(26, 26, 26, 0.22);
  border-radius: 999px;
}

/* ── Responsivo ── */
@media (max-width: 1023px) {
  .projetos__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.projetos__hint-swipe { display: none; }

/* ── Mobile: carrossel em vez de 12 cards empilhados ──
   Em uma coluna a secao ficava com mais de 12 telas de altura. Scroll nativo
   com snap, mesmo padrao da galeria: sem JS, funciona com o dedo. */
@media (max-width: 767px) {
  .projetos__grid {
    display: flex;
    grid-template-columns: none;
    gap: var(--space-3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* o snap precisa considerar o padding, senao ancora deslocado */
    scroll-padding-left: var(--space-4);
    padding-inline: var(--space-4);
    /* sangra ate a borda da tela, anulando o padding do .container */
    margin-inline: calc(var(--space-4) * -1);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .projetos__grid::-webkit-scrollbar { display: none; }

  .projetos__hint-swipe { display: inline; }

  .projeto-card {
    flex: 0 0 72%;
    max-width: 260px;
    scroll-snap-align: start;
  }
}

@media (max-width: 599px) {
  .projetos__cover-img {
    width: min(100%, 300px);
  }

  .projetos__parcerias-label,
  .projetos__parcerias-list {
    text-align: center;
    justify-content: center;
  }
}