/* ==========================================================================
   Gallery - page-specific additions only.
   The lightbox is the same site-wide mechanism the homepage's own Gallery preview
   already uses (footer.php + main.js, untouched). New here: a Pinterest-style
   masonry (natural photo proportions, not cropped tiles) and the Instagram section.
   (The intro's standalone photo was removed 2026-09-22 - .why__top/.why__photo are
   no longer used on this page, so it's just the plain .page-intro__copy text block
   now; other pages keep their own use of .why__top/.why__photo. padding-bottom:0
   replaces main.css's own .section bottom padding, which was sized for a photo-tall
   intro row - without it, that padding plus the gallery section's own top padding
   left a noticeably large empty gap above the grid.) */

.section--page-intro{background:var(--bg);padding-top:clamp(120px,14vw,168px);padding-bottom:0}

/* ---------- Masonry ---------- */
.section--full-gallery{padding-top:clamp(56px,7vw,88px)}
.masonry{columns:4;column-gap:16px}
.masonry__item{display:block;break-inside:avoid;margin-bottom:16px}
.masonry__item a{display:block;overflow:hidden;cursor:zoom-in}
.masonry__item img{width:100%;height:auto;display:block;transition:transform 1.1s var(--ease),filter .5s}
.masonry__item:hover img{transform:scale(1.045);filter:brightness(1.06)}
@media (max-width:1100px){.masonry{columns:3}}
@media (max-width:700px){.masonry{columns:2;column-gap:10px}.masonry__item{margin-bottom:10px}}

/* ---------- Instagram ---------- */
.section--instagram{background:var(--bg)}
.section--instagram .section__title{color:var(--ivory)}
.eyebrow--orchid{color:var(--orchid)}
.ig-empty{display:flex;flex-direction:column;align-items:center;gap:14px;padding:56px 24px;border:1px dashed rgba(245,240,247,.25);text-align:center;max-width:36rem}
.ig-empty .icon{width:34px;height:34px;color:var(--orchid)}
.ig-empty p{color:var(--muted);font-size:1rem;max-width:26rem}
/* Best-effort neutraliser for the Instagram plugin's own default styling, in case a feed
   is ever connected again - keeps it from clashing with the dark theme until a dedicated
   restyle pass is done against real data. */
.ig-feed{max-width:64rem}
.ig-feed :is(a,p,span,div){color:inherit}

/* ---------- Closing CTA (same recipe as the other pages' bands) ---------- */
.section--gallery-cta{padding-top:clamp(56px,7vw,88px);padding-bottom:clamp(56px,7vw,88px)}
.gallery-cta{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.gallery-cta__title{font:400 clamp(1.5rem,2.6vw,2.1rem)/1.25 var(--ff-display);color:var(--ink);margin-bottom:8px;max-width:32rem}
.gallery-cta__text p{color:var(--ink-soft)}
@media (max-width:640px){.gallery-cta{flex-direction:column;align-items:flex-start}.gallery-cta .btn{width:100%}}