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

.course-grid{
    display:grid;
    gap:20px;
}

.course-grid{
    grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
    padding-bottom:20px;
    justify-content:start;
}

/* Teacher */
.course-grid--teacher{
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    padding-bottom:0;
    justify-content:stretch;
}


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

.course-card{

    background:white;

    border-radius:20px;

    overflow:hidden;

    border:1px solid #eef2f7;

    transition:.25s ease;

    box-shadow:
        0 4px 14px rgba(15,23,42,.04);

    max-width: 300px;
}

.course-card:hover{

    transform:translateY(-4px);

    box-shadow:
        0 18px 36px rgba(15,23,42,.08);
}   

.course-card--fill{
    display:flex;
    flex-direction:column;
    height:100%;
}
 
.course-card--fill .course-content{
    display:flex;
    flex-direction:column;
    flex:1;
}
 
.course-card--fill .course-footer{
    margin-top:auto;
}


/* =========================================================
   THUMBNAIL
========================================================= */

.course-thumbnail{

    position:relative;

    height:150px;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #60a5fa
        );
}

.course-thumbnail__img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
}


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

.course-category{

    position:absolute;

    top:14px;
    left:14px;

    padding:6px 12px;

    border-radius:999px;

    background:rgba(255,255,255,.18);

    backdrop-filter:blur(10px);

    color:white;

    font-size:10px;

    font-weight:600;
}


/* =========================================================
   REMOVE BUTTON
========================================================= */

.course-save{

    position:absolute;

    top:12px;
    right:12px;

    width:34px;
    height:34px;

    border:none;

    border-radius:50%;

    background:rgba(255,255,255,.18);

    backdrop-filter:blur(10px);

    color:white;

    font-size:15px;

    cursor:pointer;

    transition:.25s ease;
}

.course-save:hover{

    background:white;

    color:#ef4444;
}

.course-save.active {
    color: red;
    transform: scale(1.1);
}


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

.course-content{

    padding:18px;
}

.course-level {
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 4px;
}


/* =========================================================
   TITLE
========================================================= */

.course-title{

    font-size:18px;

    line-height:1.4;

    margin-bottom:8px;

    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.course-description{

    font-size:12px;

    line-height:1.8;

    color:#64748b;

    margin-bottom:14px;

    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}


/* =========================================================
   STATS
========================================================= */

.course-stats{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    padding-bottom:14px;

    margin-bottom:14px;

    border-bottom:1px solid #f1f5f9;
}

.stats-item{

    font-size:11px;

    color:#64748b;

    display:flex;
    align-items:center;

    gap:4px;
}


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

.course-footer{

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:12px;
}

/* =========================================================
   BADGE
========================================================= */

.course-status-badge{
 
    position:absolute;
 
    top:12px;
    right:12px;
 
    padding:5px 10px;
 
    border-radius:999px;
 
    font-size:9.5px;
 
    font-weight:700;
 
    color:white;
 
    letter-spacing:.2px;
}
 
.course-status-badge.status-published{
    background:var(--success);
}
 
.course-status-badge.status-draft{
    background:var(--text-light);
}
 
.course-status-badge.status-pending{
    background:var(--warning);
}

/* =========================================================
   TEACHER
========================================================= */

.teacher{

    display:flex;
    align-items:center;

    gap:8px;
}

.teacher-avatar{

    width:36px;
    height:36px;

    border-radius:50%;

    object-fit:cover;
}

.teacher-name{

    font-size:12px;

    font-weight:600;

    margin-bottom:2px;
}

.teacher-role{

    font-size:10px;

    color:#64748b;
}


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

.btn-course {

    height:36px;

    max-width: 80px;

    padding:0 14px;

    border-radius:10px;

    font-size:12px;

    font-weight:600;

    display:flex;
    align-items:center;
    justify-content:center;

    transition:.25s ease;
    cursor: pointer;
}

.btn-course--full{
    width:100%;
    height:34px;
    max-width:none;
}

.course-search{
    position:relative;
    max-width:360px;
    margin-bottom:16px;
}
 
.course-search .icon{
    position:absolute;
    left:15px;
    top:50%;
    transform:translateY(-50%);
    color:var(--text-light);
}
 
.course-search input{
    width:100%;
    height:46px;
    padding:0 16px 0 44px;
    border:1px solid var(--border);
    border-radius:14px;
    font-size:14px;
    background:white;
    box-shadow:var(--shadow-sm);
    transition:var(--transition);
}
 
.course-search input:focus{
    border-color:var(--primary);
}
 
.course-search input::placeholder{
    color:#94a3b8;
}

.course-card--hero{
    background:white;
    border-radius:20px;
    overflow:hidden;
    border:1px solid #eef2f7;
    box-shadow:0 4px 14px rgba(15,23,42,.04);
    max-width:none;
}

.course-thumbnail--lg{
    height:200px;
}

.course-content--lg{
    padding:28px;
}

/* EXTEND: status baru hasil aksi Archive */
.course-status-badge.status-archived{
    background:var(--text-light);


/* =========================================================
   EMPTY STATE
========================================================= */

/* .empty-state{

    background:white;

    border:1px solid #eef2f7;

    border-radius:28px;

    padding:56px 32px;

    text-align:center;

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

    width: 100%;

    margin:0 auto;
}

.empty-icon{

    font-size:48px;

    margin-bottom:16px;

    line-height:1;
}

.empty-title{

    font-size:28px;

    font-weight:700;

    margin-bottom:12px;
}

.empty-text{

    color:#64748b;

    line-height:1.8;

    max-width:500px;

    margin:0 auto 28px;
}

.empty-action{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:14px 22px;

    border-radius:14px;

    background:var(--primary);

    color:white;

    text-decoration:none;

    font-weight:600;

    transition:.2s;
}

.empty-action:hover{

    transform:translateY(-2px);
}

.empty-icon svg{
    width:44px;
    height:44px;
    color:#cbd5e1;
} */


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:768px){

    .course-title{

        font-size:40px;
    }


    .course-heading{

        font-size:42px;
    }

    .course-filter-wrapper{

        flex-direction:column;

        align-items:stretch;
    }

    .course-sort{

        width:100%;
    }


}

@media(max-width:600px){

    .container{

        padding:0 18px;
    }

    .course-grid{

        grid-template-columns:1fr;
    }

}