/* Looms of Maratha — the product detail image.

   Kept out of the Tailwind bundle deliberately: that file is prebuilt and
   checked in, so a class invented here would have no rule behind it. Plain CSS
   against the same design tokens is the honest way to add to it. */

.p-media {
    position: relative;
    width: 100%;
}

/* The detail image used to render at its full 1008x1264, which on a laptop is
   taller than the window and pushed the enquiry button off screen. The cap ties
   the width to the height actually available: the frame is 4:5, so a column
   0.8x the free height is the widest that still fits without scrolling. */
@media (min-width: 768px) {
    .p-media {
        position: sticky;
        top: 6rem;
        max-width: min(100%, calc((100vh - 11rem) * 0.8));
        margin-inline: auto;
    }

    /* svh accounts for mobile browser chrome; older engines keep the vh line. */
    @supports (height: 100svh) {
        .p-media {
            max-width: min(100%, calc((100svh - 11rem) * 0.8));
        }
    }
}

.p-media__frame {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--muted);
    padding: 0;
    border: 0;
    cursor: zoom-in;
    /* The frame is a <button>; none of the chrome that implies is wanted. */
    font: inherit;
    color: inherit;
    -webkit-appearance: none;
    appearance: none;
}

.p-media__frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Set by the script as the pointer moves, so the magnified image pans to
       whatever the visitor is actually pointing at. */
    transform-origin: var(--zoom-x, 50%) var(--zoom-y, 50%);
    transition: transform .45s cubic-bezier(.22, .61, .36, 1);
    will-change: transform;
}

/* Hover zoom is for a mouse. A touch device reports coarse pointer and gets the
   full screen viewer on tap instead, where a pinch is the natural gesture. */
@media (hover: hover) and (pointer: fine) {
    .p-media__frame.is-zooming img {
        transform: scale(2.2);
        /* No easing while tracking the cursor, or the image lags behind it. */
        transition: none;
    }
}

.p-media__hint {
    position: absolute;
    right: .75rem;
    bottom: .75rem;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .7rem;
    background: color-mix(in oklab, var(--background) 82%, transparent);
    backdrop-filter: blur(4px);
    font-size: .625rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--muted-foreground);
    pointer-events: none;
    opacity: 1;
    transition: opacity .3s ease;
}

.p-media__frame.is-zooming .p-media__hint {
    opacity: 0;
}

.p-media__frame:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
}

/* ------------------------------ full screen ------------------------------ */

.p-lightbox {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in oklab, var(--foreground) 92%, transparent);
    opacity: 0;
    /* Closed, it stays in the document but must not swallow clicks meant for the
       page underneath — inset:0 would otherwise cover the whole site. */
    visibility: hidden;
    pointer-events: none;
    transition: opacity .25s ease, visibility .25s;
    /* Single finger drag is handled by the script, so the browser must not treat
       it as a page pan; pinch stays with the browser, which does it better. */
    touch-action: pinch-zoom;
    overscroll-behavior: contain;
}

.p-lightbox.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.p-lightbox img {
    max-width: 100%;
    max-height: 100%;
    /* contain, not cover: the point of opening this is to see all of it. */
    object-fit: contain;
    transform-origin: var(--zoom-x, 50%) var(--zoom-y, 50%);
    transition: transform .3s cubic-bezier(.22, .61, .36, 1);
    cursor: zoom-in;
    user-select: none;
    -webkit-user-drag: none;
}

.p-lightbox img.is-zoomed {
    cursor: grab;
}

.p-lightbox img.is-dragging {
    cursor: grabbing;
    transition: none;
}

.p-lightbox__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 2;
    width: 2.75rem;
    height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: color-mix(in oklab, var(--background) 14%, transparent);
    color: var(--background);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

.p-lightbox__close:hover {
    background: color-mix(in oklab, var(--background) 26%, transparent);
}

.p-lightbox__close:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

/* Stops the page behind from scrolling under the overlay. */
body.p-lightbox-open {
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .p-media__frame img,
    .p-lightbox,
    .p-lightbox img,
    .p-media__hint {
        transition: none;
    }

    .p-media__frame.is-zooming img {
        transform: none;
    }
}