/* Related-reading block from internal linker (fallback when inline anchors are scarce) */
.abc-related-reading {
    margin: 1.5em 0;
    padding: 1em 1.25em;
    border-left: 4px solid rgba(0, 0, 0, 0.12);
    background: rgba(0, 0, 0, 0.03);
}

.abc-related-reading p {
    margin: 0;
}

/* Front-end styles for AI Blog Content article imagery */

.abc-article-image {
    margin: 20px 0;
}

.abc-article-image img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    display: block;
}

/* Layout variants for in-article images.
 * We also rely on core .alignleft/.alignright/.aligncenter classes so
 * themes can integrate naturally.
 */
.abc-article-image--full {
    text-align: center;
}

.abc-article-image--half-left,
.abc-article-image--half-right {
    max-width: 50%;
}

.abc-article-image--half-left {
    float: left;
    margin: 10px 20px 20px 0;
}

.abc-article-image--half-right {
    float: right;
    margin: 10px 0 20px 20px;
}

@media (max-width: 782px) {
    .abc-article-image--half-left,
    .abc-article-image--half-right {
        float: none;
        max-width: 100%;
        margin: 16px 0;
    }
}

/* Headings stay full-width: they clear floated half-width images so titles are not
 * squeezed into the narrow column beside the float (common with left/right layouts). */
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
    clear: both;
}

/* Same-parent fallback when headings are not under .entry-content */
.abc-article-image--half-left ~ h1,
.abc-article-image--half-left ~ h2,
.abc-article-image--half-left ~ h3,
.abc-article-image--half-left ~ h4,
.abc-article-image--half-left ~ h5,
.abc-article-image--half-left ~ h6,
.abc-article-image--half-right ~ h1,
.abc-article-image--half-right ~ h2,
.abc-article-image--half-right ~ h3,
.abc-article-image--half-right ~ h4,
.abc-article-image--half-right ~ h5,
.abc-article-image--half-right ~ h6 {
    clear: both;
}