/* ==========================================================================
   All-Courses catalog page — redesign
   Scoped entirely under .course-catalog-* so nothing here can affect any
   other page or the existing course card styles used elsewhere on the site.
   Reuses the same brand gradient/colors already defined by
   mentor-custom-sections.css (falls back to literal values if that file
   isn't loaded on this page for any reason).
   ========================================================================== */

:root {
    --course-catalog-primary: var(--mentor-primary, #9E2963);
    --course-catalog-grad: var(--mentor-grad, linear-gradient(90deg, #9E2963 0%, #C6265F 55%, #E8447F 100%));
}

/* ---------------------------- Search bar --------------------------------- */
.course-catalog-toolbar {
    padding-top: 10px;
    margin-bottom: 6px;
}

.course-catalog-searchbar {
    max-width: 480px;
    margin: 0 auto 16px;
}

/* Tighten the reused homepage category-pills block when it's nested inside
   this toolbar (its own top padding is meant for a full-bleed section). */
.course-catalog-toolbar .mentor-category-wrapper {
    padding-top: 18px;
    padding-bottom: 0;
}

.course-catalog-searchbar .search {
    position: relative;
}

.course-catalog-searchbar .form-control {
    width: 100%;
    height: 52px;
    border-radius: 30px;
    padding: 0 60px 0 24px;
    border: 1px solid #E6E6EC;
    font-size: 15px;
    box-shadow: 0 4px 14px rgba(20, 20, 43, 0.05);
}

.course-catalog-searchbar .form-control:focus {
    outline: none;
    border-color: var(--course-catalog-primary);
    box-shadow: 0 4px 16px rgba(158, 41, 99, 0.15);
}

.course-catalog-searchbar .submit {
    position: absolute;
    right: 6px;
    top: 6px;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: var(--course-catalog-grad);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* ---------------------------- Course card --------------------------------- */
.course-catalog-card {
    position: relative;
}

.course-catalog-category {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    color: var(--course-catalog-primary);
    background: rgba(158, 41, 99, 0.08);
    border: 1px solid rgba(158, 41, 99, 0.2);
    padding: 6px 14px;
    border-radius: 30px;
    margin-bottom: 12px;
}

.course-catalog-price {
    margin-top: 8px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
}

.course-catalog-price-old {
    font-size: 13px;
    color: #9096A8;
    text-decoration: line-through;
}

.course-catalog-price-now {
    font-size: 19px;
    font-weight: 800;
    background: var(--course-catalog-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--course-catalog-primary);
}

.course-catalog-price-off {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background: #1BA35A;
    padding: 3px 9px;
    border-radius: 20px;
    line-height: 1.4;
}

.course-catalog-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
    padding: 11px 18px;
    border-radius: 30px;
    background: var(--course-catalog-grad);
    color: #fff !important;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 8px 18px rgba(158, 41, 99, 0.25);
    transition: transform .25s ease, box-shadow .25s ease;
}

.course-catalog-card:hover .course-catalog-cta {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(158, 41, 99, 0.35);
}

.course-catalog-cta i {
    font-size: 13px;
    transition: transform .25s ease;
}

.course-catalog-card:hover .course-catalog-cta i {
    transform: translateX(4px);
}

/* -------------------------- Load more button ------------------------------ */
.course-catalog-loadmore {
    text-align: center;
    margin-top: 10px;
    margin-bottom: 40px;
}

.course-catalog-loadmore button {
    border: none;
    padding: 13px 42px;
    border-radius: 30px;
    background: var(--course-catalog-grad);
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    box-shadow: 0 10px 22px rgba(158, 41, 99, 0.25);
    cursor: pointer;
    transition: opacity .2s ease;
}

.course-catalog-loadmore button:disabled,
.course-catalog-loadmore button.is-loading {
    opacity: .65;
    cursor: not-allowed;
}

/* -------------------------------- Responsive ------------------------------- */
@media (max-width: 767px) {
    .course-catalog-toolbar {
        padding-top: 4px;
        margin-bottom: 4px;
    }

    .course-catalog-searchbar {
        margin-bottom: 12px;
    }

    .course-catalog-cta {
        padding: 9px 14px;
        font-size: 13px;
    }

    /* Card banner on phones/small screens — ROOT CAUSE FOUND.
       Every earlier attempt only touched the <img> (height/aspect-ratio/
       object-fit) and still got cropped, because the actual cause was
       never the image — it was the CARD:

         custom_style.css:  .card.Ecard.eBar-card { height: 400px; }

       That rule is NOT inside a media query, so it forces every card —
       including on a narrow phone — to be exactly 400px tall. Bootstrap's
       .card is `display:flex; flex-direction:column`, and .courses-img has
       `overflow:hidden`, which (per the flexbox spec) gives that flex item
       an automatic minimum height of 0 instead of its content's height.
       Result: whenever a course's title/price pushed the card's total
       content past 400px, flexbox shrank the banner box — the ONLY flex
       item allowed to shrink below its content — to make everything else
       fit, and overflow:hidden then clipped the top/bottom of the image.
       That is exactly the "top/bottom cut off" in the reported screenshot,
       and why height:auto on the <img> alone never fixed it: the image
       itself was fine, its BOX was being squeezed by the fixed-height
       card around it.

       Fix (2 lines, nothing else changed): let the card's height follow
       its own content on phones, and stop the banner box from being a
       shrinkable flex item. The banner then simply renders at its own
       real size — same design, same markup, same desktop/tablet look,
       just no more clipping. Scoped to .course-catalog-card only and only
       below 767px, so every other card on the site (My Courses, homepage,
       instructor pages, etc.) and the desktop/tablet catalog layout are
       completely unaffected. */
    .card.Ecard.eBar-card.course-catalog-card {
        height: auto;
    }

    .course-catalog-card .courses-img {
        flex-shrink: 0;
        border-radius: 14px;
        overflow: hidden;
    }

    .course-catalog-card .courses-img img {
        display: block;
        width: 100%;
        height: auto;
        border-radius: 14px;
    }
}