/* Case-study media roles share a height; reference files keep their full proportions. */
#work.case-gallery,#studio-work.case-gallery{container-type:inline-size}
#work.case-gallery>.case-story,#studio-work.case-gallery>.case-story{--case-photo-height:min(68svh,640px,calc((100cqw - 24px)/1.6))}
#work.case-gallery>.case-story:has(.reference-strip){grid-template-columns:max-content minmax(0,1fr);column-gap:var(--case-image-gap);align-items:start}
#work .case-context .reference-strip{display:grid;grid-template-columns:repeat(2,max-content);grid-template-rows:repeat(2,minmax(0,1fr));width:max-content;height:var(--case-photo-height);gap:var(--case-image-gap)!important;align-items:start}
#work .case-context .reference-strip .image-open{display:block;width:max-content!important;max-width:none;height:calc((var(--case-photo-height) - var(--case-image-gap))/2)!important;aspect-ratio:auto!important;overflow:hidden}
#work .case-context .reference-strip img{display:block;position:static!important;width:auto!important;height:100%!important;max-width:none!important;object-fit:contain!important;transform:none!important}
#work .case-results .result-scroll>div,#studio-work .case-results .result-scroll>div{flex:0 0 calc(var(--case-photo-height)*.75)!important}
#work .case-results .media-stage,#studio-work .case-results .media-stage{height:var(--case-photo-height)!important;aspect-ratio:3/4;width:100%;overflow:hidden}
#work .case-results .media-stage img,#studio-work .case-results .media-stage img{position:static!important;display:block;width:100%!important;height:100%!important;max-width:none;object-fit:cover!important;object-position:center;transform:none!important}
/* Full-case comparison uses the same two media roles and gap, without touching originals. */
#case-dialog .proof-pair{container-type:inline-size;--case-photo-height:min(68svh,640px,calc((100cqw - 24px)/1.6));gap:var(--case-image-gap);grid-template-columns:calc(var(--case-photo-height)*var(--case-ref-ratio,.75)) minmax(0,1fr)}
#case-dialog .proof-pair>div:first-child .media-stage img{position:static!important;height:100%!important;width:auto!important;max-width:100%!important;transform:none!important;margin-left:auto}
#case-dialog .proof-pair .media-carousel .carousel-track{height:var(--case-photo-height)!important}
#case-dialog .proof-pair .result-scroll>div{flex:0 0 calc(var(--case-photo-height)*.75)!important}
#case-dialog .proof-pair .media-stage{height:var(--case-photo-height)!important;width:min(100%,calc(var(--case-photo-height)*.75));aspect-ratio:3/4;overflow:hidden}
#case-dialog .proof-pair .result-scroll .media-stage img{position:static!important;display:block;width:100%!important;height:100%!important;object-fit:cover!important;transform:none!important}
@media(min-width:768px) and (max-width:1023px){#work.case-gallery>.case-story,#studio-work.case-gallery>.case-story{--case-photo-height:min(64svh,560px,calc((100cqw - 24px)/1.6))}}
@media(max-width:767px){
 #work.case-gallery>.case-story:has(.reference-strip){grid-template-columns:minmax(0,1fr)}
 #work .case-context .reference-strip{display:flex;width:100%;height:auto;gap:var(--case-image-gap)!important;overflow-x:auto;align-items:start}
 #work .case-context .reference-strip .image-open{flex:0 0 auto;width:max-content!important;height:calc((100cqw - 3*var(--case-image-gap))/3.1)!important}
 #work .case-results .result-scroll>div,#studio-work .case-results .result-scroll>div{flex:0 0 88%!important}
 #work .case-results .media-stage,#studio-work .case-results .media-stage{height:auto!important;aspect-ratio:3/4}
 #case-dialog .proof-pair{grid-template-columns:minmax(0,1fr)}
 #case-dialog .proof-pair .media-carousel .carousel-track{height:auto!important}
 #case-dialog .proof-pair>div:first-child .media-stage img{width:100%!important;height:100%!important;object-fit:contain}
 #case-dialog .proof-pair .result-scroll>div{flex:0 0 88%!important}
 #case-dialog .proof-pair .media-stage{width:88%;height:auto!important;aspect-ratio:3/4}
 #case-dialog .proof-pair .result-scroll .media-stage{width:100%}
}