/* Desktop Teacher Card Fix - Make cards match mobile design */

/* Make avatar wrapper more rectangular instead of taking the full card width */
.teacher-card .avatar-wrapper {
    width: 100%;
    height: 180px; /* Reduced height */
    border-radius: 24px 24px 0 0;
    overflow: hidden;
    background: linear-gradient(135deg, #eef1ff 0%, #e0e5ff 100%);
    position: relative;
    padding-top: 15px; /* Reduced padding */
}

/* Make the teacher avatar smaller and properly circular */
.teacher-card .teacher-avatar {
    width: 120px; /* Smaller size */
    height: 120px; /* Smaller size */
    border-radius: 50%; /* Ensure perfect circle */
    margin: 0 auto;
    border: 3px solid white;
    overflow: hidden;
    position: relative;
    box-shadow: 0 4px 8px rgba(67, 77, 234, 0.1);
}

/* Ensure photos fit properly in their containers */
.teacher-card .teacher-avatar img.photo,
.teacher-card .teacher-avatar img.avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Photo display style - keep photo in a rectangular frame */
.teacher-card .teacher-avatar.show-photo {
    border-radius: 16px; /* Less rounded */
    width: 140px; /* Slightly larger on hover */
    height: 140px; /* Maintain aspect ratio */
    transform: scale(1.05);
}

/* Adjust the content section to accommodate the new avatar size */
.teacher-card .card-content {
    padding: 20px 15px;
    width: 100%;
}

/* Improve teacher name and rating styling */
.teacher-card .teacher-name {
    font-size: 1.3rem;
    margin-bottom: 5px;
}

.teacher-card .teacher-rating {
    font-weight: 600;
    font-size: 1.1rem;
    color: #434dea;
    margin-bottom: 8px;
}

/* Make sure the availability badge stands out */
.teacher-card .available-badge {
    font-size: 0.75rem;
    padding: 5px 10px;
}

/* Improve responsiveness for different screen sizes */
@media (min-width: 768px) and (max-width: 991px) {
    .teacher-card .avatar-wrapper {
        height: 160px;
    }
    
    .teacher-card .teacher-avatar {
        width: 110px;
        height: 110px;
    }
    
    .teacher-card .teacher-avatar.show-photo {
        width: 120px;
        height: 120px;
    }
}

/* Better hover animation for desktop */
.teacher-card:hover .teacher-avatar {
    transform: translateY(-5px);
}

/* Ensure the teacher location has proper spacing */
.teacher-card .teacher-location {
    margin-top: 5px;
    font-size: 0.85rem;
}