/* Rozszerzone style karuzeli - dla index.html i portfolio.html */

/* Karuzela desktop - efekt hover dla klikalnych elementów */
@media (min-width: 1024px) {
    .carousel-item {
        cursor: pointer;
        transition: transform 0.3s ease, opacity 0.3s ease;
    }
    
    .carousel-item:hover {
        transform: scale(0.95);
    }
    
    .carousel-item:hover:not(.scale-110) {
        opacity: 0.8 !important;
    }
    
    /* Strzałki desktopowe - bez białego tła */
    #carousel-prev,
    #carousel-next {
        background: transparent !important;
        box-shadow: none !important;
    }
    
    #carousel-prev:hover,
    #carousel-next:hover {
        background: transparent !important;
    }
    
    #carousel-prev svg,
    #carousel-next svg {
        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
        transition: opacity 0.2s;
    }
    
    #carousel-prev:hover svg,
    #carousel-next:hover svg {
        opacity: 0.8;
    }
}

/* Karuzela mobile - ukryj desktopową na mobile */
@media (max-width: 1023px) {
    /* Ukryj desktopową karuzelę na mobile */
    .flex.items-center.justify-center.gap-8 {
        display: none !important;
    }
    
    /* Ukryj desktopowe przyciski nawigacyjne */
    #carousel-prev,
    #carousel-next {
        display: none !important;
    }
    
    /* Sekcja karuzeli mobile */
    section.bg-light.relative.overflow-hidden {
        min-height: 100vh;
        overflow: visible;
    }
}

/* Karuzela Jubileusz */
.jubileusz-carousel-container {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.jubileusz-carousel-wrapper {
    display: flex;
    width: 400%;
    will-change: transform;
    transition: transform 0.5s ease-in-out;
}

.jubileusz-carousel-item {
    width: 25%;
    flex-shrink: 0;
    min-width: 25%;
}

.jubileusz-carousel-item img {
    width: 100%;
    height: auto;
    display: block;
}

.jubileusz-dot {
    cursor: pointer;
}

/* Diamenty dla karuzeli jubileusz */
.jubileusz-dot .diamond {
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-bottom: 9px solid #9ca3af;
    position: relative;
    top: -5px;
    transition: border-bottom-color 0.3s ease;
    display: inline-block;
    vertical-align: middle;
}

.jubileusz-dot .diamond:after {
    content: '';
    position: absolute;
    left: -5px;
    top: 9px;
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-top: 9px solid #9ca3af;
    transition: border-top-color 0.3s ease;
}

.jubileusz-dot.active .diamond {
    border-bottom-color: #374151;
}

.jubileusz-dot.active .diamond:after {
    border-top-color: #374151;
}

/* Karuzela mobilna Sesje */
.sesje-mobile-carousel-container {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.sesje-mobile-carousel-wrapper {
    display: flex;
    width: 300%;
    will-change: transform;
    transition: transform 0.5s ease-in-out;
}

.sesje-mobile-carousel-item {
    width: 33.333%;
    flex-shrink: 0;
    min-width: 33.333%;
}

.sesje-mobile-carousel-item img {
    width: 100%;
    height: auto;
    display: block;
}

.sesje-mobile-dot {
    cursor: pointer;
}

/* Diamenty dla karuzeli sesje */
.sesje-mobile-dot .diamond {
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-bottom: 9px solid #9ca3af;
    position: relative;
    top: -5px;
    transition: border-bottom-color 0.3s ease;
    display: inline-block;
    vertical-align: middle;
}

.sesje-mobile-dot .diamond:after {
    content: '';
    position: absolute;
    left: -5px;
    top: 9px;
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-top: 9px solid #9ca3af;
    transition: border-top-color 0.3s ease;
}

.sesje-mobile-dot.active .diamond {
    border-bottom-color: #374151;
}

.sesje-mobile-dot.active .diamond:after {
    border-top-color: #374151;
}

/* Ukryj mobile karuzelę na desktopie */
@media (min-width: 1024px) {
    .mobile-carousel-container {
        display: none !important;
    }
}

/* Diamenty dla karuzeli opinii na stronie o-mnie */
.opinie-dot .diamond {
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-bottom: 9px solid #9ca3af;
    position: relative;
    top: -5px;
    transition: border-bottom-color 0.3s ease;
    display: inline-block;
    vertical-align: middle;
}

.opinie-dot .diamond:after {
    content: '';
    position: absolute;
    left: -5px;
    top: 9px;
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-top: 9px solid #9ca3af;
    transition: border-top-color 0.3s ease;
}

.opinie-dot.active .diamond {
    border-bottom-color: #374151;
}

.opinie-dot.active .diamond:after {
    border-top-color: #374151;
}

/* Efekty hover dla zdjęć w sekcjach */
@media (min-width: 1024px) {
    .portfolio-image-hover {
        clip-path: inset(0);
        transition: clip-path 0.8s ease-out, transform 0.8s ease-out;
    }
    
    .portfolio-image-container:hover .portfolio-image-hover {
        clip-path: inset(6%);
        transform: scale(1.08);
    }
}