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

.teacher-grid{

    display:grid;

    grid-template-columns:
        repeat(auto-fill,minmax(320px,1fr));

    gap:24px;

    padding-bottom:80px;
}

.teacher-card{

    max-width: 350px;

    background:white;

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

    border-radius:24px;

    overflow:hidden;

    box-shadow:var(--shadow);

    transition:var(--transition);
}

.teacher-card:hover{

    transform:translateY(-5px);
}

.teacher-cover{

    height:90px;

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

.teacher-content{

    padding:0 24px 24px;
}

.teacher-avatar{

    width:90px;

    height:90px;

    border-radius:50%;

    background:white;

    border:4px solid white;

    margin-top:-45px;

    margin-bottom:14px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:28px;

    font-weight:700;

    color:var(--primary);

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

.teacher-name{

    font-size:22px;

    margin-bottom:6px;
}

.teacher-role{

    color:var(--text-light);

    font-size:14px;

    margin-bottom:16px;
}

.teacher-bio{

    color:var(--text-light);

    font-size:14px;

    line-height:1.7;

    margin-bottom:18px;
}

.teacher-meta{

    display:flex;

    gap:24px;

    margin-bottom:20px;

    padding-top:18px;

    border-top:1px solid #f1f5f9;
}

.teacher-meta div{

    display:flex;

    flex-direction:column;
}

.teacher-meta strong{

    font-size:18px;
}

.teacher-meta span{

    font-size:12px;

    color:var(--text-light);
}

.btn {
    width: 100%;
}

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

@media(max-width:768px){

    .teacher-grid{
        grid-template-columns:1fr;
    }

}