/* ========================================
   LINKED IMAGE
   ======================================== */

/* Shrink-wrap the stage to the image so the overlay and link anchors
   always track the image edges, even when the image is sized smaller
   than its container via the Image Size controls */
.pxv-linked-image {
    display: inline-block;
    max-width: 100%;
}

.pxv-linked-image__stage {
    position: relative;
    overflow: hidden;
    line-height: 0;
}

.pxv-linked-image__img {
    display: block;
    max-width: 100%;
    height: auto;
    transition: transform 0.4s ease;
}

/* Darken overlay */
.pxv-linked-image__overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: var(--pxv-li-overlay, rgba(0, 0, 0, 0.4));
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

/* The link — only clickable element; the image is not wrapped */
.pxv-linked-image__link {
    position: absolute;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 16px;
    padding: 10px 24px;
    /* longhand only — a `background` shorthand here would reset
       background-image and fight the gradient control */
    background-color: #e91e8c;
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    border-radius: 4px;
    white-space: nowrap;
    transition: opacity 0.3s ease, visibility 0.3s ease, filter 0.2s ease;
}

.pxv-linked-image__link:hover {
    filter: brightness(1.12);
}

/* Background type: gradient — clear the default pink so semi-transparent
   gradient stops aren't tinted by the fallback color */
.pxv-linked-image__link--bg-gradient {
    background-color: transparent;
}

/* Background type: none */
.pxv-linked-image__link--bg-none {
    background-color: transparent;
    background-image: none;
}

.pxv-linked-image__link-icon {
    display: inline-flex;
    line-height: 0;
}

.pxv-linked-image__link-icon svg {
    width: 1em;
    height: 1em;
    fill: currentColor;
}

/* Anchor positions — margin (Button Styles) offsets from the anchor */
.pxv-linked-image__link--top-left      { top: 0; left: 0; }
.pxv-linked-image__link--top-center    { top: 0; left: 50%; transform: translateX(-50%); }
.pxv-linked-image__link--top-right     { top: 0; right: 0; }
.pxv-linked-image__link--center-left   { top: 50%; left: 0; transform: translateY(-50%); }
.pxv-linked-image__link--center        { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.pxv-linked-image__link--center-right  { top: 50%; right: 0; transform: translateY(-50%); }
.pxv-linked-image__link--bottom-left   { bottom: 0; left: 0; }
.pxv-linked-image__link--bottom-center { bottom: 0; left: 50%; transform: translateX(-50%); }
.pxv-linked-image__link--bottom-right  { bottom: 0; right: 0; }

/* Hover: image zoom */
.pxv-linked-image--zoom .pxv-linked-image__stage:hover .pxv-linked-image__img,
.pxv-linked-image--zoom .pxv-linked-image__stage:focus-within .pxv-linked-image__img {
    transform: scale(var(--pxv-li-zoom, 1.06));
}

/* Hover: darken overlay */
.pxv-linked-image--darken .pxv-linked-image__stage:hover .pxv-linked-image__overlay,
.pxv-linked-image--darken .pxv-linked-image__stage:focus-within .pxv-linked-image__overlay {
    opacity: 1;
}

/* Hover: reveal link — opacity only, so it composes with the
   transform-based centering of the anchor positions */
.pxv-linked-image--reveal .pxv-linked-image__link {
    opacity: 0;
    visibility: hidden;
}

.pxv-linked-image--reveal .pxv-linked-image__stage:hover .pxv-linked-image__link,
.pxv-linked-image--reveal .pxv-linked-image__stage:focus-within .pxv-linked-image__link {
    opacity: 1;
    visibility: visible;
}

/* Touch devices have no hover — keep the link visible so it stays reachable */
@media (hover: none) {
    .pxv-linked-image--reveal .pxv-linked-image__link {
        opacity: 1;
        visibility: visible;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pxv-linked-image__img,
    .pxv-linked-image__overlay,
    .pxv-linked-image__link {
        transition: none;
    }
}