/*
 * Responsive image compatibility layer.
 *
 * Eligible images are wrapped in <picture> for AVIF/WebP negotiation. Some
 * existing components position a direct child <img> as a full-bleed layer;
 * these rules preserve that layout contract explicitly on the wrapper.
 */

picture.responsive-picture {
    display: block;
}

picture.responsive-picture > img {
    display: block;
}

/*
 * Reserve the final card/media geometry before the source is downloaded.
 * The ratios live on site-owned frames, while intrinsic width/height in the
 * HTML keeps the fallback stable when component CSS is delayed.
 */
.article-card__image {
    /* Blog card assets are generated as 16:9 images. Keep the frame in the
       same ratio so the server and browser do not crop the card differently. */
    aspect-ratio: 16 / 9;
}

.country-catalog__image {
    aspect-ratio: 3 / 4;
}

.post-cover {
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.article-card__image > picture.responsive-picture,
.country-catalog__image > picture.responsive-picture,
.post-cover > picture.responsive-picture,
.review-gallery__item > picture.responsive-picture,
.instagram-card > picture.responsive-picture {
    width: 100%;
    height: 100%;
}

.article-card__image > picture.responsive-picture > img,
.country-catalog__image > picture.responsive-picture > img,
.post-cover > picture.responsive-picture > img,
.review-gallery__item > picture.responsive-picture > img,
.instagram-card > picture.responsive-picture > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Full-bleed cover images used as section backgrounds. */
.home-hero > picture.responsive-picture,
.inner-hero > picture.responsive-picture,
.service-hero > picture.responsive-picture,
.service-request__panel > picture.responsive-picture,
.error-page--photo > picture.responsive-picture {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    border-radius: inherit;
    overflow: hidden;
}

.home-hero > picture.responsive-picture > img,
.inner-hero > picture.responsive-picture > img,
.service-hero > picture.responsive-picture > img,
.service-request__panel > picture.responsive-picture > img,
.error-page--photo > picture.responsive-picture > img {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    border-radius: inherit;
}

/* Keep common media frames stable when a picture wrapper is introduced. */
.destination-card > picture.responsive-picture,
.service-scenario__image > picture.responsive-picture,
.service-criteria__image > picture.responsive-picture,
.service-editorial__image > picture.responsive-picture,
.audience-card__media > picture.responsive-picture,
.transparency-card__media > picture.responsive-picture,
.early-benefit-card__image > picture.responsive-picture,
.early-dest-card__image > picture.responsive-picture,
.early-link-card__image > picture.responsive-picture,
.oman-resort-card__media > picture.responsive-picture,
.country-catalog__image > picture.responsive-picture,
.article-card__image > picture.responsive-picture,
.post-cover > picture.responsive-picture,
.visual-story figure > div > picture.responsive-picture {
    display: block;
    width: 100%;
    height: 100%;
}

.post-cover > picture.responsive-picture,
.prose--post .post-inline-media > picture.responsive-picture {
    position: relative;
    line-height: 0;
}

.post-cover > picture.responsive-picture > img,
.prose--post .post-inline-media > picture.responsive-picture > img {
    position: absolute;
    inset: 0;
    max-width: none;
    max-height: none !important;
}

/* Inline article media keeps one predictable 16:9 frame after the
   responsive-image middleware wraps the source in <picture>. */
.prose--post .post-inline-media {
    display: block;
}

.prose--post .post-inline-media > picture.responsive-picture {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 20px;
}

.prose--post .post-inline-media > picture.responsive-picture > img,
.prose--post .post-inline-media > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 620px) {
    .country-catalog__image {
        aspect-ratio: 4 / 5;
    }

    .home-hero > picture.responsive-picture > img,
    .inner-hero > picture.responsive-picture > img,
    .service-hero > picture.responsive-picture > img,
    .service-request__panel > picture.responsive-picture > img,
    .error-page--photo > picture.responsive-picture > img {
        object-position: center center;
    }
}