/* ============================================
   Rooted In Christ Florals — Gallery page
   Extends style.css. Tokens are NOT redefined here.
   Editorial masonry with a staggered fade-up on scroll.
   Motion stays on transform / opacity only.
   ============================================ */

/* ── Hero band ──────────────────────────────── */
.gallery-hero {
  position: relative;
  overflow: hidden;
}

/* A scripture line that reveals as the band enters view.
   .scripture-reveal is split into lines by scroll.js. */
.gallery-hero .hero-scripture-line {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: var(--text-lg);
  color: var(--plum);
  max-width: 560px;
  margin: var(--space-2) auto 0;
}
.gallery-hero .hero-scripture-line em {
  display: inline-block;
  font-size: var(--text-sm);
  font-style: normal;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--charcoal);
  margin-top: var(--space-1);
}

/* ── Masonry tiles: vary the visual weight ───── */
/* style.css already sets .gallery-grid to columns:4 and .gallery-item
   to break-inside:avoid. We add editorial variation on top so the wall
   stops reading as a uniform thumbnail grid. */

.gallery-item {
  box-shadow: var(--shadow);
  transition: transform var(--dur-normal) var(--ease-out-expo),
              box-shadow var(--dur-normal) var(--ease-out-expo);
}
.gallery-item:hover,
.gallery-item:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* Photos keep their NATURAL aspect inside the masonry columns — no forced
   crop. Each <img> carries explicit width/height attributes in the markup,
   so the intrinsic ratio reserves the right box height immediately (zero
   layout shift) even before the lazy image decodes.

   Why not a forced aspect-ratio rhythm: a fixed `aspect-ratio` only holds
   the box while the property is honoured. In a CSS multi-column flow, if a
   tile renders before that applies (or in a browser that drops it), the
   image falls back to height:auto with no intrinsic size and collapses to a
   near-zero-height panoramic sliver — the post-launch "half a cut in the
   middle" bug. Natural aspect + intrinsic attributes can never sliver. */
/* The grid tile (.gallery-item) owns a fixed 4/5 aspect-ratio in style.css;
   the image fills it with a center crop so every row is the same height.
   Source photos are ~4:5 portraits, so the crop is minimal. */
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* A few standout tiles get a soft ring to lift them out of the wall. */
.gallery-item.is-feature {
  outline: 2px solid var(--blush);
  outline-offset: 0;
}

/* ── Reveal cadence ─────────────────────────── */
/* Each tile is a plain .reveal observed individually by scroll.js
   (it unobserves after first reveal), so tiles below the fold still
   animate in when reached — nothing is stuck invisible. The per-tile
   --reveal-delay is authored in the HTML in small repeating batches so
   neighbours arrive in a soft wave, not all 138 at once and not a long
   queue. */

/* ── CTA close ──────────────────────────────── */
.gallery-cta {
  position: relative;
  text-align: center;
  padding: var(--space-section) var(--space-4);
  background: var(--light-gray);
  overflow: hidden;
}
.gallery-cta h2 { margin-bottom: var(--space-1); }
.gallery-cta p {
  color: var(--gray);
  max-width: 440px;
  margin: 0 auto var(--space-3);
}

/* Decorative tinted shape behind the CTA copy for a little depth,
   transform-only so it never shifts layout. */
.gallery-cta::before {
  content: '';
  position: absolute;
  top: -40%;
  left: 50%;
  width: 360px;
  height: 360px;
  background: radial-gradient(circle, var(--blush) 0%, transparent 70%);
  transform: translate3d(-50%, 0, 0);
  opacity: 0.6;
  pointer-events: none;
}

/* ── Reduced motion: no hover/focus lift ── */
@media (prefers-reduced-motion: reduce) {
  .gallery-item:hover,
  .gallery-item:focus-within { transform: none !important; }
}