/* ========== PROJECT IMAGERY ==========
   Reference images are almost always customer logos, not photographs. The
   original rules cropped them to fill (object-fit: cover), which zoomed a
   wide logo until only a few letters were left on screen.

   Everywhere a project image appears it is now contained, centred and given
   breathing room, so a logo of any aspect ratio reads correctly and a
   photograph still looks deliberate rather than cropped at random.
   ===================================== */

/* ---- card thumbnail ---- */
.project-img {
  /* Slightly lighter than the card so a logo on a white plate blends in
     instead of sitting on a visible rectangle. */
  background: linear-gradient(160deg, #FAFAF7 0%, #F1F1EC 100%);
}
.project-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  padding: 26px 30px;
  /* Never upscale past the source: a small logo blown up to fill the card is
     exactly the blur this replaces. */
  max-width: 100%;
  max-height: 100%;
  transition: transform .5s var(--ease);
}
/* The zoom-on-hover was tuned for photos; on a contained logo it only makes
   the edges wobble, so it is much gentler here. */
.project:hover .project-img img { transform: scale(1.02); }

@media (max-width: 560px) {
  .project-img img { padding: 20px 22px; }
}

/* ---- detail page hero ---- */
.pd-hero-img.has-img {
  /* The placeholder's blue gradient competes with a logo; a plain, near-white
     plate lets the customer's own colours carry the block. */
  background: linear-gradient(160deg, #FBFBF9 0%, #F2F3F0 100%);
  padding: 32px;
}
.pd-hero-img.has-img img {
  max-width: min(520px, 100%);
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

@media (max-width: 760px) {
  .pd-hero-img { height: 200px; }
  .pd-hero-img.has-img { padding: 22px; }
  .pd-hero-img.has-img img { max-width: min(360px, 100%); }
}

/* ---- platform shell: projects table + detail ---- */
/* The row thumbnail is a 1:1 tile, so a wide logo needs containing there too. */
.dpv-row-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 5px;
}

/* ---- admin editor preview ---- */
/* The drop zone preview used to stretch; contain keeps what you uploaded
   recognisable before you save it. */
.drop-zone img.preview {
  object-fit: contain;
  max-height: 220px;
  width: auto;
  max-width: 100%;
  margin: 0 auto;
}