/* Reblogger Content Images - Responsive Styling */

/* Main content image styling */
.reblogger-content-image {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    max-height: 400px !important;
    border-radius: 8px !important;
    display: block !important;
    margin: 20px auto !important;
    object-fit: contain !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
    transition: transform 0.2s ease !important;
}

.reblogger-content-image:hover {
    transform: scale(1.02) !important;
}

/* Tablet responsive styles */
@media (max-width: 768px) {
    .reblogger-content-image {
        max-height: 300px !important;
        margin: 15px auto !important;
    }
}

/* Mobile responsive styles */
@media (max-width: 480px) {
    .reblogger-content-image {
        max-height: 250px !important;
        margin: 10px auto !important;
        border-radius: 6px !important;
    }
}

/* Ensure images don't break out of containers */
.wp-block-group .reblogger-content-image,
.entry-content .reblogger-content-image,
.post-content .reblogger-content-image,
.content .reblogger-content-image {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Fallback for any AI-generated images that might not have the class */
.entry-content img[src*="reblogger"],
.post-content img[src*="reblogger"],
.content img[src*="reblogger"] {
    max-width: 100% !important;
    height: auto !important;
    max-height: 400px !important;
    display: block !important;
    margin: 20px auto !important;
    object-fit: contain !important;
}

/* Additional WordPress theme compatibility */
.wp-block-post-content .reblogger-content-image,
.wp-block-post-content img[src*="reblogger"] {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
}

/* Print styles */
@media print {
    .reblogger-content-image {
        max-height: none !important;
        page-break-inside: avoid !important;
        margin: 10px auto !important;
    }
}