/* =====================================================================
   Case study image presentation — show full images without cropping.
   Loaded by every case-study-*.html after home.css so it wins.
   Strategy: keep the frame's aspect-ratio for layout rhythm, but letterbox
   the image inside it with object-fit:contain and a soft surface fill so
   no portrait/landscape ever gets clipped.
   ===================================================================== */

/* Hero visual (Pattern A — csd-hero .visual) */
.csd-hero .visual,
.csd-hero .visual img {
  background-color: rgba(0,0,0,.04);
}
[data-theme="dark"] .csd-hero .visual,
[data-theme="dark"] .csd-hero .visual img {
  background-color: rgba(255,255,255,.03);
}
.csd-hero .visual img {
  object-fit: contain !important;
  object-position: center !important;
}

/* Hero visual (Pattern B — .cs-visual background-image variant) */
.cs-visual {
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-color: rgba(0,0,0,.04);
}
[data-theme="dark"] .cs-visual {
  background-color: rgba(255,255,255,.03);
}

/* Gallery items (Pattern A — csd-gallery) */
.csd-gallery .item {
  background: rgba(0,0,0,.04);
}
[data-theme="dark"] .csd-gallery .item {
  background: rgba(255,255,255,.03);
}
.csd-gallery .item img {
  object-fit: contain !important;
  object-position: center !important;
}
/* Stop the hover zoom from making the contained image overflow */
.csd-gallery .item:hover img { transform: none !important; }

/* Gallery items (Pattern B — .cs-gallery) */
.cs-gallery .item {
  background: rgba(0,0,0,.04);
}
[data-theme="dark"] .cs-gallery .item {
  background: rgba(255,255,255,.03);
}
.cs-gallery .item img {
  object-fit: contain !important;
  object-position: center !important;
}
.cs-gallery .item:hover img { transform: none !important; }

/* Override the global nav-slider.js injection that forces cover */
.csd-gallery .item img,
.cs-gallery .item img,
[class*="gallery"] figure img {
  object-fit: contain !important;
  object-position: center !important;
}