.cr-bento-scroller {
    overflow: hidden;
    width: 100%;
    container-type: inline-size;
}

.cr-bento-scroller.cr-bento-overflow-visible {
    overflow: visible;
}

.cr-bento-mask {
    width: 100%;
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.cr-bento-mask-no-fade {
    -webkit-mask-image: none;
    mask-image: none;
}

.cr-bento-mask-vertical {
    width: 100%;
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
    mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
}

.cr-bento-scroller-rows {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Default gap, can be overridden by Elementor control */
}

.cr-bento-track {
    display: inline-flex;
    flex-wrap: nowrap; /* Force single line */
    align-items: center;
    width: max-content;
    max-width: none !important; /* Ensure track can grow beyond screen width */
    /* animation: cr-bento-scroll 40s linear infinite; REMOVED for JS implementation */
}

.cr-bento-columns-track {
    align-items: stretch;
    /* padding-right removed, now handled by .cr-bento-column-set */
}

.cr-bento-column-set {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap; /* Force single line */
    align-items: stretch;
    flex-shrink: 0; /* Prevent shrinking which causes overlap */
    max-width: none !important; /* Ensure set can grow */
    box-sizing: border-box;
    /* gap and padding-right are set via Elementor control */
}

.cr-bento-columns-vertical {
    display: flex;
    flex-direction: row;
    gap: 20px;
}

.cr-bento-columns-static {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
}

.cr-bento-mobile-row {
    display: none;
}

.cr-bento-mobile-track {
    animation-direction: normal;
}

.cr-bento-column {
    display: flex;
    flex-direction: column;
    margin-right: 0;
    gap: 20px;
}

.cr-bento-columns-track .cr-bento-column {
    /* Fallback for older browsers: use user-defined fixed width */
    flex: 0 0 var(--cr-bento-column-width, 300px);
    /* Modern browsers: use container width */
    flex: 0 0 calc((100cqw - (var(--cr-bento-columns-visible, 6) - 1) * var(--cr-bento-gap, 20px)) / var(--cr-bento-columns-visible, 6));
}

.cr-bento-columns-vertical .cr-bento-column-vertical,
.cr-bento-columns-static .cr-bento-column-static {
    flex: 0 0 calc((100% - (var(--cr-bento-columns-visible, 6) - 1) * var(--cr-bento-gap, 20px)) / var(--cr-bento-columns-visible, 6));
}

/* High specificity for mobile columns to prevent overlap */
.cr-bento-scroller .cr-bento-column.cr-bento-column-mobile {
    /* Simplified robust calculation: Total Width / Columns */
    /* Use padding-right for the gap to ensure exact box sizing */
    flex: 0 0 calc(100vw / var(--cr-bento-columns-visible, 1)) !important;
    width: calc(100vw / var(--cr-bento-columns-visible, 1)) !important;
    
    padding-right: var(--cr-bento-gap, 20px) !important;
    margin-right: 0 !important;
    
    min-width: 0 !important;
    max-width: none !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
}

/* Ensure no double gaps or margins interfere */
.cr-bento-column-set > .cr-bento-column.cr-bento-column-mobile:last-child {
    margin-right: 0 !important;
    padding-right: var(--cr-bento-gap, 20px) !important;
}

/* Reset gap on the set itself to prevent double spacing */
.cr-bento-column-set {
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Reset gap on the track to prevent double spacing */
.cr-bento-track {
    gap: 0 !important;
}

@media (max-width: 767px) {
    .cr-bento-desktop-tablet {
        display: none !important;
    }
}

.cr-bento-column-track {
    display: flex;
    flex-direction: column;
    animation: cr-bento-scroll-vertical 40s linear infinite;
}

.cr-bento-columns-vertical .cr-bento-column-vertical:nth-child(odd) .cr-bento-column-track {
    animation-direction: normal;
}

.cr-bento-columns-vertical .cr-bento-column-vertical:nth-child(even) .cr-bento-column-track {
    animation-direction: reverse;
}

/* Items inside column shouldn't have margin-right, they stack vertically */
.cr-bento-column .cr-bento-item {
    margin-right: 0 !important;
}

.cr-bento-column .cr-bento-item + .cr-bento-item {
    /* margin-top handled by gap on parent .cr-bento-column */
}

.cr-bento-columns-track .cr-bento-item-landscape,
.cr-bento-columns-track .cr-bento-item-portrait,
.cr-bento-columns-static .cr-bento-item,
.cr-bento-columns-vertical .cr-bento-item {
    height: auto !important;
    width: 100% !important; /* Ensure they fill the column width */
    min-width: 0 !important; /* Override inline min-width */
}

.cr-bento-item-landscape {
    aspect-ratio: 2 / 1.5;
}

.cr-bento-item-portrait {
    aspect-ratio: 1 / 1.5;
}

.cr-bento-item {
    display: block; /* Changed from flex to block to allow absolute children to fill relative parent reliably */
    overflow: hidden;
    background-color: #f0f0f0; /* Default background for items without specific color */
    box-sizing: border-box;
    text-decoration: none;
    color: inherit;
    position: relative;
    transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
    margin-right: 20px; /* Default gap */
    border-radius: 10px;
    cursor: pointer;
}

.cr-bento-item:hover {
    z-index: 10;
    transform: scale(1.05);
}

/* Expanded State (Clone) */
.cr-bento-clone {
    position: fixed;
    z-index: 99999;
    transition: all 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
}

.cr-bento-clone.is-expanded {
    /* Dimensions and position will be set by JS to match aspect ratio */
    border-radius: 20px;
}

.cr-bento-clone img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Backdrop */
.cr-bento-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.1);
    -webkit-backdrop-filter: blur(0px);
    backdrop-filter: blur(0px);
    z-index: 99990;
    opacity: 0;
    pointer-events: none;
    transition: all 0.6s ease;
}

.cr-bento-backdrop.is-active {
    opacity: 1;
    pointer-events: auto;
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
}


.cr-bento-columns-static .cr-bento-item {
    margin-right: 0;
}

.cr-bento-item-drop {
    opacity: 0;
    transform: translateY(-30%) scale(1.3);
    filter: blur(20px);
    animation-name: cr-bento-drop;
    animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

.cr-bento-item:hover {
    z-index: 10;
}

.cr-bento-item img {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    max-width: none !important; /* Prevent theme constraints */
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.cr-bento-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    box-sizing: border-box;
}

.cr-bento-title {
    font-weight: bold;
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
}

.cr-bento-desc {
    font-size: 0.9rem;
    opacity: 0.8;
}

@keyframes cr-bento-scroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

@keyframes cr-bento-scroll-vertical {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(-50%);
    }
}

@keyframes cr-bento-drop {
    0% {
        opacity: 0;
        transform: translateY(-30%) scale(1.3);
        filter: blur(24px);
    }
    18% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
    75% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@media (max-width: 767px) {
    /* .cr-bento-desktop-tablet rule moved above for safe grouping */

    .cr-bento-mobile-row {
        display: block;
        overflow: hidden;
    }

    .cr-bento-mobile-row .cr-bento-track {
        /* animation-duration is controlled by the widget setting */
    }

    .cr-bento-mobile-row .cr-bento-column {
        margin-right: 0;
    }
    
    .cr-bento-hidden-mobile {
        display: none !important;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .cr-bento-hidden-tablet {
        display: none !important;
    }
}

@media (min-width: 1025px) {
    .cr-bento-hidden-desktop {
        display: none !important;
    }
}