/**
 * LearnDash Course List Content Styles
 *
 * Used by: /course-bundles page to list course groups in grid of tiles.
 *
 * Styles scoped to the `.ld-course-list-content` wrapper rendered by the
 * LearnDash [ld_course_list] shortcode / block. The course grid inside this
 * wrapper displays a tile for each individual course, or a tile for each
 * LearnDash Group of courses, depending on the context in which the shortcode
 * is used.
 *
 * @package dmc-bridge-child
 */

/* Course/Group grid wrapper — sets the base font for all grid tile content */
.ld-course-list-content {

    /* Override Bootstrap 3's float-based grid so flexbox can equalise tile heights */
    .ld-course-list-items {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
    }

    /* Individual course or group tile.
     * float:none cancels Bootstrap 3's float layout so the flex row above
     * can stretch all tiles to the same height. */
    .ld_course_grid {
        float: none !important;
        font-family: 'Open Sans', sans-serif;
        display: flex;
        flex-flow: column nowrap;
    }

    /* Stretch the article to fill the full tile height so the caption can grow */
    article {
        display: flex !important;
        flex-flow: column nowrap;
        flex: 1;
    }
    /* Caption grows to fill the remaining card height, enabling button pinning */
    .caption {
        display: flex;
        flex-flow: column nowrap;
        flex: 1;
        font-family: 'Open Sans', sans-serif;
        padding: 1rem !important;
        justify-content: flex-start;
        height: 100%;

        & > *:first-child {
            margin-top: 0 !important;
        }
        & > *:last-child {
            margin-bottom: 0 !important;
        }
    }

    .entry-title {
        display: block !important;
        font-size: 1.2rem !important;
        font-weight: 600 !important;
        margin: 0 !important;
        line-height: 1.1 !important;
    }

    /* Entry content takes its natural height; free space is handled by the button's margin-top: auto */
    .entry-content {
        margin: 0 0 15px !important;

        & > *:first-child {
            margin-top: 0 !important;
        }
        & > *:last-child {
            margin-bottom: 0 !important;
        }
    }

    /* Button is pinned to the bottom of the caption via margin-top: auto */
    .ld_course_grid .ld_course_grid_button {
        margin-top: auto !important;
    }
}