/* ==========================================================================
   THE UNITY CHURCH — BUILDING PROJECT PAGE
   Page-specific section styles. Loads after foundation.css + give-page.css
   (reuses .bank-card / .copy-btn / .give-toast from the Give page for the
   single Building Project account here).
   ========================================================================== */

.project-gallery { padding: var(--sp-section) clamp(1.25rem, 4vw, 3rem); max-width: 1300px; margin: 0 auto; }
.project-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); }
.project-photo { border-radius: var(--r-lg); overflow: hidden; }
.project-photo img { width: 100%; height: 380px; object-fit: cover; display: block; transition: transform 0.8s var(--ease-out-quint); }
@media (hover: hover) and (pointer: fine) {
  .project-photo:hover img { transform: scale(1.05); }
}

@media (max-width: 760px) {
  .project-grid { grid-template-columns: 1fr; }
  .project-photo img { height: 280px; }
}

.project-statement { background: var(--cream-deep); padding: var(--sp-section) clamp(1.25rem, 4vw, 3rem); }
.project-statement-inner { max-width: 720px; margin: 0 auto; }
.project-statement h2 { font-size: var(--text-2xl); font-weight: 600; letter-spacing: -0.015em; margin-bottom: var(--sp-4); }
.project-statement p { color: var(--ink-soft); font-size: var(--text-lg); }

.project-give { padding: var(--sp-section) clamp(1.25rem, 4vw, 3rem); }
.project-give-head { text-align: center; max-width: 56ch; margin: 0 auto var(--sp-12); }
.project-give-head h2 { font-size: var(--text-2xl); font-weight: 600; letter-spacing: -0.015em; margin-bottom: var(--sp-3); }
.project-give-head p { color: var(--ink-soft); }
.project-give .bank-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }