/* Clara Nartey V7 / Elementor media compatibility, v1.0.4.
   Elementor frontend resets .elementor img { height:auto; border-radius:0; }.
   That overrides the prototype's frame-filling images and leaves empty bands.
   Scope the fixes to Clara's frame classes; never force every Elementor image
   or its logo to 100% height. Keep Elementor's per-widget width control effective.
*/

/* The original aspect-ratio frames must own the visible photo's dimensions.
   Positioning the photo inside its frame makes the crop independent of source
   dimensions and avoids percentage-height resolution differences in browsers. */
:where(body.cn-wp) .elementor :is(
  .work-photo,
  .art-photo,
  .post-img,
  .publication-image,
  .lightbox-thumb
) {
  position: relative;
  min-width: 0;
  overflow: hidden;
}
:where(body.cn-wp) .elementor :is(
  .work-photo,
  .art-photo,
  .post-img,
  .publication-image,
  .lightbox-thumb
) > img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
}

/* Original full-bleed hero/media layers; do not affect inline photos or logos. */
:where(body.cn-wp) .elementor :is(.hero-visual, .page-hero-media) > img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
}

/* Wide editorial illustrations depend on the picture filling their grid cell.
   Keep existing desktop and responsive min-heights from the source stylesheet. */
:where(body.cn-wp) .elementor :is(
  .story-image,
  .exhibition-feature-image,
  .big-event-image,
  .essay-photo
) > img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
}

/* Restore picture-only rounded corners that Elementor sets to zero. */
:where(body.cn-wp) .elementor :is(
  .bio-portrait,
  .statement-art,
  .press-large-img
) > img { border-radius: var(--radiusLg, 36px); }
:where(body.cn-wp) .elementor .cv-note > img {
  border-radius: var(--radius, 23px);
}

/* These heights intentionally differ from desktop on smaller screens. */
:where(body.cn-wp) .elementor .aside-photo > img {
  width: 100%;
  height: 300px;
  max-width: 100%;
  object-fit: cover;
}
@media (max-width:700px) {
  :where(body.cn-wp) .elementor .story-image > img {
    height: 430px;
  }
  :where(body.cn-wp) .elementor .exhibition-feature-image > img {
    height: 330px;
  }
  :where(body.cn-wp) .elementor .big-event-image > img {
    height: 300px;
  }
  :where(body.cn-wp) .elementor .essay-photo > img {
    height: 320px;
  }
  :where(body.cn-wp) .elementor .aside-photo > img {
    height: 260px;
  }
}
@media (max-width:450px) {
  :where(body.cn-wp) .elementor .story-image > img {
    height: 355px;
  }
}
