/* ==================================================
   PROGRAMS PAGE
================================================== */

.programs-page{
    max-width:1200px;
    margin:0 auto;
    padding:60px 20px 120px;
}


/* ==================================================
   HERO
================================================== */

.programs-hero{
    text-align:center;
    margin-bottom:50px;
}

.programs-hero h1{

    color:var(--text);

    font-size:52px;

    margin-bottom:18px;

}

.programs-hero p{

    max-width:760px;

    margin:auto;

    color:var(--text-light);

    font-size:18px;

    line-height:1.9;

}


/* ==================================================
   CATEGORY FILTER
================================================== */

.program-filter{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:12px;
    margin-bottom:40px;
}

.filter-btn{

    background:#fff;

    color:var(--text);

    border:1px solid var(--border);

    border-radius:999px;

    padding:12px 24px;

    cursor:pointer;

    font-size:15px;

    font-weight:600;

    transition:.3s;

    box-shadow:var(--shadow-sm);

}

.filter-btn:hover{

    background:var(--primary);

    color:#fff;

}

.filter-btn.active{

    background:var(--primary);

    color:#fff;

}


/* ==================================================
   PROGRAM GRID
================================================== */

.program-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,390px);
    justify-content:center;
    gap:36px;
}

/* ==================================================
   PROGRAM CARD
================================================== */

.program-card{

    width:390px;

    background:var(--surface);

    border-radius:28px;

    border:1px solid var(--border);

    overflow:hidden;

    display:flex;

    flex-direction:column;

    transition:.35s;

    box-shadow:var(--shadow-sm);

}

.program-card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow);

}


/* ==================================================
   IMAGE
================================================== */

.program-image{

    width:100%;

    aspect-ratio:16 / 10;

    overflow:hidden;

    background:#F8FAFC;


}

.program-image img{

    display:block;

    width:100%;

    height:100%;

    

}


/* ==================================================
   CONTENT
================================================== */

.program-content{
    padding:30px;
    display:flex;
    flex-direction:column;
    flex:1;
}

.program-category{
    color:var(--primary);
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:2px;
    margin-bottom:16px;
}

.program-title{
    font-size:34px;
    color:var(--text);
    line-height:1.2;
    margin-bottom:18px;
}

.program-description{
    color:var(--text-light);
    line-height:1.9;
    margin-bottom:30px;
    flex:1;
}


/* ==================================================
   INFO ROW
================================================== */

.program-info{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    margin-bottom:24px;
}

.info-box{
    background:#efefef;
    border-radius:10px;
    padding:12px;
}

.info-label{
    display:block;
    font-size:12px;
    color:#666;
    margin-bottom:4px;
}

.info-value{
    font-weight:700;
    color:#000;
}


/* ==================================================
   PROGRAM FOOTER
================================================== */

.program-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:24px;

    padding-top:18px;

    border-top:1px solid #E5E7EB;

}

/* ==================================================
   DURATION
================================================== */

.program-duration{

    display:flex;

    align-items:center;

    gap:8px;

    font-size:15px;

    font-weight:600;

    color:#333;

}

.program-duration i{

    color:var(--primary);

}

/* ==================================================
   ENROLL BUTTON
================================================== */

.enroll-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:12px 22px;

    border-radius:999px;

    background:var(--primary);

    color:#fff;

    text-decoration:none;

    font-size:14px;

    font-weight:600;

    transition:.3s;

    box-shadow:0 8px 20px rgba(37,99,235,.25);

}

.enroll-btn:hover{

    transform:translateY(-3px);

    background:#1D4ED8;

}

/* ==================================================
   PROGRAM FEATURES
================================================== */

.program-features{

    list-style:none;

    margin:24px 0;

    padding:0;

    display:flex;

    flex-direction:column;

    gap:14px;

}

.program-features li{

    display:flex;

    align-items:center;

    gap:12px;

    color:var(--text);

    font-size:15px;

    line-height:1.6;

}

.program-features i{

    color:var(--primary);

    font-size:16px;

    flex-shrink:0;

}
/* ==================================================
   RESPONSIVE
================================================== */

@media (max-width:768px){

    .programs-page{

        padding:40px 18px 90px;

    }

    .programs-hero h1{

        font-size:32px;

    }

    .programs-hero p{

        font-size:15px;

    }

    /* PROGRAM GRID */

    .program-grid{

        grid-template-columns:1fr;

        justify-content:center;

        gap:22px;

    }

    /*PROGRAM CARD */

    .program-card{

        width:100%;

        max-width:360px;

        margin:0 auto;

    }


    .program-image{

        height:200px;

    }

    .program-title{

        font-size:24px;

    }

    .program-info{

        grid-template-columns:1fr;

    }

}