/* ==========================================================================
   Projects grid ("Real Projects. Real Results.")
   ========================================================================== */

.projects-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}

.projects-grid--gallery {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tabs-row + .projects-grid {
  margin-top: var(--space-xl);
}

.projects-grid--full {
  max-width: none;
  width: 100%;
  padding-inline: var(--space-lg);
  box-sizing: border-box;
}

.projects-grid--full .project-card__media img {
  aspect-ratio: 4 / 3;
}

.projects-grid--full .project-card {
  overflow: hidden;
  padding-bottom: var(--space-md);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.project-card__media {
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  overflow: hidden;
  margin-bottom: var(--space-md);
}

.project-card__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  max-height: 300px;
}

.project-card__title {
  font-weight: 700;
  font-size: var(--fs-small);
  color: var(--color-navy-800);
  padding-inline: var(--space-md);
}

.project-card__location {
  font-size: var(--fs-small);
  color: var(--color-text-soft);
  padding-inline: var(--space-md);
  margin-top: var(--space-2xs);
}

/* Navy theme (acf/projects block): the card has no background of its
   own, so its dark title/location text sits directly on the dark
   section background unless swapped for the on-dark equivalents. */
.section--navy .project-card__title {
  color: var(--color-white);
}

.section--navy .project-card__location {
  color: var(--color-text-on-dark-muted);
}

@media (max-width: 1024px) {
  .projects-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 720px) {
  .projects-grid {
    grid-template-columns: 1fr;
  }
}