/* Unified responsive media policy for FPFT Lab.
   Diagrams/infographics are never cropped; portrait/card photography may crop
   inside a defined frame. Any uploaded PNG/JPG/WebP/AVIF scales with its container. */

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

.media-contain{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  object-fit:contain;
}

.media-cover{
  display:block;
  width:100%;
  max-width:100%;
  object-fit:cover;
}

/* Header logo: preserve the complete logo without cropping. */
.site-brand-logo{
  object-fit:contain!important;
}

/* Home hero: photographs fill the hero frame responsively. */
.home-hero>img{
  max-width:none;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Research diagrams and uploaded overview/topic figures: preserve full image. */
.research-workflow-figure,
.research-overview-figure,
.topic-figure{
  width:100%;
  max-width:100%;
}

.research-workflow-figure img,
.research-overview-figure img,
.topic-figure img{
  display:block;
  width:100%;
  max-width:100%;
  height:auto!important;
  object-fit:contain!important;
}

/* Topic figures may have any aspect ratio; do not force 4:3 or crop them. */
.topic-figure{
  aspect-ratio:auto!important;
  min-height:0!important;
  overflow:hidden;
}

/* PI portrait: fixed portrait frame, responsive width, intentional crop. */
.pi-card>img,
.professor>img,
.profile-photo{
  width:100%!important;
  max-width:280px;
  height:340px!important;
  object-fit:cover!important;
  object-position:center top;
}

/* Student portraits: fixed portrait thumbnails, intentional crop. */
.student-portrait{
  width:108px;
  height:126px!important;
  object-fit:cover!important;
  object-position:center top;
}

/* Activity listing cards: consistent 16:10 thumbnails, intentional crop. */
.activity-card-link img,
.activity-card img{
  display:block;
  width:100%;
  max-width:100%;
  aspect-ratio:16/10;
  height:auto;
  object-fit:cover!important;
}

/* Activity detail page: show the complete uploaded photograph. */
.activity-detail-image{
  display:block;
  width:100%!important;
  max-width:100%;
  height:auto!important;
  max-height:min(72vh,760px);
  object-fit:contain!important;
  object-position:center;
}

/* Broken files remain visible as a neutral placeholder instead of stretching. */
.image-load-error{
  min-height:120px;
  background:var(--soft,#f4f7f5);
  object-fit:contain!important;
}

@media(max-width:760px){
  .pi-card>img,
  .professor>img,
  .profile-photo{
    max-width:220px;
    height:270px!important;
  }

  .student-portrait{
    width:82px;
    height:96px!important;
  }

  .research-workflow-figure img,
  .research-overview-figure img,
  .topic-figure img,
  .activity-detail-image{
    width:100%;
    height:auto!important;
  }
}