/*
|--------------------------------------------------------------------------
| STYLING KHUSUS UNTUK HALAMAN KATEGORI (FIXED MOBILE ISSUES)
|--------------------------------------------------------------------------
*/

/* --- BAGIAN UMUM (Berlaku untuk Semua Layar) --- */

#koleksi-buku-karakter {
    padding-top: 30px !important; 
    padding-bottom: 5rem;
}

/* Memastikan Judul H1 bisa multibaris */
#koleksi-buku-karakter h1 {
    white-space: normal !important; 
    overflow: visible !important; 
    text-overflow: clip !important; 
    font-size: 2.7rem; 
}

/* Styling Horizontal Scroll */
.horizontal-scroll-row {
    overflow-x: scroll; 
    overflow-y: hidden;
    white-space: nowrap; 
    padding-bottom: 20px; 
    margin-bottom: 20px;
    -webkit-overflow-scrolling: touch; 
}
.horizontal-scroll-row .col {
    display: inline-block; 
    float: none;
    width: 250px; 
    margin-right: 15px; 
    padding: 0; 
}

/* FIX: TINGGI CARD TIDAK STABIL (BERLAKU DI SEMUA LAYAR) */
.buku-item {
    transition: transform 0.3s, box-shadow 0.3s;
    border: none;
    border-radius: 12px;
    /* Jamin tinggi 100% dari kolom induk */
    height: 100%; 
    display: flex; 
    flex-direction: column; 
    white-space: normal;
}

.buku-item .img-cover {
    height: 350px; /* Tinggi Cover Desktop */
    object-fit: cover; 
    object-position: top; 
    width: 100%;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

/* JAMINAN TINGGI CARD BODY SAMA */
.buku-item .card-body {
    text-align: center;
    padding: 15px;
    display: flex;
    flex-direction: column;
    /* Memisahkan Judul dan Tombol */
    justify-content: space-between; 
    /* Min-height Card Body Desktop */
    min-height: 130px; 
}

/* JAMINAN TINGGI JUDUL CARD SAMA (Maksimal 2 Baris) */
.buku-item .card-title {
    /* Minimum tinggi agar judul pendek tidak membuat card menyusut */
    min-height: 48px; 
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Batasi maksimal 2 baris */
    -webkit-box-orient: vertical;
    white-space: normal; 
    margin-bottom: 10px; 
    font-size: 1rem;
}

/* --- BAGIAN MOBILE FIXES (@media max-width: 575.98px) --- */
@media (max-width: 575.98px) {
    
    /* FIX 1: CARD MEPET KE TEPI (PADDING) */
    
    /* Tambahkan padding ke container utama (Memberi ruang di tepi layar) */
    #koleksi-buku-karakter .container {
        padding-left: 15px !important; 
        padding-right: 15px !important;
    }
    
    /* Kompensasi padding container ke horizontal-scroll-row agar card tidak bergeser */
    .horizontal-scroll-row {
        /* Tarik ke luar agar lebar scroll penuh */
        margin-left: -15px !important; 
        margin-right: -15px !important; 
        
        /* Tambahkan padding di dalam scroll-row agar card pertama/terakhir punya ruang */
        padding-left: 15px; 
        padding-right: 15px;
    }
    
    /* Aturan untuk item buku di mobile */
    .horizontal-scroll-row .col {
        width: 180px; /* Lebar lebih kecil untuk mobile */
        margin-right: 10px; 
        margin-left: 0 !important; 
    }
    
    /* FIX 2: TINGGI CARD TIDAK STABIL DI MOBILE */
    
    .buku-item .img-cover {
        height: 280px; /* Tinggi Cover Mobile yang proporsional */
    }
    
    .buku-item .card-body {
        min-height: 110px; /* Min-height Card Body Mobile */
        padding: 10px;
    }
    
    .buku-item .card-title {
        min-height: 40px; /* Min-height Judul Card Mobile (untuk 2 baris) */
        font-size: 0.85rem;
    }
    
    /* Tambahan fix agar Judul H1 tidak terpotong */
    #koleksi-buku-karakter h1 {
        font-size: 24px !important; 
        line-height: 1.2; 
        text-align: center;
    }
}