/* =========================================================
 * EFT TRAINING — MY COURSES
 * Match Homepage course cards
 * ========================================================= */

:root {
    --eft-course-image-ratio: 4 / 3;
    --eft-course-description-lines: 10;
}


/* Homepage LearnDash pagination scroll offset */
.elementor-element-9159546 .ld-course-list-content {
    margin-top: -120px;
    padding-top: 120px;
}

/* =========================================================
 * EFT Training - Homepage Course Grid
 * ========================================================= */

/* Course image */
.ld-course-list-items .ld_course_grid article.thumbnail > a:first-of-type {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.ld-course-list-items .ld_course_grid article.thumbnail > a:first-of-type img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none;
    object-fit: cover;
    object-position: center;
}

.ld-course-list-items {
    display: flex;
    flex-wrap: wrap;
}

.ld-course-list-items .ld_course_grid {
    display: flex;
}

.ld-course-list-items .ld_course_grid article.thumbnail {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.ld-course-list-items .ld_course_grid .caption {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.ld-course-list-items .ld_course_grid .ld_course_grid_button {
    margin-top: auto;
}

.entry-content {
    display: -webkit-box;
    -webkit-line-clamp: var(--eft-course-description-lines);
    -webkit-box-orient: vertical;
    overflow: hidden;
}




/* ---------------------------------------------------------
 * Card
 * --------------------------------------------------------- */

.uo-border {
    height: 100%;
    overflow: hidden;
    border: 1px solid #d8d8d8;
    border-radius: 5px;
    background: #fff;
}


/*
 * Entire card is wrapped in <a>,
 * so make that wrapper our flex container.
 */
.uo-border > a {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
    text-decoration: none;
}


/* ---------------------------------------------------------
 * Featured image
 * --------------------------------------------------------- */

.uo-border .featured-image {
    width: 100%;
    aspect-ratio: var(--eft-course-image-ratio);
    overflow: hidden;
}

.uo-border .featured-image img.uo-grid-featured-image {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none;
    object-fit: cover;
    object-position: center;
}


/* ---------------------------------------------------------
 * Main content
 * --------------------------------------------------------- */

.uo-border .course-info-holder:not(.bottom) {
    flex: 1;
    padding: 20px 20px 10px;
}


/* Title */
.uo-border .course-title {
    margin: 0 0 14px;

    font-size: 26px;
    line-height: 1.2;
    font-weight: 600;
    color: #242424;
}


/* ---------------------------------------------------------
 * Description
 * --------------------------------------------------------- */

.uo-border .uo-course-short-desciption {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--eft-course-description-lines);

    overflow: hidden;

    margin: 0;

    font-size: 18px;
    line-height: 1.4;
    color: #8d8d8d;
}


/* ---------------------------------------------------------
 * Progress area always stays at bottom
 * --------------------------------------------------------- */

.uo-border .course-info-holder.bottom {
    margin-top: auto;
    padding: 10px 20px 20px;
}


/* Remove unnecessary heading margin */
.uo-border .percentage {
    margin-top: 0;
}