/* ============================================
   Contact Page Styles
   ============================================ */

/* ── Hero ──────────────────────────────────── */
.contact-hero {
  background: var(--black);
  padding: 48px 0 32px;
  border-bottom: 3px solid var(--orange);
}
.contact-hero .section-eyebrow { color: var(--orange); }
.contact-hero .section-title   { color: var(--white); margin-bottom: 0; }

/* ── Layout ─────────────────────────────────── */
.contact-details-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (max-width: 600px) {
  .contact-hero { padding: 32px 0 24px; }
}

/* ============================================================
   Contact — Mobile Improvements
   ============================================================ */
@media (max-width: 600px) {
  /* Hero */
  .contact-hero { padding: 24px 0 20px; }
  .contact-hero .section-title { font-size: 1.6rem; }

  /* Stack layout */
  .contact-grid { grid-template-columns: 1fr; gap: 24px; }
  .contact-details { margin-top: 16px; gap: 14px; }
  .contact-item { gap: 12px; }
  .contact-item strong { font-size: 12px; }
  .contact-item span,
  .contact-item a { font-size: 13px; }

  /* Logo panel compact */
  .about-logo-col { padding: 20px 16px; border-radius: var(--radius-lg); }
  .footer-logo { max-width: 130px; margin-bottom: 14px; }
  .church-tagline { font-size: 12px; }
}