/* =========================================================
   PROJECT PAGE
   ========================================================= */

.project-page {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding-bottom: 100px;
  display: flex;
  flex-direction: column;
  gap: 60px;
}

/* =========================================================
   PROJECT INTRO
   ========================================================= */

.project-intro {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.project-intro-title {
  font-family: var(--heading-font-family);
  font-size: var(--text-3xl-40px);
  font-weight: 700;
  color: var(--heading);
}

.project-intro-title span {
  color: var(--muted);
  font-weight: 500;
}

.project-intro-description {
  font-family: var(--text-font-family);
  font-size: var(--text-md-18px);
  color: var(--body);
  max-width: 900px;
}

.project-intro-meta {
  display: flex;
  gap: 30px;
  list-style: none;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

.project-intro-meta li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--text-font-family);
  font-size: var(--text-sm-14px);
  color: var(--muted);
}

.project-intro-meta svg {
  width: 18px;
  height: 18px;
  color: var(--primary);
  flex-shrink: 0;
}

/* =========================================================
   HERO: VIDEO + USED TECHNOLOGIES
   ========================================================= */

.project-hero {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 40px;
  align-items: start; /* essencial: permite o sticky funcionar */
}

.project-hero-video {
  width: 100%;
}

.project-video-el {
  display: block;
  width: 100%;
  border-radius: 10px;
}

.project-video-el--mobile {
  display: none;
}

.project-video-placeholder {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cards);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-family: var(--heading-font-family);
  font-size: var(--text-3xl-40px);
  font-weight: 800;
  color: var(--muted);
}

.project-hero-tech {
  position: sticky;
  top: 20px;
  align-self: start; /* necessário junto com o "align-items: start" do grid pai */

  background: var(--cards);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 24px;
}

.project-hero-tech h3 {
  font-family: var(--heading-font-family);
  font-size: var(--text-lg-20px);
  font-weight: 700;
  color: var(--heading);
  margin-bottom: 20px;
  text-align: center;
}

/* flex + wrap: a última linha incompleta centraliza sozinha
   (comportamento nativo do flexbox), sem nenhum tratamento
   especial de código. --tech-per-row default = 3 (desktop);
   no mobile o JS sobrescreve esse valor dinamicamente. */
.project-tech-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px 10px;
  --tech-per-row: 3;
}

.project-tech-item {
  flex: 0 0
    calc((100% - (var(--tech-per-row) - 1) * 10px) / var(--tech-per-row));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.project-tech-item img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.project-tech-item span {
  font-family: var(--text-font-family);
  font-size: var(--text-xs-12px);
  color: var(--muted);
}

/* =========================================================
   GENERIC BAR (Objectives / Final Result)
   ========================================================= */

.project-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: baseline;

  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px 24px;
}

.project-bar-label {
  font-family: var(--heading-font-family);
  font-weight: 700;
  font-size: var(--text-base-16px);
  color: var(--heading);
  white-space: nowrap;
}

.project-bar-text {
  font-family: var(--text-font-family);
  font-size: var(--text-base-16px);
  color: var(--body);
}

/* =========================================================
   SCREENSHOT + WHAT I DID
   ========================================================= */

.project-screenshot-development {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 40px;
  align-items: stretch;
}

.project-screenshot-window {
  position: relative;
  height: 700px;
  overflow: hidden;
  border-radius: 10px;
  background: var(--cards);
  border: 1px solid var(--border);
}

.project-screenshot-window img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  cursor: zoom-in;
}

.project-screenshot-window figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 16px;
  background: var(--primary);
  color: var(--heading);
  font-family: var(--text-font-family);
  font-size: var(--text-sm-14px);
  text-align: center;
}

.project-development {
  display: flex;
  flex-direction: column;
  gap: 24px;

  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 24px;
}

.project-development h3 {
  font-family: var(--heading-font-family);
  font-size: var(--text-xl-24px);
  font-weight: 700;
  color: var(--heading);
}

.project-development-item h4 {
  font-family: var(--heading-font-family);
  font-size: var(--text-md-18px);
  font-weight: 700;
  color: var(--heading);
  margin-bottom: 10px;
}

.project-development-item p {
  font-family: var(--text-font-family);
  font-size: var(--text-base-16px);
  color: var(--body);
  background: var(--cards);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 16px;
}

/* =========================================================
   KEY FEATURES + GALLERY
   ========================================================= */

.project-features-gallery {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 40px;
  align-items: stretch;
}

.project-features {
  display: flex;
  flex-direction: column;

  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 24px;
}

.project-features h3 {
  font-family: var(--heading-font-family);
  font-size: var(--text-xl-24px);
  font-weight: 700;
  color: var(--heading);
  margin-bottom: 20px;
}

.project-features-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: space-between;
  gap: 12px;
}

.project-features-list li {
  font-family: var(--text-font-family);
  font-size: var(--text-sm-14px);
  color: var(--body);
  background: var(--cards);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 14px;
}

.project-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
  gap: 20px;
}

.project-gallery-item {
  position: relative;
  height: 260px;
  overflow: hidden;
  border-radius: 10px;
  background: var(--cards);
  border: 1px solid var(--border);
}

.project-gallery-item figcaption {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  padding: 8px 12px;
  background: var(--surface);
  color: var(--heading);
  font-family: var(--text-font-family);
  font-size: var(--text-xs-12px);
  text-align: center;
  border-bottom: 1px solid var(--border);
}

.project-gallery-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  cursor: zoom-in;
}

/* =========================================================
   LIGHTBOX
   ========================================================= */

.project-lightbox {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(0, 0, 0, 0.85);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease;
}

.project-lightbox.is-open {
  opacity: 1;
  visibility: visible;
}

.project-lightbox-content {
  max-width: 90vw;
  max-height: 90vh;
}

.project-lightbox-content img {
  display: block;
  max-width: 90vw;
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
}

.project-lightbox-close {
  position: absolute;
  top: 24px;
  right: 24px;

  display: flex;
  align-items: center;
  gap: 6px;

  background: transparent;
  border: 1px solid var(--border);
  border-radius: 100px;
  color: var(--heading);
  font-family: var(--text-font-family);
  font-size: var(--text-sm-14px);
  padding: 8px 18px;
  cursor: pointer;
}

.project-lightbox-close:hover {
  background: var(--heading);
  color: var(--bg);
}

.project-lightbox-close span {
  font-size: var(--text-lg-20px);
  line-height: 1;
}

/* =========================================================
   TABLET / MOBILE
   ========================================================= */

@media (max-width: 900px) {
  /* -----------------------------------------------------
     REORDENAÇÃO VISUAL, SEM MUDAR O HTML
     - os três wrappers viram "invisíveis" como caixa
       (display: contents) e seus filhos entram direto
       no grid de .project-page, cada um no seu grid-area.
     ----------------------------------------------------- */

  .project-page {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); /* antes: 1fr 1fr — isso causava o "grid blowout" */
    grid-template-areas:
      "intro intro"
      "video video"
      "objectives tech"
      "whatidid whatidid"
      "screenshot screenshot"
      "keyfeatures keyfeatures"
      "gallery gallery"
      "final final";
    gap: 30px;
  }

  .project-hero,
  .project-screenshot-development,
  .project-features-gallery {
    display: contents;
  }

  /* blindagem extra: impede qualquer filho do grid de forçar
     a coluna a crescer além do espaço disponível */
  .project-intro,
  .project-hero-video,
  .project-bar--objectives,
  .project-hero-tech,
  .project-development,
  .project-screenshot-window,
  .project-features,
  .project-gallery,
  .project-bar--final {
    min-width: 0;
  }

  .project-intro {
    grid-area: intro;
  }
  .project-hero-video {
    grid-area: video;
  }
  .project-bar--objectives {
    grid-area: objectives;
  }
  .project-hero-tech {
    grid-area: tech;
    position: static;
    top: auto;
  }
  .project-development {
    grid-area: whatidid;
  }
  .project-screenshot-window {
    grid-area: screenshot;
  }
  .project-features {
    grid-area: keyfeatures;
  }
  .project-gallery {
    grid-area: gallery;
  }
  .project-bar--final {
    grid-area: final;
  }

  /* -----------------------------------------------------
     TIPOGRAFIA E ESPAÇAMENTOS
     ----------------------------------------------------- */

  .project-intro-title {
    font-size: var(--text-2xl-32px);
  }

  .project-intro-meta {
    flex-wrap: wrap;
    gap: 12px 20px;
  }

  .project-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 16px 18px;
  }

  .project-hero-tech,
  .project-development,
  .project-features {
    padding: 18px;
  }

  /* -----------------------------------------------------
     SCREENSHOT PRINCIPAL — altura proporcional à largura,
     em vez de altura fixa (700px ficaria desproporcional
     em telas pequenas)
     ----------------------------------------------------- */

  .project-screenshot-window {
    height: auto;
    aspect-ratio: 2 / 3;
  }

  /* -----------------------------------------------------
     GALERIA — mesma lógica: aspect-ratio em vez de altura
     fixa, pra escalar bem em qualquer largura de tela
     ----------------------------------------------------- */

  .project-gallery {
    gap: 14px;
  }

  .project-gallery-item {
    height: auto;
    aspect-ratio: 1 / 1;
  }
}

/* =========================================================
   VÍDEO — troca desktop/mobile (mesma lógica da Home)
   ========================================================= */

@media (max-width: 720px) {
  .project-video-el--desktop {
    display: none;
  }

  .project-video-el--mobile {
    display: block;
    width: 100%;
    border-radius: 10px;
  }

  .project-intro-title {
    font-size: var(--text-xl-24px);
  }
}