/* Start custom CSS for html, class: .elementor-element-f2cf0a2 *//* Container utama menggunakan Grid */
.lecturer-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Default 3 kolom */
    gap: 30px; /* Jarak antar card sedikit diperlebar agar lebih lega */
    width: 100%;
    margin-top: 20px;
}

/* Desain Card Utama */
.card {
    background: #ffffff;
    border: 1px solid #eee; /* Border diperhalus warnanya */
    border-radius: 20px;
    /* overflow: hidden memastikan foto persegi di atas mengikuti lengkungan card ini */
    overflow: hidden; 
    display: flex;
    flex-direction: column;
    /* Tambahan shadow halus agar card terlihat "mengambang" */
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Untuk efek hover */
}

/* Efek Hover pada Card (Tambahan opsional agar interaktif) */
.card:hover {
    transform: translateY(-5px); /* Card naik sedikit saat disorot */
    box-shadow: 0 8px 25px rgba(0,0,0,0.1); /* Shadow menggelap */
}

/* Area Gambar (Frame Foto 1:1) */
.card-img {
    width: 100%;
    /* FITUR KUNCI: Membuat rasio lebar:tinggi selalu 1:1 (persegi sempurna) */
    aspect-ratio: 1 / 1; 
    background-position: center center;
    background-size: cover;
    border-bottom: 1px solid #eee; /* Garis pembatas halus antara foto dan teks */
    border-radius: 12px;
}

/* Area Konten (Teks & Tombol) */
.card-body {
    padding: 25px; /* Padding sedikit diperlebar agar teks tidak terlalu padat */
    flex-grow: 1; /* Mengisi sisa ruang card */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Menjaga tombol selalu di bagian bawah card */
}

.card-info-wrap {
    /* Container pembungkus teks agar jarak ke tombol konsisten */
    margin-bottom: 20px;
}

.card-name {
    font-weight: bold;
    font-size: 18px;
    color: #00529b;
    margin-bottom: 10px;
    line-height: 1.3;
}

.card-divider {
    width: 40px;
    height: 3px; /* Sedikit ditebalkan */
    background: #00529b;
    margin-bottom: 15px;
}

.card-expertise-label {
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 5px;
    display: block;
}

.card-expertise-text {
    font-size: 14px;
    color: #555; /* Warna teks diperhalus sedikit */
    line-height: 1.5;
}

.card-btn {
    display: inline-block;
    padding: 12px 24px; /* Padding tombol diperbaiki */
    background: #0075c9;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px; /* Sedikit diperbesar agar mudah dibaca */
    border-radius: 6px; /* Lengkungan tombol diperbaiki */
    transition: background 0.3s ease;
    text-align: center; /* Memastikan teks tombol di tengah */
}

.card-btn:hover {
    background: #00529b; /* Efek hover pada tombol */
}

/* --- Responsif (Media Queries) --- */

/* Layar Desktop Kecil / Tablet Landscape (Contoh: < 1200px) */
@media (max-width: 1199px) {
    .lecturer-grid {
        gap: 20px;
    }
    .card-body {
        padding: 20px;
    }
}

/* Layar Tablet Portrait (Contoh: < 992px) - Menjadi 2 Kolom */
@media (max-width: 991px) {
    .lecturer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Layar HP (Contoh: < 576px) - Menjadi 1 Kolom */
@media (max-width: 575px) {
    .lecturer-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
}/* End custom CSS */