/* Image Caption Styles for Frontend */
.post-content-body figure {
    margin: 20px 0;
    text-align: center;
    display: block;
    clear: both;
    width: 100%;
}

.post-content-body figure img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.post-content-body figcaption {
    font-style: italic;
    font-size: 0.9em;
    color: #ddd;
    text-align: center;
    padding: 5px;
}

/* Responsive image alignment */
.post-content-body img[style*="float: left"] {
    margin: 0 20px 20px 0;
}

.post-content-body img[style*="float: right"] {
    margin: 0 0 20px 20px;
}

.post-content-body img[style*="margin: 15px auto"] {
    display: block;
    margin: 15px auto;
}

/* Figure alignment styles */
.post-content-body figure[style*="float: left"] {
    margin: 0 20px 30px 0;
    text-align: left;
    clear: left;
}

.post-content-body figure[style*="float: right"] {
    margin: 0 0 30px 20px;
    text-align: right;
    clear: right;
}

.post-content-body figure[style*="margin: 15px auto"],
.post-content-body figure[style*="margin: 20px 0; text-align: center"] {
    margin: 30px auto;
    text-align: center;
    display: block;
    clear: both;
}

/* Additional styles to ensure proper spacing between consecutive figures */
.post-content-body figure + figure {
    margin-top: 20px;
}

.post-content-body figure + p {
    margin-top: 15px;
}

.post-content-body p + figure {
    margin-top: 15px;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .post-content-body figure[style*="float: left"],
    .post-content-body figure[style*="float: right"] {
        float: none !important;
        margin: 30px 0 !important;
        text-align: center;
        clear: both;
        display: block;
    }
    
    .post-content-body img[style*="float: left"],
    .post-content-body img[style*="float: right"] {
        float: none !important;
        margin: 15px auto !important;
        display: block;
    }
    
    .post-content-body figcaption {
        text-align: center;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .post-content-body figcaption {
        background-color: #2d3748;
        color: #e2e8f0;
        border-left-color: #4299e1;
    }
}