/* ==========================================================================
   Photos gallery (photos agent). Every rule is scoped to #photos.

   One contact sheet holds all 32 photographs, touching, in an order where
   neighbours share colour along their edges. The sheet rests on one photo in
   focus; wherever you point, tab or tap, that photo opens to its own frame and
   the rest make room (gallery.js). Without JS or with reduced motion, the
   resting sheet is the composition.
   ========================================================================== */

/* The pink table under the print can be retuned from outside (e.g. the page's
   .joy-band) by setting --photos-ground. */
#photos {
  --sheet-gap: 3px;
  --sheet-pad: 10px;           /* the print's paper margin */
  --sheet-radius: 22px;
  --sheet-ground: var(--paper);
  position: relative;
  background: var(--photos-ground, var(--orchid-tint));
  scroll-margin-top: calc(-1 * (var(--chrome-h) + 16px));   /* #photos lands with the whole sheet in view */
  /* The next band on the page slides up over this one by --sheet-r (the page
     agent's stacked sheets), so that much is added below the sheet. */
  padding: calc(var(--chrome-h) + clamp(12px, 2.4vh, 28px)) var(--gutter) calc(clamp(40px, 6vh, 72px) + var(--sheet-r, 0px));
}

#photos .photos__stage {
  position: relative;
  isolation: isolate;
  max-width: 1720px;
  margin-inline: auto;
}
/* The print's shadow lives on its own static layer behind the sheet, so the
   loupe's repaints of the sheet never re-raster this wide soft blur. */
#photos .photos__stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: var(--sheet-radius);
  box-shadow: 0 1px 2px rgba(28, 24, 48, .1), 0 2px 8px -2px rgba(75, 43, 214, .14), 0 44px 80px -40px rgba(75, 43, 214, .5);
  pointer-events: none;
}

#photos .photos__sheet {
  display: grid;
  grid-template-columns: var(--cols);
  grid-template-rows: var(--rows);
  gap: var(--sheet-gap);
  height: clamp(460px, calc(100dvh - var(--chrome-h) - clamp(12px, 2.4vh, 28px) - clamp(40px, 6vh, 72px)), 900px);
  margin: 0;
  padding: var(--sheet-pad);
  list-style: none;
  border-radius: var(--sheet-radius);
  overflow: hidden;
  background: var(--sheet-ground);   /* a contact print: paper margin and seams */
  /* The sheet's size never depends on its photos, so its re-layout while the
     loupe moves can't reach the rest of the page, and each cell's can't reach
     its neighbours' content. */
  contain: strict;
  isolation: isolate;
}

#photos .photos__cell {
  grid-column: var(--c);
  grid-row: var(--r);
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  contain: strict;
  background: color-mix(in srgb, var(--orchid) 22%, var(--orchid-tint));
}

#photos .photos__frame {
  position: absolute;
  inset: 0;
  display: block;
  cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

#photos .photos__frame img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 50%;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
/* Until gallery.js gives a thumbnail its src, nothing shows (not even alt
   text): the cell's own colour holds the place. */
#photos .photos__frame img:not([src]) { opacity: 0; }

/* Keyboard focus sits inside the frame (the frames touch): an ink ring with a
   paper ring inside it, legible on any photograph. */
#photos .photos__frame:focus-visible::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 3px var(--ink-fixed), inset 0 0 0 6px var(--paper);
  pointer-events: none;
}

@media (max-width: 700px) {
  #photos {
    --sheet-gap: 2px;
    --sheet-pad: 6px;
    --sheet-radius: 14px;
    padding: calc(var(--chrome-h) + 8px) 16px calc(28px + var(--sheet-r, 0px));
  }
  #photos .photos__sheet {
    grid-template-columns: var(--pcols);
    grid-template-rows: var(--prows);
    height: clamp(520px, calc(100dvh - var(--chrome-h) - 36px), 820px);
  }
  #photos .photos__cell {
    grid-column: var(--pc);
    grid-row: var(--pr);
  }
}