/* Shared media frames. Loaded after page-specific styles on every route. */

/* Product identification stays complete inside the same 16:9 frame. */
.model-directory img,
#comparison-table img,
.configuration-choice>img,
.flow-model-choice>img,
.flow-context img,
.flow-inventory-results>article>img,
.enquiry-summary img,
.detail-aside img,
.equipment-intro img{
 display:block;
 width:100%;
 height:auto;
 min-height:0;
 max-height:none;
 aspect-ratio:16/9;
 object-fit:contain;
 object-position:center;
}

/* Keep a missing-photo fallback aligned with the product cards. */
.flow-model-choice>.flow-photo-pending,
.flow-inventory-results>article>.flow-photo-pending{
 width:100%;
 height:auto;
 min-height:0;
 max-height:none;
 aspect-ratio:16/9;
}

/* Feature photography and specification graphics retain all edge detail. */
.feature-article figure img,
.feature-article>div>img{
 display:block;
 width:100%;
 height:auto;
 min-height:0;
 max-height:none;
 aspect-ratio:3/2;
 object-fit:contain;
 object-position:center;
}

/* These feature sources show the whole vehicle, including their mapped copies. */
.feature-article img[src*="s700-product.png"],
.feature-article img[src*="s500-photo-16."],
.feature-article img[src*="smh110-blue-illustration"]{
 aspect-ratio:16/9;
}

/* Match the measured gallery frame while retaining the complete photograph. */
.detail-gallery img{
 display:block;
 width:100%;
 height:auto;
 min-height:0;
 max-height:none;
 aspect-ratio:587/325;
 object-fit:contain;
 object-position:center;
}

/* The full-image viewer follows the original image, bounded only by the viewport. */
#detail-photo-image{
 display:block;
 width:100%;
 height:auto;
 min-height:0;
 max-height:calc(100dvh - 160px);
 aspect-ratio:auto;
 object-fit:contain;
 object-position:center;
}

/* Homepage frames measured from the fully loaded reference, 2026-09-25. */
#trim .trim-selector-photo img{width:100%;height:auto;min-height:0;max-height:none;aspect-ratio:16/9;object-fit:contain;padding:0}
#trim .trim-selector-models img{width:100%;height:auto;min-height:0;max-height:none;aspect-ratio:4/3;object-fit:contain}
.feature-layout>img,.feature-layout.reverse>img{width:100%;height:auto;min-height:0;max-height:none;aspect-ratio:21/10;object-fit:contain;background:#fff}
#walkaround .film-cover>img,#walkaround .film-cover.film-scene>img{width:100%;height:auto;min-height:0;max-height:none;aspect-ratio:64/25;object-fit:contain;background:#fff}
#walkaround .film-cover.film-scene>img{object-fit:cover}
.technology-stage>img{width:100%;height:auto;min-height:0;max-height:none;aspect-ratio:16/9;object-fit:contain;background:#fff}
.video-card img{width:100%;height:auto;min-height:0;max-height:none;aspect-ratio:708/650;object-fit:contain;background:#fff}
.lower-consultation-topics .lower-photo>img,.lower-consultation-topics .lower-topic-type{width:100%;height:auto;min-height:0;max-height:none;aspect-ratio:727/575;object-fit:contain;background:#fff}
.lower-design-details .lower-photo>img,.lower-design-details .lower-spec-guide>div{width:100%;height:auto;min-height:0;max-height:none;aspect-ratio:21/10;object-fit:contain}
.gallery-grid img,.gallery-grid button:first-child img,.model-photo-empty img{width:100%;height:auto;min-height:0;max-height:none;aspect-ratio:587/325;flex:none;object-fit:contain;background:#fff}
.range-grid img{width:100%;height:auto;min-height:0;max-height:none;aspect-ratio:8/5;object-fit:contain;background:#fff}
.comparison-grid img{width:100%;height:auto;min-height:0;max-height:none;aspect-ratio:16/9;object-fit:contain}
/* Both gallery surfaces use the same non-destructive detail framing. */
.gallery-media{display:block;width:100%;aspect-ratio:3/2;overflow:hidden;background:#fff}
.gallery-grid .gallery-media img,.detail-gallery .gallery-media img{display:block;width:100%;height:100%;aspect-ratio:auto;object-fit:contain;transform:scale(var(--detail-scale,1));transform-origin:var(--detail-origin,center)}
.photo-media{width:100%;height:min(65dvh,720px);overflow:hidden;background:#fff;margin-inline:auto}
.photo-media #full-photo,.photo-media #detail-photo-image{display:block;width:100%;height:100%;max-height:none;aspect-ratio:auto;object-fit:contain;transform:scale(var(--detail-scale,1));transform-origin:var(--detail-origin,center)}
.gallery-media[data-focus="suspension"],.photo-media[data-focus="suspension"]{--detail-scale:2.15;--detail-origin:59% 45%}
.gallery-media[data-focus="winch"],.photo-media[data-focus="winch"]{--detail-scale:1.55;--detail-origin:57% 47%}
.photo-media[data-focus]{aspect-ratio:587/325;height:auto;width:min(100%,calc(65dvh * 587 / 325))}
.photo-media[data-focus] img{aspect-ratio:587/325!important;height:auto!important;object-fit:contain}
/* Two shopping destinations use the reference's 955:500 image panels. */
.shopping-tools>div{padding:0 0 32px;min-height:0;overflow:hidden}
.shopping-tools>div>img{display:block;width:100%;height:auto;min-height:0;max-height:none;aspect-ratio:955/500;object-fit:contain;background:#fff;margin-bottom:28px}
.shopping-tools>div>h2,.shopping-tools>div>p,.shopping-tools>div>.button{margin-left:8%;margin-right:8%}
#performance .performance-lead.performance-scene>div,#performance .performance-grid article:last-child.performance-scene>div{padding:24px 32px 24px 28px}
@media(max-width:1100px){#performance .performance-lead.performance-scene>div,#performance .performance-grid article:last-child.performance-scene>div{padding:24px}}
/* Every model uses the same first-media ratio on a narrow screen. */
@media(max-width:650px){.hero .hero-media{height:auto;min-height:0;aspect-ratio:64/25}}