/* COMPLETE jAlbum Tiger skin override for perfect 200x200px grid layout */

/* CRITICAL: Force grid layout and override ALL jAlbum layout styles */
.thumbnails .cont.base.fixgrid,
.thumbnails .cont.fixgrid,
.thumbnails .cont.grid,
.thumbnails .cont.flexgrid,
.thumbnails .cont.justified,
.thumbnails .cont {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
    gap: 15px !important;
    padding: 20px !important;
    justify-items: center !important;
    align-items: start !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    /* Override jAlbum flexbox completely */
    flex-direction: unset !important;
    align-items: unset !important;
    justify-content: unset !important;
    flex-wrap: unset !important;
}

/* FORCE every card to be exactly 200x200px */
.thumbnails .cont .card {
    position: relative !important;
    width: 200px !important;
    height: 200px !important;
    min-width: 200px !important;
    min-height: 200px !important;
    max-width: 200px !important;
    max-height: 200px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    clear: none !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    /* Override jAlbum inline-flex */
    flex-direction: unset !important;
    flex: unset !important;
    align-self: unset !important;
    justify-self: unset !important;
}

/* FORCE every thumbnail link to be 200x200px */
.thumbnails .cont .card .thumb {
    width: 200px !important;
    height: 200px !important;
    min-width: 200px !important;
    min-height: 200px !important;
    max-width: 200px !important;
    max-height: 200px !important;
    display: block !important;
    overflow: hidden !important;
    border-radius: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
    /* Override jAlbum flex styles */
    flex: unset !important;
    flex-direction: unset !important;
    align-items: unset !important;
    justify-content: unset !important;
}

/* FORCE every image to be exactly 200x200px with top alignment */
.thumbnails .cont .card .thumb img,
.thumbnails .cont .card img {
    width: 200px !important;
    height: 200px !important;
    min-width: 200px !important;
    min-height: 200px !important;
    max-width: 200px !important;
    max-height: 200px !important;
    object-fit: cover !important;
    object-position: center top !important;
    display: block !important;
    border-radius: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
    /* Override jAlbum positioning */
    position: relative !important;
    top: unset !important;
    left: unset !important;
    transform: unset !important;
}

/* Override ALL possible jAlbum layout variations */
.thumbnails .cont.fixgrid .card:not(.icon) img,
.thumbnails .cont.grid .card img,
.thumbnails .cont.flexgrid .card .thumb img,
.thumbnails .cont.justified .card .thumb img {
    width: 200px !important;
    height: 200px !important;
    object-fit: cover !important;
    object-position: center top !important;
    margin: unset !important;
    position: relative !important;
    flex: unset !important;
}

/* Disable jAlbum's ::before pseudo-elements that create spacing */
.thumbnails .cont.grid .thumb::before,
.thumbnails .cont.fixgrid .card::before,
.thumbnails .cont .card::before {
    display: none !important;
    content: none !important;
    padding-bottom: 0 !important;
}

/* Hover effects */
.thumbnails .cont .card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15) !important;
}

.thumbnails .cont .card:hover .thumb img,
.thumbnails .cont .card:hover img {
    transform: scale(1.05) !important;
}

/* Loading state */
.thumbnails .cont:empty::before {
    content: "Loading all images..." !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    height: 400px !important;
    font-size: 18px !important;
    color: #666 !important;
    grid-column: 1 / -1 !important;
}

/* Responsive breakpoints */
@media (max-width: 1200px) {
    .thumbnails .cont.base.fixgrid,
    .thumbnails .cont.fixgrid,
    .thumbnails .cont.grid,
    .thumbnails .cont.flexgrid,
    .thumbnails .cont.justified,
    .thumbnails .cont {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
        gap: 12px !important;
        padding: 16px !important;
    }
    
    .thumbnails .cont .card,
    .thumbnails .cont .card .thumb,
    .thumbnails .cont .card .thumb img,
    .thumbnails .cont .card img {
        width: 180px !important;
        height: 180px !important;
        min-width: 180px !important;
        min-height: 180px !important;
        max-width: 180px !important;
        max-height: 180px !important;
    }
}

@media (max-width: 768px) {
    .thumbnails .cont.base.fixgrid,
    .thumbnails .cont.fixgrid,
    .thumbnails .cont.grid,
    .thumbnails .cont.flexgrid,
    .thumbnails .cont.justified,
    .thumbnails .cont {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
        gap: 10px !important;
        padding: 12px !important;
    }
    
    .thumbnails .cont .card,
    .thumbnails .cont .card .thumb,
    .thumbnails .cont .card .thumb img,
    .thumbnails .cont .card img {
        width: 150px !important;
        height: 150px !important;
        min-width: 150px !important;
        min-height: 150px !important;
        max-width: 150px !important;
        max-height: 150px !important;
        border-radius: 8px !important;
    }
}

@media (max-width: 480px) {
    .thumbnails .cont.base.fixgrid,
    .thumbnails .cont.fixgrid,
    .thumbnails .cont.grid,
    .thumbnails .cont.flexgrid,
    .thumbnails .cont.justified,
    .thumbnails .cont {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
        gap: 8px !important;
        padding: 10px !important;
    }
    
    .thumbnails .cont .card,
    .thumbnails .cont .card .thumb,
    .thumbnails .cont .card .thumb img,
    .thumbnails .cont .card img {
        width: 120px !important;
        height: 120px !important;
        min-width: 120px !important;
        min-height: 120px !important;
        max-width: 120px !important;
        max-height: 120px !important;
        border-radius: 6px !important;
    }
}

/* Ensure lightbox images work properly */
.lightbox img,
.modal img {
    width: auto !important;
    height: auto !important;
    max-width: 90vw !important;
    max-height: 90vh !important;
    object-fit: contain !important;
    object-position: center !important;
}