/**
 * Category Banners - Frontend Styles
 * Author: CtrlZ Studio - Karol Jasiówka
 */

.ctb-banner-wrapper {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

.ctb-banner {
    width: 100%;
    display: block;
    line-height: 0;
}

.ctb-banner img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* Desktop (domyślne wyświetlanie) */
.ctb-banner-desktop {
    display: block;
}

.ctb-banner-tablet,
.ctb-banner-mobile {
    display: none;
}

/* Tablet (768px - 1024px) */
@media screen and (max-width: 1024px) and (min-width: 768px) {
    .ctb-banner-desktop {
        display: none;
    }
    
    .ctb-banner-tablet {
        display: block;
    }
    
    .ctb-banner-mobile {
        display: none;
    }
}

/* Mobile (do 767px) */
@media screen and (max-width: 767px) {
    .ctb-banner-desktop,
    .ctb-banner-tablet {
        display: none;
    }
    
    .ctb-banner-mobile {
        display: block;
    }
}

/* Fallback - jeśli brak grafiki dla danego urządzenia */
@media screen and (max-width: 1024px) and (min-width: 768px) {
    /* Jeśli nie ma grafiki tablet, pokaż desktop */
    .ctb-banner-wrapper:not(:has(.ctb-banner-tablet img)) .ctb-banner-desktop {
        display: block;
    }
}

@media screen and (max-width: 767px) {
    /* Jeśli nie ma grafiki mobile, pokaż tablet lub desktop */
    .ctb-banner-wrapper:not(:has(.ctb-banner-mobile img)):has(.ctb-banner-tablet img) .ctb-banner-tablet {
        display: block;
    }
    
    .ctb-banner-wrapper:not(:has(.ctb-banner-mobile img)):not(:has(.ctb-banner-tablet img)) .ctb-banner-desktop {
        display: block;
    }
}

/* Lazy loading optimization */
.ctb-banner img[loading="lazy"] {
    background: #f0f0f0;
}

/* Animation on load (optional) */
.ctb-banner-wrapper {
    animation: ctbFadeIn 0.5s ease-in-out;
}

@keyframes ctbFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Accessibility */
.ctb-banner img {
    max-width: 100%;
    height: auto;
}

/* Print styles */
@media print {
    .ctb-banner-tablet,
    .ctb-banner-mobile {
        display: none !important;
    }
    
    .ctb-banner-desktop {
        display: block !important;
    }
}