/* ==========================================================================
   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.

   .ev-cards-grid     -> Upcoming_All / Upcoming_* grid   (_EventsGridPartial)
   .ev-cards-carousel -> homepage carousel                (_EventsPartial)
   ========================================================================== */

/* ---------- 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 --------------------------
   Cards stretch to the row height and the price / buttons / payment strip are
   pushed to the bottom, so they line up across a row. */
.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;
    }

.ev-cards-grid .ev-price-row,
.ev-cards-carousel .ev-price-row {
    margin-top: auto;
}

/* ---------- 3. Category row with badges -----------------------------------
   The location / type / campaign badges used to sit on top of the logo. They
   now share the row with the category ribbon, so nothing covers the image and
   no extra line is added in the common case. */
.ev-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
}

    .ev-meta-row .ribbon {
        margin: 0;
    }

    .ev-meta-row .course-badge {
        font-size: 11px;
        line-height: 16px;
        padding: 3px 8px;
        border-radius: 6px;
        white-space: nowrap;
    }

/* ---------- 4. Tighter spacing --------------------------------------------- */
/* the blank <br /> after the participation line added an empty row */
.ev-cards-grid .card-body > br,
.ev-cards-carousel .card-body > br {
    display: none;
}

.ev-cards-grid .card-body > p.card-text,
.ev-cards-carousel .card-body > p.card-text {
    margin-bottom: 4px;
    font-size: 14px;
}

/* date / time: still clear, but no longer heavier than the course title */
.ev-cards-grid .card-body > p.card-title.bxs-color-fill,
.ev-cards-carousel .card-body > p.card-title.bxs-color-fill {
    margin-bottom: 4px;
    font-size: 14px;
    font-weight: 600;
    color: #3d4a5c;
}

    .ev-cards-grid .card-body > p .la,
    .ev-cards-carousel .card-body > p .la {
        color: #1361a1;
        margin-inline-end: 4px;
    }

/* ---------- 5. Price block --------------------------------------------------
   Label on top; current price large; basic price struck through beside it
   only when there is a real discount. */
.ev-price-row {
    padding-top: 12px;
    border-top: 1px dashed rgba(35, 61, 99, 0.14);
    margin-bottom: 4px;
}

.ev-price {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.ev-price__label {
    font-size: 12px;
    font-weight: 700;
    color: #7f8897;
    margin-bottom: 2px;
}

.ev-price__line {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
}

.ev-price__value {
    font-size: 22px;
    font-weight: 700;
    color: #233d63;
    white-space: nowrap;
}

.ev-price__cur {
    font-size: 12px;
    font-weight: 600;
    color: #7f8897;
}

.ev-price__old {
    font-size: 14px;
    color: #9aa3b1;
    text-decoration: line-through;
    white-space: nowrap;
}

/* ---------- 6. Actions --------------------------------------------------------
   Register = the theme's filled button; Read more = the theme's white button.
   Equal widths so the pair reads as one row. */
.ev-actions {
    gap: 8px;
}

    .ev-actions .btn {
        flex: 1 1 0;
        text-align: center;
        white-space: nowrap;
    }