.pxsnap_gallery{width:100%;float:left;height:auto;background-color:#121212;clear:both;}
.pxsnap_gallery_in{width:100%;float:left;height:auto;clear:both;padding:20px 80px 40px 80px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
.pxsnap_gallery .gallery_page{width:100%;height:auto;clear:both;max-width:1920px;margin:0px auto;}
.pxsnap_gallery .gallery_list{width:100%;float:left;height:auto;clear:both;margin-bottom:40px;}
/* The photo grid. The gap between photos is set in one place — the 12px
   below (the list is pulled 12px left, and every photo pushes itself 12px
   back to the right, which is how the columns get their spacing). Change
   all three 12px values together to widen or narrow the grid. */
.pxsnap_gallery .gallery_list ul{margin:0px;list-style-type:none;margin-left:-12px;}
.pxsnap_gallery .gallery_list ul li{width:25%;padding-left:12px;margin-bottom:12px;float:left;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
.pxsnap_gallery .gallery_list .item{width:100%;float:left;height:auto;clear:both;}
/* Rounded corners on every photo. The radius sits on both the link and the
   picture inside it so the corners stay clean while a photo is loading. */
.pxsnap_gallery .gallery_list .item a{display:block;border-radius:10px;overflow:hidden;}
.pxsnap_gallery .gallery_list .item img{width:100%;display:block;border-radius:10px;}
/* Gallery page spacing — moved out of Views/Home/Gallery.cshtml so the
   stylesheet is the only place layout is decided. The page used to start with a
   10% margin plus 80px of padding, which left a large empty band under the
   header. Both were trimmed; the 20px of top padding above (line 2) is just
   enough to keep the first heading off the header. */
.pxsnap_gallery .collection_title{margin-top:14px;}

/* ── Which photo is the mouse on? ──────────────────────────────────────────
   Moving the mouse over a photo lifts the tile a little, zooms the picture
   inside its own frame and draws a thin blue line around it. The frame never
   changes size — only the picture inside it grows — so nothing else on the
   page moves. The place name underneath brightens at the same moment, and
   hovering the place name lights the photo up too, because the whole tile
   reacts as one.
   Phones and tablets are left out on purpose: there is no mouse to follow, and
   the effect would stay stuck on the last photo tapped. */
@media (hover: hover) and (pointer: fine) {
  .pxsnap_gallery .gallery_list .item { transition: transform .45s ease; }
  .pxsnap_gallery .gallery_list .item a { transition: box-shadow .45s ease; }
  .pxsnap_gallery .gallery_list .item img { transition: transform .6s ease, filter .45s ease; }
  .pxsnap_gallery .gallery_list .item .photo_location { transition: color .45s ease; }

  .pxsnap_gallery .gallery_list .item:hover { transform: translateY(-4px); }
  .pxsnap_gallery .gallery_list .item:hover a {
    box-shadow: 0 0 0 1px rgba(157,185,210,0.5), 0 12px 28px rgba(157,185,210,0.12);
  }
  .pxsnap_gallery .gallery_list .item:hover img { transform: scale(1.05); filter: brightness(1.05); }
  .pxsnap_gallery .gallery_list .item:hover .photo_location { color: #fff; }

  /* Some people ask their computer to keep movement on screen to a minimum
     (Windows: Settings > Accessibility > Visual effects > Animation effects).
     For them the photo stays perfectly still and only the line and the
     brightening mark which one the mouse is on. */
  @media (prefers-reduced-motion: reduce) {
    .pxsnap_gallery .gallery_list .item:hover { transform: none; }
    .pxsnap_gallery .gallery_list .item:hover img { transform: none; }
  }
}

/* The page behind the photo grid: a neutral dark grey (92% dark) instead of
   near-black, so photos are judged against a calm even tone. Only the grid
   of photos gets it - the "choose a collection" screen stays dark. */
.pxsnap_gallery.gallery_grid_bg{background-color:#141414;}

/* ── The next / previous buttons on an opened photo ────────────────────────
   These style the arrows of the click-to-enlarge photo viewer, which is the
   same on the gallery page and on every portfolio album. Out of the box the
   viewer draws its arrows as two overlapping grey-and-white triangles, which
   look rough — especially on a phone, where they are simply shrunk. Here
   they become what the private client viewer already has: a soft frosted
   circle holding a thin chevron, brightening under the finger or the mouse.
   The triangles the viewer normally draws are switched off below. */
button.mfp-arrow {
  width: 52px; height: 52px; top: 50%; margin: -26px 0 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 1;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
button.mfp-arrow:hover,
button.mfp-arrow:focus {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.4);
  opacity: 1;
}
/* Pressing the button squeezes it a touch instead of jumping it upward. */
button.mfp-arrow:active { margin-top: -26px; transform: scale(0.92); }

.mfp-arrow-left  { left: 20px; }
.mfp-arrow-right { right: 20px; }

/* The old triangles: one half hidden, the other rebuilt as a thin chevron.
   A chevron is a small square with only two of its sides drawn, turned 45
   degrees; the turned shape sits off-centre in its box, so each side nudges
   it a few pixels back toward the middle of the circle. */
.mfp-arrow:before { display: none; }
.mfp-arrow:after {
  display: block; width: 13px; height: 13px;
  top: 50%; left: 50%; margin: 0;
  border: 0;
  border-top: 2px solid rgba(255, 255, 255, 0.9);
  border-right: 2px solid rgba(255, 255, 255, 0.9);
}
.mfp-arrow-left:after {
  margin: 0; border-left: 0; border-bottom: 0;
  border-top: 2px solid rgba(255, 255, 255, 0.9);
  border-right: 2px solid rgba(255, 255, 255, 0.9);
  transform: translate(calc(-50% + 3px), -50%) rotate(-135deg);
}
.mfp-arrow-right:after {
  margin: 0; border-left: 0; border-bottom: 0;
  border-top: 2px solid rgba(255, 255, 255, 0.9);
  border-right: 2px solid rgba(255, 255, 255, 0.9);
  transform: translate(calc(-50% - 3px), -50%) rotate(45deg);
}

/* On a phone the circles come in a size that suits a fingertip, sit a
   little closer to the edges, and drop the three-quarter shrink the viewer
   used to apply. */
@media all and (max-width: 900px) {
  button.mfp-arrow { width: 44px; height: 44px; margin: -22px 0 0; transform: none; }
  button.mfp-arrow:active { margin-top: -22px; transform: scale(0.92); }
  .mfp-arrow:after { width: 11px; height: 11px; }
  .mfp-arrow-left  { left: 10px; }
  .mfp-arrow-right { right: 10px; }
}

/* ── Nothing moves behind an opened photo ──────────────────────────────────
   The viewer itself now pins the page down while a photo is open (see the
   note in wwwroot/js/px.js). These two lines are the belt to that pair of
   braces on a phone: a swipe that runs out of room inside the viewer stops
   there instead of passing the movement on to the page underneath, which is
   also what stops Android's pull-down-to-refresh from firing mid-photo. */
.mfp-wrap,
.mfp-bg {
  overscroll-behavior: contain;
}