/* ===========================================
   Venue Card Carousel (VCC)
   Carrousel photos sur les vignettes de listing
   =========================================== */

/* Conteneur principal */
.vcc-carousel {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
}

/* Track : contient tous les slides côte à côte */
.vcc-track {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.35s ease-in-out;
}

/* Chaque slide */
.vcc-slide {
    min-width: 100%;
    width: 100%;
    flex-shrink: 0;
}

.vcc-slide .sdf-venue-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 16 / 9;
}

/* ---- Flèches de navigation ---- */
.vcc-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    color: #333;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.vcc-arrow:hover {
    background: rgba(255, 255, 255, 1);
}

.vcc-arrow--prev {
    left: 8px;
}

.vcc-arrow--next {
    right: 8px;
}

/* Desktop : flèches visibles au hover de la carte */
.sdf-venue-card:hover .vcc-arrow {
    opacity: 1;
}

/* Mobile : flèches toujours visibles (cohérence avec la page détail) */
@media (hover: none) and (pointer: coarse) {
    .vcc-arrow {
        opacity: 1;
    }
}

/* ---- Indicateurs (dots) ---- */
.vcc-dots {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 5px;
    z-index: 5;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.vcc-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    transition: background 0.2s ease, transform 0.2s ease;
    cursor: pointer;
}

.vcc-dot--active {
    background: #fff;
    transform: scale(1.2);
}

/* Desktop : dots visibles au hover */
.sdf-venue-card:hover .vcc-dots {
    opacity: 1;
}

/* Mobile : dots toujours visibles */
@media (hover: none) and (pointer: coarse) {
    .vcc-dots {
        opacity: 1;
    }
}