/* Project cards — shared by the home page (Featured Work) and the Work page */

.card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: calc(54 * var(--u));
  row-gap: calc(59 * var(--u));
}

.project-card {
  display: block;
  border: 1px solid var(--ink);
  background: var(--cream);
}

.project-card[hidden] { display: none; }

.card-media {
  display: block;
  position: relative;
  aspect-ratio: 7945 / 4569;
  overflow: hidden;
  background: #ddd;
}
.card-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Featured cards: the second (hover) image sits on top and fades in */
.card-media .img-hover {
  opacity: 0;
  transition: opacity 0.4s ease;
}
.project-card:hover .img-hover,
.project-card:focus-visible .img-hover { opacity: 1; }

.card-caption {
  display: block;
  position: relative;
  padding: calc(36.8 * var(--u)) calc(46 * var(--u)) calc(46 * var(--u)) calc(55.6 * var(--u));
}

.card-title {
  font-weight: 500;
  font-size: calc(29.6 * var(--u));
  line-height: 1.325;
  padding-right: calc(40 * var(--u));
}

.card-client {
  margin-top: calc(8 * var(--u));
  font-weight: 300;
  font-size: calc(24.9 * var(--u));
  line-height: 1.325;
  padding-right: calc(40 * var(--u));
}

.card-caption .arrow-right {
  position: absolute;
  top: calc(41.9 * var(--u));
  right: calc(46 * var(--u));
  transition: transform 0.25s ease;
}
.project-card:hover .arrow-right,
.project-card:focus-visible .arrow-right { transform: translateX(calc(8 * var(--u))); }

@media (max-width: 900px) {
  .card-grid { grid-template-columns: 1fr; row-gap: 22px; }
  .card-caption { padding: 22px 22px 24px 22px; }
  .card-title { font-size: 20px; padding-right: 36px; }
  .card-client { font-size: 15px; margin-top: 5px; padding-right: 36px; }
  .card-caption .arrow-right { top: 28px; right: 22px; }
  /* no hover on touch screens: keep the cover image */
}