/* One natural-aspect-ratio image presentation across Wrticles.
   Loaded AFTER route bundles to override legacy 16:9/16:10 cover frames.
   This changes display only; uploaded originals and responsive image sources
   remain uncropped. Keep brand art, avatars and icons out of these selectors. */

/* All public article cards: home, sponsored, category, tag, search, archive,
   author, profile and related articles use the same proportions as the photo. */
.post-card .card-image,
.home-post-card .home-card-media .card-image,
.post-card .card-image.wrt-card-image-adaptive {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    line-height: 0;
    background: transparent !important;
    overflow: hidden;
}
.post-card .card-image::before,
.post-card .card-image.wrt-card-image-adaptive::before {
    content: none !important;
    background: none !important;
}
.post-card .card-image img,
.home-post-card .home-card-media .card-image img,
.post-card .card-image.wrt-card-image-adaptive img {
    display: block !important;
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: center !important;
    border-radius: 0 !important;
    transform: none !important;
}
.post-card:hover .card-image img,
.home-post-card:hover .home-card-media .card-image img {
    transform: none !important;
}

/* The article's main featured image follows the same original proportions.
   Do not impose a viewport height or a cover crop on tall/wide images. */
.article .hero-figure,
.article .hero-figure .hero-figure-media {
    display: block !important;
    position: relative;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    overflow: visible;
}
.article .hero-figure .hero-figure-media .hero-image {
    display: block !important;
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    transform: none !important;
    margin-inline: auto;
}
/* Images inserted in an article and the publishing/approval previews also
   preserve their natural ratio, including on narrow screens. */
:is(.article-content, .prose, .page-content, .rich-surface) img:not(.avatar),
.preview-image,
.wrt-review-featured-image img {
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
}
@media (max-width: 650px) {
    .post-card .card-image,
    .home-post-card .home-card-media .card-image {
        aspect-ratio: auto !important;
    }
}

/* Full-width, natural-height preview: the uploaded image remains one source on
   desktop/mobile, including article editor and admin approval. */
.preview-image,
.wrt-review-featured-image img,
.wrt-review-preview-image {
    display: block !important;
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: center !important;
    transform: none !important;
}
/* Don't stretch the image to match neighboring card heights. */
.post-card .home-card-media,
.home-post-card .home-card-media {
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
}

/* Full article uploads: fill only the content column; height remains natural. */
.article .article-content img:not(.avatar):not(.emoji),
.article .prose img:not(.avatar):not(.emoji) {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
}