/* ====== Chrome: page background flush under header ====== */
body.body-courses{
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
body.body-courses,
body.body-courses main{
    background-color:var(--bg-page);
}

/* =========================================================
   COURSES.CSS — Premium style matching home page
   ========================================================= */

.courses-page{
    --accent-glow:    rgba(224,215,196,.20);
    --accent-border:  rgba(224,215,196,.25);
    --accent-soft:    rgba(224,215,196,.55);
    --card-ring-alpha:rgba(224,215,196,.90);
}

/* Page base */
.courses-page{
    background:var(--bg-page) !important;
    color:var(--text-primary) !important;
    min-height:100vh;
    padding-bottom:80px;
}
.courses-page h1{
    letter-spacing:.3px;
    line-height:1.15;
    font-weight:800;
    text-shadow:0 2px 16px rgba(0,0,0,.35);
}

/* Filters — pill badges like home-banner-label */
.courses-page .filter-bar .nav-link{
    background:transparent;
    color:rgba(255,255,255,.6);
    border:1px solid rgba(255,255,255,.2);
    border-radius:999px;
    padding:.4rem 1.2rem;
    font-size:.72rem;
    font-weight:600;
    letter-spacing:.25em;
    text-transform:uppercase;
    transition:all .25s ease;
}
.courses-page .filter-bar .nav-link:hover{
    color:#fff;
    border-color:rgba(255,255,255,.5);
    background:rgba(255,255,255,.08);
}
.courses-page .filter-bar .nav-link.active{
    background:#fff;
    color:#111;
    border-color:#fff;
    box-shadow:0 6px 24px rgba(0,0,0,.3);
}

/* Counter reset on the grid */
.courses-page .row{ counter-reset:course-step; }

/* ===== COURSE CARD — glass-morphism like home-trust-card ===== */
.courses-page .card.course{
    background:rgba(255,255,255,.05) !important;
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    border:1px solid rgba(255,255,255,.1);
    border-radius:16px;
    position:relative;
    overflow:hidden;
    transform:translateZ(0);
    transition:all .3s ease;
    box-shadow:0 8px 30px rgba(0,0,0,.35);
    counter-increment:course-step;
}
.courses-page .card.course:hover{
    background:rgba(255,255,255,.09) !important;
    border-color:rgba(255,255,255,.2);
    transform:translateY(-4px) scale(1.01);
    box-shadow:0 20px 50px rgba(0,0,0,.45);
}

/* Radial gradient overlay — like home-announcement-card::before */
.courses-page .card.course::before{
    content:"";
    position:absolute;
    inset:-40%;
    background:radial-gradient(circle at top left, rgba(255,255,255,.06), transparent 60%);
    opacity:.8;
    pointer-events:none;
    z-index:0;
}
.courses-page .card.course::after{
    display:none !important;
    content:none !important;
}

/* Large faded counter number — like home-dir-number */
.courses-page .card.course .card-body::before{
    content:counter(course-step, decimal-leading-zero);
    position:absolute;
    top:.6rem;
    right:1rem;
    font-size:4rem;
    font-weight:900;
    line-height:1;
    color:rgba(255,255,255,.04);
    letter-spacing:-2px;
    pointer-events:none;
    z-index:0;
}
.courses-page .card.course.hide-price .card-body::before{
    content:none;
}

/* ===== RIBBON — pill badge style ===== */
.courses-page .course__ribbon{
    position:absolute;
    left:1rem;
    top:1rem;
    display:inline-flex;
    align-items:center;
    padding:.3rem .9rem;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.25);
    font-size:.68rem;
    letter-spacing:.15em;
    text-transform:uppercase;
    font-weight:600;
    color:rgba(255,255,255,.7);
    backdrop-filter:blur(6px);
    background:rgba(24,27,32,.7);
    z-index:3;
}
.courses-page .course__ribbon--accent{
    border-color:rgba(255,255,255,.35);
    color:var(--text-bright);
}

/* ===== PRICE — prominent like home-announcement-price ===== */
.courses-page .course__price{
    position:absolute;
    right:1rem;
    top:1rem;
    padding:.4rem .9rem;
    border-radius:10px;
    background:radial-gradient(circle at top left, #f9fafb, #e5e7eb);
    color:#111827;
    font-weight:800;
    font-size:.95rem;
    letter-spacing:.3px;
    box-shadow:0 6px 20px rgba(0,0,0,.35);
    z-index:3;
}

/* ===== CARD BODY ===== */
.courses-page .card.course .card-body{
    position:relative;
    display:flex;
    flex-direction:column;
    gap:.5rem;
    padding:1.5rem 1.5rem 1.4rem;
    padding-top:3.5rem;
    z-index:1;
}

/* Accent divider — like home-banner-divider */
.courses-page .card.course .course__accent-line{
    width:40px;
    height:2px;
    background:linear-gradient(90deg, rgba(255,255,255,.5), rgba(255,255,255,.1));
    border:none;
    margin:0 0 .3rem;
}

/* Content */
.courses-page .card.course .course__content{
    display:flex;
    flex-direction:column;
}
.courses-page .card.course .card-title{
    font-weight:800;
    letter-spacing:.3px;
    color:#fff;
    font-size:1.15rem;
    line-height:1.25;
    margin-bottom:.4rem;
    text-shadow:0 2px 16px rgba(0,0,0,.35);
}
.courses-page .card.course .text-muted{
    color:rgba(255,255,255,.55) !important;
    font-size:.87rem;
    font-weight:500;
    letter-spacing:.2px;
    margin-bottom:.4rem;
    text-shadow:0 1px 6px rgba(0,0,0,.25);
}

/* Feature list — like home-hero-list with separators */
.courses-page .card.course ul{
    margin-bottom:.2rem;
    padding:0;
}
.courses-page .card.course .course__content ul{
    margin-top:0;
}
.courses-page .card.course ul li{
    position:relative;
    padding-left:1.4rem;
    padding-bottom:.5rem;
    margin-bottom:.5rem;
    color:rgba(255,255,255,.75);
    word-wrap:break-word;
    overflow-wrap:anywhere;
    font-weight:400;
    font-size:.9rem;
    line-height:1.5;
    letter-spacing:.2px;
    border-bottom:1px solid rgba(255,255,255,.06);
    text-shadow:0 1px 8px rgba(0,0,0,.3);
}
.courses-page .card.course ul li:last-child{
    border-bottom:none;
    margin-bottom:0;
    padding-bottom:0;
}
.courses-page .card.course ul li::before{
    content:"";
    position:absolute;
    left:0;
    top:.45rem;
    width:6px;
    height:6px;
    border-radius:50%;
    background:rgba(255,255,255,.45);
    box-shadow:0 0 6px rgba(255,255,255,.2);
}

/* Title/description alignment on desktop */
@media (min-width: 992px){
    .courses-page .card.course .course__content .card-title{
        min-height:3rem;
    }
    .courses-page .card.course .course__content .text-muted{
        min-height:1.6rem;
    }
}

/* ===== CTA BUTTONS — like home-btn-primary / home-btn-ghost ===== */
.courses-page .card.course .course__cta{
    margin-top:auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:.75rem;
    width:100%;
    padding-top:.6rem;
}
@media (min-width:768px) and (max-width:991.98px){
    .courses-page .card.course .course__cta{
        grid-template-columns:1fr;
    }
}
@media (min-width:1200px) and (max-width:1399.98px){
    .courses-page .card.course .course__cta{
        grid-template-columns:1fr;
    }
}

/* Primary — white like home-btn-primary */
.courses-page .btn-enroll{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:42px;
    padding:0 18px;
    width:100%;
    min-width:0;
    border-radius:10px;
    font-size:.82rem;
    font-weight:600;
    letter-spacing:.5px;
    text-transform:uppercase;
    text-decoration:none;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    color:#111;
    background:#fff;
    border:none;
    box-shadow:0 6px 24px rgba(0,0,0,.3);
    transition:all .25s ease;
}
.courses-page .btn-enroll:hover{
    background:#f0f0f0;
    color:#111;
    transform:translateY(-2px);
    box-shadow:0 10px 32px rgba(0,0,0,.4);
}
.courses-page .btn-enroll:active{
    background:#e5e5e5;
    transform:translateY(0);
    box-shadow:0 4px 12px rgba(0,0,0,.3);
}

/* Secondary — ghost like home-btn-ghost */
.courses-page .btn-details{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:42px;
    padding:0 18px;
    width:100%;
    min-width:0;
    border-radius:10px;
    font-size:.82rem;
    font-weight:500;
    letter-spacing:.3px;
    text-transform:uppercase;
    text-decoration:none;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    color:rgba(255,255,255,.85);
    background:transparent;
    border:1px solid rgba(255,255,255,.25);
    text-shadow:0 2px 10px rgba(0,0,0,.5);
    transition:all .25s ease;
}
.courses-page .btn-details:hover{
    color:#fff;
    border-color:rgba(255,255,255,.5);
    background:rgba(255,255,255,.08);
    transform:translateY(-2px);
}
.courses-page .btn-details:active{
    transform:translateY(0);
    background:rgba(255,255,255,.1);
}

/* Focus */
.courses-page .btn-enroll:focus-visible,
.courses-page .btn-details:focus-visible{
    outline:3px solid var(--accent);
    outline-offset:2px;
}

/* A11y */
.courses-page .card.course:focus-visible{
    outline:0;
    box-shadow:
        0 14px 32px rgba(0,0,0,.48),
        0 0 0 3px var(--card-ring-alpha);
}
.courses-page .course-card[hidden]{ display:none !important; }

@media (prefers-reduced-motion:reduce){
    .courses-page .card.course,
    .courses-page .btn-enroll,
    .courses-page .btn-details{
        transition:none !important;
    }
}

/* ===== ENROLL MODAL ===== */
.course-details .form-control,
.course-details .form-select,
.course-details textarea{
    font-size:16px;
}

@media (max-width:575.98px){
    .course-details .btn.btn-dark{
        height:44px;
        padding:0 16px;
        font-size:0.95rem;
        border-radius:12px;
    }
    .course-details .form-control,
    .course-details .form-select{ height:44px; }
    .course-details textarea{ min-height:110px; }
}

/* iOS safe area */
@supports(padding:max(0px)){
    .course-details{
        padding-left:  max(0px, env(safe-area-inset-left));
        padding-right: max(0px, env(safe-area-inset-right));
        padding-top:   max(0px, env(safe-area-inset-top));
        padding-bottom:max(0px, env(safe-area-inset-bottom));
    }
}

/* Cap grid on ultra-wide */
@media (min-width:1400px){
    .courses-page > .container > .row{
        max-width:1200px;
        margin-left:auto;
        margin-right:auto;
    }
}

/* Mobile adjustments */
@media (max-width:768px){
    .courses-page .card.course .card-title{
        font-weight:700;
        font-size:1.05rem;
    }
    .courses-page .card.course .card-body::before{
        font-size:3rem;
    }
}