/* ==========================================================================
   MegaPets 2.0 — Product Card Media Block

   File:
   components/product/product-card/blocks/media/media.css

   Responsibility:
   - Media layout
   - Images
   - Video
   - Gallery controls
   ========================================================================== */

/* ==========================================================================
   MEDIA FRAME
   ========================================================================== */

.product-card-media-frame {
    position: relative;
    width: 100%;
    aspect-ratio:
        var(--mp-product-card-media-ratio);
    margin: 0;
    overflow: hidden;
    background:
        var(--mp-product-card-photo-background-color);
}

.product-card-media-link {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    cursor: pointer;
    touch-action: pan-y;
}

.product-card-media-image,
.product-card-media-video {
    position: absolute;
    display: block;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    opacity: 0;
    pointer-events: none;
    z-index: 0;
    transition:
        opacity
        var(--mp-product-card-speed-slow)
        var(--mp-product-card-ease);
    user-select: none;
    -webkit-user-drag: none;
    border: 0;
    outline: 0;
    background: transparent;
}

/* Hide an occasional 1px browser compositor seam inside the clipped frame. */
.product-card-media-video {
    inset: -1px;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    max-width: none;
    transition: none;
    background:
        var(--mp-product-card-photo-background-color);
}

.product-card-media-image.is-visible,
.product-card-media-video.is-visible {
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
}

.product-card-media-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index:
        var(--mp-product-card-media-contour-z);
    pointer-events: none;
    box-shadow:
        var(--mp-product-card-photo-inner-shadow);
}

/* ==========================================================================
   MEDIA DOTS
   ========================================================================== */

.product-card-media-dots {
    min-height: calc(
        var(--mp-product-card-media-dots-top-space)
        + var(--mp-carousel-media-dots-indicators-control-height)
    );
    padding:
        var(--mp-product-card-media-dots-top-space)
        var(--mp-product-card-side-space)
        0;
    margin: 0;
}

/* ==========================================================================
   MEDIA STATES
   ========================================================================== */

.product-card-media-frame.is-video-loading,
.product-card-media-frame.is-image-loading {
    cursor: progress;
}

.product-card-media-image.is-unavailable,
.product-card-media-video.is-unavailable,
.product-card-dot-button.is-unavailable {
    display: none;
}

.product-card-media-dots.is-unavailable {
    visibility: hidden;
    pointer-events: none;
}

/* ==========================================================================
   MEDIA RESPONSIVE
   ========================================================================== */

@media (max-width: 480px) {
    .product-card-media-dots {
        padding-left:
            var(--mp-product-card-side-space-mobile);
        padding-right:
            var(--mp-product-card-side-space-mobile);
    }

    .product-card-media-dots.is-unavailable {
        display: none;
    }
}