/**
 * Responsive Image Block - Frontend Styles
 * IMPORTANT: Only targets images inserted via the Responsive Image block
 * Uses specific class selectors to avoid interfering with other images
 */

/* Hide on Mobile (<768px) - Only for responsive image blocks */
@media (max-width: 767px) {
    .rib-hide-mobile {
        display: none !important;
    }
}

/* Hide on Tablet (768px - 1023px) - Only for responsive image blocks */
@media (min-width: 768px) and (max-width: 1023px) {
    .rib-hide-tablet {
        display: none !important;
    }
}

/* Hide on Desktop (≥1024px) - Only for responsive image blocks */
@media (min-width: 1024px) {
    .rib-hide-desktop {
        display: none !important;
    }
}

/* Responsive Images - Prevent layout shift */
/* ONLY applies to images within .rib-responsive containers */
.rib-responsive img,
.rib-priority img {
    height: auto;
    max-width: 100%;
}

/* Priority images - Additional performance hints */
/* ONLY applies to images within .rib-priority containers */
.rib-priority img {
    content-visibility: auto;
}

/* Aspect ratio containers for CLS prevention */
/* ONLY applies to .rib-responsive blocks */
.rib-responsive.wp-block-image,
.rib-priority.wp-block-image {
    position: relative;
}

/* Inline SVG Support */
/* ONLY applies to SVGs converted by this plugin (they have .inline-svg class) */
/* NO default fill - SVGs render with original colors */
.rib-responsive .inline-svg,
.rib-priority .inline-svg {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Responsive inline SVG in figure */
/* ONLY applies to figures with responsive image classes */
figure.rib-responsive .inline-svg,
figure.rib-priority .inline-svg {
    width: 100%;
    height: auto;
}

/* Print styles - show all images */
/* ONLY affects images controlled by this plugin */
@media print {
    .rib-hide-mobile,
    .rib-hide-tablet,
    .rib-hide-desktop {
        display: block !important;
    }
}