/**
 * LearnDash Modern Course Grid Styles
 *
 * Styles for the `.learndash-course-grid` block (modern variant). Each tile
 * consists of an `article` with an overlapping `.thumbnail` image and a
 * `.content` area whose inline padding-top (set by LearnDash JS) clears the
 * image. The flex chain below ensures:
 *  - `article` fills the full CSS grid cell height
 *  - `.content` grows to fill the article below the thumbnail
 *  - `.button` is pinned to the bottom of every tile via margin-top: auto
 *
 * @package dmc-bridge-child
 */

.learndash-course-grid {
    /* Prevent the grid from being stretched by a flex parent (e.g. the page
     * layout column). height: fit-content ensures the grid is never taller
     * than its rows' content, regardless of parent height. */
    align-self: start;
    height: fit-content;

    /* Prevent grid rows from stretching to fill available container height
     * as the viewport grows. Rows stay at their natural/content height while
     * align-items: stretch (the default) still equalises tile heights within
     * each row. */
    .items-wrapper {
        align-content: start;
    }

    /* CSS grid stretches items to the row height automatically via align-items: stretch.
     * height: 100% is not needed and can cause tiles to grow when the grid
     * container is taller than its content. Make article a flex column so
     * .content can fill it and pin the button to the bottom. */
    article {
        display: flex;
        flex-flow: column nowrap;
    }

    /* Text area below (and visually overlapping) the thumbnail image.
     * The LearnDash JS sets an inline min-height on this element and
     * recalculates it on window resize — overriding it here prevents tiles
     * from growing with the viewport. The inline padding-top (also set by JS)
     * is left intact as it creates the necessary space for the thumbnail image.
     * flex: 1 fills remaining article height; .button margin-top: auto pins
     * it to the bottom. */
    .content {
        display: flex;
        flex-flow: column nowrap;
        flex: 1;
        min-height: 0 !important;
        font-family: 'Open Sans', sans-serif;
        padding: 1rem !important;
        gap: 0.85rem !important;

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

    .ld-progress {
        margin: 0 !important;
    }

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

        a {
            font-size: inherit !important;
            font-weight: inherit !important;
            line-height: inherit !important;
        }
    }

    .entry-content {
        margin: 0 !important;

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

    /* Pinned to the bottom of the tile via the free space above it */
    .button {
        margin-top: auto !important;
    }
}