/* ------------------------------------------------------------------
   Portfolio media: ratio-locked frames
   The theme sizes project images with fixed heights per breakpoint while
   widths follow the column, so the frame ratio swung from 0.48 to 1.27 and
   background-size: cover cropped the mockups badly. Frames opt in with
   .pf-media and get a fixed aspect ratio instead, matched to the artwork:
     - 16:10 everywhere (cover_image, hover video)
     - 4:5 on phones when a portrait cover exists (.has-tall)
   Images come from CSS variables so each breakpoint gets its own artwork.
------------------------------------------------------------------- */

.pf-media {
  height: auto !important;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.pf-media .mxd-project-item__preview,
.mxd-divider__image.pf-media {
  height: 100% !important;
  background-image: var(--pf-wide);
  background-size: cover;
  background-position: center;
  transform: none !important;
}

.mxd-divider__image.pf-media {
  border-radius: var(--_radius-l);
}

/* Hover preview video has the same 16:10 ratio, so cover fills the frame exactly */
.pf-media .mxd-hover-video {
  object-fit: cover;
}

@media only screen and (max-width: 767px) {
  .pf-media.has-tall {
    aspect-ratio: 4 / 5;
  }

  .pf-media.has-tall .mxd-project-item__preview,
  .mxd-divider__image.pf-media.has-tall {
    background-image: var(--pf-tall);
  }

  /* The hover video is 16:10; never crop it into a portrait frame (narrow desktop windows) */
  .pf-media.has-tall .mxd-hover-video {
    display: none;
  }
}

/* Project gallery: 16:10 cards instead of fixed 420-460px heights */
.pf-gallery .mxd-project-cards__item {
  height: auto !important;
}

.pf-gallery .mxd-project-cards__inner {
  aspect-ratio: 16 / 10;
  height: auto !important;
}

.pf-gallery .mxd-project-cards__inner img,
.pf-gallery .mxd-project-cards__inner video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}