/**
 * Page Components - Shared Styles
 * Contains: Gradient hero pattern
 * Used by: Multiple page templates
 * Note: Menu disable utility moved to navigation.css to prevent FOUC
 */

/* ========================================
   Gradient Hero Pattern
   ======================================== */

/* Shared gradient hero styling for page templates */
.contact-hero,
.give-hero,
.leadership-hero {
  background: linear-gradient(
    135deg,
    var(--color-primary) 0%,
    var(--color-primary) 100%
  );
  padding: 160px 0 80px 0;
  text-align: center;
  color: white;
}

.contact-hero__container,
.give-hero__container,
.leadership-hero__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.contact-hero__title,
.give-hero h1,
.leadership-hero__title {
  font-family: var(--font-heading);
  font-size: 64px;
  font-weight: 700;
  margin: 0 0 15px 0;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.contact-hero__subtitle,
.give-hero .hero-subtitle,
.leadership-hero__subtitle {
  font-family: var(--font-ui);
  font-size: 1.25rem;
  font-weight: 300;
  color: var(--color-tertiary-cyan);
  margin: 0;
}

@media (max-width: 768px) {
  .contact-hero,
  .give-hero,
  .leadership-hero {
    padding: 100px 20px 60px;
  }

  .contact-hero__title,
  .give-hero h1,
  .leadership-hero__title {
    font-size: 2.2rem;
  }
}