/* C:\Users\Rama\padelon\public\css\menu.css */

.menu-card {
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden;
    transition: box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 3px solid #e0e0e0; /* Border tipis */
}

.menu-card:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    transform: translateY(-5px); 
    border-color: #c1c1c1; /* Sedikit gelap saat hover */
}

/* WADAH GAMBAR: Menggunakan padding-top untuk rasio aspek 4:3 */
.menu-img-wrapper {
    width: 100%;
    /* Menggunakan padding-top 75% untuk rasio 4:3 (Tinggi 75% dari Lebar) */
    padding-top: 75%; 
    height: 0; /* Setel height ke 0 agar padding-top yang mengontrol tinggi */
    position: relative; /* Diperlukan untuk position: absolute pada gambar */
    overflow: hidden;
    border-radius: 12px 12px 0 0; 
    background-color: #f0f0f0; /* Latar belakang untuk area kosong */
}

/* GAMBAR ITU SENDIRI */
.menu-img {
    /* Posisikan gambar secara absolut di dalam wrapper */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* 🔥 PERBAIKAN: Mengatur agar SELURUH gambar terlihat (tidak terpotong) */
    object-fit: contain; 
    
    transition: transform 0.4s ease;
}

.menu-card:hover .menu-img {
    /* Transformasi scale saat hover tetap dipertahankan */
    transform: scale(1.05); /* Sedikit diubah agar lebih halus pada contain */
}

.menu-name {
    color: #004225;
    font-weight: 700;
    font-size: 1.1rem;
}

.menu-price {
    font-size: 1rem;
}

@media (max-width: 768px) {
    /* Hapus penyesuaian height 150px karena sekarang menggunakan padding-top */
    /* .menu-img-wrapper {
        height: 150px;
    } */
    .menu-card {
        border-radius: 10px;
    }
}

/* ===== NEW: HORIZONTAL SCROLL FOR MOBILE ===== */
.horizontal-scroll-container {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 1.5rem; /* Menyesuaikan dengan g-4 */
    padding-bottom: 1rem; /* Memberi ruang di bawah scrollbar */
}

/* Mengatur agar item tidak mengecil di mobile */
.menu-item-scroll {
    flex: 0 0 auto;
    width: 50%; /* Menampilkan 2 menu per baris di mobile */
}

/* Media query yang sudah ada */
@media (min-width: 768px) {
    .menu-item-scroll {
        width: 33.333%;
    }
}
@media (min-width: 992px) {
    .menu-item-scroll {
        width: 25%;
    }
}


/* Sembunyikan scrollbar di browser tertentu */
.horizontal-scroll-container::-webkit-scrollbar {
    display: none;
}
.horizontal-scroll-container {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}