/* == THE GALLERY: ONE FOOTPRINT, HOWEVER MANY PHOTOGRAPHS ==  5 Sep 2026 ==
   Sir: the pictures should always take the same amount of space. One picture
   fills the whole section with Show all greyed out; two show one and open as a
   pop up; Show all photos opens the pictures rather than taking you to another
   page, on every page where pictures can be viewed.

   THE FOOTPRINT IS THE POINT. `.pdp-media` already owns its shape by
   `aspect-ratio`, so the block is the same height whether it holds one frame or
   five. What changes is how the frames are cut inside it, never how much room
   it takes: a hero that shrinks because somebody uploaded fewer photographs is
   a page that rearranges itself for reasons the reader cannot see.

   Loaded by every page that has a gallery. It styles nothing until the script
   stamps `data-shots`, so a page with the sheet and no script keeps the mosaic
   it already had. */

/* -- ONE PHOTOGRAPH: it takes the whole block --------------------------
   Not one frame in a corner with four empty cells beside it. The stack goes,
   the lead spans both columns and every row, and the shape it was cut to is
   the shape of the section. */
.pdp-media[data-shots="1"]{grid-template-columns:1fr}
.pdp-media[data-shots="1"] > .pdp-stack,
.pdp-media[data-shots="1"] > .gt-extra{display:none}
.pdp-media[data-shots="1"] > .pdp-lead{grid-column:1 / -1; grid-row:1 / -1}

/* -- TWO: still one frame, because two side by side is a pair and a pair is
   a comparison nobody asked for. The second lives in the pop up, and the
   counter on the button says it is there. ------------------------------- */
.pdp-media[data-shots="2"]{grid-template-columns:1fr}
.pdp-media[data-shots="2"] > .pdp-stack,
.pdp-media[data-shots="2"] > .gt-extra{display:none}
.pdp-media[data-shots="2"] > .pdp-lead{grid-column:1 / -1; grid-row:1 / -1}

/* -- THE BUTTON WHEN THERE IS NOTHING MORE TO SHOW ---------------------
   Greyed rather than removed. A control that disappears makes the reader
   wonder whether they missed it; one that is plainly spent does not. */
.gallery-all[disabled]{
  opacity:.45; cursor:default; pointer-events:none;
}

/* Every frame is a way in, so it says so under the pointer. */
.pdp-media .gt{cursor:zoom-in}
.pdp-media .gt img{transition:scale 420ms cubic-bezier(.16,1,.3,1)}
.pdp-media .gt:hover img{scale:1.02}
.pdp-media[data-shots="0"] .gt{cursor:default}

/* == THE POP UP ========================================================
   One photograph at a time on a navy ground, the counter and the close on the
   same line, and the whole strip scrollable. It is a dialog: it traps nothing
   it does not need to, Escape closes it in the CAPTURE phase because this site
   has handlers upstream that stop the key, and the focus goes back to whatever
   opened it. */
.hg{
  position:fixed; inset:0; z-index:1200;
  display:flex; flex-direction:column;
  background:rgba(10,22,40,.94);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  animation:hgIn 200ms cubic-bezier(.25,.1,.25,1);
}
.hg[hidden]{display:none}

/* WHILE THE POP UP IS OPEN, NOTHING ELSE FLOATS OVER IT.
   `editor.js` pins its Edit layout toggle at z-index 999999, which is above
   everything by design and was therefore above the photograph as well. It is
   a tool for building the page, not for reading it, so it stands down while
   somebody is looking. Reversible, and it does not touch the tool itself. */
body.hg-open #__ed-toggle,
body.hg-open #__ed-bar{display:none !important}
@keyframes hgIn{from{opacity:0}to{opacity:1}}

.hg-bar{
  flex:none; display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:16px clamp(14px,2.4vw,30px);
  border-bottom:1px solid rgba(250,248,243,.14);
}
.hg-count{
  font-family:var(--sans); font-size:10px; font-weight:500; letter-spacing:.17em;
  text-transform:uppercase; color:rgba(250,248,243,.62); margin:0;
}
.hg-count b{color:var(--cream); font-weight:600}
/* GREEN BECOMES THE GROUND, NOT THE INK. --green is #0F5A4F, which reads at
   1.9:1 against navy and is unreadable there. Everywhere else on this site
   that green meets a dark surface it is a filled block with cream on it, which
   is 7.8:1 and keeps the SS22 meaning: green is recorded, checked, done. */
/* THE SEAL CAME OFF THE BAR.                              ·  6 Sep 2026
   "Sealed when they arrived" is already said under the mosaic, on the payment
   protection section and again in the trust panel. Said a fourth time over
   the photograph itself it stopped being reassurance and became something
   sitting on the one thing the reader opened the pop up to look at. The bar
   keeps the position and the way out, which is all that is needed while
   somebody is looking. */
.hg-x{
  width:34px; height:34px; display:grid; place-items:center; flex:none;
  border:0; border-radius:50%; cursor:pointer;
  background:rgba(250,248,243,.10); color:rgba(250,248,243,.82);
  transition:background 150ms, color 150ms;
}
.hg-x:hover{background:rgba(250,248,243,.20); color:var(--cream)}
.hg-x svg{width:16px; height:16px; fill:none; stroke:currentColor;
  stroke-width:2; stroke-linecap:round}

/* THE STRIP SCROLLS, AND IT SNAPS. Sir asked that the pictures can be opened
   and scrolled: a scroll container with snap points is the same gesture on a
   trackpad, a wheel, a touchscreen and the arrow keys, which is four
   behaviours for one declaration. */
.hg-strip{
  flex:1 1 auto; min-height:0;
  display:flex; overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; scroll-behavior:smooth;
  scrollbar-width:none;
}
.hg-strip::-webkit-scrollbar{display:none}
/* ONE OPENING, WHATEVER THE PHOTOGRAPH.                    ·  6 Sep 2026
   Sir: the pictures should be the same size when viewing. They were not, and
   the layout was not the reason. `max-width:100%` does not scale a picture
   UP, so a 900px source sat at 900 in the middle of a field twice that width
   while the next one filled it. Every photograph now gets the SAME opening
   and is fitted into it, so moving between them moves the picture and
   nothing else.

   The shadow went with it. Fitted rather than cropped, an off-ratio
   photograph does not reach the edges of its opening, and the shadow would
   have drawn a rectangle around empty ground. */
.hg-fig{
  flex:0 0 100%; scroll-snap-align:center;
  position:relative; margin:0; min-width:0;
}
/* THE BOX IS ABSOLUTE ON PURPOSE. Three sizings were measured before this
   one: `max-width:100%` does not scale a small picture up; `aspect-ratio`
   with `max-height:100%` overflowed a 720px viewport by 156px because a
   percentage height against a stretched flex item is not definite; and
   `height:100%` in flow kept the picture's own ratio for the same reason.
   An absolutely positioned child resolves percentages against its containing
   block, which always has definite dimensions, so `inset:0` with 100/100 is
   the one form that gives every photograph the same opening at every width.
   Measured at 1600, 1440, 1280, 1280x620, 900 and 375: identical, and never
   taller than the strip. The side padding clears the two arrows. */
.hg-fig img{
  position:absolute; inset:0;
  width:100%; height:100%; box-sizing:border-box;
  padding:clamp(16px,2.2vw,30px) clamp(64px,5.4vw,92px);
  object-fit:contain; display:block;
}

.hg-nav{
  position:absolute; top:50%; translate:0 -50%; z-index:2;
  width:44px; height:44px; display:grid; place-items:center;
  border:0; border-radius:50%; cursor:pointer;
  background:rgba(250,248,243,.12); color:var(--cream);
  transition:background 150ms, opacity 150ms;
}
.hg-nav:hover{background:rgba(250,248,243,.24)}
.hg-nav[disabled]{opacity:.25; cursor:default}
.hg-prev{left:clamp(8px,1.6vw,22px)}
.hg-next{right:clamp(8px,1.6vw,22px)}
.hg-nav svg{width:20px; height:20px; fill:none; stroke:currentColor;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round}

/* The dots are a position, not a control, so they are small and they do not
   invite a click they cannot usefully answer at fifteen photographs. */
/* The dots sat on the photograph's bottom edge because the strip's own padding
   is all the clearance there was. They get their own. */
.hg-dots{
  flex:none; display:flex; gap:6px; justify-content:center;
  padding:12px 0 18px;
}
.hg-dot{
  width:6px; height:6px; border-radius:50%; border:0; padding:0; cursor:pointer;
  background:rgba(250,248,243,.28); transition:background 200ms, scale 200ms;
}
.hg-dot.is-on{background:var(--cream); scale:1.25}

@media (max-width:640px){
  .hg-nav{display:none}          /* a thumb already swipes */
  .hg-fig img{padding:12px}
}
@media (prefers-reduced-motion:reduce){
  .hg{animation:none}
  .hg-strip{scroll-behavior:auto}
  .pdp-media .gt:hover img{scale:1}
}