/*
 * Product gallery (Tts\Ui\ProductGallery, product-gallery.js): the main photo
 * at its 768px size in a square frame (contained, never cropped - a tile's
 * photo is the product), a quiet "enlarge" label on it, and the thumbnails in
 * a row under it that scrolls when it does not fit. The viewer is
 * image-viewer.css. Decision 23.
 */

.product-gallery {
    /* Places the product labels, which sit over the main photo (the first row). */
    position: relative;
    display: grid;
    gap: var(--shop-space-3);
    min-width: 0;
}

/* Product labels (Tts\Ui\ProductLabel\ProductLabelOverlay, Decision 30): the cards'
   markup and look (product-card.css), on the main photo's corners - SALE over
   100 × 100 cm at the top left, the Blue Angel at the top right - a size up for the
   larger photo but kept modest: the photo is the product. They let pointer events
   through to the photo's "enlarge" link under them. The stack stops short of the
   stamp, so the two never meet. On the first photo only: product-gallery.js marks
   the gallery .is-past-first while another one is shown (without JavaScript the
   main photo is always the first). */
.product-gallery > .product-card__labels {
    inset-block-start: var(--shop-space-3);
    inset-inline-start: var(--shop-space-3);
    gap: 6px;
    max-inline-size: calc(100% - var(--shop-space-3) * 2 - 52px - var(--shop-space-2));
    pointer-events: none;
}

.product-gallery .product-card__label {
    padding: 5px 11px;
    font-size: var(--shop-text-2xs);
}

.product-gallery > .product-card__stamp {
    inset-block-start: var(--shop-space-3);
    inset-inline-end: var(--shop-space-3);
    width: 52px;
    height: 52px;
    pointer-events: none;
}

.product-gallery.is-past-first > :is(.product-card__labels, .product-card__stamp) {
    display: none;
}

.product-gallery__main {
    position: relative;
    display: grid;
    place-items: center;
    /* Square on a phone, where the photo is the page; wider from 640px, where a
       square frame left a landscape interior shot floating in empty space - and
       on a laptop pushed the price and the button below the fold. */
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--shop-radius-lg);
    background: var(--shop-surface-subtle);
    /* Vertical drags scroll the page; horizontal ones are the gallery's. */
    touch-action: pan-y;
    -webkit-user-drag: none;
    user-select: none;
    cursor: zoom-in;
}

.product-gallery__image {
    /* Fills the square frame (a percentage height does not resolve against an
       aspect-ratio box), the photo contained in it - a portrait one is never
       cropped. */
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

/* Not on a phone, where it offers something the viewer cannot deliver: below 640px the
   photo already fills the width the viewer would give it. Measured on a 844px-tall
   viewport: at 375/390/414/480/560px the page shows the photo at 345/360/384/450/530px
   and the viewer at 343/358/382/448/528px - a percent smaller, not larger. The frame's
   65vh cap holds the page photo at 549px from ~580px up, so the viewer starts to gain
   there (3% at 600, 11% at 639); that is inside the phone range the rest of this file
   already draws at 640, and 11% is not worth a second breakpoint.

   Hidden rather than removed: the label is a span inside .product-gallery__main, so the
   photo stays the link it always was and a tap still opens the viewer. Nothing about the
   viewer or the thumbnails changes. */
.product-gallery__enlarge {
    position: absolute;
    inset-block-end: var(--shop-space-3);
    inset-inline-end: var(--shop-space-3);
    display: none;
    align-items: center;
    gap: var(--shop-space-1);
    padding: var(--shop-space-1) var(--shop-space-2);
    border-radius: 999px;
    background: rgb(255 255 255 / 90%);
    color: var(--shop-ink);
    font-size: var(--shop-text-sm);
    font-weight: var(--shop-weight-semibold);
    line-height: var(--shop-leading-tight);
}

.product-gallery__enlarge svg {
    width: 16px;
    height: 16px;
}

.product-gallery__thumbs {
    display: flex;
    gap: var(--shop-space-2);
    margin: 0;
    padding: 2px;
    overflow-x: auto;
    list-style: none;
}

.product-gallery__thumb {
    display: block;
    width: 64px;
    height: 64px;
    padding: 2px;
    border: 1px solid var(--shop-border);
    border-radius: var(--shop-radius-sm);
    background: var(--shop-surface);
}

.product-gallery__thumb:hover {
    border-color: var(--shop-accent);
}

.product-gallery__thumb[aria-current] {
    border: 2px solid var(--shop-ink);
    padding: 1px;
}

.product-gallery__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: calc(var(--shop-radius-sm) - 3px);
    object-fit: cover;
}

/* Never more than two thirds of the screen: at 768-1023px the frame is as wide
   as the page, and a full-width 4:3 box left no room for the name, the price or
   the button above the fold. */
@media (max-width: 1023.98px) {
    .product-gallery__main {
        max-block-size: 65vh;
        max-block-size: 65dvh;
    }
}

@media (min-width: 640px) {
    .product-gallery__main {
        aspect-ratio: 4 / 3;
    }

    /* From here the viewer is genuinely bigger than the page's photo, so the label has
       something to promise again (see .product-gallery__enlarge above). */
    .product-gallery__enlarge {
        display: inline-flex;
    }

    .product-gallery > .product-card__labels {
        inset-block-start: var(--shop-space-4);
        inset-inline-start: var(--shop-space-4);
        max-inline-size: calc(100% - var(--shop-space-4) * 2 - 64px - var(--shop-space-2));
    }

    .product-gallery .product-card__label {
        padding: 6px 12px;
        font-size: var(--shop-text-xs);
    }

    .product-gallery > .product-card__stamp {
        inset-block-start: var(--shop-space-4);
        inset-inline-end: var(--shop-space-4);
        width: 64px;
        height: 64px;
    }

    .product-gallery__thumb {
        width: 76px;
        height: 76px;
    }
}

/* The product viewer has no text beside the photo but its name and position:
   from 1024px its panel is a narrow column rather than the inspiration
   viewer's reading column. */
@media (min-width: 1024px) {
    .image-viewer--product[open] {
        grid-template-columns: minmax(0, 1fr) 16rem;
    }
}

/* "Afbeelding 3 van 5" on one line in the narrow product panel. */
.image-viewer--product .image-viewer__position {
    white-space: nowrap;
}