/* =================================================
   CSS cho Plugin Teacher Manager (Diễn giả)
   Version: 2.8
   ================================================= */

/* 1. Bố cục lưới 4 cột (Yêu cầu của bạn) */
.teacher-list-grid {
    display: grid;
    /* Chia làm 4 cột bằng nhau */
    grid-template-columns: repeat(4, 1fr);
    /* Khoảng cách giữa các card */
    gap: 20px;
    margin: 20px 0;
}

/* 2. CSS cho từng Card Diễn giả */
.teacher-card {
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden; /* Để bo góc cho ảnh */
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.teacher-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.teacher-card a {
    text-decoration: none;
    color: inherit;
    display: block;
}

.teacher-img img {
    width: 100%;
    height: auto;
    /* Ép ảnh theo tỷ lệ vuông (1:1), bạn có thể đổi thành 4 / 3 nếu muốn */
    aspect-ratio: 1 / 1; 
    object-fit: cover; /* Đảm bảo ảnh lấp đầy khung mà không bị méo */
    display: block;
    border-bottom: 1px solid #eee;
}

.teacher-info {
    padding: 15px;
}

.teacher-name {
    font-size: 1.2em;
    font-weight: 700;
    margin: 0 0 5px 0;
    color: #333;
}

/* 3. CSS cho Chức danh (Đã thêm) */
.teacher-position {
    font-size: 0.9em;
    color: #e91e63; /* Màu hồng hoặc màu thương hiệu của bạn */
    margin: 0 0 10px 0;
    font-style: italic;
    font-weight: 500;
}

.teacher-quote {
    font-size: 0.9em;
    color: #555;
    margin: 0 0 15px 0;
    /* Giới hạn 2 dòng */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 2.7em; /* Chiều cao tối thiểu cho 2 dòng */
}

.teacher-link {
    font-size: 0.9em;
    font-weight: 700;
    color: #0066ff; /* Màu xanh link */
}

/* 4. CSS Animation (Lấy từ file PHP) */
.teacher-card {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.teacher-card.animate-in {
    opacity: 1;
    transform: translateY(0);
}

/* 5. CSS Responsive (Rất quan trọng) */

/* Cho máy tính bảng (ví dụ: < 1024px) - 3 cột */
@media (max-width: 1024px) {
    .teacher-list-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Cho máy tính bảng nhỏ (ví dụ: < 768px) - 2 cột */
@media (max-width: 768px) {
    .teacher-list-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    .teacher-info {
        padding: 10px;
    }
}

/* Cho điện thoại (ví dụ: < 480px) - 1 cột */
@media (max-width: 480px) {
    .teacher-list-grid {
        grid-template-columns: 1fr;
    }
}

/* =================================================
   CSS cho trang Chi tiết Diễn giả (Teacher Detail)
   ================================================= */

.teacher-detail-container {
    max-width: 1100px; /* Giới hạn chiều rộng, dễ đọc hơn */
    margin: 40px auto; /* Căn giữa và tạo khoảng cách trên/dưới */
    padding: 30px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

.teacher-detail-layout {
    display: flex;
    flex-wrap: wrap; /* Cho phép xuống hàng trên mobile */
    gap: 40px; /* Khoảng cách giữa ảnh và thông tin */
}

.teacher-detail-img {
    flex: 1 1 300px; /* Kích thước cơ bản 300px, có thể co/giãn */
    min-width: 250px; /* Không bị co lại quá nhỏ */
}

.teacher-detail-img img {
    width: 100%;
    height: auto;
    border-radius: 8px; /* Bo góc ảnh */
    object-fit: cover;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.teacher-detail-info {
    flex: 2 1 500px; /* Ưu tiên 2 phần không gian cho thông tin */
}

.teacher-detail-title {
    font-size: 2.5em; /* Tiêu đề to, rõ ràng */
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 5px;
    color: #222;
    line-height: 1.2;
}

.teacher-detail-position {
    font-size: 1.2em;
    font-weight: 500;
    font-style: italic;
    color: #e91e63; /* Giống màu chức danh ở trang danh sách */
    margin-top: 0;
    margin-bottom: 25px;
    display: block;
}

.teacher-detail-section {
    font-size: 1em;
    font-weight: 700;
    background: #f4f4f4;
    padding: 10px 15px;
    border-radius: 5px;
    margin-bottom: 25px;
    color: #333;
}

.teacher-detail-content {
    font-size: 1em;
    line-height: 1.7; /* Tăng dãn dòng cho dễ đọc */
    color: #444;
}

.teacher-detail-content p {
    margin-bottom: 1.5em;
}

.teacher-detail-content h2,
.teacher-detail-content h3,
.teacher-detail-content h4 {
    margin-top: 2em;
    margin-bottom: 0.5em;
    font-weight: 700;
    color: #333;
}

/* Responsive cho trang chi tiết */
@media (max-width: 768px) {
    .teacher-detail-container {
        margin: 20px 15px;
        padding: 20px;
    }

    .teacher-detail-layout {
        flex-direction: column; /* Xếp chồng 2 cột */
    }

    .teacher-detail-img {
        flex-basis: auto;
        width: 100%;
        max-width: 350px; /* Giới hạn chiều rộng ảnh */
        margin: 0 auto 20px; /* Căn giữa ảnh */
    }

    .teacher-detail-info {
        flex-basis: auto;
        width: 100%;
    }

    .teacher-detail-title {
        font-size: 2em; /* Giảm kích thước tiêu đề trên mobile */
    }

    .teacher-detail-position {
        font-size: 1.1em;
    }
}