/* Approved portfolio media compositions. Type, page margins, chapter panels,
   banners and captions continue to come from Foundations. */
.portfolio-kit-page figure{position:relative;margin:0;min-width:0}
.portfolio-kit-page .gallery-description,.portfolio-kit-page .media-caption{font-style:italic;text-transform:none}
.portfolio-media .foundation-grid{grid-template-rows:auto!important;row-gap:0}
.portfolio-media .type-gallery{grid-row:1!important}
.portfolio-media .portfolio-row{display:grid;grid-template-columns:1fr;gap:var(--portfolio-gap,24px);align-items:start}
.portfolio-media .portfolio-layout-pair,
.portfolio-media .portfolio-layout-hero-pair,
.portfolio-media .portfolio-layout-detail-right,
.portfolio-media .portfolio-layout-detail-left{grid-template-columns:repeat(2,minmax(0,1fr))}
.portfolio-media .portfolio-layout-triptych{grid-template-columns:repeat(3,minmax(0,1fr))}
.portfolio-media .gallery-picture{height:auto;aspect-ratio:var(--media-ratio)!important}
.portfolio-media .gallery-picture img{object-fit:cover;object-position:var(--media-position,50% 50%)}
.portfolio-width-bleed .portfolio-film>.gallery-description{padding-inline:var(--editorial-margin);margin-bottom:0}
.portfolio-film{width:100%}
.portfolio-film .motion-study{position:relative;width:100%;overflow:hidden;background:#101010;margin-bottom:0}
.portfolio-film video{display:block;width:100%;height:100%;position:absolute;inset:0;object-fit:contain}
.portfolio-film .portfolio-cropped video{object-fit:cover;object-position:center}
.portfolio-poster{position:absolute;inset:0;pointer-events:none}
.portfolio-poster img{display:block;width:100%;height:100%;object-fit:cover}
.portfolio-film .gallery-description{position:static;margin:6px 0 0;text-align:left}
.portfolio-fragment-alias{position:absolute;top:0;left:0;width:0;height:0;pointer-events:none}
@media(min-width:768px){
 .portfolio-media .portfolio-layout-stack-right{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto auto;align-items:stretch}
 .portfolio-layout-stack-right figure:nth-child(1){grid-column:1;grid-row:1}
 .portfolio-layout-stack-right figure:nth-child(2){grid-column:1;grid-row:2}
 .portfolio-layout-stack-right figure:nth-child(3){grid-column:2;grid-row:1 / 3}
 .portfolio-layout-stack-right figure:nth-child(3) .gallery-picture{height:100%;aspect-ratio:auto!important}
 .portfolio-media .portfolio-layout-detail-right,.portfolio-media .portfolio-layout-detail-left{align-items:center}
 .portfolio-layout-detail-left figure:first-child{width:80%;justify-self:center}
}
@media(max-width:767px){
 .portfolio-media .portfolio-row{grid-template-columns:1fr;grid-template-rows:auto;gap:24px;padding:0;overflow:visible;aspect-ratio:auto}
}

/* Right-edge media keeps the content grid’s left inset. */
.portfolio-width-bleed-right .type-gallery{grid-column:2 / -1!important}

@media(min-width:768px){.portfolio-media .portfolio-layout-quartet{grid-template-columns:repeat(4,minmax(0,1fr))}}

.portfolio-width-bleed-left .type-gallery{grid-column:1 / -2!important}

@media(min-width:768px){
 .portfolio-media .portfolio-layout-single-right{grid-template-columns:repeat(2,minmax(0,1fr))}
 .portfolio-layout-single-right>figure{grid-column:2}
}

/* One-sided bleed pairs retain the same center line as the text grid. */
@media(min-width:768px){
 .portfolio-width-bleed-right{container-type:inline-size}
 .portfolio-width-bleed-right :is(.portfolio-layout-pair,.portfolio-layout-detail-left,.portfolio-layout-detail-right,.portfolio-layout-single-right){grid-template-columns:minmax(0,1fr) minmax(0,calc(50cqw - var(--portfolio-gap,24px)/2))}
}

/* Mobile art direction is independent of each desktop composition. */
@media(max-width:767px){
 .portfolio-media .gallery-picture{aspect-ratio:var(--mobile-image-ratio,var(--media-ratio))!important}
 .portfolio-media .gallery-picture img{object-position:var(--mobile-image-position,var(--media-position,50% 50%))}
 .portfolio-media:not(.mobile-carousel) .portfolio-row{row-gap:24px}
 .portfolio-media + .portfolio-media > .foundation-wrap{padding-top:min(var(--portfolio-space-before),48px)}
 .portfolio-width-bleed .type-gallery,.portfolio-width-bleed-left .type-gallery,.portfolio-width-bleed-right .type-gallery{grid-column:1/-1!important}
 /* Use the same slide width, gutter and snap positions as Foundations/Arc. */
 .portfolio-media.mobile-carousel .portfolio-row{display:flex;overflow-x:auto;gap:12px;padding-inline:6vw;scroll-padding-inline:6vw;scroll-snap-type:x mandatory}
 .portfolio-media.mobile-carousel .portfolio-row>figure{flex:0 0 100%;scroll-snap-align:center}
}