/* starbuck-galleries: the gallery grid (ROADMAP Item 5), justified rows of
   uncropped photos, each link carrying its photo's shape as --ar. sg-gallery.js
   loads this before it draws a gallery into a post; a gallery's own page links
   it directly. It moved here from Ghost's Site header on 2026-10-17, when the
   card in a post became three lines. */

/* --sg-row is the row height a row starts from; each row then stretches to
   fill the width, so rows end up a little taller. Lower means more photos to
   a row. Guy, 2026-10-17: 190 px on a desktop (4 or 5 to a row in the wide
   column), 100 px on a phone, where 190 left one photo to a row and a
   gallery several screens long; 100 fits two landscape photos side by side
   (ROADMAP Item 21). */
.sg-gallery { --sg-row: 190px; display: flex; flex-wrap: wrap; gap: 4px; }
@media (max-width: 600px) {
  .sg-gallery { --sg-row: 100px; }
}
.sg-gallery::after { content: ""; flex: 10000 1 0; }
.sg-gallery > a {
  position: relative; display: block; overflow: hidden;
  flex: calc(var(--ar) * 100) 1 calc(var(--ar) * var(--sg-row));
  aspect-ratio: var(--ar);
  background: rgba(128, 128, 128, .15);
}
.sg-gallery > a > img { display: block; width: 100%; height: 100%; margin: 0; object-fit: cover; }
/* Each link with a caption carries it for the lightbox to read (the Title no
   longer shows, Guy 2026-10-19). With a mouse, it shows as a band across the
   thumbnail's foot while it is pointed at, as SmugMug did (Guy, 2026-10-17); a
   touch screen has no hover, so there it stays for the lightbox alone. */
.sg-gallery .pswp-caption-content { display: none; }
@media (hover: hover) {
  .sg-gallery > a > .pswp-caption-content {
    display: block; position: absolute; left: 0; right: 0; bottom: 0;
    max-height: 100%; overflow: hidden;
    padding: 10px 14px 12px;
    background: rgba(0, 0, 0, .55); color: rgba(255, 255, 255, .85);
    /* em, from the post's own text (18 px in a post), not rem: the theme sets
       its root to 10 px, so .85rem came out at 8.5 px (Guy, 2026-10-17: "a
       little small"). Now about 13.5 px. */
    font-size: .75em; line-height: 1.35; text-align: left;
    opacity: 0; transition: opacity .2s; pointer-events: none;
  }
  .sg-gallery > a:hover > .pswp-caption-content,
  .sg-gallery > a:focus-visible > .pswp-caption-content { opacity: 1; }
}