/* assets/css/style-portal.css */

/* Hero Slider: Full viewport height for dramatic effect */
.hero-slider-container {
    position: relative;
    height: 100vh;
    min-height: 500px;
}
.hero-slider-wrapper {
    height: 100%;
    overflow-x: scroll; 
    scroll-snap-type: x mandatory; 
    display: flex; 
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch; 
    /* Sembunyikan scrollbar di slider (penting untuk tampilan bersih) */
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
.hero-slider-wrapper::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}
.hero-slide {
    flex: 0 0 100%; 
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    scroll-snap-align: start; 
    position: relative;
    background-size: cover; /* Pastikan gambar placehold terlihat baik */
    background-position: center;
    text-align: center; /* Untuk konten slider */
}
.slide-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); 
}
.slider-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    background-color: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(5px);
    padding: 1rem;
    border-radius: 9999px;
    color: white;
    transition: background-color 0.3s;
}
.slider-button:hover {
    background-color: rgba(255, 255, 255, 0.5);
}

/* Lanjut Membaca Section */
.reading-slider-wrapper {
    overflow-x: scroll; 
    scroll-snap-type: x mandatory; 
    display: flex; 
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch; 
    margin: 0 -1rem; 
    padding: 0 1rem;
}
.reading-slide {
    flex: 0 0 100%; 
    scroll-snap-align: start; 
    padding: 1rem; 
}
.book-detail-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    min-height: 400px;
    padding: 1rem;
}
@media (min-width: 768px) {
    .book-detail-grid {
        grid-template-columns: 250px 1fr; 
    }
}

/* FAVORIT BOOK SLIDER STYLES */
.favorite-slider-wrapper {
    overflow-x: scroll; 
    scroll-snap-type: x mandatory; 
    display: flex; 
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch; 
    padding-bottom: 1rem; 
    margin: 0 -1rem; 
    padding-left: 1rem;
    padding-right: 1rem;
}
.favorite-book-card {
    flex: 0 0 45%; /* Show ~2 books on mobile */
    scroll-snap-align: start; 
    margin-right: 1rem; 
    min-width: 150px; 
    height: auto;
}
@media (min-width: 640px) { /* sm */
    .favorite-book-card {
        flex: 0 0 30%; /* Show ~3 books */
    }
}
@media (min-width: 1024px) { /* lg */
    .favorite-book-card {
        flex: 0 0 16.666%; /* Show 6 books, effectively filling the space */
    }
}


/* Gallery */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-auto-rows: 150px; 
    gap: 1rem;
}
.gallery-item {
    overflow: hidden;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}
.gallery-item:hover img {
    transform: scale(1.05);
}
.span-2-row { grid-row: span 2; }
.span-2-col { grid-column: span 2; }
@media (min-width: 768px) {
    .md\:span-2-row { grid-row: span 2; }
    .md\:span-2-col { grid-column: span 2; }
}

/* ANIMASI SCROLL FADE IN */
.animate-fade-in {
    opacity: 0;
    transition: opacity 1s ease-out, transform 0.8s ease-out;
    transform: translateY(20px); 
}

.animate-fade-in.is-visible {
    opacity: 1;
    transform: translateY(0); 
}

/* KOREKSI: Memperbaiki Fungsionalitas Slider Mobile */
@media (max-width: 1023px) {
    .mobile-hero-slider-wrapper {
        display: flex;
        overflow-x: scroll; 
        scroll-snap-type: x mandatory; 
    }
    .mobile-hero-slide {
        flex: 0 0 100%; 
        scroll-snap-align: start;
    }
}