/**
 * Frontend CSS untuk Carousel Infografis
 */

/* Container utama */
.carousel-infografis-container {
    max-width: 100%;
    margin: 30px 0;
    position: relative;
}

/* Judul */
.carousel-infografis-title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
    text-align: center;
    color: #333;
}

/* Swiper container */
.carousel-infografis-swiper {
    width: 100%;
    padding-bottom: 40px; /* Ruang untuk pagination */
}

/* Slide - FORCE FLEX */
.carousel-infografis-slide {
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important;
    transition: transform 0.3s ease !important;
    height: auto !important;
    background-color: #fff !important;
}

.carousel-infografis-slide:hover {
    transform: translateY(-5px);
}

/* Image container with explicit order 1 */
.carousel-infografis-image-container {
    order: 1 !important;
    position: relative !important;
    width: 100% !important;
    overflow: hidden !important;
    border-radius: 8px 8px 0 0 !important;
    background-color: #f5f5f5 !important;
}

.carousel-infografis-slide-link {
    display: block !important;
    text-decoration: none !important;
    color: inherit !important;
}

.carousel-infografis-image {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.4s ease !important;
}

.carousel-infografis-slide:hover .carousel-infografis-image {
    transform: scale(1.03) !important;
}

/* Caption with explicit order 2 */
.carousel-infografis-caption {
    order: 2 !important;
    width: 100% !important;
    padding: 15px !important;
    background-color: #fff !important; /* White background */
    border-radius: 0 0 8px 8px !important;
    box-sizing: border-box !important;
    margin-top: 0 !important; /* Remove any margin that might cause issues */
    border-top: 1px solid #f0f0f0 !important; /* Add separator line */
    min-height: 60px !important; /* Ensure consistent height for captions */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important; /* Ensure position is relative for stacking context */
    z-index: 5 !important; /* Ensure above the image */
}

/* Navigation buttons - style like in the image */
.carousel-infografis-swiper .swiper-button-next,
.carousel-infografis-swiper .swiper-button-prev {
    color: white !important;
    background-color: rgba(0,0,0,0.6) !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    transition: all 0.3s ease !important;
}

.carousel-infografis-swiper .swiper-button-next:after,
.carousel-infografis-swiper .swiper-button-prev:after {
    font-size: 18px !important;
}

.carousel-infografis-swiper .swiper-button-next:hover,
.carousel-infografis-swiper .swiper-button-prev:hover {
    background-color: rgba(0,0,0,0.8) !important;
    transform: scale(1.1) !important;
}

/* Pagination */
.carousel-infografis-swiper .swiper-pagination {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
}

.carousel-infografis-swiper .swiper-pagination-bullet {
    width: 10px !important;
    height: 10px !important;
    background: rgba(0,0,0,0.3) !important;
    transition: all 0.3s ease !important;
}

.carousel-infografis-swiper .swiper-pagination-bullet-active {
    background-color: #007bff !important;
    transform: scale(1.2) !important;
}

/* Pesan notice */
.carousel-infografis-notice {
    padding: 15px !important;
    background-color: #f8d7da !important;
    color: #721c24 !important;
    border: 1px solid #f5c6cb !important;
    border-radius: 4px !important;
    text-align: center !important;
}

/* Responsive */
@media screen and (max-width: 768px) {
    .carousel-infografis-title {
        font-size: 20px !important;
    }
    
    .carousel-infografis-caption {
        padding: 10px !important;
    }
    
    .carousel-infografis-swiper .swiper-button-next,
    .carousel-infografis-swiper .swiper-button-prev {
        width: 35px !important;
        height: 35px !important;
    }
}

@media screen and (max-width: 480px) {
    .carousel-infografis-title {
        font-size: 18px !important;
    }
    
    .carousel-infografis-caption {
        padding: 8px !important;
    }
    
    .carousel-infografis-swiper .swiper-button-next,
    .carousel-infografis-swiper .swiper-button-prev {
        width: 30px !important;
        height: 30px !important;
    }
    
    .carousel-infografis-swiper .swiper-button-next:after,
    .carousel-infografis-swiper .swiper-button-prev:after {
        font-size: 14px !important;
    }
}