/* LiteCMS v2.62 - avoid vertical letterboxing in embedded YouTube videos.
   Standalone work.php only. The full-height hero remains unchanged for images
   and comparisons. The YouTube player is 16:9 and aligned to the top of its
   media area rather than stretching to the hero's viewport-height canvas. */
.screen-gallery-project .media-frame.media-frame-video > iframe {
  display: block !important;
  box-sizing: border-box !important;
  width: min(100%, 177.78svh) !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: 16 / 9 !important;
  margin: 0 auto !important;
  position: relative !important;
  top: 0 !important;
  left: auto !important;
  right: auto !important;
  border: 0 !important;
}

/* Keep 980px as the outside edge, but give the metadata and case study a
   comfortable internal gutter, matched by the title above. The image area
   remains the full 980px. */
.screen-gallery-project .screen-gallery-below,
.screen-gallery-project .screen-gallery-identity {
  padding-inline: clamp(16px, 2.2vw, 30px) !important;
}

@media (max-width: 760px) {
  .screen-gallery-project .screen-gallery-below,
  .screen-gallery-project .screen-gallery-identity {
    padding-inline: 8px !important;
  }
}

/* Only shorten the hero while its active slide is an embedded video.
   Leaving the full-height image and Before/After slides untouched prevents
   changes to how non-video projects present their artwork. */
.screen-gallery-project .screen-gallery-hero:has(.media-stage-item .media-frame-video) {
  height: max(470px, min(100svh, calc(min(100vw, 980px) * 0.5625 + 240px))) !important;
}
.screen-gallery-project .screen-gallery-hero:has(.media-stage-item .media-frame-video) .screen-gallery-fade {
  height: min(240px, 28svh) !important;
}
@media (max-width: 760px) {
  .screen-gallery-project .screen-gallery-hero:has(.media-stage-item .media-frame-video) {
    height: max(430px, min(100svh, calc(100vw * 0.5625 + 240px))) !important;
  }
}