/*
 * KYNEX responsive media layer
 * Keeps intrinsic image proportions while preserving intentional cover crops.
 */

img {
  max-width: 100%;
  height: auto;
}

/* Diagrams, maps, software screens and building visualizations must never stretch. */
.facility-animation img,
.map-stage img,
.compact-building img,
.building-visual img,
.platform-visual img,
.device-stage img,
.software-product img,
.modal-card img,
.process-poster img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.compact-building,
.building-visual,
.facility-animation,
.map-stage {
  width: 100%;
  height: auto;
}

.map-stage,
.compact-building,
.building-visual,
.facility-animation,
.software-product img,
.modal-card img {
  margin-right: auto;
  margin-left: auto;
}

/* The services photo uses its natural 3:2 format instead of a forced tall box. */
.media-grid img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* These are deliberate editorial crops, not stretched images. */
.hero-photo img,
.visual-break img,
.object-stage img {
  object-fit: cover;
}

.modal-card img {
  width: auto;
  max-width: 100%;
  max-height: 68vh;
}

@media (max-width: 950px) {
  .facility-animation,
  .map-stage,
  .compact-building,
  .building-visual,
  .software-product img {
    max-width: 900px;
  }
}

@media (max-width: 620px) {
  .facility-animation,
  .map-stage,
  .compact-building,
  .building-visual,
  .software-product img,
  .modal-card img {
    max-width: 100%;
  }
}