/* PIM blue + green editorial course thumbnails. No image = existing gradient style. */
#course-grid .course-card-head.pim-hct-has-image {
    height: 188px;
    min-height: 188px;
    padding: 15px 17px;
    background: #083e64;
    isolation: isolate;
}
#course-grid .course-card-head.pim-hct-has-image::after { display: none; }
#course-grid .pim-hct-image-link {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    text-decoration: none;
}
#course-grid .pim-hct-image-link::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(5,36,64,.50), transparent 46%, rgba(5,36,64,.72));
    pointer-events: none;
}
#course-grid .pim-hct-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform .35s ease;
}
#course-grid .course-card:hover .pim-hct-image { transform: scale(1.04); }
#course-grid .pim-hct-has-image .course-badge,
#course-grid .pim-hct-has-image .date-block {
    position: relative;
    z-index: 1;
    pointer-events: none;
}
#course-grid .pim-hct-has-image .course-badge { background: rgba(255,255,255,.96); color: #075a9d; }
#course-grid .pim-hct-has-image .date-block {
    align-self: flex-start;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,.35);
    font-weight: 800;
}
#course-grid .pim-hct-image-link:focus-visible { outline: 3px solid #0ca368; outline-offset: -3px; }
@media (prefers-reduced-motion: reduce) {
    #course-grid .pim-hct-image { transition: none; }
    #course-grid .course-card:hover .pim-hct-image { transform: none; }
}

/* v1.0.1: Keep thumbnail artwork unobstructed: do not overlay category labels.
   Applies to initial PHP-rendered cards and AJAX-filtered cards equally. */
#course-grid .course-card-head .course-badge {
    display: none !important;
}
/* Retain the date in the bottom-left of the image, even with the badge hidden. */
#course-grid .course-card-head .date-block {
    margin-top: auto;
}