/* Gallery page. Design positions are given in 1920px design pixels (--s). */

/* hero: same shape as the services page (photo with a red title panel) */
.ghero { position: relative; height: calc(865 * var(--s)); min-height: 360px; overflow: hidden; }
.ghero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.ghero__panel { position: relative; z-index: 1; margin-top: calc(141 * var(--s)); width: calc(959 * var(--s)); min-width: min(100%, 520px); min-height: calc(346 * var(--s)); background: var(--brand); padding: calc(60 * var(--s)) calc(60 * var(--s)) calc(60 * var(--s)) var(--gutter); display: flex; flex-direction: column; justify-content: center; }
.ghero__panel h1 { color: var(--white); font-size: var(--t-60); line-height: .91; max-width: calc(824 * var(--s)); }
/* phones: red title panel first at the top of the page, the photo stacked under it */
@media (max-width: 900px) {
  .ghero { height: auto; min-height: 0; display: flex; flex-direction: column; }
  .ghero__panel { order: -1; margin: 0; width: 100%; padding: 28px var(--gutter); }
  .ghero__img { position: static; inset: auto; display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; }
  .strip { background: var(--brand-2); }
}

/* intro with the red mark (same as the services page intro) */
.gintro { text-align: center; padding: calc(55 * var(--s)) var(--gutter) calc(60 * var(--s)); display: flex; flex-direction: column; align-items: center; }
.gintro img { width: calc(230 * var(--s)); min-width: 110px; }
.gintro h2 { font-size: var(--t-80); line-height: .81; margin-top: calc(12 * var(--s)); }
.gintro p { margin: calc(23 * var(--s)) 0 0; max-width: calc(1005 * var(--s)); line-height: 1.1; }
@media (max-width: 900px) { .gintro { padding: 40px var(--gutter) 28px; } .gintro p { line-height: 1.45; max-width: none; } }

/* the grid: every thumbnail is cropped to the same 4:3 box */
.gwrap { padding: 0 var(--gutter) calc(120 * var(--s)); }
.gal { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(24 * var(--s)); width: calc(1772 * var(--s)); max-width: 100%; margin-inline: auto; }
.gal a { display: block; position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface); }
.gal img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s var(--ease), filter .3s var(--ease); }
.gal a:hover img, .gal a:focus-visible img { transform: scale(1.04); }
.gal a::after { content: ""; position: absolute; inset: auto 0 0 0; height: 0; background: var(--brand); transition: height .25s var(--ease); }
.gal a:hover::after, .gal a:focus-visible::after { height: 6px; }
/* "Show More Photos": shown by js/site.js while photos are still waiting to
   load; normally the scroll loads them before the visitor reaches it */
.gwrap__more { display: flex; justify-content: center; margin: calc(48 * var(--s)) 0 0; }
.gwrap__note { text-align: center; max-width: calc(1005 * var(--s)); margin: calc(70 * var(--s)) auto 0; line-height: 1.1; }
.gwrap__cta { display: flex; justify-content: center; margin-top: calc(40 * var(--s)); }
@media (max-width: 900px) {
  .gal { grid-template-columns: repeat(2, 1fr); gap: 12px; width: 100%; }
  .gwrap { padding-bottom: 100px; } /* room for the footer's straddling arrow */
  .gwrap__more { margin-top: 24px; }
  .gwrap__note { margin-top: 32px; line-height: 1.45; max-width: none; }
  .gwrap__cta { margin-top: 20px; }
}
@media (max-width: 560px) { .gal { gap: 10px; } } /* stays two columns on phones */

/* lightbox: a native <dialog> filling the viewport. The page stays faintly
   visible behind a dark wash, the photo sits centred with room around it,
   round white buttons: close top right, previous and next at mid height either
   side, and a white "2 / 10" counter under the photo. */
.lb { border: 0; padding: 0; margin: 0; width: 100vw; height: 100vh; max-width: none; max-height: none; background: transparent; color: var(--white); }
.lb::backdrop { background: rgba(0, 0, 0, .88); }
/* while the viewer is open: no page scroll behind it, and the sticky header and
   back-to-top button stay out of the dimmed background */
body.lb-open { overflow: hidden; }
body.lb-open .site-header, body.lb-open .to-top { visibility: hidden; }
.lb__stage { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 96px 120px; }
.lb__fig { margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; max-width: 100%; max-height: 100%; }
.lb__img { display: block; max-width: 100%; max-height: calc(100vh - 260px); width: auto; height: auto; object-fit: contain; box-shadow: 0 12px 48px rgba(0, 0, 0, .55); transition: opacity .25s var(--ease); }
.lb.is-loading .lb__img { opacity: .3; }
.lb__cap { margin-top: 26px; text-align: center; }
.lb__count { font-family: var(--font-head); font-weight: 700; font-size: clamp(20px, 1.5vw, 28px); letter-spacing: .06em; color: var(--white); white-space: nowrap; }
.lb__btn { position: fixed; z-index: 1; width: 64px; height: 64px; border: 0; border-radius: 50%; background: var(--white); color: var(--ink, #111); display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; box-shadow: 0 4px 18px rgba(0, 0, 0, .35); transition: background .2s var(--ease), transform .2s var(--ease); }
.lb__btn svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lb__btn:hover { background: var(--brand); color: var(--white); transform: scale(1.05); }
.lb__btn:focus-visible { outline: 3px solid var(--white); outline-offset: 3px; }
.lb__close { top: 44px; right: 28px; }
.lb__prev, .lb__next { top: 50%; transform: translateY(-50%); }
.lb__prev:hover, .lb__next:hover { transform: translateY(-50%) scale(1.05); }
.lb__prev { left: 28px; }
.lb__next { right: 28px; }
@media (max-width: 900px) {
  .lb__stage { padding: 72px 12px 40px; }
  .lb__img { max-height: calc(100vh - 190px); }
  .lb__cap { margin-top: 18px; }
  .lb__btn { width: 48px; height: 48px; background: rgba(255, 255, 255, .92); }
  .lb__btn svg { width: 24px; height: 24px; }
  .lb__close { top: 12px; right: 12px; }
  .lb__prev { left: 8px; }
  .lb__next { right: 8px; }
}