/* Gallery page (Figma 110:1222) */
:root {
  --gal-gap: var(--gap-grid);
  --gal-tint: rgba(197, 111, 57, 0.42);
  --gal-badge: 3.125rem;
  --lb-backdrop: rgba(12, 14, 17, 0.92);
  --lb-btn: 3rem;
  --tex-botanical: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 346' fill='none' stroke='%23c97846' stroke-width='.8' stroke-linecap='round' opacity='.55'%3E%3Cpath d='M40 346C70 250 120 170 210 110'/%3E%3Cpath d='M92 250c-40-30-60-70-58-120 38 22 60 62 58 120zM120 205c-10-50 4-92 40-126 14 48 2 90-40 126zM150 165c30-44 70-66 122-66-22 44-62 66-122 66zM70 300c-44-8-76-32-96-72 46 2 78 26 96 72z'/%3E%3Cpath d='M92 250c-14-40-30-80-58-120M120 205c14-42 26-84 40-126M150 165c40-22 80-44 122-66'/%3E%3Cpath d='M230 346c10-70 40-130 96-180'/%3E%3Ccircle cx='330' cy='160' r='9'/%3E%3Ccircle cx='352' cy='142' r='7'/%3E%3Ccircle cx='312' cy='138' r='6'/%3E%3Cpath d='M262 262c34-30 74-40 120-30-30 34-70 44-120 30zM246 300c-36-16-58-44-66-84 40 12 62 40 66 84z'/%3E%3Cpath d='M262 262c40-8 80-18 120-30M246 300c-20-30-42-58-66-84'/%3E%3Cpath d='M600 0c-30 60-40 120-20 190'/%3E%3Cpath d='M584 120c-40-10-70-36-88-76 44 4 74 30 88 76zM590 80c20-36 50-56 92-60-14 40-44 60-92 60z'/%3E%3C/svg%3E");
}

.page-banner--gallery::before {
  content: ""; position: absolute; inset: 0; z-index: var(--z-decor); pointer-events: none;
  background: var(--tex-botanical) left bottom / auto 100% no-repeat, var(--tex-botanical) right top / auto 100% no-repeat;
}
.page-banner--gallery .blob--peach { right: auto; left: 52%; top: 8%; width: 18rem; }

/* masonry: 3 columns of 410 / gap 30 */
.gallery { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto; column-gap: var(--gal-gap); row-gap: var(--gal-gap); align-items: start; }
.gallery__col { display: flex; flex-direction: column; gap: var(--gal-gap); min-width: 0; }
.gallery__link { position: relative; display: block; overflow: hidden; background: var(--c-cream-deep); }
.gallery__link img { width: 100%; height: auto; transition: transform var(--t-med) var(--ease); }
.gallery__link--pill { border-radius: var(--r-pill); }
.gallery__link--arch { border-radius: var(--r-pill) var(--r-pill) 0 0; }
.gallery__link--oval { border-radius: var(--r-circle); }
.gallery__link::after {
  content: ""; position: absolute; inset: 0; background: var(--gal-tint); opacity: 0;
  transition: opacity var(--t-med) var(--ease); pointer-events: none;
}
.gallery__badge {
  position: absolute; left: 50%; top: 50%; z-index: var(--z-content); width: var(--gal-badge); height: var(--gal-badge);
  transform: translate(-50%, -50%) scale(0.6); opacity: 0; pointer-events: none;
  transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}
.gallery__badge::before, .gallery__badge::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--c-white); transform: translate(-50%, -50%); }
.gallery__badge::before { width: 100%; height: 1px; }
.gallery__badge::after { width: 1px; height: 100%; }
.gallery__link:hover::after, .gallery__link:focus-visible::after { opacity: 1; }
.gallery__link:hover .gallery__badge, .gallery__link:focus-visible .gallery__badge { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.gallery__link:hover img, .gallery__link:focus-visible img { transform: scale(1.04); }
.gallery__link:focus-visible { outline-offset: 4px; }

/* lightbox */
.lightbox { width: 100%; height: 100%; max-width: 100vw; max-height: 100dvh; margin: 0; padding: 0; border: 0; background: transparent; color: var(--c-white); overflow: hidden; }
.lightbox::backdrop { background: var(--lb-backdrop); }
.lightbox__inner { display: flex; align-items: center; justify-content: center; gap: var(--space-4); width: 100%; height: 100%; padding: var(--space-8) var(--space-4) var(--space-5); }
.lightbox__figure { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); min-width: 0; max-height: 100%; }
.lightbox__img { width: auto; max-width: 100%; height: auto; max-height: calc(100dvh - 10rem); object-fit: contain; }
.lightbox__caption { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-5); font-size: var(--fs-caps); letter-spacing: var(--ls-caps); text-transform: uppercase; text-align: center; }
.lightbox__count { color: var(--c-sand); }
.lightbox__btn { position: relative; flex: none; width: var(--lb-btn); height: var(--lb-btn); border: 1px solid var(--c-white); color: var(--c-white); transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.lightbox__btn:hover { background: var(--c-white); color: var(--c-ink); }
.lightbox__btn:focus-visible { outline: 2px solid var(--c-sand); outline-offset: 3px; }
.lightbox__btn::before, .lightbox__btn::after { content: ""; position: absolute; left: 50%; top: 50%; }
.lightbox__btn--prev::before, .lightbox__btn--next::before { width: 0.625rem; height: 0.625rem; border-left: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translate(-30%, -50%) rotate(45deg); }
.lightbox__btn--next::before { transform: translate(-70%, -50%) rotate(-135deg); }
.lightbox__btn--close { position: absolute; right: var(--space-4); top: var(--space-4); }
.lightbox__btn--close::before, .lightbox__btn--close::after { width: 1.25rem; height: 1px; background: currentColor; transform: translate(-50%, -50%) rotate(45deg); }
.lightbox__btn--close::after { transform: translate(-50%, -50%) rotate(-45deg); }

@media (max-width: 991px) {
  .gallery { display: block; columns: 2; column-gap: var(--gal-gap); margin-bottom: calc(-1 * var(--gal-gap)); }
  .gallery__col { display: contents; }
  .gallery__item { break-inside: avoid; margin-bottom: var(--gal-gap); }
}
@media (max-width: 767px) {
  :root { --gal-gap: 1.25rem; }
  .lightbox__inner { flex-wrap: wrap; align-content: center; gap: var(--space-3); padding-inline: var(--space-3); }
  .lightbox__figure { order: -1; flex: 1 1 100%; }
  .lightbox__img { max-height: calc(100dvh - 14rem); }
}
@media (max-width: 479px) {
  .gallery { columns: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .gallery__link img, .gallery__link::after, .gallery__badge { transition: none; }
  .gallery__link:hover img, .gallery__link:focus-visible img { transform: none; }
}