/**
 * Frontend styles for the project images block
 */
/* Grid Layout */
.project-images-gallery .row {
    display: flex;
    flex-wrap: wrap;
}

.project-images-gallery .col-6 {
    flex: 0 0 50%;
    max-width: 50%;
    padding: 0 10px;
    margin-bottom: 20px;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .project-images-gallery .col-md-4 {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
    /* Ensure mobile class doesn't override */
    .project-images-gallery .col-6.col-md-4 { 
        flex: 0 0 33.333333%; 
        max-width: 33.333333%; 
    }
}

@media (min-width: 992px) {
    .project-images-gallery .col-lg-3 {
        flex: 0 0 25%;
        max-width: 25%;
    }
    /* Ensure specificity */
    .project-images-gallery .col-6.col-md-4.col-lg-3 { 
        flex: 0 0 25%; 
        max-width: 25%; 
    }
}

/* Image Styling */
.project-images-gallery img {
    width: 100%;
    height: auto;
    display: block; /* Prevents bottom space */
    object-fit: cover; /* Ensures image covers space */
    aspect-ratio: 1 / 1; /* Creates square thumbnails */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 4px; /* Slightly rounded corners */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.project-images-gallery a:hover img {
    transform: scale(1.05); /* Slight zoom on hover */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Alignment Styles */
.wp-block-bps-showcase-project-images.alignwide {
    max-width: 1100px; /* Adjust as needed */
    margin-left: auto;
    margin-right: auto;
}

.wp-block-bps-showcase-project-images.alignfull {
    max-width: none;
    margin-left: calc(50% - 50vw); /* Trick for full width */
    margin-right: calc(50% - 50vw);
    width: 100vw;
}

/* Ensure content inside alignfull doesn't exceed bounds if theme restricts */
.wp-block-bps-showcase-project-images.alignfull > .project-images-gallery {
    max-width: 100%; /* Or theme's max-width if needed */
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px; /* Add padding if needed */
    padding-right: 15px;
}

/* Fancybox Customizations */
.project-gallery-fancybox .fancybox__backdrop {
    background-color: rgba(0, 0, 0, 0.9); /* Darker backdrop */
}

.project-gallery-fancybox .fancybox__container {
    --fancybox-bg: rgba(0, 0, 0, 0.95);
}

.fancybox__container {
    z-index: 999999999999999999999999999 !important;
}

/* Thumbnail styling */
.project-gallery-fancybox .carousel__nav {
    background-color: rgba(0, 0, 0, 0.7);
    padding: 10px 0;
}

.project-gallery-fancybox .carousel__button {
    color: #fff;
    opacity: 0.8;
}

.project-gallery-fancybox .carousel__button:hover {
    opacity: 1;
}

/* Loading Animation */
.project-gallery-fancybox .is-loading {
    animation: gallery-loading 1.2s infinite;
}

@keyframes gallery-loading {
    0% { opacity: 0.3; }
    50% { opacity: 0.7; }
    100% { opacity: 0.3; }
}