/* ==========================================================================
   pages/gallery.css — completed-job pages: the write-up and the photographs.
   ========================================================================== */

/* ---------- The job write-up -------------------------------------------- */
.job > * + * { margin-block-start: var(--s-5); }
.job__heading { font-size: var(--t-m); line-height: 1.3; font-weight: 500; letter-spacing: var(--track-head); }
.job__heading + * { margin-block-start: var(--s-4); }
.job__text { color: var(--grey-text); max-width: 36em; }
.job__scope li { color: var(--ink); }
.job__contact ul { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); padding: 0; list-style: none; margin-block-start: var(--s-2); }
.job__contact li { color: var(--grey-text); font-size: var(--t-s); }
.job__contact a { text-decoration: underline; text-underline-offset: 3px; }
.job__tags { color: var(--grey-text); font-size: var(--t-s); word-spacing: 0.4em; }

/* ---------- Photographs: one lead frame, then a quiet grid --------------- */
.photos { grid-column: 3 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--col-gap); }
.photo { display: block; position: relative; }
.photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); background: var(--field); transition: opacity var(--dur) var(--ease); }
.photo:hover img { opacity: 0.88; }
.photo--lead { grid-column: 1 / -1; }
.photo--lead img { aspect-ratio: 16 / 9; }
.photo__caption { display: block; padding-block-start: 10px; font-size: var(--t-s); color: var(--grey-text); }
@media (max-width: 63.99rem) { .photos { grid-column: 1 / -1; } }
@media (max-width: 47.99rem) { .photos { grid-template-columns: 1fr 1fr; } }

/* ---------- Lightbox ----------------------------------------------------- */
.lightbox { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: calc(var(--s-8)) var(--gutter); background: var(--paper); }
.lightbox-figure { display: grid; place-items: center; gap: var(--s-3); margin: 0; }
.lightbox-figure img { max-width: min(1400px, 100%); max-height: 78dvh; width: auto; object-fit: contain; border-radius: var(--radius); }
.lightbox-caption { font-size: var(--t-s); color: var(--grey-text); text-align: center; }
.lightbox-close, .lightbox-nav { position: absolute; display: grid; place-items: center; width: 44px; height: 44px; border: 0; background: none; color: var(--ink); font-size: 1.5rem; line-height: 1; }
.lightbox-close { top: var(--s-4); right: var(--gutter); }
.lightbox-nav { top: 50%; transform: translateY(-50%); font-size: 2rem; color: var(--grey-text); }
.lightbox-nav:hover { color: var(--ink); }
.lightbox-prev { left: var(--gutter); }
.lightbox-next { right: var(--gutter); }
.lightbox-counter { position: absolute; inset: auto 0 var(--s-5); text-align: center; font-size: var(--t-s); color: var(--grey-text); font-variant-numeric: tabular-nums; }
body.lightbox-open { overflow: hidden; }