/* style-v3.css */

/* 1. ZÁKLADNÍ NASTAVENÍ (DESKTOP - 5 položek) */
.custom-carousel-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 100%;
    margin: 20px 0;
}

.carousel-container {
    overflow: hidden; 
    width: 100%;
    margin: 0 40px; /* Místo pro šipky */
}

.carousel-track {
    display: flex;
    gap: 10px; /* Mezera mezi položkami */
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
}
.carousel-track::-webkit-scrollbar { 
    display: none;
}

/* Výpočet pro 5 položek (Desktop) */
.carousel-item {
    /* 100% šířky minus 4 mezery po 10px (40px), to celé děleno 5 */
    flex: 0 0 calc((100% - 40px) / 5);
    aspect-ratio: 300 / 169; /* Váš nový poměr stran */
}

.carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.carousel-item a:hover img {
    transform: scale(1.05);
}

/* Šipky */
.carousel-btn {
    background: none;
    border: none;
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    padding: 0;
    color: #333;
    transition: color 0.2s ease;
}
.carousel-btn:hover { color: #000; }
.carousel-btn .dashicons { font-size: 30px; width: 30px; height: 30px; }
.prev-btn { left: 0; }
.next-btn { right: 0; }


/* 2. RESPONZIVITA (Media Queries) */

/* TABLET a MENŠÍ LAPTOP (pod 1024px) -> 3 položky */
@media (max-width: 1024px) {
    .carousel-item {
        /* 100% minus 2 mezery po 10px (20px), děleno 3 */
        flex: 0 0 calc((100% - 20px) / 3);
    }
}

/* MOBIL (pod 600px) -> 2 položky */
@media (max-width: 600px) {
    .carousel-item {
        /* 100% minus 1 mezera 10px, děleno 2 */
        flex: 0 0 calc((100% - 10px) / 2);
    }
    
    /* Zmenšíme odsazení pro šipky, aby zbylo víc místa pro obrázky */
    .carousel-container {
        margin: 0 30px; 
    }
}