/* GALLERY PAGE (separate file: only /gallery loads it).
   The photo tiles and the popup viewer are the same ones as the home gallery (site.css + site.js). */

.gpage { padding: 1.75rem 0 2.5rem; background: #fff; }

.gpage-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 0 0 1.5rem; padding: 0 1rem; }
.gpage-nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.1rem;
  border: 1px solid var(--green); color: var(--green); font-weight: 500; text-decoration: none;
  transition: background-color .2s, color .2s;
}
.gpage-nav a:hover { background: var(--green); color: #fff; }

.gpage-group { max-width: 1320px; margin: 0 auto 2rem; padding: 0 1rem; scroll-margin-top: calc(var(--header-h) + .5rem); }
.gpage-group h2 { margin: 0 0 .75rem; font: 400 clamp(1.5rem, 5vw, 2.25rem)/1.2 var(--font-head); }

/* Even grid (the home page grid has one big tile; this one does not) */
.gallery-grid--page { grid-template-columns: 1fr 1fr; gap: 6px; }
.gallery-grid--page .gallery-item,
.gallery-grid--page .gallery-item:first-child { grid-column: auto; grid-row: auto; aspect-ratio: 4 / 3; }

.gpage-cta { max-width: 40em; margin: 2rem auto 0; padding: 0 1.25rem; text-align: center; }
.gpage-cta p { margin: 0 0 1rem; line-height: 1.6; color: #4b5148; }

@media (min-width: 768px) {
  .gallery-grid--page { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .gpage-group { padding: 0 1.5rem; }
}
@media (min-width: 1100px) {
  .gallery-grid--page { grid-template-columns: repeat(4, 1fr); }
  .gpage-group { padding: 0 2rem; }
}