/* Artwork presentation. The work dominates; the interface steps back.
   Images are never cropped: object-fit is always "contain". */

.artwork-card__frame {
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 5;
    padding: clamp(16px, 3vw, 40px);
    background: var(--color-fog);
}

.artwork-card__frame img {
    max-inline-size: 100%;
    max-block-size: 100%;
    inline-size: auto;
    block-size: auto;
    object-fit: contain;
    transition: opacity var(--transition);
}

.card:hover .artwork-card__frame img {
    opacity: 0.9;
}

/* Neutral, adaptable viewer surfaces (docs/DESIGN.md §35). */
.surface--paper {
    background: var(--color-paper);
    border: 1px solid var(--color-border);
}

.surface--fog {
    background: var(--color-fog);
}

.surface--ink {
    background: var(--color-ink);
}

/* Detail page viewer */
.artwork-viewer {
    display: grid;
    place-items: center;
    padding: clamp(24px, 6vw, 96px) var(--page-padding);
    min-block-size: min(78vh, 900px);
}

.artwork-viewer.surface--paper {
    border-inline: 0;
}

.artwork-viewer img {
    max-inline-size: 100%;
    max-block-size: min(82vh, 1100px);
    inline-size: auto;
    block-size: auto;
    object-fit: contain;
}

.artwork-viewer__caption {
    padding-block-start: var(--space-3);
    font-size: var(--text-caption);
    color: var(--color-graphite);
}

.artwork-gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--grid-gap);
}

.artwork-gallery figure > div {
    display: grid;
    place-items: center;
    padding: clamp(16px, 3vw, 48px);
}

.artwork-gallery img {
    max-block-size: 70vh;
    inline-size: auto;
    object-fit: contain;
}

@media (max-width: 640px) {
    .artwork-gallery {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Full-bleed artwork: a visual pause. No overlay, frame or shadow; caption outside. */
.full-bleed {
    display: grid;
    place-items: center;
    padding: clamp(24px, 5vw, 80px) var(--page-padding);
}

.full-bleed img {
    max-block-size: 86vh;
    inline-size: auto;
    object-fit: contain;
}

.full-bleed__caption {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-2) var(--space-6);
    padding-block-start: var(--space-4);
    font-size: var(--text-small);
    color: var(--color-graphite);
}

.full-bleed__caption a {
    color: var(--color-ink);
}

/* Artist profile opening */
.artist-intro {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--space-10) var(--grid-gap);
    align-items: end;
}

.artist-intro__text {
    grid-column: 1 / span 7;
}

.artist-intro__text > * + * {
    margin-block-start: var(--space-6);
}

.artist-intro__portrait {
    grid-column: 9 / -1;
    aspect-ratio: 4 / 5;
    background: var(--color-fog);
    overflow: hidden;
}

.artist-intro__portrait img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

@media (max-width: 860px) {
    .artist-intro__text,
    .artist-intro__portrait {
        grid-column: 1 / -1;
    }

    .artist-intro__portrait {
        max-inline-size: 420px;
    }
}