/*
  Product gallery: one large primary photograph plus a contact sheet of thumbnails.
  Usable without JavaScript — the thumbnails are real links to the full image; product-gallery.js
  only upgrades them to swap the main image in place.

  Note: the `.gallery` name is unique again. The old standalone Gallery page shipped a second,
  conflicting `.gallery` rule set; that page has been removed from the public site.
*/
.gallery {
    display: grid;
    gap: var(--space-sm);
}

.gallery__main {
    margin: 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-surface-muted);
}

.gallery__image {
    inline-size: 100%;
    aspect-ratio: var(--ratio-piece);
    object-fit: cover;
}

.gallery__thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr));
    gap: var(--space-xs);
    list-style: none;
    margin: 0;
    padding: 0;
}

.gallery__thumb-item { margin: 0; }

.gallery__thumb {
    display: block;
    inline-size: 100%;
    aspect-ratio: var(--ratio-square);
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 2px solid transparent;
    background: var(--color-surface-muted);
    transition: border-color var(--transition-fast);
}

.gallery__thumb img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

.gallery__thumb.is-active,
.gallery__thumb:hover { border-color: var(--color-accent); }

.gallery__thumb:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
}

@media (min-width: 62rem) {
    .gallery__thumbs { grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); }
}

/* REDESIGN: the whole piece on a studio plate, zoomable (components.js opens the viewer). The frame
   keeps its 3:4 so the page never jumps between photographs; the photograph fits inside it whole,
   the same rule the shelf and the launch carousel follow. */
.gallery__main {
    border-radius: var(--radius-xl);
    background:
        radial-gradient(120% 80% at 50% 6%, var(--cg-white) 0%, transparent 62%),
        var(--color-surface-muted);
    box-shadow: 0 40px 70px -50px rgb(20 14 12 / 0.6);
}

.gallery__image { object-fit: contain; transition: transform 700ms var(--ease-out); }

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .gallery__main:hover .gallery__image { transform: scale(1.03); }
}

.gallery__thumb { border-radius: var(--radius-md); transition: transform var(--transition-base), box-shadow var(--transition-base); }
.gallery__thumb:hover { transform: translateY(-2px); }

/* On the light studio plate the frame's corners are drawn in ink, not white. */
.gallery__main.kiln-frame::before,
.gallery__main.kiln-frame::after { border-color: rgb(16 14 14 / 0.3); filter: none; }