/* RHVA V124 - Process page card image auto-fit
   Purpose: process.php uses tall infographic-style images. V120 made all card images uniform by using cover,
   which is good for people photos but crops process infographic previews. This patch keeps the uniform card frame
   but makes process-page card images fully visible with contain/auto-fit. */

html body main.rhv-process-page .rhv-uniform-card.rhv-popup-card .rhv-card-image,
html body main.rhv-process-page .rhv-uniform-card.rhv-popup-card .rhv-home-v100-media,
html body main.rhv-process-page .rhv-uniform-card.rhv-final-gallery-card .rhv-card-image,
html body main.rhv-process-page .rhv-uniform-card.rhv-final-gallery-card .rhv-final-gallery-media {
  height: var(--rhva-v120-card-image-height, clamp(218px, 19vw, 246px)) !important;
  min-height: var(--rhva-v120-card-image-height, clamp(218px, 19vw, 246px)) !important;
  max-height: var(--rhva-v120-card-image-height, clamp(218px, 19vw, 246px)) !important;
  width: calc(100% + 56px) !important;
  margin: -28px -28px 22px -28px !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #ffffff !important;
  border-radius: 28px 28px 0 0 !important;
}

html body main.rhv-process-page .rhv-uniform-card.rhv-popup-card .rhv-card-image img,
html body main.rhv-process-page .rhv-uniform-card.rhv-popup-card .rhv-home-v100-media img,
html body main.rhv-process-page .rhv-uniform-card.rhv-final-gallery-card .rhv-card-image img,
html body main.rhv-process-page .rhv-uniform-card.rhv-final-gallery-card .rhv-final-gallery-media img,
html body main.rhv-process-page .rhv-uniform-card.rhv-popup-card > img:first-child,
html body main.rhv-process-page .rhv-uniform-card.rhv-final-gallery-card > img:first-child {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  transform: none !important;
  filter: none !important;
  opacity: 1 !important;
  background: #ffffff !important;
}

/* Give process infographic previews a little more height on wider screens so the full image reads better. */
@media (min-width: 981px) {
  html body main.rhv-process-page {
    --rhva-v120-card-image-height: clamp(260px, 23vw, 315px);
  }
}

@media (max-width: 980px) {
  html body main.rhv-process-page {
    --rhva-v120-card-image-height: clamp(245px, 36vw, 300px);
  }
}

@media (max-width: 640px) {
  html body main.rhv-process-page {
    --rhva-v120-card-image-height: 260px;
  }

  html body main.rhv-process-page .rhv-uniform-card.rhv-popup-card .rhv-card-image,
  html body main.rhv-process-page .rhv-uniform-card.rhv-popup-card .rhv-home-v100-media,
  html body main.rhv-process-page .rhv-uniform-card.rhv-final-gallery-card .rhv-card-image,
  html body main.rhv-process-page .rhv-uniform-card.rhv-final-gallery-card .rhv-final-gallery-media {
    width: calc(100% + 44px) !important;
    margin: -22px -22px 20px -22px !important;
    border-radius: 24px 24px 0 0 !important;
  }
}