/* Article photo galleries: horizontal scroller with arrows
   ---------------------------------------------------------------------------
   Upload to:  wp-content/uploads/site/gallery.css

   This file only changes .gallery, the strip of photographs at the foot of an
   article. The large hero photograph above the text is untouched.

   It is a separate file rather than an addition to style.css so that your
   stylesheet is not overwritten, and so this can be removed by deleting one
   file and one line if you decide against it.

   The markup is unchanged. gallery.js wraps the existing .gallery in a
   .gallery-wrap and inserts the two buttons, so posts, the importer and the
   lightbox all carry on working exactly as before. With JavaScript off, the
   gallery is still a scrollable strip; only the arrows are missing. */

.gallery-wrap{ position:relative; margin-top:2rem; }

/* The strip itself. Was: display:grid with three equal columns. */
.gallery:has(.shot){
  margin-top:0;
  display:flex;
  gap:.75rem;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  /* Room for the hover lift, which would otherwise be clipped by overflow. */
  padding:4px 4px 10px;
  margin-inline:-4px;
  /* Hide the scrollbar: the arrows are the control, and a bar under three
     photographs looks like a mistake. Scrolling by touch or trackpad still
     works, and so do the arrow keys when the strip has focus. */
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.gallery:has(.shot)::-webkit-scrollbar{ display:none; }

.gallery .shot{
  flex:0 0 calc((100% - 1.5rem) / 3);   /* three across, matching the old grid */
  aspect-ratio:1/1;
  scroll-snap-align:start;
}

/* Keyboard users can scroll the strip directly; make that visible. */
.gallery:has(.shot):focus-visible{ outline:2px solid var(--red, #c4342b); outline-offset:3px; }

/* ---- Arrows ---------------------------------------------------------- */

.gallery-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  z-index:3;
  width:42px; height:42px; border-radius:50%;
  display:grid; place-items:center;
  cursor:pointer;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(11,21,38,.86);
  color:#fff;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  box-shadow:0 6px 18px rgba(11,21,38,.26);
  transition:opacity .25s ease, transform .25s ease, background .25s ease;
}
.gallery-nav svg{ width:20px; height:20px; display:block; }
.gallery-nav:hover{ background:rgba(11,21,38,.96); }
.gallery-nav:active{ transform:translateY(-50%) scale(.94); }
.gallery-nav:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

.gallery-prev{ left:-6px; }
.gallery-next{ right:-6px; }

/* At either end, and when every photograph already fits, the arrow is hidden
   rather than greyed out: a dead control is worse than no control. It keeps
   its space so the strip does not jump. */
.gallery-nav[hidden]{ display:none; }
.gallery-nav:disabled{
  opacity:0; pointer-events:none;
}

/* Fade the edge the photographs run off, so it reads as "more this way"
   rather than as a crop. Only on the side that actually has more. */
.gallery-wrap::before,
.gallery-wrap::after{
  content:""; position:absolute; top:0; bottom:10px; width:46px;
  pointer-events:none; z-index:2; opacity:0; transition:opacity .25s ease;
}
.gallery-wrap::before{
  left:0; background:linear-gradient(to right, var(--paper, #fff), transparent);
}
.gallery-wrap::after{
  right:0; background:linear-gradient(to left, var(--paper, #fff), transparent);
}
.gallery-wrap.can-prev::before{ opacity:1; }
.gallery-wrap.can-next::after{ opacity:1; }

@media (max-width:860px){
  .gallery:has(.shot) .shot{ flex-basis:calc((100% - .75rem) / 2); }   /* two across */
}

@media (max-width:560px){
  /* One and a bit, so it is obvious there is more to the right without
     needing the arrow. */
  .gallery .shot{ flex-basis:78%; }
  .gallery-nav{ width:38px; height:38px; }
  .gallery-prev{ left:-2px; }
  .gallery-next{ right:-2px; }
}

@media (prefers-reduced-motion:reduce){
  .gallery:has(.shot){ scroll-behavior:auto; }
  .gallery-nav{ transition:none; }
  .gallery-wrap::before, .gallery-wrap::after{ transition:none; }
}

/* ---------------------------------------------------------------------------
   WHY EVERY RULE ABOVE IS SCOPED WITH :has(.shot)

   WordPress's own media gallery outputs <div class="gallery"> too. Without
   this scoping, these flex rules would apply to it, and its items, which have
   no .shot class and therefore no flex-basis, would collapse to zero width:
   the images would be present in the HTML and invisible on screen.

   :has() restricts all of this to galleries built from .shot buttons, which
   are yours. A gallery inserted through Add Media keeps WordPress's own
   layout and is left completely alone.
   ------------------------------------------------------------------------ */

/* wpautop occasionally leaves an empty paragraph beside a block element such
   as the gallery. Harmless, but it shows as a gap in the text. */
.story-body p:empty{ display:none; }