/* =============================================================================
   gallery.css — Radiant Light Studios
   Styles for /what-i-saw-in-them/. global.css is already loaded.
   ============================================================================= */

/* =============================================================================
   PAGE HEADER
   Clears the fixed nav (140px top padding), eyebrow + editorial headline.
   ============================================================================= */

.gallery-header {
  padding: 140px var(--space-6) var(--space-10);
  max-width: 1200px;
  margin: 0 auto;
}

.gallery-header__headline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--type-display);
  line-height: 1.15;
  color: var(--color-text);
  max-width: 640px;
  font-weight: 400;
}

/* =============================================================================
   GALLERY GRID
   CSS columns (masonry) layout. Responsive column count via media queries.
   Items start invisible — gallery.js adds .gallery-visible to animate them in.
   ============================================================================= */

.gallery-grid {
  padding: 0 var(--space-5) var(--space-16);
  max-width: 1400px;
  margin: 0 auto;
  columns: 3;
  column-gap: var(--space-4);
}

/* Each figure breaks column context so masonry stacking works */
.gallery-item {
  break-inside: avoid;
  margin-bottom: var(--space-4);
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.8s var(--ease-reveal),
    transform 0.8s var(--ease-reveal);
}

/* gallery.js adds this class when the item enters the viewport */
.gallery-item.gallery-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger: column 2 items get a slight delay, column 3 a longer one.
   nth-child modulo runs on the flat list — this approximates column-based stagger
   without JS by using position in source order. */
.gallery-item:nth-child(3n + 2) {
  transition-delay: 0.08s;
}

.gallery-item:nth-child(3n + 3) {
  transition-delay: 0.16s;
}

/* Image fills item width, natural height preserved for masonry */
.gallery-item img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* =============================================================================
   INQUIRE CTA STRIP
   ============================================================================= */

.gallery-cta {
  text-align: center;
  padding: var(--space-16) var(--space-6);
  background: var(--color-surface);
}

.gallery-cta__headline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--type-headline);
  line-height: 1.2;
  color: var(--color-text);
  font-weight: 400;
  margin-bottom: var(--space-5);
}

/* =============================================================================
   RESPONSIVE
   ============================================================================= */

/* Tablet — 2 columns */
@media (max-width: 768px) {
  .gallery-header {
    padding: 120px var(--space-4) var(--space-8);
  }

  .gallery-grid {
    columns: 2;
    column-gap: var(--space-3);
    padding: 0 var(--space-4) var(--space-10);
  }

  /* Reset stagger delays on 2-col — column 2 items stagger */
  .gallery-item:nth-child(3n + 2) {
    transition-delay: 0s;
  }

  .gallery-item:nth-child(3n + 3) {
    transition-delay: 0s;
  }

  .gallery-item:nth-child(2n + 2) {
    transition-delay: 0.08s;
  }
}

/* Mobile — 1 column, no stagger needed */
@media (max-width: 480px) {
  .gallery-header {
    padding: 100px var(--space-3) var(--space-6);
  }

  .gallery-grid {
    columns: 1;
    padding: 0 var(--space-3) var(--space-8);
  }

  /* Remove all stagger on single column — items just appear sequentially */
  .gallery-item:nth-child(2n + 2),
  .gallery-item:nth-child(3n + 2),
  .gallery-item:nth-child(3n + 3) {
    transition-delay: 0s;
  }

  .gallery-cta {
    padding: var(--space-10) var(--space-4);
  }
}