/* Unified image sizing per section */

/* Card grids (home case studies, case studies index, blog if images present) */
.posts .image {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    /* consistent landscape ratio */
    overflow: hidden;
    border-radius: 0.25rem;
}

.posts .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* crop while preserving composition */
    display: block;
}

/* Sidebar mini posts/cards */
.mini-posts .image {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    /* squares for tidy sidebar */
    overflow: hidden;
    border-radius: 0.25rem;
}

.mini-posts .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Testimonial/Team card banner area when using background-image inline */
.team-card .card-img-top {
    aspect-ratio: 16 / 9;
    background-size: cover;
    background-position: center;
}

@media (min-width: 992px) {
    .posts .image {
        aspect-ratio: 16 / 9;
    }

    .mini-posts .image {
        aspect-ratio: 1 / 1;
    }
}

/* Proven Process images: slightly smaller & uniform */
#provenProcess .image.object.fit {
    /* Slightly larger than previous, still not full width */
    max-width: clamp(300px, 100%, 680px);
    margin: 0 auto;
    /* center within column */
    width: 100%;
    overflow: hidden;
}

#provenProcess .image.object.fit.larger {
    max-width: 100%;
    width: 100%;
}

#provenProcess .larger .ProcessImage {
    max-height: 600px;
}

#provenProcess .medium-larger .ProcessImage {
    max-height: 450px;
}

/* Mobile ordering for Step 2 */
@media screen and (max-width: 736px) {
    #step1-image {
        order: 1;
    }

    #step1-text {
        order: 2;
    }

    #step2-image {
        order: 3;
    }

    #step2-text {
        order: 4;
    }

    #step3-image {
        order: 5;
    }

    #step3-text {
        order: 6;
    }
}

#step3-image {
    margin-bottom: 1rem;
}

#provenProcess .ProcessImage {
    width: 100%;
    height: auto;
    max-height: 400px;
    object-fit: contain;
    border-radius: 0.25rem;
    display: block;
    overflow: hidden;
}

/* No special desktop override needed; clamp keeps it mid-sized responsively */

/* Ensure .image.object elements don't cause overflow (Safari/fallback background-image styling) */
.image.object {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}

#provenProcess .image.object {
    overflow: hidden;
}