/* Gallery page (Figma 15:45) — page-only styles, tokens from site.css */
.gallery {
  --rail: 1620px;              /* 5 x 300 + 4 x 30, first card at x150 */
  --badge: 74px;               /* 15:41 */
}
.gallery__sub { margin-top: 12px; text-align: center; text-transform: capitalize; }
.gallery__rail {
  width: 100%;
  max-width: calc(var(--rail) + var(--gutter) * 2);
  margin: 35px auto 0;
  padding: 0 var(--gutter);
}
.gallery .carousel__item .photo { aspect-ratio: 300 / 349; }
.gallery .carousel__item img { user-select: none; -webkit-user-drag: none; }

/* hover / focus overlay (15:34, 15:41, 15:33) */
.gallery-card__open {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 100%;
  background: var(--c-overlay);
  color: var(--c-gold);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.gallery-card__open:hover, .gallery-card__open:focus-visible { opacity: 1; }
.gallery-card__open:focus-visible { outline-offset: -4px; }
.gallery-card__badge {
  width: var(--badge); height: var(--badge);
  border-color: var(--c-gold); color: var(--c-gold);
}
.gallery-card__open:hover .gallery-card__badge { background: var(--c-gold); color: var(--c-black); }
.gallery-card__label {
  font-family: var(--f-sans); font-weight: 500;
  font-size: .75rem; line-height: 28px; letter-spacing: .1em; text-transform: uppercase;
  text-decoration: underline; text-underline-position: from-font;
}
@media (hover: none) {
  .gallery .carousel__item.is-active .gallery-card__open { opacity: 1; background: none; justify-content: flex-end; }
  .gallery .carousel__item.is-active .gallery-card__badge { display: none; }
  .gallery .carousel__item.is-active .gallery-card__label { width: 100%; text-align: center; background: var(--c-overlay); }
}

/* dots 15:21 — 60 / 24 / 24, gap 9, centre 52px under the cards */
.gallery .carousel__nav { margin-top: var(--sp-4); }
.gallery .dots { gap: 9px; }
.gallery .dots button { position: relative; width: 24px; border-radius: 8px; }
.gallery .dots button[aria-current="true"] { width: 60px; }
.gallery .dots button::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; bottom: -14px; }

/* lightbox */
.lightbox {
  width: 100%; max-width: 100%; height: 100%; max-height: 100%;
  margin: 0; padding: var(--sp-5) var(--gutter);
  border: 0; background: transparent; color: var(--c-text);
}
.lightbox[open] { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3); }
.lightbox::backdrop { background: rgba(0, 0, 0, .9); }
.lightbox__figure { display: flex; flex-direction: column; align-items: center; min-height: 0; max-height: 100%; }
.lightbox__img { width: auto; max-width: 100%; height: auto; max-height: calc(100svh - 11rem); object-fit: contain; }
.lightbox__caption {
  margin-top: var(--sp-2);
  font-family: var(--f-sans); font-weight: 500;
  font-size: .75rem; line-height: 28px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--c-gold); text-align: center;
}
.lightbox__close { position: absolute; top: var(--sp-3); right: var(--gutter); z-index: 1; }
.lightbox__close svg { width: 16px; height: 16px; }

@media (max-width: 1280px) {
  .gallery__rail { margin-top: var(--sp-4); }
}
@media (max-width: 767px) {
  .gallery { --badge: 58px; }
  .gallery__sub br { display: none; }
  .gallery__rail { margin-top: var(--sp-3); padding-right: 0; }
  .gallery .carousel__nav { padding-right: var(--gutter); }
  .lightbox { padding: var(--sp-6) var(--sp-2) var(--sp-2); }
  .lightbox[open] { grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .lightbox__figure { grid-column: 1 / -1; grid-row: 1; }
  .lightbox__prev { grid-row: 2; justify-self: end; }
  .lightbox__next { grid-row: 2; justify-self: start; }
  .lightbox__img { max-height: calc(100svh - 15rem); }
}