/* ==========================================================================
   Gallery

   The page used to be a bare loop of <img width="32%"> tags with the image
   filename as the alt text, sitting beside the same right-hand sidebar the
   listings had. Photos were not captioned, not credited to the place they
   came from, and not clickable.

   Same palette and rhythm as the home and listing pages.
   ========================================================================== */

.sp-gallery {
  --gl-teal:      #427c78;
  --gl-teal-deep: #2f5f5c;
  --gl-teal-soft: #eef4f3;
  --gl-ink:       #232c2b;
  --gl-soft:      #5f6f6c;
  --gl-line:      #e2eae8;
  --gl-sand:      #faf8f4;

  background-color: var(--gl-sand);
  color: var(--gl-ink);
  font-family: "Heebo", sans-serif;
}

.sp-gallery h1,
.sp-gallery h2,
.sp-gallery h3 { margin: 0; color: inherit; text-shadow: none; }

.sp-gallery-wrap {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ----------------------------------------------------------------- head -- */

.sp-gallery-head {
  padding: 72px 0 40px;
  text-align: center;
}

.sp-gallery-head .sp-eyebrow {
  display: block;
  margin-bottom: 10px;
  color: var(--gl-teal);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.sp-gallery-head h1 {
  font-family: "Amatic SC", cursive;
  font-size: clamp(3rem, 7vw, 5rem);
  font-weight: 700;
  line-height: 1.02;
  color: var(--gl-teal);
}

.sp-gallery-intro {
  max-width: 660px;
  margin: 14px auto 0;
  color: var(--gl-soft);
  font-size: 1.0625rem;
  line-height: 1.7;
}

/* ----------------------------------------------------------------- grid -- */

/* A column layout rather than a row grid: the source photos run from 800x800
   squares to 5184x3456 landscape, and columns let each keep its own shape
   instead of being cropped to a common one. */
.sp-shots {
  columns: 3;
  column-gap: 20px;
  padding-bottom: 80px;
}

.sp-shot {
  position: relative;
  display: block;
  width: 100%;
  margin: 0 0 20px;
  padding: 0;
  border: 0;
  border-radius: 14px;
  overflow: hidden;
  background: var(--gl-teal-soft);
  /* Keeps a figure from being split across two columns. */
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  cursor: zoom-in;
  color: inherit;
  text-align: left;
}

.sp-shot img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform .35s ease;
}
.sp-shot:hover img { transform: scale(1.03); }

.sp-shot figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 34px 16px 14px;
  background: linear-gradient(to top, rgba(20, 30, 29, .85), rgba(20, 30, 29, 0));
  color: #fff;
  opacity: 0;
  transition: opacity .2s ease;
}
.sp-shot:hover figcaption,
.sp-shot:focus-visible figcaption { opacity: 1; }

.sp-shot-title {
  display: block;
  font-family: "Amatic SC", cursive;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.05;
}

.sp-shot-cat {
  display: block;
  margin-top: 2px;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
}

.sp-shot:focus-visible { outline: 3px solid var(--gl-teal); outline-offset: 3px; }

.sp-gallery-empty {
  padding: 20px 0 90px;
  text-align: center;
  color: var(--gl-soft);
  font-size: 1.0625rem;
}

/* ------------------------------------------------------------- lightbox -- */

.sp-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 32px;
  background: rgba(15, 24, 23, .93);
}
.sp-lightbox[open],
.sp-lightbox.is-open { display: flex; }

.sp-lightbox-figure {
  position: relative;
  max-width: 1100px;
  max-height: 100%;
  margin: 0;
  text-align: center;
}

.sp-lightbox img {
  display: block;
  max-width: 100%;
  /* Leaves room for the caption and the "View listing" button beneath. */
  max-height: calc(100vh - 260px);
  width: auto;
  height: auto;
  margin: 0 auto;
  border-radius: 10px;
}

.sp-lightbox figcaption {
  padding-top: 16px;
  color: #fff;
}

.sp-lightbox .sp-shot-title { font-size: 2rem; }
.sp-lightbox .sp-shot-cat { color: rgba(255, 255, 255, .7); }

.sp-lightbox-link {
  display: inline-block;
  margin-top: 12px;
  padding: 9px 20px;
  border-radius: 999px;
  background: #fff;
  color: var(--gl-ink) !important;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color .16s ease, color .16s ease;
}
.sp-lightbox-link:hover { background: var(--gl-teal); color: #fff !important; text-decoration: none; }

/* Controls.

   Anchored to the viewport rather than the figure: the figure is only as wide
   as the photo, so arrows offset from its edges landed on top of a wide image
   and off-screen next to a narrow one. */
.sp-lightbox button {
  position: fixed;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 50%;
  background: rgba(0, 0, 0, .35);
  color: #fff;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease;
}
.sp-lightbox button:hover { background: rgba(255, 255, 255, .18); border-color: #fff; }
.sp-lightbox button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.sp-lightbox .sp-lb-prev { top: 50%; left: 20px; transform: translateY(-50%); }
.sp-lightbox .sp-lb-next { top: 50%; right: 20px; transform: translateY(-50%); }
.sp-lightbox .sp-lb-close { top: 20px; right: 20px; }

/* ----------------------------------------------------------------- more -- */

.sp-gallery .sp-more {
  padding: 64px 0 72px;
  background: #fff;
  border-top: 1px solid var(--gl-line);
}

/* ----------------------------------------------------------- responsive -- */

@media (max-width: 980px) {
  .sp-shots { columns: 2; }
}

@media (max-width: 900px) {
  .sp-lightbox { padding: 20px; }
  .sp-lightbox .sp-lb-prev { left: 6px; }
  .sp-lightbox .sp-lb-next { right: 6px; }
  .sp-lightbox .sp-lb-close { top: 6px; right: 6px; }
  /* Touch has no hover, so the caption stays put. */
  .sp-shot figcaption { opacity: 1; }
}

@media (max-width: 560px) {
  .sp-gallery-head { padding: 52px 0 32px; }
  .sp-shots { columns: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .sp-shot img,
  .sp-shot figcaption { transition: none; }
  .sp-shot:hover img { transform: none; }
}