/* ========================================
   ARTICLE DISPLAY - Float-wrap layout
   Used by: _ArticleDisplay.cshtml partial
   ======================================== */

/* Image floated left - text wraps around on the right.
   When text extends below the image, it flows full-width. */

.article-image-float {
    float: left;
    margin: 0 20px 15px 0;
    max-width: 75%;
}

.article-image-float img {
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 4px;
}

/* Circular variant for Remembering / Pioneers pages */
.article-image-float.article-image-circular {
    max-width: 280px;
}

.article-image-float.article-image-circular img {
    border-radius: 50%;
    max-height: 280px;
}

/* Text that wraps around the floated image */
.article-text-wrap {
    overflow: visible;
}

.article-text-wrap p {
    text-align: justify;
}

/* Article title */
.article-content h6 {
    margin-bottom: 8px;
}

/* Mobile: image stacks above text at full width */
@media (max-width: 767px) {
    .article-image-float {
        float: none;
        max-width: 100%;
        margin: 0 0 15px 0;
    }

    .article-image-float img {
        max-height: 350px;
        width: 100%;
        object-fit: cover;
    }

    .article-image-float.article-image-circular {
        max-width: 200px;
        margin: 0 auto 15px;
    }

    .article-image-float.article-image-circular img {
        max-height: 200px;
    }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 991px) {
    .article-image-float {
        max-width: 65%;
    }
}