/* ==========================================
   BOMBE.DESIGN: FLOATING GALLERY STYLES
   ========================================== */

/* The Elementor Width Constraint */
.custom-container {
    width: 100%;
    max-width: min(1280px, calc(100vw - 100px));
    margin: 0 auto;
}

.bombe-floating-gallery-wrapper {
    position: relative;
    min-height: max(850px, 85vh);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 4rem 0;
}

/* Center Text Block */
.bombe-floating-gallery-wrapper .center-content {
    position: relative;
    z-index: 20;
    text-align: center;
    max-width: 650px;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.bombe-floating-gallery-wrapper .center-content>* {
    pointer-events: auto;
}

.bombe-floating-gallery-wrapper .gallery-subtext {
    margin-bottom: 2rem;
}

.bombe-floating-gallery-wrapper .gallery-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    cursor: pointer;
}

/* --- Absolute Image Engine --- */
.bombe-floating-gallery-wrapper .bombe-image-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
}

.bombe-floating-gallery-wrapper .img-wrap {
    position: absolute;
    will-change: transform, opacity;
    opacity: 0;
    aspect-ratio: 1 / 1;
}

.bombe-floating-gallery-wrapper .floating-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translateZ(0);
    will-change: transform;
}

/* * The 8-Image Figma Map
 * Utilizing clamp() for fluid desktop scaling 
 */
.bombe-floating-gallery-wrapper .img-1 {
    top: 15%;
    left: 20%;
    width: clamp(90px, 10vw, 130px);
    z-index: 5;
}

.bombe-floating-gallery-wrapper .img-2 {
    top: 22%;
    left: 45%;
    width: clamp(40px, 5vw, 60px);
    z-index: 1;
    filter: blur(1.5px);
}

.bombe-floating-gallery-wrapper .img-3 {
    top: 12%;
    right: 25%;
    width: clamp(60px, 7vw, 90px);
    z-index: 3;
}

.bombe-floating-gallery-wrapper .img-4 {
    top: 45%;
    left: 8%;
    width: clamp(70px, 8vw, 100px);
    z-index: 4;
}

.bombe-floating-gallery-wrapper .img-5 {
    top: 40%;
    right: 12%;
    width: clamp(50px, 6vw, 75px);
    z-index: 2;
}

.bombe-floating-gallery-wrapper .img-6 {
    bottom: 15%;
    left: 30%;
    width: clamp(100px, 12vw, 150px);
    z-index: 6;
}

.bombe-floating-gallery-wrapper .img-7 {
    bottom: 25%;
    right: 28%;
    width: clamp(65px, 7.5vw, 95px);
    z-index: 3;
}

.bombe-floating-gallery-wrapper .img-8 {
    bottom: 10%;
    right: 10%;
    width: clamp(75px, 8.5vw, 110px);
    z-index: 4;
}

/* --- Mobile Fallback Architecture --- */
@media (max-width: 768px) {
    .bombe-floating-gallery-wrapper {
        min-height: auto;
        padding: 6rem 1rem;
        flex-direction: column;
    }

    .bombe-floating-gallery-wrapper .bombe-image-wrapper {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin-top: 3rem;
        z-index: 10;
        pointer-events: auto;
    }

    .bombe-floating-gallery-wrapper .img-wrap {
        position: relative;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        display: inline-block;
        margin: 0.5rem;
        width: clamp(60px, 15vw, 80px) !important;
        opacity: 1;
    }
}