Create gallery page layouts

[AJaccP]

As a visitor, I want a photo gallery with a landing page showing collections and recent loose photos, and individual collection pages showing all photos in that collection.

---

🧠 Context

The gallery uses Hugo's page bundle system:

• content/gallery/_index.md — branch bundle, landing page. Loose photos in this directory appear in a "latest photos" section below collection cards.
• content/gallery/<event>/index.md — leaf bundle per collection. Photos in the folder are that collection's resources.

For local development, commit a small fixture content tree (2–3 fake collection folders + a few loose photos) to build against. These get gitignored in the real pipeline but can be committed as placeholders while this ticket is in progress.

Image handling:

• Thumbnails: .Fill "500x500 webp q85" — uniform cropped squares, object-fit: cover + aspect-ratio: 1 so every tile is consistent regardless of source orientation
• Full image (on click): .Resize "1600x webp q82" — uncropped, size-capped. Wave 1 = plain browser navigation (no lightbox yet)
• Collection cover: .Resources.GetMatch "cover.*" with fallback to first image alphabetically
• Hugo docs for reference: https://gohugo.io/content-management/image-processing/

---

🛠️ Implementation Plan

1. Commit a small placeholder content tree at content/gallery/ — 2–3 collection folders each with an index.md and a couple of images, plus a loose photo or two in the root. Add content/gallery/**/*.{jpg,jpeg,png,webp,JPG,JPEG,PNG,WEBP} to .gitignore so real photos never enter git, but the placeholder images can be committed temporarily.

2. Create layouts/_default/gallery.html — landing page:

   • Top section: collection cards (cover thumbnail, title, photo count), each linking to the collection page
   • Bottom section: "latest photos" grid of loose photos using the photo-grid partial
   • Use {{ range .Pages }} for collections and {{ .Resources.Match "*.{jpg,jpeg,png,webp}" }} for loose photos

3. Create layouts/_default/gallery-single.html — collection page:

   • Full photo grid for the collection using the photo-grid partial
   • Pass {{ .Resources.Match "*.{jpg,jpeg,png,webp}" }} to the partial

4. Create layouts/partials/gallery-photo-grid.html — shared tile grid:

   • Accepts a slice of image resources
   • Renders lazy-loaded (loading="lazy") WebP thumbnails with explicit width/height
   • Each tile links to the .Resize "1600x webp q82" derivative
   • Responsive CSS: single column on mobile, something like repeat(auto-fill, minmax(160px, 1fr)) on desktop (adjust as needed)

5. Add gallery CSS — Accommodate mobile screens. Collection cards and photo grid stack cleanly

6. Wire content — content/gallery/_index.md with layout: gallery; each collection index.md with layout: gallery-single.

---

✅ Acceptance Criteria

• /gallery landing page shows collection cards and a loose photos grid
• Each collection card links to its collection page and shows a cover image, title, and photo count
• Collection pages show a full grid of that collection's photos
• Thumbnails are uniform cropped squares; clicking navigates to the full uncropped image
• Grid is responsive: single column at ~360px viewport, multi-column on desktop
• loading="lazy" on all thumbnail images
• No image bytes committed to git (placeholder fixture images are temporary)