/* =========================================================================
   GALLERY PAGE — src/gallery.njk, src/_includes/components/gallery.njk,
   and the gallery/year-filter/lightbox functions in assets/js/main.js.

   Everything here extends the frozen vocabulary in styles.css (.wrap,
   .band, .pill, .polaroid, .photo-slot, .icon-circle, .h-*, .btn, .eyebrow…)
   No gradients, no emoji, no parallel component names.
   ========================================================================= */

/* ---- Hero ---- */

.gallery-hero-row {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 48px;
}
.gallery-hero-copy { max-width: 620px; }
.gallery-hero-copy .h-page { margin: 16px 0 0; }
.gallery-hero-lede { max-width: 360px; margin: 0 0 6px; }

@media (max-width: 900px) {
  .gallery-hero-row { flex-direction: column; align-items: flex-start; gap: 20px; }
  .gallery-hero-lede { max-width: none; }
}

/* ---- Year filter pills ("Jump to a year") ---- */

.gallery-filters {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 36px 0 16px;
}
.gallery-filters-label {
  font-family: var(--font-display); font-weight: 700; font-size: 16px;
  color: var(--body-faint); margin-right: 6px;
}
.filter-btn {
  background: var(--cream-deep); border: 0; color: var(--grape);
  font-family: var(--font-display); font-weight: 700; font-size: 16.5px;
  padding: 9px 22px; border-radius: var(--r-pill); cursor: pointer;
  min-height: 44px; transition: background .15s ease, color .15s ease;
}
.filter-btn:hover { background: var(--lilac); }
.filter-btn.active { background: var(--orange); color: var(--ink); }

/* ---- Loading / error state ---- */

.gallery-loading { padding: 48px 0; text-align: center; }

/* ---- Year sections ---- */

.gallery-year { padding: 20px 0 40px; }
.gallery-year:last-child { padding-bottom: 8px; }
.gallery-year-head {
  font-family: var(--font-display); font-weight: 800; font-size: 34px; line-height: 1;
  display: flex; align-items: baseline; gap: 12px; margin: 0 0 20px; color: var(--ink);
}
.gallery-year-count {
  font-family: var(--font-body); font-weight: 400; font-size: 16px; color: var(--body-faint);
}

@media (max-width: 700px) {
  .gallery-year-head { font-size: 27px; }
}

/* ---- Grids ----
   The newest year (first section returned by the API) gets the masonry
   rhythm; older years render as a plain four-up row. Spans are fixed at
   14/10 rows regardless of photo count, so 1-3 photos still read as an
   intentional layout instead of a collapsed grid. Do not raise these spans
   — taller cards produce slabs no real photo can fill. */

.gallery-grid-masonry {
  display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 22px; gap: 20px;
}
.masonry-tall { grid-row: span 14; }
.masonry-short { grid-row: span 10; }

.gallery-grid-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.gallery-grid-row .gallery-trigger { height: 230px; }

@media (max-width: 900px) {
  .gallery-grid-masonry, .gallery-grid-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .gallery-grid-masonry, .gallery-grid-row { grid-template-columns: 1fr; gap: 16px; }
  .masonry-tall { grid-row: span 11; }
  .masonry-short { grid-row: span 9; }
  .gallery-grid-row .gallery-trigger { height: 210px; }
}

/* ---- Cards ---- */

.gallery-item { margin: 0; }
.gallery-trigger {
  display: block; flex: 1; min-height: 0; width: 100%;
  padding: 0; border: 0; background: none; cursor: zoom-in;
}
.gallery-trigger img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 2px; display: block;
}
.gallery-trigger:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }

/* ---- Empty state (zero photos in Cloudflare Images) ---- */

.gallery-empty { text-align: center; padding: 24px 0 48px; }
.gallery-empty .h-sub { margin: 10px 0 10px; }
.gallery-empty .body { max-width: 480px; margin: 0 auto; }
.gallery-empty-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
  max-width: 720px; margin: 36px auto 0;
}
.gallery-empty-row .polaroid { height: 180px; }

@media (max-width: 700px) {
  .gallery-empty-row { grid-template-columns: repeat(2, 1fr); max-width: 360px; }
}

/* ---- Submission band ---- */

.gallery-cta-row {
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
}
.gallery-cta-copy { display: flex; align-items: center; gap: 18px; }
.gallery-cta-copy .h-sub { margin: 0 0 2px; }
.gallery-cta-copy .body { margin: 0; color: var(--ink); }

@media (max-width: 700px) {
  .gallery-cta-row { flex-direction: column; align-items: flex-start; gap: 20px; }
}

/* ---- Lightbox (page-specific: no shared vocab entry covers a modal) ---- */

.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(42, 27, 46, .92);
  display: flex; align-items: center; justify-content: center;
  padding: 32px;
}
.lightbox[hidden] { display: none; }
.lightbox figure {
  margin: 0; max-width: min(1000px, 92vw); max-height: 92vh;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.lightbox img {
  max-width: 100%; max-height: 76vh; border-radius: var(--r-card-sm);
  box-shadow: var(--shadow-float); display: block;
}
.lightbox figcaption {
  font-family: var(--font-display); font-weight: 700; font-size: 17px;
  color: var(--cream); text-align: center;
}
.lightbox-count { margin: 0; font-family: var(--font-body); font-size: 14px; color: var(--lilac); }

.lightbox-close, .lightbox-nav {
  position: absolute; width: 48px; height: 48px; border-radius: 50%;
  background: var(--cream); color: var(--ink); border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s ease;
}
.lightbox-close:hover, .lightbox-nav:hover { background: var(--orange-light); }
.lightbox-close { top: 24px; right: 24px; }
.lightbox-close svg { transform: rotate(45deg); }
.lightbox-nav { top: 50%; transform: translateY(-50%); }
.lightbox-prev { left: 24px; }
.lightbox-next { right: 24px; }
.lightbox-nav[hidden] { display: none; }

@media (max-width: 700px) {
  .lightbox { padding: 16px; }
  .lightbox-close { top: 12px; right: 12px; width: 42px; height: 42px; }
  .lightbox-nav { width: 42px; height: 42px; }
  .lightbox-prev { left: 12px; }
  .lightbox-next { right: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .filter-btn, .lightbox-close, .lightbox-nav { transition: none; }
}

/* Deliberately NOT using content-visibility here: skipping a subtree also stops
   IntersectionObserver reporting anything inside it, which silently disables the
   lazy loading in main.js and leaves every photo blank. The observer does the
   real work of keeping the page light. */