/* ==========================================================================
   Course / event cards  +  course details preview image
   Display only. Loaded after style.css. To roll back, remove the <link> in
   _Layout.cshtml - nothing else depends on this file.
   ========================================================================== */

/* ---------- 1. Banner frame ----------------------------------------------
   The banner shared by almost every course is a wide logo (2563x821, about
   3.1:1) with no margin around it, so the triangle touched the card edges and
   looked cropped. A 3:1 frame matches the logo's own shape, so the card is
   only ~5px taller than before (no extra empty area), while the padding and
   object-fit: contain keep the whole logo visible and off the edges. */
.card-image .card-img-top,
.preview-course-video img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 1;
    object-fit: contain;
    padding: 10px 14px;
    background-color: #fff;
}

/* the horizontal list layout sizes its image itself - leave it as the theme had it */
.card-item-list-layout .card-image .card-img-top {
    aspect-ratio: auto;
    padding: 0;
    background-color: transparent;
    object-fit: cover;
}

/* ---------- 2. Equal card heights, aligned rows --------------------------
   A card with an extra line (venue) was taller than its neighbours, so the
   price, buttons and payment strip sat at different heights across a row.
   Cards now stretch to the row height and those three blocks are pushed to
   the bottom, so they line up.
   .ev-cards-grid     -> Upcoming_All / Upcoming_* grid   (_EventsGridPartial)
   .ev-cards-carousel -> homepage carousel                (_EventsPartial)   */
.ev-cards-grid > [class*="col-"],
.ev-cards-carousel .owl-stage,
.ev-cards-carousel .owl-item {
    display: flex;
}

.ev-cards-grid .card-preview,
.ev-cards-carousel .card-preview {
    display: flex;
    flex-direction: column;
    width: 100%;
}

    .ev-cards-grid .card-preview > .card-body,
    .ev-cards-carousel .card-preview > .card-body {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
    }

        /* the category ribbon is a pill - keep it content-width */
        .ev-cards-grid .card-preview > .card-body > .ribbon,
        .ev-cards-carousel .card-preview > .card-body > .ribbon {
            align-self: flex-start;
        }

        /* first block after the details = price row; everything below follows it */
        .ev-cards-grid .card-preview > .card-body > div:first-of-type,
        .ev-cards-carousel .card-preview > .card-body > div:first-of-type {
            margin-top: auto;
        }