/* Teacher Directory Styles */

/* ১. আপনার ডিপার্টমেন্ট কোড অনুযায়ী কন্টেইনার পজিশন */
.teacher-directory-wrapper {
    margin-top: -85px; 
    position: relative;
    z-index: 10;
}

/* ২. আপনার ডিপার্টমেন্ট কোড অনুযায়ী এমটি বক্স (dept-card) স্টাইল */
.dept-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 50px 25px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    border: none;
    width: 100%;
}

/* ৩. শিক্ষক কার্ডের নিজস্ব ডিজাইন */
.teacher-grid-card {
    background: #ffffff;
    border-radius: 15px;
    border: none !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.06);
    overflow: hidden;
    transition: 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.teacher-grid-card:hover { 
    transform: translateY(-8px); 
    box-shadow: 0 12px 35px rgba(0,0,0,0.12); 
}

.teacher-img-wrapper { 
    width: 100%; 
    aspect-ratio: 1/1; 
    overflow: hidden; 
    background: #f1f5f9; 
}

.teacher-img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    transition: 0.5s ease; 
}
.teacher-grid-card:hover .teacher-img { 
    transform: scale(1.1); 
}

/* 🟢 FIX: CSS Variable with color-mix 🟢 */
.demo-img-box { 
    width: 100%; 
    height: 100%; 
    color: var(--primary-color); 
    background: color-mix(in srgb, var(--primary-color) 8%, transparent); 
}

.teacher-name { 
    font-size: 15px; 
    font-weight: 700; 
    color: #1f2937; 
}

.teacher-role { 
    font-size: 12px; 
    font-weight: 600; 
    color: var(--primary-color); 
}

.dept-capsule { 
    display: inline-block; 
    background: #f8fafc; 
    color: #64748b; 
    font-size: 10px; 
    font-weight: 700; 
    padding: 4px 12px; 
    border-radius: 50px; 
    border: 1px solid #e2e8f0; 
}

/* ৫ কলাম করার জন্য বুটস্ট্র্যাপ কাস্টম ক্লাস */
@media (min-width: 1200px) {
    .col-xl-2-4 { 
        width: 20%; 
        flex: 0 0 20%; 
    }
}

@media (max-width: 768px) {
    .teacher-directory-wrapper { 
        margin-top: -50px; 
    }
}