/* ==========================================================================
   THE UNITY CHURCH — MINISTRIES PAGE
   Page-specific section styles only. Loads after foundation.css.
   ========================================================================== */

/* -------------------------------------------------------------------------
   Ministry profiles — content visible by default, not hidden behind hover
   ------------------------------------------------------------------------- */
.ministry-index { padding: var(--sp-section) clamp(1.25rem, 4vw, 3rem); max-width: 1300px; margin: 0 auto; }
.ministry-index-head { max-width: 60ch; margin-bottom: var(--sp-16); }
.ministry-index-head h2 { font-size: var(--text-2xl); font-weight: 600; letter-spacing: -0.015em; margin-bottom: var(--sp-3); }
.ministry-index-head p { color: var(--ink-soft); font-size: var(--text-lg); }

.ministry-profiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-8);
}
.ministry-profile {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #fff;
}
.ministry-profile-media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--cream-deep); }
.ministry-profile-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease-out-quint); }
@media (hover: hover) and (pointer: fine) {
  .ministry-profile:hover .ministry-profile-media img { transform: scale(1.05); }
}
.ministry-profile-body { padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; }
.ministry-profile-body h3 { font-size: var(--text-lg); font-weight: 600; }
.ministry-profile-body p { color: var(--ink-soft); font-size: var(--text-sm); line-height: 1.6; flex: 1; }
.ministry-profile-body .text-link { margin-top: var(--sp-2); align-self: flex-start; }

@media (max-width: 860px) {
  .ministry-profiles { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------------------
   Membership form
   ------------------------------------------------------------------------- */
.membership {
  background: var(--ink);
  color: var(--cream);
  padding: var(--sp-section) clamp(1.25rem, 4vw, 3rem);
}
.membership-inner {
  max-width: 720px;
  margin: 0 auto;
}
.membership-head { text-align: center; margin-bottom: var(--sp-12); }
.membership-head h2 { color: var(--cream); font-size: var(--text-2xl); font-weight: 600; letter-spacing: -0.015em; margin-bottom: var(--sp-3); }
.membership-head p { color: rgba(250, 246, 238, 0.75); }

.membership-form { display: flex; flex-direction: column; gap: var(--sp-4); }
.membership-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.membership-form .field label { color: var(--cream); }
.membership-form .btn { align-self: center; min-width: 220px; margin-top: var(--sp-2); }
.membership-status { text-align: center; font-size: var(--text-sm); margin-top: var(--sp-2); min-height: 1.2em; }
.membership-status.is-success { color: var(--gold-soft); }
.membership-status.is-error { color: var(--wine-soft); }

@media (max-width: 640px) {
  .membership-row { grid-template-columns: 1fr; }
}

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