/* Responsive Image Widget Styles */

.rbm-responsive-image-wrapper {
    display: inline-block;
    max-width: 100%;
}

.rbm-responsive-image {
    display: inline-block;
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

/* Desktop: show only desktop image */
.rbm-responsive-image--tablet,
.rbm-responsive-image--mobile {
    display: none;
}

.rbm-responsive-image--desktop {
    display: inline-block;
}

/* Tablet: show tablet image if exists, otherwise show desktop */
@media (max-width: 1024px) {
    .rbm-responsive-image--desktop {
        display: none;
    }
    
    .rbm-responsive-image--tablet {
        display: inline-block;
    }
    
    /* If no tablet image exists, show desktop as fallback */
    .rbm-responsive-image-wrapper:not(:has(.rbm-responsive-image--tablet)) .rbm-responsive-image--desktop {
        display: inline-block;
    }
}

/* Mobile: show mobile image if exists, otherwise tablet, otherwise desktop */
@media (max-width: 767px) {
    .rbm-responsive-image--desktop,
    .rbm-responsive-image--tablet {
        display: none;
    }
    
    .rbm-responsive-image--mobile {
        display: inline-block;
    }
    
    /* If no mobile image, show tablet */
    .rbm-responsive-image-wrapper:not(:has(.rbm-responsive-image--mobile)):has(.rbm-responsive-image--tablet) .rbm-responsive-image--tablet {
        display: inline-block;
    }
    
    /* If no mobile and no tablet, show desktop */
    .rbm-responsive-image-wrapper:not(:has(.rbm-responsive-image--mobile)):not(:has(.rbm-responsive-image--tablet)) .rbm-responsive-image--desktop {
        display: inline-block;
    }
}

/* Caption Styles */
.rbm-responsive-image-caption {
    margin-top: 10px;
    font-size: 14px;
    color: #666;
}