/* Projects page redesign: even grid, richer cards, in-page filtering.
   Uses the site's own tokens (--primary, --dark, --body, --bg). */

.nt-projects_meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 2.5rem 0 1.5rem;
  font-size: 14px;
  color: var(--body, #4c4c4c);
}

.nt-projects_grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4rem 2rem;
}

.nt-project {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  color: var(--dark, #0c0407);
  text-decoration: none;
}
.nt-project[hidden] { display: none; }

.nt-project_media {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 20px;
  overflow: hidden;
  background: var(--bg, #f8f8f8);
}
.nt-project_media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.nt-project:hover .nt-project_media img { transform: scale(1.04); }

.nt-project_cta {
  position: absolute;
  right: 1.25rem;
  bottom: 1.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border-radius: 100px;
  background: var(--primary, #0000ff);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s, transform 0.3s;
}
.nt-project:hover .nt-project_cta,
.nt-project:focus-visible .nt-project_cta { opacity: 1; transform: none; }
.nt-project_cta svg { width: 14px; height: 14px; }

.nt-project_body { display: flex; flex-direction: column; gap: 0.625rem; }

.nt-project_tag {
  align-self: flex-start;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--primary, #0000ff);
}

.nt-project_title {
  margin: 0;
  font-family: Poppins, sans-serif;
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.04em;
}

.nt-project_summary {
  margin: 0;
  max-width: 34rem;
  font-size: 16px;
  line-height: 1.55;
  color: var(--body, #4c4c4c);
}

.nt-project:focus-visible { outline: none; }
.nt-project:focus-visible .nt-project_media { outline: 3px solid var(--primary, #0000ff); outline-offset: 4px; }

@media (max-width: 767px) {
  .nt-projects_grid { grid-template-columns: 1fr; gap: 3rem; }
  .nt-project_title { font-size: 1.625rem; }
  /* No hover on touch: keep the CTA hidden, the whole card is the link */
}

@media (prefers-reduced-motion: reduce) {
  .nt-project_media img, .nt-project_cta { transition: none; }
}

/* ---------- Featured card: odd counts, first card spans the row ---------- */
.nt-project.is-featured { grid-column: 1 / -1; }
.nt-project.is-featured .nt-project_media { aspect-ratio: 2 / 1; }
/* Wide crops lose the top of portrait-ish photos; bias toward faces/headlines */
.nt-project.is-featured .nt-project_media img { object-position: 50% 25%; }
.nt-project.is-featured .nt-project_title { font-size: 2.75rem; }
.nt-project.is-featured .nt-project_summary { max-width: 40rem; font-size: 17px; }

/* ---------- Compact row: "More Projects" under a case study ---------- */
.nt-projects_grid.is-compact { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem 1.5rem; }
.nt-projects_grid.is-compact .nt-project { gap: 1rem; }
.nt-projects_grid.is-compact .nt-project_media { border-radius: 16px; }
.nt-projects_grid.is-compact .nt-project_title { font-size: 1.5rem; }
.nt-projects_grid.is-compact .nt-project_summary { font-size: 15px; }
.nt-projects_grid.is-compact .nt-project_cta { right: 1rem; bottom: 1rem; padding: 0.625rem 1rem; font-size: 13px; }

@media (max-width: 991px) {
  .nt-project.is-featured .nt-project_media { aspect-ratio: 16 / 9; }
  .nt-project.is-featured .nt-project_title { font-size: 2.25rem; }
}

@media (max-width: 767px) {
  .nt-projects_grid.is-compact { grid-template-columns: 1fr; gap: 3rem; }
  .nt-project.is-featured .nt-project_media { aspect-ratio: 4 / 3; }
  .nt-project.is-featured .nt-project_title { font-size: 1.625rem; }
  .nt-project.is-featured .nt-project_summary { font-size: 16px; }
}