/* Shared image presentation. Explicit classes keep hero backgrounds and dialogs untouched. */
:root {
    --media-surface: #e7e2d8;
    --media-inset: clamp(1rem, 2vw, 2rem);
    --media-offset: clamp(.65rem, 1.6vw, 1.5rem);
}

.section--alt { --media-surface: #dcd6ca; }
.section--dark { --media-surface: #262626; }

.media-frame.media-frame--artwork {
    box-sizing: border-box;
    min-width: 0;
    padding: var(--media-inset);
    background: var(--media-surface);
}

/* Reproductions with a margin already present in the source need less extra space. */
.media-frame.media-frame--paper { --media-inset: clamp(.5rem, .8vw, .85rem); }

.media-frame.media-frame--artwork > img {
    display: block;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    padding: 0;
    object-fit: contain;
    object-position: center;
}

/* Keep natural sizing for the two standalone reproductions. */
.artwork-detail-hero__stage.media-frame--artwork > img { height: clamp(34rem, 49vw, 48rem); }
.collector-first__artwork.media-frame--artwork > img { height: auto; }

.media-frame.media-frame--photo {
    position: relative;
    isolation: isolate;
    box-sizing: border-box;
    min-width: 0;
    padding: 0 var(--media-offset) var(--media-offset) 0;
    background: transparent;
}

.media-frame.media-frame--photo::before {
    position: absolute;
    z-index: -1;
    inset: var(--media-offset) 0 0 var(--media-offset);
    border: 0;
    background: var(--media-surface);
    content: '';
    pointer-events: none;
}

/* Preserve captions and controls inside the photograph, clear of its backing. */
.artist-portrait__figure.media-frame--photo::after { right: var(--media-offset); bottom: var(--media-offset); }
.artist-portrait__figure.media-frame--photo figcaption { right: calc(1.25rem + var(--media-offset)); bottom: calc(1.25rem + var(--media-offset)); }
.artist-portrait__figure.media-frame--photo .artist-portrait__arrow { right: calc(1.25rem + var(--media-offset)); }

/* Existing contain variants now get their spacing from the frame, not from the image. */
.home-program-card__image.is-contain.media-frame--artwork img,
.exhibition-index-card:nth-child(n+2) .exhibition-index-card__image.media-frame--artwork img { padding: 0; }

/* Keep card images inside their row when captions are taller than the photograph. */
.home-program-card__image.media-frame { min-height: 0; }

@media (max-width: 991.98px) {
    .artwork-detail-hero__stage.media-frame--artwork > img { height: min(65svh, 40rem); }
}

@media (max-width: 767.98px) {
    .artwork-detail-hero__stage.media-frame--artwork > img { height: min(56svh, 30rem); }
}

/* Artwork lists: one grey surface for the reproduction and its caption. */
:is(.home-work, .catalog-card, .artist-work, .exhibition-artwork, .artwork-related-card) {
    background: var(--media-surface);
    padding-bottom: 1.25rem;
    isolation: isolate;
}
:is(.home-work, .catalog-card, .artist-work, .exhibition-artwork, .artwork-related-card) .media-frame--artwork {
    padding: 0;
    margin-bottom: 0;
    background: transparent;
}
/* White backgrounds embedded in source reproductions merge with the card. */
:is(.home-work, .catalog-card, .artist-work, .exhibition-artwork, .artwork-related-card) .media-frame--artwork > img {
    mix-blend-mode: multiply;
}
.home-work > div, .artist-work__caption, .catalog-card__heading,
.artwork-related-card > div {
    padding: 1.25rem 1.25rem 0;
}
.catalog-card__meta, .artwork-related-card > p,
.exhibition-artwork > p { padding-inline: 1.25rem; }
.exhibition-artwork h3 { padding: 1.25rem 1.25rem 0; }
.home-works__grid, .artwork-catalog__grid, .artist-works-grid,
.exhibition-selected__grid, .artwork-related__grid { align-items: stretch; }