/* Contributed photographs on a guide page.
 *
 * Five arrangements, chosen on the server by the shape and number of the
 * pictures (see family_photos.rs). Nothing here changes which photos appear or
 * whether they appear at all -- that is decided before a byte reaches the page.
 *
 * The slideshow is deliberately usable with no JavaScript: it is a scroll-snap
 * strip that already shows every photograph, and spi-page-photos.js only adds
 * buttons to it. */

.spi-page-photos {
  margin: 2.25rem 0 0;
  display: grid;
  gap: 1rem;
}

.spi-page-photos > h2 {
  margin: 0;
  font-size: 1.3rem;
  color: var(--spi-section-heading, #075985);
}

.spi-photo {
  margin: 0;
  display: grid;
  gap: .45rem;
  border: 1px solid var(--spi-border);
  border-radius: .8rem;
  overflow: hidden;
  background: var(--luperiq-surface, #fff);
  box-shadow: var(--spi-shadow);
}

.spi-photo img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--spi-muted);
}

.spi-photo figcaption {
  display: grid;
  gap: .2rem;
  padding: .6rem .8rem .8rem;
  font-size: .92rem;
  line-height: 1.45;
}

.spi-photo figcaption p { margin: 0; }

.spi-photo-credit {
  font-size: .82rem;
  opacity: .75;
}

/* Hero -- a sideways photo across the full width of the page. The fixed aspect
 * ratio stops a very wide panorama from becoming a letterbox sliver. */
.spi-photo-hero .spi-photo {
  border-radius: 1rem;
}

.spi-photo-hero .spi-photo img {
  aspect-ratio: 16 / 7;
  max-height: 62vh;
  object-fit: cover;
}

/* Single */
.spi-photo-single {
  display: grid;
  justify-items: center;
}

.spi-photo-single .spi-photo {
  max-width: 44rem;
  width: 100%;
}

/* Checkerboard -- two columns whose cells alternate tall and short, so a mix of
 * upright and sideways photographs interlocks instead of leaving ragged gaps. */
.spi-photo-checkerboard {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  align-items: start;
}

/* Two columns, four cells to a repeat: tall, short / short, tall. That is what
 * makes it read as a checkerboard rather than as alternating rows. */
.spi-photo-checkerboard .spi-photo img { aspect-ratio: 4 / 3; object-fit: cover; }
.spi-photo-checkerboard .spi-photo:nth-child(4n+1) img,
.spi-photo-checkerboard .spi-photo:nth-child(4n) img { aspect-ratio: 3 / 4; }

/* Gallery wall */
.spi-photo-gallery-wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 1rem;
  align-items: start;
}

.spi-photo-gallery-wall .spi-photo img { aspect-ratio: 1 / 1; object-fit: cover; }
.spi-photo-gallery-wall .spi-photo.is-sideways { grid-column: span 2; }
.spi-photo-gallery-wall .spi-photo.is-sideways img { aspect-ratio: 16 / 9; }

/* Slideshow -- one photo at a time on a snapping rail. Without JavaScript this
 * still scrolls by touch, trackpad and keyboard. */
.spi-photo-slideshow {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: .4rem;
  -webkit-overflow-scrolling: touch;
}

.spi-photo-slideshow .spi-photo {
  scroll-snap-align: center;
}

.spi-photo-slideshow .spi-photo img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.spi-photo-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  flex-wrap: wrap;
}

.spi-photo-controls button {
  min-width: 3rem;
  min-height: 2.75rem;
  padding: .4rem 1rem;
  border: 1px solid var(--spi-border);
  border-radius: 999px;
  background: var(--luperiq-surface, #fff);
  color: inherit;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.spi-photo-controls button:disabled { opacity: .45; cursor: default; }
.spi-photo-controls button:focus-visible { outline: 3px solid var(--spi-section-heading, #164e63); outline-offset: 2px; }
.spi-photo-count { font-size: .9rem; opacity: .8; }

@media (max-width: 34rem) {
  .spi-photo-checkerboard { grid-template-columns: 1fr; }
  .spi-photo-checkerboard .spi-photo img,
  .spi-photo-gallery-wall .spi-photo img { aspect-ratio: 4 / 3; }
  .spi-photo-gallery-wall .spi-photo.is-sideways { grid-column: span 1; }
  .spi-photo-hero .spi-photo img { aspect-ratio: 4 / 3; }
}

@media (prefers-reduced-motion: reduce) {
  .spi-photo-slideshow { scroll-behavior: auto; }
}