/* Final static card interaction layer — listings stay clickable on file:// and Netlify. */
.projects-grid > a.project-card,
.client-design-projects > a.project-card {
  position: relative !important;
  display: block !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  z-index: 3 !important;
  overflow: hidden !important;
}

.projects-grid > a.project-card > img,
.projects-grid > a.project-card > video,
.projects-grid > a.project-card picture,
.projects-grid > a.project-card picture > img,
.client-design-projects > a.project-card > img,
.client-design-projects > a.project-card > video,
.projects-grid > a.project-card .project-caption,
.client-design-projects > a.project-card .project-caption {
  pointer-events: none !important;
}

/* Resting state: monochrome. */
.projects-grid > a.project-card > img,
.projects-grid > a.project-card > video,
.projects-grid > a.project-card picture > img,
.client-design-projects > a.project-card > img,
.client-design-projects > a.project-card > video {
  filter: grayscale(1) !important;
  -webkit-filter: grayscale(1) !important;
  transition: filter .34s ease, -webkit-filter .34s ease, transform .42s ease !important;
  transform: scale(1.001);
}

/* Hover/focus: original color. */
.projects-grid > a.project-card:hover > img,
.projects-grid > a.project-card:hover > video,
.projects-grid > a.project-card:hover picture > img,
.projects-grid > a.project-card:focus-visible > img,
.projects-grid > a.project-card:focus-visible > video,
.projects-grid > a.project-card:focus-visible picture > img,
.projects-grid > a.project-card.za-card-hover > img,
.projects-grid > a.project-card.za-card-hover > video,
.projects-grid > a.project-card.za-card-hover picture > img,
.client-design-projects > a.project-card:hover > img,
.client-design-projects > a.project-card:hover > video,
.client-design-projects > a.project-card:focus-visible > img,
.client-design-projects > a.project-card:focus-visible > video,
.client-design-projects > a.project-card.za-card-hover > img,
.client-design-projects > a.project-card.za-card-hover > video {
  filter: grayscale(0) !important;
  -webkit-filter: grayscale(0) !important;
  transform: scale(1.012) !important;
}

/* Keep titles above media and never let them steal the click. */
.projects-grid > a.project-card .project-caption,
.client-design-projects > a.project-card .project-caption {
  z-index: 8 !important;
  pointer-events: none !important;
}

/* Force videos to fill their cards while remaining non-interactive. */
.projects-grid > a.project-card > video,
.client-design-projects > a.project-card > video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}