/* =========================================================
   COURSE CARDS - DESIGN SYSTEM
   Driven by --cc-* custom properties set in includes/header.php
   from settings.course_card_settings (admin Course Cards tab).
   Loaded AFTER style.css / responsive.css / homepage.css so it
   stays authoritative for all .course-card instances.
   ========================================================= */

/* ---- Grid / gap ----
   .course-cards-row is shared by the homepage, the public courses page
   and the admin Live Preview. It is an explicit CSS Grid (not the
   Bootstrap .row flex layout) so cards fill their track, never overlap,
   and use the responsive counts from the admin designer. */

.course-cards-row {
    --bs-gutter-x: var(--cc-gap, 24px);
    --bs-gutter-y: var(--cc-gap, 24px);
    display: grid;
    grid-template-columns: repeat(var(--cc-cols-desktop, 3), minmax(0, 1fr));
    gap: var(--cc-gap, 24px);
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

.course-cards-row > .course-cards-col {
    min-width: 0;
    max-width: 100%;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
    display: flex;
}

/* Cards respect the admin Card Size width (--cc-width) instead of being
   forced to fill 100% of their track. They stay centered in the track and
   stretch vertically (align-items: stretch on the flex column wrapper) so
   heights remain equal across the row. */
.course-cards-row > .course-cards-col > .card,
.course-cards-row > .course-cards-col > .course-card {
    width: var(--cc-width, 100%);
    min-width: 0;
    max-width: 100%;
    flex: 0 1 auto;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 992px) {
    .course-cards-row {
        grid-template-columns: repeat(var(--cc-cols-tablet, 2), minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .course-cards-row {
        grid-template-columns: repeat(var(--cc-cols-mobile, 1), minmax(0, 1fr));
    }
}

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

.course-card {
    background: var(--cc-bg, #ffffff);
    border: var(--cc-border-w, 1px) solid var(--cc-border-color, #e5e7eb);
    border-radius: var(--cc-radius-final, 18px);
    box-shadow: var(--cc-shadow-rest, none);
    height: auto;
    min-height: var(--cc-height, auto);
    width: var(--cc-width, 100%);
    min-width: var(--cc-min-w, 0);
    max-width: var(--cc-max-w, none);
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: box-shadow .3s ease, transform .3s ease, border-color .3s ease;
    text-decoration: none;
}

.course-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--cc-accent-h, 0px);
    background: var(--cc-accent, none);
    z-index: 2;
    pointer-events: none;
}

.course-card:hover {
    transform: translateY(var(--cc-hover-lift, -6px));
    box-shadow: var(--cc-hover-shadow, none);
    border-color: var(--cc-border-color, #e5e7eb);
}

/* ---- Image area (full card width, natural aspect ratio, never cropped) ---- */

.course-card .course-image-wrapper {
    position: relative;
    width: 100%;
    max-width: 100%;
    height: auto;
    padding: 0;
    margin: 0;
    overflow: hidden;
    display: block;
    flex: 0 0 auto;
    background: transparent;
    line-height: 0;
}

.course-card .course-image-wrapper img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: none;
    margin: 0;
    padding: 0;
    object-fit: contain;
    object-position: center;
}

.course-card .course-image,
.course-card .card-img-top {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: none;
    margin: 0;
    padding: 0;
    object-fit: contain;
    object-position: center;
    border-radius: var(--cc-img-radius, 0px);
    background: transparent;
}

.course-card .course-image-placeholder {
    width: 100%;
    height: var(--cc-img-h, 274px);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---- Body / padding ---- */

.course-card .course-body,
.course-card .card-body {
    padding: var(--cc-pad, 24px);
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

/* ---- Typography ---- */

.course-card .course-body h4,
.course-card .course-body h5,
.course-card .card-title {
    font-size: var(--cc-title-fs, 18px);
    line-height: 1.35;
}

.course-card .course-description,
.course-card .card-text {
    font-size: var(--cc-desc-fs, 14px);
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.course-card .course-info-list li,
.course-card .course-info li,
.course-card .course-detail-item {
    font-size: var(--cc-info-fs, 13px);
}

/* ---- Buttons ---- */

.course-card .btn {
    padding: var(--cc-btn-pad, 0.55rem 1.05rem);
    font-size: var(--cc-btn-fs, 14px);
    border-radius: var(--button-radius, 8px);
}

/* ---- Fee / mode line ---- */

.course-card .course-card-fee {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: calc(var(--cc-info-fs, 13px) + 1px);
    font-weight: 700;
    color: var(--primary-color, #2563eb);
    margin: 8px 0 12px;
}

.course-card .course-card-fee i {
    color: var(--accent-color, #f59e0b);
}

.course-card .course-card-fee-modes {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--cc-info-fs, 13px);
    font-weight: 600;
    color: #6b7280;
    margin: 8px 0 12px;
}

/* Keep equal heights inside one row even with widow wording */
.course-card .course-info-list {
    flex: 1 1 auto;
}

/* ---- Detail rows (courses listing page) ---- */

.course-card .course-details {
    padding-top: 10px;
    border-top: 1px solid #eef2f7;
    margin-top: 12px;
}

.course-card .course-detail-item {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 9px;
    color: #475569;
}

.course-card .course-detail-item i {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #eff6ff;
    color: var(--primary-color, #2563eb) !important;
}

/* ---- Category badge ---- */

.course-card .badge {
    font-size: 0.75rem;
    border-radius: 50px;
}

/* ---- Primary action button ---- */

.course-card .btn-primary {
    border: none;
    font-weight: 600;
    background: linear-gradient(
        135deg,
        var(--primary-color, #2563eb),
        var(--secondary-color, #7c3aed)
    );
    box-shadow: 0 7px 18px color-mix(in srgb, var(--primary-color, #2563eb) 25%, transparent);
}

.course-card .btn-primary:hover {
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--primary-color, #2563eb) 88%, black),
        color-mix(in srgb, var(--secondary-color, #7c3aed) 88%, black)
    );
}

/* ---- Student/portal cards (h-100 wrappers) ---- */

.card.course-card.h-100 .course-body,
.card.course-card.h-100 .card-body {
    height: auto;
}

/* ---- Featured badge (top-right overlay, never shifts layout) ---- */

.course-featured-tag {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border-radius: 50px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #ffffff;
    font-size: clamp(10px, 0.68vw, 12px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.2px;
    box-shadow: 0 4px 12px rgba(217, 119, 6, 0.35);
    pointer-events: none;
}

.course-featured-tag i {
    font-size: 0.95em;
}

@media (max-width: 575px) {
    .course-featured-tag {
        top: 8px;
        right: 8px;
        padding: 4px 9px;
        font-size: 10px;
    }
}