/* Shared CSS for files inside /feature-project/.
   Keeps HTML in the folder and fixes nav/spacing without the old blurred nav. */
.nav-wrap {
  padding: 18px 0 24px !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.nav-wrap .nav {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.container {
  width: min(1120px, calc(100% - 32px)) !important;
}
.project-header {
  margin-bottom: 20px !important;
}
.project-header h1 {
  margin-bottom: 14px !important;
}
.header-lines {
  gap: 4px !important;
}
.project-paper {
  padding: clamp(20px, 3.5vw, 34px) !important;
}
.showcase-list {
  gap: clamp(24px, 4vw, 40px) !important;
}
.showcase-list::before {
  opacity: 0.65 !important;
}
.showcase-row {
  gap: clamp(22px, 4vw, 36px) !important;
}
.screen-frame {
  padding: 10px !important;
}
.text-box h2 {
  margin-bottom: 8px !important;
}
.footer {
  padding: 24px 0 !important;
}
@media (max-width: 780px) {
  .project-header h1 {
    font-size: clamp(2.4rem, 14vw, 4.4rem) !important;
  }
  .showcase-row,
  .showcase-row.reverse {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  .showcase-row.reverse .screen-box,
  .showcase-row.reverse .text-box {
    order: initial !important;
    text-align: left !important;
    margin-left: 0 !important;
  }
  .mini-tags,
  .showcase-row.reverse .mini-tags {
    justify-content: flex-start !important;
  }
}

/* FINAL project-detail cleanup */
.nav-wrap {
  padding-top: 18px !important;
  padding-bottom: 18px !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.nav-wrap .nav {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 12px 28px rgba(17, 17, 17, 0.1) !important;
}
body.dark .nav-wrap .nav {
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.34) !important;
}
.project-header {
  margin-top: 22px !important;
  margin-bottom: 16px !important;
}
.project-paper {
  padding: clamp(18px, 3vw, 30px) !important;
}
.showcase-list {
  gap: clamp(16px, 2.4vw, 26px) !important;
}
.showcase-row {
  gap: clamp(16px, 2.8vw, 28px) !important;
}
.screen-frame {
  padding: 8px !important;
}
.text-box h2 {
  margin-bottom: 6px !important;
}
.footer {
  padding: 18px 0 !important;
}