/* Load after shared styles and page-specific styles. Artwork stays intact. */

/* Match the proof imagery to the paper surface without enlarging/cropping it. */
.pg-home .index-item figure,
.pg-home .project-item figure,
.pg-home .project-preview figure {
  background: #eceae4;
}

.pg-home .index-item figure > img,
.pg-home .index-item figure > svg,
.pg-home .project-item figure > img,
.pg-home .project-item figure > svg {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center;
  transform: none;
}

/* Hover still changes tone and link emphasis, but never trims the artwork. */
.pg-home .index-item:hover figure > img,
.pg-home .index-item:hover figure > svg,
.pg-home .index-item:focus-visible figure > img,
.pg-home .index-item:focus-visible figure > svg {
  transform: none;
}

/* A diagram's native 8:5 ratio also provides a stable frame for mixed media. */
.pg-home .project-item figure {
  height: auto;
  min-height: 0;
  aspect-ratio: 8 / 5;
}

.pg-home .project-preview figure > img,
.pg-home .project-preview figure > svg,
.pg-home .project-preview figure.work-card__media--team > img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: none;
  aspect-ratio: 8 / 5;
  object-fit: contain;
  object-position: center;
  transform: none;
}

.pg-home .index-item img[src*="gorda"],
.pg-home .project-item img[src*="gorda"],
.pg-home .project-preview img[src*="gorda"] {
  background: #fff;
}

/* Two rows give full-height thumbnails room on ordinary desktop displays. */
@media (min-width: 1001px) {
  .pg-home .project-explorer {
    grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
    gap: clamp(24px, 3vw, 40px);
  }
  .pg-home .project-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Preserve the compact horizontal cards on the smallest screens. */
@media (max-width: 360px) {
  .pg-home .project-item figure {
    height: 100%;
    min-height: 100px;
    aspect-ratio: auto;
  }
}

/* The supplied comparison crops are 900×720, not 4:3. Keep the slider mask. */
.pg-home .lab .compare {
  aspect-ratio: 5 / 4;
}
.pg-home .lab .compare img {
  object-fit: contain;
  object-position: center;
}
html:not(.js) .pg-home .lab .compare {
  aspect-ratio: auto;
}
html:not(.js) .pg-home .lab .compare img {
  height: auto;
  aspect-ratio: 5 / 4;
}

/* Case studies use their source dimensions; captions and grid stay unchanged. */
.public-case .public-team > img,
.pub-case .pub-gallery img,
.pub-case .pub-visual > svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: none;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center;
}