/* Style CSS dla galerii z podziałem na kolumny według proporcji obrazów */

/* Główny kontener */
.sk-gallery-container {
    width: 100% !important;
    max-width: 100% !important;
    position: relative;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
}

/* Układ dwóch kolumn */
.sk-gallery-two-columns {
    display: flex;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0; /* Odstęp między kolumnami ustawiamy inline */
}

/* Kolumny */
.sk-gallery-column {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Elementy galerii */
.sk-gallery-item {
    width: 100%;
    margin-bottom: 16px; /* Ustawiany dynamicznie przez gap */
    overflow: hidden;
    position: relative;
}

/* Kontener obrazu */
.sk-gallery-image-wrapper {
    position: relative;
    width: 100%;
    height: 0; /* Wysokość będzie kontrolowana przez padding-bottom */
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.3s ease;
    border-radius: 0 !important; /* Ostre krawędzie */
    cursor: pointer;
}

/* Efekt hover */
.sk-gallery-item:hover .sk-gallery-image-wrapper {
    transform: scale(1.05);
}

/* Typowe proporcje dla lewej kolumny (pionowe obrazy) */
.sk-gallery-vertical-item .sk-gallery-image-wrapper {
    padding-bottom: 133%; /* Domyślnie 3:4 dla obrazów pionowych */
}

/* Typowe proporcje dla prawej kolumny (poziome obrazy) */
.sk-gallery-horizontal-item .sk-gallery-image-wrapper {
    padding-bottom: 75%; /* Domyślnie 4:3 dla obrazów poziomych */
}

/* Tytuły obrazów */
.sk-gallery-title {
    position: absolute;
    bottom: 20px;
    left: 20px;
    font-size: 22px;
    font-weight: 400;
    text-transform: uppercase;
    color: #fff;
    margin: 0;
    padding: 5px 10px;
    z-index: 2;
    pointer-events: none;
    line-height: 1.2;
    max-width: 80%;
}

/* Gradient dla lepszej czytelności tytułów */
.sk-gallery-image-wrapper::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%);
    z-index: 1;
    pointer-events: none;
}

/* Loader dla galerii */
.sk-gallery-loader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.8);
    z-index: 5;
}

.sk-gallery-loader-spinner {
    width: 50px;
    height: 50px;
    border: 5px solid rgba(206, 137, 70, 0.3);
    border-radius: 50%;
    border-top-color: #CE8946;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Responsive styles */
@media (max-width: 767px) {
    /* Na mobilnych urządzeniach kolumny ustawiamy jedna pod drugą */
    .sk-gallery-two-columns {
        flex-direction: column !important;
    }
    
    .sk-gallery-column {
        margin: 0 !important;
        width: 100% !important;
    }
    
    /* Kontener ze scrollowaniem */
    .sk-gallery-container {
        max-height: var(--mobile-height, 600px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-right: 5px;
    }
    
    .sk-gallery-title {
        font-size: 18px;
        bottom: 10px;
        left: 10px;
    }
    
    /* Efekt wciśnięcia przy dotknięciu na mobilnych */
    .sk-gallery-item:active .sk-gallery-image-wrapper {
        transform: scale(0.98);
    }
    
    /* Stylizacja scrollbara */
    .sk-gallery-container::-webkit-scrollbar {
        width: 3px;
    }
    
    .sk-gallery-container::-webkit-scrollbar-track {
        background: rgba(0,0,0,0.05);
        border-radius: 10px;
    }
    
    .sk-gallery-container::-webkit-scrollbar-thumb {
        background: rgba(0,0,0,0.2);
        border-radius: 10px;
    }
    
    /* Wskaźnik scrollowania */
    .sk-gallery-scroll-indicator {
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 10;
        animation: bounce 2s infinite;
        pointer-events: none;
        opacity: 0.8;
        width: 15px;
        height: 56px;
    }
    
    .sk-gallery-scroll-indicator::before {
        content: '';
        position: absolute;
        width: 15px;
        height: 56px;
        background-image: url("data:image/svg+xml,%3Csvg width='15' height='56' viewBox='0 0 15 56' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.76935 55.0871C7.1604 55.477 7.79357 55.4762 8.18356 55.0851L14.5389 48.7126C14.9289 48.3215 14.9281 47.6884 14.537 47.2984C14.146 46.9084 13.5128 46.9092 13.1228 47.3003L7.47359 52.9648L1.80909 47.3156C1.41804 46.9256 0.784875 46.9264 0.394879 47.3175C0.00488345 47.7085 0.00573957 48.3417 0.396792 48.7317L6.76935 55.0871ZM6.40259 0.454965L6.4755 54.3803L8.4755 54.3776L8.40259 0.452261L6.40259 0.454965Z' fill='%23CE8946'/%3E%3C/svg%3E");
        background-size: contain;
        background-repeat: no-repeat;
    }
    
    @keyframes bounce {
        0%, 20%, 50%, 80%, 100% {transform: translateX(-50%) translateY(0);}
        40% {transform: translateX(-50%) translateY(-10px);}
        60% {transform: translateX(-50%) translateY(-5px);}
    }
    
    /* Chowamy indicator po pierwszym scrollu */
    .sk-gallery-container.scrolled .sk-gallery-scroll-indicator {
        opacity: 0;
        transition: opacity 0.5s ease;
    }
}

/* Small Mobile Styles */
@media (max-width: 480px) {
    .sk-gallery-container {
        max-height: 500px; /* Mniejsza wysokość na małych telefonach */
    }
    
    .sk-gallery-title {
        font-size: 16px;
        bottom: 8px;
        left: 8px;
    }
}

/* Lightbox styling */
.sk-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.sk-lightbox.active {
    opacity: 1;
    visibility: visible;
}

.sk-lightbox-content {
    position: relative;
    max-width: 90%;
    max-height: 90%;
    margin: auto;
}

.sk-lightbox-image {
    display: block;
    max-width: 100%;
    max-height: 90vh;
    margin: 0 auto;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.5);
    transition: opacity 0.3s ease;
}

.sk-lightbox-caption {
    position: absolute;
    bottom: -40px;
    left: 0;
    width: 100%;
    text-align: center;
    color: white;
    font-size: 16px;
    padding: 10px;
}

.sk-lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    color: white;
    font-size: 30px;
    cursor: pointer;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 50%;
}

/* Style dla strzałek nawigacyjnych lightboxa */
.sk-lightbox-nav {
    position: absolute;
    top: 50%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
    z-index: 1010;
    pointer-events: none;
}

.sk-lightbox-prev,
.sk-lightbox-next {
    cursor: pointer;
    margin: 0 20px;
    pointer-events: auto;
    width: auto;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0.8;
    transition: opacity 0.3s ease;
    background-color: transparent;
    border-radius: 0;
}

.sk-lightbox-prev svg,
.sk-lightbox-next svg {
    width: 55px;
    height: 25px;
}

.sk-lightbox-prev:hover,
.sk-lightbox-next:hover {
    opacity: 1;
}

.sk-lightbox-prev:hover svg path,
.sk-lightbox-next:hover svg path {
    fill: #a06729; /* Ciemniejszy odcień na hover */
    transition: fill 0.3s ease;
}

/* Responsywne style dla strzałek lightboxa */
@media (max-width: 767px) {
    .sk-lightbox-prev svg,
    .sk-lightbox-next svg {
        width: 40px;
        height: 25px;
    }
    
    .sk-lightbox-prev,
    .sk-lightbox-next {
        margin: 0 10px;
    }
}

@media (max-width: 480px) {
    .sk-lightbox-prev svg,
    .sk-lightbox-next svg {
        width: 30px;
        height: 25px;
    }
}