/* Gallery Section Styles */

/* Gallery Loading Spinners */
.gallery-loader {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    border-radius: inherit;
    z-index: 2;
}

.gallery-loader.loaded {
    display: none !important;
    pointer-events: none;
    opacity: 0 !important;
    visibility: hidden !important;
}

.gallery-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(0, 0, 0, 0.1);
    border-top: 3px solid var(--spinner-color, #059669);
    border-radius: 50%;
    position: relative;
    animation: gallery-spin 1s linear infinite;
}

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

/* Removed ::after element from base spinner too */


/* Color-themed spinners */
.gallery-loader[data-gallery-type="dvoriste"] .gallery-spinner {
    --spinner-color: #059669;
}

.gallery-loader[data-gallery-type="psiholog"] .gallery-spinner {
    --spinner-color: #009689;
}

.gallery-loader[data-gallery-type="muzika"] .gallery-spinner {
    --spinner-color: #165dfc;
}

.gallery-loader[data-gallery-type="radionice"] .gallery-spinner {
    --spinner-color: #9333ea;
}

.gallery-loader[data-gallery-type="engleski"] .gallery-spinner {
    --spinner-color: #dc2626;
}

.gallery-loader[data-gallery-type="mastanje"] .gallery-spinner {
    --spinner-color: #ca8a04;
}

.gallery-loader[data-gallery-type="konstruktivne"] .gallery-spinner {
    --spinner-color: #ea580c;
}

.gallery-loader[data-gallery-type="dodatne_aktivnosti"] .gallery-spinner {
    --spinner-color: #db2777;
}

/* Modal Gallery Grid Loaders - ULTRA HIGH SPECIFICITY WITH FORCED VISIBILITY */
#galleryModal #galleryGrid > div > .gallery-loader {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(8px) !important;
    border-radius: 0.5rem !important;
    z-index: 50 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

#galleryModal #galleryGrid > div > .gallery-loader.loaded {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

#galleryModal #galleryGrid > div > .gallery-loader .gallery-spinner {
    width: 40px !important;
    height: 40px !important;
    border: 3px solid rgba(0, 0, 0, 0.1) !important;
    border-top: 3px solid var(--spinner-color, #059669) !important;
    border-radius: 50% !important;
    position: relative !important;
    display: block !important;
    opacity: 1 !important;
    animation: gallery-spin 1s linear infinite !important;
    visibility: visible !important;
}

/* Removed ::after element - it was creating duplicate spinning line */

#gallery .cursor-pointer {
    position: relative;
    overflow: hidden;
    transform-origin: center;
    /* 2025 Touch Best Practices: Enable smooth scrolling but prevent double-tap zoom */
    touch-action: manipulation;
    /* Ensure proper touch handling without delay */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    /* Improve touch responsiveness */
    -webkit-tap-highlight-color: transparent;
}

/* Gallery images styles consolidated with inline styles in index.html */

#gallery .cursor-pointer .absolute {
    z-index: 2 !important;
}

#gallery .cursor-pointer h3,
#gallery .cursor-pointer .gallery-icon-container {
    z-index: 3 !important;
    position: absolute !important;
}




#gallery .cursor-pointer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0);
    border-radius: inherit;
    z-index: 1;
}


.gallery-icon-container {
    overflow: hidden;
    cursor: pointer;
    z-index: 10;
}

.gallery-icon-container::before,
.gallery-icon-container::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    transform: translate(-50%, -50%) scale(0);
}

.gallery-icon-container::after {
    animation-delay: 1.5s;
}

/* Image Viewer Navigation Buttons */
#imageViewer .prev-btn,
#imageViewer .next-btn {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid transparent;
    color: inherit;
    border-radius: 50%;
    width: 56px;
    height: 56px;
    font-size: 1.4rem;
    cursor: pointer;
    backdrop-filter: blur(10px);
    box-shadow: none;
    display: none;
    justify-content: center;
    align-items: center;
    position: absolute;
    overflow: hidden;
    z-index: 1062;
    transform: translateY(-50%);
}

/* Hide navigation buttons on mobile and tablet devices */
@media (max-width: 1279px) {
    #imageViewer .prev-btn,
    #imageViewer .next-btn {
        display: none !important;
    }
}

#imageViewer .prev-btn {
    left: 2rem;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

#imageViewer .next-btn {
    right: 2rem;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

#imageViewer .prev-btn::before,
#imageViewer .next-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    border-radius: 50%;
    
    z-index: 1;
}

#imageViewer .prev-btn:hover::before,
#imageViewer .next-btn:hover::before {
    opacity: 1;
}

#imageViewer .prev-btn:hover,
#imageViewer .next-btn:hover {
    color: white;
    transform: translateY(-2px) translateY(-50%) scale(1.05);
    border-color: transparent;
    box-shadow: none;
}

#imageViewer .prev-btn:active,
#imageViewer .next-btn:active {
    transform: translateY(0) translateY(-50%) scale(0.98);
}

#imageViewer .prev-btn i,
#imageViewer .next-btn i {
    position: relative;
    z-index: 2;
}

#imageViewer .prev-btn:hover i {
    transform: translateX(-1px);
}

#imageViewer .next-btn:hover i {
    transform: translateX(1px);
}

/* Gallery Modal Thumbnails */
#galleryGrid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}

@media (min-width: 768px) {
    #galleryGrid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }
}

@media (min-width: 1024px) {
    #galleryGrid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }

    #imageViewer .prev-btn,
    #imageViewer .next-btn {
        display: flex !important;
    }
}

#galleryGrid > div {
    position: relative;
    overflow: hidden;
    border-radius: 0.5rem;
    cursor: pointer;
    aspect-ratio: 1;
    width: 100%;
    height: auto;
}


/* Remove conflicting rules - they were interfering with modal spinners */
/* These rules were meant for hover effects but were affecting ALL divs including loaders */

/* Gallery Modal & Image Viewer - Always covers full viewport */
#galleryModal,
#imageViewer {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 99999 !important;
    overflow: hidden;
    /* Critical mobile fix: Use viewport units and ensure positioning relative to viewport */
    max-width: 100vw !important;
    max-height: 100vh !important;
}

/* Mobile-specific fixes for modal positioning and touch optimization */
@media (max-width: 1023px) {
    #galleryModal,
    #imageViewer {
        /* Force viewport positioning on mobile regardless of body transforms */
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        /* Use transform to ensure it stays in viewport - use .gpu-accelerated-complex class instead */
    }
    
    /* 2025 Touch Optimization for Gallery Cards */
    #gallery .cursor-pointer {
        /* Improve touch responsiveness on mobile */
        will-change: transform;
    }
    
    /* Prevent accidental touch actions during gallery interactions */
    #gallery .cursor-pointer:active {
        transform: scale(0.98);
    }
    
    /* Disable pointer events during scroll - CRITICAL for mobile */
    body.scrolling #gallery .cursor-pointer {
        pointer-events: none !important;
    }
}

/* Image viewer should be above gallery modal */
#imageViewer {
    z-index: 999999 !important;
}

#galleryModal .pt-16 {
    height: calc(100vh - 4rem);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.3) transparent;
}

/* Mobile viewport height fix for modal content */
@media (max-width: 1023px) {
    #galleryModal .pt-16 {
        height: calc(100vh - 4rem) !important;
        min-height: calc(100vh - 4rem) !important;
        max-height: calc(100vh - 4rem) !important;
    }
}

#galleryModal .pt-16::-webkit-scrollbar {
    width: 8px;
}

#galleryModal .pt-16::-webkit-scrollbar-track {
    background: transparent;
}

#galleryModal .pt-16::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
}

#galleryModal .pt-16::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.5);
}

/* Gallery Cards */
.gallery-card {
    position: relative;
    overflow: hidden;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}


.gallery-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.7) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

/* Fix for gallery card overlay blocking clicks - target inline style overlays */
#gallery [data-gallery] .absolute.inset-0.bg-black\/40,
#gallery [data-gallery] .absolute.inset-0.bg-black\/50 {
    pointer-events: none !important;
}

.gallery-card-text {
    color: white;
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.3;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.2);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}