/* ============================================================
   JUSTIFIED GRID LAYOUT (FLICKR ENGINE)
   ============================================================ */

/* Container */
.bg-justified-grid .jet-listing-grid__items {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    height: auto !important;
    width: 100% !important;
    max-width: 1920px;
    margin: 0 auto;

    /* Force reset all JetEngine grid properties */
    display: flex !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    grid-gap: 0 !important;
    column-gap: 0 !important;
}

/* Reduced impact during calculation to avoid complete white-out */
.bg-justified-grid .jet-listing-grid__items.bg-layout-loading .jet-listing-grid__item {
    opacity: 0.4 !important;
    /* Higher opacity to show old results while calculating */
    visibility: visible !important;
}

/* Items */
.bg-justified-grid .jet-listing-grid__item {
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    overflow: visible !important;
    position: relative !important;
    max-width: 100% !important;
    /* Smooth transition for layout changes */
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out !important;
}

/* High specificity forced resets */
.elementor-widget-jet-listing-grid .bg-justified-grid .jet-listing-grid__item,
.bg-justified-grid .jet-listing-grid__item.jet-listing-grid__item {
    width: 300px;
    /* Placeholder width while loading, will be overwritten by JS */
    flex: 0 0 auto !important;
    background-color: #fff;
    /* Subtle background color while loading */
    min-height: 100px;
}

/* Individual Image Loader */
.bg-justified-grid .jet-listing-grid__item.bg-item-loading {
    position: relative !important;
}

.bg-justified-grid .jet-listing-grid__item.bg-item-loading::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 28px;
    height: 28px;
    margin: -14px 0 0 -14px;
    border: 3px solid rgba(0, 0, 0, 0.1);
    border-top-color: #333;
    /* Darker more visible gray */
    border-radius: 50%;
    animation: bg-spinner 0.8s linear infinite;
    z-index: 10;
    display: block !important;
}

.bg-justified-grid .jet-listing-grid__item.bg-item-loading img {
    opacity: 0 !important;
}

@keyframes bg-spinner {
    to {
        transform: rotate(360deg);
    }
}

/* Mobile Specific Reset - Force 1 column if JS hasn't acted yet or for fallback */
@media (max-width: 767px) {
    .bg-justified-grid .jet-listing-grid__item.jet-listing-grid__item {
        width: 100% !important;
        /* Force full width on mobile unless JS says otherwise */
        flex: 0 0 100% !important;
    }

    /* Aggressive Memory Optimization: Hide background grid items when popup is active */
    body.bg-popup-active .bg-justified-grid .jet-listing-grid__items {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

/* Images */
.bg-justified-grid .jet-listing-grid__item img {
    width: 100% !important;
    object-fit: cover !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Title / Heading Styling */
.bg-justified-grid .jet-listing-grid__item .jet-listing-dynamic-field,
.bg-justified-grid .jet-listing-grid__item h1,
.bg-justified-grid .jet-listing-grid__item h2,
.bg-justified-grid .jet-listing-grid__item h3,
.bg-justified-grid .jet-listing-grid__item h4,
.bg-justified-grid .jet-listing-grid__item p {
    margin: 4px 0 0px 0 !important;
    line-height: 1.4 !important;
    font-size: 16px !important;
    text-align: left;
    display: block !important;
    width: 100% !important;
}

/* Mobile Typography */
@media (max-width: 767px) {
    .bg-justified-grid .jet-listing-grid__items {
        row-gap: 20px !important;
    }

    .bg-justified-grid .jet-listing-grid__item .jet-listing-dynamic-field,
    .bg-justified-grid .jet-listing-grid__item h1,
    .bg-justified-grid .jet-listing-grid__item h2,
    .bg-justified-grid .jet-listing-grid__item h3,
    .bg-justified-grid .jet-listing-grid__item h4,
    .bg-justified-grid .jet-listing-grid__item p {
        font-size: 14px !important;
        margin-top: 10px !important;
    }
}

/* ============================================================
   GLOBAL LISTING ANIMATION (STAGGER STYLE)
   ============================================================ */
@keyframes galleryFadeUp {
    0% {
        opacity: 0;
        transform: translate3d(0, 40px, 0);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* Apply globally but respect the "ready" state for the justified grid */
body:not(.elementor-editor-active) .jet-listing-grid__item {
    opacity: 0;
    animation-name: galleryFadeUp;
    animation-duration: 0.6s;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}

/* Disable default animation for Justified Grid until it's ready */
body:not(.elementor-editor-active) .bg-justified-grid .jet-listing-grid__item {
    animation-name: none;
}

body:not(.elementor-editor-active) .bg-justified-grid .bg-grid-ready .jet-listing-grid__item {
    animation-name: galleryFadeUp;
}

/* Stagger Delays */
body:not(.elementor-editor-active) .jet-listing-grid__item:nth-child(1) {
    animation-delay: 0.05s;
}

body:not(.elementor-editor-active) .jet-listing-grid__item:nth-child(2) {
    animation-delay: 0.10s;
}

body:not(.elementor-editor-active) .jet-listing-grid__item:nth-child(3) {
    animation-delay: 0.15s;
}

body:not(.elementor-editor-active) .jet-listing-grid__item:nth-child(4) {
    animation-delay: 0.20s;
}

body:not(.elementor-editor-active) .jet-listing-grid__item:nth-child(5) {
    animation-delay: 0.25s;
}

body:not(.elementor-editor-active) .jet-listing-grid__item:nth-child(n+6) {
    animation-delay: 0.30s;
}