/* ==========================================================================
   gallery.css — gallery page styles
   Per-page CSS for /gallery/<category>/index.html
   ========================================================================== */

/* Per-gallery accent — set via body class */
.gallery-page--landscapes { --gallery-accent: var(--accent-gold); }
.gallery-page--water { --gallery-accent: var(--accent-cool); }
.gallery-page--sunrise-sunset { --gallery-accent: var(--accent-amber); }
.gallery-page--misc { --gallery-accent: var(--accent-ember); }

/* ===== GALLERY PAGE HERO ================================================== */
.gallery-hero {
  position: relative;
  height: 56vh;
  min-height: 380px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.gallery-hero-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -1;
}
/* Sunrises/Sunsets hero is darker than the others. Pull the framing to the
   lower-left where the golden ridges sit, so the visible portion is brighter. */
.gallery-page--sunrise-sunset .gallery-hero-img {
  object-position: left bottom;
}
.gallery-hero::before {
  content: '';
  position: absolute; inset: 0;
  /* Thin dark band at the very top (0-13%) just where the nav sits, so the
     menu reads against bright hero photos (autumn foliage, sunlit waterfalls).
     The middle stays bright. Bottom darkens for the title text. */
  background: linear-gradient(
    to bottom,
    rgba(10, 8, 5, 0.5) 0%,
    transparent 13%,
    transparent 55%,
    rgba(10, 8, 5, 0.35) 78%,
    rgba(10, 8, 5, 0.7) 100%
  );
  z-index: 0;
}
.gallery-hero-content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3rem);
  padding-bottom: clamp(2.5rem, 6vh, 5rem);
}
.gallery-hero-content .eyebrow {
  color: var(--gallery-accent);
  margin-bottom: 0.8rem;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
}
.gallery-hero-content h1 {
  font-size: clamp(2.4rem, 5.2vw, 4.4rem);
  margin-bottom: 0.6rem;
  /* Two-layer shadow lifts the title off ANY background — a wide soft glow
     plus a tight crisp shadow for edge contrast. */
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.7);
}
.gallery-hero-content p {
  max-width: 52ch;
  color: var(--text-primary);
  opacity: 0.95;
  font-size: clamp(0.95rem, 1.4vw, 1.1rem);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7);
}

/* ===== GALLERY INTRO STRIP ================================================ */
.gallery-intro {
  padding-block: clamp(2.5rem, 5vw, 4rem);
}
.gallery-intro-inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.gallery-intro p { max-width: 56ch; font-size: 1.02rem; }
.gallery-count {
  font-size: 0.76rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
.gallery-back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 2rem;
  transition: color var(--transition);
}
.gallery-back::before { content: '\2190'; font-size: 1.1em; line-height: 1; }
.gallery-back:hover, .gallery-back:focus-visible { color: var(--gallery-accent); }

/* ===== MASONRY GRID ======================================================= */
.gallery-grid {
  column-count: 3;
  column-gap: clamp(0.8rem, 1.4vw, 1.6rem);
  padding-bottom: clamp(4rem, 9vw, 9rem);
}
.gallery-item {
  break-inside: avoid;
  display: block;
  margin-bottom: clamp(0.8rem, 1.4vw, 1.6rem);
  overflow: hidden;
  position: relative;
  background: var(--bg-card);
}
.gallery-item img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1), filter 0.4s ease;
  filter: brightness(1);
}
.gallery-item:hover img,
.gallery-item:focus-visible img {
  transform: scale(1.04);
  filter: brightness(1);
}
.gallery-item::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10, 8, 5, 0.6) 0%, transparent 35%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.gallery-item:hover::after,
.gallery-item:focus-visible::after { opacity: 1; }

/* ===== RESPONSIVE ========================================================= */
@media (max-width: 1024px) {
  .gallery-grid { column-count: 2; }
}
@media (max-width: 560px) {
  .gallery-grid { column-count: 1; }
  .gallery-intro-inner { flex-direction: column; align-items: flex-start; }
}