/* Inspirations Carousel Styles */
.inspirations-carousel {
    background: #ffffff;
}

.inspirations-swiper {
    padding: 20px 0;
}

/* Metadata appearance - Caché par défaut */
.slide-metadata {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

/* Affiché uniquement pour la slide active */
.swiper-slide-active .slide-metadata {
    opacity: 1 !important;
    visibility: visible;
    pointer-events: auto;
}

/* Image scaling */
.inspiration-image-container {
    transform: scale(1);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.6s ease;
}

.swiper-slide-active .inspiration-image-container {
    transform: scale(1) !important;
    z-index: 100;
}
.swiper-slide .inspiration-image-container {
    transform: scale(0.8);
    z-index: 100;
}

/* Custom Navigation */
.swiper-prev-custom, .swiper-next-custom {
    color: #008992; /* secondary from tailwind.config */
    cursor: pointer;
    transition: all 0.3s ease;
}

.swiper-prev-custom:hover, .swiper-next-custom:hover {
    color: #33738C; /* primary */
    transform: scale(1.2);
}

/* Select styling */
#category-filter {
    background-image: none;
}

#category-filter option {
    background: white;
    color: #33738C;
}

/* Serif font specific weight/style */
.inspirations-carousel font-serif {
    font-family: "Zilla Slab", serif;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .swiper-slide-active .inspiration-image-container {
        transform: scale(1.05) !important;
    }
    
    .slide-metadata {
        height: auto;
        min-height: 100px;
    }
    
    .slide-metadata h3 {
        font-size: 1.25rem;
    }
}

/* Hide Swiper default buttons just in case they are injected */
.swiper-button-next, .swiper-button-prev {
    display: none !important;
}

.video-container {
overflow: hidden;
position: relative;
width:100%;
}

.video-container::after {
padding-top: 56.25%;
display: block;
content: '';
}

.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}