/* LLM Auto WP Frontend Styles */

/* --- Blog Post Layout Styles (v67 - Alternating Image Float) --- */

/* Optional: Add styles to the main content area if needed */
/* .llm-generated-post-content { } */

/* Common styles for all image containers */
.blog-post-image-container {
    width: 100%;            /* Container takes full width initially */
    max-width: 250px;       /* **Max width for the image (Adjust 350px as needed)** */
    margin-top: 10px;       /* Space above image */
    margin-bottom: 60px;    /* **Your preferred bottom margin** */
    /* Add box-sizing if not globally applied */
    box-sizing: border-box; 
}

/* Styles for images floated LEFT */
.blog-post-image-container-left {
    float: left;
    margin-right: 45px;     /* **Your preferred right margin** */
    clear: left;            /* Optional: Helps prevent overlapping if heights vary */
}

/* Styles for images floated RIGHT */
.blog-post-image-container-right {
    float: right;
    margin-left: 45px;      /* **Add left margin for right-floated images** */
    clear: right;           /* Optional: Helps prevent overlapping */
}

/* Image styling */
.blog-post-image-container img {
    display: block;         /* Removes potential extra space */
    width: 100%;            /* Image fills its container */
    height: auto;           /* Maintain aspect ratio */
    max-width: 100%;        /* Redundant but safe */
}



/* --- Clearfix --- */
/* Apply this class to the parent element directly containing the floated image */
/* Or apply it to block elements (like <p>, <h2>, <h3>) that should appear *after* the float */


/* Force paragraphs/headings AFTER the image container to clear the float */
/* This is often necessary when the image div is inside another element */
.blog-post-image-container + h2,
.blog-post-image-container + h3,
.blog-post-image-container + p,
.blog-post-image-container + ul,
.blog-post-image-container + ol {
    clear: both; /* Clear floats from either side */
}
/* You might need to adjust the selectors above based on your specific HTML structure */





/* --- Mobile Styles --- */
@media (max-width: 767px) { /* Adjust breakpoint as needed */
    .blog-post-image-container,
    .blog-post-image-container.image-left,
    .blog-post-image-container.image-right {
        float: none;        /* Remove float */
        max-width: 95%;     /* Slightly less than full width for small padding */
        width: auto;        /* Let width be determined by max-width */
        display: block;     /* Ensure it's a block */
        margin-left: auto;  /* Center container */
        margin-right: auto; /* Center container */
        margin-bottom: 30px; /* Adjust mobile bottom margin */
        margin-top: 20px;    /* Adjust mobile top margin */
    }
}


/* --- Product Snippet Styles (Ensure clear:both) --- */
.llm-auto-wp-product-snippet {
    /* ... existing styles ... */
    clear: both; /* Ensure snippet appears below floated content */
    margin-top: 40px; /* Add some space above snippet */
}

/* ... (rest of your existing product snippet styles) ... */