/* Banner styles for Factoryx app */

/* Base banner styles */
fx-app-banner {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
}

.factoryx_banner {
    width: 100%;
    height: 100%;
    display: block;
}

.factoryx_banner__image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    transition: opacity 0.3s ease-in-out;
}

/* Loaded state for smooth fade-in */
.factoryx_banner__image--loaded,
.factoryx_banner__image[src]:not([data-src]) {
    opacity: 1;
}

/* Images with data-src (lazy loaded) start with opacity 0 and show skeleton */
.factoryx_banner__image[data-src] {
    opacity: 0;
    background: linear-gradient(90deg, #f0f0f0 0%, #f8f8f8 50%, #f0f0f0 100%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
    min-height: 200px; /* Adjust based on your banner's typical height */
}

@keyframes skeleton-loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Desktop width classes based on grid system */
@media screen and (min-width: 769px) {
    /* 1 column = 25% */
    fx-app-banner[data-desktop-width="1"] {
        width: calc(25% - var(--grid-desktop-horizontal-spacing, 1rem) * 3 / 4) !important;
        max-width: calc(25% - var(--grid-desktop-horizontal-spacing, 1rem) * 3 / 4) !important;
    }
    
    /* 2 columns = 50% */
    fx-app-banner[data-desktop-width="2"] {
        width: calc(50% - var(--grid-desktop-horizontal-spacing, 1rem) * 2 / 4) !important;
        max-width: calc(50% - var(--grid-desktop-horizontal-spacing, 1rem) * 2 / 4) !important;
    }
    
    /* 3 columns = 75% */
    fx-app-banner[data-desktop-width="3"] {
        width: calc(75% - var(--grid-desktop-horizontal-spacing, 1rem) * 1 / 4) !important;
        max-width: calc(75% - var(--grid-desktop-horizontal-spacing, 1rem) * 1 / 4) !important;
    }
    
    /* 4 columns = 100% */
    fx-app-banner[data-desktop-width="4"] {
        width: calc(100%) !important;
        max-width: calc(100%) !important;
    }
}

/* Mobile width classes */
@media screen and (max-width: 768px) {
    /* 1 column = 50% (mobile typically shows 2 items per row) */
    fx-app-banner[data-mobile-width="1"] {
        width: calc(50% - var(--grid-mobile-horizontal-spacing, 0.5rem) / 2) !important;
        max-width: calc(50% - var(--grid-mobile-horizontal-spacing, 0.5rem) / 2) !important;
    }
    
    /* 2 columns = 100% */
    fx-app-banner[data-mobile-width="2"] {
        width: calc(100%) !important;
        max-width: calc(100%) !important;
    }
}

/* Ensure banner maintains grid item styling */
fx-app-banner.grid__item {
    margin: 0;
    padding: 0;
}

/* Hide on desktop if specified */
@media screen and (min-width: 769px) {
    fx-app-banner[data-hide-desktop="true"] {
        display: none !important;
    }
}

/* Hide on mobile if specified */
@media screen and (max-width: 768px) {
    fx-app-banner[data-hide-mobile="true"] {
        display: none !important;
    }
}