/* ═══════════════════════════════════════════════════════════════════════════
   Atelier — a single piece: the image, the details column, the enquiry link.
   ═══════════════════════════════════════════════════════════════════════════ */

.at-piece-single { padding-block: clamp(2.5rem, 4vw, 4.5rem); }

.at-piece-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
}

/* The image column. No fixed ratio here — a painting is whatever shape it is,
   and cropping the one page that exists to show it whole is indefensible. */
.at-piece-image {
    position: relative;
    background: var(--at-band, #f2ebe1);
    padding: clamp(1rem, 3vw, 2.5rem);
    cursor: zoom-in;
}
.at-piece-image img { width: 100%; height: auto; box-shadow: var(--at-shadow-soft, 0 18px 48px rgba(42, 39, 36, 0.09)); }

.at-piece-thumbs {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}
.at-piece-thumbs button {
    width: 72px; height: 72px;
    padding: 0;
    border: 1px solid var(--at-rule, #e4dbcf);
    background: none;
    cursor: pointer;
    overflow: hidden;
}
.at-piece-thumbs button.is-active { border-color: var(--at-gilt, #b08d57); }
.at-piece-thumbs img { width: 100%; height: 100%; object-fit: cover; }

/* ── Details column ────────────────────────────────────────────────────── */
.at-piece-detail { position: sticky; top: calc(var(--at-header-h, 76px) + 2rem); }
.at-piece-detail h1 { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); margin-bottom: 0.3em; }

.at-piece-medium {
    display: inline-block;
    margin-bottom: 1.5rem;
    font-size: 0.6875rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--at-faint, #9a8f85);
}

.at-piece-cost {
    font-family: var(--at-serif, Georgia, serif);
    font-size: 1.75rem;
    color: var(--at-ink, #2a2724);
    margin-bottom: 1.75rem;
}

.at-spec {
    display: grid;
    grid-template-columns: 8.5rem minmax(0, 1fr);
    gap: 0.35rem 1rem;
    padding: 1.5rem 0;
    margin-bottom: 1.75rem;
    border-top: 1px solid var(--at-rule, #e4dbcf);
    border-bottom: 1px solid var(--at-rule, #e4dbcf);
    font-size: 0.875rem;
}
.at-spec dt {
    font-size: 0.625rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--at-faint, #9a8f85);
    padding-top: 0.25em;
}
.at-spec dd { margin: 0; color: var(--at-muted, #6b625a); }

.at-piece-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 2rem; }
.at-piece-actions .at-btn { flex: 1 1 auto; justify-content: center; }

.at-piece-note {
    font-family: var(--at-serif, Georgia, serif);
    font-style: italic;
    font-size: 1rem;
    color: var(--at-faint, #9a8f85);
    line-height: 1.55;
}

/* ── Related pieces ────────────────────────────────────────────────────── */
/* The margin, not padding, and on this section rather than on the piece above
   it. The rule is this element's top border, so padding would open space below
   the line and leave the painting still touching it. A margin pushes the line
   itself away from the image.

   It lives here rather than as a bottom padding on .at-piece-layout because it
   is only wanted when there IS related work. A piece whose medium has no
   siblings renders no related section at all, and a bottom padding up there
   would leave it floating in dead space above the footer.

   The clamp matches .at-section in global.css, so the hairline ends up centred
   in the same rhythm every other section boundary on the site uses. */
.at-related {
    margin-top: clamp(3.5rem, 2rem + 6vw, 7rem);
    border-top: 1px solid var(--at-rule, #e4dbcf);
}

/* Four across, where the gallery itself runs three. A related row is a glance,
   not a browse, so the cards are smaller and the row stays one line.

   These were an inline style on the div, which is why they survived every
   breakpoint in gallery.css and left four cards squeezed into a phone screen
   with the titles broken across four lines. An inline style outranks any media
   query, so a responsive value can never live there. */
.at-related .at-gallery-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding-bottom: 0;
}
@media (max-width: 1024px) {
    /* Two, not one, even on a phone: this is a secondary row and a single
       full-width card reads as more gallery rather than as a suggestion. */
    .at-related .at-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Lightbox ──────────────────────────────────────────────────────────── */
.at-lightbox {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: grid;
    place-items: center;
    padding: clamp(1rem, 4vw, 3rem);
    background: rgba(12, 11, 10, 0.94);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s var(--at-ease, ease), visibility 0.3s;
}
.at-lightbox.is-open { opacity: 1; visibility: visible; }
.at-lightbox img { max-width: 100%; max-height: 90vh; width: auto; object-fit: contain; }
.at-lightbox .at-icon-btn {
    position: absolute;
    top: 1.25rem; right: 1.25rem;
    color: #f5f0e8;
}

@media (max-width: 900px) {
    .at-piece-layout { grid-template-columns: 1fr; }
    .at-piece-detail { position: static; }
}


/* ── The ask-a-question button and the assurance row ───────────────────────
   These live here, not in shop/woocommerce.css, because they render on EVERY
   piece page. That stylesheet is gated on the piece having a linked print
   product, so an original loaded the markup with none of the rules and the
   assurance row fell back to a bulleted list with the icons stacked above it.
   A rule's home is decided by where its markup appears, not by which feature
   prompted it.
   ───────────────────────────────────────────────────────────────────────── */

.at-btn-ask {
    justify-content: center;
    gap: 0;
}
.at-btn-ask .at-icon {
    margin-right: 1.1rem;
    padding-right: 1.1rem;
    border-right: 1px solid var(--at-rule, #e4dbcf);
    box-sizing: content-box;
}