/**
 * shop-card-media.css
 * Shared shop-card media block — full-visible cover photo (object-fit
 * contain over a blurred fill, mirroring the merchant shop view page's
 * mf-cover treatment) with the profile photo overlaid bottom-left.
 * Used by /shops and /merchant/manage-shops via element shop_card_media.
 */

.shop-card-media {
    position: relative;
    height: 170px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0075B2 0%, #005A8B 100%);
}

/* Blurred cover fill behind the contained image */
.shop-card-media__blur {
    position: absolute;
    inset: -30px;
    background-image: var(--shop-card-cover-bg);
    background-size: cover;
    background-position: center;
    filter: blur(16px);
    transform: scale(1.15);
    z-index: 0;
}

.shop-card-media__blur::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.15);
}

.shop-card-media__link {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.shop-card-media__link picture {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* The whole photo stays visible — contain, never crop */
.shop-card-media__img,
.shop-card-media__link img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

/* Transparency-capable covers (png/webp/svg): white backing behind the image
   itself so the blurred fill doesn't bleed through transparent pixels. The
   letterboxed sides keep the blurred background. */
.shop-card-media--alpha .shop-card-media__img {
    background: #fff;
    padding: 6px;
    border-radius: 4px;
}

/* Profile photo overlaid on the cover */
.shop-card-media__avatar {
    position: absolute;
    left: 12px;
    bottom: 10px;
    z-index: 2;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #fff;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.shop-card-media__avatar img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}