/* ==========================================================================
   THE UNITY CHURCH — HOMEPAGE
   Page-specific section styles only. Shared tokens/reset/buttons/header/
   footer/modal/forms live in foundation.css, loaded before this file.
   ========================================================================== */

/* -------------------------------------------------------------------------
   Hero — the one signature entrance
   ------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.hero-media { position: absolute; inset: 0; }
.hero-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  animation: heroPhotoSettle 2.2s var(--ease-out-expo) forwards;
}
.hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, rgba(11, 10, 9, 0.92) 0%, rgba(11, 10, 9, 0.8) 38%, rgba(11, 10, 9, 0.45) 68%, rgba(11, 10, 9, 0.22) 100%);
}
.hero-content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3rem) clamp(3rem, 8vw, 6rem);
  color: var(--cream);
}
.hero-eyebrow,
.hero-headline,
.hero-copy,
.hero-actions {
  opacity: 0;
  transform: translateY(16px);
  animation: heroRise 0.9s var(--ease-out-quint) forwards;
}
.hero-eyebrow { animation-delay: 0.5s; }
.hero-headline { animation-delay: 0.65s; }
.hero-copy { animation-delay: 0.8s; }
.hero-actions { animation-delay: 0.95s; }

.hero-eyebrow {
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin-bottom: var(--sp-4);
}
.hero-headline {
  font-size: var(--text-hero);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.02em;
  max-width: 19ch;
  margin-bottom: var(--sp-6);
  color: var(--cream);
  text-shadow: 0 2px 24px rgba(11, 10, 9, 0.4);
}
.hero-copy {
  font-size: var(--text-lg);
  line-height: 1.6;
  max-width: 42ch;
  color: rgba(250, 246, 238, 0.86);
  margin-bottom: var(--sp-8);
}
.hero-actions { display: flex; gap: var(--sp-4); flex-wrap: wrap; }

@keyframes heroPhotoSettle { to { transform: scale(1); } }
@keyframes heroRise { to { opacity: 1; transform: translateY(0); } }

/* -------------------------------------------------------------------------
   Story (welcome / editorial)
   ------------------------------------------------------------------------- */
.story {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: stretch;
  min-height: 80vh;
}
.story-media { overflow: hidden; }
.story-media img { width: 100%; height: 100%; object-fit: cover; min-height: 360px; }
.story-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-4);
  padding: var(--sp-16) clamp(1.5rem, 5vw, 5rem);
  max-width: 640px;
}
.story-copy h2 { font-size: var(--text-2xl); font-weight: 600; letter-spacing: -0.015em; margin-bottom: var(--sp-2); }
.story-copy p { max-width: 52ch; color: var(--ink-soft); }
.story-copy .text-link { margin-top: var(--sp-4); }

@media (max-width: 900px) {
  .story { grid-template-columns: 1fr; min-height: 0; }
  .story-media img { min-height: 320px; }
  .story-copy { padding: var(--sp-12) clamp(1.25rem, 6vw, 2rem); max-width: none; }
}

/* -------------------------------------------------------------------------
   Visit
   ------------------------------------------------------------------------- */
.visit {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--ink);
  color: var(--cream);
}
.visit-media { overflow: hidden; min-height: 460px; }
.visit-media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.9; }
.visit-panel {
  padding: var(--sp-16) clamp(1.5rem, 5vw, 5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-6);
}
.visit-panel h2 { color: var(--cream); font-size: var(--text-2xl); font-weight: 600; letter-spacing: -0.015em; }
.visit-facts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6) var(--sp-8); }
.visit-facts dt {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin-bottom: var(--sp-2);
}
.visit-facts dd { margin: 0; font-size: var(--text-lg); color: var(--cream); }
.visit-note { color: rgba(250, 246, 238, 0.75); max-width: 46ch; }
.visit-note a { color: var(--gold-soft); text-decoration: underline; text-underline-offset: 3px; }
.visit-panel .btn { align-self: flex-start; margin-top: var(--sp-2); }

@media (max-width: 900px) {
  .visit { grid-template-columns: 1fr; }
  .visit-media { min-height: 320px; }
  .visit-panel { padding: var(--sp-12) clamp(1.25rem, 6vw, 2rem); }
  .visit-facts { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .visit-facts { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------------------
   Worship — full-bleed moment with gentle parallax (JS-driven, transform only)
   ------------------------------------------------------------------------- */
.worship {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.worship-photo {
  position: absolute;
  inset: -10% 0;
  width: 100%;
  height: 120%;
  object-fit: cover;
  will-change: transform;
}
.worship-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(11, 10, 9, 0.82) 0%, rgba(11, 10, 9, 0.35) 60%);
}
.worship-copy {
  position: relative;
  z-index: 1;
  max-width: 620px;
  padding: var(--sp-16) clamp(1.5rem, 5vw, 5rem);
  color: var(--cream);
}
.worship-copy h2 { color: var(--cream); font-size: var(--text-2xl); font-weight: 600; letter-spacing: -0.015em; margin-bottom: var(--sp-4); }
.worship-copy p { font-size: var(--text-lg); color: rgba(250, 246, 238, 0.85); }

/* -------------------------------------------------------------------------
   Ministries — varied sizing, not an identical grid
   ------------------------------------------------------------------------- */
.ministries { padding: var(--sp-section) clamp(1.25rem, 4vw, 3rem); max-width: 1400px; margin: 0 auto; }
.ministries-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-6);
  margin-bottom: var(--sp-12);
  flex-wrap: wrap;
}
.ministries-head h2 { font-size: var(--text-2xl); font-weight: 600; letter-spacing: -0.015em; }

.ministries-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--sp-6);
}
.ministry {
  position: relative;
  display: block;
  text-decoration: none;
  border-radius: var(--r-lg);
  overflow: hidden;
  min-height: 320px;
}
.ministry-feature { grid-row: span 1; min-height: 440px; }
.ministry img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease-out-quint);
}
.ministry::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(11, 10, 9, 0.78) 0%, rgba(11, 10, 9, 0) 55%);
}
.ministry-label {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 1;
  padding: var(--sp-6);
  color: var(--cream);
}
.ministry-label h3 { color: var(--cream); font-size: var(--text-lg); font-weight: 600; }
.ministry-label p { font-size: var(--text-sm); color: rgba(250, 246, 238, 0.8); margin-top: var(--sp-2); }

@media (hover: hover) and (pointer: fine) {
  .ministry:hover img { transform: scale(1.06); }
}

@media (max-width: 900px) {
  .ministries-grid { grid-template-columns: 1fr; }
  .ministry, .ministry-feature { min-height: 320px; }
}

/* -------------------------------------------------------------------------
   Word — scripture pull-quote + testimony invite
   ------------------------------------------------------------------------- */
.word {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--sp-16);
  align-items: center;
  padding: var(--sp-section) clamp(1.25rem, 4vw, 3rem);
  max-width: 1400px;
  margin: 0 auto;
}
.word-quote p {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 1.4rem + 2vw, 2.6rem);
  font-weight: 500;
  line-height: 1.25;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.word-quote cite {
  display: block;
  margin-top: var(--sp-4);
  font-style: normal;
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wine);
}
.word-quote-cta {
  margin-top: var(--sp-8);
}
.word-invite h2 { font-size: var(--text-xl); font-weight: 600; margin-bottom: var(--sp-3); letter-spacing: -0.01em; }
.word-invite p { max-width: 42ch; margin-bottom: var(--sp-6); color: var(--ink-soft); }

@media (max-width: 900px) {
  .word { grid-template-columns: 1fr; gap: var(--sp-8); }
}

/* -------------------------------------------------------------------------
   Give — the one wine-drenched, committed moment
   ------------------------------------------------------------------------- */
.give {
  background: linear-gradient(135deg, var(--wine) 0%, var(--wine-deep) 100%);
  padding: var(--sp-section) clamp(1.25rem, 4vw, 3rem);
}
.give-inner { max-width: 720px; margin: 0 auto; text-align: center; }
.give h2 { color: var(--cream); font-size: var(--text-2xl); font-weight: 600; letter-spacing: -0.015em; margin-bottom: var(--sp-4); }
.give p { color: rgba(250, 246, 238, 0.85); font-size: var(--text-lg); margin-bottom: var(--sp-8); }
.give-actions { display: flex; justify-content: center; gap: var(--sp-4); flex-wrap: wrap; }

/* -------------------------------------------------------------------------
   Newsletter
   ------------------------------------------------------------------------- */
.newsletter {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-16);
  padding: var(--sp-section) clamp(1.25rem, 4vw, 3rem);
  max-width: 1400px;
  margin: 0 auto;
  align-items: start;
}
.newsletter-copy h2 { font-size: var(--text-xl); font-weight: 600; margin-bottom: var(--sp-3); letter-spacing: -0.01em; }
.newsletter-copy p { max-width: 40ch; color: var(--ink-soft); }
.newsletter-form { display: flex; flex-direction: column; gap: var(--sp-4); }
.newsletter-form .btn { align-self: flex-start; }

@media (max-width: 900px) {
  .newsletter { grid-template-columns: 1fr; gap: var(--sp-8); }
}

/* -------------------------------------------------------------------------
   Reduced motion — hero-specific
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hero-photo,
  .hero-eyebrow, .hero-headline, .hero-copy, .hero-actions {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
  }
  .worship-photo { transform: none !important; }
}