/* Gallery theme — reuse the template's editable color and typography tokens. */
:root {
  --gallery-surface: var(--color-white);
  --gallery-soft: var(--color-hero-mobile);
  --gallery-ink: var(--color-navy);
  --gallery-text: var(--color-text);
  --gallery-accent: var(--color-blue);
  --gallery-border: var(--color-pale);
  --gallery-shadow: var(--color-tone-011);
  --gallery-overlay: var(--color-navy);
  --gallery-icon: var(--color-white);
  --gallery-gap: 24px;
  --gallery-columns: 3;
  --gallery-motion: 180ms;
}
[data-gallery-root][hidden], [data-gallery-page][hidden], [data-gallery-link][hidden] { display: none !important; }
.gallery-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.moving-gallery { padding: 64px 28px; color: var(--gallery-ink); background: var(--gallery-surface); }
.moving-gallery__inner { max-width: var(--layout-max); margin-inline: auto; min-width: 0; }
.moving-gallery__heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 28px; }
.moving-gallery__heading h2 { font: 400 clamp(32px, 2.8vw, 42px)/1.18 var(--serif); letter-spacing: -.6px; margin: 0 0 12px; }
.moving-gallery__heading p:not(.eyebrow) { color: var(--gallery-text); max-width: 630px; margin: 0; font-size: 17px; line-height: 1.6; }
.moving-gallery__heading .eyebrow { margin: 0 0 12px; }
.moving-gallery__heading .button { flex-shrink: 0; min-height: 44px; white-space: nowrap; }
/* Native scroll snapping preserves touch/trackpad scrolling without a carousel dependency. */
.gallery-rail { display: flex; gap: var(--gallery-gap); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px 0 16px; scroll-padding-inline: 0; }
.gallery-rail::-webkit-scrollbar { display: none; }
.gallery-rail > .gallery-card { flex: 0 0 calc((100% - (var(--gallery-columns) - 1) * var(--gallery-gap)) / var(--gallery-columns)); scroll-snap-align: start; }
.gallery-card { display: block; position: relative; min-width: 0; aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; background: var(--gallery-soft); border: 1px solid var(--gallery-border); isolation: isolate; text-decoration: none; }
.gallery-card img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--gallery-motion) ease; }
.gallery-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px var(--gallery-shadow); }
.gallery-card__expand { position: absolute; right: 14px; bottom: 14px; width: 38px; height: 38px; display: grid; place-items: center; color: var(--gallery-ink); background: var(--gallery-surface); border: 1px solid var(--gallery-border); border-radius: 50%; box-shadow: 0 4px 14px var(--gallery-shadow); }
.gallery-card__expand svg { width: 18px; height: 18px; }
@media (hover: hover) {
  .gallery-card:hover img { transform: scale(1.03); }
  .gallery-card:hover { box-shadow: 0 8px 20px var(--gallery-shadow); }
}
.gallery-card:focus-visible { outline: 3px solid var(--color-focus); outline-offset: -4px; }
.gallery-controls { display: flex; justify-content: center; align-items: center; gap: 16px; margin-top: 10px; }
.gallery-controls[hidden] { display: none; }
.gallery-arrow { display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 1px solid var(--gallery-border); border-radius: 50%; background: var(--gallery-soft); color: var(--gallery-ink); cursor: pointer; transition: background var(--gallery-motion), color var(--gallery-motion); }
.gallery-arrow svg { width: 21px; height: 21px; }
.gallery-arrow:hover:not(:disabled) { background: var(--gallery-ink); color: var(--gallery-icon); }
.gallery-arrow:disabled { opacity: .35; cursor: default; }
.gallery-arrow:focus-visible, .gallery-load-more:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; }
.gallery-counter { min-width: 96px; text-align: center; color: var(--gallery-text); font-size: 15px; font-variant-numeric: tabular-nums; }
.gallery-page { background: var(--gallery-surface); color: var(--gallery-ink); }
.gallery-page__intro { padding: 40px 28px 44px; background: var(--gallery-soft); }
.gallery-page__intro > div { max-width: var(--layout-max); margin: auto; }
.gallery-breadcrumb { display: flex; gap: 10px; align-items: center; font-size: 14px; margin-bottom: 32px; color: var(--gallery-text); }
.gallery-page__intro h1 { font: 400 clamp(40px, 4vw, 58px)/1.12 var(--serif); letter-spacing: -1px; margin: 0 0 20px; }
.gallery-page__intro p { max-width: 790px; font-size: 18px; line-height: 1.7; color: var(--gallery-text); margin: 0; }
.gallery-page__intro p a, .gallery-breadcrumb a { color: var(--color-focus); text-decoration: underline; text-underline-offset: 3px; }
.gallery-page__intro a:hover { color: var(--gallery-ink); }
.gallery-page__intro a:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.gallery-page .moving-gallery { padding-top: 40px; }
.gallery-grid { display: grid; grid-template-columns: repeat(var(--gallery-columns), minmax(0, 1fr)); gap: var(--gallery-gap); }
.gallery-more { text-align: center; margin-top: 30px; }
.gallery-load-more { min-height: 46px; }
.gallery-more[hidden] { display: none; }
.gallery-cta { max-width: var(--layout-max); margin: 0 auto 64px; padding: 40px; border: 1px solid var(--gallery-border); border-radius: 18px; background: var(--gallery-soft); display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.gallery-cta h2 { font: 400 clamp(28px, 2.4vw, 36px)/1.2 var(--serif); margin: 0 0 10px; }
.gallery-cta p { color: var(--gallery-text); margin: 0; }
.gallery-cta .button { flex-shrink: 0; min-height: 46px; }
.gallery-page__cta-wrap { padding-inline: 28px; }
.gallery-page .site-header { background: var(--gallery-surface); }
/* PhotoSwipe's CSS is loaded only when needed; tokens below keep it on-brand. */
.pswp.pswp { --pswp-bg: var(--gallery-overlay); --pswp-icon-color: var(--gallery-icon); --pswp-icon-color-secondary: var(--gallery-overlay); --pswp-error-text-color: var(--gallery-icon); }
.pswp .pswp__error-msg { color: var(--gallery-icon); font-family: var(--sans); }
@media (768px <= width < 1100px) { :root { --gallery-columns: 2; --gallery-gap: 20px; } }
@media (width < 768px) {
  :root { --gallery-columns: 1; --gallery-gap: 16px; }
  .moving-gallery { padding: 40px 20px; }
  .moving-gallery__heading { display: block; margin-bottom: 22px; }
  .moving-gallery__heading .button { margin-top: 20px; }
  .moving-gallery__heading p:not(.eyebrow) { font-size: 16px; }
  .gallery-page__intro { padding: 24px 20px 32px; }
  .gallery-breadcrumb { margin-bottom: 24px; }
  .gallery-page__intro p { font-size: 16px; line-height: 1.65; }
  .gallery-page .moving-gallery { padding-top: 28px; }
  .gallery-page__cta-wrap { padding-inline: 20px; }
  .gallery-cta { display: block; padding: 28px 22px; margin-bottom: 40px; }
  .gallery-cta .button { margin-top: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .gallery-card img, .gallery-arrow { transition: none; }
  .gallery-card:hover img { transform: none; }
}
