/* ---- Photo gallery (js/photo-gallery.js). The Battle Abbey pages carry the
   lodge's own photographs, many more than a standard page, so they get a
   section of their own: justified rows that keep every frame whole (each
   tile takes its photograph's own aspect ratio, so nothing is cropped), and
   a full-screen viewer that swipes on phones and takes the arrow keys.

   Without the script the rows are laid out by flex alone, each tile growing
   in proportion to its aspect ratio so a row shares one height, and a tile
   is a plain link to its photograph. The script rebalances the rows so each
   is full width, the last one included, and opens the viewer instead. ---- */
#photos {
  background: #0E0D0C;
  padding: 5rem 0 5.5rem;
}
body.wpj-expedition #photos { scroll-margin-top: 122px; }
@media (max-width: 640px) {
  body.wpj-expedition #photos { scroll-margin-top: 114px; }
}

.photos-header {
  text-align: center;
  margin-bottom: 3rem;
}
.photos-header .section-title { font-size: clamp(2rem, 4vw, 3rem); }
.photos-header .gold-line { margin: 1.2rem auto; }
.pg-intro {
  color: var(--text-muted);
  font-size: 1rem;
  max-width: 560px;
  margin: 0.8rem auto 0;
}

.pg-wrap {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 32px;
}
.pg-group + .pg-group { margin-top: 3.25rem; }
.pg-group-title {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 0 1rem;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gold);
}
.pg-group-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(196, 148, 74, 0.28);
}

/* --row is the height a row aims for; the script reads it too. */
.pg-grid {
  --row: 300px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pg-grid::after { content: ''; flex-grow: 1000; }
.pg-item {
  position: relative;
  display: block;
  flex: var(--ar) 1 calc(var(--ar) * var(--row));
  min-width: 0;
  overflow: hidden;
  background: var(--pg-bg, #1B1917);
  cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
}
.pg-item picture { display: block; height: 100%; }
.pg-item img {
  width: 100%;
  height: auto;
  aspect-ratio: var(--ar);
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.5s ease;
}
.pg-item::after {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px rgba(245, 237, 224, 0.06);
  pointer-events: none;
}
.pg-item:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .pg-item:hover img { transform: scale(1.035); }
}

/* Laid out by the script: every tile has its width and height set. */
.pg-grid.is-laid::after { display: none; }
.pg-grid.is-laid .pg-item { flex: none; }
.pg-grid.is-laid .pg-item img { height: 100%; aspect-ratio: auto; }
/* A photograph fades in as it arrives, over its own average colour. */
.pg-js .pg-item img:not(.is-loaded) { opacity: 0; }

@media (max-width: 1099px) {
  .pg-grid { --row: 220px; }
  .pg-wrap { padding: 0 24px; }
}
@media (max-width: 699px) {
  #photos { padding: 3.5rem 0 4rem; }
  .photos-header { margin-bottom: 2.25rem; }
  .pg-wrap { padding: 0 12px; }
  .pg-group + .pg-group { margin-top: 2.25rem; }
  .pg-group-title { margin-bottom: 0.8rem; padding: 0 4px; }
  .pg-grid { --row: 124px; gap: 4px; }
}

/* ---- The viewer: one full-screen slide per photograph in a scroll-snap
   track, so a swipe is the browser's own. ---- */
/* The page stays put behind the viewer. Where the page had a scrollbar, the
   script pads the page by its width while the viewer is open, so nothing
   shifts as the viewer fades in. */
html.pg-lb-open { overflow: hidden; }
.pg-lb {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: #0B0A09;
  color: var(--sand);
  overflow: hidden;
  font-family: 'Source Sans 3', sans-serif;
  -webkit-user-select: none;
  user-select: none;
}
.pg-lb::backdrop { background: #0B0A09; }
.pg-lb[open] { animation: pg-lb-in 0.22s ease-out; }
@keyframes pg-lb-in { from { opacity: 0; } to { opacity: 1; } }
.pg-lb-track {
  position: absolute;
  inset: 0;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior: contain;
  scrollbar-width: none;
  outline: none;
}
.pg-lb-track::-webkit-scrollbar { display: none; }
.pg-lb-slide {
  flex: 0 0 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 68px 84px 0;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}
.pg-lb-frame {
  position: relative;
  flex: 1;
  min-height: 0;
}
.pg-lb-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.pg-lb-img.is-ready { opacity: 1; }
.pg-lb-cap {
  flex: none;
  width: 100%;
  max-width: 760px;
  min-height: 92px;
  margin: 0 auto;
  padding: 16px 0 26px;
  text-align: center;
}
.pg-lb-group {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}
.pg-lb-text {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 1.08rem;
  line-height: 1.4;
  color: var(--sand);
  text-wrap: balance;
}
.pg-lb-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px 0 24px;
  pointer-events: none;
}
.pg-lb-bar > * { pointer-events: auto; }
.pg-lb-count {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.pg-lb-close, .pg-lb-nav {
  width: 44px;
  height: 44px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 50%;
  background: rgba(31, 29, 27, 0.92);
  border: 1px solid rgba(196, 148, 74, 0.5);
  color: var(--gold);
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast), opacity var(--transition-fast);
}
.pg-lb-close svg, .pg-lb-nav svg { width: 18px; height: 18px; }
.pg-lb-close:hover, .pg-lb-nav:hover { border-color: var(--gold); color: var(--sand); }
.pg-lb-close:focus-visible, .pg-lb-nav:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.pg-lb-nav {
  position: absolute;
  top: calc(50% - 12px);
  z-index: 2;
  transform: translateY(-50%);
}
.pg-lb-prev { left: 20px; }
.pg-lb-next { right: 20px; }
.pg-lb-nav[aria-disabled="true"] { opacity: 0.25; cursor: default; }
.pg-lb-nav[aria-disabled="true"]:hover { border-color: rgba(196, 148, 74, 0.5); color: var(--gold); }
.pg-live {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (max-width: 699px) {
  .pg-lb-slide { padding: 60px 0 0; }
  .pg-lb-bar { height: 60px; padding: 0 10px 0 16px; }
  .pg-lb-nav { display: none; }
  .pg-lb-cap { min-height: 96px; padding: 14px 18px 24px; }
  .pg-lb-text { font-size: 1rem; }
}

/* A phone held sideways: the photograph takes nearly the full height and
   the caption one line under it, running beneath the arrow buttons. */
@media (orientation: landscape) and (max-height: 540px) {
  .pg-lb-slide { padding: 12px 76px 0; }
  .pg-lb-bar { height: 56px; padding: 0 12px 0 18px; }
  .pg-lb-nav { display: inline-flex; }
  .pg-lb-prev { left: 16px; }
  .pg-lb-next { right: 16px; }
  .pg-lb-cap { width: auto; max-width: none; min-height: 42px; margin: 0 -60px; padding: 8px 0 12px; }
  .pg-lb-group { display: none; }
  .pg-lb-text { font-size: 0.92rem; }
}

@media (prefers-reduced-motion: reduce) {
  .pg-item img, .pg-lb-img { transition: none; }
  .pg-item:hover img { transform: none; }
  .pg-lb[open] { animation: none; }
}