/**
 * IMS Academy Course Image Title Fix
 *
 * The supplied course artwork is 1200 x 800 (3:2). The theme
 * currently places it inside a taller frame and uses object-fit: cover, which
 * cuts off text at the left and right edges. These rules restore the artwork's
 * natural ratio and display the entire image without stretching it.
 */

body.ims-course-image-title-fix-page {
    --ims-course-artwork-ratio: 3 / 2;
}

body.ims-course-image-title-fix-page img[src*="/assets/course-images/"],
body.ims-course-image-title-fix-page img[src*="/course-images/"],
body.ims-course-image-title-fix-page img.ims-course-image-title-fix-image {
    box-sizing: border-box !important;
    display: block !important;
    position: relative !important;
    inset: auto !important;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 auto !important;
    padding: 0 !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: none !important;
}

body.ims-course-image-title-fix-page .ims-course-image-title-fix-frame {
    box-sizing: border-box !important;
    display: block !important;
    position: relative !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: var(--ims-course-artwork-ratio) !important;
    overflow: hidden !important;
}

/* Apply the correct frame ratio immediately in modern browsers, before the
 * small JavaScript compatibility helper runs. This prevents a visible jump. */
@supports selector(:has(*)) {
    body.ims-course-image-title-fix-page :where(figure, picture, a, div):has(> img[src*="/assets/course-images/"]),
    body.ims-course-image-title-fix-page :where(figure, picture, a, div):has(> img[src*="/course-images/"]) {
        box-sizing: border-box !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        aspect-ratio: var(--ims-course-artwork-ratio) !important;
        overflow: hidden !important;
    }
}

/* Preserve the theme's rounded image treatment at every screen size. */
body.ims-course-image-title-fix-page .ims-course-image-title-fix-frame > img.ims-course-image-title-fix-image,
body.ims-course-image-title-fix-page .ims-course-image-title-fix-frame > picture > img.ims-course-image-title-fix-image {
    border-radius: inherit !important;
}

/* Mobile: retain the full 3:2 image instead of forcing a portrait/square crop. */
@media (max-width: 782px) {
    body.ims-course-image-title-fix-page .ims-course-image-title-fix-frame {
        max-width: 100% !important;
        aspect-ratio: var(--ims-course-artwork-ratio) !important;
    }

    body.ims-course-image-title-fix-page img.ims-course-image-title-fix-image {
        width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
        object-position: center center !important;
    }
}