/* Shared image portion used by album and auction cards. The card layouts
   remain context-specific; only the cover frame is intentionally shared. */
.c3-media-cover {
    box-sizing: border-box;
    position: relative;
    display: grid;
    grid-template: minmax(0, 1fr) / minmax(0, 1fr);
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 4 / 3;
    place-items: center;
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(135deg, #e8f1f7, #cbdde9);
    text-decoration: none;
}

/* The mini auction card has a 1px border. Extend its cover into that border
 * so the image frame reaches both outer edges; this rule intentionally has
 * higher specificity than the shared 100% cover width above. */
.c3-media-cover.c3-auction-mini-cover {
    width: calc(100% + 2px);
    margin: -1px -1px 0;
}

/* Keep the large auction card's image area at the shared 4:3 ratio. Its
 * wider cover column is defined by the auction card layout. */
.c3-media-cover.c3-auction-card-cover {
    aspect-ratio: 4 / 3;
}

.c3-media-cover-backdrop {
    position: absolute;
    z-index: 0;
    inset: 0;
    display: block;
    overflow: hidden;
    pointer-events: none;
}

.c3-media-cover-backdrop::after {
    position: absolute;
    inset: 0;
    display: block;
    background: linear-gradient(135deg, rgba(23, 74, 139, .07), rgba(255, 255, 255, .04) 50%, rgba(0, 0, 0, .05));
    content: "";
}

.c3-media-cover .c3-media-cover-backdrop img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    object-fit: cover;
    filter: blur(16px);
    opacity: .82;
    transform: scale(1.1);
}

.c3-media-cover > .c3-media-cover-foreground {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    margin: 0;
    object-fit: contain;
    transition: transform .25s ease;
}

/* media-cover-fit.js adds this class after the intrinsic dimensions are
 * known. It lets ordinary photos fill the frame while leaving portraits and
 * extreme panoramas in contain mode. */
.c3-media-cover > .c3-media-cover-foreground.c3-media-cover-fit--fill {
    object-fit: cover;
    object-position: center;
}

.c3-media-cover > .c3-media-cover-logo {
    position: relative;
    z-index: 1;
    display: block;
    width: 72%;
    height: auto;
    max-height: 72%;
    margin: 0;
    object-fit: contain;
    border-radius: 6px;
    background: transparent;
}

/* The full auction card has more room than the compact auction card, so let
 * its fallback logo use a little more of the cover frame. */
.c3-media-cover.c3-auction-card-cover > .c3-media-cover-logo {
    width: 82%;
    max-height: 82%;
}

.c3-media-cover:hover > .c3-media-cover-foreground,
.c3-media-cover:focus-visible > .c3-media-cover-foreground {
    transform: scale(1.018);
}

.c3-media-cover:focus-visible {
    outline: 3px solid #f28c28;
    outline-offset: -3px;
}

.c3-media-cover-empty {
    color: #174a8b;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}